From 51968818975ada74f0135ca514d26c8017b2620c Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 21 Aug 2023 13:59:35 +0700
Subject: [PATCH 001/368] feat(components): add initia theme

---
 src/config/theme/index.ts  |   1 +
 src/config/theme/initia.ts | 142 +++++++++++++++++++++++++++++++++++++
 src/env.ts                 |   9 ++-
 3 files changed, 151 insertions(+), 1 deletion(-)
 create mode 100644 src/config/theme/initia.ts

diff --git a/src/config/theme/index.ts b/src/config/theme/index.ts
index 5c652a933..01a6befcc 100644
--- a/src/config/theme/index.ts
+++ b/src/config/theme/index.ts
@@ -1,3 +1,4 @@
 export * from "./default";
 export * from "./osmosis";
 export * from "./sei";
+export * from "./initia";
diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts
new file mode 100644
index 000000000..e3e408e9f
--- /dev/null
+++ b/src/config/theme/initia.ts
@@ -0,0 +1,142 @@
+import type { ThemeConfig } from "./types";
+
+export const INITIA_THEME: ThemeConfig = {
+  branding: {
+    logo: "https://assets.alleslabs.dev/integrations/initia/logo.png",
+    favicon: "https://assets.alleslabs.dev/integrations/initia/favicon.svg",
+    seo: {
+      appName: "Initia",
+      title: "Initia Explorer | Powered by Celatone",
+      description:
+        "Explore Initia's layered ecosystem effortlessly, bridging Web2 to Web3, while delving into sovereign applications.",
+      image: "https://assets.alleslabs.dev/integrations/initia/cover.jpg",
+      twitter: {
+        handle: "@initiafnd",
+        cardType: "summary_large_image",
+      },
+    },
+  },
+  fonts: {
+    heading: {
+      url: "https://xfonts.pro/fonts/pilat-wide_regular",
+      name: "Pilat Wide, serif",
+    },
+    body: {
+      url: "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap",
+      name: "Manrope, sans-serif",
+    },
+  },
+  colors: {
+    gradient: {
+      main: "linear(to-tr, #15AFF8, #5FC1EE)",
+    },
+    error: {
+      main: "#FF666E",
+      light: "#FF8086",
+      dark: "#B43E44",
+      background: "#4C1A1D",
+    },
+    warning: {
+      main: "#FFBB33",
+      light: "#FFCC66",
+      dark: "#CC8800",
+      background: "#523600",
+    },
+    success: {
+      main: "#42BEA6",
+      light: "#67CBB7",
+      dark: "#207966",
+      background: "#102E28",
+    },
+    background: {
+      main: "#070708",
+      overlay: "rgba(17, 17, 23, 0.7)",
+    },
+    text: {
+      main: "#F5F5F5",
+      dark: "#B7B7B7",
+      disabled: "#A1A6AA",
+    },
+    primary: {
+      main: "#2AB9FC",
+      light: "#5FC1EE",
+      lighter: "#79D5FF",
+      dark: "#15AFF8",
+      darker: "#008FD7",
+      background: "#005881",
+    },
+    secondary: {
+      main: "#2AB9FC",
+      light: "#5FC1EE",
+      dark: "#15AFF8",
+      darker: "#008FD7",
+      background: "#005881",
+    },
+    accent: {
+      main: "#D8BEFC",
+      light: "#D2A3F9",
+      lighter: "#79D5FF",
+      dark: "#A28FBD",
+      darker: "#6C5F7E",
+      background: "#36303F",
+    },
+    gray: {
+      100: "#F5F5F5",
+      400: "#B7B7B7",
+      500: "#A1A6AA",
+      600: "#7C7F83",
+      700: "#3B3E41",
+      800: "#26282B",
+      900: "#151617",
+    },
+  },
+  tag: {
+    signer: {
+      bg: "primary.darker",
+      color: "text.main",
+    },
+    related: {
+      bg: "accent.darker",
+      color: "inherit",
+    },
+  },
+  //   button: {
+  //     primary: {
+  //       background: "#F5F5F5",
+  //       color: "#151617",
+  //       disabledBackground: "#A1A6AA",
+  //       disabledColor: "#151617",
+  //     },
+  //   },
+  borderRadius: {
+    default: "4px",
+    iconButton: "36px",
+    viewButton: "0 0 8px 8px",
+    uploadButton: "50%",
+    tag: "full",
+    badge: "16px",
+    radio: "12px",
+    indicator: "2px",
+    stepper: "full",
+  },
+  jsonTheme: "monokai",
+  illustration: {
+    error:
+      "https://assets.alleslabs.dev/integrations/initia/illustration/404.svg",
+    searchNotFound:
+      "https://assets.alleslabs.dev/integrations/initia/illustration/search-not-found.svg",
+    searchEmpty:
+      "https://assets.alleslabs.dev/integrations/initia/illustration/search-empty.svg",
+    disconnected:
+      "https://assets.alleslabs.dev/integrations/initia/illustration/disconnected.svg",
+    overview: {
+      // Fill image url
+      main: "",
+    },
+  },
+  socialMedia: {
+    website: "https://initia.tech/",
+    github: "https://github.com/initia-labs",
+    twitter: "https://twitter.com/initiaFND",
+  },
+};
diff --git a/src/env.ts b/src/env.ts
index 6ad0eb6d9..8a779fea1 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -1,4 +1,9 @@
-import { DEFAULT_THEME, OSMOSIS_THEME, SEI_THEME } from "config/theme";
+import {
+  DEFAULT_THEME,
+  INITIA_THEME,
+  OSMOSIS_THEME,
+  SEI_THEME,
+} from "config/theme";
 
 export const SUPPORTED_CHAIN_IDS: string[] = (() => {
   const chainIds = process.env.NEXT_PUBLIC_SUPPORTED_CHAIN_IDS?.split(",");
@@ -36,6 +41,8 @@ export const CURR_THEME = (() => {
       return OSMOSIS_THEME;
     case "sei":
       return SEI_THEME;
+    case "initia":
+      return INITIA_THEME;
     default:
       return DEFAULT_THEME;
   }

From 7da534600f7679f1a48eaf748ab549030d604176 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 21 Aug 2023 15:02:56 +0700
Subject: [PATCH 002/368] feat(components): add initia config

---
 src/config/chain/default.ts  |  3 +++
 src/config/chain/index.ts    |  2 ++
 src/config/chain/initia.ts   | 50 ++++++++++++++++++++++++++++++++++++
 src/config/chain/neutron.ts  |  6 +++++
 src/config/chain/osmosis.ts  |  9 +++++++
 src/config/chain/sei.ts      |  6 +++++
 src/config/chain/stargaze.ts |  6 +++++
 src/config/chain/terra.ts    |  6 +++++
 src/config/chain/types.ts    |  3 +++
 9 files changed, 91 insertions(+)
 create mode 100644 src/config/chain/initia.ts

diff --git a/src/config/chain/default.ts b/src/config/chain/default.ts
index f2e899988..adf7976a7 100644
--- a/src/config/chain/default.ts
+++ b/src/config/chain/default.ts
@@ -16,6 +16,9 @@ export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
     wasm: {
       enabled: false,
     },
+    move: {
+      enabled: false,
+    },
     pool: {
       enabled: false,
     },
diff --git a/src/config/chain/index.ts b/src/config/chain/index.ts
index 6299e2761..5e89f99db 100644
--- a/src/config/chain/index.ts
+++ b/src/config/chain/index.ts
@@ -1,3 +1,4 @@
+import { INITIA_CHAIN_CONFIGS } from "./initia";
 import { NEUTRON_CHAIN_CONFIGS } from "./neutron";
 import { OSMOSIS_CHAIN_CONFIGS } from "./osmosis";
 import { SEI_CHAIN_CONFIGS } from "./sei";
@@ -14,4 +15,5 @@ export const CHAIN_CONFIGS: ChainConfigs = {
   ...NEUTRON_CHAIN_CONFIGS,
   ...STARGAZE_CHAIN_CONFIGS,
   ...TERRA_CHAIN_CONFIGS,
+  ...INITIA_CHAIN_CONFIGS,
 };
diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
new file mode 100644
index 000000000..f4a440ce4
--- /dev/null
+++ b/src/config/chain/initia.ts
@@ -0,0 +1,50 @@
+import { wallets as keplrWallets } from "@cosmos-kit/keplr";
+
+import type { ChainConfigs } from "./types";
+
+export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
+  "stone-9": {
+    chain: "initia",
+    registryChainName: "initia",
+    prettyName: "Initia Testnet",
+    // TODO change to initia
+    lcd: "https://lcd.osmosis.zone",
+    rpc: "https://rpc.osmosis.zone:443",
+    indexer: "https://osmosis-mainnet-graphql.alleslabs.dev/v1/graphql",
+    api: "https://celatone-api.alleslabs.dev",
+    wallets: [...keplrWallets],
+    features: {
+      faucet: {
+        enabled: false,
+      },
+      wasm: {
+        enabled: false,
+      },
+      move: {
+        enabled: true,
+      },
+      pool: {
+        enabled: false,
+      },
+      publicProject: {
+        enabled: false,
+      },
+      gov: {
+        enabled: true,
+      },
+    },
+    gas: {
+      gasPrice: {
+        tokenPerGas: 0.025,
+        denom: "init",
+      },
+      gasAdjustment: 1.5,
+      maxGasLimit: 25_000_000,
+    },
+    explorerLink: {
+      validator: "https://app.initia.tech/validator",
+      proposal: "https://app.initia.tech/proposals",
+    },
+    extra: {},
+  },
+};
diff --git a/src/config/chain/neutron.ts b/src/config/chain/neutron.ts
index 455cd693c..88937e6d5 100644
--- a/src/config/chain/neutron.ts
+++ b/src/config/chain/neutron.ts
@@ -21,6 +21,9 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
@@ -63,6 +66,9 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
diff --git a/src/config/chain/osmosis.ts b/src/config/chain/osmosis.ts
index 457c258c2..76fb3a7ae 100644
--- a/src/config/chain/osmosis.ts
+++ b/src/config/chain/osmosis.ts
@@ -21,6 +21,9 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: true,
         url: "https://app.osmosis.zone/pool",
@@ -65,6 +68,9 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: true,
         url: "https://testnet.osmosis.zone/pool",
@@ -109,6 +115,9 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
diff --git a/src/config/chain/sei.ts b/src/config/chain/sei.ts
index 800985ca7..bce746362 100644
--- a/src/config/chain/sei.ts
+++ b/src/config/chain/sei.ts
@@ -27,6 +27,9 @@ export const SEI_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
@@ -71,6 +74,9 @@ export const SEI_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
diff --git a/src/config/chain/stargaze.ts b/src/config/chain/stargaze.ts
index 189f55da7..fbfca617a 100644
--- a/src/config/chain/stargaze.ts
+++ b/src/config/chain/stargaze.ts
@@ -21,6 +21,9 @@ export const STARGAZE_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
@@ -63,6 +66,9 @@ export const STARGAZE_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
diff --git a/src/config/chain/terra.ts b/src/config/chain/terra.ts
index 35d39106b..0a849d1dd 100644
--- a/src/config/chain/terra.ts
+++ b/src/config/chain/terra.ts
@@ -21,6 +21,9 @@ export const TERRA_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
@@ -64,6 +67,9 @@ export const TERRA_CHAIN_CONFIGS: ChainConfigs = {
         storeCodeMaxFileSize: 800_000,
         clearAdminGas: 50_000,
       },
+      move: {
+        enabled: false,
+      },
       pool: {
         enabled: false,
       },
diff --git a/src/config/chain/types.ts b/src/config/chain/types.ts
index a2df8bade..2ae2e1009 100644
--- a/src/config/chain/types.ts
+++ b/src/config/chain/types.ts
@@ -17,6 +17,8 @@ type WasmConfig =
       enabled: false;
     };
 
+type MoveConfig = { enabled: boolean };
+
 type PoolConfig =
   | {
       enabled: true;
@@ -53,6 +55,7 @@ export interface ChainConfig {
   features: {
     faucet: FaucetConfig;
     wasm: WasmConfig;
+    move: MoveConfig;
     pool: PoolConfig;
     publicProject: PublicProjectConfig;
     gov: GovConfig;

From 4f39794c131f6a130ab7e5fbec8ad960189511d5 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 21 Aug 2023 17:34:33 +0700
Subject: [PATCH 003/368] feat(components): adjust high level nav and sidebar

---
 src/config/chain/initia.ts                   |  4 +-
 src/lib/app-provider/hooks/useConfig.ts      | 14 +++++
 src/lib/layout/SubHeader.tsx                 | 60 ++++++++++++++------
 src/lib/layout/navbar/index.tsx              | 37 ++++++++++++
 src/lib/pages/deploy-script/index.tsx        | 14 +++++
 src/lib/pages/interaction/index.tsx          | 19 +++++++
 src/lib/pages/modules/index.tsx              | 14 +++++
 src/lib/pages/publish-module/index.tsx       | 14 +++++
 src/pages/[network]/deploy-script/index.tsx  |  3 +
 src/pages/[network]/interaction/[type].tsx   |  3 +
 src/pages/[network]/modules/index.tsx        |  3 +
 src/pages/[network]/publish-module/index.tsx |  3 +
 src/pages/deploy-script/index.tsx            |  3 +
 src/pages/interaction/[type].tsx             |  3 +
 src/pages/modules/index.tsx                  |  3 +
 src/pages/publish-module/index.tsx           |  3 +
 16 files changed, 180 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/pages/deploy-script/index.tsx
 create mode 100644 src/lib/pages/interaction/index.tsx
 create mode 100644 src/lib/pages/modules/index.tsx
 create mode 100644 src/lib/pages/publish-module/index.tsx
 create mode 100644 src/pages/[network]/deploy-script/index.tsx
 create mode 100644 src/pages/[network]/interaction/[type].tsx
 create mode 100644 src/pages/[network]/modules/index.tsx
 create mode 100644 src/pages/[network]/publish-module/index.tsx
 create mode 100644 src/pages/deploy-script/index.tsx
 create mode 100644 src/pages/interaction/[type].tsx
 create mode 100644 src/pages/modules/index.tsx
 create mode 100644 src/pages/publish-module/index.tsx

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index f4a440ce4..3a885c3c0 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -5,7 +5,7 @@ import type { ChainConfigs } from "./types";
 export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
   "stone-9": {
     chain: "initia",
-    registryChainName: "initia",
+    registryChainName: "osmosis",
     prettyName: "Initia Testnet",
     // TODO change to initia
     lcd: "https://lcd.osmosis.zone",
@@ -27,7 +27,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
         enabled: false,
       },
       publicProject: {
-        enabled: false,
+        enabled: true,
       },
       gov: {
         enabled: true,
diff --git a/src/lib/app-provider/hooks/useConfig.ts b/src/lib/app-provider/hooks/useConfig.ts
index 8fe3e31ed..5d73f2339 100644
--- a/src/lib/app-provider/hooks/useConfig.ts
+++ b/src/lib/app-provider/hooks/useConfig.ts
@@ -38,6 +38,20 @@ export const useWasmConfig = ({
   return useBaseConfig({ feature: wasm, shouldRedirect });
 };
 
+export const useMoveConfig = ({
+  shouldRedirect,
+}: {
+  shouldRedirect: boolean;
+}) => {
+  const {
+    chainConfig: {
+      features: { move },
+    },
+  } = useCelatoneApp();
+
+  return useBaseConfig({ feature: move, shouldRedirect });
+};
+
 export const useFaucetConfig = ({
   shouldRedirect,
 }: {
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index 13f919202..078dcc6f4 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -9,7 +9,12 @@ import {
 import type { CSSProperties, Dispatch, SetStateAction } from "react";
 import { useEffect, useRef } from "react";
 
-import { usePoolConfig, useGovConfig, useWasmConfig } from "lib/app-provider";
+import {
+  usePoolConfig,
+  useGovConfig,
+  useWasmConfig,
+  useMoveConfig,
+} from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
@@ -70,6 +75,7 @@ interface SubHeaderProps {
   setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
   setIsExpand: Dispatch<SetStateAction<boolean>>;
 }
+
 const SubHeader = ({
   isExpand,
   isDevMode,
@@ -77,28 +83,46 @@ const SubHeader = ({
   setIsExpand,
 }: SubHeaderProps) => {
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
+  const moveConfig = useMoveConfig({ shouldRedirect: false });
   const poolConfig = usePoolConfig({ shouldRedirect: false });
   const govConfig = useGovConfig({ shouldRedirect: false });
 
   const prevIsDevModeRef = useRef<boolean>(Boolean(isDevMode));
 
-  const subHeaderMenu: SubHeaderMenuInfo[] = [
-    { name: "Overview", slug: "/", icon: "home" },
-    { name: "Transactions", slug: "/txs", icon: "file" },
-    { name: "Blocks", slug: "/blocks", icon: "block" },
-    ...(wasmConfig.enabled
-      ? ([
-          { name: "Codes", slug: "/codes", icon: "code" },
-          { name: "Contracts", slug: "/contracts", icon: "contract-address" },
-        ] as const)
-      : []),
-    ...(govConfig.enabled
-      ? ([{ name: "Proposals", slug: "/proposals", icon: "proposal" }] as const)
-      : []),
-    ...(poolConfig.enabled
-      ? ([{ name: "Osmosis Pools", slug: "/pools", icon: "pool" }] as const)
-      : []),
-  ];
+  let subHeaderMenu: SubHeaderMenuInfo[] = [];
+  if (moveConfig)
+    subHeaderMenu = [
+      { name: "Overview", slug: "/", icon: "home" },
+      { name: "Transactions", slug: "/txs", icon: "file" },
+      { name: "Blocks", slug: "/blocks", icon: "block" },
+      { name: "Modules", slug: "/modules", icon: "block" },
+      ...(govConfig.enabled
+        ? ([
+            { name: "Proposals", slug: "/proposals", icon: "proposal" },
+          ] as const)
+        : []),
+    ];
+  else
+    subHeaderMenu = [
+      { name: "Overview", slug: "/", icon: "home" },
+      { name: "Transactions", slug: "/txs", icon: "file" },
+      { name: "Blocks", slug: "/blocks", icon: "block" },
+      ...(wasmConfig.enabled
+        ? ([
+            { name: "Codes", slug: "/codes", icon: "code" },
+            { name: "Contracts", slug: "/contracts", icon: "contract-address" },
+          ] as const)
+        : []),
+      ...(govConfig.enabled
+        ? ([
+            { name: "Proposals", slug: "/proposals", icon: "proposal" },
+          ] as const)
+        : []),
+      ...(poolConfig.enabled
+        ? ([{ name: "Osmosis Pools", slug: "/pools", icon: "pool" }] as const)
+        : []),
+    ];
+
   const isCurrentPage = useIsCurrentPage();
 
   const activeColor = "primary.light";
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 61138553e..a7c4bcb68 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -5,6 +5,7 @@ import {
   usePublicProjectConfig,
   useCurrentChain,
   useWasmConfig,
+  useMoveConfig,
 } from "lib/app-provider";
 import type { IconKeys } from "lib/components/icon";
 import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data";
@@ -28,6 +29,7 @@ const Navbar = ({ isExpand, isDevMode, setIsExpand }: NavbarProps) => {
   const publicProject = usePublicProjectConfig({ shouldRedirect: false });
   const isCurrentPage = useIsCurrentPage();
   const wasm = useWasmConfig({ shouldRedirect: false });
+  const move = useMoveConfig({ shouldRedirect: false });
 
   const { address } = useCurrentChain();
 
@@ -100,6 +102,41 @@ const Navbar = ({ isExpand, isDevMode, setIsExpand }: NavbarProps) => {
           },
         ]
       : []),
+    ...(isDevMode && move.enabled
+      ? [
+          {
+            category: "Quick Actions",
+            submenu: [
+              // TODO change path to /account/0x1
+              {
+                name: "0x1 Page",
+                slug: "/deploy",
+                icon: "home" as IconKeys,
+              },
+              {
+                name: "Publish Module",
+                slug: "/publish-module",
+                icon: "add-new" as IconKeys,
+              },
+              {
+                name: "View",
+                slug: "/interaction/view",
+                icon: "query" as IconKeys,
+              },
+              {
+                name: "Execute",
+                slug: "/interaction/execute",
+                icon: "execute" as IconKeys,
+              },
+              {
+                name: "Deploy Script",
+                slug: "/deploy-script",
+                icon: "code" as IconKeys,
+              },
+            ],
+          },
+        ]
+      : []),
     ...(wasm.enabled
       ? [
           {
diff --git a/src/lib/pages/deploy-script/index.tsx b/src/lib/pages/deploy-script/index.tsx
new file mode 100644
index 000000000..09fb47f3a
--- /dev/null
+++ b/src/lib/pages/deploy-script/index.tsx
@@ -0,0 +1,14 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+export const DeployScript = () => {
+  return (
+    <Flex>
+      <Text>
+        DeployScript: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        Aliquam voluptas hic aperiam ad sint unde sapiente cupiditate! Quo et
+        cupiditate iure, sequi deserunt tempora corrupti eum. Error facere
+        placeat repellendus?
+      </Text>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
new file mode 100644
index 000000000..8d9702313
--- /dev/null
+++ b/src/lib/pages/interaction/index.tsx
@@ -0,0 +1,19 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+export const Interaction = () => {
+  const { query } = useRouter();
+
+  return (
+    <Flex>
+      <h1>{query.type}</h1>
+      <br />
+      <Text>
+        Interaction: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        Aliquam voluptas hic aperiam ad sint unde sapiente cupiditate! Quo et
+        cupiditate iure, sequi deserunt tempora corrupti eum. Error facere
+        placeat repellendus?
+      </Text>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/modules/index.tsx b/src/lib/pages/modules/index.tsx
new file mode 100644
index 000000000..9edcb9d5a
--- /dev/null
+++ b/src/lib/pages/modules/index.tsx
@@ -0,0 +1,14 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+export const Modules = () => {
+  return (
+    <Flex>
+      <Text>
+        Modules: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        Aliquam voluptas hic aperiam ad sint unde sapiente cupiditate! Quo et
+        cupiditate iure, sequi deserunt tempora corrupti eum. Error facere
+        placeat repellendus?
+      </Text>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
new file mode 100644
index 000000000..859e48c29
--- /dev/null
+++ b/src/lib/pages/publish-module/index.tsx
@@ -0,0 +1,14 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+export const PublishModule = () => {
+  return (
+    <Flex>
+      <Text>
+        PublishModule: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        Aliquam voluptas hic aperiam ad sint unde sapiente cupiditate! Quo et
+        cupiditate iure, sequi deserunt tempora corrupti eum. Error facere
+        placeat repellendus?
+      </Text>
+    </Flex>
+  );
+};
diff --git a/src/pages/[network]/deploy-script/index.tsx b/src/pages/[network]/deploy-script/index.tsx
new file mode 100644
index 000000000..b2b13842d
--- /dev/null
+++ b/src/pages/[network]/deploy-script/index.tsx
@@ -0,0 +1,3 @@
+import DeployScript from "pages/deploy-script";
+
+export default DeployScript;
diff --git a/src/pages/[network]/interaction/[type].tsx b/src/pages/[network]/interaction/[type].tsx
new file mode 100644
index 000000000..6812f4848
--- /dev/null
+++ b/src/pages/[network]/interaction/[type].tsx
@@ -0,0 +1,3 @@
+import { Interaction } from "lib/pages/interaction";
+
+export default Interaction;
diff --git a/src/pages/[network]/modules/index.tsx b/src/pages/[network]/modules/index.tsx
new file mode 100644
index 000000000..9d66bb8ef
--- /dev/null
+++ b/src/pages/[network]/modules/index.tsx
@@ -0,0 +1,3 @@
+import Modules from "pages/modules";
+
+export default Modules;
diff --git a/src/pages/[network]/publish-module/index.tsx b/src/pages/[network]/publish-module/index.tsx
new file mode 100644
index 000000000..3e1ca0dbf
--- /dev/null
+++ b/src/pages/[network]/publish-module/index.tsx
@@ -0,0 +1,3 @@
+import { PublishModule } from "lib/pages/publish-module";
+
+export default PublishModule;
diff --git a/src/pages/deploy-script/index.tsx b/src/pages/deploy-script/index.tsx
new file mode 100644
index 000000000..0df4bda56
--- /dev/null
+++ b/src/pages/deploy-script/index.tsx
@@ -0,0 +1,3 @@
+import { DeployScript } from "lib/pages/deploy-script";
+
+export default DeployScript;
diff --git a/src/pages/interaction/[type].tsx b/src/pages/interaction/[type].tsx
new file mode 100644
index 000000000..6812f4848
--- /dev/null
+++ b/src/pages/interaction/[type].tsx
@@ -0,0 +1,3 @@
+import { Interaction } from "lib/pages/interaction";
+
+export default Interaction;
diff --git a/src/pages/modules/index.tsx b/src/pages/modules/index.tsx
new file mode 100644
index 000000000..49cccb88d
--- /dev/null
+++ b/src/pages/modules/index.tsx
@@ -0,0 +1,3 @@
+import { Modules } from "lib/pages/modules";
+
+export default Modules;
diff --git a/src/pages/publish-module/index.tsx b/src/pages/publish-module/index.tsx
new file mode 100644
index 000000000..3e1ca0dbf
--- /dev/null
+++ b/src/pages/publish-module/index.tsx
@@ -0,0 +1,3 @@
+import { PublishModule } from "lib/pages/publish-module";
+
+export default PublishModule;

From 843339af622e9c30207ea5dcfd69cb8399c23179 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 21 Aug 2023 17:35:53 +0700
Subject: [PATCH 004/368] feat(components): add change log

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f87592d9e..ebdbd8628 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#488](https://github.com/alleslabs/celatone-frontend/pull/488) Add initia navigation and sidebar
 - [#481](https://github.com/alleslabs/celatone-frontend/pull/481) Support Stargaze testnet
 - [#471](https://github.com/alleslabs/celatone-frontend/pull/471) Add proposal config, use Hasura admin secret
 - [#467](https://github.com/alleslabs/celatone-frontend/pull/467) Dynamic wallet by network, add disableAnyofAddress config

From 7e790c0d155dc8bc7fe8b3993c05f959011329fe Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 21 Aug 2023 17:37:50 +0700
Subject: [PATCH 005/368] fix(components): change module icon

---
 src/lib/layout/SubHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index 078dcc6f4..a9e2b3cac 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -95,7 +95,7 @@ const SubHeader = ({
       { name: "Overview", slug: "/", icon: "home" },
       { name: "Transactions", slug: "/txs", icon: "file" },
       { name: "Blocks", slug: "/blocks", icon: "block" },
-      { name: "Modules", slug: "/modules", icon: "block" },
+      { name: "Modules", slug: "/modules", icon: "contract-address" },
       ...(govConfig.enabled
         ? ([
             { name: "Proposals", slug: "/proposals", icon: "proposal" },

From f4b63acfbf07a3282bce2b53ad8400f1142c4dba Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 22 Aug 2023 10:18:19 +0700
Subject: [PATCH 006/368] fix(components): revise sub header structure

---
 src/lib/layout/SubHeader.tsx | 61 +++++++++++++++++-------------------
 1 file changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index a9e2b3cac..d70be01c2 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -89,39 +89,34 @@ const SubHeader = ({
 
   const prevIsDevModeRef = useRef<boolean>(Boolean(isDevMode));
 
-  let subHeaderMenu: SubHeaderMenuInfo[] = [];
-  if (moveConfig)
-    subHeaderMenu = [
-      { name: "Overview", slug: "/", icon: "home" },
-      { name: "Transactions", slug: "/txs", icon: "file" },
-      { name: "Blocks", slug: "/blocks", icon: "block" },
-      { name: "Modules", slug: "/modules", icon: "contract-address" },
-      ...(govConfig.enabled
-        ? ([
-            { name: "Proposals", slug: "/proposals", icon: "proposal" },
-          ] as const)
-        : []),
-    ];
-  else
-    subHeaderMenu = [
-      { name: "Overview", slug: "/", icon: "home" },
-      { name: "Transactions", slug: "/txs", icon: "file" },
-      { name: "Blocks", slug: "/blocks", icon: "block" },
-      ...(wasmConfig.enabled
-        ? ([
-            { name: "Codes", slug: "/codes", icon: "code" },
-            { name: "Contracts", slug: "/contracts", icon: "contract-address" },
-          ] as const)
-        : []),
-      ...(govConfig.enabled
-        ? ([
-            { name: "Proposals", slug: "/proposals", icon: "proposal" },
-          ] as const)
-        : []),
-      ...(poolConfig.enabled
-        ? ([{ name: "Osmosis Pools", slug: "/pools", icon: "pool" }] as const)
-        : []),
-    ];
+  const subHeaderMenu: SubHeaderMenuInfo[] = [
+    { name: "Overview", slug: "/", icon: "home" },
+    { name: "Transactions", slug: "/txs", icon: "file" },
+    { name: "Blocks", slug: "/blocks", icon: "block" },
+  ];
+
+  if (moveConfig.enabled)
+    subHeaderMenu.push({
+      name: "Modules",
+      slug: "/modules",
+      icon: "contract-address",
+    });
+
+  if (wasmConfig.enabled)
+    subHeaderMenu.push(
+      { name: "Codes", slug: "/codes", icon: "code" },
+      { name: "Contracts", slug: "/contracts", icon: "contract-address" }
+    );
+
+  if (govConfig.enabled)
+    subHeaderMenu.push({
+      name: "Proposals",
+      slug: "/proposals",
+      icon: "proposal",
+    });
+
+  if (poolConfig.enabled)
+    subHeaderMenu.push({ name: "Osmosis Pools", slug: "/pools", icon: "pool" });
 
   const isCurrentPage = useIsCurrentPage();
 

From 6c37c55dd218d1928ebeb43d89cf7462431af598 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 22 Aug 2023 12:10:44 +0700
Subject: [PATCH 007/368] feat(components): add module interaction page empty
 state ui

---
 CHANGELOG.md                                  |  1 +
 src/config/theme/initia.ts                    | 18 ++--
 src/config/theme/sei.ts                       |  2 +
 src/config/theme/types.ts                     |  2 +
 src/lib/components/MotionBox.tsx              |  7 ++
 src/lib/components/state/StateImage.tsx       |  8 +-
 .../component/InteractionTypeSwitch.tsx       | 82 ++++++++++++++++
 src/lib/pages/interaction/index.tsx           | 98 ++++++++++++++++---
 src/lib/styles/theme/components/button.ts     |  4 +-
 src/pages/[network]/interaction/index.tsx     |  3 +
 src/pages/interaction/index.tsx               |  3 +
 11 files changed, 204 insertions(+), 24 deletions(-)
 create mode 100644 src/lib/components/MotionBox.tsx
 create mode 100644 src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
 create mode 100644 src/pages/[network]/interaction/index.tsx
 create mode 100644 src/pages/interaction/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ebdbd8628..b76f9e96e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#490](https://github.com/alleslabs/celatone-frontend/pull/490) Add initia module interaction page
 - [#488](https://github.com/alleslabs/celatone-frontend/pull/488) Add initia navigation and sidebar
 - [#481](https://github.com/alleslabs/celatone-frontend/pull/481) Support Stargaze testnet
 - [#471](https://github.com/alleslabs/celatone-frontend/pull/471) Add proposal config, use Hasura admin secret
diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts
index e3e408e9f..01fa690c5 100644
--- a/src/config/theme/initia.ts
+++ b/src/config/theme/initia.ts
@@ -100,14 +100,16 @@ export const INITIA_THEME: ThemeConfig = {
       color: "inherit",
     },
   },
-  //   button: {
-  //     primary: {
-  //       background: "#F5F5F5",
-  //       color: "#151617",
-  //       disabledBackground: "#A1A6AA",
-  //       disabledColor: "#151617",
-  //     },
-  //   },
+  button: {
+    primary: {
+      background: "#F5F5F5",
+      color: "#151617",
+      disabledBackground: "#A1A6AA",
+      disabledColor: "#151617",
+      hoverBackground: "#B7B7B7",
+      activeBackground: "#B7B7B7",
+    },
+  },
   borderRadius: {
     default: "4px",
     iconButton: "36px",
diff --git a/src/config/theme/sei.ts b/src/config/theme/sei.ts
index b299570ae..2af9f694e 100644
--- a/src/config/theme/sei.ts
+++ b/src/config/theme/sei.ts
@@ -106,6 +106,8 @@ export const SEI_THEME: ThemeConfig = {
       color: "#0C1C23",
       disabledBackground: "#787971",
       disabledColor: "#0C1C23",
+      hoverBackground: "FAF6EF",
+      activeBackground: "FAF6EF",
     },
     outlinePrimary: {
       borderColor: "#787971",
diff --git a/src/config/theme/types.ts b/src/config/theme/types.ts
index c5c4682cc..e5780adba 100644
--- a/src/config/theme/types.ts
+++ b/src/config/theme/types.ts
@@ -103,6 +103,8 @@ export type ThemeConfig = {
       color: string;
       disabledBackground: string;
       disabledColor: string;
+      hoverBackground: string;
+      activeBackground: string;
     };
     outlinePrimary?: {
       borderColor: string;
diff --git a/src/lib/components/MotionBox.tsx b/src/lib/components/MotionBox.tsx
new file mode 100644
index 000000000..1477da9c8
--- /dev/null
+++ b/src/lib/components/MotionBox.tsx
@@ -0,0 +1,7 @@
+import { chakra, shouldForwardProp } from "@chakra-ui/react";
+import { motion, isValidMotionProp } from "framer-motion";
+
+export const MotionBox = chakra(motion.div, {
+  shouldForwardProp: (prop) =>
+    isValidMotionProp(prop) || shouldForwardProp(prop),
+});
diff --git a/src/lib/components/state/StateImage.tsx b/src/lib/components/state/StateImage.tsx
index 182f79d78..6095edcec 100644
--- a/src/lib/components/state/StateImage.tsx
+++ b/src/lib/components/state/StateImage.tsx
@@ -12,12 +12,16 @@ const imageSourceMap: Record<ImageVariant, string> = {
 
 interface StateImageProps {
   imageVariant: ImageVariant;
+  width?: string;
 }
 
-export const StateImage = ({ imageVariant }: StateImageProps) => (
+export const StateImage = ({
+  imageVariant,
+  width = "200px",
+}: StateImageProps) => (
   <Image
     src={imageSourceMap[imageVariant]}
     alt="result not found"
-    width="200px"
+    width={width}
   />
 );
diff --git a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
new file mode 100644
index 000000000..06301cc57
--- /dev/null
+++ b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
@@ -0,0 +1,82 @@
+import { Flex, Heading } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
+import { useRef } from "react";
+
+import { MotionBox } from "lib/components/MotionBox";
+
+export enum MessageTabs {
+  VIEW_MODULE = "View",
+  EXECUTE_MODULE = "Execute",
+}
+
+export const viewModuleFormKey = MessageTabs.VIEW_MODULE as "View";
+export const executeModuleFormKey = MessageTabs.EXECUTE_MODULE as "Execute";
+
+interface InteractionTypeSwitchProps {
+  currentTab: MessageTabs;
+  disabled?: boolean;
+  onTabChange: Dispatch<SetStateAction<MessageTabs>>;
+}
+
+const tabs = Object.values(MessageTabs);
+
+export const InteractionTypeSwitch = ({
+  currentTab,
+  disabled = false,
+  onTabChange,
+}: InteractionTypeSwitchProps) => {
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const activeIndex = tabs.indexOf(currentTab);
+
+  return (
+    <Flex
+      border="1px solid var(--chakra-colors-gray-700)"
+      borderRadius="4px"
+      p={1}
+      direction="row"
+      align="center"
+      position="relative"
+      sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
+    >
+      {tabs.map((tab, idx) => (
+        <MotionBox
+          key={tab}
+          w="full"
+          ref={(el) => {
+            tabRefs.current[idx] = el;
+          }}
+          cursor="pointer"
+          p="2px 10px"
+          variants={{
+            active: { color: "var(--chakra-colors-text-main)" },
+            inactive: {
+              color: "var(--chakra-colors-primary-light)",
+            },
+          }}
+          initial="inactive"
+          animate={currentTab === tab ? "active" : "inactive"}
+          onClick={() => onTabChange(tab)}
+          zIndex={1}
+          textAlign="center"
+        >
+          <Heading as="h6" variant="h6" fontSize="14px">
+            {tab}
+          </Heading>
+        </MotionBox>
+      ))}
+      <MotionBox
+        h={tabRefs.current[activeIndex]?.clientHeight}
+        w={tabRefs.current[activeIndex]?.clientWidth}
+        position="absolute"
+        borderRadius="2px"
+        backgroundColor="primary.dark"
+        animate={{ left: `${tabRefs.current[activeIndex]?.offsetLeft ?? 0}px` }}
+        transition={{
+          type: "spring",
+          stiffness: "250",
+          damping: "30",
+        }}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 8d9702313..f90bc4994 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -1,19 +1,93 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Badge, Button, Flex, Heading, Text, Box } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import PageContainer from "lib/components/PageContainer";
+import { StateImage } from "lib/components/state";
+
+import {
+  InteractionTypeSwitch,
+  MessageTabs,
+} from "./component/InteractionTypeSwitch";
 
 export const Interaction = () => {
-  const { query } = useRouter();
+  const { query, isReady } = useRouter();
+  const [tab, setTab] = useState(MessageTabs.VIEW_MODULE);
+
+  useEffect(() => {
+    if (isReady)
+      setTab(
+        query.type === "execute"
+          ? MessageTabs.EXECUTE_MODULE
+          : MessageTabs.VIEW_MODULE
+      );
+  }, [isReady, query.type]);
 
   return (
-    <Flex>
-      <h1>{query.type}</h1>
-      <br />
-      <Text>
-        Interaction: Lorem ipsum dolor sit amet consectetur adipisicing elit.
-        Aliquam voluptas hic aperiam ad sint unde sapiente cupiditate! Quo et
-        cupiditate iure, sequi deserunt tempora corrupti eum. Error facere
-        placeat repellendus?
-      </Text>
-    </Flex>
+    <PageContainer>
+      <Heading as="h5" variant="h5">
+        Module Interactions
+      </Heading>
+      <Flex
+        alignItems="center"
+        justifyContent="space-between"
+        bgColor="gray.900"
+        p={4}
+        borderRadius={4}
+        my={8}
+      >
+        <Text>Select module to interact with ...</Text>
+        <Button variant="primary">Select Module</Button>
+      </Flex>
+      <Flex borderTop="1px solid" borderColor="gray.700" py={8} gap={8}>
+        <Flex flexDirection="column" flex={1}>
+          <Flex alignItems="center" gap={2}>
+            <Text variant="body2" fontWeight={600}>
+              Available functions
+            </Text>
+            <Badge variant="gray" color="text.main" textColor="text.main">
+              0
+            </Badge>
+          </Flex>
+          <Box my={3}>
+            <InteractionTypeSwitch currentTab={tab} onTabChange={setTab} />
+          </Box>
+          <Flex
+            flexDirection="column"
+            bgColor="gray.900"
+            alignItems="center"
+            justifyContent="center"
+            borderRadius={8}
+            p={4}
+            gap={4}
+            height="full"
+          >
+            <StateImage imageVariant="empty" width="80px" />
+            <Text variant="body2" color="text.dark" textAlign="center">
+              Available functions for selected modules will display here
+            </Text>
+          </Flex>
+        </Flex>
+        <Flex
+          flex={4}
+          flexDirection="column"
+          bgColor="gray.900"
+          alignItems="center"
+          justifyContent="center"
+          borderRadius={8}
+          py={24}
+          gap={4}
+        >
+          <StateImage imageVariant="empty" width="80px" />
+          <Text variant="body2" color="text.dark">
+            Initiate your Module interactions by choosing a module and its
+            associated function.
+            <br /> This section will showcase the input or response type
+            required for the functions.
+          </Text>
+          <Button variant="primary">Select Module</Button>
+        </Flex>
+      </Flex>
+    </PageContainer>
   );
 };
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index 818a55058..fb73c9328 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -88,8 +88,8 @@ export const Button: ComponentStyleConfig = {
               color: CURR_THEME.button.primary.disabledColor,
             },
           },
-          hoverBg: primaryDark,
-          activeBg: primaryLight,
+          hoverBg: CURR_THEME.button.primary.hoverBackground,
+          activeBg: CURR_THEME.button.primary.activeBackground,
         })
       : generateStyle({
           basic: {
diff --git a/src/pages/[network]/interaction/index.tsx b/src/pages/[network]/interaction/index.tsx
new file mode 100644
index 000000000..6812f4848
--- /dev/null
+++ b/src/pages/[network]/interaction/index.tsx
@@ -0,0 +1,3 @@
+import { Interaction } from "lib/pages/interaction";
+
+export default Interaction;
diff --git a/src/pages/interaction/index.tsx b/src/pages/interaction/index.tsx
new file mode 100644
index 000000000..6812f4848
--- /dev/null
+++ b/src/pages/interaction/index.tsx
@@ -0,0 +1,3 @@
+import { Interaction } from "lib/pages/interaction";
+
+export default Interaction;

From 7b593ead2dc2e690f01d215d80ea5c7d7e19945f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 22 Aug 2023 12:30:55 +0700
Subject: [PATCH 008/368] fix(components): add s tag to badge

---
 src/lib/pages/interaction/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index f90bc4994..aaea42f92 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -46,7 +46,7 @@ export const Interaction = () => {
               Available functions
             </Text>
             <Badge variant="gray" color="text.main" textColor="text.main">
-              0
+              <s>0</s>
             </Badge>
           </Flex>
           <Box my={3}>

From 42b3412790972c597dd86e742fd14b1bf757b90c Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 22 Aug 2023 14:29:28 +0700
Subject: [PATCH 009/368] feat(components): select module drawer

---
 .../component/ModuleSelectDrawerButton.tsx    | 129 ++++++++++++++++++
 src/lib/pages/interaction/index.tsx           |   3 +-
 src/lib/styles/theme/components/button.ts     |  22 +++
 3 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx

diff --git a/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx b/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
new file mode 100644
index 000000000..668f9faee
--- /dev/null
+++ b/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
@@ -0,0 +1,129 @@
+import {
+  Button,
+  Text,
+  Heading,
+  useDisclosure,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerCloseButton,
+  DrawerBody,
+  Flex,
+} from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { LabelText } from "lib/components/LabelText";
+import { StateImage } from "lib/components/state";
+
+interface ModuleSelectDrawerButtonProps {
+  buttonText?: string;
+}
+
+export const ModuleSelectDrawerButton = ({
+  buttonText = "Select Module",
+}: ModuleSelectDrawerButtonProps) => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+  return (
+    <>
+      <Button
+        variant="primary"
+        ml="auto"
+        onClick={() => {
+          onOpen();
+        }}
+      >
+        {buttonText}
+      </Button>
+      <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+        <DrawerOverlay />
+        <DrawerContent h="80%">
+          <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
+            <CustomIcon name="contract-address" boxSize={6} color="gray.600" />
+            <Heading as="h5" variant="h5">
+              Select Module
+            </Heading>
+          </DrawerHeader>
+          <DrawerCloseButton color="text.dark" />
+          <DrawerBody
+            p={6}
+            overflow="scroll"
+            display="flex"
+            flexDirection="column"
+          >
+            <Flex bgColor="gray.800" px={4} py={3} mb={6} borderRadius={4}>
+              {/* Input */}
+              {/* <Flex justifyContent="space-between" w="full">
+                TODO Input here
+                <Flex gap={2}>
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={() => {
+                      onOpen();
+                    }}
+                  >
+                    Submit
+                  </Button>
+                  <Button
+                    variant="outline-white"
+                    size="sm"
+                    onClick={() => {
+                      onOpen();
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </Flex>
+              </Flex> */}
+              {/* Selected Address */}
+              <Flex justifyContent="space-between" w="full" alignItems="center">
+                <LabelText flex="1" label="Viewing Address">
+                  <ExplorerLink
+                    value="cltn1m9y7um59yxtmek68qkwg3ykm28s52rrell6prx"
+                    type="user_address"
+                    textFormat="normal"
+                  />
+                </LabelText>
+                <LabelText flex="1" label="Hex">
+                  <ExplorerLink
+                    value="0xe688b84b23f322a994A53dbF8E15FA82CDB71127"
+                    type="user_address"
+                    textFormat="normal"
+                  />
+                </LabelText>
+                <Button
+                  variant="outline-white"
+                  size="sm"
+                  onClick={() => {
+                    onOpen();
+                  }}
+                >
+                  <CustomIcon name="swap" boxSize={3} />
+                  Change Address
+                </Button>
+              </Flex>
+            </Flex>
+            <Flex
+              h="full"
+              justifyContent="center"
+              alignItems="center"
+              border="1px solid"
+              borderRadius={4}
+              borderColor="gray.700"
+            >
+              {/* Empty State */}
+              <Flex flexDirection="column" gap={4} alignItems="center">
+                <StateImage imageVariant="empty" width="160px" />
+                <Text variant="body2" color="text.dark">
+                  Available functions for selected modules will display here
+                </Text>
+              </Flex>
+            </Flex>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index aaea42f92..b960ee234 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -9,6 +9,7 @@ import {
   InteractionTypeSwitch,
   MessageTabs,
 } from "./component/InteractionTypeSwitch";
+import { ModuleSelectDrawerButton } from "./component/ModuleSelectDrawerButton";
 
 export const Interaction = () => {
   const { query, isReady } = useRouter();
@@ -37,7 +38,7 @@ export const Interaction = () => {
         my={8}
       >
         <Text>Select module to interact with ...</Text>
-        <Button variant="primary">Select Module</Button>
+        <ModuleSelectDrawerButton />
       </Flex>
       <Flex borderTop="1px solid" borderColor="gray.700" py={8} gap={8}>
         <Flex flexDirection="column" flex={1}>
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index fb73c9328..596c22a6b 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -3,6 +3,8 @@ import { defineStyle } from "@chakra-ui/react";
 
 import { CURR_THEME } from "env";
 
+const gray100 = "gray.100";
+const gray400 = "gray.400";
 const gray500 = "gray.500";
 const gray600 = "gray.600";
 const gray700 = "gray.700";
@@ -197,6 +199,26 @@ export const Button: ComponentStyleConfig = {
       hoverBg: gray700,
       activeBg: "transparent",
     }),
+    "outline-white": generateStyle({
+      basic: {
+        border: borderDefualt,
+        borderColor: gray100,
+        color: "text.main",
+        "> svg": {
+          color: "text.main",
+        },
+      },
+      disabled: {
+        border: borderDefualt,
+        borderColor: gray500,
+        color: gray500,
+        "> svg": {
+          color: gray500,
+        },
+      },
+      hoverBg: gray400,
+      activeBg: "transparent",
+    }),
     "outline-accent": generateStyle({
       basic: {
         border: borderDefualt,

From a68715cd504fbe0dfbfee918a4925d0f7b387713 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 22 Aug 2023 14:57:05 +0700
Subject: [PATCH 010/368] fix: correctly display interaction switch highlight
 on first land

---
 .../pages/interaction/component/InteractionTypeSwitch.tsx  | 7 ++++---
 src/lib/pages/interaction/index.tsx                        | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
index 06301cc57..0c13a02e7 100644
--- a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
+++ b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
@@ -3,6 +3,7 @@ import type { Dispatch, SetStateAction } from "react";
 import { useRef } from "react";
 
 import { MotionBox } from "lib/components/MotionBox";
+import type { Option } from "lib/types";
 
 export enum MessageTabs {
   VIEW_MODULE = "View",
@@ -13,9 +14,9 @@ export const viewModuleFormKey = MessageTabs.VIEW_MODULE as "View";
 export const executeModuleFormKey = MessageTabs.EXECUTE_MODULE as "Execute";
 
 interface InteractionTypeSwitchProps {
-  currentTab: MessageTabs;
+  currentTab: Option<MessageTabs>;
   disabled?: boolean;
-  onTabChange: Dispatch<SetStateAction<MessageTabs>>;
+  onTabChange: Dispatch<SetStateAction<Option<MessageTabs>>>;
 }
 
 const tabs = Object.values(MessageTabs);
@@ -26,7 +27,7 @@ export const InteractionTypeSwitch = ({
   onTabChange,
 }: InteractionTypeSwitchProps) => {
   const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const activeIndex = tabs.indexOf(currentTab);
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : -1;
 
   return (
     <Flex
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index aaea42f92..ec84680d3 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -12,15 +12,16 @@ import {
 
 export const Interaction = () => {
   const { query, isReady } = useRouter();
-  const [tab, setTab] = useState(MessageTabs.VIEW_MODULE);
+  const [tab, setTab] = useState<MessageTabs>();
 
   useEffect(() => {
-    if (isReady)
+    if (isReady) {
       setTab(
         query.type === "execute"
           ? MessageTabs.EXECUTE_MODULE
           : MessageTabs.VIEW_MODULE
       );
+    }
   }, [isReady, query.type]);
 
   return (

From 08310e6e6d724c0da596a679a3e15c58cad0cae8 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 22 Aug 2023 18:25:25 +0700
Subject: [PATCH 011/368] feat(components): add module select drawer

---
 CHANGELOG.md                                  |   1 +
 public/PilatWide-Bold.woff2                   | Bin 0 -> 23940 bytes
 src/config/theme/initia.ts                    |   2 +-
 src/lib/components/icon/CustomIcon.tsx        |  29 +++++
 src/lib/components/module/FunctionCard.tsx    |  78 +++++++++++
 src/lib/components/module/ModuleCard.tsx      |  43 +++++++
 .../component/ModuleSelectDrawerButton.tsx    |  87 ++-----------
 .../select-module/ModuleEmptyState.tsx        |  31 +++++
 .../select-module/ModuleSelectBody.tsx        | 121 ++++++++++++++++++
 .../component/select-module/ModuleSeletor.tsx |  64 +++++++++
 src/lib/pages/interaction/index.tsx           |   2 +-
 11 files changed, 382 insertions(+), 76 deletions(-)
 create mode 100644 public/PilatWide-Bold.woff2
 create mode 100644 src/lib/components/module/FunctionCard.tsx
 create mode 100644 src/lib/components/module/ModuleCard.tsx
 create mode 100644 src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx
 create mode 100644 src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
 create mode 100644 src/lib/pages/interaction/component/select-module/ModuleSeletor.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b76f9e96e..758dc34ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#494](https://github.com/alleslabs/celatone-frontend/pull/494) Initia select module drawer UI
 - [#490](https://github.com/alleslabs/celatone-frontend/pull/490) Add initia module interaction page
 - [#488](https://github.com/alleslabs/celatone-frontend/pull/488) Add initia navigation and sidebar
 - [#481](https://github.com/alleslabs/celatone-frontend/pull/481) Support Stargaze testnet
diff --git a/public/PilatWide-Bold.woff2 b/public/PilatWide-Bold.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..d91e8f17ed077e5bd0208b11ae5ee12d56756c97
GIT binary patch
literal 23940
zcmV)4K+3;&Pew8T0RR9109}Lt4*&oF0a@e#09_;i0RR9100000000000000000000
z0000#Mn+Uk92!m=fu=?ruQmo?0EaFS2nvIPWP+_g3yBT@0X7081Ckg7AO(&)2c#cc
zCn<4+xjBW3f*-OQ_>n4e`&Twf#M}M^w_~lFw~Q4`w|OGa9sDXTWn5<e|No~Y8)Mjk
zd5B_`&i3m;Q)ng&OY!Qct)jL-$64zshQs|FxU4whMu*SZ1Ejm(RF?XoSRzUjCQK*g
z7KGtsWdT)oy}HW$7D`hbkBNzPt8pCD<J+~_ixzN&f+|%@|2yCrZKC8jhKv~3?}x#6
z4n0D*Jl6qTb}TOSO}f)J^_7jG@sdn2f`SPYq$I&(BDpg8;c+j@gGYQO+LT-FH0o7n
z7CZTWXR-)vT*gRNPF_x)|9<Z?*WTy;52TdZji@SvkqDD0pTQ`i;@a~eoxbnxB%Oc^
ztjL72BZt{m7!1DzPI;TVci+1GpCQ<0N0f>JDkw%{1I7$YN*e<eM2tew#;h5|>{-K_
zZss<fE_CU(-(0u*-u{2lUjuno&-=mOh0Ghsl?ItYN`<IO!vFJsFXY+xy)`zIvOFuq
z6|h?6ZZt*_3I{M$>WA;=wku`Ikk7jdD}q=x8|+bVWNr|eNhUNR-r8NU)OcjXbiwpu
zh@DGkxpa2ZsdVI1=(rH&<6~MR0s0dXlHk&OUAlDX%B3slZ*Y*USg_kYFa-f6P=22P
zz?3ZkOOHn9-%f+={>xav6TQ`k3S-7XQ|7ML1yJh~=e|+^WA3*h?hRJSV%b_D<i-`i
zKmU(^yCU$BBZ=F}+dIf1`-Id?;(!0TvU?>lQ+2KcP9bjy=>?GJQ40Zrk$YJe<)YjA
zf!#mh`E!gxz~+3pX-D$OW++i*Dl60%o^d>cv22)WpQ*usFm*_(O_lq4_P6kS%<b<@
z4C|sH617#D=V|D4TH-pi3Fe_Pa}H*nQd0X7l>^XaDaic#|KD`I?OYy1{Are-631s8
zGL9`#c-e?Em2;>x_eqT2Jk1Ia8_>WemVXwstU+vIabPq^e<Z@D<dBp25%`h)&S694
zUo;Lm);=!XY55K7kg5<%ms|R{j78_Ncj>BhQM>8P!`n^&gWI|#1;$4$XbUXhBoJ&Z
zkiay+A`1v3YVq{$K%#a_;qB9<5JN3UFv1Me52y7~`?pjY#!Cexh~K`kq+8j#{iPR}
z=Fxa`vVGo^-T?~?#i95osIvHvQ<F_eaR(X;9xI{Wp~!kq@oy~WoS|IT8ptVfiVn~c
zHVH1mM?2q~eHN%6QGL1Zt1sjs8h1iY+l9Pjy3M9(`H-`m_OLujv)P$sI!8e1VgCVR
z|FI-+#Ls_qEc8i~3Q%Zueyr)o8(Oe@1A{><9dq2hw%gwKzs`8?$v#r9C6rK#9D;}|
zVGxl)29YpG_wl(FGFOhJVg5U%`UpalR`Rvyyp1elX7$EgAd0MT5+}6(KQfnJuH3ez
zYpC@gAqjJ4tf&9~HA8?ukBkQ3=r^-#fTQ342_WDE@D!jF#Ags+{2vV<zXnO8#-M4^
z8YFGHgQkZfNXCo>&G@)M2%sR~I9HNDpZJJgf$9%mR2s<Oz$OB&fqeAyJ^>bwZ(S`Z
z7t)KTRC?|7m-NQPR1IA|-+$vYpcCUcoGzbFwM{{492{IPL61R`PP?b)ar&n{@m~y4
zRZ@Hx;u!=!F}OMxtZ*9RE-Ml`jv@0WINu9!g3?x_meZ(Cy#_lqI_+$n%ehDI1VWU@
zK@<Cbytx09Q2yO&&2McMuq@$P+Zt_bmd$zQATB)UUL3gL<Juw+$JC)MY-`-N4tur_
z8BSI9IY*p`Dqi#IJu|Ofy{6_F*n}HH4o;@tItdhnC&Z$Ye)5aIeDK9LfBQH7uQHMA
z72f4!(+b@%tx%zw{s#J4yZ3(9t{pgk58^*T&t(s2tsd=K%kpBf%>=Bv!E5kb-LQ;7
zk`@8$CpR#YYe>&Eqz2D_yfq<|&^U7!p;n!G4R&g@$6oW69I$4?X=j~t-B;iJ>%RbU
z2_yC#x#NfuD^8l;5k{QWT!Oy*IlzHA{ON6-%9p*Hwy;mMb0FOA5c?+5M&=_LyCQd^
zUxB1X)^3|L8Bn5u+$|5HCiq<NK@d=IC!pP~RcW_T!Oyb@zEK1{ab7XP4zUz_zzWo;
zh)YgHj8l!LuB6yRsNFTnJ8l;dVqVj$W#J&y#0cP4t&3l>+b(1fj9|Sevdp+Scy`@=
z4Tz9qWT2}^*eoeR{DB=dN<nZ!0;cqT3}@D6o2(&uC9;b0YH&HG*#bv0FFt<Md<Zfo
z7I%Pzk(x=3BuO{f+q|vowyNki$O3yOSQA?xjO1qM%iiQyXM#GA%ONUhC^-1RW$RF7
zT9k!QER23vJi*bMGQdJWnJNw;-snL`WA@B$K&UZ9(3BohZ*j6e&TlDfthwIAzcSU_
zQ>a&pJ&pVB21)*V*OvlIv)QmKj>g1LjzryIVzvLoESFT7d_ahmcxEs8sT1je8DN0=
z?p(M)Et=>L+&!UGvldm4S=A3S<zP-du9ZD-H{CDI)t{RXCmiy&Olu=d?hiFyZ)cTN
z(p=f3u70Ts$`iXFrYH1QkoGk`SLNFA$xt)EiD;zWD&YrzCx#;ezF6P4*UX1NPc@h~
z*5;-(6UiNHKn?GS`?Ipijwou5sqV@7g)hwqculDb#iL`tJ;BRA)FiIIybWGk%}^?h
zF1lo2C}UZk|Jh0Q<Ktw#$w(iBffw6xDajME%uzXE`if7av2~AB*Txp=a+A-?nk+W&
zl?a5%vl~h)yl&VylgSpYJF1QoIypt|3^z5D=z7%0+KrR!;&l;_kCW*qNQUl#bjAvI
z7z<7|utOhksv|JD7%h*+K0lknM%F!3z?uaZ7GcvJFyuO~=<6QK%uS^=RGueh!XTIc
z9M-2vU)wHWB{Ge>y=-y8`VIn)3+bxQ;2<gE3{etAEFo9h3s!~%YIF$P6x0#Kr3FdZ
zRch$RP#M#EJ*kFY$0vs%<bch}kF}%@E$mHRB9D|O_E+yM?1l4YQ3Lg{P|#Zgj6?os
z)WE}&!T?bB4I_q9$e}(Mq-FA5l`ko0691mU)6qRw1(SxC!m&sKwk}ue3`JM$0W*wT
zLV)@ER%(8S%DZ)%_R$ngp67$LK%zlVG_&&`CK3T~g9-E~6L*^XzYP7Y2!^Wz9Sl_5
z7LXtD&8-P|s7yJ+!GOgEchDA@$!#arOQ4;Ta2pIBz7}jxZN_9e<M_vmAzg?To*jwV
zYMoz&a7at-@GrW62MYXP{(Cmfv%J^8<<hfR1+BNVlSl2G%S|oKvwkYlW2((orDfgz
zJ>{u8-Tv?3F^#~z)FmS9BqIltv2&7QDI@NI*8`C%PAq=W+Css76<RUN$1RqrUwjvI
z9pp6nz@s{t(EnM1({;Qb=c?KlTuNKQnQ^^7BG}v;#nY2E-j7-$yZew6j#HnkM72gV
z6M%<Bz;1zpnC&M`E02afws<Z}=E22Y?`#{;)T>WxHmy@xU(ptJ>m|pTh8g=iWPOif
z95izaANaaDn$p)<rSNH|;)>^&((+{TRYg+w@iGZ5F5hw22l0h{5b%Q-Xt-&0fmRTk
zUdjUf{9)@T8-`|*sWVW-r7g%}{zejwr5wt(8WZhUeBG&`K`I_*Lgql5Q{3q=A3Nna
zs*G{?%BW=xrQTjo1`*;!oRfh0TOK}cS0O<h>i`8o%iA|+(@CEZ5K&6@kL*k(G6Ac=
zC?x<v61<*9xnmJNt4dusIJmTASaLwiXQyxmnl8%JimP3NVpxZ;zO;6tXIa&RrMabc
zs5$_t=4^n>@D(W_TUebjmv`l#*hDt8PumQSggCnxv0-VGlk}d%i{VTvNT31;V3BCH
zuH;dPM_Q#gb#F~NB%{&}$qs35Gm$LTvwLx=sYs~@jxWH4&6>|!K!L-{2ec~Tnt}Md
zjL_9Hkrb&3RWuEX-jv-<Rty5<5OriSfg&5E;!=<DJ1~Pov8j~HB_O^)`z=QV6BS*Z
zENBDi5^B9@@Z@?aPNvCELLXW6(@UuI@hyzF;*J(xpU~c^WEjgdM_CI5^e6!4=o+=T
ztu%%ww}U?J4l&__^mGAr(w#0ZGi5wJ(Xcv>pyH~R=awA5(Cnf*$)+HqP8|9Yj2sBf
zB|_UTchcDPB2S{zgz-TPwd3Uu-u^}K)$1Yf|NT8l&%?ov;2LArLCTp~h_xVM{z;-0
zVhPVdTrUHKhmqh&R4$1dE#)b*;i*j)5}j2jB<gILxJ_AafDyU$$7cGDgN^iKva!TY
z=E!)t9)bo(xEKJOL3QaCsiB<R4D?{yAAtN|<+QV!4@Y}4=gM15wBK2LXkjr?C{yG*
zU_VnS@as@4+vI;mS9C7F-aG*Eq^Mgr;5eLy53;=u`-E;!$UXPNen;hO9VbS&KV>L?
zRv{j0wz#e_FCsbK9Kw^aUyifn*N1-E!qb8ihB^UH1AZ}_%C66Sx3G5{#=_7z`2Bv6
z%{;(=CHjZ8!ZXheI8ygb6*PTaHNPC=gKNvu#o@EucYuV8-9;!Dvn?Hnz5T>2l(?zG
z>@UGA_2?JZ(Lb{b81(oYy|NKvMX2RJPk8n`aG0f7cy*v%jDI~b2Im52Fy8?;VSXDt
zgM!rODLqA(Cn3my>7ji2&L;xFxfXIhpensuEWj_TqXr+dD4gtUonh2N9-u^5)NPAO
z&RaGfGFp%Qwx<Qg+H<PHVsHB1ECLGf(~6)K6)Pw@R{d@Uv}|EHFwcTHWnT9S;a+xH
zZn;r{+bEHbXZFuvv%)>e#TBz4Md~j!5z){=C!If^;p}g6;BFf!^FjK5#H5(`(R73Z
z9=WDS3Z)+PpM)R)P>Z4<Cf$XmIR-TCrFT9>5aWC&a@W*A2$wRTShFM#oFY-LHuskW
zJNq@b6N(K{1+dxHXp)VW+@r@YA#HH4AKha`&J5h3dmOTP{r+~lqi4$9t6I-X#r%Sw
zUBmnsWTyGhWbXLc9=k1+$1+Ec>c{P7$BQk$0z}z6t3}I+ZjM}okM3g;Yze6$=;ss)
zqEB{T#r*(>3bt$g^$*D0fOgc+*=Rpl_t&T|*QRPm;|NmUr^us-V3zL-rAxY}S3kf5
za|81Sno@?7KK2!LWn4s>aXF8i?8;&L?wvWWp+b{zNDWAzjpMy)uFW)@c)z^pKRXQ2
z^o_HWDnC&(W0BsM?ev@-_EeQ_q|&EV+#d>&B~VipU>t|^F6l>;c9ZauJgdk?$yh>W
znQig`Ox$aI^?FbCfP24Qn1}e=cl*Lci)3=vxQ_a}%xCvGOwtRb+H_;2ez_T>a~X^6
zzCSkoVug=wrJWx8(R$*ji$6#o(8mokbrkGJd$%nsCTx8&N+xbehFerPqs_n^Gj?Oq
z<mHk^f+Zq~7nLtqdQ}aF47Y~Pym+)@%Z*EGh6V=kip*FhY2bWKGG9l>B9#WOiBD&m
z6A`s2E+Hu;4OoSp&nw6XIHtJr0)1J5{NYPhFi=!-XP~U2s-_NwZGsP;=u2;&VIZ>9
z_5;HrJ>({?DRwk}Q9%ZLi?=-`rX?>sGMt=1Purlbf(#T4>S_w|C`rCNmyvwAn;&R$
z%KO|SI`a8@5abRl>R)}2DoYbw?z9}uvHc_t;WB-`0-iH(P7%sSl-|`*4;I{8G`L-E
zLPbjLsI)pqu9y~$E5(NHSd7JAs$qvst1ZNM1_6LBT|I5U*q*uRYwO1Pm;=@xl`}h@
z*CnuHN$2PQG$kTnyB+~%?K}9L9hvC`xb?0W0*pQbo_qCV*R~s1)|^7?qFI0UDFzln
zJ;E0*dLRMWR)Fv&NKQM|)?=?dQv^gcMa|i>;n<E9OZIG8v}VBq006Q|6n(Bfx>lVy
zbfMc)4O93}DW51EP*L2C9&gR9@$_gD(-U-W>)J7`%VaUIn{Hg#L9Q#w5nbul4J?r6
zRw+}T^LKx6m7oQryE5P^+-|P#h@9@_&gz-fs<c&*0Z+Hi*0V<`<nk`Bn0>1-y$AVc
zp~n|?FLA99&I&A8rB#oytC&rYnU)ul-n($QA`539rJLc%)vM;Krm(UYi@#KZ{eg$O
znd=z@fW(5`>->Q`S1#Q-ap4-Q_l^TS@c^*KeaT%=ueYLKSEC_`Y}XcGUR~pN)-uy)
z;MQBV2eAJcaMQV6tCsEAwrCw%7tQ*+&ow|*37}B4CjmVJh==QqX$2E0FQHIT#!v!_
zOH{BXW<%ul?RwTVlmb*4Qm`zECns+RnF67Tq;Mq?U&XGAP-8%(L2I%d_4+XCh&wJd
zNT_()k|eW~O2S$?DO*``&=iW7-CnU$4k}b}(xio}UVYq+nc(S?_+GixWh%=&WU|i3
z{Fk8NhbNf&Gzq6Q9Wm3Jf%qBEL(;tFt$M7n)dm5_6?c~Y1I_dRNCksp(rM@n3B*3^
zY5}|EXy?@#<W$OE+$0HPIOR?jL^TWIw`CypyfI0^^qP@2rNc`{E*+(GR7Yr`1}zp<
z1;79D>njX@YHbSm+c;$Kk7b7NpLJb8!-gqH7ybD)c|+cluPOgk2k=`9T%eR&uM*(C
zop2oxsYMro{&xY*^lu~&5m^2Btxf~_kMG-da)M+pcgaC4$x(jN4)G)>MM%yPb#+m~
zk9Fw-$wScy1X(|E(qw<TckQ6`Z^8yEg6ME_lcUjHoiupx2ogqQA`p>CgcE~@<8u@$
zp(I8UhRyE?_N63_l){qIyrm3J$>A<dVMs1uw^k_%{G$i~0SQ0~kO9a7$POTTfE)k?
zK6s+Uk;qZ3T9YorCe2xP+*w<0d1Tw~-uoUXL<vGbX3UB`29^NfK|rDr3}gy}gPf2M
z1mwhwUCa?>VyRRevb87HzudpnpL^+#&o~K6F())60)p5h4yR5Yd@@-SisIB82cPn;
z_&W8sgHL@={8{`({8jut_3wjEdo$-fz{QVpJ_h7(<xhadv(d6#V%*4C&1Tfm+@-@Z
zWv^*7_StXNyhTe6IOvdND-K(==7^(?Id0v31|kBoEw_p77CEu<Ic~?C<~*0V&2@}<
zj570C%yQPVo%iUopWWP@bjmq^etZK4DJV%u8^gUEfFF)d|Gzv~h)`j|@kNLfML;N;
zNDQ%9Y=!aRD=4Yl_z4iqA1|CFHAy8YOGSjDE8)pooCGGUJn_s6+iZPA^_im`At2Id
z+=NL}_BvzJbUZrm3yhyY`7ji43LJ<c6HpCSU_4ZCvvxpQ=Lv0-H;f%@O7;X&b}Se{
zh&bvJBruUAi76>5Gg-1w<j7^NP$5etN?55-!CH+PHpWb|b;cQvHf`GByz`tq@r1Ky
zo^kQQ3$C_pWBBMJH=ljs9s)w1(V&r6h=_T|gGbEx2#A#+ynG`RT|iPv3d*?gc$qR=
zNaoEKl|`o#<P23Axyx8(&1PR+9p}-mde6I|vc_&0<e;RE=%b)=;)z2nOQjB@7Hqh}
zA}pEj1@s^kH?0|tKJSH2xV+V_YvVh((^E`0%UlaCIZ80{u{w+sa6~8Ll%KXUe8$hr
zSvZH!#yNLHM{x|tcEA%o=u(9ful}W6>UFxF*XPFF;@flw?#x}g7q0Gt7oBsE<55T@
zjkM4MN)FY?DWw$-GHgU4)bm+rrH!^Yro>{K{NGwB4yY3p?fNy=(^zrkRGqxiC=H|w
z44r$cT+2qrTh!tJi<NNvn=;<g!rB>=VeL&6pn2i6E^eb#m!;c?N0e0n-qn4K+HzQb
z<J~;QsV|Q+!Ml4-&{zTQ9q-{aNpnR)Al}n^iq=ZRAiS5)H0_m1!FX@q89J+wL-0O+
zvvgObgyMZAbE~gL4MPj$W9!l88Es=Owz2t`SUG<{SO>wNuuh_3;bMf#bMbAtXol}f
z)=@Ylnn*z&1ebscxMT%fssb)u0hg(Ob4H0W^U&66P&uO*tzyT<=sh77XOhKw`aA0~
znyjyPC=4tNDhw_RDGVhTnUXw_6sgWMR?1!Kn)p(XS#Y<FbsU%mPug8SN(><~=ii;J
z4UEKf9w)6oIOl7Pm~pT%?^oDhzG6t2ROvb%SvN%)qGgDcAzp?=8Iom4l_6b*%)}hb
zSxm$yVkR!crMN0;oqsdQ$yPh<b<j~KopsUG_Hx1vFZ>81yok2=;U9{7@hG0ft9Tcm
z;#>TVBv`0limDR;0T2KI5C8!X00FQ-Fp&^m1gT3ynj(rMEogVE$|1hnPpI&Om<;CR
z?z;cYwh&YT5(mfAQ6`fhLKi}gAvL==aDoKE<KZDlmO`C`geI8+L}kio#f@9qN!JiL
z0|s)+gvp#UXD-()Scs9^G`Z!`M&wb4In+|mdDU9xn6-oWp9+@+dl4k^^w{fy2e!Qd
zA*3Uy{0nvszXeWZBhpP<Q1&xBLJ~dPKu{7rok88FJ)A~DSN?mD^9>(w8FCu;70stX
zw-HWfIO!}#r-`)nYcx6=fdLy{m_kI0A0a=827-_h83YmBGgTe~jV`@K4H+2*DvAsu
z2LjI=;?(=6=~+Pj4s<y28ew38OS@8C;h+d#`T}7363#P^6HuyF8KIGPpX7r4)8Ajb
zm|F6My`~Q3qzym9)Tc4c5l5QVv_}q#2vaNI;IUHvi6;jXO`5bo&!1@!gcNK2DQ_*!
za=#hPojNKyJiy;3-U9{&hlGYjrd<ZvobAuT!t=O;jYvQ!VPF`~%*Nuil78#93e~HQ
ziH(a-NK8sjNo}MCVbSPJ4M)$hi)=5xk*E_T4$n<DOv`p$&nHTX%!~a)15`A03`{I+
z99#+%DN&{p#Ys4j=TtI?&P|z+tm0*DI=kZB>ZFavgEG=|9$FH9BQuyR3rj0&8(TYj
z2S+Do7gu&Kq~9_jrBdFj6+#oRwFNT@`8Yxr^rtJ1q%o@&hs!ImVxU-6fHJf>VFy;A
z;dbIcn}(#K8bLJ(m!>d7rX|eIMimIY1rg=KJe$cie()q&N>r#Z=AGnFefgP91hvbc
zEQRCgWDfHhTbpQ{=a?#*fzi0u;}_@X-`%tUKE3$P>j>J%OSWP<Y9R73*`1c!5H(Bx
zz(I(*!?{DLXsu=)1m*b{YS_$+24{lN#!JZ;m`=Xyv-f)1*kmcx&&fGi!DDc#)FD&M
zipq5_yE!0T#O%6)5)6Zog&xM>h?6IGX=~BLOken)FY&`ErH+u$0#)BD|N4@z&UB|Y
z{Ta+~Ml+ttOoK3$*y9Kny>o_javLF`zfBnM{C-jMQG$2|dOR8d17Q6a7zkcGPrr0Q
z!I0rU4f@xEBzo7StG=`BY1;_61PtJB(*+<vjs!!%1>k83_=q<ISG9#W^OLArkN=z5
z53`<8=kz-->jMP_MVOr2Jh{AFbxzKL)x9{LKKy$qP~#WIZy3Lwk;<O8kWff1Z)N*m
zaES>^aTOp%kMGsmg&9(x){}Zqo|O%5<jN_`)r$Ry&jb12N~Oa8+p!xT4;KeZgJs68
zmMAv{U-|Qy+fHe@Evsd=-mORL*xIxv&DW6N^e^(8+$Ob2YGPdEyOb|FHQK34xg6o#
z>~qW-%Yv}S?5hOUAEz7<v?L|*&0HL3!2_hu3H%H{blKX3=?6MNE7oj80cYmS&T<EN
z_~LTn%!MlkH}2)snspmCF|n|5bWIjy`@>uQcE*X9AQ5miYSyaTfKe01P1<Y9w0&mn
zH)r0W1xpS%WW}<>)~q`2m~|T^$dfEZdP$0n$&pdBLefSw8EjB~qwOJ4R8Rf&71EGQ
z<$&*~8cDL-ottawm8GI&z|o*ToZV&jf7`LeB`U^|6i($RtD)2+0HKn^#h0R9n>y`U
zbduYpL$5x-Gi=0=cSZ`5n_vC~C@r|ad;w+Kwnc$H6<{3>tlI()d<XFAH2{DY0PF!2
zMG+#3JnVD_>SLj<4XBqnR;x&hOQ>%}v2;APd)yEqv6(gk$mi4o!x2_JN`XbYo%@H#
zVV}g7%sMi>3@j;7c(6csZ-^^_E1rV|S%`{^!z7&N;|P!uV#IhC>yB8Q<5&=rJ6cjL
zhe;X62_x=fq@428-DURjBU(2L4@up-&sesZq~@(``t&RrE0VFJQI^^5;nyD_&w?Eo
zy5snF?Y06D6ECX(TyCx?@re#V!#hx-ycOe^rt2ZYdH>R{?b><nzH{-mrVMbypEE|0
zt+>g_P`nF^smVB-$%~T*7hy01P19Oh<;kWb0C8+HJS}Z_WUO7&%O3kcw{ESU1OEdM
zb>Ebzi#ijq7<Lc*1i;}$4E^Ft`2^6Q3d7cu3eQZMRRRYXj978XTccTfAJY(1Ban~`
zc~z^TNF>#YYcGR5&{PT}B&y9=wtup&P?-c`=v013FG{B1f(s6g_SvfT{k*!*wbsjc
zSkvMu{h7{iRcz5{OKtc<NIYRaHbWa!b}NdW+x|N<8C6{Ni8jSgei%+T?4+vfw#h`B
z0Jv%@a9mlT7b;XpTwT$@)GC%}1?2DS3{7R`zZS`GpHRZlfEP0Qo*gs6!1HxbvV+oq
z7asJY$Mf}raMwl4H=4;xt%?1e6WuJ>ZD^2JCe#B0#3#Aqq+z5f0(i2bio(_M(ucA{
z)l@DQe<z@<4+Gj)o(VnI88fO$!RIJZS}`Jo>(}bnxDNhn_SPvMyz}ny=3JjYeV9iz
z;W$s(qMD^)YgNchH6zkG?IU;CzFzJ-U2dEV;#Fxm**&vJ4HRa7qZPva2@mG|{;x#e
zH$30#HksF6>%@vyr-t`uJs)eqLk#2HYoV5}W??l9dw&5hbny!=7oE}+9XieFAP53E
zRimaM5=cldZUnDp*0`(M8c`M}jczSb2L@9lrNVr|HF?)o?fY7B&27K4xkfun%Dh4A
zT|IxEdV88ot15P6p5e|c<z4Ig<ZFSLYoHRRA6xrgdAX0d;$^SBj;{9Bmp|*7_t+~c
zuPWc`3A);b7yflZtt`u2Wu6Hr7LH!n^CI)(>18Nmgzc4ADCVIeR~!Wmme_$CG`S5}
zsBD&OQCS2Q(mkgHUM`J1oW&f%n1zx?r&<>J6M}0LloFY~t@T3I!-!Cl43YVL`)q*x
zuZKyeB_!IO=|vx7mLIAL(#sJSbi^dYm}~h1$^{xXD0`#%A=A6hPpqi(p9UAoytDIK
zB5k3~!i1LS!h>mpD(Q`ffmyVu3g(sci<L|ngbcgS+30<ZsJ*RLdqrST0tsl=`@!<E
z6HTks=Rn3sr%^~EGdEDU4Igxod#GWZ?TG3UH`q6mALbndt>{CQdaWAQ;L>2^`aBaD
z59in@t+uOI`&9z-gEAtp&zU$vKc&D0D>9tUaZuDCU&*~{CP;L?yFq4L)AEFjx{$n`
zL{#b1IsfUM0dlT$Lpx`yahDs!`xOm5;S(QAJ?s5n$$ZZxMW(sTWfh%o4yBB%n;-Aj
z<30&4?<zcWQPc4Z%*<nmZ0#uVh&r6oI*ok}91It6LhGDz3Z98}1*Jls!>SoUukJCt
z`K-gnrFx$IKX?2&%G!GhAw#X*7xHJZKR8mF*O}!@DecRMQ8hPbkIZ{aprj7VzN05Y
z7+)dRXa+^o2)`DHpx>ae?^E!7YKZ1Jg~U!bc%?@acwb7}sUJx_6I2zCx(=Kz|5W_B
zf3h4=z1AR~0`e(xa1FzYJV1N=<>5l>bAaIH0}rnMpq)5@8+)k+tl4~5oax;fOD|WG
zOu9YvAtE4NfyxB~>_D0yv?N;k{hinC52c3ZT3MA3{z}%a9;WEFLk+?aun)=<<R?2?
z(Yo~c)nTZj1y6t*U&O<OQ{NF-o*VhPaa+Etu+vm#KK-?t1<RP>bHh?pW9Ji9_u+~G
zcFLN>MH^ugJ1)3=`NlmMC}e%nVrA^W?Mq7{DX7jFpWV?-2-}6=#ap-}X4wXoTHZp4
zCZdfxH*yU#cEG4mYI(J?R{e(ZXTNeSbgATd)ng$+O-S5eIa`v~qgWNSwzbb8xPfrS
zTgXE}HSyAK6JIa<+hnV0%?KA|;xE`%L+m)ra08_Y(%e8OL*x^jdSdg{alWuu9`g1J
zyFja55;+%D6;FzVK;q$u*!vY$x^gnK5&#w$3`Mei9G#HDCi2KG#(6U-D%25e$LG@@
zDw3BlinaO`DWj}*Kd1sRzh71u<JDtBG%C)?+N}ZFQ&0T8b+LxV8VQ}Llan@fxDq*B
zb-{L5*6Q37g{LM1*w^`JQYn1N@pXRlK^4G1MQ^3Z^d&_LkKpN-MPs|@vORo1z4LB)
z`AUj!Z3WbO>i)0MYc@?2^<=4_?BiGW3U_vpUdpFkXa}y9guqSpw-@eKkN;~nWvPM7
z0#{!{{z+O^Dr0ZZ&Wid?eJ7Y#Y^v)uKOQtSx3$-WD%7=UN?;qF5HA?fVZ)op5ugaJ
zY~!+U%bTgiPVpNIe*2bEPTkW-Uu}36{_YMiYH0bZm^s-=gIdchL#<i77i@)kXK(Ct
zO~j@c`AD~;2kr~@Dr)jlZDwncUT9-|o&C#gc*ItehCNh(Rl(-)Sq7{CQ{78FcNTrd
z^H^X&GPky|<mB@|T-8jyZk)pNq$jk_^m&h@W8!m=kuP8Mov-DdmoCkRmhvdM=!j%x
zUGO8BqQp(<?zyrT{8*1RDcA{yjYjC=jIJ%PRg-O12E0nswA2F%SWzYXF+;J<!nfMm
zd%}Txib%m4Ne+4*KiC)`ABHi9S)oVmkTBjSlWx6cqOeqG!po>)ni~6*BSGc+nNR9T
zYoTEhKfsyRw)!4P;g;H@;02HN!>!`*Nt_-iH*p8iyWQ0^)$)8+?jmUGn#$AzROhR{
zduZ@s8lov9sZ<3k*rm6DO0C)X#a;!J&WHC^#Ftj7D2-35au|psvCuMHLOcIb4YwpT
zlYjI6j6kEe1PG8k@j8&^<SowwD(I=eEy+?;Y;v2)T1!uPJTg}MLKWtihHajXeMMAT
zc2h{xld~t{hZg&x#_r?5h@lNkline2mnD-{Olz?g2vKYPp%ly!FV9Ca^LHeu9+f&G
z(78yKHykXh?+TJ0h2EzzQLuF2m})8I>=HCvi04aa(T4w2*C@a#B=Z{{Ob41b^vkCK
z-Pr>{RRwj~&zRu>R`r1FLjtBL!w}I=zPg4C9@?b?OEtY&!)Wo)+;|m8R%zog>|n>M
zCW%(eZ;bByK#yYk!kFA$W2vn4mR^ATg(dG2CTx7o!-ORiM9h>+b$!BPTe~S@+?W$M
zA)lWQu0bBx{DpGl!14ADRcp3`x$1U#$C`mEG#%@{Gx~}2R>qBV(^^Zy+7Gpa?V<X(
zHP+GlLMzse&X$Qv_yHp~{|ARMk{^!<a(*$zoZr4h)g^{!&T|=D2!?p=u9K@f(F``8
zy3yE4MSR`m(xF9*v`#m`2AwDiVoBFiLC2}0Pbh@7JBA^C{6(!O7%5GKq-C>_o_R!6
zgFhcA*ng_3Dh_0ki_QY2{Ff{+0vX?gVA61Hd|lb`%n-}h2>IAkt%*Yg?=>}EN6m2D
z*Xa}N3TUk2Vi|cUzK!sf1HpBv^YBq>shH+xdD~9YL~dB>^;N-$na&ImY1}2Wa}iP`
z%FIm<Z5BXFM>&ON?=*ZIeqsu}`M&%_`67vwxI|~8nSRL=6QMaDyI8kl)XOHABejD+
zkLFpdb`nlbWN#Xm$}aa+-}O+7cRy_Cw7}1<AmMtw@3YBKAD4>t81V+XJuIkevh=Rp
zKzrL0l)RxtbeY!_sx&XC4NakTvmtg)b7h*MzlmkI5r+`bqh_s6;d(E2(HG52`c^AB
z)uWSkJPMa>9n<Ph$+(E6t-?MO3DslXO1mPZbGq4*qJZk0`2O$m4^{;s2c}LDH!bl$
zOxv4nW-RLBvUZ$V7#MXEh>_oD$3<53J>pHJDvEmnRbALwa>F5kk~X`g61n(vS5xGx
zvqJDf`_{oYQL{9N8hU$Zw>YcbALxktQ-AcBf4oe<WExclYN!rtnMx2Z=#;ju9pxL)
zI#HEzzC9pf+Eihv=(4U*ViAc-30(kwQqN?jTuk`1SvbBbU4)9y>R0?{G>0(4T*8vN
zY2&0-s0b1U)giR3E$E-Ira9ba|01^WHxF+khZDgQ)g#d;A-)%74_ZPbQmh!F921%J
zQYs!R<`&V~iTN^fz*w8uttMjD=4~-o$Jt3FjoJo#_66rJ6j59(&o;2(8tYBoaMlap
zaqW<q1}(MC%Ka{p^o`EC(a%qS*$T?|j-C}kUG$*2&ve9lSS%!k)C6O(n+_ET;a9!z
zJAuxvvwKkD)4SzL+QcOjEN#{6YPtdCrEMAlX_ZSO^(VBYGHz4r7?Vk?Gd3HXi*B>F
z0Axl{6ZbIZ1u-bt><P)>-Lta1p13U7DU&7i>rsBY7-Obsl!0`rkzrrv(I;tg;Dvv5
z1Al0PmDO$t^Qb?3a!<cHs&k{*jdza^6vgX5PmMexGX19=J0-<?>w~UC(&v#Xe9#i!
zFWmEUj*y*7bJ+{YR~?k6*m`{<?o&vPcFTi^y+0#0e>$SjIMPC7ANueC@<?DRorR;c
zz1aPk6~{P%DzBL$axxn>@PBC@44G?c_4J1FUOA?)`7=7~<2Oz7CL;DUA;%wqUV!d`
zMd(^Gk3GSEdzFq^05}x*fDhUk#n6%m`oRAf^QTem%MLuq@hi~Gh^(@+=rJ!P3>8J5
z?1yd(x7Dnlsm07;NxY<uOOQAq5mSe22ShsdgkzeeB&LPw!XjEb>>ocfbVBu)a;jPt
zto$7p=ZC?(^+|1_vu-@kSe_$D0T=bqUj5M=eW-dTt<P2Tn7yw$#s1Ag8fCX}Oyw-5
zt6CtS(a&R=2!XbD<cBB&RV871v#szlpBhD=MCUSemrOtIRi}MowXaB3?WBNrhtrH2
zRHq*LoJrTKjdgS09`(m{Zg9U-7g-^mWNNSVxhHu~_4jHSci%vFtjYFSx53_yiuM`x
zZExRDJA3&indt7`sq*)6ZFBDgmuj2Oe=?9=X2V>p8I_5jhV_%-ZhQG^+feg8Y~SDq
z{M_d?FM2}jl=&PKn+U&YY)j%%i9Xl$92C`eKi|EO&H4Y7r?%o(UJ+2PCN@(`xG%oU
zYpa!B6DQ`xXcfiFAQbW7Q<H~eHen{lkTvLOV{f$&PKT2g`JA_!2%|M?luu4ra1L`h
znj7{2Hc%_UJ5hl+Sb>-H52bb-voYCS?KP2s?0tXl?yb0s`6Zb}ka2VTvZAI89VA&q
z?Eg&kUc^b7ak;-ZtZ9E?&;Np0Ej;RG{BXgRIDR7fN?*jQD~_}{pwUOpUXZE3VqEx=
ziLvNfz#v3ct6sW#u}xV^ziBW;vi4xIzn4S<oyyC&QOyG3dPPnAa*pQ)g)66i_KQCw
zdfmmaIZsPO_yb#OmN<7gO@t}U^w7M``d({_HeH4X%1ss=kP>JhC>bTe2=L&<L=Mdg
zOIVyD{2u4vt!xC;EY^Qwj<*0!DgZ}>vxs=@L|`dl%zHtB{oa(8dj17u7@-S83J<i<
zz=<hzOAp&xPv~mHgoDYJ10}*g6E^dQNl*KDC)@&)dW5eV1Wl6sIs(pGe$Obr^Gil!
zY(04A_lJ)~VJEz>j6b4$@J0ds`;fhzf$QD<KUcimVP~A(-xOCof0i}$_ZaC<iaZVd
z{if$9cGj+L?99}!<0zA(NB`-3)w8{=tA*<If82ZP9|{$>`#&-GI5GcoejLg@xDpL^
zOn<5c*Ffi=CDi*bV&kVvjg{|@r!Beitern?Qw!C<TW4%3bPg7pdRzJ3{@Lg<9)<W1
zsFV2XrSJag*}LX|$Ch0G125eh9(pMk;YO^U%jsqDE(rlK3DVG-3HibSviHsO@e7+C
z^iLh#4B+Jco?Z|AOn&z^S;a=%M=OmGYMVK3$JN%kvpCj-OSD@|C9`ykx-o29K1EL@
z=3PWOW=%33v@EnJGAvSq@BH#qMSNo9Gar?zTo?bb(bT2~6=P=C*`&;r3ZDb`IL2=A
zTnfEE*KdMjz%WDfb)l8t`M?fN0F?hL{f!khc6@RfV<z!{d>e}Vw#effUMP$+Q{LAE
zwnmYUzN)2Kzg^WRe>d|&@`pyV3DjR>#PVd_y0q6p$!^|(C5H+63;I?`ZBJep%zMro
z=s$Bd@npJ{Rr0|d0t<apgD_+|q{6S>D!guHH1^+$HeraM(wbj*v0Cn%-}(86VQgN<
z;+o;FU59$BmmZT$)-G0YFRac&dtf433Zjx*<w>5V4yH{?&s21TdRE95l@_G&k^yp1
zWv~Lp<EjCt9?LV9=A-#NpH`<<!SQvAMhgL}fsRaTrk^yEuN*q^hScSqdBddXwK&~}
zs7!l$ahDV1^1P7%m_l=C4E&%}m{QmT-xEX>9-daDM4H(mDdYg?A!I!wJyL{D=}O%V
zzq~riN`_-=ZvwT#qj|;@I0X{~Jvh5_1tO))p)~MY05&ZqDqb}%Mwo_86A9x~<3&*|
zc^&I%o$F_CNdkM6U6dW2HbmJ+J&9GPRxbc;?>M#im?%a3`B*gl=|)G}16O)W3&mkv
zGW)H`DBE*rR3bx!2E>G^!{_`F!dCGpVYnkkIb(l=x1NWpcZMEZ<GR3nEo{$B&96~u
zW`?Tvl5eUr<`2w~jy!6GI0I{lFc<3);U2NZSS3e~s9Y5xM~ze4;@Bc0fRcPNS;Zr2
z@+xBu*gkn!AzO`$I<8Vy9qz@EB15$>FJ3aV%-ATUm}ZPBPZ3Wd`y!fAN|`Yfe9<^B
zJ%3Gl?VR-7btzbrea#H0$MB|(CDXNn0sW<6qapZfZE6i9CMS_r3=_c?#^Kal|0-j3
zuK$$7+5LTMmg+%kgD_0yC~IR4jRF&3(FIr5H)fnru=d5fDd4ZB=ChSGsd?=hC$%3;
zm?5l#Oyb0$`j_T3WYgjv)9JC~H03yPN-^%4-XlKCfdCdT)*}a!)ns!gVvOP>5f)UW
zxt-^Orduw5nm+vB#W*HBT<^#%F;kJyWyCp%@^WDxLvt`*!GW0E@pLdfwRhj%yH6V3
zJ`W_-C$*wQWF$C@aqQn0kI$Mr5~U|h;nSU!7-6=V;X*ClL9^kk=KHvQRA-t_;%Hl5
zk<tgSjIkG%=n4HT>k=GKjrAO$^zVr!Ce2^Zb{FJ@`exu!X8xyVS|xe7-{b4k!fc(C
zcZAcfgwu8???`I`-)N(>J9D;ZLem2<hhgm5pIn3nZ8e(ce9Z#n5hlg^2vU|uMAvGz
zVT$%Ae>qg)YG;PD^*1=}Z(xfwvs0$t38m~nP>-=o*~h4e9YA_MBUdlUqCpT?Vh}~y
zJsPW-G=DwTU6>n|nG?j#Fp=zQSygZ<N&|o9tWB*ESORY?(sgG8EATgD7gy6lC7E*}
z0^mBfq+24nYv6b4*njBmw~K02R-mD;-Z3+H@J_C;P1#<;8)N0pzI2gts83V^#q$RM
zU7c73kfCQ41{Wc(e*5w7<>M-*-$IYf_#<t(dDvuef=aQ9N=aryimJOmWeic>V@?<A
z898|t#j6ZmYQ1>w%IR_ak@LM<P3hW!G2}^8#!?L-=bIa2u?AnQ48-gH>zlrNTK)E%
z^jmMNLe*-bf&Go^>M11x`Oh2ox=Vs$Rs0zK_mM0F%a^9DCf8&>vVdFaag?#6szEun
z2x<`6#&~Qk46Qh=EDUXVEY0N;YnPE?n<Q;c1o1~4*To<wN>s0%B(^~=6Km)4f#XE3
z@!`e6Yn>ad*AEW$VlVE!=o3xS!23EYJL7#dqe<XuYg^|=XWNTiFIr!8fj>xEi=JBV
zdeH`c#W-JI*}cLzv@&$vd3GgLCwGGqV<6UxNwP5v^*3|Eb3O`)T*K0MPbd%7x|XsK
z6A<GM9M5iSERhb97B?1&2Z`X1^^L_1Feu*@RTk_f96Hb~+fmu#2G`wtclsg~*=qZ~
zh+H%NyZ#O&nC|IK-B`2)oaK#;1#1+rn*P@cWxcRLee@jl<T-GbiC*YRJc=;)Nf1!#
zdGl0*2c1^$uX6nukZ4=aHE_XmRr<|BQLceAuKNlQ62Tu29xiU&@2g3xBbL-<_2@=p
zZ>sX#TrjR8;6m^1y?5=vzzS{Uz|b}3<>jHh`m-_$$`xkF0RrNWIF7SsdM%o+&tIP3
zFM3MDlgK=e01gW2i&+v*FYRWeMgs<9S%+mxN9^bUYZ$%YQbMYYS7__e?}_BZv=|dA
z+T^e8tH?%Ji6|abyf1x4%g^}c(Z{id(aAw3Rxp$2@2;Yn;6=hXOwHkRaNWXk$r9Il
zy%+p|@jTn#G&^vpGcnLNQ$HiFm)Ln|V5w>XF3=6X_3fq>F1;t9J`zB1&&KujpXPsC
z{O$FP^%Fg6sKaWTt7^zDHQ=4fO5J|+5AxYRcUkFn;V&=$ioEvgeE_kgE>V3uZ{9&8
zMdg!#PVelzxAV^2dgr{mzQ6?@`4jP{$fhiiuufVrOd?Gg0t-n{#b3Ymt*F5VPF&GY
zi=eT&Nzepr)`cZ|DoTKa%^3|vm`Cq>I)em(!oXPgXN;0_AJ<iSa$Ga2j@PKxQy#lO
zLU8kgL*1Oo>&P=PU`w%~_#0s^8c?ZiDw6BV+eod-z+8>snl5miBJg~;oiiUF0b(%P
zUEL)e`W>j&rTvfo`q<k!MhM3_lo%>D3t`N?9b5MUed`;Fu$0EuH3AaquzP>M<F2aR
zRg7syH1Hd7Jv}A6w06;YJ!(DO_iLSY92&r+2fCjxx8X9a;&kAyzBZt4u&AsE7N72)
zEy?k-FENBqmQ4;RK>DmsRX0;3Wba{bHP0{>mF12w=l7s18}fH*G}h%+qWjGGhycao
z%8ryNX1F(vr_4joUbefRf;e^{Ihd!gWsP`ny<Ppa6dMW{l9JSwDH8#!bw#$qLqSk%
zltTsN3>s%5^wvv>0vB6aZ#uUi-ah@|(*u;t*1|2s*0sKIMZjYsB4W&z<>tyf=C7qN
zod^mcl9JdmWRZxJ`|Xov3$E%p)g6uV&&E&&x+>bW+ILk9npq&uzpp03$0-6QMf#cm
zF<?Dg#aY@b3*^uErcG~+>^PTZyk3)6gr9SOQg*+-BJ_n8fR9mYZQ-i(r>lwrTMQA}
zMfol83@G2<9~0dc+^JN%lS|^yJnVI5mFU9BjR`IAOjx*I06MON2g(Ms%ChDZbKPa#
zXFOKC%}PY2;_wte*(~-{%cM@H2K;0E^+))F{k5o|1|DY#3jD>YMD@_$8pj_<FGSWC
z?yD<AN(;e5wfAaQdsh*|t7qP0U&5|7?M1ZhJqhyhjP;qwx!-VeJqajz0$`PvnHF(O
z9Lu2HodBHSkv4Jc@Jws(JF7XXcf74L+2L_Eky;K8k(S&rHU>%Sg>fw-=VufgO^!5-
z1cA{ZCA3nwRY389*3UF$KFJ;MqxCV(I171=z#YFjwR-%o4_BQ*CpsY|p&C_Hyi<Q?
z1cQ6AlgCPW2gcrA@)$Vld0cuowtf)6P;*4a(z&MlO}R_C5xJUs`r3zx7}Ha8Pq&!i
zT<=f{u%4p5j!y^(h>qU2x7&^uWgs_yO{1?TZX+VmN1FUm6b<Ocu8YG&Y#Nm<;)}t{
zx9?`&y$^eDV){I6@Xp&?YtNBk;TyN#4u`!|H~kO>jt)f{M;hwIIH;S&vQpKeDRzOR
zHg=?Gl$c{gK^kn`sz7AIbIs!1P;MSW$RuLEQbK3suxjUCK1|ZaiZm0%#F-e}>Zp<a
zfJLS$(V5!WS>WhH5(rvu$ZoioRXc!fOwzHrJwr)D!hcM2RyO7&H&A>-b<>0BK>!lW
zb}yNe6i_R&%&IcQxmvmMIbUU#lg3gBAU8Ud-f_hEEV&chmwYgecS@ZabyWP*Sm28m
zq{9oY=TmoJC&I(eEf{(Xg|;ZOw@fVVQuoVpPgg2U4&XgP&_i72EeK7Bw^P8x5Xpa(
zC3q@$nw9v-K1TuLDktgH7HO96blQI%4SS8m!43?po%{pbG|DBmA=+Td4syICUT&DA
z4cB=Ej*k1+_ybgbb#zpH5UYhQX}7A;RnAo-W910GbnKDtsgc%<N=NaV2R}Y3odj22
zq#g?nVR41nIMu!SIEeZ+a|$-OM>!yak$}lf_4GzCjs;^Y2r19-C;*Byl5*XZ0=v06
z6zl&JZeSOe5J~n>gAuM7xhZ<FoH&nowQEv1#i<eT;}Q+VP4)si*DFd!g(V;vPZ*6r
zn2L8sGU2L+Rl7D6HtcyeYl~w84A%`~&PdP1{6tBMVMn4x0<TP<bn`>VyJdH~Tf5x4
z9jKca?(K9zv<Ee3+5vMl-O}PX89`PYSE^f5U;%jpHnYpWcw)V~>lq#>53DEniBjz-
zrUk-w>#@Z`5UX782LEJXmk>3)dFb{pcBuj>Vs{Gyf!SnK11-0Bx_7hXIBB8y)rnPT
zh(H|IgNe6ro1ih#HEzWg_duzVw^gRS;-V6Hl%MD1snomJca7z?X{xEJ+V9Nd>UtNG
zG*hhF-*)NMw|%hIA>0;CO&cLSPVw+2Kg3=Z0{rkFCuEm*WmM(q1)K{Gs%>lQ9K$9n
zemJ#`5O+V<77i-U<Bx#xUzdrcfs7!RVYo%T!nytsa`*5YkDUOd+wDT&Zt~EwnR<(8
z-QK_rlG{SNdO3`psvDu3bnu~BONL`2v`jQ%DFmG0xB^zfx$`iD&w@Yrv5&V2vyf>j
z_QMqw;P8rf7j6xT|9yNe4g&gi+pmlJ-L4zPyk=TpDB`xP>rj-vSv6V0dCQgsC1(v$
zPl=msR+Ke*h1h^@^%!Tqp%W&+nwT;6b6UkqzcEEX0M8yD_xGQz7z+pxCnl!tgRACa
zBB?0oFr)p;4$xRWO(iE9h^{(i?6Ch3ejb&B7=LMJ<4B<Wp=YRiCCY)%e6G?#9O5-b
zQ<e^W8wXLFk95kP^J+@g2~aAYmVXo#FK#Rrn{;vQICfR|!e(i&hOg>rwZLdQCHod|
z@!505FO`i+4X&_RltieG2t$VRV{y3^@h!7OZN9^HXxr$3_M#Y<AFUBePVU<5JLdpf
z&0xG;5<;zA#B7yx*v5K0ncYl!KzmpwlI4$a*MD^U<H8H;KOuw)yO|KX!jQg>x88Hr
z$|!I0P72C@F}O1f38JQ2{yD|rj6Q~2_sUbkV`VGcc}%JzYcUMptq%^3sfMPDla(xY
zDqI>0FvVrn`kmdylAa8hBY+WKSAm1Xo;Rxs9X;OTW_=~`E4qhK{LBH$>LZoUs(sL>
zq(bx&`nn8)!9RW)bE(wf@DOBTjQaYEThJf>jV^PLoO-2`)Pl>$y*#{on2;2J&g~mf
zl6RMWsoCr2<c|yrbO;Ie9S+zZC|K(xO~*&&5QY|y#gp?=A~dUkDM(y&tCFVFrm&x9
z@fIwKf=K;K?Z|=@g6@zIkeQK*xFVgDMt9x;*l*tAC-U<oN)3C8YW5NOcsHl5JV5cc
zQNiL|RL}e=)3<@qKWPng`s37V8E|V$nusqlDO77aLzYSC;kGh#0Kq?4HyXdX14QRx
zVLmIvUhu`xzZDY2-v}#FpGu9AAE{C4o5u%CqZD=!V^NVlGCV*SbZ23KcA#+vEPMU@
zYy4U5TpF*UXfS>tUVW-Qe3U76N3tvJLM+oPD^cuO2{~iSU<Lx?rO(-%zq2>jH`lAy
zT>t0)yB(}KbiEyiwwE|9ljQm*S;9%&OLwn(Q+|=<oZ*`|?C%;Szh@A%c(qrvV@tHY
z-RhGoPqP?d;;`47_$m+d<RBYqc}8bD5?eHuJ(lx1gC4M4UZyC7aa@<JUJCA++Z*Mm
z<XVJ7Wa&nl^n&T|0Z$#U;<G8^^&1U)j=IO=Hyrq|!sy}8hOq+i>@WLg`U%MiGldyl
zLbqdX^)7&}WSTtR2;>O~gIAhqjQk<H(cq>>IVYbZnUm)@&>WH5<4|h)fs>1o!3bkX
zy<vQ4`&A(RpYAv7!G;O1PP=ufsaGikUbM~2cLCVJ_G@tb!^A=p4)h1wtDCi%ys*b(
zi&r*o`4RAcYp#Bvh-npcIJxI$ZFe?uOnSi$WKn1e?QB6WO}~8%bz5R~*1yuH%y~Z+
z$5O;#v5Sd+ER#ffH5!;_d@cvCJZg3^@n2aN-U)UMj&$N<;Amg}C3Qm$Ks$nu{&;kZ
z8E7ILd<ue_@P`ZWam>=TE7e}fWf~#Lg;3G^6H~^FSd2Iru@sSo&#AA&!l%%Kp}>kx
zm(a}=W+x>lOHnli4301OW!p5xR9~3liFyVDSNKKg9-Rl3Gz(T7NwXb^cUx(sJozR4
z-8(h!nW$embb5|i-1S%zA!LUXc1-L(ItA2aU~37H6}_A6z{96tisujqgaCjqBGNRS
zootIIc27HPT$k^PD&@HgY>{4a>A$RRlid{r9lTow*MHUAyN_xRJ2KOGaQAm@wbSUn
z<5X_RNGB(rdv#Qlxa_jQ!ZMP&^gS~4qGQyjp+S+@V{V-ecPX)G#mwXI*)?h<;yjSB
zvB${2S(1Abh2i&|#9N&X8O|QQDE%e-BYLZPu0*$ST2y=IRD3P>9_>v9H!CU?s*pU0
zr{X%Bnh&g2ic!~;t|5ZjVh0U6TT-xaws+#<Dx2lZ%>jjf5F%ju>Wi@6uUR9!4~8<c
zS3B+R?<fxYv&q2DncYBCSDIzW94lMhz(sw7TQ^I9ut@00E)W&!mgXeYdzGR>7kz$X
zFVueo7Mr7ZZ^mwh>wI|fpl5J%PL9aF4i`8-{g_>tg@BW}Y}C-T;-Sj^;Epaqn&{i`
z#dTs+WGdUXVO?!)QnAOEy}jBLLPV;KvoU77sVH_+M%_5@5E)kMy~pp`XdAp8ACGHB
z?Bwsnjk<E-q|`pfVOq!P<OA@t!MSGYGp}v=TPgN@c&%oZC9~GaLcjsA)Jvl|n~f9i
znT^B9uLipb=|w}JbD+fI;>qT)dhU}TS>l!8GccTu&UuTh)=2pnRg=P?$ClzzDk)K_
zJ^dF<(Xey`<q9}j8^~DQ<3;&E2MXuV;TfUXD9Z+gbAuF-=YtO@1P;j3%r1(YY7``3
zG>lUG3r1=vPiV>BBPDKlo4lFW|50mQ?_;EVq42^i))nAqe<=JxWeJr17?T<k@_gu!
z`qX+XvVm`IAu8z`BeQ)!>yBooTCWkH^e*C5ufnPE@THn2?nzqxS-yoT@JA;4+y$7b
zrI=<mC)S=qY!*big9clg7w{LtfW4CMIm8D^8>X$-h9=BLZ<P_px8Cvpg9QhH-qYGT
z!Q!Rt&#mnwmc39@{;J_u;g!F9I|Q}R^#E2lb!z(4Tp9COLepk7P1vj-24S>f6U*Ro
zKo?W%O=z^jY9Cw~r1ePxAH{+}#9Z@*@_pB@XjuLnlE!U*lUR*M;$J8qMB<eLroB0T
zv?mxM^!cexXL<`}9rjG^c^mO|uCI09Tx(wfj}=AWL;x#}OA#0-rP@E^Mk|B3m~Z;1
zd2OChHC~~v7@JJeCta+yVDgU5rlGRBX<3CYo9V~)=)7&9%ci)`;ih&v&N|G|>`%PX
z*A~~i4;@w&iv@1dWYXw@3u11k-^d02gkR^yqv>-51K)<DHTbrSNnrobwgf?|P!Pmv
zKDX(Sn5N?7F$4Z9GyzmroLvK}-Q~FU_sc8TWkNyz#no;_cU0ZUx{?FTes^H5Zt2`J
z_O;_H1^iQkZfIeVkRADh#!&cD1J4%7(EZe5-B+sxjRQUM2O7R<jygm#*`yXa2I~}b
zD7xOiOVkw=eoYo61Gn05GlChAJLv^IjH=B8YtzTOOCtrs;0f7eKw=$Zv`5p0FF6O3
z?KUr_Qz5q;GfW!TD)%j)i<#@Upv8c9+&}C1lzUxpXGb6K%V~}{sx4N)W-)L=lsA4K
z^U2kzRf|KRZe6$t=lrKi*;|P38A{hMD3#L5h~G1no_MZgm?nxk*^Uda0mnSa_k>Rf
z)4)?{5S}<lUC*W}_)vtFr3#8Qic<wLbU{jXX%;yZOX)A&4cxcs)a}<1xNU=(+nzLw
z5Gc}&&2v@p>rrs5HMEdg94hN`1L>dkR3(%zVk$Nvn8`)-16UEUAYCNWERcu_R1=fj
zmHQ4eXiO>=k$NG>g9GcrCWzq=qcAb7|DGARwerUK@K;BKe#QmxPa*kM6Fe$P84-wO
z!yuWLRj+2j*nwC?lyW4Z=?{dyUJU`Ran0P~qz0T&1DO&-v|(D4W(H<GS}<*Z-K1oC
z6FMnHyrOcy@?u_bnIE80U_2P`$kXBJylR}l>3zODq<>1Dah_g~hxC<D*a5}?eF5o%
zZ!j|8EdVq)DEEW3Juy2k02Z?=01ma>O7{rND0kknmo9hGCEi}%GT1%lhTVNnk+LEl
z8hu*3mWlH+P_Mp@A<6gUsJ9Ek!Vy$Nc$i=W^Dk#PY1eK6DQ)Io4;2NUuFUEU8*&*6
z>%;m^uLg#wc>Fs<O4}^}-&K26<~ime0oEsW`4x%zzJiE&QG1rZd$_md4x8W;RUdm6
z%)^;MRNV#;{0`@NH@3JCMDpdlStoqa1BT~9dKSyyakBHb=GrI6hr0!1eIvYL)lW5~
zHdyrQAj!QzITjRyhPcYOrr5Y53?dJ`Gan7d6vf?&dxD660-Rs8wpL!rg$hEWvEqb?
zI^(*82r)KV5Sj<QQrUV69j6jooUgh2WbY-HOER)sGk*@&4>cOhs80QSclY2=cl>_7
zGf0FAuZH?m#S8@R@}rAS<S_+j2G8+4Dm-(H!N<Yel3bL&&Rld1JUV7hpA7zwdMlB-
z`g1YS2vPK$jy`BNN}i(Ci>lM96V=7s6kUBJ2w@&Q%I6<F!iM%0m%cH6T~g8q0hb*~
zebk{3Qd08T_|4G?g7&ciy$oq(4mUjrGK>yw8(Z9((;ORXqJcCKWil&^e6>3w)N@tN
zALu>C5?fbC_+;zvt6T7;x?o*=ZBxCi_of$Ng#WC?3k!X~9=ah}e9-t{Q3CGj$cKCR
znh3sW@34Fkj(FaVx(5gUXiQ2cfsu)cN^)CvdBZ{7vi($nHKKC}R8{5*i>V*CxzTyD
z<vdw5_tm!7Dv}$W`??ajGQYnQj#!$Xv$sEIZn<>b>WHYbx&g+<=KyooqFB!<iGj>X
z4V78`*?pkM1V~%^{dN9kz=08|wAZ=$vh<VJNS4=;65wreE>5Hc$86hFgl)zZ=@p=w
zP*2XWO%YSG2NCMLQAk1f^n%#)9nb4=V`~3{P0fGT4d`#*LLd%pb8!XAQQVa_3~aAB
z5I#ed*GTr+xhC^AyEXaq9^dk1lH5vu9&YR-!$_pD`NVu_tOQeF<O4_6lRUAW#QOQW
zg`t{uabW_8AAPa*Esa6>k!4#3+70K1X4oztk!uVBquVSixfk5Xr+|e^X1w|N<;{AO
zor<g{UO@h6r>b8jJ6EY}<@oz3Q!XhK%P2z4+s;-mL@(^G25-SFsUSH_m?4CR9N*$c
z#<-ZCCc(-w${3x1(xsVR?5O75z3U;(17c5u>w6a>Q&Xcdaha)tRAiw(6V8yAq{?_r
zD9@V=G~=eH*E<H<^*#7ttlat9K9_30<@7{uCBF*S=jBHVH~`9L$z$Z!^1bpu3t@{j
z!u`5@h+$l?T%LThx*hz$-2AcGOW&5uM&Ll%fwjIkD`2-wQSE$f?`1_Ba(?n_vNf&s
zZIJJk`@r>rv&!{@;fBG55qx&8p15w`Ky9O@S5Xq5PsooOROpo#{RVhHzm#2T?uqq2
z)Z^j4JmHP?1g70hTDE+>3sZg9)$<*guC6zV_$>wOF2?}qtKstV+*P^#`^E8AFv4|a
z7CZ{(@4`U(%Djp&Su!_OZr{DINHaKLiJ1)-!2O&V$iN~m5LulTlpMeenGMYdZIU--
zWn{J4D${_`!Ft{a`1RSTqx+}!WSAf`O@IS*qjKtC0yZ9dyn1Scr-Mw==?M=FB18vt
z{CW1?YECm;);xFe&dRmJ$>oT&@;QK7|6tX}Zrs>Al!--1u;5Nz#&OBV+rMNeTo4d^
zZ-YQfO&|af7`ZE;Hl@NRK-{`L#el!w3IlL&$pFwXJXwQp1|&Q1&G@q$fV*wDi2<cv
z0|O3jI}~GpPQJ;Na9_W|qde$Yc=sG%VZ14B5-k)jAptiL-ENRQ9>rV=6xyjJW9#fC
zC1o#rm9>@dcQT*BkDlv&$JaHhyMzTQ#Rm>C4gm}u*ZK}==GFlh%C%%6i{9U~&gM7B
zxR{*j91PPg(B@M1TVpJsoZCCcg#0keid!%*D<N5x(R6B@t>N_HOD$_LdZFi1k2q09
zE)28ZR-C+A=NQQiNw_I8fhW>ij89JC6khyWK)yx1XgpZ)uP^_BoV!&h7d=*f*8^1>
z!jQscI`KZVW{ItY)}lOsS!y_mU!W7`Lv0B(G=BjgHo7w(>PChJO8EZAWDZYBnn9lK
ztcQA0MoGC{V|#qgBPNrcI!O5b#qOT8J@C4*X}wAL;O~O}s`J=svzc)|p=KbsonvR-
zFs?+NH-f8?;nyCxF?K|)PtcojLjCx-xpNw)MC9z)Fg^;8#H09OvE=M2Q6s5ykf#+n
z<K(Tz^Wzzz+ie7^kF{budIlWW5uIjE!0DX>HZcY91<lYgf1+sRO@xLxEs$t{BCoKa
zo5)&NLQn*1#uBO97Vd-&2B-<nJwSsW7eLg3>-G3R&(2PE{(L3TP~<P$)kQW|)>l4e
zu&&<n0iuf0@wu&wtO&MC5SWErn7Z&b;ytFLuW)3pwNJ=%M6%ft;N{6vGpF8%{X|*`
z%i4c(>|EJ>Cv(D9Nxy`FOBjda^G!2^eRGZL4(l<pk1#WT_s@Iaf+uXWr2bVR?tNT!
zG$#%h)NM^V3S!2>+WtAo#Wmb_S5`?YfGYyw%&k9<@LFwbI-4s+lFF5z6H<M3;f8@)
zae`2tAD2kdnV3Pf&=rg*F|thgG2wi+CHz%t*+qHnC)u;{ba@7em!L+%etmA1cmRWo
zE+vatmc=4fQM?>hDLEP^s%2ROAo^@bEVB2XN~%JSY=5scBAyRC<H_v*^>9rXxZ3t8
zwkN)ECh&6CxqXO1Kf1X!TQ>OvUMHD<-C>oE#ut@aa=hd4`9n$%=dd%I`~lJ0`KKI~
z;%G!sf|4T~hsf_-dPs-Oe(;>^Mn(q3DC^X_dgqphmz`Fit1EH^#E*Eci{I9>p<6C?
zgN7km0m*3Q@YCekeAn1pc~NPH{WAYCEM-w@k2~4B9zWiE3}LK4N3{|h((C#o7!&>W
zeem?5Ju_YPz~;8t?>Z+OFW~egoCu#w|7S3^KlZ0nLR%gBxVyh&pk8*bf}OE_X?lBB
z?=4aPV;dI=ecSGJSH<O$M2Yd~m>&uE?x5mrP_roi9vYgq3z%O?QqB!N5~|}{Ig(7o
z{IbMlS8BG$eR#qx3cDBfZsZ<@+di2<W|1MqQEQG(fL^w6n=?aTU;*OH<N!Uj|9~@?
z3DyCh*MT81`65Tv7kf{$xnfZ?jh$D>*~K%;)A+E>;pl|4Hpa=&k|~?295*v5&ZiOT
z<M;=aWZ}vR0+hf?bex29JJwy_YtAg^wd_IvSDbfZ`YxpP)<0&yz1}>vWBo4O8rkn=
z{bPCX*!!h}bF1^<xv|M)OHE2Dy1R@7PbU;0L}h}mz$O=uAX6lzgLBz;#&>_K@t(Vi
zJ3%8<1oeiE>M%$3iB+{?c`h849nuTiIsUsdQ9ABDT^dzkdXog#dI78#^7}iLWI5m*
zujc*<tqlA1|BvB3{-0PyO6`}|B?uXf=(O&69Dx1d3*p*&g8Y>ilRmYLH~@Ju;24mb
zbIxW?qZfVjvY4}xXDm(cI3+S>A~Vmy2o>fKi(JDFzbASUm@lGMBi(NpmBAdWbbA+!
z!CIpt;xQHG&wcj`H<;d10i{_<WnyDaWwa?5xiGNR?`*deIx|CS#sGEd;5mhi)lof1
znT=lQECY$V+9$JqK$!6Crz4g1YpT;7b_A&mHQOW=ktczCmSu(6wJDIlWmg`#XR;As
z<RoEanA{56wJ2@R+Nay1&AQ@u)dIjHe~*M}HsRGdux#I(K{ivx%WvNLhd8f7_Cd<c
zdGIA<5OKKZl@f7=`D4kC>49uDy|OAv!}>b)Zua>om^$l~966^mg=X*O$w!QIM{kbF
zi!_+y=qK8hbtP#>QY3XAOk5hJr}tfZ%2H2b`N+_La2-s$)Rxe={sk*PfvIqGXwOx;
z3oC;>ug|@}{GLb2!{WjU^F}Pc2@$YPjlGj~sjZBEv3Je5^d>yo-&<D(YUY-|RI%=i
zAS_@>{5|T6HAgIe;7ry#=80#8N2xMe@r;m{ya_Z=Z_3gBj-Y1{$fKU&<#xtw`|}e(
z-YnX))!$niJODOa5?V7u0w^$#Mje-oe8;wE^x<`Du*s!%%BSvil-?|XYwR-kbJGHH
zR<QbE3B#KSYca8gSkAC`Svy|zRfO$^oOh#WqUpCFwn2{&+Y?))5|JBNpQs>h=?Skw
zVl69M8`~@VK36YNZIRoJixoKs;b>SYP5DT318bNC0h9_h85^>K{rxNQ*{0oO&T>r=
z=2C=Mv_tahv~%GUx8u^9-cZ-`o$_4Qi^x#|C9$;P!6s{I1%L;Fj(v{~m(;Wqn{5&^
z@sNdwv_i4f)tG3-4LW+kb0XE<FL_AIPA<pPXDPekrZ;urrZ&mcy+HyEdg<2E&>LBn
zmCCMx1gmX#Mw%&4R%SUGS>ka^@j)5uGT~wO9hq@6k#^c;Wmd!VQi|R%sZ6DA8J3ut
z2WHXs+eW;r#shfdFC$bkD~qM2H-%05$x5ZfjH?}L7-1Tda#aD(U+LtdY$IyIAlN`K
zFu+<D)K{CWG4?l<W|Ydxx}XFreA$%tMwq84vubY)Bo)z9sJwR-XSnd0O-la*8o-%_
zgcQ&N5@2=e)-Su>sX(Wv;FNx0f<R(+=HXUV;D8kspqH2)6~09!<jI(cXfw4P+uzbT
zX8L2gdOSpS2bAE*Ks<~53MjG$<kP}w$%*g(9042y1o~7xkbr_9;1K|DSrkD4yz4Ls
zAk>%!0hAEeAb^ocaS*^_=3o%OPB#A|fIYJwK>!ETJ01jZP^9lc0Ed{9T0YLw?30g|
zTAK0+Vk<^I(bD=!K1piFmrtRzYdH5)!FPkfkc9#82k@4OXjElN4ozm}<0%WA^vI(1
zoRTF@4P@@3L9(pUEm`3VQdUjIfoY__1X<TuG}$m&`KOq=J0sgPcI|!K6@^bbxi6Tn
zh+W%u93w7Ogi;P^0@0@=&<1&H8Yj4sgcU}qdD0?`sRo##c{j9T5W|H=)FDN|D{G~X
zQQx&IL`2l_X*p6RSMd%Pe&NC$@71^v)b>?*I_`<U?uuHFzDjUIMwO~y8uy*AaZ_o6
z)Ymjo+70hawu`=+O0^S@3~)wLP=&Z9OBn)ZS6EHP#b5y2421*I-`@2A2WBo%r${m%
ziEKZuU;5xV*E%IUHNuIX7RYq{%C+t1C24$Iru;MjZmI>VUNZE^J3`xt55!XHXH~9P
zB6_+PS9<Bljt-RH47U?*lMk{?e>z!`UN;jD$L*t??Tna9&t=PTY<+BTJg=^R#O8Fr
z8)=Vl*SmSDRw&U}NFrMJ#_TI_!rpAucm>5mA{Q0BeTV)Y2fA1@zz%cIzV4)P$q-7a
z?%s_O6}96>r91OKpKlw=@}gI3yRVkjLyS=Xx?8+i+EhI(w1QBXEZsQ8^OfZjYcmJk
zSDPl5nD`P~%|%(X_^D^N=ws*BU*z<u_ZA>XUP`9^)xh>YzgIqauSA1t@0!?mNsy27
zyy?g#lxl>4p(?cy0<=0NS(g(oJLw`3ISDD5fKzT$P-=79TVLsDXr1v|#9QY`Wy+Q%
z$GFS#<&h~+q)@REzq_McnF>`Z9aZ76YPFsUi(<$ya0mi|grFd32nKxiUz8xq5ETd(
zd<;NNf~Y}o@Cejt&_qO{MH`t8U3z`>E&2=?GGfexDKix2ELgH)&4w*%_cIxt9eWNO
z?cl_j3s($o+}rjl3wiS5jfsVggUg4nY^TyehhEVj!FWQ13KNbmqQCv)M?Yn!C<4h+
zgCa4+@}&mjB}lxT43Z+G&1zkC<qrMq7c&wp2Xp1gmvEWNm;4FsftMb8;;9!NdY;>j
zNSqAS-!GP}SaZZVhpjrV-dWA&U2xJV8>v;NUW1()HEGtORhxDlI?3(QrCX0)efka9
zZP1WmBS!6^sKZ#sjGK_HxvD|?Sw_Q#{AF5?QTy!Dr{6J|n~e=8Zl>TBJ&jMGSD$_Z
z0E2`?#3ZC-<Z={qm8`{;au(muMkaZbBbMwqV)>ITW&E|23wZX-WHM$}mf6@`>S&|K
z+RHSIYjE>;0B`mqYs}G)GwyumJHPoaV1Wx-@Ob;+<IgnSP^Ia_!i3_qrd>tF{e(YX
zlS1PHM9F<oodGV3i^>qWvo?hJvg^`+U*2cMj$_W#w#(CwmBQB>w!8{GhUrDF`^E7!
z;r^m$+&b02rW3YrM921dWuhn_<iv^sA=N1Kt{dh{W@4CS+kQxq{lF!&t{d?X`IBOl
z;41R?E{v<5YXZ5Mt8pouwBuUVo*P@adoku|e~l+E`R*nc5${WWnk_j$4HV6_oj~bJ
zp2o?mP$@<|DJW07P%*(QsnxkzPTQH$x8Hr;zUe}%;zBxOV`Kg+#Q8C`xE>?pu?OQx
zaB)rRau+#gFN{lYnZWq2yR0eU6I>lkH5FG4v{Bh>Tf1vl+iO!#<uye>Q(3=W4%cPK
z)pK>-kfVAi$lLZ(Yu`I!o#3G~X4A0`oif`@ZIpu$+Ms=2Mg8r56f+l(px`)zdd*!f
zcrAA&tG1gj!|mh?ohMl8^=)3w@<(&adzzS+ZL@ru;674ZFDn1oOiINURi3n<&s<04
zNjIIB_c8`m4e5r;7t%98ijgj$!XVXl7IIpUtf7^<xL*R7m>M3j3@oncB9}#1H+i{a
zG&!fL<(pz4S_m603$zkgDCj7-P=G10S8%W3LP70IFz_W*s|4AQuSzBNm4J}`#;A9w
zF$yqx%Ai}*l}=RFxns6#&O->4I^-N8InVGc(wzmw+A^g0Q|YV!^iE%!n2B}7ss8i!
zVVk84ulltZR({7OwqSw_AyScvTuAXQ=0b@=XkkPttZ>4MO4MQ@mSQE=*(RFtgPMwF
ztiftU!NH>xa6oj{(?3op4o18&>XsjqIMi0mF$tdnl@=#37jmHnUlYU+p0qQ8@cIXD
zxA}VR8s-OIxtZeF=1iqj5>n~AUu56&lqaA|K+8(@8I5p)X-vD$70+9tYuq}!SH!Za
z=5<AF6Z5U(gPGH@5sL9j;;<U%BBR`^hbm|dCFB!D0?Y<zW2ca<gBp~eO7*jp8g)L^
zhVmu^kSmYV&Q}FP{$1mfPuxvaTKl+XVJ-Al;DzY$Amo72bQY>5qJG<hFo+!*GkKmm
z=;h6~GcYM)5bFQ90AFNpe;l6%KmhPi_;vu_dO-gihz@uF(18L3yaWuu1HdW5Bf!@H
z@Fkp#BW0{S$Fh1H$Li@Za4GV_V;ib8qX`B?%gCZ(w8$6-j35g(S%?Hi1ct|61kePC
z05XCWK>#!dAR`EZ)>IBhZ#(<gn4>uk1p@3={O}m=@8!dRKa-QQ`%GqX8nN#*p1<C>
zsO<-R!RA{lM(=yEfytuq<ANHmD3QnUmX6pCsNs+tY9WG_E1D0WV40|?j@;)nEc|Eh
jl$e(|&tkuME50)cmmU@^ly?QRB4Jb5RbnD+&%U}B63Q*I

literal 0
HcmV?d00001

diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts
index 01fa690c5..e1aee6f91 100644
--- a/src/config/theme/initia.ts
+++ b/src/config/theme/initia.ts
@@ -18,7 +18,7 @@ export const INITIA_THEME: ThemeConfig = {
   },
   fonts: {
     heading: {
-      url: "https://xfonts.pro/fonts/pilat-wide_regular",
+      url: "/public/PilatWide-Bold.woff2",
       name: "Pilat Wide, serif",
     },
     body: {
diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index 4d22b2739..69683c4ec 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -888,6 +888,35 @@ export const ICONS = {
     ),
     viewBox: viewBox011616,
   },
+  friends: {
+    svg: (
+      <>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.76889 10.0769C8.70353 10.0769 9.4612 9.31925 9.4612 8.38462C9.4612 7.44998 8.70353 6.69231 7.76889 6.69231C6.83426 6.69231 6.07659 7.44998 6.07659 8.38462C6.07659 9.31925 6.83426 10.0769 7.76889 10.0769ZM7.76889 11.7692C9.63816 11.7692 11.1535 10.2539 11.1535 8.38462C11.1535 6.51534 9.63816 5 7.76889 5C5.89962 5 4.38428 6.51534 4.38428 8.38462C4.38428 10.2539 5.89962 11.7692 7.76889 11.7692Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.21883 12.9868C6.03137 12.7408 6.89755 12.6154 7.76923 12.6154C8.64091 12.6154 9.50709 12.7408 10.3196 12.9868C11.1319 13.2328 11.8812 13.5967 12.5211 14.0646C13.1612 14.5325 13.6843 15.0993 14.0473 15.7401C14.257 16.1102 14.4104 16.5001 14.5025 16.9022C14.7259 17.8763 13.8657 18.5384 13.0855 18.5384L2.45296 18.5384C1.6728 18.5384 0.812594 17.8763 1.03591 16.9022C1.12809 16.5001 1.28149 16.1102 1.49117 15.7401C1.85419 15.0993 2.37731 14.5325 3.01736 14.0646C3.6573 13.5967 4.40656 13.2328 5.21883 12.9868ZM7.76923 14.0961C7.04516 14.0961 6.33121 14.2005 5.66946 14.4009C5.00745 14.6014 4.41714 14.8921 3.92872 15.2492C3.4404 15.6062 3.06845 16.0188 2.8208 16.456C2.70881 16.6537 2.62294 16.855 2.56245 17.0577L12.976 17.0577C12.9155 16.855 12.8297 16.6537 12.7177 16.456C12.47 16.0188 12.0981 15.6062 11.6097 15.2492C11.1213 14.8921 10.531 14.6014 9.869 14.4009C9.20725 14.2005 8.4933 14.0961 7.76923 14.0961ZM2.45182 17.0576C2.45183 17.0575 2.45216 17.0575 2.45279 17.0577L2.45182 17.0576Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.2308 10.0769C17.1654 10.0769 17.9231 9.31925 17.9231 8.38462C17.9231 7.44998 17.1654 6.69231 16.2308 6.69231C15.2962 6.69231 14.5385 7.44998 14.5385 8.38462C14.5385 9.31925 15.2962 10.0769 16.2308 10.0769ZM16.2308 11.7692C18.1001 11.7692 19.6154 10.2539 19.6154 8.38462C19.6154 6.51534 18.1001 5 16.2308 5C14.3615 5 12.8462 6.51534 12.8462 8.38462C12.8462 10.2539 14.3615 11.7692 16.2308 11.7692Z"
+          fill="currentColor"
+        />
+        <path
+          d="M13.6802 12.9868C14.4928 12.7408 15.359 12.6154 16.2306 12.6154C17.1023 12.6154 17.9685 12.7408 18.781 12.9868C19.5933 13.2328 20.3426 13.5967 20.9825 14.0646C21.6226 14.5325 22.1457 15.0993 22.5087 15.7401C22.7184 16.1102 22.8718 16.5001 22.964 16.9022C23.1873 17.8763 22.3271 18.5384 21.5469 18.5384L13.3749 18.5384V17.0577L21.4374 17.0577C21.3769 16.855 21.2911 16.6537 21.1791 16.456C20.9314 16.0188 20.5595 15.6062 20.0711 15.2492C19.5827 14.8921 18.9924 14.6014 18.3304 14.4009C17.6687 14.2005 16.9547 14.0961 16.2306 14.0961C15.5066 14.0961 14.7926 14.2005 14.1309 14.4009C13.4688 14.6014 12.8785 14.8921 12.3901 15.2492L11.4788 14.0646C12.1187 13.5967 12.868 13.2328 13.6802 12.9868Z"
+          fill="currentColor"
+        />
+      </>
+    ),
+    viewBox: "2 2 20 20",
+  },
   github: {
     svg: (
       <path
diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
new file mode 100644
index 000000000..3843710c9
--- /dev/null
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -0,0 +1,78 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "../icon";
+import { Tooltip } from "lib/components/Tooltip";
+
+interface FunctionCardProps {
+  isView?: boolean;
+  disabled?: boolean;
+  visibility?: "public" | "friends" | "script";
+}
+
+const getIcon = (visibility: FunctionCardProps["visibility"]) => {
+  switch (visibility) {
+    case "friends":
+      return <CustomIcon name="friends" color="text.dark" boxSize={3} />;
+    case "script":
+      return <CustomIcon name="code" color="text.dark" boxSize={3} />;
+    case "public":
+    default:
+      return <CustomIcon name="website" color="text.main" boxSize={3} />;
+  }
+};
+export const FunctionCard = ({
+  isView = true,
+  disabled = false,
+  visibility = "public",
+}: FunctionCardProps) => {
+  return (
+    <Flex
+      borderRadius={8}
+      bgColor={disabled ? "gray.900" : "gray.800"}
+      py={2}
+      px={3}
+      _hover={disabled ? { bg: "gray.900" } : { bg: "gray.700" }}
+      transition="all .25s ease-in-out"
+      flexDirection="column"
+      gap={1}
+      cursor={disabled ? "not-allowed" : "pointer"}
+      border="1px solid"
+      borderColor={disabled ? "gray.700" : "transparent"}
+    >
+      <Flex gap={1} justifyContent="space-between" w="full">
+        <Flex gap={1} alignItems="center">
+          <CustomIcon
+            name="query"
+            color={isView ? "primary.main" : "accent.dark"}
+            boxSize={3}
+          />
+          <Text variant="body3" color={isView ? "primary.main" : "accent.dark"}>
+            {isView ? "View" : "Execute"}
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap={2}>
+          <Tooltip
+            bg="primary.dark"
+            label="Only functions with “is_entry: true” and “visibility: public” are able to interacted through Celatone’s module interactions."
+          >
+            <Flex alignItems="center">
+              <CustomIcon name="check" color="success.main" boxSize={3} />
+            </Flex>
+          </Tooltip>
+          <Flex w={1} h={1} bgColor="gray.600" borderRadius="full" />
+          <Flex alignItems="center" gap={1}>
+            {getIcon(visibility)}
+            <Text
+              variant="body3"
+              color={visibility === "public" ? "text.main" : "text.dark"}
+              textTransform="capitalize"
+            >
+              {visibility}
+            </Text>
+          </Flex>
+        </Flex>
+      </Flex>
+      <Text variant="body2">Function Name</Text>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
new file mode 100644
index 000000000..2d4dbb5c1
--- /dev/null
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -0,0 +1,43 @@
+import { Flex, Badge } from "@chakra-ui/react";
+
+import { CustomIcon } from "../icon";
+
+export const ModuleCard = () => {
+  return (
+    <Flex
+      borderRadius={8}
+      bgColor="gray.800"
+      p={2}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <Flex alignItems="center" gap={1}>
+        <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
+        Module name
+        <CustomIcon
+          name="check-circle-solid"
+          color="success.main"
+          boxSize={3}
+        />
+      </Flex>
+      <Flex gap={1}>
+        <Badge
+          bgColor="transparent"
+          border="1px solid"
+          borderColor="primary.main"
+          textColor="text.main"
+        >
+          <s>0</s>
+        </Badge>
+        <Badge
+          bgColor="transparent"
+          border="1px solid"
+          borderColor="accent.dark"
+          textColor="text.main"
+        >
+          <s>0</s>
+        </Badge>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx b/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
index 668f9faee..b5c5eab7b 100644
--- a/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
+++ b/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  Text,
   Heading,
   useDisclosure,
   Drawer,
@@ -9,13 +8,16 @@ import {
   DrawerHeader,
   DrawerCloseButton,
   DrawerBody,
-  Flex,
 } from "@chakra-ui/react";
 
-import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
-import { LabelText } from "lib/components/LabelText";
-import { StateImage } from "lib/components/state";
+
+import { ModuleSelectBody } from "./select-module/ModuleSelectBody";
+import {
+  ModuleSelectorDisplay,
+  ModuleSelectorInput,
+} from "./select-module/ModuleSeletor";
+// import { ModuleEmptyState } from "./select-module/ModuleEmptyState";
 
 interface ModuleSelectDrawerButtonProps {
   buttonText?: string;
@@ -52,75 +54,12 @@ export const ModuleSelectDrawerButton = ({
             display="flex"
             flexDirection="column"
           >
-            <Flex bgColor="gray.800" px={4} py={3} mb={6} borderRadius={4}>
-              {/* Input */}
-              {/* <Flex justifyContent="space-between" w="full">
-                TODO Input here
-                <Flex gap={2}>
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    onClick={() => {
-                      onOpen();
-                    }}
-                  >
-                    Submit
-                  </Button>
-                  <Button
-                    variant="outline-white"
-                    size="sm"
-                    onClick={() => {
-                      onOpen();
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                </Flex>
-              </Flex> */}
-              {/* Selected Address */}
-              <Flex justifyContent="space-between" w="full" alignItems="center">
-                <LabelText flex="1" label="Viewing Address">
-                  <ExplorerLink
-                    value="cltn1m9y7um59yxtmek68qkwg3ykm28s52rrell6prx"
-                    type="user_address"
-                    textFormat="normal"
-                  />
-                </LabelText>
-                <LabelText flex="1" label="Hex">
-                  <ExplorerLink
-                    value="0xe688b84b23f322a994A53dbF8E15FA82CDB71127"
-                    type="user_address"
-                    textFormat="normal"
-                  />
-                </LabelText>
-                <Button
-                  variant="outline-white"
-                  size="sm"
-                  onClick={() => {
-                    onOpen();
-                  }}
-                >
-                  <CustomIcon name="swap" boxSize={3} />
-                  Change Address
-                </Button>
-              </Flex>
-            </Flex>
-            <Flex
-              h="full"
-              justifyContent="center"
-              alignItems="center"
-              border="1px solid"
-              borderRadius={4}
-              borderColor="gray.700"
-            >
-              {/* Empty State */}
-              <Flex flexDirection="column" gap={4} alignItems="center">
-                <StateImage imageVariant="empty" width="160px" />
-                <Text variant="body2" color="text.dark">
-                  Available functions for selected modules will display here
-                </Text>
-              </Flex>
-            </Flex>
+            {/* Input */}
+            <ModuleSelectorInput />
+            {/* Selected Address */}
+            <ModuleSelectorDisplay />
+            <ModuleSelectBody />
+            {/* <ModuleEmptyState /> */}
           </DrawerBody>
         </DrawerContent>
       </Drawer>
diff --git a/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx b/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx
new file mode 100644
index 000000000..99356b485
--- /dev/null
+++ b/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx
@@ -0,0 +1,31 @@
+import { Text, Flex } from "@chakra-ui/react";
+
+import { StateImage } from "lib/components/state";
+
+interface ModuleEmptyStateProps {
+  description?: string;
+  imageWidth?: string;
+}
+export const ModuleEmptyState = ({
+  description = "Available functions for selected modules will display here",
+  imageWidth = "160px",
+}: ModuleEmptyStateProps) => {
+  return (
+    <Flex
+      h="full"
+      w="full"
+      justifyContent="center"
+      alignItems="center"
+      border="1px solid"
+      borderRadius={4}
+      borderColor="gray.700"
+    >
+      <Flex flexDirection="column" gap={4} alignItems="center">
+        <StateImage imageVariant="empty" width={imageWidth} />
+        <Text variant="body2" color="text.dark">
+          {description}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx b/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
new file mode 100644
index 000000000..462b341a6
--- /dev/null
+++ b/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
@@ -0,0 +1,121 @@
+import {
+  Text,
+  Flex,
+  Badge,
+  Skeleton,
+  Box,
+  Button,
+  Heading,
+} from "@chakra-ui/react";
+
+import { FunctionCard } from "lib/components/module/FunctionCard";
+import { ModuleCard } from "lib/components/module/ModuleCard";
+// import { ModuleEmptyState } from "./ModuleEmptyState";
+
+export const ModuleSelectBody = () => {
+  return (
+    <Box>
+      <Flex borderRadius={8} gap={4}>
+        {/* Left */}
+        <Flex flex={1} flexDirection="column" gap={6}>
+          <Flex bg="teal.300">input here</Flex>
+          <Flex flexDirection="column" gap={2}>
+            <Flex alignItems="center" gap={2}>
+              <Text variant="body2" fontWeight={600} color="text.dark">
+                Modules
+              </Text>
+              <Badge variant="gray" textColor="text.main">
+                <s>0</s>
+              </Badge>
+            </Flex>
+            <Skeleton
+              h={9}
+              borderRadius={8}
+              startColor="gray.500"
+              endColor="gray.700"
+            />
+            <ModuleCard />
+          </Flex>
+        </Flex>
+        {/* Right */}
+        {/* <Flex flex={4}>
+          <ModuleEmptyState
+            description="Choose a module to see its functions."
+            imageWidth="80px"
+          />
+        </Flex> */}
+        <Flex
+          flex={4}
+          border="1px solid"
+          borderRadius={8}
+          borderColor="gray.700"
+          p={4}
+          flexDirection="column"
+          gap={4}
+        >
+          <Heading as="h6" variant="h6" fontWeight={600}>
+            Module name goes here
+          </Heading>
+          <Flex bg="teal.300">input here</Flex>
+          <Flex gap={6}>
+            <Flex
+              w="full"
+              border="1px solid"
+              borderRadius={8}
+              borderColor="gray.700"
+              p={4}
+              flexDirection="column"
+              gap={3}
+            >
+              <Flex alignItems="center" gap={1}>
+                <Text variant="body2" fontWeight={600} color="text.dark">
+                  View Functions
+                </Text>
+                <Badge
+                  bgColor="transparent"
+                  border="1px solid"
+                  borderColor="primary.main"
+                  textColor="text.main"
+                >
+                  <s>0</s>
+                </Badge>
+              </Flex>
+              <FunctionCard />
+              <FunctionCard disabled visibility="friends" />
+              <FunctionCard disabled visibility="script" />
+            </Flex>
+            <Flex
+              w="full"
+              border="1px solid"
+              borderRadius={8}
+              borderColor="gray.700"
+              p={4}
+              flexDirection="column"
+              gap={3}
+            >
+              <Flex alignItems="center" gap={1}>
+                <Text variant="body2" fontWeight={600} color="text.dark">
+                  Execute Functions
+                </Text>
+                <Badge
+                  bgColor="transparent"
+                  border="1px solid"
+                  borderColor="accent.dark"
+                  textColor="text.main"
+                >
+                  <s>0</s>
+                </Badge>
+              </Flex>
+              <FunctionCard isView={false} />
+              <FunctionCard isView={false} disabled visibility="friends" />
+              <FunctionCard isView={false} disabled visibility="script" />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+      <Flex justifyContent="flex-end" mt={6}>
+        <Button>Select this module</Button>
+      </Flex>
+    </Box>
+  );
+};
diff --git a/src/lib/pages/interaction/component/select-module/ModuleSeletor.tsx b/src/lib/pages/interaction/component/select-module/ModuleSeletor.tsx
new file mode 100644
index 000000000..9d9d84c19
--- /dev/null
+++ b/src/lib/pages/interaction/component/select-module/ModuleSeletor.tsx
@@ -0,0 +1,64 @@
+import { Button, Flex } from "@chakra-ui/react";
+
+import { CopyLink } from "lib/components/CopyLink";
+import { CustomIcon } from "lib/components/icon";
+import { LabelText } from "lib/components/LabelText";
+
+export const ModuleSelectorInput = () => {
+  return (
+    <Flex
+      justifyContent="space-between"
+      w="full"
+      bgColor="gray.800"
+      px={4}
+      py={3}
+      mb={6}
+      gap={4}
+      borderRadius={8}
+    >
+      <Flex bg="teal.300" w="full">
+        input here
+      </Flex>
+      <Flex gap={2}>
+        <Button variant="primary" size="sm">
+          Submit
+        </Button>
+        <Button variant="outline-white" size="sm">
+          Cancel
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+export const ModuleSelectorDisplay = () => {
+  return (
+    <Flex
+      justifyContent="space-between"
+      w="full"
+      bgColor="gray.800"
+      px={4}
+      py={3}
+      mb={6}
+      borderRadius={8}
+      alignItems="center"
+    >
+      <LabelText flex="1" label="Viewing Address">
+        <CopyLink
+          value="cltn1m9y7um59yxtmek68qkwg3ykm28s52rrell6prx"
+          type="user_address"
+        />
+      </LabelText>
+      <LabelText flex="1" label="Hex">
+        <CopyLink
+          value="0xe688b84b23f322a994A53dbF8E15FA82CDB71127"
+          type="user_address"
+        />
+      </LabelText>
+      <Button variant="outline-white" size="sm">
+        <CustomIcon name="swap" boxSize={3} />
+        Change Address
+      </Button>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index b960ee234..4f7864151 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -46,7 +46,7 @@ export const Interaction = () => {
             <Text variant="body2" fontWeight={600}>
               Available functions
             </Text>
-            <Badge variant="gray" color="text.main" textColor="text.main">
+            <Badge variant="gray" textColor="text.main">
               <s>0</s>
             </Badge>
           </Flex>

From 16ebb54e21f771b1319d275965122cd26eccd7cf Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 28 Aug 2023 10:37:44 +0700
Subject: [PATCH 012/368] fix: as comments

---
 .../pages/interaction/component/InteractionTypeSwitch.tsx    | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
index 0c13a02e7..c87293b6e 100644
--- a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
+++ b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
@@ -10,9 +10,6 @@ export enum MessageTabs {
   EXECUTE_MODULE = "Execute",
 }
 
-export const viewModuleFormKey = MessageTabs.VIEW_MODULE as "View";
-export const executeModuleFormKey = MessageTabs.EXECUTE_MODULE as "Execute";
-
 interface InteractionTypeSwitchProps {
   currentTab: Option<MessageTabs>;
   disabled?: boolean;
@@ -27,7 +24,7 @@ export const InteractionTypeSwitch = ({
   onTabChange,
 }: InteractionTypeSwitchProps) => {
   const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const activeIndex = currentTab ? tabs.indexOf(currentTab) : -1;
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
 
   return (
     <Flex

From 6aea6afdfbbc7c9f8f1daf64591a3d9f94b4755d Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 29 Aug 2023 15:19:31 +0700
Subject: [PATCH 013/368] refactor: delete unnecessary flex and refactor
 components

---
 src/lib/components/DotSeparator.tsx           |  9 +-
 src/lib/components/module/CountBadge.tsx      | 19 ++++
 src/lib/components/module/FunctionCard.tsx    | 27 ++++--
 src/lib/components/module/ModuleCard.tsx      | 22 ++---
 src/lib/components/state/EmptyState.tsx       | 16 +++-
 src/lib/components/state/StateImage.tsx       |  7 +-
 .../component/InteractionTypeSwitch.tsx       | 19 ++--
 .../component/ModuleSelectDrawerButton.tsx    | 17 +---
 .../select-module/ModuleEmptyState.tsx        |  2 +-
 .../select-module/ModuleSelectBody.tsx        | 88 ++++++-------------
 .../{ModuleSeletor.tsx => ModuleSelector.tsx} | 11 ++-
 src/lib/pages/interaction/index.tsx           | 82 ++++++++---------
 12 files changed, 154 insertions(+), 165 deletions(-)
 create mode 100644 src/lib/components/module/CountBadge.tsx
 rename src/lib/pages/interaction/component/select-module/{ModuleSeletor.tsx => ModuleSelector.tsx} (85%)

diff --git a/src/lib/components/DotSeparator.tsx b/src/lib/components/DotSeparator.tsx
index 0ffeb9d48..9c04acdf1 100644
--- a/src/lib/components/DotSeparator.tsx
+++ b/src/lib/components/DotSeparator.tsx
@@ -1,5 +1,8 @@
+import type { BoxProps } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
 
-export const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w={1} h={1} />
-);
+export const DotSeparator = ({
+  bg = "secondary.darker",
+}: {
+  bg?: BoxProps["bg"];
+}) => <Box bg={bg} borderRadius="50%" w={1} h={1} />;
diff --git a/src/lib/components/module/CountBadge.tsx b/src/lib/components/module/CountBadge.tsx
new file mode 100644
index 000000000..2df5935d8
--- /dev/null
+++ b/src/lib/components/module/CountBadge.tsx
@@ -0,0 +1,19 @@
+import { Badge } from "@chakra-ui/react";
+
+interface CountBadgeProps {
+  count: number;
+  variant: "view" | "execute" | "common";
+}
+export const CountBadge = ({ count, variant }: CountBadgeProps) => (
+  <Badge
+    border={variant === "common" ? "none" : "1px solid"}
+    borderColor={variant === "view" ? "primary.main" : "accent.dark"}
+    bgColor={variant === "common" ? "gray.700" : "transparent"}
+    textColor="text.main"
+    p="2px 8px"
+    maxH="unset"
+    textDecoration={count === 0 ? "line-through" : undefined}
+  >
+    {count}
+  </Badge>
+);
diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
index 3843710c9..d670203d6 100644
--- a/src/lib/components/module/FunctionCard.tsx
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -1,5 +1,7 @@
+import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
 
+import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
 import { Tooltip } from "lib/components/Tooltip";
 
@@ -20,6 +22,22 @@ const getIcon = (visibility: FunctionCardProps["visibility"]) => {
       return <CustomIcon name="website" color="text.main" boxSize={3} />;
   }
 };
+
+const disabledStyle: { [key in `${boolean}`]: FlexProps } = {
+  true: {
+    bgColor: "gray.900",
+    _hover: { bg: "gray.900" },
+    cursor: "not-allowed",
+    borderColor: "gray.700",
+  },
+  false: {
+    bgColor: "gray.800",
+    _hover: { bg: "gray.700" },
+    cursor: "pointer",
+    borderColor: "transparent",
+  },
+};
+
 export const FunctionCard = ({
   isView = true,
   disabled = false,
@@ -28,16 +46,13 @@ export const FunctionCard = ({
   return (
     <Flex
       borderRadius={8}
-      bgColor={disabled ? "gray.900" : "gray.800"}
       py={2}
       px={3}
-      _hover={disabled ? { bg: "gray.900" } : { bg: "gray.700" }}
       transition="all .25s ease-in-out"
       flexDirection="column"
       gap={1}
-      cursor={disabled ? "not-allowed" : "pointer"}
       border="1px solid"
-      borderColor={disabled ? "gray.700" : "transparent"}
+      {...disabledStyle[String(disabled) as `${boolean}`]}
     >
       <Flex gap={1} justifyContent="space-between" w="full">
         <Flex gap={1} alignItems="center">
@@ -55,11 +70,11 @@ export const FunctionCard = ({
             bg="primary.dark"
             label="Only functions with “is_entry: true” and “visibility: public” are able to interacted through Celatone’s module interactions."
           >
-            <Flex alignItems="center">
+            <Flex>
               <CustomIcon name="check" color="success.main" boxSize={3} />
             </Flex>
           </Tooltip>
-          <Flex w={1} h={1} bgColor="gray.600" borderRadius="full" />
+          <DotSeparator bg="gray.600" />
           <Flex alignItems="center" gap={1}>
             {getIcon(visibility)}
             <Text
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index 2d4dbb5c1..72cb75431 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -1,7 +1,9 @@
-import { Flex, Badge } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
 
+import { CountBadge } from "./CountBadge";
+
 export const ModuleCard = () => {
   return (
     <Flex
@@ -21,22 +23,8 @@ export const ModuleCard = () => {
         />
       </Flex>
       <Flex gap={1}>
-        <Badge
-          bgColor="transparent"
-          border="1px solid"
-          borderColor="primary.main"
-          textColor="text.main"
-        >
-          <s>0</s>
-        </Badge>
-        <Badge
-          bgColor="transparent"
-          border="1px solid"
-          borderColor="accent.dark"
-          textColor="text.main"
-        >
-          <s>0</s>
-        </Badge>
+        <CountBadge count={12} variant="view" />
+        <CountBadge count={0} variant="execute" />
       </Flex>
     </Flex>
   );
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 854c53730..a0d923eaf 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -1,3 +1,4 @@
+import type { ImageProps, TextProps } from "@chakra-ui/react";
 import { Flex, Heading, Text } from "@chakra-ui/react";
 import type { ReactElement } from "react";
 
@@ -6,18 +7,22 @@ import { StateImage } from "./StateImage";
 
 export interface EmptyStateProps {
   imageVariant?: ImageVariant;
+  imageWidth?: ImageProps["width"];
   message: string | ReactElement;
   heading?: string;
   withBorder?: boolean;
   my?: number;
+  textVariant?: TextProps["variant"];
 }
 
 export const EmptyState = ({
   message,
   imageVariant,
+  imageWidth,
   heading,
   withBorder = false,
   my = 12,
+  textVariant = "body1",
 }: EmptyStateProps) => (
   <Flex
     py={8}
@@ -27,13 +32,20 @@ export const EmptyState = ({
     borderColor="gray.700"
   >
     <Flex alignItems="center" flexDir="column" gap={4} width="full">
-      {imageVariant && <StateImage imageVariant={imageVariant} />}
+      {imageVariant && (
+        <StateImage imageVariant={imageVariant} imageWidth={imageWidth} />
+      )}
       {heading && (
         <Heading as="h5" variant="h5">
           {heading}
         </Heading>
       )}
-      <Text color="text.dark" textAlign="center" whiteSpace="pre-wrap">
+      <Text
+        color="text.dark"
+        textAlign="center"
+        whiteSpace="pre-wrap"
+        variant={textVariant}
+      >
         {message}
       </Text>
     </Flex>
diff --git a/src/lib/components/state/StateImage.tsx b/src/lib/components/state/StateImage.tsx
index 6095edcec..29970d299 100644
--- a/src/lib/components/state/StateImage.tsx
+++ b/src/lib/components/state/StateImage.tsx
@@ -1,3 +1,4 @@
+import type { ImageProps } from "@chakra-ui/react";
 import { Image } from "@chakra-ui/react";
 
 import { CURR_THEME } from "env";
@@ -12,16 +13,16 @@ const imageSourceMap: Record<ImageVariant, string> = {
 
 interface StateImageProps {
   imageVariant: ImageVariant;
-  width?: string;
+  imageWidth?: ImageProps["width"];
 }
 
 export const StateImage = ({
   imageVariant,
-  width = "200px",
+  imageWidth = "200px",
 }: StateImageProps) => (
   <Image
     src={imageSourceMap[imageVariant]}
     alt="result not found"
-    width={width}
+    width={imageWidth}
   />
 );
diff --git a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
index 06301cc57..ad7161c58 100644
--- a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
+++ b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
@@ -1,32 +1,32 @@
+import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Heading } from "@chakra-ui/react";
 import type { Dispatch, SetStateAction } from "react";
 import { useRef } from "react";
 
 import { MotionBox } from "lib/components/MotionBox";
+import type { Option } from "lib/types";
 
-export enum MessageTabs {
+export enum InteractionTabs {
   VIEW_MODULE = "View",
   EXECUTE_MODULE = "Execute",
 }
 
-export const viewModuleFormKey = MessageTabs.VIEW_MODULE as "View";
-export const executeModuleFormKey = MessageTabs.EXECUTE_MODULE as "Execute";
-
-interface InteractionTypeSwitchProps {
-  currentTab: MessageTabs;
+interface InteractionTypeSwitchProps extends FlexProps {
+  currentTab: Option<InteractionTabs>;
   disabled?: boolean;
-  onTabChange: Dispatch<SetStateAction<MessageTabs>>;
+  onTabChange: Dispatch<SetStateAction<Option<InteractionTabs>>>;
 }
 
-const tabs = Object.values(MessageTabs);
+const tabs = Object.values(InteractionTabs);
 
 export const InteractionTypeSwitch = ({
   currentTab,
   disabled = false,
   onTabChange,
+  ...flexProps
 }: InteractionTypeSwitchProps) => {
   const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const activeIndex = tabs.indexOf(currentTab);
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
 
   return (
     <Flex
@@ -37,6 +37,7 @@ export const InteractionTypeSwitch = ({
       align="center"
       position="relative"
       sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
+      {...flexProps}
     >
       {tabs.map((tab, idx) => (
         <MotionBox
diff --git a/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx b/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
index b5c5eab7b..ca11aa024 100644
--- a/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
+++ b/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
@@ -16,7 +16,7 @@ import { ModuleSelectBody } from "./select-module/ModuleSelectBody";
 import {
   ModuleSelectorDisplay,
   ModuleSelectorInput,
-} from "./select-module/ModuleSeletor";
+} from "./select-module/ModuleSelector";
 // import { ModuleEmptyState } from "./select-module/ModuleEmptyState";
 
 interface ModuleSelectDrawerButtonProps {
@@ -29,13 +29,7 @@ export const ModuleSelectDrawerButton = ({
   const { isOpen, onClose, onOpen } = useDisclosure();
   return (
     <>
-      <Button
-        variant="primary"
-        ml="auto"
-        onClick={() => {
-          onOpen();
-        }}
-      >
+      <Button variant="primary" ml="auto" onClick={onOpen}>
         {buttonText}
       </Button>
       <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
@@ -48,12 +42,7 @@ export const ModuleSelectDrawerButton = ({
             </Heading>
           </DrawerHeader>
           <DrawerCloseButton color="text.dark" />
-          <DrawerBody
-            p={6}
-            overflow="scroll"
-            display="flex"
-            flexDirection="column"
-          >
+          <DrawerBody p={6}>
             {/* Input */}
             <ModuleSelectorInput />
             {/* Selected Address */}
diff --git a/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx b/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx
index 99356b485..a408d333b 100644
--- a/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx
+++ b/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx
@@ -21,7 +21,7 @@ export const ModuleEmptyState = ({
       borderColor="gray.700"
     >
       <Flex flexDirection="column" gap={4} alignItems="center">
-        <StateImage imageVariant="empty" width={imageWidth} />
+        <StateImage imageVariant="empty" imageWidth={imageWidth} />
         <Text variant="body2" color="text.dark">
           {description}
         </Text>
diff --git a/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx b/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
index 462b341a6..5d305e46c 100644
--- a/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
+++ b/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
@@ -1,25 +1,29 @@
-import {
-  Text,
-  Flex,
-  Badge,
-  Skeleton,
-  Box,
-  Button,
-  Heading,
-} from "@chakra-ui/react";
+import type { FlexProps } from "@chakra-ui/react";
+import { Text, Flex, Badge, Skeleton, Button, Heading } from "@chakra-ui/react";
 
+import { CountBadge } from "lib/components/module/CountBadge";
 import { FunctionCard } from "lib/components/module/FunctionCard";
 import { ModuleCard } from "lib/components/module/ModuleCard";
 // import { ModuleEmptyState } from "./ModuleEmptyState";
 
+const functionSelectBaseStyle: FlexProps = {
+  border: "1px solid",
+  borderRadius: 8,
+  borderColor: "gray.700",
+  p: 4,
+  direction: "column",
+};
+
 export const ModuleSelectBody = () => {
   return (
-    <Box>
-      <Flex borderRadius={8} gap={4}>
+    <>
+      <Flex borderRadius={8} columnGap={4}>
         {/* Left */}
-        <Flex flex={1} flexDirection="column" gap={6}>
-          <Flex bg="teal.300">input here</Flex>
-          <Flex flexDirection="column" gap={2}>
+        <Flex direction="column" flex={0.2}>
+          <Flex bg="teal.300" mb={6}>
+            input here
+          </Flex>
+          <Flex direction="column" gap={2}>
             <Flex alignItems="center" gap={2}>
               <Text variant="body2" fontWeight={600} color="text.dark">
                 Modules
@@ -44,67 +48,29 @@ export const ModuleSelectBody = () => {
             imageWidth="80px"
           />
         </Flex> */}
-        <Flex
-          flex={4}
-          border="1px solid"
-          borderRadius={8}
-          borderColor="gray.700"
-          p={4}
-          flexDirection="column"
-          gap={4}
-        >
+        <Flex flex={0.8} gap={4} {...functionSelectBaseStyle}>
           <Heading as="h6" variant="h6" fontWeight={600}>
             Module name goes here
           </Heading>
           <Flex bg="teal.300">input here</Flex>
           <Flex gap={6}>
-            <Flex
-              w="full"
-              border="1px solid"
-              borderRadius={8}
-              borderColor="gray.700"
-              p={4}
-              flexDirection="column"
-              gap={3}
-            >
+            <Flex flex={0.5} gap={3} {...functionSelectBaseStyle}>
               <Flex alignItems="center" gap={1}>
                 <Text variant="body2" fontWeight={600} color="text.dark">
                   View Functions
                 </Text>
-                <Badge
-                  bgColor="transparent"
-                  border="1px solid"
-                  borderColor="primary.main"
-                  textColor="text.main"
-                >
-                  <s>0</s>
-                </Badge>
+                <CountBadge count={0} variant="view" />
               </Flex>
               <FunctionCard />
               <FunctionCard disabled visibility="friends" />
               <FunctionCard disabled visibility="script" />
             </Flex>
-            <Flex
-              w="full"
-              border="1px solid"
-              borderRadius={8}
-              borderColor="gray.700"
-              p={4}
-              flexDirection="column"
-              gap={3}
-            >
+            <Flex flex={0.5} gap={3} {...functionSelectBaseStyle}>
               <Flex alignItems="center" gap={1}>
                 <Text variant="body2" fontWeight={600} color="text.dark">
                   Execute Functions
                 </Text>
-                <Badge
-                  bgColor="transparent"
-                  border="1px solid"
-                  borderColor="accent.dark"
-                  textColor="text.main"
-                >
-                  <s>0</s>
-                </Badge>
+                <CountBadge count={0} variant="execute" />
               </Flex>
               <FunctionCard isView={false} />
               <FunctionCard isView={false} disabled visibility="friends" />
@@ -113,9 +79,9 @@ export const ModuleSelectBody = () => {
           </Flex>
         </Flex>
       </Flex>
-      <Flex justifyContent="flex-end" mt={6}>
-        <Button>Select this module</Button>
-      </Flex>
-    </Box>
+      <Button mt={6} ml="auto">
+        Select this module
+      </Button>
+    </>
   );
 };
diff --git a/src/lib/pages/interaction/component/select-module/ModuleSeletor.tsx b/src/lib/pages/interaction/component/select-module/ModuleSelector.tsx
similarity index 85%
rename from src/lib/pages/interaction/component/select-module/ModuleSeletor.tsx
rename to src/lib/pages/interaction/component/select-module/ModuleSelector.tsx
index 9d9d84c19..66d9110b2 100644
--- a/src/lib/pages/interaction/component/select-module/ModuleSeletor.tsx
+++ b/src/lib/pages/interaction/component/select-module/ModuleSelector.tsx
@@ -43,20 +43,23 @@ export const ModuleSelectorDisplay = () => {
       borderRadius={8}
       alignItems="center"
     >
-      <LabelText flex="1" label="Viewing Address">
+      <LabelText flex={1} label="Viewing Address">
         <CopyLink
           value="cltn1m9y7um59yxtmek68qkwg3ykm28s52rrell6prx"
           type="user_address"
         />
       </LabelText>
-      <LabelText flex="1" label="Hex">
+      <LabelText flex={1} label="Hex">
         <CopyLink
           value="0xe688b84b23f322a994A53dbF8E15FA82CDB71127"
           type="user_address"
         />
       </LabelText>
-      <Button variant="outline-white" size="sm">
-        <CustomIcon name="swap" boxSize={3} />
+      <Button
+        variant="outline-white"
+        size="sm"
+        leftIcon={<CustomIcon name="swap" boxSize={3} />}
+      >
         Change Address
       </Button>
     </Flex>
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 4f7864151..1d61f5813 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -1,26 +1,37 @@
-import { Badge, Button, Flex, Heading, Text, Box } from "@chakra-ui/react";
+import type { FlexProps } from "@chakra-ui/react";
+import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
+import { CountBadge } from "lib/components/module/CountBadge";
 import PageContainer from "lib/components/PageContainer";
-import { StateImage } from "lib/components/state";
+import { EmptyState } from "lib/components/state";
 
 import {
   InteractionTypeSwitch,
-  MessageTabs,
+  InteractionTabs,
 } from "./component/InteractionTypeSwitch";
 import { ModuleSelectDrawerButton } from "./component/ModuleSelectDrawerButton";
 
+const containerBaseStyle: FlexProps = {
+  direction: "column",
+  bgColor: "gray.900",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 8,
+  gap: 4,
+};
+
 export const Interaction = () => {
   const { query, isReady } = useRouter();
-  const [tab, setTab] = useState(MessageTabs.VIEW_MODULE);
+  const [tab, setTab] = useState<InteractionTabs>();
 
   useEffect(() => {
     if (isReady)
       setTab(
         query.type === "execute"
-          ? MessageTabs.EXECUTE_MODULE
-          : MessageTabs.VIEW_MODULE
+          ? InteractionTabs.EXECUTE_MODULE
+          : InteractionTabs.VIEW_MODULE
       );
   }, [isReady, query.type]);
 
@@ -37,55 +48,36 @@ export const Interaction = () => {
         borderRadius={4}
         my={8}
       >
-        <Text>Select module to interact with ...</Text>
+        <p>Select module to interact with ...</p>
         <ModuleSelectDrawerButton />
       </Flex>
       <Flex borderTop="1px solid" borderColor="gray.700" py={8} gap={8}>
-        <Flex flexDirection="column" flex={1}>
+        {/* Left side */}
+        <Flex direction="column" flex={0.2}>
           <Flex alignItems="center" gap={2}>
             <Text variant="body2" fontWeight={600}>
               Available functions
             </Text>
-            <Badge variant="gray" textColor="text.main">
-              <s>0</s>
-            </Badge>
+            <CountBadge variant="common" count={0} />
           </Flex>
-          <Box my={3}>
-            <InteractionTypeSwitch currentTab={tab} onTabChange={setTab} />
-          </Box>
-          <Flex
-            flexDirection="column"
-            bgColor="gray.900"
-            alignItems="center"
-            justifyContent="center"
-            borderRadius={8}
-            p={4}
-            gap={4}
-            height="full"
-          >
-            <StateImage imageVariant="empty" width="80px" />
-            <Text variant="body2" color="text.dark" textAlign="center">
-              Available functions for selected modules will display here
-            </Text>
+          <InteractionTypeSwitch currentTab={tab} onTabChange={setTab} my={3} />
+          <Flex {...containerBaseStyle} p={4} height="full">
+            <EmptyState
+              imageWidth="80px"
+              imageVariant="empty"
+              message="Available functions for selected modules will display here"
+              textVariant="body2"
+            />
           </Flex>
         </Flex>
-        <Flex
-          flex={4}
-          flexDirection="column"
-          bgColor="gray.900"
-          alignItems="center"
-          justifyContent="center"
-          borderRadius={8}
-          py={24}
-          gap={4}
-        >
-          <StateImage imageVariant="empty" width="80px" />
-          <Text variant="body2" color="text.dark">
-            Initiate your Module interactions by choosing a module and its
-            associated function.
-            <br /> This section will showcase the input or response type
-            required for the functions.
-          </Text>
+        {/* Right side */}
+        <Flex {...containerBaseStyle} flex={0.8} py={24}>
+          <EmptyState
+            imageWidth="80px"
+            imageVariant="empty"
+            message={`Initiate your Module interactions by choosing a module and its associated function. ${"\n"} This section will showcase the input or response type required for the functions.`}
+            textVariant="body2"
+          />
           <Button variant="primary">Select Module</Button>
         </Flex>
       </Flex>

From af4a1e5e9cba0e25fc687d3bca2bb51a5f923788 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Sun, 3 Sep 2023 22:37:35 +0700
Subject: [PATCH 014/368] feat(components): responsive

---
 public/font/PilatWide-Bold.woff               | Bin 0 -> 34524 bytes
 public/font/PilatWide-Bold.woff2              | Bin 0 -> 23940 bytes
 public/font/pilatwide.css                     |   7 +
 src/config/theme/initia.ts                    |   2 +-
 src/lib/components/module/CountBadge.tsx      |  19 +++
 src/lib/components/module/ModuleCard.tsx      |  31 ++++
 src/lib/components/resource/ResourceCard.tsx  |  34 ++++
 .../resource/ResourceDetailCard.tsx           |  49 ++++++
 .../components/AccountHeader.tsx              | 148 +++++++++++-------
 .../components/TotalAccountValue.tsx          |  20 ++-
 .../components/modules/ModuleLists.tsx        |  69 ++++++++
 .../components/resources/ResourceLists.tsx    |  68 ++++++++
 .../components/resources/ResourceSection.tsx  |  82 ++++++++++
 src/lib/pages/account-details/index.tsx       |  53 ++++++-
 14 files changed, 512 insertions(+), 70 deletions(-)
 create mode 100644 public/font/PilatWide-Bold.woff
 create mode 100644 public/font/PilatWide-Bold.woff2
 create mode 100644 public/font/pilatwide.css
 create mode 100644 src/lib/components/module/CountBadge.tsx
 create mode 100644 src/lib/components/module/ModuleCard.tsx
 create mode 100644 src/lib/components/resource/ResourceCard.tsx
 create mode 100644 src/lib/components/resource/ResourceDetailCard.tsx
 create mode 100644 src/lib/pages/account-details/components/modules/ModuleLists.tsx
 create mode 100644 src/lib/pages/account-details/components/resources/ResourceLists.tsx
 create mode 100644 src/lib/pages/account-details/components/resources/ResourceSection.tsx

diff --git a/public/font/PilatWide-Bold.woff b/public/font/PilatWide-Bold.woff
new file mode 100644
index 0000000000000000000000000000000000000000..4c87096400e89fa4796b09402e422b773e6b9f74
GIT binary patch
literal 34524
zcmZsBWl$YWwC%y&-Q7ZPcXxMp*MqyedvJG>;O+;9paFur6YSs)FW;?q|J|-yHMQ5a
z>7J_YJ-galMOqpF0r)qfHUMb<9uRtW|4IMXke1d|`ez6Frz8Fk5#FVlGLll#0D$e=
zKUw@Al##|z8e~*eGynjPd;kEG8UWCc4*aq&E~BCKPj4p*03aCv0C;VWZwNao8Z7Mp
z5-$GpQ~w83yOiZs3nw!d007ny0D#N@0HEsZZc?#r%-sKRw*S2s{D1iT1VGt1`dR}3
zDF1ks7yw}4E(a#5$JWZs@?SjNe>PnIz>PK2e`NcQ{KuvIlPUgz8W9)H$JWWi=U;q!
z005c;06@S$E>p*H1X}#Fg9rcP0{<Z?wp8!Z$;{_pe2A8Req{eZ4w(e_=4|F<1ppX6
z{qvs&0N@06zV;Tn0Np(R0F&{5vA+D9Ga2&&kk)6-!qn2#6tE|9re(4J?9|8Z!qE?i
zV>O&rWrbc?{mu3n|FPa+)uapf<I2h!DhZ+HhScyc$^Z9jd;(5^Kufp%C&3s7v{0(h
z1gxD9fbbZYe~bFRHf|Q#!=O<Bq@w5)d;~Hws;Mv(0KW)=_J8!&`ok^Jp^2fPHSr8#
zp`imr;vA!F5gcm}Qk{IdIiZ8dUr~^e$zijhATNW&gpm=E5&H?Ux87|mGOQX+d6Cj>
zFd=g%02x-W0QMoIlK*mk%QUjhv?3m@f9)fq`^$Z_p?!77RrT659jH~wQ8JzD(SS;+
zXDT1xs{AvYJOx~gS?+>^`6E?blg?`|F7kr>x{NCRSE;GkJb5*>IHi#5%KBAs|E$1~
z@Cu<}_vLG+Na5?V$>*nM|A)H}`G+CP=SP@<XZ@?VfrPeGF`J>Pr;p0F7XyP$QqNG>
z$Hrgp7G0BE_TB3he^P@p2SfA&B9|KLU^qhr#AMdC;d6hI978?$z@H}xmO85cTw|@=
zYfv%TP0=4ha#79dhv--O<l5Sn502E1%GzoED<6eV1V@K|rQAt&saEhQbGVDKB~re3
zfc7oQ;tN9H`F1JOrJRtxO%%`VhgWdK1DDXgiB79Xy>$m{-SwE(exFXPNUdM6rc#&l
zxX}aM&4r|W)A2_$Z~y92huRD9FY2D|FWvB9zDMAbmQ;}VkGJN|ybpv?Qk|Shd%%_{
zTSLdIniGYvUObbb`TmEDr%Ro&dEWh>?_S56lRnY+zFVhBHHja_JT-`_xc$2*TO!p7
zM2n;^RL=ch0*G#BYlQX6;>zKAD%i~nW3LP0CX^zp#l{^}LmZ|9od`h|J1U&&Pm%%_
z8#bZtn`G;i1B%(Owuiwx`M6iUDd%xLzxPD2a(^Y-$uoiBI}St+eJMVg#SGtkh=Cn2
zl>@#@poiLrKEA1T1JtkMnRzmllbp%EegO!AgMMyyVzguLzc*OF`o!S}Pk1K{Vu1;s
zC<72t;&!$bk>X`mqG)-lMeHRyHv}4mg^Po^MGD<|Ka+g7=ROfXXoRzVh&yn$@XqWm
zc#*E$QCBwmt`6BN6jrHB>upu_FdW`DqSi!4uGn)f$^FVCtNg9bx5U+I#fNjRc(!iu
zh-%|$AZ9XoRZdiJAuyi0dR*fCMT0XmS(J<yK6kTq!}F=U|CjLTtBw1v;FG*>$9Q34
zm(AKE`x>kl{>G2Rid};X+N?IZ^u;InKVg1K2ZeccXL12vX@RuYkpbOPLQ;uWLz6G9
zaw0Vt8>Giq$qtBTnLU|L)RzhJS?|h1`z#Zi`dG>}LW0#_pEYrf7s(wj#MYvB!x>Ot
z71oG*hkDv&A4k@HEPi(p^>ohHpLy*mp@U?R7)mRp_%rf0MZe$u+Z0N88O78)2LBR7
z_9L6aY~1L&_1SA>!m#jlhPQuasiSJwy4D*`S0~cjvPICtK5{$$D$~BR`+MtAG6UjE
z(gBwi@NS`JE3js?@^!*zEJtKN3&v?GdRk>7=f)*xC3hM3Ql{IWL#K3X|7ya1MgaW^
zq#f_tqjT+b`;wjR6X+*HxQ5p)ve3QyP{Xo8u<&}<ObYHj`<NBJ&97n_DLvM6n_+S_
z_9@~G^kIC%spX0=yK&&{J&t`;9Dem<Gn6&sdtmks3C%~W2j@lSw{MF-2%Lyij<l-$
z+cR3z$5gb$u%r9k#Wa7$P(lhH8{-IYXIP6l#`H4E-ka&LHcC;IhO7{ApZAuIZpEBP
zW9cv}a<Uz5RRxDKu@QDElYUh+>~KqCpmRSGNPm8Zg)gp?q41NOIhB2LEq46vjyu5#
zlEBcyq^n6|lxk8jq?-3J>p_b__4&(i8=zLJ6>&qaAoWA|i&~;;<agN%buH`a)uomx
zTaMA6tc*-Uh)w#swLjq}E$$oCYl#{AZzqd7>gvjPr#<CTIIrzL(5N<ioO|wX<AsW}
zsu6Y6<e#4rf<6$n&X1%2+&*T*ojp?ogL^##9?M>*0{<>`sBG9jHs$Sk)ic#G{k(W_
zc#PH|>*-7F!`@~!X#zH|EG;iA|9-v<aPQ*><{v7Dre7WK5j>#1cK42L*=4O(Jox$7
z_D&U=)2&`#8N(I)^l$%M2}>~TXMfX@WBsc$DuVAx2L->V5Bobsnv*u0ma~Fj+D=SC
z+*XRd)=mQ7389JvL((3vWqHke?r*lPM>$qOY$cM>skFD>T)Oe_T%Pb<1=)M76#y!h
zst_7e&Ky0QU{Lj<#H^e(A0xpMyG+gs*)G9~cs~auNz0bQplC(7kTalY&6elEo-I-7
zWy;NW@b@)KU7F8eby6(Ju0MYd`IvXom)R{x!EpD>a`hfRPsfClvum{f#vulpuVU+g
z>bPOg*Azi**EFlIX>QsLs!2^bLvGoJZi-19$=}w(;Vk<VGvslbwU_%qP~0hF>U`94
zZjxVg2l;b;c*im9hO}g$=g>6MXf#n9v3Ic0Rj2Cau+XHj+`dsBH0dA7w)w0Mb8|Np
zFr8cCb+3xSyn6l;PIAeR7oMOekO}<&T2Lo)u^W&6I@zYd7&P!%V;V$}B}DpHZg}VP
zSJ@R<TUj5S_e}j-EI3y2T070jF|xMSW|tnekd&1iPQjo^#;`z+jfug)prE3(9FB>(
zPKmijkBwoYq^6WKmmIc`6(kkxOO`Gxc&``r_p1!V^?x8qfzk)TDMHDa!tp{Yhq~`{
zDXLa}MaruEMv{SZ0>7yoEHgWQdslVy%T0?<`=d+Hz}OO$z-p1&IJ#o7!46Rwg1~`b
zox(TvHa^9Q^c5!FytYC8r^XUa-e_iHq9d8WuR=4HCY{ywbI#W!szdaAz8O@yAuAU%
z=1~-vs!m`>_r}+DXi8J~gwR)0+_w=6u%=)>-qDDUL64Ae;p1@hlkx{=aP%jSh{<kE
zjAp<OdIV}nU9fV)7hd#y1U+$aeDoQl^g)$Dqg|d|Bbust^_=P{9WgCit#bRCzYTv0
z!^p97qqZcvRZ;!0T_xF5)ef*mr0jmPG)lke2hcNX#s3)k6aS~?uR8*Hs=`KE#6fwK
z#(w>39m7&->%<zcwSqrzQ*raSYrm_xt2Bdoq{8*I@2=8VTSTv4Em-xFK79gSPqB?c
zAOnZ!38gD)HEKFapi@(rVLQc!Xh6EhwS?`DPg%9r6ShKJOX&(UH(#E0?z|EojZBTk
z4CC@QyxEG`s=_L*uQ(<8+K0I~(~|B#eOsS9o^f$O^7xSwV8I?lvH`v)c_ob@`}&tw
zKdr!@eX4jEsHNhL@R5oXz!V%yya~$B7JB{a%;(J7%=AnX!bIBda(0Ndxl0pE-<Aw&
z4dWfQ?KRf&xRnixoqB8MoE=SUMg9T=#7W#q&Pd=$vbyw*RPmOb&VoE{1g>XRXQpTJ
z3+tB8%3iGA>x6#<vx>s@hO$rL3lq*q<)>N&SiPAB_?QK!`nZOESLNZ4r=8RCAQKXw
z{SBAC5|MpgS$(RqP<RSiW=8lmV%man1-C7^z%*;6SI=>D3d4QsZJ@_WxaEW?g2pnZ
ziJHkjQ{l%-oUX-E#{Kxqrk@qlDm8Z%lchmh!J2bdF*8u7#i9GG>1<26S>nN~d--E4
zXamIqu6x^y%wv1c!!XGJj4m7<Jp2g0LXDC*n&YFFS!BE7^?36LQy!M%HR0c%*(7yJ
z?zJhgsiKnsL?ji*P^Z$e593^~kGPf8r7-Twci+^d5qZLGx?fs7+IWw?F9fR0%L+5l
zd6pLh$jzk1AMig%3ewC@P(H6yfp-c+Z04I!R>1)e0r&YnH-%NkV)dmwb9pCBJ~+m|
z^6rf98ecpDKl(cR>I0L7`({rKZk%3bUP^+>gWEnGK5I?(lb?Cst3K8tTtIxRLJhoN
ztDV#^`Y?Ibv&HFRYgWMyHXo7@$V^dQbTnc((kKwc>)d)tVu_<Fx+aWGm`T|4&OR%<
zAXg7(kBA|D5F$p24?PY);%0J7vX2a|^n(n$8S6Rn*idkyc9MFTLzzt32t3t1=`&SY
zf+b}I+y2VI%8RZuF)><FF#fD!18o471C~f>el`2w#J;$oxQ~z7{>=Ntum4lKU-Tjb
zXlOkE-Y)%DbL-@CEB*5-<+^}&x$0}`#Y9f4>+>Y^6}t4|b_$b}-BuXi&;60&$jM_U
zJ9eu%lFI0JcG#2l68QN!_&GX~%8-5EFK>)*nmokbgSS5)-#<jt=6n3FI*+&fXF6>v
zs5L)8e10(Rv^WYm)q?hjt(j}eYJ2n&sH}uv2`ogTMnkp}Vcq?r7?>bI$t{3ZO5zBJ
zV6tNM?0L>O4~Yy(VhDC=sL|s1wCZ=QOv4o9v=A0B1O_>=?L5a<*s@_fSr3Sl%@pKd
zJNe0Rh|?&a5Pj$bSUZRh%nf}^s}z1uz}gyWbpTBoc@4Yl-yfMTKPG$jhW0rhM~+9M
zWo)*gMkfNo%EDKHI&gkxtuj4f83P8ETkOf^$+EypcaM}o6$X?Ll5y;hCeipolfF*3
znasNr(#~XxugZJ76tQtx{u4U<t$A)fCG3>+oKrdnN^rD3@jasL`UHj5ui&znhzR%x
ztZhZ3%ay~!JArd0!Y9V?@JW+p8Fi?S0eO}-opX%c?qQiPSpK%XyEbyFxyVn@zOjN_
zv0LUQSH<ACq*o&MvW382adV*_!89szeD*47Y^mQFFnyn*CZ)p}a8hDF8O!+-XB?Y)
zuov2H2VokphMR(U-`*vjR*@T!9K&bXGq8nzXxQ$ab@~q^_@64A`;)`=&bc#yFHFFl
z=wHH0TlnLZ5ltFY?%3t76>23|VEYy*6vDjV+F+bFulg@UchZWD#1z8XNmTDizg{4n
zh`8<z@4e!YMF;P|p_7D|s)oc7tSB@m6v|i9_v+gyLrQA^+D~kqc5R|Y9M$7FyQl$p
zq|ViVmL;$Tq_NZ5N|i5rd3_Cg?Op6W)A}P91j~igc9Y$obPYP;zP`f{8<}VybI&LW
zHFJ2g^0Z%sdK%3gWka{Jx+yc{?9fBoT7SmzHelFr1;Ik@VL_2M6`GpV`JSl5ai~t$
zcgQVgb3UY^aP*Lbq0qcSrszS>k&iuHUA|kl_6`HqZGogGR_;V7QH$76LgBBKb#+B=
zuo*Mirwgh^n>!rtu(r)dLpV?Dv`V@5oR#tmx|<0(eJEO5D196@Q*m<X75Iq^O`JVZ
z_VBmL@b2v2A{+5w)Q+Hb^w`i_RzoDlC1l{uRH&jHDiK&?mF#eP(ZnqQ%?qZ4P6;Zj
z9jxA;yYqHs?ZoP&D@XS+V=Kf(f(qFX!-@iZqo#`npZQDqgF#O6xjlC2;#kCZT)<c#
z`GS7>ps<ebea>PYKC;>4BJALrzFDr&z5zPRMrk=ec72PE<?3Uw@sPj;pL6`~J(++D
zF*WE4JEgQ5MH;$^W~h`lBs5~AlaH@69tjcg<V#UpT)ZCM7i%A#=i1GTK0BsW5$P3U
zxwRit5QHtL>amOY@m@&-F}cSrhj_U2N?KbSUzjb8epZ8BZR?>eM9CcM!#-09J=M!-
z2y{7dsfJUf_K`$i?;zy{S|&_=HSwq%(qc2Encz%4x89z8l@gqt5u43n(%E&!cKQ@G
zDQc@G=~Y_1r)WEzb~{zif}Spb2F5|1Fx3Wi#!j8EMMPY4Vu2Duk`oN_P|4{8!bk{f
z8bL_%bV68*q%B+fC43C&JMM^ou~HC^D0)s?t(j!4L?Ba(HsZ$!VYd4t0zp@b4ewca
zEW#1NDk#K|Jn(f~{HFGf(2UkRY^gr|)C2Enp^rZJ!)*&kT!=hCfY0XL;OPQOc2MBW
z9oe#uPJMs-clo|!@uf(i?p?z3Rdy%2mo&R4ltco=?K%(}1r3Btpr?5=j3FPh6|i5y
zB&?gy;w+~Vzl|DxSjQ!RWUW?zoO%?{r0k+v!;A+m7TsfsRGl-?bI)t<OCb_zEOGw+
z$Z&s6@*9n;=IX`WImB;&^xKd1#Q{<^Ki2>cNkjj@1;N><&Nvs9;BRsh7x7o81};CT
z*)_`KKnhc|>xL5zskWLmxm1icduWBX0*6}5bB3vfuUq$12eGXSmHq{bcOu0w&t*+W
zH%Y(p*3wJO)2T<R3uA0udzb|)Js<c^vjaL6g=-cq)R2ZfiKW=sW3c#!xhoy@IanDK
z?Ri}zlZ1o965)ildGyi32`3sY#+*YOy*|2_*wGVARl*xS;oAOmfs!b+?f&T3FyMWl
znjsm=ZokLeWGp9que`BCs?=h9BskIL)}}z|a(F0tJ!r-qji}N;(32B0+u0cv+AVP^
zxB*TW7xzaz#TH{;)62CK=z=U_+Cv$_kxS^p_X|o80LKg8yMF8^30kjgR`FdpB@{OL
zd|w3bT{E4h`Yu%Vvu)xtqOs`lFuq3?ptw^8_QW4E${#U3yqX89M^*9BjGWt{E`s=^
z2YOxN&j}=TDEwOPn7n4zcUtag-$@J11Jjk$?u$8osa~Tm)l>Ww%SdIv704<B>SO5(
z)(`@TN2x<NMeVXk&<mAqNQ4oVzCu`_kk>n1Ops|O$g}u1Qg5DJ)U57zkJ(J-@moE@
zj6<%`s0h*Mm8QZtUY|HZsz{#F#HOakVg_Qr`j_eDW8-B}b0dNAB6+C|<6H<Q_&F*2
zQo`-v(H5RvzKSc74+02KOoc~H9kskG%&vAr7Pg{JzDq5X|Am>R;||xuk7bj7!ATey
zMX^d1Bt`j+8Z!kCUk>gZZ3)qK>mgQ$f+>N=V+oT&(*p`e6p3-diR?=hnw@7HpT*-f
z!(WTd*6$#o3(H_t=d`3LO9-9)@oP3_(q52Xf;6@;d4Erfzh!1V#kRnYtCnbi3{Wuz
zxNzavO5r%db|e^^8X)=ij5LaT)BA~=cYlP?z=1Rl&4TzEjvZ%=avgt&+KY;bgj9+1
z1Z`<MF`6M82!J{Uc;&NY;m|qK(`S-sgwoGCb;n!FM28~b^*t!D+YRmCmBz;EecIPt
z=d%x;5RL06WA;d)adMc<C#&aZQfz3YBD(u=UM{QPS#jcfVzy+*NbYJtNRdcmnz|LI
zr9^(GQ6$6+`dv@HiCApMjW|~n?DsmxP(ooYH*bE$cfSSdZk?d(mSoPnh)JbyC9q)b
zf4TXl!~EE?D3rmaFRh><U52Lj7ovf3?~lr?$l1si{Ngaq%;n8xp;H3!kg)=?3IBq_
zXJ%GX1lb0TAtB`5gztAYS2^EbYzQu-#^98Ekj(^E5p9|FcPK)VvWhdY31Hl69YQ}O
zmS4F;DDv-p;qgoDMibCCLZo#X^DP4L)88-RtAuq#(fYEe5apbfg9-0d!<WX~_&wdd
z{vMZ4*XMcX%c4Tu47DNexK9~+Q_Gr4T6Yz(_r@bM?6Kwe(2r5WG3G<7SEy3dap{BL
zLiwlwTYf`>S}MG~a%?h>w3O;1Gqz^{I4ghBX2x)a&tLyGqO^~VzMoQ$&B934qIVBr
z+U_~@mf#retDb}0Vm1;7)n%Ph%TFWmCEV#+=$Yy8c@TvY$HLi;6*b=PF6vwcKL2k{
zaC!AYGi`k@_GU`C>N(m_xKcu$MSUKi=vpLBJOe?d5rR-%<<J7-$ai1!t%{HnQ1I!G
zB`-fBA_QS`s&>Z`7N^eOTc`}MFPd`KsLHmWL?KM*`Sxxznq!IMQwP%C&<-hC3}fU1
zJ_T5@rX&DLxZTkIX2KyeT_ws`{m-AsKQq6-XnaSc?6zS$Pu?*%DhSwq{yB!m$-*s7
zt6We#OV8>ss<^drXKROmMx-Hq1j#$G4ZWSy)O?=7VFTi8Q3#28Cyui-2?4|bB{o|o
zU0i5mT1^JG#rR-FwUZwx(xm3ury4|juGg0hIvwXN2=cCG>mXlOr4%kF+U`fbM$h_d
zWJo2BazkL5Lw4oa%*cW=fh$a=(|G4&Y2Id4=bkCUL8CL!1Z{11t^s2MXQt|NW3_Oz
z=NkwE&rpxO)!0E-lM|ExW5qdQE!uC@cWMj*U{=OJZ0bPrcXSo<tryfFBk{?>p{0?1
zX(She@s1qk2RN_ZJM5HD|MHFs%$pj8rQqLRnzrW%+ss$LtR*^H?X?k)#ShvA!R)Rl
z?|LTsJP-0{Gpc`|C>#YohL_i1QL-aV=dMX%;64ppoIxWO<(ei7)bYO}^!mcSnJwpf
z3JlJr=4TXMkBQ7@UFs9fwW2S+2~#XsXbMK*Jv5UJ{s<AoF`I`lt<iV<WkpP3z0~Zg
zGh5Kj|8ReMan6_uqcwpjFel)BDO7}9B8(d}PmcqU*a<47b@@@SqfO<<9Fiw%l+s7k
zU}%vyAR~}@h>M*p>`()H4uB`H`SpT^9b3r*tMcWW+=0b+(ycrzKv~gTRm?Phi?d%$
zaDmd6LMe<mR&a8JTVc1sfrc4Y7T2+_;Keepzp>Fx_79=W<a{*fk*=!UZ;ms=<vl-$
zvW!!HU{+a=L`%|5c%&w1Y6@s{wH*3|aq}nr{`YlVJ;TTT;$8|vq`o#9;Y!2d_V{ML
z$Ms2%>3@ojU2ez~hO?7miCvP|w(nqt$C7>^Y&p3H_a0w2!R+2nl5R6@`(U1%t=r(?
z&BCs)Jk#+EKExc=H%_Y1cJ$|Poof^|sPsP6-fbVaq-`RgkKqjng$Pr0-$lqk3MGBS
zeLNl6Bp1GqT@`IJ^n&x^(=MJ4f(Kwhv-P$jcj6bjd{*2kw{acu%HMARw8QA9jizsO
zWU?P`sQ9zS?@uTbts)`T4<UaL^+9*DB4f9bE}5A8G2l=LuHSch52xGxRKCYLV3#2%
zRF<(%2+}8C`b2hQU(!tsfHe7#?mkGs5h5@*al6e4inrGZ%0LXPi+UAY22VO1lL^AZ
zzhAWx+C!u*9_*TYRxS_g$VJiSY!bSwSSQ={$0#;8BNHx1!@(%TZfrpEGak8M`EsKD
zrugOFVQswj2jV=obQR<w(9;>+=_CM29Sworya=M5-nqxQ%Vvj=P$i+fnDor8%Vq)j
zZBv||><(R*Jf1sj`0o(oslw*wi6X2-jvFZnVrL_S#pKWQlTx>006T0p3A0>E(QYrw
z2$|m&h3ix-nwaNMa1)}mUQZJA&+cXKF+?xF_2HT<Oce5>Ue1c6j`E+1U$YGE1~52i
zc^ZQ8@GK3&DqN^@<wGn;2VPkr)qpXg>4}a5&A>$~c*(z$fq{G3LdFi<&W8J~bkc@T
zwiItNCNIE?`7Q8PMXR4er+L>1yOEkQxHvM<d-oZhp>zj17d<&Eq^lUt>)eO@#7nY&
z`{d^Y3`}~n^y|IMcz1gg@S?9AWg;Jwm4-voA7Mdn@z|NvIE>18H}r)&#}1<B&Kdb?
zt+22aehbL!Q~RvJ7xU>5xCCK6|H%&D3_Dps+sz+IE)`#c2$co7WrDJ^`4NKh_;Rt*
z=^lNRMB+%nQO7A@BQ?N_0MBq)Pk+@X0{*zH=$)vjfgooKO0d<W96%D3*;#f$m8Xm?
z<I+k;!rSQW@+>GQ&5WELv13CMUV(dH$<uQ4HZ8X$5I`HU!LKgA3I|KMJ#xQZ%n@M3
zB(M&?qT3>L+C;x(FRyIW?2oVsSTgebG+<cAp}Ji6a$H+!9J@hMPRuKPP$11R>az_0
z>~%V%`5AO*$jWS$c3h7Aq@5XMDl=6UyO0ICO=zzmL_&XRljXU$I>b)6I7`PT)15=5
zZBz*vc16&`O6eKWKVID90|{3zJ9f#GQ-ww|_tm4xRU*0n<k{tbB16@5oAp`$w?V;y
z5(<&!_;N9m3ayV@S?KAr4JL-#X2t3nvdd#kdto0hmiu2x$C-;TfLq8ErymPstJ}RJ
zt-GTGZqp8dke#qWV?AiDwVt^@0_W{H?NAE&Zi9kfsvB1WpHP&87d~|5&g(L}#rR(7
zlc9*1Gqe&D6SceoqPq4pgouT|{lPD2<G|pj?48++5?Uu)soHK1e5E>+k~+j08M*oP
z2(#6W*<ah3@%qgGOcZG+K~s)Wa`4m6P%d1bp<{`bHwD&hQTcb4BV8ghc0MPxJ55wh
zzD4?(SSI`n?B}UF?>O<Un*Qx(3Tc7{n6>AOGRQ`K9U~VBRN26Gh-GT?%U*vqU2iZ5
zEsK&5w=Fh=_dEhj4X*kElJX<R>}-Bgz3ldF{u~M|s3<dM=V77m2j&G#_lAxIHhtY^
zw_wUMr~;<rWzxY&#f3xKvT3jnl=-Qf`8EWbR@3tWVx+L-Em6|>NKus2+-c@WC{qEa
zp3{>C2Cr>EmGOmTk7bEmm%ocmS#G7>l{~8+M$J0`W(G)^RJ<7ZtmxsX+v2Y4xGnw2
zk8=jLaG|1SN<HBq01}=hlq1W?4FoRg2?|eLpo?>|2U@24w{v^YsR9jHabw5jj9!72
z=f%XR_3z8?F@5SYm7nQTGE8Dr>u?6!aQwfKTBF^#0%6)7M+2}YFu%Y~V(z>H>(4RC
z0#4Ue>Kw7R9~pPXf;_J&!4Rd<WYVnqyFq%8>k|#g<`kmLX2JeFH}M(*6^~`TF1gwb
z@21?LSeIY?1Ov9jl8VO+fFY0%C_Zw*&Z|wz=)FJFd&LSL!`Ve?hx<_{F?`4f6C@M!
z2hwfwl2}2|>{x_1L(R=Yw?vqbO24Dt0wh}G4A}z30t$`Y+9iwd`c3_${G=Skat$d}
z7-MQ>qb)d5h)WB1J)031IB;-eIgqMldA-;O49fO1(g|=mw!9^c2tv3XB^j9+nv?Oz
zCDitLv#H2!gQOO{TOjW&oGh`+VbwV(S#(1oUeX^Wla=BamA7hVlat?_4QD7PJMu>e
zhAW{@!Dza`1F@3^*g~3khU3A=W8*lxvTtaCBOegMq_j=zAY(tQUdUbJ1Sh_pds@)9
z<45jV<5qjmg+y>re?IZ>t-IUX%aD-ubeg9V{PrA89@pfpp(d;K`+(Z<I3Yy=dc3DN
zSUMTF2re!j+M{1zfLjsTv2r*sm5TSeLIaS#XbAIJRN;gv9oqQ&&1C*S0|v4QTApJ=
z6&A(jDxRHQH_X~b5R@(2vSlwYNyo#gdBsZ;0$4T(YcL4Br()7y!Xpl1^eVXe`nW2Z
zDbqB>i4+{(-|Q8LB+eY}UI>TS>Q^hcx>_`ioK78Cp4@AN`J_ysf(vmA^07&b#wHf}
zTzbP}tnsHo@Y@Mb#HRj)f^R$N``ZC!FSmW(bs{vrf9KcXgtdcS@0U$f{?t?jz5kXm
zQMpepjN5I$V)*$gQAK+7GY-)OAi4PgFNr~#3OhS171Pb8nX^uWc`<5fN$1JA`j&ks
zkPBM!O?If0D{GHoWIRK}bk}KP<}SCHJ{8(&zA(dhJ512O%sNtY_gf9_;R)IpTym{?
zOR&m0bs>_c6vvNUVYP1Y@TfB^wM(D<{<X-4z2hBHo@L@DV`m4Ok6lh3>r~t&Oc<C&
z@fFPF`u-yF(?q4nq{D?`o+x@iKpUekov21#XQsN{F3hJ^gVzZ|5DP*Iu6q-Cb9xkz
zj$KnuSi~3jLU1=4lqF&#;i{{99mV&Ycn}@*E>v6lcyiS@nb)U7tswtMpODOQC##Yc
z`|rrON_)HjZfr+ydyLjFSut2KX(YCh;V!Wt8fuF4Eou;!E6-?K)BOl9H>TOY-UK{_
zlAUA~T)~b<?fLMauV2CLMAw#rTa%Tt?;I8Nf2uu%d=7RWY$~1ar*p^v6Oc>7S3=pO
zh=%!A6BKc=el9AGGrWuDr=gc+0D?=&Di8-Ca-%rOCQPj@c^37?WjuTxw6q+kg5dNg
z;DTQk;7$^|*VRW_P=AW^6GGQ4DW2)CI5))g2Ec5kNui#lK`|`EXiFbz+W;cbozc*G
zzc8GIwmGXi#!WN`Q-8bso46>6+>5;k(subOG%3KPM~z9uarT4itthVs5i{~BozMEW
z)(*i7ecu?x#|?6KrZB%5<fsAS3Y7KGvs|iHS{yq$5I)#WAJ&+TK72y^&*IPTTUAPm
zi_$c-VL}{B)7gzPJPaZT9}*W1HK!nXZ*k+(Gg~>y_6agnGG{)IYM7W+STOm@Qj?$O
z<lkd`R>cofnvOyI6ek#DCliSTXhXC3QJq<2wI~7<{ZrI>m}Ws-E*lm7nrjHM*#h3q
zxiOvdGdRsY;g5>4v4hy=rT|TIlSu4q`37vm=zUQ=1m2aZh)OPJQMgG$FwpS4)5wu?
zSf-L&6Z$pUPG-{kWh(#FpNpTHuMgqtGy@X&{uWPa>gL)iqYne7lZi51jS`oRjswQG
z?e(^I<6ZB2bBMnV>37;k8~R5v!ewY*t&sN!d{4pvtQ||ruG19V{t|Jfo4{h=-IFVy
ztTaP?au)#jdA`1nwRbB9c}{1$gI<esg8tj2NldAwt*v5-wZ6_CVxDY{MQ<!*_J+}t
z%h&b|@h?9(!W=c6372-q_j>O>dgtm9#Un)8aiWwHe0M&1skGAN$!KNJ%t;ReZquk)
zg`97TZEs^wbtD<j?_f)uyJFpu`LXjn#@^>Y21TWkZXw>?-PI-0&ChRaT!=}W@hu(k
z&6-(_IVX1eGHK#|M&rA=TaWwiK+M8xi8hY9D0;5k;e-A91CPmxXf>a4DQrR5spb4>
z3V^#MsvpywFTnAtrP%0)js&ifwdAsy2)ybI;B|izSkaVxjw8{ME@$rfr{w#0D3v#-
z%YbWI^T%+Dn6M7Ew0s%-pkM*ympRkCO^k?iiHiVEpvcpb+$Z7XJGMRNH}7aV&=84R
zlmO0lM==V0v>^RX1_!@gN7dvBj&4#sc{?Ra)0<qQq?{x>Q+v%<aPF{S2MAu#{=A4c
zov>Drf22Sz@h4uJ1e+(APO&p3Na1UPbSTdcw0dZ)0!4L2BkxCyZmnNNA}&1k5!$sD
z;3;pk<-}q#gq~V@1i=|2CEYav3+bzQprL;rt69p&-(4Xj0~#^x{_6(n#Az*cvt!ra
z)BhUndwfl5IbGd7f$x&u6K*3jxSjncLf<SD{a6mOJ<5iBD4lx<zwSSoqd?Fd!&d<?
z8|O4G1j7mGp(_vt4qgRdXncY4iRCIGKIsV0iv;uYWyF4g!7mvM3sp)vH=tkNSop#N
zHd}_FKND*Osm_a}@09MoROWqgI}`7{&Sdv!#O}3svgvnvA@NDYz{*=Cn3XA7YpUok
z(wzbApDQ_{oq-<2s8jQ()qM&*amN%o!gErDUm_|U_Xbw_rsy6zo3VrX9Pj9_U+(9_
ztMU^f^9xe?;vNaxEkZ$EaF=3hdXbyM(Ox-R6VAu(&dI!KbNswGmzpU;X%CnKsGfjb
z|0an6sc7S!OYDasm-m$3(k6xB!Md$6BA5sSe(}6vKV85q2*>hx=vK^)i+>>Hud@W4
zj(?PZg-aycMsaE|YLROBCNScb2}hX6g*3<?t*~e#2=aHCI(z+gVPgT;@E^Djh@vk$
zN4p4gqgOsFl8L)2yhA`IWVn%4-`?M`!+mHyVv0y9^K;Cy-^Y?j;uCsTPS!nhc%E?k
z5K9F_??P|YR4(CO`5#t)_Pv5%4nQC4*EwVd!|^cM;`}&;?jj}_!Fz!t;9;oFIgb;c
zjYw_Ds1<ZJWi3tQflPZJg+1WT-kT?@1Eqf4I$RVxLl*%a^KbC}y#KB~V^FFqjcQm-
z`$ZB4a)HvrOrS&pYWpJmn2f`ZGWN}SW)4ACGv}oqPuB5>GoTg<LQzb3ay|@7W?Sb1
ztDq)1CK+y#7+Zu&-<T=@K)<=T5ZXfU%0b8^OHi6hSTU-SltId;@7B`a@;QLX3K0bQ
z1eplwio3j!F31NX?*5^S*^T^NIUiYCujD;d{mupGwyuFcmqvGK?Qg?{>~7!;{iL8q
z)-7EiA10$X8CqFJX1k>mMkvwB>rk1)S4)S+m9<|@_krZtU)jVgy?QE)1^Me+h{!Q(
zF9rE{3FGPNPqcZmwRhc(IcXe!oS^#9YI-jgMId^uJTn`?ruOztH|q5C8ogR|1Wgno
zG~PmtDlKdGNcBXJq#Ny`8as}S+&&&10o#w5r8JA$Pt0+>jZFWvu73npi_Wl@EmhhX
zZsN`WHlZS6^1QyU0z-gyqtz7(rwR%S^OtHKQ*a|JqZPjv%ze9&0}+0~Aq-oGw+62`
zgu<_S5#)a&AR((yI0Oov$v{;4t=)agQ+8(f^^3l<o|}W9+y*WY4Gk*Tx^)N0c$}ZX
z{Tg3!cpnsR?KxWY3v-|U{(8@+Okc@T)V!=W;_!r5*&IKo0{4K5`6Y{Dy7h#1(wT7H
z@(dQ1nmu7opEv><^U4Gr76B*nYiiE{ySS#{ECN?vR5<kIZR+5SVEO(E))ooLasqmT
z@TMSMYT)afXi~ezU1$k~6lVcQ{w|Z><Hw;&wY?=e=}7d$WQmwKqG~1yEIul(bP^2{
z)i>*9t&(++Y}U=mHG@Wy%7^WtJgbFm@%%jhj>xvW*9iQQMtP(Nt-7_x5H1y0lD{k`
zEnK(Y(Mpe#al@Hjf0lH-jL5Z)%nB+^tfIh$mw(Z}U*FzgFQAc<Y36L+F~G))yYVPm
zJ0sktQLN~F3zoOI6qf(Q`ALKKn%JeIjaOe3MD`kJkh}LH?dieCCoIU;x^=sSa&!1&
zu-$VtfQ(!@#srf8mSS8v;&jGk3t=C9fPrj73ZlT{%mnsU!-WJ(?cHp&oGS(N^F>Z#
zZ7f|Bneg1uwZl$WCT1d8A}Nkp@p25ubw7=RAoOk5(Z(&i<n`JtpKBQOM6KOTg14Pm
z&Ewcc#A}c!SK<&I-v+t)y}Mh5LI?i90o7G)SR`6o46z7G3Vneq4DK{E@I*Q4nvU+h
zq#HNjt_WHz^~o#-ex8K`OdBAal-Isf7wM-mz+nJuP)tz1|G`%11^SSv(aoD7C73{#
zu2~J+++wn?aiGSw{d2iyQ9FZehbg>Coc`cy3m%vs5eVYtE^)kRG51}jUG;XQw2-$g
zqm=)Fs>$VdE=+%A)Hcd4rk;tqO{>~73%?m**W;>+c(o@4@v=F7v>ri<BmVatsB?@s
zdIXHPlwK3Nv`iw!)!2m$I@z-d<q29Mufug7b@j$@!;j_$-DiCqxXu+Y`hf+qG+5DB
zMIAO1qfnO`_JxwKbZe-3Ecj4As)?A^)OBQ`k?e#-@C7MR3vV|H<ge%{&`?J#o&=%0
zP~(%L?>BaC>njjLzcC-q;;Vne{n6)WN)BJW4UKRDq&<6_hQa9Q>(_nN1?`>-!CSya
zuwWLnlw7LfLKjC>e^x-y@hD{jcJp$}H+3~z0+Y?cCJe66K;XE&p+l)Y7TD3nBr)=r
zVa?=Cc#+=FWE1P*tb{`acxUM+5dx2y7?uf|*WOsyeKp9YUDA5=u5YF#YDaqpdmCi9
z7)GyU?>olU+a!Gw{=tL(=?3U5DMJ1;H5$~aU4s)Y?}grdJe}cQB3nr38mK}R;{Cs1
zjAwv{n7>KOp5vXi7)fPulN-AmOvRla%}W}EevrLF+dccIm%(L@m?cxPv_Bac|KM>p
zyl7<%0$Q1wSxKq=Ui@UA_F}0yMQq{2SzwC!z*-s4e?NC`6YB`4M;1CK$Fw$$PF;@0
zTlcuP1tNLwysoyI_B1<p`3y$XDtCEO;*qs(+NCIYMtBnfd56iOGli0svq8d~34)I8
zcs^<$CzXgkJgig3#2NcYe=8WJ(k&9F<n;nmn*H9w^WR!PJ8${$W<ODaO>Rof>C@e}
zsjyq=5TXMePY9BaLY`(>Kl+WKNO-;A*P$AYu@GAaHU5-7aq$X<Xjt>(CKBMJrpX*3
zSQZa+ei0ud6~|(xpC=qj3|enEE3cYoNij~=#(C!OHVr<~{bDrtSgfJNIOhUE+dJ1y
zfJ#(&;#{e>+xKx!%Wi-iI>0h(S30?>fKCjY4Te98w@7XvmALw4wJA;hyBD1Qf`$=E
zJ?F_EP5C<??T%*V@`$%EUI+Uk*{90@Xgj#P*&&H^M7`TON|l=#i$1<pVq?8rhAPa1
z@WAUru>9xr42Jz6ZooRmDz@ZEcc_*qZ8|!U`0V7$gmdx0-Up`I0YD(qe(U9bnt}!O
z{@!{?=SeCLSI6OI%rU;?DZK#J@FOt4Qc>{FLgixm6Cu`KHksR*aK_)tU^&irS+y)Y
zaM4EH7)j$36m%jym3SbGj%G-15fa>mFg|o^rgd3*!~2}Jn&ev!yREh<2`#E`T>_ho
z2!Q*gE!ikm*9dXde}zs076CelJKP%NJ3wu^ItGc<X<&}>hI|Ts2AIglb&EzXTKD#?
z`Xv^j`wuWIg{~mS^R3hDb%?K9QFLc!B05H<*cptiDn+)vzNqB|0q$AzgFsm9XK577
zQz;q-dXJA*d9{mqD|LyGxZg2z6?wJ_QieI?lh=qI_~ytYC6mG(8_CySvYlwXdc*O0
zFlczMkIY)pti&sc`G%)_lBT#jmpkSliRxHN_)w#Erapoi#s<6`+BeuCNnnkU{=m23
zEq#25pw@KZOS%pmUYvlgYeTtboEwL}Ygr70_91q*r*d7BhbI?Lh4^@?148|g(r};f
zqfm*xEhJN81Cp&{XK(_}t;MKe*6V)h78Md#z;8Ee@nRGO%??Mnv=+Tk=BNd^b}-Y5
zLTdw&_o}dSGq5TV)xY$ByxThY)(?Dt(QKF!_x{ED3P-6Sp58+gh%4h1y{T6Im>jK3
zr0Dg@z9Kw$J&gY`OmPUY3^J#i{9AlI(qqahna!3j600SC%R`Bv3YZ{)W-_8h-{ep{
z$4n)4Cd22BkP9ILB7cJ-F_Xp(4jc&`R3wEpfNa8I=N&zNx~WX7{(VW_4b}38UsP9w
z_(6J|f*3Vi@B_Udj>r(#J-k)x{T(T4U00T#h*TzKM#>@(ljnuRbo57mu&#$_%`}kO
zr}|*;K|_YHGuaW+a4FF&{HaKLsS>w93zcwk`v>PFZ8hb6ShH77n#T1?7Q{RuwEzfd
znWU6XO0NJ?ra+iDu5h$W2H#mk;4O9E5oDztq--vB1F<%h1N}KoL($L)gTR3?2i2WQ
znr%n>LiTO??+Iqi6W?i49j?89j&;DuQ@4U9W$Hzns~h!|d+p&N3p7mz>y+yE@RR})
zfy{7>fc|pg552)(7%4li3>xS_;wKh7DuTV8-oydSD6~<DnhTx&!4M4cSkRJCRof;i
zdG4*%iXDfBirK8SR>r`{DZ1Co<4NbPviy7t$IO=W0W%jE|GXai%#y1^M2AH>UEF&l
z@$Va2V4%2=!<R-C<Q}-!ywF2ghAIg0J_wHDay*x)g?m$zhU4A#RbAtQLWxm?l<7LB
z@OSZntDw66<(>B12GY@g9d5cX+sfAn$gEF-k}epP6jENK^(-^~xTY{ZRW;6Le`4AF
zW*0}I`}kJMPl*XpxEarq;SU(y#hpR$zguN-d4L+yDb*H)MOQ*JpbGtBgyieI%FgvC
z;=0MMXQ3`;GnX_&am;zz;_@=uE4<Rl(EIN!Tz!L7LWwIGj-N{r{xru?T@%mlD|_{E
zudm5eJRO=rO0LdKe^Ji2k&4t$Os~e<r-B}a@kvGY*dQYG_?-(OgnGYirjt#sOjV$a
z_lwv>37JL5$P-pW*SkN^<$FU8lpKGR0^w#Mjg`Z`yugCt$cnqsVeaPT{j-@PWRhlC
zOJTlrqw2t8cE~9Md9p+!uy~UAs4+|6P(?d(8v=IeTD)C%HV$fy2Wn)}hWIA&BKGU{
z20L+}SyF=11*t=4a%43h&SjP5<Z!XRpJ(SqC^avbXApf)6FymF!HfNR@`xg)dc!$i
zL(ZMEIsGVm@Oxj^=FsesjSB;)klRQ)jGCp5lm!*pjMw#KP3dnIR1}Uz7m<FTe!bsZ
z1HUsAt2KiOk`2OnAQ4bZ*;WPa3++lgWDHGdr&wExYz8ex5j!)dJggj*QtBC64=Ft1
zxrn~_`dkEM<stH9>5$xL4srwUb`=CpKi(fN-rYJ`Iy*rmadg-7p-`5ProY7dW~(9t
zOX;>xUjKq1=Bc`!C?@tn_py{z<<=fPO!f?25ahz(X`UUsGqIhs^+TlPPlrkM$;N^P
zlsE+h@@EUx*^ZpG(!Q;%+_fw;?IxlSmBl^!6n~~pr5%$mU@|W-olv48G!e{4+1m}m
zo3x#QVjpO9k2XyZ|Nd~-^i7gGlVnC)1s+Qf@4^QaLRrt{++nH(sn}1VVS{@ddU9r!
zT{hpp<5kvMY&%KpYCCnt$b7q&F5>;x2YYKZq8gga-Meizaz!$Wo6Z9fEa#}W@jhGN
z>&w1u^8-rz_u&*y?bD24`00UrpQzivS~$9f)M>TX<2y^Yq910=fc>f5ZDzVb;HfMr
z=NV(fB?J+3_yj4(b!p_>J(GOclvtwyp4V4>9%+87yAw}e^04=8?U`(&^?{%@p(=qI
z@a=W1bvKz~<Mbz<+YtuuuCvwh7XD%{w%hx<O|%EFbu}t^&2j5;)U(Amy1}8od(AX;
zrrMkp>nCV-B@a=;SUG(A3HG|e(|_H4f1R=82t~*<lw>O&aiqPvx<u5CGiDh9rud7F
z2RM%Q%sqThk{bMc6d1qzykIUZc>W8HQvT*iDB7Md+U=8c1|olDFWJRIcWB*WV{j)X
zr1|aX!g-S{$|VH!oG>EBdu$Xze)TO@=i;P9a!4jWF5LM_>WiT@h1zw)<7&pdL7OQF
zv-<tqPPP$E;<A<|>TD&dda7EIFVHaXj|(me!VZpzat{BUe>-s7fj5Kcm+(%vyMV!X
zf|PtM6~v=6SRjMu7v#XRECJ`hON9hwa#+~RD<4_wpg7o3ocTuGUn&H;G*1QOKsNm9
z$u?wpP})r~W8$5ai8M(H7d<{5dCJfcwX8QWL8Yw6S633k>~D=~36Dp8On%LjLU;W<
zv==o?J_>)x!=uWBRmtw7%;pefwDenyFZ}=u!EJ(`5??mO(2{Np9fnW(=Ql4e8eJ#^
z!B4Nv9hXVK3}({8o)=96qFZ%Eh`ZRv<5hNhjZ+yv3!DUOr<n=H@O*@VczS??4_d|Q
zd9HVgXQDB3mLYrCl*4cbf7+b`XVwtRMKiXu&bAya9zSN-fsi3Lo_REhm^>at5;eU;
zt<kG5ovnJR!c<qP8KQ&e6|xTIc_R7ZR1)X)bn^y@6Eyyi*JkPt^5MTS+xHDqPFTI1
zC7u+c3x9J!qA@V%+{R48>=Z~^aBFqO^CZXv9VPpb9g3QdMn8cX-Mw+=oFd`P+#yiM
z;vSUe2LCfZQz`GudV`p{CO@>g;bY3Qu|FLGYI5qnU@*0R41Tgq#>Jd3+N#q8)wV<h
zbc^25C55>S=>%?=%Pw((;YK|QvoL`L55WyvetIf?R{aVl$9y%+#WeK#m3l&+qhbqB
zPv91Ixutp7c5so=MM|bz3etR5^HJ$_t7I8`sj)8%1Ssgad%FO}n1s&zQgC%3NM`N2
zvsj$GXu*}inU|zgLb-ZPA9=9L6FO%0NLd<PvGB|(JT#f(JJ|+s$;cAD<8buYt&d!F
zoGoG6s0aPJifGVexxj{GW#8JcZEfJUa&fTba@Px7+B2^E+1Mt%Vc2*5mDXU)e;44+
z;?6i7Z+Y#nW(%4rn5>s)JVG$}@=pynkYQX+j5W)NYPPK?lo71n*>@4a_9_nJ=q@I1
z97zVlc!*<W-NZ-c9EL!zeIB_Z3G-jAGZ=@?7MIGaRFh{BSWQyjwzrPhsb)md<F#U4
z5;R@UK01rg6rNYim;=z`?)$@MDv}-{aJHlkt*=Rf;c`x~FORu*l0p5k-DmJGUcrb@
zeXFoGS-S1UZPZ1Ma5Hp7G!2E_p?Mtn3u<Tc8h1@Y2E5~VkJi#p&v@8Ue=QdGm}Da7
zu8e=AG6o0<xfFJy=G!pOGt3hIU8p1XmgVR9A|B0oSQ1+|ah!5dMBk&((HwfaXx>%Z
zwjM*AKK0wg#jAiZDc0d)iL&avwb~@D`EowxeQV@iV45M8gp74Je?l1_EB1c22iXcO
z9(k8?112?97Tql-vE>;~;pq)Z9M8-plOs-u{tj~#!1ub7>BbEiDI~vwipV7@e(aP|
z%&X${Q{t}?FIm374*ovEdCqO_@4}zWRl6h0eVS&>#<`Q7-V;XtV3S2-dzJp^!;|Ak
zzNe>ahmMEg&q$z1V?UW8HnK_coZql8zsQ5Hf1j%Vda~Jq^uYKrUK8yA=)pJLv*p<z
zEJ3!{63~x{oLsN}aJqghEK62nNX7)o+n{J615wNg<!?808R5Q}t@N-F-jJ?=7I^>X
z606E<Iv4pyj9&nbm|3LN>h?+AijRi2Z?aTTFc_w%D#~?!vY0^F1s7*_pgAChouZa+
zhjt-4JDzAGI<W7L=9h0uqv~#)tG2TqT;gb#=<xDvv@2-Rkx|m8;^Lrcip{*7K=h8@
zh|E{I=O5~t=j%fw#_ZH02wBIX7TYB=dh*%)mO8QCS>Gcjw|7(OC5J~CO9PAK6H9NL
z9(RifTAvW0_rr_uJ7w!?yfOP?Jj1SB`NcHR!n!5G1!8u__$XGcWYEWw>+cz5u%}q|
z_RM67%{d?J1`U17)!2B||LRCYkD3NVCXowEi>OW<=8$<-<s3!!kx|L<2dCVA;tx0}
z?jVL;S$#8PHkc%_ZpI1Ybu?esM(r~LTJ=J{7GVxb-|REO5Zu7XbEbVQ3d~t3c9pxW
zwSW$MLe_NabQ{{VnZ#M4jEr^PKKLpZ_SSj6-xdT>QF%L1#D>y7(%kN14sq0_JX;O_
ztzSx3fc97tH@-?Hd|6fq8SX05K%8QoRy&=W?o?bg;TiA9n2sWruOEHJ6Se>r)zz)u
zBH%&Nc(4_rwYums6qOZgYwX?8&6K&pg&EG27JDS@n2RbHikQ7*fst1R3RwbDh_ol}
z%JCBDNaO5mGx&<%H1SEaXCsRLBd)>_Xk1Fe{+0L)qa*4Y6i*6Eh;GBnwPoxB!UKn>
z7xRly+P1EW+wERPfXn_#1MBP7lhq%*moKL#o+DQEx@vzOzI4Monsh%jHp2cAtF!dk
zrn1?suYCc_(~e4&5-S%H{}ch!$P;;vN~IAiCV526YVlejqD$m{VC}k7oqxbGjrmhW
zB=7D}-B^Vf^?4NDYo!HpZ6YW$8>Ax@Bf}j(@4hfmnc2?r4ot$(b_34ye?(ZG>`<G5
z$>U;^i8=KU9vEE{R;l#Pc|!$Bxc+r1S0(t1$WE16BkNaXy!Fu*+=KE5PQ!yN3)_On
z1OvOH_+|oaVAmUFQ}gF=X1sxH%#%2ZA`uR5G)lC`X4nA_M3;KUFQK73yg}TZ3I1M^
zt*~}qupFVt_JseSqMuxdw7GK)28`3eY5t;a?lr|%N{o6BNO(nX37HY@(7Ztoy<`6X
zKeUPE$BJl_r3RXDmRpcnbo@b0K?<VYgzi;#S-b?GNa7R^!lH(1&)`X*D>ZsQ-{?P~
z^%#5n)l9vAG<3GR)Wd0G%IT!EH^fSRAzFdtF);S|e*lj_aKGwQAsB<2vM&{qwnfxS
zU=z57JWnh(dHe7A^$p|4H8i|5V@p-lmKkWjLy3XO!!;W*HAl6Q#N6x4ix)x6g$p3|
z!i9&>AK0%1%ayO#YLaGC6R3)jRV6h#xp~?ijut*B68L=%TCJ4nk}nJsN6wd{@8x$z
zi6a)s;Zy8bu5@WZquwxUxC*B6@wkR*e7voSDf&j17GwJf<1v~lq&~&DNcn8T(SiiS
z1lI=m%wM@@9MY5;ZO;rWLH?2?M=Zh)XvQ<*3p>!1KUfOhU<@Re>d+ns-^rFVH!qR3
z&u#8XiHJx^iiiM9tCspNt*Tn8?yQ<0l^v0-(`84D#&%9WuoAq-M3S11E@?hb2=aHn
zEy#2VC<V@^8;Nam4$>ORA!@<Z9=S@40I2KRym!d+<D>LR<NVeKg8SI-W#W+fS(Cuh
ztO*h7KuMrlW1U+ZJ+45!8_Qd;?>FIGgRzy-!AF@d@`!tm7KRjw0@_>VwfoGTquAw@
zm8=(QUYW>#Q>WF|X~ELkCF=ItoNRSelD8o@pLt+58q?n&zLDA{5C?B@`D_`T3hBJT
zTmO3UNA?r&3jHMeDlm)ZqqCp@o!}aTO9SCb$E$!UzoPu(86;;a$u`b77Tl9KlytNP
zU!PG%zwUFTY{t#-u)r{5OlTlorw!3Z=z~FLkEqg1>@%KeZDq#$h`lPrJwW286#4u5
z`iqo)$CN=#ph^|U1QDKzavERd@uV`@Vytbep_5?Ti3DXSZn&Ze_+T_Kh9S{}atwpB
zpp5>~xmIj%XJ_%!rNy*y((>h#mZ6;bv=OAxIHxdDC4dyx3K;k`f>{S{fL!_od(B03
znFYD*XCMT<=(b6JnS^UBL)P>XGa6@;R&!bTxeB{4O)e>!Y&06dBSq4=i=!6Ll@>|!
zOQK59C6)?=?H=danaKr#udEw5skC$wY)60R(hi=lfj!_2P)N>~<_^!-{6UTv%9RXh
zbQ;KW&6N!D1i6yQb64Q_QNz}m9VQR<kja2i&4@kVIvgj#xlZfP%!56DxHQ;kzrs1b
z2XTREjd%!J<0VY03~3F9IS<hq@lU2T^WBgde7D;J-h}uFcCBRiQ)tcn;m(jZ#KBu+
zKj@ul&D%VwL9}LIH@F7j;%JTLm!>rfMoemGyl1ZRIQrRi1{4lUX9li<GT@8ojD;sM
zP`c?wRHkz`A~MS+k-BR|Acfj(t2K@3Oc9akbOX0RF7;<ZXY?*~W;-S`xR(1`C<)b~
z9jO_F&Sbif3q)sNyT?hp!RQR|cSD~<1K-pCCB6c9FGD(-LvsbSxH`s2twvOPxF)ZK
zTx2h4dLQwhF>Trm|3`W?_wNfl?ia1?EB69B*?C|;+v*daP&!!~?RPwIpM25Qsp2H@
z)UAuE?h5zuP8~lrb82xwfVWThT~*}nHt;pr4`B$vHIi`s5HpqlQFd*l%(G}Dj5-&X
zQRUkI?)28jluoFdUR=8{FE%<cd)4Teq|hMWN7Yjjp1*%-Rr$=VCE3#qlXAhocO*_9
zTb54lUpa7omvQd*5R?zbIs3cNLzi;M1TXqC$ppW&vy%-M_`QPH+~kD^j|v@O*<X`1
z@y1;5T<4k%CJfO?s%Z%7Q;xJ!L*{xAJac+Qz5n|4F~Pw@7iqY)5gf~&=v|ce;@p4`
zNw7a$4;5$-1z`P>hS#EN)q3>FkV>Ga$O`aUx*n{gH+G8KHY^c!UY{wRMK=t<9o5j#
zz&;2(&{Yt=8b17xtNlkYtKi&8rA%&T@^wKpxC)J3t40Vtvx?oYxN7#=sI{}J+Sm;*
z%xrk!wanLEXqdTq^Bc_6YVW#=iaPJ=smvRjW!_zF>b<*m?NzsRdCN$y|ADWWH2QVQ
zA5~TtW2;&uDnp}H+f*@dP_)M2#6y4kD=7XOus$;Np4z>!#i_qye+BkUUXi=V_uakw
z-g#$V0CS~iQeJ%<UG>t-xjMeq(E!s#KZj)x9M7r)W?%yUrWaYagNRe?aZq!L{TS@;
zlCqzIIuWR2Kf~>s2cBf27#UwTmb6j>n(C6Ue*tx3P|JQw>#W=9MeN6?Kn;8R6o}yJ
z_AqT+O;s%}gbvV{^j615K~$F%gtEs(>@g5R#ybzkBYBfhXa*1H<}L|*?qM-}E=<Bm
zg+OCC*HdQ3gN)|^q(G`NDlA%!9!vqxl(R)*ri%gp=w=tt<Jh8d@U)0sunhc@>85ep
zZpuuvq^-pWjAGbO0Xul396SRb><0gUt;J^aKf0S?{g;8=BCZ{(O|%i$2L={kVPG?@
zQB0?zF`hwVvg&TIdpQE3SOj)2WBtjH7+wm(i`xPX(CA@91?+&n0HKACcC%_UD7_K=
z7mf=4xr|*Pg8L*E(!VosUxtx<Y?0WL6_u*S)&{AW-;X}DLCA62L)hPM*;wD8l(eqw
zEUsAO_1kj^6?Z@KXmRnQ#qv+QmoAFd>uSaYZ}s2x%(%MMMG@<gGrcpDlHi-5)-*#Z
zk7{jorf<(hhNItsUF4p%ik;5IiB~d_f_kX%#YCQASDc|Q-9A9SXN_T+@pIV&mGryB
zR|e(Bg6oW(WyGl7_`B9-R7H<Iz)lAe_J`2koghFA^gDY+AKmu{5y4?C+#Oc1$|fgU
zad{MV3$8gfu%A{kIvjBVsQ@I=NC~EVW#NkKu#;8dUPgC&DcGP`p3J^YAHW$#?t!#U
zO{w9nJ04esl1PzF8(~)ypdt7BXp$iVsnEro!Alwr=v9lVbt%aO)opFn1<A?L)r+bZ
zFSb6F9c#>qj?OX0g2&>rv*V08I$h2^UCDY~`xEWax|A;XaeG##*<>=mnMppe-gBT5
z?51xborH!9kKzr2$k~5fOjw4oc}XmKKebesMN96U3O}s3?w(3<HQ86v3R(kk%I7W@
zRQ-|;T?K4{!~Z}lUli;sTXis`_n=_^JFw0K!iQg^eieG@&b92!eEr{ft$Ez%p_Wak
zat(ZguoY59T1n66v!ap8@@VC_>hdVGDjnV;67PO+-h&I9#q91DJSWF?sC>NMEJm@J
zv@dLjs>!~_z=pFQynC*=dEtZXt1YBm@W4N5iat)_gMbQdgAkgLg6U_@Y&~<PaP8VP
z^l|nf_90LY>aEA90cv2tR;!a42lu7crB<g?*-nK+>CR8=B|JZ|7xA=}@`O^xJc{=b
zm9$`cQvIFUleE8lon!j`U#J-J2<s)&T->5lEzl%~TA=W*><9jHr?s#CvsDzb0oA^W
zO&zB8l`#a>zACxlQ2R;`{AfKhj^zDU4O18Qd~dHvx5T4){`_W-_9#*6y0o-)sUVP!
z`)yG}TR>Ywkr4`0xke&O0bI*RhUX)c<y=$mXoH~OwlwIvy4NcqF)KASD>1>VR}K7d
zpZfz<v7`M)$EpJN^YwwkczB1ciyPJ}ifSkDF42k3uS<m>Gvlo9j^W__Et@TXnD3v4
zFl$IYB=;#SjBqIs^8rh?`L-^SFYD}F=GoQBK0+s1;*x9A62+HI;P8ZeEN<2>F=Rw5
zJ`PV3#YUhy(I61a$MEBGmSM?oI9*LuRpNxi=@psLVat|nqo>WE5)x9Y&@l7aR|tHO
z)OI=m!WW4>c1IZU&WBnU)pvFIZTCn@&Pf$TbV%klH_w%HM2LFZH|8cK<&H^7*=`=|
zCyz=?9y?=!--4=fS?uPylYuNMOO_P{-$rqAl^)LFJ2D5f0$l(0aIx>U8I#fy;a-Vo
ztEi%N?7#n!78##$gO0m0xq$4sK<Yef?{F6Mz3>k+t~Q>nL$-;}sqNe|E_HFylWP3~
zdJTU1`MT+&EYk`&xacU@23L6Eqfs?bB1il7-05d8Ke1c{R?MN}*lVXx-8#h2g&POQ
zn4RxM+k=kdzk}5CWv(u+ZJy2(=IY{xY>SRdj@uR;pBxK^3vXQ>A<}k~m(vFJ8#w<s
z%MJ1ljulRtG%4SPN7(-z;t?DxB6!4S0pFLxhpLq&#nMn>*oyA%6=BPlF1@_Q6dIh9
z9U21sX0<8XX5lxkT9!(ghfV@qBWee&$FN0UFSsFV;_BTTvmJDt?UaF+1*Z(c4f_t`
z`yRF??)~nF4ivuLbwhLrPHVXu@Fuk#p}7DQt4w3l;U4oTpf9z>jd~NVgaJ8?QsEGf
zz7U>RfnM6xi2!2KfzL$vwYB-~_N<#3re8Rtq`lLlwcU4@&(w+#{oPd)mIA+=!q_-Q
z=|_u2qp~DLdD(?Vy-4Xxi^Z8)l2Tkp4bg&1?i_LUUV)9@1S-qslunt_+uEv42CL_d
zn|yM9PtW`<iJ_=%6yz0Ob9Hp#{QQYh#pYWXCEPmTao|a|4qJz}4s0)lXGO`$t9&h7
z<*BDn9$p}6#ihcIu{S_8Iqx3u9HekKb+Xu|+;eXBtY=proGh8MV~%(VZt25*16zLz
zuP*R~<x)7-6cS&Itc*Hr&cL;BxBceAB2oLP7oL2wNqpBS@Z}#iZF=Y0iWLYxNatj*
zjSP>;WfGNrw=4ho{jK78aQWZq0T080eBiSo5RdP`XFZ7LvISj*rQjX5@ZWy}eg6jQ
z<~P3$|503By-z_8wwc=N(j)6A|J}XZcYMt~{yR1N?$6kF&e>;zxH~#M<LEPi-RQ{p
z`@kn)rl79hOdQ{hV!M%F!e79v*oXZN{1X1+;Fmy6r2hp@2=ge|>xE(qHL2-10G`3V
z<F=ZP$TOVt>G%LjmUYAUbbKK2=|H|4*TEsqHyX7Pc;el%JKotHpNap(r(i%ByYJ{f
zK|GAHzsSEpF`f_aF9N55{3_^tP>J)v2(7qplcX-Tq%8#J3J?NP!4cb?DV6;QM1qie
zaou0|#1D8q+}8cQWUu>+YRg&a74&a@Ms2y`S<zwiZ(M83RqK5@J!Ukun);L;?P?pW
z5!wdVP=BSfU2TK2`Dai~(>34#erD*JrnL?=O;Mf1HQ<n~-4JyWXA2twN(s{FPOzEB
zG4TfgX*0O*n5XUE5q|*gy9(e1Ji%l5JFb=_@Op^Pz4jJJpg%{D=+y>=*^k$<f`otk
zqoAN5zA6Mv&jQm!s{Gb%Oy9JY)ChkIC}A5nI#y#xS64@VVIjS}%KO~oS&yIduJT*E
zDShKQ)UJHsIv7R&9czBEC0wTfqdxnr$5_DxR9JUmcw%ASKCo|evWVSW5epxocU9c}
zqJnPabWU%9O!$n>=EHL*^|kc{1^Q@H%rNz}BjFguWQ-Bl(I!3H>S!kpT}K<;*Pdg(
zVgQv%L4F~QRG8DFakqXt6je_6H8MA0-UvxKBMERcE8xpEgK7z9Kw;b$NCIevjRN%N
zpWgm)a#)C165sAUr`{WQFP!6(RpKR<?TC@6A~VKZe)Z)mzk6**eceM@qh+)#tpmNM
z7JwBIuYP*|SugfRpeC+xc9(beY-8jY_F7{2(wSZdHotTv{Ls$e(h#6e&Qs;aC*>)}
zBw(F#(!lpj2G-{WB00`kn+vdaCj?nV#3c{_UN^mP`t%E?U!Oe9mZ-s$q?&uHK3rd|
zVjoYD@41k5VbAW1@C~d>uP}hw%4zJLX-m?l8QCKWE`KY0`zMZRf;2*_vmj<C&>7hE
z1`K?sgO>#D4r~kDy5E1>fxsm}yMmSkZ#$ssJy_Zo(0}5@iN*IXJ`VrD4<I@~&cy%s
zwg6=R*h{mF9?eyc>z}*&T_PKd$ldMy)uxSonkPg0nkv&upIG0reP0vs(q8l}n^rwJ
zb>ideTMl@3bciQbXBZMCh7d+7sjQJTHH$ksJdcD0=?o%6F#KIrjeNmfxX%1u`h^kJ
zVgK#_iaP8+$M^l0tf!981^p$Qn}+EAuto-=FBfHT!)4HYXu;Xw9iPDg&9wGeDJiqs
zr)j2l%uI$qu%AOJV<>Gdf7X<n7U08vqLYUfZE8+z-dq$KTC^Gdu&F2%^kk2X1C@#r
zcAHPk#N6z0aqLMYmqUn$BhEb(2HxC4)-xQqf#HE>ICMZ-uBo{^AkEG2oAIDI6JvZz
zmS*Qpj3KrTd`>;N3Z4p`7;;Ai{ZDHF@RYK*-~FJcrw5$ddS<TmGM9IX{tCjW8`jn?
zLH8~CD{F4^))#W)CpOeg^**IOz9ahKBlTT>&J9p++_-Xen>yGdN-vI&j)-foZ<^=X
zFjo=o>8~;=DZ<0Pr*C0hnUlTUAT+ph!$vw-+|R@xJm+`HtFEEBB0cxL>zT<DYo|^3
zI;rV@KnwCmWf$Zfl{d8~Ma3pbj8Q!i(c*Yrcuec;bJ8*Sa+!QmsmCG|GYwaQkzwC9
zU$WDXDMNv5?hsA%@e^!3==r|UdKk(i$BrGl0kYZo>$b>1Fp1Clp8gNfBRav3Ay#3_
zJC<tErSwAj?njiTyk=B2l}}qRty;OyK)1573Te<?vk%=TpS3V1Jk=u4N(u@C2RH5s
z4{hs|e=FEC5gZl7dnUt1|2Pvo8A2~m2WbMp`LwF;>bN718Fu$+PJ0`pXDps7HN1Fy
z3wvbVwCQh5H^$1tOV-Uwe_?0CoJb$<;`xe_d5itNSf7;PX--Kodzu4Ly}&5A7jBWe
z6Y{%4_IUahJLhe1+Io|Ik4~|^NhisAh)pvd!umCYHHb2z$Y#QSGO$rTU2BT88RaF6
zNtm8c>0p!xr?U>91Z$Rnu?CRWw)W%?D@LW4yjYU%_4d^4@!jLI<xQQk`vPPE?UJXS
zk}T240=9T`Hi0Li^peEL$V7=giv7LOEKZ7xOA?y}_>01^4<`Pkan^YaXP@`sGzwzD
zW!z{0^DzcvtGX)<dk+Vk_BKRUEt)1(FK9lo8O*{+j4{%$U@SInD2wFrXoz+|WJUm&
z4;Ml}|BJ2~o?jXfzl>^A?NPO<wjEIP9#kw*?t!mu2mN{vPCTMIvS!Vi#ode7kdJ?@
zxADqGoN1Tim1sg10lUN`9I?wV8ot@WR3Nv!_gF~%bO5H;ha9_Cvu%ISasRQCiYF_;
zeVAW%Dkc|C8tZ>NXurJn?x`|`L?N4cckSd#jbBvkRPS)_sj*Rhno7=()c|S!E&3%i
zSDs%wE3@^GYlQ=M4D;ogn~rGC`&QJ=D@(|KdF^ZvH}l^8e&>Blr#F<w75!%I>;v-l
zcBZ5@Os$EK2KzHo(Zq7;acO%8Q(6Uo7a|H%!QYikm)Bsw`9uiIrV;YY-k;1f8*v5^
zA<x95iW@>L;FzLadjf!0)G6<rapmwvSH7~RXJz^J70-nPjVdGjG8^*CDje@e_$6<T
zkP>$JjePgPQ@g4rOTl<RvsvJk@@<`)&G~kIS%oa*9KUp8mxNn>mUh1NB<7Zn+<hVK
zZ!f&?0u*>&_~;|_fzNO%lp#~#oJKA~UN$}Z=;`N7&z*jhEe`>S#tHY-zPG9-n0-4z
zzVW#7L{HBN<?)Rm*KcAJ2$C1FUlug@l|`|C=i(FX<Au16=HOH$80YNmn%Y~ng6{8w
zoi-E}!Z(CRq=>l!al!kPL2d`G97l|fuChJ?u0uvg+4)?f&8N)b%IG5PK4pl_rKYX;
z$f7T6m@(D&Y~YD~zF<n@@*6qEo}NW5mP{{|BrsGI85F9YUw7W4rV{=?JXVBx+zxmq
z8vkc_+}$JKaRY}SkE<F9kIQrAaXTQ7tNJB)+};0cdECGuxIR^b@Hp_s|9&2~1LCjo
ze~`yD{vVI~U&`bD-?<n5|BJ_^z<u;DI47<a+c5V*p3m*|t6o+c7gxKi+OK9=O>A7v
zGWPGjz|)Yku;i(QC4TI;(ejY-T{S*6UE@P+KY;PUc@e<ZBai)j%*^2Nk?fap?wr_Q
z&<%DM6!1RRv9G>gQu2O@n-TAW<IK#<gKxZ_8@&5f4RiM^gDjCv`ahode?0O3c;YY5
z6a9e_yg~o^C&nfz2ML}4u-`zCX7|Ih$4+3=q#$+zK6eF<A4P0nKRtHho}q##0Obeg
zc^!_Ez}uF8q1Xwa94>eQ#rgz-_jo<dka1dzo#M0*%$I&<oR)HsI4vc36XN5SiqldK
z8>bZr-m=-bo#M2n2;;OA;2MPMe=JT*ai?)wN^q6O)6b5dpnpAd`~-?+x&__<r+!*2
zlVpfkCis>Hj=70tI_7vD(ft&T|8rxR<_;UnbPHUE<NVUGOp=krGC=^|gSZgzSNG?!
z$~l$^!F=rJ#WG0-i)Fe6-h}x0g<_c`!^Sefx3{?c;CvoIrr<md{0Oc=xc;YNnWT3V
z%XAA|<#F`$W0_73ha;4;dJdEwV%&H*IuuN_)!bp`?2{(E6ZZ0XL7km~suU&4R2{m!
zo?-tB4zhFWnh!paaUPf0!POE`mg?+jn{BnC=3w8IWV?sU$Oh+&Y0={0fFQ0i?3kfI
z5y0Y2WjJRsA0bFismwwAaFE$^nzJts0UZw;@<&PFa(9goqE-F<;Im;7RI`vhJIwf%
z+}<#acy|cW6AZsmEL`%K!S{>xiXfLv2$XZ5g8bE=P>*C_(u5=0Y2gzHE>ZUH@dc05
z@-Y)Vsv{#G-!5NtkHRN4NvoR(9%knpUr*K?_QQ<F`!7ULE5%KR^cAj9nsdK=USQ|$
zNnMy;n~x9VLQs150H&K~z=PoQZFU~m^BGqV;|#kOG=K&!4>#Y&U)TybWZbrOz%CM&
z0^vJytPO$It`)8wu09}kbS#FPMx$d~bMpU#=5x<C+|~E)V~*+P<$T`x4ZFiHf@IeW
z{ABKV*mp0Gt1H5drqVI?eA{p)?`~h!*z(!C@62L<1kwpvqkxS4fxa|zk)~#roc$M&
zfy9%#WLa_~m(x3s%i|KtWvLphXL{AjL)E``?H*?&d32B=1Y<~WCUjfg@WF-wj}uS3
zRyQNz9Cm{a#jQ1uBi#^Ka!j`FJWe}za0bDf)#Q-7iqu629ibolZg*u*mDZbl$<wK9
zlS9o@d))<ws~3y1y9_f5n2yr<(C&sJIdj~P<~kNBc{cQnjL6e3@u!a^;cgJN3Ts18
z?F}x$<O%m9lH8X=k4bX;n%w(lYK8;gjGHoJ=iC9~Sa)oY1r~8Io#*nb8U<DDhk@iA
z$ui{QZfq{q(9n1|YFlSg0d44Y4rSMZAKZ;a>YxoWKl?hPY`clhQoyj-u6JPnSKN&+
ztcB(l3J%9OCz&stZ?ZivnK3OL=Y1S@+npoH9&>Y}LPJ4~J23d1X6gj>?7`2on1hAn
zqU86XAQz<ph2}w!hFuSXEd}Mv`Jtitp`gnRR8DCp{gajq0vf4ji|80$C9xnku5&O7
zNzE4RK-F-@T;cG2xZ3^07>ELrG<O_7F3zOu?fIM#G4>dUpB@i{6hnNZ!WbM5E{q34
zHIfcG$qtOg^jaTi0n*FXFMh)@{Kf3s!0=CA_g86a<1cI_kR9wDu-`aH4x}SN6%E=J
z*J6VK=!}pbp6><LbI(3@>LLkQvA+B5<BwvPq14Qv9Ly0oqCr7wzYx_Ut^h->DWd@n
zH4wwQCs%doBer4Fn&mCa9{{E7t2yRT`L7>;#QNboZ<l4|0v-F|+_|#tfg)AAxTdNn
zELvg+D=OOD*B6>3PSTQEJHpuc3@UGAvGXcHDG*4^Eh7w{H?IeQ^^+|*8;&j;+r1(>
zJYwhwdf<N)92=GIWzLd5eDrvwQX>jfP}KheTw@m5c-rNZ!A=uV6o&tq&Oj;9K!gR6
zgcD;7m@u|A5ojU_6vCz<gc6ByHMSR+FzwWtX-f$^_byzyGVa_O<KDe*;lda21@zqM
zDHJ6H5_fjeneU#t=fCIv_p|`+8Si1B_j!&l!Ui(NePI)pu_BzpU85~*A!~dRwlQb?
z5*|X<d@4MQ1@nV&8h6Z}!XwD0`uZ8Hq&^CdV#b;l9>cWtLU<f2)(_z<X6%aa1Tyw(
z;YnEbJFd{MMtJl&saCUrDI+UvB5gbpPT`5MDr{lacq?pU)%YqrgjsV=co@58SvZXc
z<~QLH%%+BfGYC_Ug-20HeHR|XL#w~;I6~`{a25r-uRnn)yDmJ5wEYJ2sA2(x0&>V>
znW=&p3QZirMT3d32_G+cbjsY~SdF70v%(2y`y7klp`Fb2nW{_;j_GlXfbUyLL}$4?
zgRqA#ub|(T`6|I-TH`nRUC0WDyn4(EdZZGiFww8^Ow3mosF2GqQzcf-Be$Vw(|_rn
zQmau@A*qw9--^7pBHyd3Mx-bXXiGIz==!wRZ7M34OAf91K84=lQ5;dIA{Dk(jiq;Z
zZJ%q5dF6d(y;JOXz8llNS7To1?f4wVdf@YY3)|S`9Ta)~Rk?JYP#o|WTid(kB3<Z`
zRx2i(8mytOvUss<lA}`=dj&j8tkL!dY%sCB!;28k_}jq&r)oQ!JlbHJ`vv5%#Lpb3
zt1$9{2IZX`ol)mtG4z_WQPPFvmh!n<7BlF8mz<uPbbvl}om%H-h+~cgT-r^#LcI4P
zaw!honyS0uF$D*IA1JO-(;eO73baYMlv#;eHIIYW^*k=O8Mv^3r*;P#m9F?1{nM5&
z1<h{Kt#sb}H*M)oayhI&SWhg~L<811yoZ1f37t;IIqb>DtR5vMIn|(kp%(pNm^!!X
zl1e1jDeYWO;eU4TmVYn50eG=lZ~y=Rc-n1OWq2D`7Cq<1mLkb=oRk?-2A3J##BmJu
zxQ^X4DUPMFJh3!#Mv|SR?UtFDnYQhgnRmNo?v}UA%&_g2_JK4r&bR(C_uTg`oO|EA
zt1$%h-=9-48~^7|%#aU4U;^q;j~L>Zhy;>Ip#f<$ViKA#8B?$Xmc&w68p~i=EQjT>
z0#?LISQ)EeRjh{9F%@fIO{|5ru@2V7dRQMDU_&%xBW#RKuqigf=GX#TVk>NoZLlr2
z!}iz#J7Op7j27&IX_$^y%s?Avq8%ORL>G2NH!SpEH}ql_`p}QvWfgm14(4J{?1jCt
z5B9}=uyGj<#}T*>XW|nai4$=gF2L2e9LG}NFr0?(@I6kzSvZ;#@D{$sg}4Sk;s^YM
zOK}|@$D_C&1IXZHWbq^%JccLmES|#Ccm|(h5HH|4JdYcY!#6kuFXKhLgdu#6FL4a!
z!No8N$iu_MC}KWF;G={J${58MKEnbm!b0qi191TE#3eWgf5E{x1Yh7Q+|4@HGsZY4
zGJ)Um2a`;(foc3nu#uD4#L1k(CAcJ);?i7(%W^p`&lR{LSHjQug)4IvuFBQ8I;V0C
zuF18yHrL_0T#xH>18&G>yuyvRF*o6++>D!Z3vS7+xHY%ow%m@}<2}639k?TR;?8X0
zE}X{cY~>8LaVFc@fg5oXJK4ou*-eW*+>O1Q#XkIs-|zuGWIuQ3Z0^B1oXb7A7x(5q
z+?V^&<^VIy(%~R;9Kt<xIgi84<0E{GD_Nk&B1br%K1(dK!cn}6ckw#jz?*mnui<Tu
z;XE$jLN4O|Jb(xCFFXi0;}+bGJMa*0#cg;PhvGpTg=_H$?#BbTmk09@9?HXbIFI0w
zJc>v27#_>xcsx(wi9CrX^Aw)S(|9`1;F&y&XY(AM%ky|XFW`kZ9vAT<Ud&5)DKF#Y
zyn<KqDxA%~;#{1AuW<!V#re1jC*gFQfxCD$ui>@)8?WQ_yn#3JCf>|jcq?z??Yx6`
z@-E)Zdw4JJ<NbVqf9F5=ApgmS_%I*gqkN2y^9er5r}#9V;j?^>&+}h=fiLnUzRXwn
zDqrKj`8wa=n|zCJ^Bum+_xL_P;D`K(AM+D_%Fp;Yzu=erieK{^e#`IpJ%8Yj{E7eJ
z&-{h|<*)pWzw;0NDIh3>m>}vzy@-jpm?#n=DN>?Aq(!5cB$~uzF-0sPmJ~~grNuI0
zS+Sg0UaTNi6f239#VTS|v6@(2OciU0HN{$DZLyA6SF9)27aNETMYGsQY%Dern~KfE
z=3)!6rPxYrEw&NcitWVqVh6FK*h%axTEs45nwTzH#SGCVW{P&vAv#5u*j023D^VPE
z{8FaqJF$YB%@)h?mV%w}i(cF|GS)KSJEKm_)*{|g%oROnIBpx6nwD|>Or<cGcNU~F
zAx=({q3le?@yf|e0AtfLwhEawV!DiPmt)yd-YyNrTdR4UYTj0p*U=)`8pd-17;mkz
zag2<$n!t`0skR8WT!dR&7%LaRhPF(xP_U~?E~2DnM&b;GxNhcv?bi*-N36Z<=Ce-B
z)gs<rt;DTX(rzkoO$XbnoLwX9+9d_i-XYw1sg6jZc_D7-j8YqpD6uX(Qz<*KycP{z
zQM>#&JJXoF7Ij@RWnErAV%^5yGydICe=q9aZTvkgCbW9F367VGTh&5~)j};(Xi<x_
zHB|9(wqGga?MgXajB2r7lh-$Sd!u>%Xx?6v*EeF8@hWMNnic6*Da5fpV_Y`1_NhZE
zt3&EHhg30#)L-RZsdDc(+$&nt_xrAwtFNeMx_?|9m8cf)uO4QldL3p*IE_W{oCsbR
z;X2n;v`CBO-0;O*6v7t8!Wh^AjJLEJX*;GHmcB&>7em}IE85#qROyQ<<>(6^J%QOd
z-<EwDGh(*kJElcqcGh)#r{tCrV>J|;V+<E+(Xhzzi>1nl<GV$_VX#>7L&Y6+YD%i)
zE~w#jN%r3hG{?;il>;Zw^#Z4ck$j~T*cDtaqB-*`cD|-f9<hDL%R7TXoGE(69~W9N
zb-h8uN1kPX%VWWMx;*4N!H%vcRAfDYkE|!~(e(tHt|xF(^#qElC$Q7?gkGwinikem
zTZz<DTdHfV_{I9XTb6^}s}y8$iIK`c-YpF|*@ROn%h^<x$oBo>m<kows4|k&Qin2|
z+2WX&s%|R7hAP%3je&_)(}Aii6Rwx>oq~LcCJgR7*qC$tg6(Ao@}=gCJyP#B_w{xr
z?dIA6BnLv631K#bP6!7>m<!=h2;C6Q3*m4G^C2vR&<kNPgd-uGA3{Hbr4W`wSP9{1
z2**OWAcPA;xF~=LeTP)H68gR=)EEvAy`hJkLMe@A<%^^Ca6*qbwc1d-mr6;RQK$X%
zm{Vw?8Yv1iMF*Q&NCzWGX_F#Dq1n!tlS2zfh8!KN(OHnm+XZ#*I?()zdclfbZDDe*
z;^yVcoXe}%Laj^*R`h!l80DQpu{_R5uLMR($IHseW?-QPr|5QN6*F0ER&x*Th$a}`
z4_(TD{M{LLf<#SKJupbC1t;*<TCf?j4HY#on)RSf%L_IjzoOin*WA??S2s_}M7EgE
z+rC=SJ?rXAl_bBsYPZ}S%ok<nC5kO{lt_p1l#ABnrkq4d$RQ-fL_L4hwi-QJ%BiFF
z<-k$<de$hQ$BZ&i6GlakP_%jsMXRSqQLbo;R!>M#?p7&UJ({A`6Qw9!v?ezdMJW_T
ztEWm)ZflB4DvEMnQIz|Jq6CJbG|&`f^eDw@7p<U+R<(;(q>EP2May*28rMau+C|HB
z(K21MYF)IdU9_rQv`iPRS{JQa7p-a+WjY;C^7JRFh#IJv3M5Tb1rs{1K`OGgQ?a$3
ziLRlEuMKqujdYHzS1jlp8mJr!RC6e3au}p?Xgifd+nF31njG3t=TNA=P2J#0k?&)D
zqub0-kgzfQL{@53+hUi$zC#D-7$2a%QyX_KZoHd*_Uatw!_Po7yOc}s;x4wfu+0F}
zFz}mXFGkxo(@w&)9gI7vrK<nI7^9%Jg#L)qRfeBa#@>9ynXO<7Yd(6hX?QW3jl<)t
z(sn^ACHW(#H+?7Pmdr$wYF&4KSC^R9`#<#$?=b)X00001|Nj62c-kGyy9t0m00hyQ
z!$hzxt;`cN(*isj^|KfZykHlBAx){!BX@duDdLP)YrMF|n|pkC#?2OAWz4?&-+YWF
z3Wopyc-oy<Yj9Q76<*&u_eDr<o`euWh!9aR2IUdtm5_%B2#KbMKovnS7zj6*1Q1YA
zm^!Umwf<nHjH8G`6{)q>($-p^fUUKbQcD$LMAV4LGh$Fw=(qPhz&)2RWtcs8t+UVF
zkM*tB*=q|#BtcW0=R_+;jhi6hy6H_387n@%mlG$X8yQ5!;TyjsN|J;nSyCib(j;9n
zq>E%qSIOeIZ0RmJ(nE6PVhNN^xhhYlm6uM)lU3!_r0<Qd8kdJ~b=CMhjGj<^O&*q?
z_xfgDwr5`8yk`c_duHgoXLdU8nF;4Tv-3I5>^XgUU6Z^#V|wGQvT0_dey+Sz(=dI8
zY^$rCHC=YpMdr_yU3K*{>ZH}ueU`Ra`i-T>4TX;b8<0>>hLrk-nGs~xH$>(lcb<8Z
z-^g9ix3M--gUcHmFTVmsr2R3RbO6do2VykoAXJhTVFKx3Od-7z(;DZ`YeY>`ZBrfU
zn#^hqi*IeH#~sA07PH~$#Acquwr9|rUQbKYEp;pnS?aUYZ)w2NpruKcrr9+*QTtJi
z8rsFuu9l|AX#0K?X_i!wc9SyFY#B+~U5ZI_WH@OL8A_UKXC=q1kYQ<RRCthpyMPjc
zl7Vu8QXwe4xJRW-l&Ml95m_Kh<z9JMR>>M!FE7YT@`k)E+hm9Amc7y@$Dl|+8nV#~
zebFC7QHHUob~nk0YQSlVqEDO_eV;Vj<q?-Rxcm;6FSQ!dq~%FZyHA^v_C(hRYjjNb
z+Nc)8?i%4oT)xWXYoa_k+vSs7exu8`MtMq}%iVb?hoU^S%;m4Se7nncxxC%w$D%wf
z#pPvDInzeDe4_ilNfgEMsFvYx_&_hzzFMG#+7JK1cD#%y@f6l#9e#zU@eH2Dukjpy
zgXi&Eynx@~Mf@Hc@dx}7f5J=nGyaSB@iyMTyIPJn@fU2vKk;|0)`2=mi*&GFsl#-L
z4%HFbM=#Qg^%A{QFVm5Fx%Ss9bU0qYtJs9Muo<so3;v3&_!r*6Kjd+_iq^lHzBY#W
z`5GB7RdTIdC)M&JnIPBGD{hcUGFhg`kL5<WNy?=Oqi{9GNv+glG%Y_KV^B$Ny+xMc
zR@6wHEWsp9mWA}tk@Tr)(p&mUv$V)AdeCKZL<*%{2Ff7%P$vClwLC#jds3c~*X2!F
zixIL}jxsJH^!+QyJ5iS@Vszb`O}SQI`q*V$#b;KbPZYC-xYtOIEoVz0rfV3T<Jr=P
zXDVZJnw8@gwtPxnD;HAEI_bk*>g6J7V!MPAFXY-w*e;c2Yz5TLTJH2Z+d#_pCU@J+
zRzx(-GMI>3<VvF2B}0g8H>2<f+c2U#D#M8`O^T60geAn8DI+n0*h;Cru~LR{)Y;Wm
zPh+jt#$h#9OC`PH8L6T-JS!9F5wFS(wAVJ7O`rKd?xYX(mwRaQ5%LgiJ5qkBWm?Wi
zMW{v|KrZ^A5Jf0P1#Uzg?!*Il6dUMk@1Pm`(1v3w8qyTa(mZ;`NWE4k={&t#AJ*0S
zyuPMeb-Om}Zr!VGPJ)x|^mT?hW1T6^Y-h1^pR>wY?W}V)I4?RcJDZ%hovqIMPK(p(
z9B|rwVPB>%*Vo5a=qvIS`$qYu`WE=^^{w=+^KJBP@oo3D`r7>gf7qYt&-M557y66*
z#r}!@h<~a7LH}d^=lrku-}Sfn5BQG<0)cQKGmsnT6DSN61u6qIfdzqk11kgT0viKc
z0^0+vf%afHm>Vn%76&VXQ-hJ<(%^%^$ATM!TY}qzt-<zCAe0&E6DkUg3RQ+ChNg;x
zo!E~P<R9XoGDqXzxCag7?_oI_8Kp~6FP-rTzSf|2*HrAlZXD47nsA#0@hRG=wH!^u
zd|AZ)XE>^zw1=i+fi$q+if=SQb2S4CrIG#5@vU~&p4tU>pqBkT)O#W|o{2@6&Hfko
zPLuQk?TW>i!~R};uVL+_Sy+NP_P@jrnykIG8!b4O{e3u2o8@aZ?gFC%cjI<(bO6?9
zF?&y7J$ohCpru6Af<wx$Gd{v$b;v))S8C29T|80;CDS8yP%=Cy9qdAz`WQp$9chK*
zyT+nqKPwg```uzuvY#D`lKt+nDA~`6Mad`+V=1w%#4<kT;ciBJXJa+;L}RtHNOqeS
ziLq8Ja$~Jn<i=VaB(-r!X2&6!6NjWO4$0g&BoT|G-XfW2k=*VgX>gG=QrFEmzz?%x
znH@9E*i$NWfUz!nPq0_1CC0j(d5=5O_^nq5r#;q@fa~uo?8**($ojp^h<b<2biHGk
zwX!2M)=T1bdU8GUzQf3%u04@KU3(&fy7oi{b?u1^>e>?-)U_uvsB2GTP}iQwpsr&h
z!{FZO;%;_vf9T?FadCg-;@;)r{<s6&yJK*Fau(d5#^L@f4tHxD?$6_J?}@|xMI7$E
zak#&X!@che-20=raUhBt2cx)gD2f}0qqxx)#f`5zilNiE`MyKkw73U1E$+chi+ga>
z;vU?zxCb{a?!irqdvMd@9^AC}N!&5=cPJ+<<dKsW^2kXGdE}&pJaW=P9yw_tkDRoS
zM^0MEBPT5sCuize<V=f`Gd)huj5s;F#L1Z%Cui3<IkV#A>=q~INk6Kv-xQmDu*T$_
z=vT$$A8cSY>dMoWsbNgz!_3C!<Jl^QHBKH|GOLsdp47&%rLv-^<mqdM%;bm~wk|}}
z$ogp!TNXWW7^S@pD=6bitdt^t$JWSTtY`Kc!ZXVT8OkjAo(#hd&6g3(h6CiMTC64V
zGcBb|_wzj1PASa2K!2W8Yh<20!ZYL+d7me-eWv=t1C;Rs`}7c>N-1jsrOPDh``Ax0
zlqWDlCtJFbZ&~x>=j4-dznx=dKWzFjvma!?#QtAkX_cincQE_(oL{h?X8$X&w93+(
z&$8ob$<KUB<cevmISZtOqpK*{&E_0Q=~-psdQwpTanC&IvX(>+dYsuiHO{dWX@;2k
zDOw}t*?+1mUFbfaZB)OQQT;dyc0`(6J6~XH+5W66)Yi&5B4-(sPairx2J|AO77Jo@
z`4h8}rPY=$wshV(jDW2vt|QIiw{(`KYMQ2NhIY|R?aEVeH_f(tr=5~7$0HyA<D6`(
z0mUrL;zM`(C#)Wid*lviD5kHhqAo!L8d1;4Uu0qdwU~`LJg3h^1h->NTt&E^RltV-
zQx(p${u8~2Fwv-XH^)X}67_f!Pah__F1C72=ILQM&$>;Rj|EuB9I}XcVhMA>T|84R
zv$qFkt#F6;IC-vzy=Bp+bHz%@=Q-mbzD7Ha;v0O6WB3l=;|CnaAsoh6tT+zvn{vV^
zOI029sb2%kgCXX)1m>|s=BhCBQ3_WJy1B(5P@6XrZQcmmT#?Lg+X}|)4(wxYv3paN
z6`aA5{J#b}I+B{-#b$mBTloFk#c$qj=HXA7V_TU=_b^xPWj@?ztc3lPL0n8bIirJd
zc9oC0PBYgzH%y^(#I!?FsmbH?v~x$cpSnG0_1s2HAL+;n)=PI1p-|owyLutNIn1l(
zM#A1hMDG>eJ$awN>~!*G;E=sR>TL5(?^Ct>Ev%XsvO-?Q+W4@|JFH%LMpb%SPgbL+
zZaJ8-OSJr4?<bhqOYKcsCsyF5wl|f11$7aLxgS_-ZwNM@x=T1>Ds9%;8LY2IFn-Jz
zDn<O1!QI2&zMZ~%FnL5N-=#JWn45^`_yS65WGS`d3%RRVcZ2ozW7gXTx+D7$k(Jnv
z93+wG?)*1b5{dXsv_xiecEy=EjLbGq46%E3vYE!*9hz+aIM*Cw-;c3(dq(yQd#7lu
zy3jtIaG#X<wu-bDBX^E0Ha}*i9G=T^dG^ZV`KlMsQ2F-WGM_oPLaIB;eE$QkA=FF&
zc-rM$349jC6@Rng3Mv>b1rY+GAV|{$3=vQSfnpK_feJ!J!K0Vb{#vwJ4=%3?R$3HP
zL@IJrQ$$<k&`OX~5CowJ2*@Q7!Vy9OfslN!|9N|S`<?j`77Xpq@9j4`GduI<&AaB!
zCZvd{CJmtBWOVPDIe=<CIBetyYD85~PRyk1TT!*HgL@=Wt6RDb(D#1&-n&mG?*01o
z#(hA)4BVae>eu)GZUoiPIe{u<;Mbs<#<Qf1=F)c?x`+NsuhI-!LSG~2PfKVA`Bb9%
zk$OVCX_l!aX!)vnrx|J`+AKji-c@VW*J?Lf994y?7{gplEqD}-28;oW1&jkc4R{8y
z1h5paoJXn7fJw+Js*1az?(%)AhWfIpI?d$Sl*RMtAJmQBqaHM$-=%-^4kHb}RZ;r{
zYM(~wNR+;a(udJUZ>ozKci{QdnJ3URo}dzWzDmJwdq8*O??Ab3k%bmx(PAuGWTC}a
zv>1yPS!gkq;-~}lP>F!<7`ZMWl`;UCfZG6l0CNG00s8^p1M&a`fFi(Yz!^X(fGJhI
zMX5#?z|DBpqtC+VBQg3&j6MsakHqLBG5RcwK2lobpv8E!7>^b?XfYlw#-l|JT8zg`
z=K&Xe|0@|rYi?+?;f9jC3c0H&&S*?kjHbK}>)f1_`Z?9ncP^3pC(a1tFv2)%gmD;Q
zoHfEY^xXzjZb3<)L}zg3Xc|LfX&gOG&(JiQNm*Evc{HE?4IWrZ%V|BGqGHU~rwClr
zOr@yys<Y~@?ofBBq3Y*ql2ONKU|epbk<n+c=DnWj=^N>Ox)WU3fZ}*Gzt6kb$A6%B
zs`MAn<1hI|UdX$6DnEwj75o|>=XZH$rNualSMoG|hu8BXkQ@RB>e5;K85i&gE~tbU
zpQQh>i{HEeaehswN`+A_bj7dv4d{vioF^r_0ENJF7Qcnu2)+;ZJl=!nG5lL;@hu<W
zP5c;N!!PhYehBa8@pHU|XY&qdoz;+zZM+IKGx=Y9fRB5MF9Uq&zmS*ld_Ke5Ioq6v
ztNsKZvYv`fzGt8Hyu;rQv^Q~)uHjRBLdx>FNPdf`K5zC6<6gYh%I)N%ydPTQH^}b?
ztxADKDZe3guL5fhc&{{g-ms(OpN*y~@Ha93mRj?B9&^U$!U_M3Q0rg^90D<29^(KB
zT<jsX>$wDcp;vPQ?-m~UQp%_ET%L~K)tbA(H`~DPi+P#Ut;8BE<*%$BcJm?LkKd1Y
z5p2<R9?JuH6`nWo$4K9xNs9E(o*-Nc9DFU`z|W({1|}tBMNjgxkj62{JubG8^?1Hz
zKA|e!ISuK{^!=8H;i;{Z-2<2-HJkV{Na8K9oijvc^GF4*%~?_S75*oXIfC_G$y<Tv
zB>ojj_rls~-?s`M&|JZPv}7;d^0s{zw^}w)OC5Z3^4IYhtJIXdmhhIm<l_5yDE~>*
z%GLo=`ZBcHbNKDaJp=W#Evcr>bhOHYpyo$TE3G+B^I!a0$6P)B9{Oezpb)T-*YTg=
zBOJg}9v_Yo-AiPRx1%Q?FABh{2)&rH?&`~?oAtCZXzoQ3p6h!`;iH_!$yoOiuFl^}
z$p+1J{3g#7-)IOA3VP#7Scqf1!lLnhzTGO{2%qmESe(JgLn=XsDM-gX)@vD@1U}A(
zzTJwkKjnL&|Bw4e;WWAT48s+^kiI_j`&H1v&=s;fv`e1x2;(l?(aPn352ipbo#f5P
z?XyagB4Ye?NMCb!kCTUPhYi&_Zyzw%CBH8dmkRi{;a5;B^%3~X1-2cqb(O|Qeou>z
z$g|q!BA?^8(zu#<%o#<X>UXdZpNf6n;MiSj?fIb7GKdq*wq;2kq_q*R@eJE;e1oY;
z1-B`%Yu952C-@WiUW)-Kmj3$}ABG+(wrtEsNM5erigPx6pKD<2O0f>7xHTv8G?Y)(
zo)T>8Y|7*w$gM2{mk+d-lZZ&PR>z<<bD<Y^@eF=PY_hgf%iMbu;Bnftd4awL)_$j-
zNBC4YAIWK-?-`9p^AP_E^3(8?Q=#E=csV?W4e)q-2}cg)$>5rIz&qbb+mAv0O^)rz
zgN$ivPJl<XnZJSEe48iYc`~m>TEZVtnwDMuqzqi<hw@pNR)52q`JWcSmv{ntv<PdN
z&j$hHMV?;Z1>o@YC^;(a{)622HrJx{=UUGBA6Tgas9A&gWNQpD^BmC?owRP_EoI=M
zX|p#5Du0a;3xvWs7|&<xEuIG~=Lw(WNUN><DD3KLse7Nlzz$%csgFR%ef&9omtY4z
z7dm|m_tEqOw=YK8iY6^$)m))kKBPrD*Yaya?uwmL15o-PDE%5di`V#4nNccey#i(H
zWPC!aM}YNu>&?CVFwdnp{w4gXsqi_IfpJgi`$MEL{3x~KdUzgH1}=XDWXCY8V%X;*
z+>2oA^0Y26wKBZk0`ZrNED1dh`fV^R3%KPBxMH8VFVwT;W7c{dLvQbbqw~aHS&dYP
zik9Aan=;N!o(TQ)757DckL}~YX5^X@Zc1A?yTmU?Ur$h>B$D><0OJMROM5R?*($;K
zuxNrEk!%FN5{PS1ZIQXt^K!=|-pk)zPX{?Gz+T7mLQ0_8*pF-$>ejOTcDZU$HLErJ
zck1kD<n7>>!%}LvHCMT>_$blBjasWj+9$Ynra?P3emm0cI^?SAA(i(+<7bNnn5cKu
zes2KsR3g6DW{C~tKyPia^w|pNLB0E)?)HfIODjS%6|hd^5PLjRgI5r@FglTM=T@$#
z37jq?=Ys0rVRd%}wcg{`@Z!-|3#gsW+nl_%^|Q4VheR)<{!+Fs1|0W9^Q`2mEgs10
zycEB~1EZdx@kycao`{n7l31K0lHYe8BX83zU7@x9HcJ9mfzG+wbHKW8^Y8B57{e2K
z$@D9nXkCc6DZ1i#EVe9WY+vFBU`gTCU`=O3|BIIa8(buk8qaTPdDqrRt}6EK-}Vm!
zB3A{bZqREY5>R5Ers*gg&+(YXuRyBSaHb<e#o*$6;Gb`Dh2CR?q49AZZ`wl#&#*N1
zm?PeT4p;@xG9MJ40X+SY;sj7R0a9bYHGUc1j`o*0P)FKvH&g3@la<ZUCO_d>S@iy_
zTv|BF2@?F^4d99m;N15>>%G=F$bN?_Hd*H)>-4!u=&m8iTU1UIELXt9xIp&R723~*
zE!_#3%ho-@pWiNiOHh09YO=8wpJ84igW#Ydt!G8^vPD&fFJfxzsh0P-Mf9=9r$786
zFkXSa^T87{z#YL{@qv~#e$M0y=-&jZ)|9bN0_X0JPw3q&=48^i$Ueg=FIPm;Fgynu
z8T$i%EZCC?X?fbBqP^3e62QmBR_z+cV=eIhd`&Ds32g2meSU%bA-&V``w!NsLvDn(
z{}ba*;tGER!MoFtz|rJH!RMK0+uB29b!_u9{yX+MOL?*j?=8@DyRp;sL4O>LWxlpf
z3(&^7q9=TjqD>X!3efTxc9~nD;hvQJkk1`+Ez7#vK5>N0I0rsOJ}}<M^Pvmoa9`xV
zmFRk*#Tz~yqm24~X$;gajcu2F-mkbQbuB&ggie4@x57?quV8`YwVa6QP0hE9VjQNi
zhg?x8(bG-X%P;2l<wPr6blg$5&5QK4h5J-Nd&!|YQ~Ok*Li@bvnCH<2a`9yG4T>bv
zwo~G<rz(nn7%8lNj<CLy@8&=AB7H(*N2Xl0L-Z+QG@Yiu4e<MK*lis+=X5Rw-<}AK
zD>{4}QO<+U;3A%mHTUR*SNECX>qq+gy^Hw}?xfFk!?b#!67lilLC-IQ>XOi}iLfdG
zB@z>gb`6&OmnS+oB+9c-pW3_pNz-cO#?Vzll)84>!}o~BU46$uu{`LCwXh|-_#uf=
z6#45-*^JeuxV5DdtJR)Lsyn`SRu~_XSo%`fy^nPC0Y1?gu^>BT9A5=A+PUWA#n{`O
z!ft6l_8|-H-LXF!RS7LfDX80tf5s1kFKS!f=TfP0zEO$r=2zCfXeGCk+(f*)#vMPy
zt{~`)06W_}-HOjhEOitp^}3wy6!SJ$OvFbm&UWo$@yDZcP$ciF4FCFqx}s4T>%Tyv
zELpCyHCU^I03UDWqv8FGK&pzQ2HU&>$8MH*I-3u$2gz~81Aq9dffru%S@v)wLiy3k
z$#>Cez2z5oOsecXZq(W^o`;-v9{vGoTuA@tSEO@G@q143H++B>>S!?UmTx^uyq65G
zqV+lk1g*IWns=`3_;$!wN{%Jsk3GZqv`76+<pIA1K>8EhnkT_xJjTiLHAN|CzEYyr
z#{nD4)!Vn>p7j?~9&*cl{01lT+n{nE{cRv;iMRPo#ZKpf{SWWH><+pzDUCW&BDJ%g
z8^sjEF~7we?7S83s!;)KlBs3X`r7i%xp`*#Qiz}6tE7s=o0#e4(e`=gK^sni*7(l;
zJ|yP1)(7e{^Vz%a3Cp-Hp(;9pUk-drLL#zpQDd|}w2eAdK~JcllFp~}Lc__!zg6fT
z_}4IIMCgCOj~Wm|qxiCW;6jQ0FR;!A3SIG|AZ|X}2s}S^*1P{nHg5>d9|ro<f^*ni
z!-aEp;P#V|_Q<_B_HX?>h_D>-N+S6wzMrnPJnlFy;ph0I{nvP|Rzt(Qc_^5F?Y{%C
z_nY!JShj~U(ag!;9xmkN+NTwKFOj&}5!}x>);`Ylw*_G%)4UNq=y=8J;bZ@yba46$
z@b{UmFNRhCr_<*1x!Ebpw>N@ux!()gp_mxEpU(lt@--L@r2f={I$O^zC^d#RFAFKT
z*tOd-Wu%Vvmms6cfl+VjNWIR-uCffttAsJk=sV9!yEnL?e5do}37t2tD5d|aE9BJi
z3+t=&QRS7Ia{NDlM(25sF?djAXt!;V^``gV&&C$zjXtZ$yYdUspNx%ntxHjy(N+HP
zp`TM`=5CPve=op58cuy_C=H=os4Lw8dwwHIhS4x5deV`qQERGB$<&5w;GTq(Mm6ao
z$tBapREw^sx>OIP4Pf0br-s7Uot-h8QFFS2GO00L3A^45xeRKGdo!tNj<K$S?=T3z
zSJO4rl3LNV&bv1U%_$ks*80`gJ#-iD!^r=&*pIB=+Q8eN+F%B4tdwM>WC1(rKGUq!
zkm}QQf}folV+M__lu7B5x>)#|iDV{bYK43&jM~hB>UiG`$&?7l1U8LBAQ@D0LlWLM
zA>9R;fMLKj1CWmOXo?ld6!<avz6k!%MRc3%T@4xNuek$ytm{F08|q>e+)$4OQwO>e
z{SONZmtnOUVxD@vuXTWAzUDldTm1}*;0a#ifbORk(xsFDt~BpveDD%kalNYd!PnH+
zPw6IdeWxUO%?IIYZN5pRl(1M-qolCqR|5A;j|KHsKzr&*KM}YUsY*b7CmLRXUhhS^
zo$jWeQFrPF86E%`?i16S;V2ibEZ#|JBKtK#&pK8b7B&(1v8m{wWJ?b<0#3GU*0*w3
z0qTKQ>Vf}yK%RO-3w45a>H%GphFNq#GOwoKqj>Od6F`RZtE?yUS;Ixp1NwirRmHki
z*I#IXx9qD1<fN^nRsb!*rX=f8+FFnV=}Cb`t1VpUj~)Lch;mJ!=Ngm$FV+Ww?j+c@
zk>`fsAM;9ZQ7;~pYvSPSPEDMo`?PgRb=2Gnyxpm-liCCK_DC%ScROimNwLzUXmKe<
zt>Hiu)Vd)f3WT;zx1hZX^m7OKRnBuT^tIafA+&FQowh7)h{KvR6K#?b7OG;ks$-sd
zz1ulJGT)lkob7(XUHW|+bU)fg)Deqj-c4Ple;doH4uXXB$Ne@~)1SKf8D#N6_*#AG
zbxw@1OV!*R?rH_x(>>Nh*8x(Yt6K|Phjc|i{neKAm+$I{bTc$jci8@p=%E{A_@<cN
z3`e<eWqv6!kTP8QAj2gAZ3CnsU8vVU-f3-}SX4z)B8}R<=#!AzsILlcx)Hjm3sN#>
zaTj=NI8rA43aK|eh;$o`K<Y!kqu+z8A4cj&e?aO_k0TABQ8XENzDo1yAzG+9(gf96
z^-#4{Uv;-?sD`V1)wSw=^?+)lexZJ;+NuZD2$iHpBBiKD)T64MdR#rJQq{BSd3A%D
zq+Z7R)74w*Cbb%=tNKE1RNd4z^^Hnbh03QgjRYe>4K(T+_0=Hba^ng$#JJLEs_r(L
z8#k)qMi=8|^_0=gxJ8ZrFV+3eod5s;0RR910M(=?2mk;80M}?BF#rGn0M~0<T-AA;
Aq5uE@

literal 0
HcmV?d00001

diff --git a/public/font/PilatWide-Bold.woff2 b/public/font/PilatWide-Bold.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..d91e8f17ed077e5bd0208b11ae5ee12d56756c97
GIT binary patch
literal 23940
zcmV)4K+3;&Pew8T0RR9109}Lt4*&oF0a@e#09_;i0RR9100000000000000000000
z0000#Mn+Uk92!m=fu=?ruQmo?0EaFS2nvIPWP+_g3yBT@0X7081Ckg7AO(&)2c#cc
zCn<4+xjBW3f*-OQ_>n4e`&Twf#M}M^w_~lFw~Q4`w|OGa9sDXTWn5<e|No~Y8)Mjk
zd5B_`&i3m;Q)ng&OY!Qct)jL-$64zshQs|FxU4whMu*SZ1Ejm(RF?XoSRzUjCQK*g
z7KGtsWdT)oy}HW$7D`hbkBNzPt8pCD<J+~_ixzN&f+|%@|2yCrZKC8jhKv~3?}x#6
z4n0D*Jl6qTb}TOSO}f)J^_7jG@sdn2f`SPYq$I&(BDpg8;c+j@gGYQO+LT-FH0o7n
z7CZTWXR-)vT*gRNPF_x)|9<Z?*WTy;52TdZji@SvkqDD0pTQ`i;@a~eoxbnxB%Oc^
ztjL72BZt{m7!1DzPI;TVci+1GpCQ<0N0f>JDkw%{1I7$YN*e<eM2tew#;h5|>{-K_
zZss<fE_CU(-(0u*-u{2lUjuno&-=mOh0Ghsl?ItYN`<IO!vFJsFXY+xy)`zIvOFuq
z6|h?6ZZt*_3I{M$>WA;=wku`Ikk7jdD}q=x8|+bVWNr|eNhUNR-r8NU)OcjXbiwpu
zh@DGkxpa2ZsdVI1=(rH&<6~MR0s0dXlHk&OUAlDX%B3slZ*Y*USg_kYFa-f6P=22P
zz?3ZkOOHn9-%f+={>xav6TQ`k3S-7XQ|7ML1yJh~=e|+^WA3*h?hRJSV%b_D<i-`i
zKmU(^yCU$BBZ=F}+dIf1`-Id?;(!0TvU?>lQ+2KcP9bjy=>?GJQ40Zrk$YJe<)YjA
zf!#mh`E!gxz~+3pX-D$OW++i*Dl60%o^d>cv22)WpQ*usFm*_(O_lq4_P6kS%<b<@
z4C|sH617#D=V|D4TH-pi3Fe_Pa}H*nQd0X7l>^XaDaic#|KD`I?OYy1{Are-631s8
zGL9`#c-e?Em2;>x_eqT2Jk1Ia8_>WemVXwstU+vIabPq^e<Z@D<dBp25%`h)&S694
zUo;Lm);=!XY55K7kg5<%ms|R{j78_Ncj>BhQM>8P!`n^&gWI|#1;$4$XbUXhBoJ&Z
zkiay+A`1v3YVq{$K%#a_;qB9<5JN3UFv1Me52y7~`?pjY#!Cexh~K`kq+8j#{iPR}
z=Fxa`vVGo^-T?~?#i95osIvHvQ<F_eaR(X;9xI{Wp~!kq@oy~WoS|IT8ptVfiVn~c
zHVH1mM?2q~eHN%6QGL1Zt1sjs8h1iY+l9Pjy3M9(`H-`m_OLujv)P$sI!8e1VgCVR
z|FI-+#Ls_qEc8i~3Q%Zueyr)o8(Oe@1A{><9dq2hw%gwKzs`8?$v#r9C6rK#9D;}|
zVGxl)29YpG_wl(FGFOhJVg5U%`UpalR`Rvyyp1elX7$EgAd0MT5+}6(KQfnJuH3ez
zYpC@gAqjJ4tf&9~HA8?ukBkQ3=r^-#fTQ342_WDE@D!jF#Ags+{2vV<zXnO8#-M4^
z8YFGHgQkZfNXCo>&G@)M2%sR~I9HNDpZJJgf$9%mR2s<Oz$OB&fqeAyJ^>bwZ(S`Z
z7t)KTRC?|7m-NQPR1IA|-+$vYpcCUcoGzbFwM{{492{IPL61R`PP?b)ar&n{@m~y4
zRZ@Hx;u!=!F}OMxtZ*9RE-Ml`jv@0WINu9!g3?x_meZ(Cy#_lqI_+$n%ehDI1VWU@
zK@<Cbytx09Q2yO&&2McMuq@$P+Zt_bmd$zQATB)UUL3gL<Juw+$JC)MY-`-N4tur_
z8BSI9IY*p`Dqi#IJu|Ofy{6_F*n}HH4o;@tItdhnC&Z$Ye)5aIeDK9LfBQH7uQHMA
z72f4!(+b@%tx%zw{s#J4yZ3(9t{pgk58^*T&t(s2tsd=K%kpBf%>=Bv!E5kb-LQ;7
zk`@8$CpR#YYe>&Eqz2D_yfq<|&^U7!p;n!G4R&g@$6oW69I$4?X=j~t-B;iJ>%RbU
z2_yC#x#NfuD^8l;5k{QWT!Oy*IlzHA{ON6-%9p*Hwy;mMb0FOA5c?+5M&=_LyCQd^
zUxB1X)^3|L8Bn5u+$|5HCiq<NK@d=IC!pP~RcW_T!Oyb@zEK1{ab7XP4zUz_zzWo;
zh)YgHj8l!LuB6yRsNFTnJ8l;dVqVj$W#J&y#0cP4t&3l>+b(1fj9|Sevdp+Scy`@=
z4Tz9qWT2}^*eoeR{DB=dN<nZ!0;cqT3}@D6o2(&uC9;b0YH&HG*#bv0FFt<Md<Zfo
z7I%Pzk(x=3BuO{f+q|vowyNki$O3yOSQA?xjO1qM%iiQyXM#GA%ONUhC^-1RW$RF7
zT9k!QER23vJi*bMGQdJWnJNw;-snL`WA@B$K&UZ9(3BohZ*j6e&TlDfthwIAzcSU_
zQ>a&pJ&pVB21)*V*OvlIv)QmKj>g1LjzryIVzvLoESFT7d_ahmcxEs8sT1je8DN0=
z?p(M)Et=>L+&!UGvldm4S=A3S<zP-du9ZD-H{CDI)t{RXCmiy&Olu=d?hiFyZ)cTN
z(p=f3u70Ts$`iXFrYH1QkoGk`SLNFA$xt)EiD;zWD&YrzCx#;ezF6P4*UX1NPc@h~
z*5;-(6UiNHKn?GS`?Ipijwou5sqV@7g)hwqculDb#iL`tJ;BRA)FiIIybWGk%}^?h
zF1lo2C}UZk|Jh0Q<Ktw#$w(iBffw6xDajME%uzXE`if7av2~AB*Txp=a+A-?nk+W&
zl?a5%vl~h)yl&VylgSpYJF1QoIypt|3^z5D=z7%0+KrR!;&l;_kCW*qNQUl#bjAvI
z7z<7|utOhksv|JD7%h*+K0lknM%F!3z?uaZ7GcvJFyuO~=<6QK%uS^=RGueh!XTIc
z9M-2vU)wHWB{Ge>y=-y8`VIn)3+bxQ;2<gE3{etAEFo9h3s!~%YIF$P6x0#Kr3FdZ
zRch$RP#M#EJ*kFY$0vs%<bch}kF}%@E$mHRB9D|O_E+yM?1l4YQ3Lg{P|#Zgj6?os
z)WE}&!T?bB4I_q9$e}(Mq-FA5l`ko0691mU)6qRw1(SxC!m&sKwk}ue3`JM$0W*wT
zLV)@ER%(8S%DZ)%_R$ngp67$LK%zlVG_&&`CK3T~g9-E~6L*^XzYP7Y2!^Wz9Sl_5
z7LXtD&8-P|s7yJ+!GOgEchDA@$!#arOQ4;Ta2pIBz7}jxZN_9e<M_vmAzg?To*jwV
zYMoz&a7at-@GrW62MYXP{(Cmfv%J^8<<hfR1+BNVlSl2G%S|oKvwkYlW2((orDfgz
zJ>{u8-Tv?3F^#~z)FmS9BqIltv2&7QDI@NI*8`C%PAq=W+Css76<RUN$1RqrUwjvI
z9pp6nz@s{t(EnM1({;Qb=c?KlTuNKQnQ^^7BG}v;#nY2E-j7-$yZew6j#HnkM72gV
z6M%<Bz;1zpnC&M`E02afws<Z}=E22Y?`#{;)T>WxHmy@xU(ptJ>m|pTh8g=iWPOif
z95izaANaaDn$p)<rSNH|;)>^&((+{TRYg+w@iGZ5F5hw22l0h{5b%Q-Xt-&0fmRTk
zUdjUf{9)@T8-`|*sWVW-r7g%}{zejwr5wt(8WZhUeBG&`K`I_*Lgql5Q{3q=A3Nna
zs*G{?%BW=xrQTjo1`*;!oRfh0TOK}cS0O<h>i`8o%iA|+(@CEZ5K&6@kL*k(G6Ac=
zC?x<v61<*9xnmJNt4dusIJmTASaLwiXQyxmnl8%JimP3NVpxZ;zO;6tXIa&RrMabc
zs5$_t=4^n>@D(W_TUebjmv`l#*hDt8PumQSggCnxv0-VGlk}d%i{VTvNT31;V3BCH
zuH;dPM_Q#gb#F~NB%{&}$qs35Gm$LTvwLx=sYs~@jxWH4&6>|!K!L-{2ec~Tnt}Md
zjL_9Hkrb&3RWuEX-jv-<Rty5<5OriSfg&5E;!=<DJ1~Pov8j~HB_O^)`z=QV6BS*Z
zENBDi5^B9@@Z@?aPNvCELLXW6(@UuI@hyzF;*J(xpU~c^WEjgdM_CI5^e6!4=o+=T
ztu%%ww}U?J4l&__^mGAr(w#0ZGi5wJ(Xcv>pyH~R=awA5(Cnf*$)+HqP8|9Yj2sBf
zB|_UTchcDPB2S{zgz-TPwd3Uu-u^}K)$1Yf|NT8l&%?ov;2LArLCTp~h_xVM{z;-0
zVhPVdTrUHKhmqh&R4$1dE#)b*;i*j)5}j2jB<gILxJ_AafDyU$$7cGDgN^iKva!TY
z=E!)t9)bo(xEKJOL3QaCsiB<R4D?{yAAtN|<+QV!4@Y}4=gM15wBK2LXkjr?C{yG*
zU_VnS@as@4+vI;mS9C7F-aG*Eq^Mgr;5eLy53;=u`-E;!$UXPNen;hO9VbS&KV>L?
zRv{j0wz#e_FCsbK9Kw^aUyifn*N1-E!qb8ihB^UH1AZ}_%C66Sx3G5{#=_7z`2Bv6
z%{;(=CHjZ8!ZXheI8ygb6*PTaHNPC=gKNvu#o@EucYuV8-9;!Dvn?Hnz5T>2l(?zG
z>@UGA_2?JZ(Lb{b81(oYy|NKvMX2RJPk8n`aG0f7cy*v%jDI~b2Im52Fy8?;VSXDt
zgM!rODLqA(Cn3my>7ji2&L;xFxfXIhpensuEWj_TqXr+dD4gtUonh2N9-u^5)NPAO
z&RaGfGFp%Qwx<Qg+H<PHVsHB1ECLGf(~6)K6)Pw@R{d@Uv}|EHFwcTHWnT9S;a+xH
zZn;r{+bEHbXZFuvv%)>e#TBz4Md~j!5z){=C!If^;p}g6;BFf!^FjK5#H5(`(R73Z
z9=WDS3Z)+PpM)R)P>Z4<Cf$XmIR-TCrFT9>5aWC&a@W*A2$wRTShFM#oFY-LHuskW
zJNq@b6N(K{1+dxHXp)VW+@r@YA#HH4AKha`&J5h3dmOTP{r+~lqi4$9t6I-X#r%Sw
zUBmnsWTyGhWbXLc9=k1+$1+Ec>c{P7$BQk$0z}z6t3}I+ZjM}okM3g;Yze6$=;ss)
zqEB{T#r*(>3bt$g^$*D0fOgc+*=Rpl_t&T|*QRPm;|NmUr^us-V3zL-rAxY}S3kf5
za|81Sno@?7KK2!LWn4s>aXF8i?8;&L?wvWWp+b{zNDWAzjpMy)uFW)@c)z^pKRXQ2
z^o_HWDnC&(W0BsM?ev@-_EeQ_q|&EV+#d>&B~VipU>t|^F6l>;c9ZauJgdk?$yh>W
znQig`Ox$aI^?FbCfP24Qn1}e=cl*Lci)3=vxQ_a}%xCvGOwtRb+H_;2ez_T>a~X^6
zzCSkoVug=wrJWx8(R$*ji$6#o(8mokbrkGJd$%nsCTx8&N+xbehFerPqs_n^Gj?Oq
z<mHk^f+Zq~7nLtqdQ}aF47Y~Pym+)@%Z*EGh6V=kip*FhY2bWKGG9l>B9#WOiBD&m
z6A`s2E+Hu;4OoSp&nw6XIHtJr0)1J5{NYPhFi=!-XP~U2s-_NwZGsP;=u2;&VIZ>9
z_5;HrJ>({?DRwk}Q9%ZLi?=-`rX?>sGMt=1Purlbf(#T4>S_w|C`rCNmyvwAn;&R$
z%KO|SI`a8@5abRl>R)}2DoYbw?z9}uvHc_t;WB-`0-iH(P7%sSl-|`*4;I{8G`L-E
zLPbjLsI)pqu9y~$E5(NHSd7JAs$qvst1ZNM1_6LBT|I5U*q*uRYwO1Pm;=@xl`}h@
z*CnuHN$2PQG$kTnyB+~%?K}9L9hvC`xb?0W0*pQbo_qCV*R~s1)|^7?qFI0UDFzln
zJ;E0*dLRMWR)Fv&NKQM|)?=?dQv^gcMa|i>;n<E9OZIG8v}VBq006Q|6n(Bfx>lVy
zbfMc)4O93}DW51EP*L2C9&gR9@$_gD(-U-W>)J7`%VaUIn{Hg#L9Q#w5nbul4J?r6
zRw+}T^LKx6m7oQryE5P^+-|P#h@9@_&gz-fs<c&*0Z+Hi*0V<`<nk`Bn0>1-y$AVc
zp~n|?FLA99&I&A8rB#oytC&rYnU)ul-n($QA`539rJLc%)vM;Krm(UYi@#KZ{eg$O
znd=z@fW(5`>->Q`S1#Q-ap4-Q_l^TS@c^*KeaT%=ueYLKSEC_`Y}XcGUR~pN)-uy)
z;MQBV2eAJcaMQV6tCsEAwrCw%7tQ*+&ow|*37}B4CjmVJh==QqX$2E0FQHIT#!v!_
zOH{BXW<%ul?RwTVlmb*4Qm`zECns+RnF67Tq;Mq?U&XGAP-8%(L2I%d_4+XCh&wJd
zNT_()k|eW~O2S$?DO*``&=iW7-CnU$4k}b}(xio}UVYq+nc(S?_+GixWh%=&WU|i3
z{Fk8NhbNf&Gzq6Q9Wm3Jf%qBEL(;tFt$M7n)dm5_6?c~Y1I_dRNCksp(rM@n3B*3^
zY5}|EXy?@#<W$OE+$0HPIOR?jL^TWIw`CypyfI0^^qP@2rNc`{E*+(GR7Yr`1}zp<
z1;79D>njX@YHbSm+c;$Kk7b7NpLJb8!-gqH7ybD)c|+cluPOgk2k=`9T%eR&uM*(C
zop2oxsYMro{&xY*^lu~&5m^2Btxf~_kMG-da)M+pcgaC4$x(jN4)G)>MM%yPb#+m~
zk9Fw-$wScy1X(|E(qw<TckQ6`Z^8yEg6ME_lcUjHoiupx2ogqQA`p>CgcE~@<8u@$
zp(I8UhRyE?_N63_l){qIyrm3J$>A<dVMs1uw^k_%{G$i~0SQ0~kO9a7$POTTfE)k?
zK6s+Uk;qZ3T9YorCe2xP+*w<0d1Tw~-uoUXL<vGbX3UB`29^NfK|rDr3}gy}gPf2M
z1mwhwUCa?>VyRRevb87HzudpnpL^+#&o~K6F())60)p5h4yR5Yd@@-SisIB82cPn;
z_&W8sgHL@={8{`({8jut_3wjEdo$-fz{QVpJ_h7(<xhadv(d6#V%*4C&1Tfm+@-@Z
zWv^*7_StXNyhTe6IOvdND-K(==7^(?Id0v31|kBoEw_p77CEu<Ic~?C<~*0V&2@}<
zj570C%yQPVo%iUopWWP@bjmq^etZK4DJV%u8^gUEfFF)d|Gzv~h)`j|@kNLfML;N;
zNDQ%9Y=!aRD=4Yl_z4iqA1|CFHAy8YOGSjDE8)pooCGGUJn_s6+iZPA^_im`At2Id
z+=NL}_BvzJbUZrm3yhyY`7ji43LJ<c6HpCSU_4ZCvvxpQ=Lv0-H;f%@O7;X&b}Se{
zh&bvJBruUAi76>5Gg-1w<j7^NP$5etN?55-!CH+PHpWb|b;cQvHf`GByz`tq@r1Ky
zo^kQQ3$C_pWBBMJH=ljs9s)w1(V&r6h=_T|gGbEx2#A#+ynG`RT|iPv3d*?gc$qR=
zNaoEKl|`o#<P23Axyx8(&1PR+9p}-mde6I|vc_&0<e;RE=%b)=;)z2nOQjB@7Hqh}
zA}pEj1@s^kH?0|tKJSH2xV+V_YvVh((^E`0%UlaCIZ80{u{w+sa6~8Ll%KXUe8$hr
zSvZH!#yNLHM{x|tcEA%o=u(9ful}W6>UFxF*XPFF;@flw?#x}g7q0Gt7oBsE<55T@
zjkM4MN)FY?DWw$-GHgU4)bm+rrH!^Yro>{K{NGwB4yY3p?fNy=(^zrkRGqxiC=H|w
z44r$cT+2qrTh!tJi<NNvn=;<g!rB>=VeL&6pn2i6E^eb#m!;c?N0e0n-qn4K+HzQb
z<J~;QsV|Q+!Ml4-&{zTQ9q-{aNpnR)Al}n^iq=ZRAiS5)H0_m1!FX@q89J+wL-0O+
zvvgObgyMZAbE~gL4MPj$W9!l88Es=Owz2t`SUG<{SO>wNuuh_3;bMf#bMbAtXol}f
z)=@Ylnn*z&1ebscxMT%fssb)u0hg(Ob4H0W^U&66P&uO*tzyT<=sh77XOhKw`aA0~
znyjyPC=4tNDhw_RDGVhTnUXw_6sgWMR?1!Kn)p(XS#Y<FbsU%mPug8SN(><~=ii;J
z4UEKf9w)6oIOl7Pm~pT%?^oDhzG6t2ROvb%SvN%)qGgDcAzp?=8Iom4l_6b*%)}hb
zSxm$yVkR!crMN0;oqsdQ$yPh<b<j~KopsUG_Hx1vFZ>81yok2=;U9{7@hG0ft9Tcm
z;#>TVBv`0limDR;0T2KI5C8!X00FQ-Fp&^m1gT3ynj(rMEogVE$|1hnPpI&Om<;CR
z?z;cYwh&YT5(mfAQ6`fhLKi}gAvL==aDoKE<KZDlmO`C`geI8+L}kio#f@9qN!JiL
z0|s)+gvp#UXD-()Scs9^G`Z!`M&wb4In+|mdDU9xn6-oWp9+@+dl4k^^w{fy2e!Qd
zA*3Uy{0nvszXeWZBhpP<Q1&xBLJ~dPKu{7rok88FJ)A~DSN?mD^9>(w8FCu;70stX
zw-HWfIO!}#r-`)nYcx6=fdLy{m_kI0A0a=827-_h83YmBGgTe~jV`@K4H+2*DvAsu
z2LjI=;?(=6=~+Pj4s<y28ew38OS@8C;h+d#`T}7363#P^6HuyF8KIGPpX7r4)8Ajb
zm|F6My`~Q3qzym9)Tc4c5l5QVv_}q#2vaNI;IUHvi6;jXO`5bo&!1@!gcNK2DQ_*!
za=#hPojNKyJiy;3-U9{&hlGYjrd<ZvobAuT!t=O;jYvQ!VPF`~%*Nuil78#93e~HQ
ziH(a-NK8sjNo}MCVbSPJ4M)$hi)=5xk*E_T4$n<DOv`p$&nHTX%!~a)15`A03`{I+
z99#+%DN&{p#Ys4j=TtI?&P|z+tm0*DI=kZB>ZFavgEG=|9$FH9BQuyR3rj0&8(TYj
z2S+Do7gu&Kq~9_jrBdFj6+#oRwFNT@`8Yxr^rtJ1q%o@&hs!ImVxU-6fHJf>VFy;A
z;dbIcn}(#K8bLJ(m!>d7rX|eIMimIY1rg=KJe$cie()q&N>r#Z=AGnFefgP91hvbc
zEQRCgWDfHhTbpQ{=a?#*fzi0u;}_@X-`%tUKE3$P>j>J%OSWP<Y9R73*`1c!5H(Bx
zz(I(*!?{DLXsu=)1m*b{YS_$+24{lN#!JZ;m`=Xyv-f)1*kmcx&&fGi!DDc#)FD&M
zipq5_yE!0T#O%6)5)6Zog&xM>h?6IGX=~BLOken)FY&`ErH+u$0#)BD|N4@z&UB|Y
z{Ta+~Ml+ttOoK3$*y9Kny>o_javLF`zfBnM{C-jMQG$2|dOR8d17Q6a7zkcGPrr0Q
z!I0rU4f@xEBzo7StG=`BY1;_61PtJB(*+<vjs!!%1>k83_=q<ISG9#W^OLArkN=z5
z53`<8=kz-->jMP_MVOr2Jh{AFbxzKL)x9{LKKy$qP~#WIZy3Lwk;<O8kWff1Z)N*m
zaES>^aTOp%kMGsmg&9(x){}Zqo|O%5<jN_`)r$Ry&jb12N~Oa8+p!xT4;KeZgJs68
zmMAv{U-|Qy+fHe@Evsd=-mORL*xIxv&DW6N^e^(8+$Ob2YGPdEyOb|FHQK34xg6o#
z>~qW-%Yv}S?5hOUAEz7<v?L|*&0HL3!2_hu3H%H{blKX3=?6MNE7oj80cYmS&T<EN
z_~LTn%!MlkH}2)snspmCF|n|5bWIjy`@>uQcE*X9AQ5miYSyaTfKe01P1<Y9w0&mn
zH)r0W1xpS%WW}<>)~q`2m~|T^$dfEZdP$0n$&pdBLefSw8EjB~qwOJ4R8Rf&71EGQ
z<$&*~8cDL-ottawm8GI&z|o*ToZV&jf7`LeB`U^|6i($RtD)2+0HKn^#h0R9n>y`U
zbduYpL$5x-Gi=0=cSZ`5n_vC~C@r|ad;w+Kwnc$H6<{3>tlI()d<XFAH2{DY0PF!2
zMG+#3JnVD_>SLj<4XBqnR;x&hOQ>%}v2;APd)yEqv6(gk$mi4o!x2_JN`XbYo%@H#
zVV}g7%sMi>3@j;7c(6csZ-^^_E1rV|S%`{^!z7&N;|P!uV#IhC>yB8Q<5&=rJ6cjL
zhe;X62_x=fq@428-DURjBU(2L4@up-&sesZq~@(``t&RrE0VFJQI^^5;nyD_&w?Eo
zy5snF?Y06D6ECX(TyCx?@re#V!#hx-ycOe^rt2ZYdH>R{?b><nzH{-mrVMbypEE|0
zt+>g_P`nF^smVB-$%~T*7hy01P19Oh<;kWb0C8+HJS}Z_WUO7&%O3kcw{ESU1OEdM
zb>Ebzi#ijq7<Lc*1i;}$4E^Ft`2^6Q3d7cu3eQZMRRRYXj978XTccTfAJY(1Ban~`
zc~z^TNF>#YYcGR5&{PT}B&y9=wtup&P?-c`=v013FG{B1f(s6g_SvfT{k*!*wbsjc
zSkvMu{h7{iRcz5{OKtc<NIYRaHbWa!b}NdW+x|N<8C6{Ni8jSgei%+T?4+vfw#h`B
z0Jv%@a9mlT7b;XpTwT$@)GC%}1?2DS3{7R`zZS`GpHRZlfEP0Qo*gs6!1HxbvV+oq
z7asJY$Mf}raMwl4H=4;xt%?1e6WuJ>ZD^2JCe#B0#3#Aqq+z5f0(i2bio(_M(ucA{
z)l@DQe<z@<4+Gj)o(VnI88fO$!RIJZS}`Jo>(}bnxDNhn_SPvMyz}ny=3JjYeV9iz
z;W$s(qMD^)YgNchH6zkG?IU;CzFzJ-U2dEV;#Fxm**&vJ4HRa7qZPva2@mG|{;x#e
zH$30#HksF6>%@vyr-t`uJs)eqLk#2HYoV5}W??l9dw&5hbny!=7oE}+9XieFAP53E
zRimaM5=cldZUnDp*0`(M8c`M}jczSb2L@9lrNVr|HF?)o?fY7B&27K4xkfun%Dh4A
zT|IxEdV88ot15P6p5e|c<z4Ig<ZFSLYoHRRA6xrgdAX0d;$^SBj;{9Bmp|*7_t+~c
zuPWc`3A);b7yflZtt`u2Wu6Hr7LH!n^CI)(>18Nmgzc4ADCVIeR~!Wmme_$CG`S5}
zsBD&OQCS2Q(mkgHUM`J1oW&f%n1zx?r&<>J6M}0LloFY~t@T3I!-!Cl43YVL`)q*x
zuZKyeB_!IO=|vx7mLIAL(#sJSbi^dYm}~h1$^{xXD0`#%A=A6hPpqi(p9UAoytDIK
zB5k3~!i1LS!h>mpD(Q`ffmyVu3g(sci<L|ngbcgS+30<ZsJ*RLdqrST0tsl=`@!<E
z6HTks=Rn3sr%^~EGdEDU4Igxod#GWZ?TG3UH`q6mALbndt>{CQdaWAQ;L>2^`aBaD
z59in@t+uOI`&9z-gEAtp&zU$vKc&D0D>9tUaZuDCU&*~{CP;L?yFq4L)AEFjx{$n`
zL{#b1IsfUM0dlT$Lpx`yahDs!`xOm5;S(QAJ?s5n$$ZZxMW(sTWfh%o4yBB%n;-Aj
z<30&4?<zcWQPc4Z%*<nmZ0#uVh&r6oI*ok}91It6LhGDz3Z98}1*Jls!>SoUukJCt
z`K-gnrFx$IKX?2&%G!GhAw#X*7xHJZKR8mF*O}!@DecRMQ8hPbkIZ{aprj7VzN05Y
z7+)dRXa+^o2)`DHpx>ae?^E!7YKZ1Jg~U!bc%?@acwb7}sUJx_6I2zCx(=Kz|5W_B
zf3h4=z1AR~0`e(xa1FzYJV1N=<>5l>bAaIH0}rnMpq)5@8+)k+tl4~5oax;fOD|WG
zOu9YvAtE4NfyxB~>_D0yv?N;k{hinC52c3ZT3MA3{z}%a9;WEFLk+?aun)=<<R?2?
z(Yo~c)nTZj1y6t*U&O<OQ{NF-o*VhPaa+Etu+vm#KK-?t1<RP>bHh?pW9Ji9_u+~G
zcFLN>MH^ugJ1)3=`NlmMC}e%nVrA^W?Mq7{DX7jFpWV?-2-}6=#ap-}X4wXoTHZp4
zCZdfxH*yU#cEG4mYI(J?R{e(ZXTNeSbgATd)ng$+O-S5eIa`v~qgWNSwzbb8xPfrS
zTgXE}HSyAK6JIa<+hnV0%?KA|;xE`%L+m)ra08_Y(%e8OL*x^jdSdg{alWuu9`g1J
zyFja55;+%D6;FzVK;q$u*!vY$x^gnK5&#w$3`Mei9G#HDCi2KG#(6U-D%25e$LG@@
zDw3BlinaO`DWj}*Kd1sRzh71u<JDtBG%C)?+N}ZFQ&0T8b+LxV8VQ}Llan@fxDq*B
zb-{L5*6Q37g{LM1*w^`JQYn1N@pXRlK^4G1MQ^3Z^d&_LkKpN-MPs|@vORo1z4LB)
z`AUj!Z3WbO>i)0MYc@?2^<=4_?BiGW3U_vpUdpFkXa}y9guqSpw-@eKkN;~nWvPM7
z0#{!{{z+O^Dr0ZZ&Wid?eJ7Y#Y^v)uKOQtSx3$-WD%7=UN?;qF5HA?fVZ)op5ugaJ
zY~!+U%bTgiPVpNIe*2bEPTkW-Uu}36{_YMiYH0bZm^s-=gIdchL#<i77i@)kXK(Ct
zO~j@c`AD~;2kr~@Dr)jlZDwncUT9-|o&C#gc*ItehCNh(Rl(-)Sq7{CQ{78FcNTrd
z^H^X&GPky|<mB@|T-8jyZk)pNq$jk_^m&h@W8!m=kuP8Mov-DdmoCkRmhvdM=!j%x
zUGO8BqQp(<?zyrT{8*1RDcA{yjYjC=jIJ%PRg-O12E0nswA2F%SWzYXF+;J<!nfMm
zd%}Txib%m4Ne+4*KiC)`ABHi9S)oVmkTBjSlWx6cqOeqG!po>)ni~6*BSGc+nNR9T
zYoTEhKfsyRw)!4P;g;H@;02HN!>!`*Nt_-iH*p8iyWQ0^)$)8+?jmUGn#$AzROhR{
zduZ@s8lov9sZ<3k*rm6DO0C)X#a;!J&WHC^#Ftj7D2-35au|psvCuMHLOcIb4YwpT
zlYjI6j6kEe1PG8k@j8&^<SowwD(I=eEy+?;Y;v2)T1!uPJTg}MLKWtihHajXeMMAT
zc2h{xld~t{hZg&x#_r?5h@lNkline2mnD-{Olz?g2vKYPp%ly!FV9Ca^LHeu9+f&G
z(78yKHykXh?+TJ0h2EzzQLuF2m})8I>=HCvi04aa(T4w2*C@a#B=Z{{Ob41b^vkCK
z-Pr>{RRwj~&zRu>R`r1FLjtBL!w}I=zPg4C9@?b?OEtY&!)Wo)+;|m8R%zog>|n>M
zCW%(eZ;bByK#yYk!kFA$W2vn4mR^ATg(dG2CTx7o!-ORiM9h>+b$!BPTe~S@+?W$M
zA)lWQu0bBx{DpGl!14ADRcp3`x$1U#$C`mEG#%@{Gx~}2R>qBV(^^Zy+7Gpa?V<X(
zHP+GlLMzse&X$Qv_yHp~{|ARMk{^!<a(*$zoZr4h)g^{!&T|=D2!?p=u9K@f(F``8
zy3yE4MSR`m(xF9*v`#m`2AwDiVoBFiLC2}0Pbh@7JBA^C{6(!O7%5GKq-C>_o_R!6
zgFhcA*ng_3Dh_0ki_QY2{Ff{+0vX?gVA61Hd|lb`%n-}h2>IAkt%*Yg?=>}EN6m2D
z*Xa}N3TUk2Vi|cUzK!sf1HpBv^YBq>shH+xdD~9YL~dB>^;N-$na&ImY1}2Wa}iP`
z%FIm<Z5BXFM>&ON?=*ZIeqsu}`M&%_`67vwxI|~8nSRL=6QMaDyI8kl)XOHABejD+
zkLFpdb`nlbWN#Xm$}aa+-}O+7cRy_Cw7}1<AmMtw@3YBKAD4>t81V+XJuIkevh=Rp
zKzrL0l)RxtbeY!_sx&XC4NakTvmtg)b7h*MzlmkI5r+`bqh_s6;d(E2(HG52`c^AB
z)uWSkJPMa>9n<Ph$+(E6t-?MO3DslXO1mPZbGq4*qJZk0`2O$m4^{;s2c}LDH!bl$
zOxv4nW-RLBvUZ$V7#MXEh>_oD$3<53J>pHJDvEmnRbALwa>F5kk~X`g61n(vS5xGx
zvqJDf`_{oYQL{9N8hU$Zw>YcbALxktQ-AcBf4oe<WExclYN!rtnMx2Z=#;ju9pxL)
zI#HEzzC9pf+Eihv=(4U*ViAc-30(kwQqN?jTuk`1SvbBbU4)9y>R0?{G>0(4T*8vN
zY2&0-s0b1U)giR3E$E-Ira9ba|01^WHxF+khZDgQ)g#d;A-)%74_ZPbQmh!F921%J
zQYs!R<`&V~iTN^fz*w8uttMjD=4~-o$Jt3FjoJo#_66rJ6j59(&o;2(8tYBoaMlap
zaqW<q1}(MC%Ka{p^o`EC(a%qS*$T?|j-C}kUG$*2&ve9lSS%!k)C6O(n+_ET;a9!z
zJAuxvvwKkD)4SzL+QcOjEN#{6YPtdCrEMAlX_ZSO^(VBYGHz4r7?Vk?Gd3HXi*B>F
z0Axl{6ZbIZ1u-bt><P)>-Lta1p13U7DU&7i>rsBY7-Obsl!0`rkzrrv(I;tg;Dvv5
z1Al0PmDO$t^Qb?3a!<cHs&k{*jdza^6vgX5PmMexGX19=J0-<?>w~UC(&v#Xe9#i!
zFWmEUj*y*7bJ+{YR~?k6*m`{<?o&vPcFTi^y+0#0e>$SjIMPC7ANueC@<?DRorR;c
zz1aPk6~{P%DzBL$axxn>@PBC@44G?c_4J1FUOA?)`7=7~<2Oz7CL;DUA;%wqUV!d`
zMd(^Gk3GSEdzFq^05}x*fDhUk#n6%m`oRAf^QTem%MLuq@hi~Gh^(@+=rJ!P3>8J5
z?1yd(x7Dnlsm07;NxY<uOOQAq5mSe22ShsdgkzeeB&LPw!XjEb>>ocfbVBu)a;jPt
zto$7p=ZC?(^+|1_vu-@kSe_$D0T=bqUj5M=eW-dTt<P2Tn7yw$#s1Ag8fCX}Oyw-5
zt6CtS(a&R=2!XbD<cBB&RV871v#szlpBhD=MCUSemrOtIRi}MowXaB3?WBNrhtrH2
zRHq*LoJrTKjdgS09`(m{Zg9U-7g-^mWNNSVxhHu~_4jHSci%vFtjYFSx53_yiuM`x
zZExRDJA3&indt7`sq*)6ZFBDgmuj2Oe=?9=X2V>p8I_5jhV_%-ZhQG^+feg8Y~SDq
z{M_d?FM2}jl=&PKn+U&YY)j%%i9Xl$92C`eKi|EO&H4Y7r?%o(UJ+2PCN@(`xG%oU
zYpa!B6DQ`xXcfiFAQbW7Q<H~eHen{lkTvLOV{f$&PKT2g`JA_!2%|M?luu4ra1L`h
znj7{2Hc%_UJ5hl+Sb>-H52bb-voYCS?KP2s?0tXl?yb0s`6Zb}ka2VTvZAI89VA&q
z?Eg&kUc^b7ak;-ZtZ9E?&;Np0Ej;RG{BXgRIDR7fN?*jQD~_}{pwUOpUXZE3VqEx=
ziLvNfz#v3ct6sW#u}xV^ziBW;vi4xIzn4S<oyyC&QOyG3dPPnAa*pQ)g)66i_KQCw
zdfmmaIZsPO_yb#OmN<7gO@t}U^w7M``d({_HeH4X%1ss=kP>JhC>bTe2=L&<L=Mdg
zOIVyD{2u4vt!xC;EY^Qwj<*0!DgZ}>vxs=@L|`dl%zHtB{oa(8dj17u7@-S83J<i<
zz=<hzOAp&xPv~mHgoDYJ10}*g6E^dQNl*KDC)@&)dW5eV1Wl6sIs(pGe$Obr^Gil!
zY(04A_lJ)~VJEz>j6b4$@J0ds`;fhzf$QD<KUcimVP~A(-xOCof0i}$_ZaC<iaZVd
z{if$9cGj+L?99}!<0zA(NB`-3)w8{=tA*<If82ZP9|{$>`#&-GI5GcoejLg@xDpL^
zOn<5c*Ffi=CDi*bV&kVvjg{|@r!Beitern?Qw!C<TW4%3bPg7pdRzJ3{@Lg<9)<W1
zsFV2XrSJag*}LX|$Ch0G125eh9(pMk;YO^U%jsqDE(rlK3DVG-3HibSviHsO@e7+C
z^iLh#4B+Jco?Z|AOn&z^S;a=%M=OmGYMVK3$JN%kvpCj-OSD@|C9`ykx-o29K1EL@
z=3PWOW=%33v@EnJGAvSq@BH#qMSNo9Gar?zTo?bb(bT2~6=P=C*`&;r3ZDb`IL2=A
zTnfEE*KdMjz%WDfb)l8t`M?fN0F?hL{f!khc6@RfV<z!{d>e}Vw#effUMP$+Q{LAE
zwnmYUzN)2Kzg^WRe>d|&@`pyV3DjR>#PVd_y0q6p$!^|(C5H+63;I?`ZBJep%zMro
z=s$Bd@npJ{Rr0|d0t<apgD_+|q{6S>D!guHH1^+$HeraM(wbj*v0Cn%-}(86VQgN<
z;+o;FU59$BmmZT$)-G0YFRac&dtf433Zjx*<w>5V4yH{?&s21TdRE95l@_G&k^yp1
zWv~Lp<EjCt9?LV9=A-#NpH`<<!SQvAMhgL}fsRaTrk^yEuN*q^hScSqdBddXwK&~}
zs7!l$ahDV1^1P7%m_l=C4E&%}m{QmT-xEX>9-daDM4H(mDdYg?A!I!wJyL{D=}O%V
zzq~riN`_-=ZvwT#qj|;@I0X{~Jvh5_1tO))p)~MY05&ZqDqb}%Mwo_86A9x~<3&*|
zc^&I%o$F_CNdkM6U6dW2HbmJ+J&9GPRxbc;?>M#im?%a3`B*gl=|)G}16O)W3&mkv
zGW)H`DBE*rR3bx!2E>G^!{_`F!dCGpVYnkkIb(l=x1NWpcZMEZ<GR3nEo{$B&96~u
zW`?Tvl5eUr<`2w~jy!6GI0I{lFc<3);U2NZSS3e~s9Y5xM~ze4;@Bc0fRcPNS;Zr2
z@+xBu*gkn!AzO`$I<8Vy9qz@EB15$>FJ3aV%-ATUm}ZPBPZ3Wd`y!fAN|`Yfe9<^B
zJ%3Gl?VR-7btzbrea#H0$MB|(CDXNn0sW<6qapZfZE6i9CMS_r3=_c?#^Kal|0-j3
zuK$$7+5LTMmg+%kgD_0yC~IR4jRF&3(FIr5H)fnru=d5fDd4ZB=ChSGsd?=hC$%3;
zm?5l#Oyb0$`j_T3WYgjv)9JC~H03yPN-^%4-XlKCfdCdT)*}a!)ns!gVvOP>5f)UW
zxt-^Orduw5nm+vB#W*HBT<^#%F;kJyWyCp%@^WDxLvt`*!GW0E@pLdfwRhj%yH6V3
zJ`W_-C$*wQWF$C@aqQn0kI$Mr5~U|h;nSU!7-6=V;X*ClL9^kk=KHvQRA-t_;%Hl5
zk<tgSjIkG%=n4HT>k=GKjrAO$^zVr!Ce2^Zb{FJ@`exu!X8xyVS|xe7-{b4k!fc(C
zcZAcfgwu8???`I`-)N(>J9D;ZLem2<hhgm5pIn3nZ8e(ce9Z#n5hlg^2vU|uMAvGz
zVT$%Ae>qg)YG;PD^*1=}Z(xfwvs0$t38m~nP>-=o*~h4e9YA_MBUdlUqCpT?Vh}~y
zJsPW-G=DwTU6>n|nG?j#Fp=zQSygZ<N&|o9tWB*ESORY?(sgG8EATgD7gy6lC7E*}
z0^mBfq+24nYv6b4*njBmw~K02R-mD;-Z3+H@J_C;P1#<;8)N0pzI2gts83V^#q$RM
zU7c73kfCQ41{Wc(e*5w7<>M-*-$IYf_#<t(dDvuef=aQ9N=aryimJOmWeic>V@?<A
z898|t#j6ZmYQ1>w%IR_ak@LM<P3hW!G2}^8#!?L-=bIa2u?AnQ48-gH>zlrNTK)E%
z^jmMNLe*-bf&Go^>M11x`Oh2ox=Vs$Rs0zK_mM0F%a^9DCf8&>vVdFaag?#6szEun
z2x<`6#&~Qk46Qh=EDUXVEY0N;YnPE?n<Q;c1o1~4*To<wN>s0%B(^~=6Km)4f#XE3
z@!`e6Yn>ad*AEW$VlVE!=o3xS!23EYJL7#dqe<XuYg^|=XWNTiFIr!8fj>xEi=JBV
zdeH`c#W-JI*}cLzv@&$vd3GgLCwGGqV<6UxNwP5v^*3|Eb3O`)T*K0MPbd%7x|XsK
z6A<GM9M5iSERhb97B?1&2Z`X1^^L_1Feu*@RTk_f96Hb~+fmu#2G`wtclsg~*=qZ~
zh+H%NyZ#O&nC|IK-B`2)oaK#;1#1+rn*P@cWxcRLee@jl<T-GbiC*YRJc=;)Nf1!#
zdGl0*2c1^$uX6nukZ4=aHE_XmRr<|BQLceAuKNlQ62Tu29xiU&@2g3xBbL-<_2@=p
zZ>sX#TrjR8;6m^1y?5=vzzS{Uz|b}3<>jHh`m-_$$`xkF0RrNWIF7SsdM%o+&tIP3
zFM3MDlgK=e01gW2i&+v*FYRWeMgs<9S%+mxN9^bUYZ$%YQbMYYS7__e?}_BZv=|dA
z+T^e8tH?%Ji6|abyf1x4%g^}c(Z{id(aAw3Rxp$2@2;Yn;6=hXOwHkRaNWXk$r9Il
zy%+p|@jTn#G&^vpGcnLNQ$HiFm)Ln|V5w>XF3=6X_3fq>F1;t9J`zB1&&KujpXPsC
z{O$FP^%Fg6sKaWTt7^zDHQ=4fO5J|+5AxYRcUkFn;V&=$ioEvgeE_kgE>V3uZ{9&8
zMdg!#PVelzxAV^2dgr{mzQ6?@`4jP{$fhiiuufVrOd?Gg0t-n{#b3Ymt*F5VPF&GY
zi=eT&Nzepr)`cZ|DoTKa%^3|vm`Cq>I)em(!oXPgXN;0_AJ<iSa$Ga2j@PKxQy#lO
zLU8kgL*1Oo>&P=PU`w%~_#0s^8c?ZiDw6BV+eod-z+8>snl5miBJg~;oiiUF0b(%P
zUEL)e`W>j&rTvfo`q<k!MhM3_lo%>D3t`N?9b5MUed`;Fu$0EuH3AaquzP>M<F2aR
zRg7syH1Hd7Jv}A6w06;YJ!(DO_iLSY92&r+2fCjxx8X9a;&kAyzBZt4u&AsE7N72)
zEy?k-FENBqmQ4;RK>DmsRX0;3Wba{bHP0{>mF12w=l7s18}fH*G}h%+qWjGGhycao
z%8ryNX1F(vr_4joUbefRf;e^{Ihd!gWsP`ny<Ppa6dMW{l9JSwDH8#!bw#$qLqSk%
zltTsN3>s%5^wvv>0vB6aZ#uUi-ah@|(*u;t*1|2s*0sKIMZjYsB4W&z<>tyf=C7qN
zod^mcl9JdmWRZxJ`|Xov3$E%p)g6uV&&E&&x+>bW+ILk9npq&uzpp03$0-6QMf#cm
zF<?Dg#aY@b3*^uErcG~+>^PTZyk3)6gr9SOQg*+-BJ_n8fR9mYZQ-i(r>lwrTMQA}
zMfol83@G2<9~0dc+^JN%lS|^yJnVI5mFU9BjR`IAOjx*I06MON2g(Ms%ChDZbKPa#
zXFOKC%}PY2;_wte*(~-{%cM@H2K;0E^+))F{k5o|1|DY#3jD>YMD@_$8pj_<FGSWC
z?yD<AN(;e5wfAaQdsh*|t7qP0U&5|7?M1ZhJqhyhjP;qwx!-VeJqajz0$`PvnHF(O
z9Lu2HodBHSkv4Jc@Jws(JF7XXcf74L+2L_Eky;K8k(S&rHU>%Sg>fw-=VufgO^!5-
z1cA{ZCA3nwRY389*3UF$KFJ;MqxCV(I171=z#YFjwR-%o4_BQ*CpsY|p&C_Hyi<Q?
z1cQ6AlgCPW2gcrA@)$Vld0cuowtf)6P;*4a(z&MlO}R_C5xJUs`r3zx7}Ha8Pq&!i
zT<=f{u%4p5j!y^(h>qU2x7&^uWgs_yO{1?TZX+VmN1FUm6b<Ocu8YG&Y#Nm<;)}t{
zx9?`&y$^eDV){I6@Xp&?YtNBk;TyN#4u`!|H~kO>jt)f{M;hwIIH;S&vQpKeDRzOR
zHg=?Gl$c{gK^kn`sz7AIbIs!1P;MSW$RuLEQbK3suxjUCK1|ZaiZm0%#F-e}>Zp<a
zfJLS$(V5!WS>WhH5(rvu$ZoioRXc!fOwzHrJwr)D!hcM2RyO7&H&A>-b<>0BK>!lW
zb}yNe6i_R&%&IcQxmvmMIbUU#lg3gBAU8Ud-f_hEEV&chmwYgecS@ZabyWP*Sm28m
zq{9oY=TmoJC&I(eEf{(Xg|;ZOw@fVVQuoVpPgg2U4&XgP&_i72EeK7Bw^P8x5Xpa(
zC3q@$nw9v-K1TuLDktgH7HO96blQI%4SS8m!43?po%{pbG|DBmA=+Td4syICUT&DA
z4cB=Ej*k1+_ybgbb#zpH5UYhQX}7A;RnAo-W910GbnKDtsgc%<N=NaV2R}Y3odj22
zq#g?nVR41nIMu!SIEeZ+a|$-OM>!yak$}lf_4GzCjs;^Y2r19-C;*Byl5*XZ0=v06
z6zl&JZeSOe5J~n>gAuM7xhZ<FoH&nowQEv1#i<eT;}Q+VP4)si*DFd!g(V;vPZ*6r
zn2L8sGU2L+Rl7D6HtcyeYl~w84A%`~&PdP1{6tBMVMn4x0<TP<bn`>VyJdH~Tf5x4
z9jKca?(K9zv<Ee3+5vMl-O}PX89`PYSE^f5U;%jpHnYpWcw)V~>lq#>53DEniBjz-
zrUk-w>#@Z`5UX782LEJXmk>3)dFb{pcBuj>Vs{Gyf!SnK11-0Bx_7hXIBB8y)rnPT
zh(H|IgNe6ro1ih#HEzWg_duzVw^gRS;-V6Hl%MD1snomJca7z?X{xEJ+V9Nd>UtNG
zG*hhF-*)NMw|%hIA>0;CO&cLSPVw+2Kg3=Z0{rkFCuEm*WmM(q1)K{Gs%>lQ9K$9n
zemJ#`5O+V<77i-U<Bx#xUzdrcfs7!RVYo%T!nytsa`*5YkDUOd+wDT&Zt~EwnR<(8
z-QK_rlG{SNdO3`psvDu3bnu~BONL`2v`jQ%DFmG0xB^zfx$`iD&w@Yrv5&V2vyf>j
z_QMqw;P8rf7j6xT|9yNe4g&gi+pmlJ-L4zPyk=TpDB`xP>rj-vSv6V0dCQgsC1(v$
zPl=msR+Ke*h1h^@^%!Tqp%W&+nwT;6b6UkqzcEEX0M8yD_xGQz7z+pxCnl!tgRACa
zBB?0oFr)p;4$xRWO(iE9h^{(i?6Ch3ejb&B7=LMJ<4B<Wp=YRiCCY)%e6G?#9O5-b
zQ<e^W8wXLFk95kP^J+@g2~aAYmVXo#FK#Rrn{;vQICfR|!e(i&hOg>rwZLdQCHod|
z@!505FO`i+4X&_RltieG2t$VRV{y3^@h!7OZN9^HXxr$3_M#Y<AFUBePVU<5JLdpf
z&0xG;5<;zA#B7yx*v5K0ncYl!KzmpwlI4$a*MD^U<H8H;KOuw)yO|KX!jQg>x88Hr
z$|!I0P72C@F}O1f38JQ2{yD|rj6Q~2_sUbkV`VGcc}%JzYcUMptq%^3sfMPDla(xY
zDqI>0FvVrn`kmdylAa8hBY+WKSAm1Xo;Rxs9X;OTW_=~`E4qhK{LBH$>LZoUs(sL>
zq(bx&`nn8)!9RW)bE(wf@DOBTjQaYEThJf>jV^PLoO-2`)Pl>$y*#{on2;2J&g~mf
zl6RMWsoCr2<c|yrbO;Ie9S+zZC|K(xO~*&&5QY|y#gp?=A~dUkDM(y&tCFVFrm&x9
z@fIwKf=K;K?Z|=@g6@zIkeQK*xFVgDMt9x;*l*tAC-U<oN)3C8YW5NOcsHl5JV5cc
zQNiL|RL}e=)3<@qKWPng`s37V8E|V$nusqlDO77aLzYSC;kGh#0Kq?4HyXdX14QRx
zVLmIvUhu`xzZDY2-v}#FpGu9AAE{C4o5u%CqZD=!V^NVlGCV*SbZ23KcA#+vEPMU@
zYy4U5TpF*UXfS>tUVW-Qe3U76N3tvJLM+oPD^cuO2{~iSU<Lx?rO(-%zq2>jH`lAy
zT>t0)yB(}KbiEyiwwE|9ljQm*S;9%&OLwn(Q+|=<oZ*`|?C%;Szh@A%c(qrvV@tHY
z-RhGoPqP?d;;`47_$m+d<RBYqc}8bD5?eHuJ(lx1gC4M4UZyC7aa@<JUJCA++Z*Mm
z<XVJ7Wa&nl^n&T|0Z$#U;<G8^^&1U)j=IO=Hyrq|!sy}8hOq+i>@WLg`U%MiGldyl
zLbqdX^)7&}WSTtR2;>O~gIAhqjQk<H(cq>>IVYbZnUm)@&>WH5<4|h)fs>1o!3bkX
zy<vQ4`&A(RpYAv7!G;O1PP=ufsaGikUbM~2cLCVJ_G@tb!^A=p4)h1wtDCi%ys*b(
zi&r*o`4RAcYp#Bvh-npcIJxI$ZFe?uOnSi$WKn1e?QB6WO}~8%bz5R~*1yuH%y~Z+
z$5O;#v5Sd+ER#ffH5!;_d@cvCJZg3^@n2aN-U)UMj&$N<;Amg}C3Qm$Ks$nu{&;kZ
z8E7ILd<ue_@P`ZWam>=TE7e}fWf~#Lg;3G^6H~^FSd2Iru@sSo&#AA&!l%%Kp}>kx
zm(a}=W+x>lOHnli4301OW!p5xR9~3liFyVDSNKKg9-Rl3Gz(T7NwXb^cUx(sJozR4
z-8(h!nW$embb5|i-1S%zA!LUXc1-L(ItA2aU~37H6}_A6z{96tisujqgaCjqBGNRS
zootIIc27HPT$k^PD&@HgY>{4a>A$RRlid{r9lTow*MHUAyN_xRJ2KOGaQAm@wbSUn
z<5X_RNGB(rdv#Qlxa_jQ!ZMP&^gS~4qGQyjp+S+@V{V-ecPX)G#mwXI*)?h<;yjSB
zvB${2S(1Abh2i&|#9N&X8O|QQDE%e-BYLZPu0*$ST2y=IRD3P>9_>v9H!CU?s*pU0
zr{X%Bnh&g2ic!~;t|5ZjVh0U6TT-xaws+#<Dx2lZ%>jjf5F%ju>Wi@6uUR9!4~8<c
zS3B+R?<fxYv&q2DncYBCSDIzW94lMhz(sw7TQ^I9ut@00E)W&!mgXeYdzGR>7kz$X
zFVueo7Mr7ZZ^mwh>wI|fpl5J%PL9aF4i`8-{g_>tg@BW}Y}C-T;-Sj^;Epaqn&{i`
z#dTs+WGdUXVO?!)QnAOEy}jBLLPV;KvoU77sVH_+M%_5@5E)kMy~pp`XdAp8ACGHB
z?Bwsnjk<E-q|`pfVOq!P<OA@t!MSGYGp}v=TPgN@c&%oZC9~GaLcjsA)Jvl|n~f9i
znT^B9uLipb=|w}JbD+fI;>qT)dhU}TS>l!8GccTu&UuTh)=2pnRg=P?$ClzzDk)K_
zJ^dF<(Xey`<q9}j8^~DQ<3;&E2MXuV;TfUXD9Z+gbAuF-=YtO@1P;j3%r1(YY7``3
zG>lUG3r1=vPiV>BBPDKlo4lFW|50mQ?_;EVq42^i))nAqe<=JxWeJr17?T<k@_gu!
z`qX+XvVm`IAu8z`BeQ)!>yBooTCWkH^e*C5ufnPE@THn2?nzqxS-yoT@JA;4+y$7b
zrI=<mC)S=qY!*big9clg7w{LtfW4CMIm8D^8>X$-h9=BLZ<P_px8Cvpg9QhH-qYGT
z!Q!Rt&#mnwmc39@{;J_u;g!F9I|Q}R^#E2lb!z(4Tp9COLepk7P1vj-24S>f6U*Ro
zKo?W%O=z^jY9Cw~r1ePxAH{+}#9Z@*@_pB@XjuLnlE!U*lUR*M;$J8qMB<eLroB0T
zv?mxM^!cexXL<`}9rjG^c^mO|uCI09Tx(wfj}=AWL;x#}OA#0-rP@E^Mk|B3m~Z;1
zd2OChHC~~v7@JJeCta+yVDgU5rlGRBX<3CYo9V~)=)7&9%ci)`;ih&v&N|G|>`%PX
z*A~~i4;@w&iv@1dWYXw@3u11k-^d02gkR^yqv>-51K)<DHTbrSNnrobwgf?|P!Pmv
zKDX(Sn5N?7F$4Z9GyzmroLvK}-Q~FU_sc8TWkNyz#no;_cU0ZUx{?FTes^H5Zt2`J
z_O;_H1^iQkZfIeVkRADh#!&cD1J4%7(EZe5-B+sxjRQUM2O7R<jygm#*`yXa2I~}b
zD7xOiOVkw=eoYo61Gn05GlChAJLv^IjH=B8YtzTOOCtrs;0f7eKw=$Zv`5p0FF6O3
z?KUr_Qz5q;GfW!TD)%j)i<#@Upv8c9+&}C1lzUxpXGb6K%V~}{sx4N)W-)L=lsA4K
z^U2kzRf|KRZe6$t=lrKi*;|P38A{hMD3#L5h~G1no_MZgm?nxk*^Uda0mnSa_k>Rf
z)4)?{5S}<lUC*W}_)vtFr3#8Qic<wLbU{jXX%;yZOX)A&4cxcs)a}<1xNU=(+nzLw
z5Gc}&&2v@p>rrs5HMEdg94hN`1L>dkR3(%zVk$Nvn8`)-16UEUAYCNWERcu_R1=fj
zmHQ4eXiO>=k$NG>g9GcrCWzq=qcAb7|DGARwerUK@K;BKe#QmxPa*kM6Fe$P84-wO
z!yuWLRj+2j*nwC?lyW4Z=?{dyUJU`Ran0P~qz0T&1DO&-v|(D4W(H<GS}<*Z-K1oC
z6FMnHyrOcy@?u_bnIE80U_2P`$kXBJylR}l>3zODq<>1Dah_g~hxC<D*a5}?eF5o%
zZ!j|8EdVq)DEEW3Juy2k02Z?=01ma>O7{rND0kknmo9hGCEi}%GT1%lhTVNnk+LEl
z8hu*3mWlH+P_Mp@A<6gUsJ9Ek!Vy$Nc$i=W^Dk#PY1eK6DQ)Io4;2NUuFUEU8*&*6
z>%;m^uLg#wc>Fs<O4}^}-&K26<~ime0oEsW`4x%zzJiE&QG1rZd$_md4x8W;RUdm6
z%)^;MRNV#;{0`@NH@3JCMDpdlStoqa1BT~9dKSyyakBHb=GrI6hr0!1eIvYL)lW5~
zHdyrQAj!QzITjRyhPcYOrr5Y53?dJ`Gan7d6vf?&dxD660-Rs8wpL!rg$hEWvEqb?
zI^(*82r)KV5Sj<QQrUV69j6jooUgh2WbY-HOER)sGk*@&4>cOhs80QSclY2=cl>_7
zGf0FAuZH?m#S8@R@}rAS<S_+j2G8+4Dm-(H!N<Yel3bL&&Rld1JUV7hpA7zwdMlB-
z`g1YS2vPK$jy`BNN}i(Ci>lM96V=7s6kUBJ2w@&Q%I6<F!iM%0m%cH6T~g8q0hb*~
zebk{3Qd08T_|4G?g7&ciy$oq(4mUjrGK>yw8(Z9((;ORXqJcCKWil&^e6>3w)N@tN
zALu>C5?fbC_+;zvt6T7;x?o*=ZBxCi_of$Ng#WC?3k!X~9=ah}e9-t{Q3CGj$cKCR
znh3sW@34Fkj(FaVx(5gUXiQ2cfsu)cN^)CvdBZ{7vi($nHKKC}R8{5*i>V*CxzTyD
z<vdw5_tm!7Dv}$W`??ajGQYnQj#!$Xv$sEIZn<>b>WHYbx&g+<=KyooqFB!<iGj>X
z4V78`*?pkM1V~%^{dN9kz=08|wAZ=$vh<VJNS4=;65wreE>5Hc$86hFgl)zZ=@p=w
zP*2XWO%YSG2NCMLQAk1f^n%#)9nb4=V`~3{P0fGT4d`#*LLd%pb8!XAQQVa_3~aAB
z5I#ed*GTr+xhC^AyEXaq9^dk1lH5vu9&YR-!$_pD`NVu_tOQeF<O4_6lRUAW#QOQW
zg`t{uabW_8AAPa*Esa6>k!4#3+70K1X4oztk!uVBquVSixfk5Xr+|e^X1w|N<;{AO
zor<g{UO@h6r>b8jJ6EY}<@oz3Q!XhK%P2z4+s;-mL@(^G25-SFsUSH_m?4CR9N*$c
z#<-ZCCc(-w${3x1(xsVR?5O75z3U;(17c5u>w6a>Q&Xcdaha)tRAiw(6V8yAq{?_r
zD9@V=G~=eH*E<H<^*#7ttlat9K9_30<@7{uCBF*S=jBHVH~`9L$z$Z!^1bpu3t@{j
z!u`5@h+$l?T%LThx*hz$-2AcGOW&5uM&Ll%fwjIkD`2-wQSE$f?`1_Ba(?n_vNf&s
zZIJJk`@r>rv&!{@;fBG55qx&8p15w`Ky9O@S5Xq5PsooOROpo#{RVhHzm#2T?uqq2
z)Z^j4JmHP?1g70hTDE+>3sZg9)$<*guC6zV_$>wOF2?}qtKstV+*P^#`^E8AFv4|a
z7CZ{(@4`U(%Djp&Su!_OZr{DINHaKLiJ1)-!2O&V$iN~m5LulTlpMeenGMYdZIU--
zWn{J4D${_`!Ft{a`1RSTqx+}!WSAf`O@IS*qjKtC0yZ9dyn1Scr-Mw==?M=FB18vt
z{CW1?YECm;);xFe&dRmJ$>oT&@;QK7|6tX}Zrs>Al!--1u;5Nz#&OBV+rMNeTo4d^
zZ-YQfO&|af7`ZE;Hl@NRK-{`L#el!w3IlL&$pFwXJXwQp1|&Q1&G@q$fV*wDi2<cv
z0|O3jI}~GpPQJ;Na9_W|qde$Yc=sG%VZ14B5-k)jAptiL-ENRQ9>rV=6xyjJW9#fC
zC1o#rm9>@dcQT*BkDlv&$JaHhyMzTQ#Rm>C4gm}u*ZK}==GFlh%C%%6i{9U~&gM7B
zxR{*j91PPg(B@M1TVpJsoZCCcg#0keid!%*D<N5x(R6B@t>N_HOD$_LdZFi1k2q09
zE)28ZR-C+A=NQQiNw_I8fhW>ij89JC6khyWK)yx1XgpZ)uP^_BoV!&h7d=*f*8^1>
z!jQscI`KZVW{ItY)}lOsS!y_mU!W7`Lv0B(G=BjgHo7w(>PChJO8EZAWDZYBnn9lK
ztcQA0MoGC{V|#qgBPNrcI!O5b#qOT8J@C4*X}wAL;O~O}s`J=svzc)|p=KbsonvR-
zFs?+NH-f8?;nyCxF?K|)PtcojLjCx-xpNw)MC9z)Fg^;8#H09OvE=M2Q6s5ykf#+n
z<K(Tz^Wzzz+ie7^kF{budIlWW5uIjE!0DX>HZcY91<lYgf1+sRO@xLxEs$t{BCoKa
zo5)&NLQn*1#uBO97Vd-&2B-<nJwSsW7eLg3>-G3R&(2PE{(L3TP~<P$)kQW|)>l4e
zu&&<n0iuf0@wu&wtO&MC5SWErn7Z&b;ytFLuW)3pwNJ=%M6%ft;N{6vGpF8%{X|*`
z%i4c(>|EJ>Cv(D9Nxy`FOBjda^G!2^eRGZL4(l<pk1#WT_s@Iaf+uXWr2bVR?tNT!
zG$#%h)NM^V3S!2>+WtAo#Wmb_S5`?YfGYyw%&k9<@LFwbI-4s+lFF5z6H<M3;f8@)
zae`2tAD2kdnV3Pf&=rg*F|thgG2wi+CHz%t*+qHnC)u;{ba@7em!L+%etmA1cmRWo
zE+vatmc=4fQM?>hDLEP^s%2ROAo^@bEVB2XN~%JSY=5scBAyRC<H_v*^>9rXxZ3t8
zwkN)ECh&6CxqXO1Kf1X!TQ>OvUMHD<-C>oE#ut@aa=hd4`9n$%=dd%I`~lJ0`KKI~
z;%G!sf|4T~hsf_-dPs-Oe(;>^Mn(q3DC^X_dgqphmz`Fit1EH^#E*Eci{I9>p<6C?
zgN7km0m*3Q@YCekeAn1pc~NPH{WAYCEM-w@k2~4B9zWiE3}LK4N3{|h((C#o7!&>W
zeem?5Ju_YPz~;8t?>Z+OFW~egoCu#w|7S3^KlZ0nLR%gBxVyh&pk8*bf}OE_X?lBB
z?=4aPV;dI=ecSGJSH<O$M2Yd~m>&uE?x5mrP_roi9vYgq3z%O?QqB!N5~|}{Ig(7o
z{IbMlS8BG$eR#qx3cDBfZsZ<@+di2<W|1MqQEQG(fL^w6n=?aTU;*OH<N!Uj|9~@?
z3DyCh*MT81`65Tv7kf{$xnfZ?jh$D>*~K%;)A+E>;pl|4Hpa=&k|~?295*v5&ZiOT
z<M;=aWZ}vR0+hf?bex29JJwy_YtAg^wd_IvSDbfZ`YxpP)<0&yz1}>vWBo4O8rkn=
z{bPCX*!!h}bF1^<xv|M)OHE2Dy1R@7PbU;0L}h}mz$O=uAX6lzgLBz;#&>_K@t(Vi
zJ3%8<1oeiE>M%$3iB+{?c`h849nuTiIsUsdQ9ABDT^dzkdXog#dI78#^7}iLWI5m*
zujc*<tqlA1|BvB3{-0PyO6`}|B?uXf=(O&69Dx1d3*p*&g8Y>ilRmYLH~@Ju;24mb
zbIxW?qZfVjvY4}xXDm(cI3+S>A~Vmy2o>fKi(JDFzbASUm@lGMBi(NpmBAdWbbA+!
z!CIpt;xQHG&wcj`H<;d10i{_<WnyDaWwa?5xiGNR?`*deIx|CS#sGEd;5mhi)lof1
znT=lQECY$V+9$JqK$!6Crz4g1YpT;7b_A&mHQOW=ktczCmSu(6wJDIlWmg`#XR;As
z<RoEanA{56wJ2@R+Nay1&AQ@u)dIjHe~*M}HsRGdux#I(K{ivx%WvNLhd8f7_Cd<c
zdGIA<5OKKZl@f7=`D4kC>49uDy|OAv!}>b)Zua>om^$l~966^mg=X*O$w!QIM{kbF
zi!_+y=qK8hbtP#>QY3XAOk5hJr}tfZ%2H2b`N+_La2-s$)Rxe={sk*PfvIqGXwOx;
z3oC;>ug|@}{GLb2!{WjU^F}Pc2@$YPjlGj~sjZBEv3Je5^d>yo-&<D(YUY-|RI%=i
zAS_@>{5|T6HAgIe;7ry#=80#8N2xMe@r;m{ya_Z=Z_3gBj-Y1{$fKU&<#xtw`|}e(
z-YnX))!$niJODOa5?V7u0w^$#Mje-oe8;wE^x<`Du*s!%%BSvil-?|XYwR-kbJGHH
zR<QbE3B#KSYca8gSkAC`Svy|zRfO$^oOh#WqUpCFwn2{&+Y?))5|JBNpQs>h=?Skw
zVl69M8`~@VK36YNZIRoJixoKs;b>SYP5DT318bNC0h9_h85^>K{rxNQ*{0oO&T>r=
z=2C=Mv_tahv~%GUx8u^9-cZ-`o$_4Qi^x#|C9$;P!6s{I1%L;Fj(v{~m(;Wqn{5&^
z@sNdwv_i4f)tG3-4LW+kb0XE<FL_AIPA<pPXDPekrZ;urrZ&mcy+HyEdg<2E&>LBn
zmCCMx1gmX#Mw%&4R%SUGS>ka^@j)5uGT~wO9hq@6k#^c;Wmd!VQi|R%sZ6DA8J3ut
z2WHXs+eW;r#shfdFC$bkD~qM2H-%05$x5ZfjH?}L7-1Tda#aD(U+LtdY$IyIAlN`K
zFu+<D)K{CWG4?l<W|Ydxx}XFreA$%tMwq84vubY)Bo)z9sJwR-XSnd0O-la*8o-%_
zgcQ&N5@2=e)-Su>sX(Wv;FNx0f<R(+=HXUV;D8kspqH2)6~09!<jI(cXfw4P+uzbT
zX8L2gdOSpS2bAE*Ks<~53MjG$<kP}w$%*g(9042y1o~7xkbr_9;1K|DSrkD4yz4Ls
zAk>%!0hAEeAb^ocaS*^_=3o%OPB#A|fIYJwK>!ETJ01jZP^9lc0Ed{9T0YLw?30g|
zTAK0+Vk<^I(bD=!K1piFmrtRzYdH5)!FPkfkc9#82k@4OXjElN4ozm}<0%WA^vI(1
zoRTF@4P@@3L9(pUEm`3VQdUjIfoY__1X<TuG}$m&`KOq=J0sgPcI|!K6@^bbxi6Tn
zh+W%u93w7Ogi;P^0@0@=&<1&H8Yj4sgcU}qdD0?`sRo##c{j9T5W|H=)FDN|D{G~X
zQQx&IL`2l_X*p6RSMd%Pe&NC$@71^v)b>?*I_`<U?uuHFzDjUIMwO~y8uy*AaZ_o6
z)Ymjo+70hawu`=+O0^S@3~)wLP=&Z9OBn)ZS6EHP#b5y2421*I-`@2A2WBo%r${m%
ziEKZuU;5xV*E%IUHNuIX7RYq{%C+t1C24$Iru;MjZmI>VUNZE^J3`xt55!XHXH~9P
zB6_+PS9<Bljt-RH47U?*lMk{?e>z!`UN;jD$L*t??Tna9&t=PTY<+BTJg=^R#O8Fr
z8)=Vl*SmSDRw&U}NFrMJ#_TI_!rpAucm>5mA{Q0BeTV)Y2fA1@zz%cIzV4)P$q-7a
z?%s_O6}96>r91OKpKlw=@}gI3yRVkjLyS=Xx?8+i+EhI(w1QBXEZsQ8^OfZjYcmJk
zSDPl5nD`P~%|%(X_^D^N=ws*BU*z<u_ZA>XUP`9^)xh>YzgIqauSA1t@0!?mNsy27
zyy?g#lxl>4p(?cy0<=0NS(g(oJLw`3ISDD5fKzT$P-=79TVLsDXr1v|#9QY`Wy+Q%
z$GFS#<&h~+q)@REzq_McnF>`Z9aZ76YPFsUi(<$ya0mi|grFd32nKxiUz8xq5ETd(
zd<;NNf~Y}o@Cejt&_qO{MH`t8U3z`>E&2=?GGfexDKix2ELgH)&4w*%_cIxt9eWNO
z?cl_j3s($o+}rjl3wiS5jfsVggUg4nY^TyehhEVj!FWQ13KNbmqQCv)M?Yn!C<4h+
zgCa4+@}&mjB}lxT43Z+G&1zkC<qrMq7c&wp2Xp1gmvEWNm;4FsftMb8;;9!NdY;>j
zNSqAS-!GP}SaZZVhpjrV-dWA&U2xJV8>v;NUW1()HEGtORhxDlI?3(QrCX0)efka9
zZP1WmBS!6^sKZ#sjGK_HxvD|?Sw_Q#{AF5?QTy!Dr{6J|n~e=8Zl>TBJ&jMGSD$_Z
z0E2`?#3ZC-<Z={qm8`{;au(muMkaZbBbMwqV)>ITW&E|23wZX-WHM$}mf6@`>S&|K
z+RHSIYjE>;0B`mqYs}G)GwyumJHPoaV1Wx-@Ob;+<IgnSP^Ia_!i3_qrd>tF{e(YX
zlS1PHM9F<oodGV3i^>qWvo?hJvg^`+U*2cMj$_W#w#(CwmBQB>w!8{GhUrDF`^E7!
z;r^m$+&b02rW3YrM921dWuhn_<iv^sA=N1Kt{dh{W@4CS+kQxq{lF!&t{d?X`IBOl
z;41R?E{v<5YXZ5Mt8pouwBuUVo*P@adoku|e~l+E`R*nc5${WWnk_j$4HV6_oj~bJ
zp2o?mP$@<|DJW07P%*(QsnxkzPTQH$x8Hr;zUe}%;zBxOV`Kg+#Q8C`xE>?pu?OQx
zaB)rRau+#gFN{lYnZWq2yR0eU6I>lkH5FG4v{Bh>Tf1vl+iO!#<uye>Q(3=W4%cPK
z)pK>-kfVAi$lLZ(Yu`I!o#3G~X4A0`oif`@ZIpu$+Ms=2Mg8r56f+l(px`)zdd*!f
zcrAA&tG1gj!|mh?ohMl8^=)3w@<(&adzzS+ZL@ru;674ZFDn1oOiINURi3n<&s<04
zNjIIB_c8`m4e5r;7t%98ijgj$!XVXl7IIpUtf7^<xL*R7m>M3j3@oncB9}#1H+i{a
zG&!fL<(pz4S_m603$zkgDCj7-P=G10S8%W3LP70IFz_W*s|4AQuSzBNm4J}`#;A9w
zF$yqx%Ai}*l}=RFxns6#&O->4I^-N8InVGc(wzmw+A^g0Q|YV!^iE%!n2B}7ss8i!
zVVk84ulltZR({7OwqSw_AyScvTuAXQ=0b@=XkkPttZ>4MO4MQ@mSQE=*(RFtgPMwF
ztiftU!NH>xa6oj{(?3op4o18&>XsjqIMi0mF$tdnl@=#37jmHnUlYU+p0qQ8@cIXD
zxA}VR8s-OIxtZeF=1iqj5>n~AUu56&lqaA|K+8(@8I5p)X-vD$70+9tYuq}!SH!Za
z=5<AF6Z5U(gPGH@5sL9j;;<U%BBR`^hbm|dCFB!D0?Y<zW2ca<gBp~eO7*jp8g)L^
zhVmu^kSmYV&Q}FP{$1mfPuxvaTKl+XVJ-Al;DzY$Amo72bQY>5qJG<hFo+!*GkKmm
z=;h6~GcYM)5bFQ90AFNpe;l6%KmhPi_;vu_dO-gihz@uF(18L3yaWuu1HdW5Bf!@H
z@Fkp#BW0{S$Fh1H$Li@Za4GV_V;ib8qX`B?%gCZ(w8$6-j35g(S%?Hi1ct|61kePC
z05XCWK>#!dAR`EZ)>IBhZ#(<gn4>uk1p@3={O}m=@8!dRKa-QQ`%GqX8nN#*p1<C>
zsO<-R!RA{lM(=yEfytuq<ANHmD3QnUmX6pCsNs+tY9WG_E1D0WV40|?j@;)nEc|Eh
jl$e(|&tkuME50)cmmU@^ly?QRB4Jb5RbnD+&%U}B63Q*I

literal 0
HcmV?d00001

diff --git a/public/font/pilatwide.css b/public/font/pilatwide.css
new file mode 100644
index 000000000..094845864
--- /dev/null
+++ b/public/font/pilatwide.css
@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Pilat Wide';
+    src: url('../font/PilatWide-Bold.woff');
+    src: url('../font/PilatWide-Bold.woff2');
+    font-weight: 600;
+    font-style: normal;
+    }
\ No newline at end of file
diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts
index 01fa690c5..a784c5671 100644
--- a/src/config/theme/initia.ts
+++ b/src/config/theme/initia.ts
@@ -18,7 +18,7 @@ export const INITIA_THEME: ThemeConfig = {
   },
   fonts: {
     heading: {
-      url: "https://xfonts.pro/fonts/pilat-wide_regular",
+      url: "/font/pilatwide.css",
       name: "Pilat Wide, serif",
     },
     body: {
diff --git a/src/lib/components/module/CountBadge.tsx b/src/lib/components/module/CountBadge.tsx
new file mode 100644
index 000000000..2df5935d8
--- /dev/null
+++ b/src/lib/components/module/CountBadge.tsx
@@ -0,0 +1,19 @@
+import { Badge } from "@chakra-ui/react";
+
+interface CountBadgeProps {
+  count: number;
+  variant: "view" | "execute" | "common";
+}
+export const CountBadge = ({ count, variant }: CountBadgeProps) => (
+  <Badge
+    border={variant === "common" ? "none" : "1px solid"}
+    borderColor={variant === "view" ? "primary.main" : "accent.dark"}
+    bgColor={variant === "common" ? "gray.700" : "transparent"}
+    textColor="text.main"
+    p="2px 8px"
+    maxH="unset"
+    textDecoration={count === 0 ? "line-through" : undefined}
+  >
+    {count}
+  </Badge>
+);
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
new file mode 100644
index 000000000..ea005f3bc
--- /dev/null
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -0,0 +1,31 @@
+import { Flex } from "@chakra-ui/react";
+
+import { CustomIcon } from "../icon";
+
+import { CountBadge } from "./CountBadge";
+
+export const ModuleCard = () => {
+  return (
+    <Flex
+      borderRadius={8}
+      bgColor="gray.800"
+      p={3}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <Flex alignItems="center" gap={1}>
+        <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
+        Module name
+        <CustomIcon
+          name="check-circle-solid"
+          color="success.main"
+          boxSize={3}
+        />
+      </Flex>
+      <Flex gap={1}>
+        <CountBadge count={12} variant="view" />
+        <CountBadge count={0} variant="execute" />
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/resource/ResourceCard.tsx b/src/lib/components/resource/ResourceCard.tsx
new file mode 100644
index 000000000..16442ad17
--- /dev/null
+++ b/src/lib/components/resource/ResourceCard.tsx
@@ -0,0 +1,34 @@
+import { Badge, Flex } from "@chakra-ui/react";
+
+interface ResourceCardProps {
+  name: string;
+  amount: number;
+  hasBorder?: boolean;
+  isSelected?: boolean;
+}
+export const ResourceCard = ({
+  name,
+  amount,
+  hasBorder = false,
+  isSelected = false,
+}: ResourceCardProps) => {
+  return (
+    <Flex
+      w="full"
+      border={hasBorder ? "1px solid" : "0px"}
+      _hover={{ background: "gray.800" }}
+      transition="all .25s ease-in-out"
+      cursor="pointer"
+      borderColor="gray.700"
+      bgColor={isSelected ? "gray.800" : "gray.900"}
+      borderRadius={8}
+      p={3}
+      alignItems="center"
+    >
+      {name}
+      <Badge variant={isSelected ? "primary" : "gray"} ml={2}>
+        {amount}
+      </Badge>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
new file mode 100644
index 000000000..39d5a66a8
--- /dev/null
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -0,0 +1,49 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  Button,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "../icon";
+
+interface ResourceDetailCardProps {
+  name: string;
+}
+export const ResourceDetailCard = ({ name }: ResourceDetailCardProps) => {
+  return (
+    <Accordion allowToggle width="full">
+      <AccordionItem>
+        <AccordionButton>
+          <Flex p={4} justifyContent="space-between" w="full">
+            <Text variant="body1" fontWeight={600}>
+              {name}
+            </Text>
+            <Flex alignItems="center" gap={2}>
+              <Button
+                variant="outline-primary"
+                size="sm"
+                leftIcon={<CustomIcon name="copy" />}
+              >
+                Copy JSON
+              </Button>
+              <CustomIcon name="chevron-down" color="gray.600" />
+            </Flex>
+          </Flex>
+        </AccordionButton>
+        <AccordionPanel p={4} borderTop="1px solid" borderColor="gray.700">
+          <Flex direction="column" gap={3}>
+            content goes here content goes here content goes here content goes
+            here Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est
+            quia, impedit sed assumenda ex quibusdam earum quae, ipsum
+            recusandae, saepe quaerat obcaecati labore? Aspernatur, vitae
+            adipisci ex consequatur officiis at.
+          </Flex>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index 8cbdd4bbc..56238ad40 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -6,6 +6,8 @@ import { PrimaryNameMark } from "lib/components/PrimaryNameMark";
 import type { ICNSNamesResponse } from "lib/services/ns";
 import type { HumanAddr, Option, PublicDetail } from "lib/types";
 
+import { TotalAccountValue } from "./TotalAccountValue";
+
 interface AccounHeaderProps {
   publicName: Option<string>;
   publicDetail: Option<PublicDetail>;
@@ -22,69 +24,95 @@ export const AccountHeader = ({
   const displayName = icnsName?.primary_name || "Account Details";
 
   return (
-    <Flex direction="column" gap={2}>
-      <Flex gap={1} minH="36px" align="center">
-        {publicDetail?.logo || icnsName?.primary_name ? (
-          <Image
-            src={
-              publicDetail?.logo ??
-              "https://celatone-api.alleslabs.dev/images/entities/icns"
-            }
-            borderRadius="full"
-            alt={publicDetail?.name ?? icnsName?.primary_name}
-            width={7}
-            height={7}
-          />
-        ) : (
-          <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
+    <Flex
+      justifyContent="space-between"
+      alignItems="center"
+      flexDirection={{ base: "column", lg: "row" }}
+    >
+      <Flex direction="column" gap={2} w={{ base: "full", lg: "auto" }}>
+        <Flex gap={1} minH="36px" align="center">
+          {publicDetail?.logo || icnsName?.primary_name ? (
+            <Image
+              src={
+                publicDetail?.logo ??
+                "https://celatone-api.alleslabs.dev/images/entities/icns"
+              }
+              borderRadius="full"
+              alt={publicDetail?.name ?? icnsName?.primary_name}
+              width={7}
+              height={7}
+            />
+          ) : (
+            <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
+          )}
+          <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
+            {publicName ?? displayName}
+          </Heading>
+        </Flex>
+        <Flex direction="column" gap={1}>
+          <Flex
+            gap={{ base: 0, md: 2 }}
+            mt={{ base: 1, md: 0 }}
+            direction={{ base: "column", md: "row" }}
+          >
+            <Text fontWeight={500} color="text.dark" variant="body2">
+              Wallet Address:
+            </Text>
+            <CopyLink
+              value={accountAddress}
+              amptrackSection="account_top"
+              type="user_address"
+            />
+          </Flex>
+          <Flex
+            gap={{ base: 0, md: 2 }}
+            mt={{ base: 1, md: 0 }}
+            direction={{ base: "column", md: "row" }}
+          >
+            <Text fontWeight={500} color="text.dark" variant="body2">
+              HEX:
+            </Text>
+            {/* TODO: HEX */}
+            <CopyLink
+              value={accountAddress}
+              amptrackSection="account_top"
+              type="user_address"
+            />
+          </Flex>
+        </Flex>
+        {icnsName?.primary_name && (
+          <Flex gap={2} align="center">
+            <Text fontWeight={500} color="text.dark" variant="body2">
+              Registered ICNS names:
+            </Text>
+            <Flex gap={1} align="center">
+              {icnsName.names.map((name) => (
+                <Flex
+                  key={name}
+                  align="center"
+                  direction="row"
+                  _after={{
+                    content: '"/"',
+                    fontSize: "14px",
+                  }}
+                  _last={{
+                    _after: {
+                      display: "none",
+                    },
+                  }}
+                  gap={1}
+                >
+                  {name === icnsName.primary_name && <PrimaryNameMark />}
+                  <CopyLink value={name} type="icns_names" withoutIcon />
+                </Flex>
+              ))}
+            </Flex>
+          </Flex>
         )}
-        <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
-          {publicName ?? displayName}
-        </Heading>
       </Flex>
-      <Flex
-        gap={{ base: 0, md: 2 }}
-        mt={{ base: 1, md: 0 }}
-        direction={{ base: "column", md: "row" }}
-      >
-        <Text fontWeight={500} color="text.dark" variant="body2">
-          Wallet Address:
-        </Text>
-        <CopyLink
-          value={accountAddress}
-          amptrackSection="account_top"
-          type="user_address"
-        />
+      <Flex mt={{ base: 4, lg: 0 }} w={{ base: "full", lg: "auto" }}>
+        <TotalAccountValue accountAddress={accountAddress} />
       </Flex>
-      {icnsName?.primary_name && (
-        <Flex gap={2} align="center">
-          <Text fontWeight={500} color="text.dark" variant="body2">
-            Registered ICNS names:
-          </Text>
-          <Flex gap={1} align="center">
-            {icnsName.names.map((name) => (
-              <Flex
-                key={name}
-                align="center"
-                direction="row"
-                _after={{
-                  content: '"/"',
-                  fontSize: "14px",
-                }}
-                _last={{
-                  _after: {
-                    display: "none",
-                  },
-                }}
-                gap={1}
-              >
-                {name === icnsName.primary_name && <PrimaryNameMark />}
-                <CopyLink value={name} type="icns_names" withoutIcon />
-              </Flex>
-            ))}
-          </Flex>
-        </Flex>
-      )}
     </Flex>
   );
 };
diff --git a/src/lib/pages/account-details/components/TotalAccountValue.tsx b/src/lib/pages/account-details/components/TotalAccountValue.tsx
index a04406164..f82c23da2 100644
--- a/src/lib/pages/account-details/components/TotalAccountValue.tsx
+++ b/src/lib/pages/account-details/components/TotalAccountValue.tsx
@@ -1,7 +1,6 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
+import { Flex, Heading, Skeleton, Text } from "@chakra-ui/react";
 
 import { useAccountTotalValue } from "../data";
-import { Loading } from "lib/components/Loading";
 import type { HumanAddr } from "lib/types";
 import { formatPrice } from "lib/utils";
 
@@ -14,17 +13,24 @@ export const TotalAccountValue = ({
   const { totalAccountValue, isLoading } = useAccountTotalValue(accountAddress);
   return (
     <Flex
-      pt={{ base: 6, md: 8 }}
-      pb={{ base: 2, md: 8 }}
+      p={4}
       direction="column"
-      borderBottom={{ base: "0px", md: "1px solid" }}
-      borderBottomColor={{ base: "transparent", md: "gray.700" }}
+      border="2px solid"
+      borderColor="gray.700"
+      borderRadius={4}
     >
       <Text variant="body2" fontWeight={500} color="text.dark">
         Total Account Value
       </Text>
       {isLoading ? (
-        <Loading />
+        <Skeleton
+          mt={1}
+          h={8}
+          w="full"
+          borderRadius={2}
+          startColor="gray.500"
+          endColor="gray.700"
+        />
       ) : (
         <Heading
           as="h5"
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
new file mode 100644
index 000000000..b055465f9
--- /dev/null
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -0,0 +1,69 @@
+import { Flex, SimpleGrid } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { ModuleCard } from "lib/components/module/ModuleCard";
+import { TableTitle, ViewMore } from "lib/components/table";
+
+interface ModuleListsProps {
+  onViewMore?: () => void;
+  totalAsset: number;
+}
+
+const ModuleTitle = ({
+  onViewMore,
+  totalAsset,
+}: {
+  onViewMore: ModuleListsProps["onViewMore"];
+  totalAsset: number;
+}) => {
+  const isMobile = useMobile();
+  if (isMobile && onViewMore)
+    return (
+      <Flex
+        justify="space-between"
+        w="full"
+        bg="gray.900"
+        borderRadius="8px"
+        p={4}
+        onClick={onViewMore}
+      >
+        <TableTitle title="Modules" count={totalAsset} mb={0} />
+        <CustomIcon name="chevron-right" color="gray.600" />
+      </Flex>
+    );
+  return (
+    <TableTitle
+      title="Module Instances"
+      helperText="Modules are ‘smart contracts' deployed by this account"
+      count={totalAsset}
+    />
+  );
+};
+export const ModuleLists = ({ onViewMore, totalAsset }: ModuleListsProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      direction="column"
+      mt={{ base: 4, md: 8 }}
+      mb={{ base: 0, md: 8 }}
+      width="full"
+    >
+      <ModuleTitle onViewMore={onViewMore} totalAsset={totalAsset} />
+      {!(isMobile && onViewMore) && (
+        <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
+          <ModuleCard />
+          <ModuleCard />
+          <ModuleCard />
+          <ModuleCard />
+          <ModuleCard />
+          <ModuleCard />
+          <ModuleCard />
+          <ModuleCard />
+          <ModuleCard />
+        </SimpleGrid>
+      )}
+      {!isMobile && onViewMore && <ViewMore onClick={onViewMore} />}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
new file mode 100644
index 000000000..b2b204989
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -0,0 +1,68 @@
+import { Flex, SimpleGrid } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { ResourceCard } from "lib/components/resource/ResourceCard";
+import { TableTitle, ViewMore } from "lib/components/table";
+
+interface ResourcesListsProps {
+  onViewMore?: () => void;
+  totalAsset: number;
+}
+const ResourceTitle = ({
+  onViewMore,
+  totalAsset,
+}: {
+  onViewMore: ResourcesListsProps["onViewMore"];
+  totalAsset: number;
+}) => {
+  const isMobile = useMobile();
+  if (!isMobile && !onViewMore) return null;
+  if (isMobile && onViewMore)
+    return (
+      <Flex
+        justify="space-between"
+        w="full"
+        bg="gray.900"
+        borderRadius="8px"
+        p={4}
+        onClick={onViewMore}
+      >
+        <TableTitle title="Resources" count={totalAsset} mb={0} />
+        <CustomIcon name="chevron-right" color="gray.600" />
+      </Flex>
+    );
+  return (
+    <TableTitle
+      helperText="Resources stored in this account"
+      title="Resources"
+      count={totalAsset}
+    />
+  );
+};
+export const ResourceLists = ({
+  onViewMore,
+  totalAsset,
+}: ResourcesListsProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      direction="column"
+      mt={{ base: 4, md: 8 }}
+      mb={{ base: 0, md: 8 }}
+      width="full"
+    >
+      <ResourceTitle onViewMore={onViewMore} totalAsset={totalAsset} />
+      {!isMobile && (
+        // TODO: data
+        <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
+          <ResourceCard name="resource ja" amount={3} />
+          <ResourceCard name="resource ja" amount={3} />
+          <ResourceCard name="resource ja" amount={3} />
+          <ResourceCard name="resource ja" amount={3} />
+        </SimpleGrid>
+      )}
+      {!isMobile && onViewMore && <ViewMore onClick={onViewMore} />}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
new file mode 100644
index 000000000..2f98adb7e
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -0,0 +1,82 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  Badge,
+  Flex,
+  Heading,
+  Text,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+import { ResourceCard } from "lib/components/resource/ResourceCard";
+import { ResourceDetailCard } from "lib/components/resource/ResourceDetailCard";
+import { TableTitle } from "lib/components/table";
+
+export const ResourceSection = () => {
+  return (
+    <Flex direction="column" mt={8}>
+      <TableTitle
+        helperText="Resources stored in this account"
+        title="Resources"
+        count={12}
+      />
+      <Flex gap={6} flexDirection={{ base: "column", md: "row" }}>
+        <Flex width={{ base: "full", md: 80 }}>
+          <Accordion defaultIndex={[0]} allowToggle width="full">
+            <AccordionItem mb={4}>
+              <AccordionButton>
+                <Flex p={4} justifyContent="space-between" w="full">
+                  <Text variant="body1" fontWeight={600}>
+                    0x1
+                  </Text>
+                  <CustomIcon name="chevron-down" color="gray.600" />
+                </Flex>
+              </AccordionButton>
+              <AccordionPanel>
+                <Flex direction="column" gap={3}>
+                  <ResourceCard hasBorder name="beeb" amount={2} />
+                  <ResourceCard isSelected hasBorder name="beeb" amount={2} />
+                  <ResourceCard hasBorder name="beeb" amount={2} />
+                  <ResourceCard hasBorder name="beeb" amount={2} />
+                </Flex>
+              </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem mb={4}>
+              <AccordionButton>
+                <Flex p={4} justifyContent="space-between" w="full">
+                  <Text variant="body1" fontWeight={600}>
+                    0x2
+                  </Text>
+                  <CustomIcon name="chevron-down" color="gray.600" />
+                </Flex>
+              </AccordionButton>
+              <AccordionPanel>
+                <Flex direction="column" gap={3}>
+                  <ResourceCard hasBorder name="beeb" amount={2} />
+                  <ResourceCard isSelected hasBorder name="beeb" amount={2} />
+                  <ResourceCard hasBorder name="beeb" amount={2} />
+                  <ResourceCard hasBorder name="beeb" amount={2} />
+                </Flex>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+        </Flex>
+        <Flex direction="column" w="full">
+          <Flex alignItems="center" pb={6}>
+            <Heading as="h6" variant="h6">
+              0x1::dex
+            </Heading>
+            <Badge variant="primary" ml={2}>
+              9
+            </Badge>
+          </Flex>
+          <Flex>
+            <ResourceDetailCard name="test" />
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index bc69af68d..d60142cad 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -11,6 +11,7 @@ import { useCallback, useEffect } from "react";
 
 import {
   useInternalNavigate,
+  useMoveConfig,
   useValidateAddress,
   useWasmConfig,
 } from "lib/app-provider";
@@ -34,6 +35,9 @@ import { getFirstQueryParam, truncate } from "lib/utils";
 import { AccountHeader } from "./components/AccountHeader";
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
+import { ModuleLists } from "./components/modules/ModuleLists";
+import { ResourceLists } from "./components/resources/ResourceLists";
+import { ResourceSection } from "./components/resources/ResourceSection";
 import {
   AdminContractsTable,
   InstantiatedContractsTable,
@@ -41,7 +45,6 @@ import {
   StoredCodesTable,
   TxsTable,
 } from "./components/tables";
-import { TotalAccountValue } from "./components/TotalAccountValue";
 
 const tableHeaderId = "accountDetailsTab";
 
@@ -49,10 +52,13 @@ enum TabIndex {
   Overview = "overview",
   Assets = "assets",
   Delegations = "delegations",
+  NFTs = "ntfs",
   Txs = "txs",
   Codes = "codes",
   Contracts = "contracts",
   Admins = "admins",
+  Resources = "resouces",
+  Modules = "modules",
   Proposals = "proposals",
 }
 
@@ -64,6 +70,7 @@ const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 
 const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
   const wasm = useWasmConfig({ shouldRedirect: false });
+  const move = useMoveConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
   const router = useRouter();
   // TODO: remove assertion later
@@ -187,6 +194,14 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           <CustomTab onClick={handleTabChange(TabIndex.Delegations)}>
             Delegations
           </CustomTab>
+          <CustomTab
+            count={tableCounts.txsCount}
+            isDisabled={txCountLoading || tableCounts.txsCount === 0}
+            onClick={handleTabChange(TabIndex.NFTs)}
+            hidden={!move.enabled}
+          >
+            NFTs
+          </CustomTab>
           <CustomTab
             count={tableCounts.txsCount}
             isDisabled={txCountLoading || tableCounts.txsCount === 0}
@@ -218,6 +233,22 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           >
             Admins
           </CustomTab>
+          <CustomTab
+            count={tableCounts.txsCount}
+            isDisabled={txCountLoading || tableCounts.txsCount === 0}
+            onClick={handleTabChange(TabIndex.Resources)}
+            hidden={!move.enabled}
+          >
+            Resources
+          </CustomTab>
+          <CustomTab
+            count={tableCounts.txsCount}
+            isDisabled={txCountLoading || tableCounts.txsCount === 0}
+            onClick={handleTabChange(TabIndex.Modules)}
+            hidden={!move.enabled}
+          >
+            Modules
+          </CustomTab>
           <CustomTab
             count={tableCounts.proposalsCount}
             isDisabled={!tableCounts.proposalsCount}
@@ -228,7 +259,6 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
-            <TotalAccountValue accountAddress={accountAddress} />
             <Flex borderBottom="1px solid" borderBottomColor="gray.700">
               <AssetsSection
                 walletAddress={accountAddress}
@@ -274,6 +304,18 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
                 />
               </>
             )}
+            {move.enabled && (
+              <>
+                <ResourceLists
+                  totalAsset={0}
+                  onViewMore={handleTabChange(TabIndex.Resources)}
+                />
+                <ModuleLists
+                  totalAsset={0}
+                  onViewMore={handleTabChange(TabIndex.Modules)}
+                />
+              </>
+            )}
             <OpenedProposalsTable
               walletAddress={accountAddress}
               scrollComponentId={tableHeaderId}
@@ -288,6 +330,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           <TabPanel p={0}>
             <DelegationsSection walletAddress={accountAddress} />
           </TabPanel>
+          <TabPanel p={0}>nft</TabPanel>
           <TabPanel p={0}>
             <TxsTable accountId={accountId} scrollComponentId={tableHeaderId} />
           </TabPanel>
@@ -315,6 +358,12 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               refetchCount={refetchContractsAdminCount}
             />
           </TabPanel>
+          <TabPanel p={0}>
+            <ResourceSection />
+          </TabPanel>
+          <TabPanel p={0}>
+            <ModuleLists totalAsset={0} />
+          </TabPanel>
           <TabPanel p={0}>
             <OpenedProposalsTable
               walletAddress={accountAddress}

From 873166b17efafc5e4f3f4087d3cce8cf71f6e3d0 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 4 Sep 2023 15:58:49 +0700
Subject: [PATCH 015/368] feat(components): module detail overview

---
 src/lib/components/Breadcrumb.tsx             |   1 -
 .../module-details/components/ModuleInfo.tsx  | 168 +++++++++++++++
 .../components/ModuleSourceCode.tsx           |  50 +++++
 .../module-details/components/ModuleTop.tsx   | 197 ++++++++++++++++++
 .../module-details/components/QuickAccess.tsx |  62 ++++++
 src/lib/pages/module-details/index.tsx        | 109 ++++++++++
 .../[network]/modules/[modulePath]/[tab].tsx  |   3 +
 .../modules/[modulePath]}/index.tsx           |   0
 src/pages/[network]/modules/index.tsx         |   3 -
 src/pages/modules/[modulePath]/[tab].tsx      |   3 +
 src/pages/modules/[modulePath]/index.tsx      |   3 +
 11 files changed, 595 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/pages/module-details/components/ModuleInfo.tsx
 create mode 100644 src/lib/pages/module-details/components/ModuleSourceCode.tsx
 create mode 100644 src/lib/pages/module-details/components/ModuleTop.tsx
 create mode 100644 src/lib/pages/module-details/components/QuickAccess.tsx
 create mode 100644 src/lib/pages/module-details/index.tsx
 create mode 100644 src/pages/[network]/modules/[modulePath]/[tab].tsx
 rename src/pages/{modules => [network]/modules/[modulePath]}/index.tsx (100%)
 delete mode 100644 src/pages/[network]/modules/index.tsx
 create mode 100644 src/pages/modules/[modulePath]/[tab].tsx
 create mode 100644 src/pages/modules/[modulePath]/index.tsx

diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
index e7d3265ec..569fd1a62 100644
--- a/src/lib/components/Breadcrumb.tsx
+++ b/src/lib/components/Breadcrumb.tsx
@@ -47,7 +47,6 @@ export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
             variant={{ base: "body3", md: "body2" }}
             className="ellipsis"
             fontWeight={600}
-            width="250px"
             color="text.dark"
           >
             {item.text}
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
new file mode 100644
index 000000000..a56a16ec4
--- /dev/null
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -0,0 +1,168 @@
+import {
+  Flex,
+  Heading,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
+
+import { CustomTab } from "lib/components/CustomTab";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { LabelText } from "lib/components/LabelText";
+import { useContractDetailsTableCounts } from "lib/model/contract";
+import {
+  MigrationTable,
+  RelatedProposalsTable,
+  TxsTable,
+} from "lib/pages/contract-details/components/tables";
+import { useAccountId } from "lib/services/accountService";
+import type { ContractAddr } from "lib/types";
+
+import { ModuleSourceCode } from "./ModuleSourceCode";
+
+interface ModuleInfoProps {
+  isVerified?: boolean;
+  contractAddress?: ContractAddr;
+}
+
+export const ModuleInfo = ({
+  isVerified = false,
+  contractAddress = "" as ContractAddr,
+}: ModuleInfoProps) => {
+  const { data: contractAccountId } = useAccountId(contractAddress);
+  const tableHeaderId = "ModuleTxsTableHeader";
+  const {
+    tableCounts,
+    refetchMigration,
+    refetchTransactions,
+    refetchRelatedProposals,
+  } = useContractDetailsTableCounts(contractAddress);
+  return (
+    <Flex flexDirection="column" gap={4}>
+      <Flex justifyContent="space-between" alignItems="center" w="full">
+        <Heading as="h6" variant="h6" fontWeight={800}>
+          Module Information
+        </Heading>
+        {isVerified && (
+          <Flex alignItems="center" gap={1}>
+            <CustomIcon name="check-circle-solid" color="success.main" />
+            <Text variant="body2" color="text.dark">
+              This module&#39;s verification is supported by its provided source
+              code.
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+      {/* TODO data */}
+      <Flex p={4} borderRadius={8} border="1px solid" borderColor="gray.700">
+        <LabelText flex="1" label="Upgrade Policy">
+          ARBITRARY
+        </LabelText>
+        <LabelText
+          flex="1"
+          label="Initial Published Block Height"
+          helperText1="formatUTC(createdTime)"
+          helperText2="dateFromNow(createdTime)"
+        >
+          <ExplorerLink
+            type="block_height"
+            value="1234567"
+            showCopyOnHover
+            fixedHeight
+          />
+        </LabelText>
+        <LabelText
+          flex="1"
+          label="Initial Published by"
+          helperText1="(Account Address)"
+        >
+          <ExplorerLink
+            type="user_address"
+            value="cltn1...7tlju97"
+            showCopyOnHover
+            fixedHeight
+          />
+        </LabelText>
+        <LabelText flex="1" label="Initial Published Transaction">
+          <ExplorerLink
+            type="tx_hash"
+            value="7F8FD8...3A804"
+            showCopyOnHover
+            fixedHeight
+          />
+        </LabelText>
+        <LabelText
+          flex="1"
+          label="Initial Published Proposal ID"
+          helperText1="TODO Published DAO Module"
+        >
+          <ExplorerLink
+            value="1234"
+            showCopyOnHover
+            fixedHeight
+            type="proposal_id"
+          />
+        </LabelText>
+      </Flex>
+      <ModuleSourceCode />
+      <Flex flexDirection="column" mt={6}>
+        <Heading
+          as="h6"
+          variant="h6"
+          mb={6}
+          fontWeight={800}
+          id={tableHeaderId}
+        >
+          History
+        </Heading>
+        <Tabs isLazy lazyBehavior="keepMounted">
+          <TabList
+            borderBottom="1px solid"
+            borderColor="gray.700"
+            overflowX={{ base: "scroll", md: "auto" }}
+          >
+            <CustomTab count={tableCounts.transactionsCount}>
+              Transactions
+            </CustomTab>
+            <CustomTab count={tableCounts.migrationCount}>Migrations</CustomTab>
+            <CustomTab
+              count={tableCounts.relatedProposalsCount}
+              whiteSpace="nowrap"
+            >
+              Related Proposals
+            </CustomTab>
+          </TabList>
+          <TabPanels>
+            <TabPanel p={0}>
+              <TxsTable
+                contractAccountId={contractAccountId}
+                scrollComponentId={tableHeaderId}
+                totalData={tableCounts.transactionsCount}
+                refetchCount={refetchTransactions}
+              />
+            </TabPanel>
+            <TabPanel p={0}>
+              <MigrationTable
+                contractAddress={contractAddress}
+                scrollComponentId={tableHeaderId}
+                totalData={tableCounts.migrationCount}
+                refetchCount={refetchMigration}
+              />
+            </TabPanel>
+            <TabPanel p={0}>
+              <RelatedProposalsTable
+                contractAddress={contractAddress}
+                scrollComponentId={tableHeaderId}
+                totalData={tableCounts.relatedProposalsCount}
+                refetchCount={refetchRelatedProposals}
+              />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/module-details/components/ModuleSourceCode.tsx b/src/lib/pages/module-details/components/ModuleSourceCode.tsx
new file mode 100644
index 000000000..a1b2dda15
--- /dev/null
+++ b/src/lib/pages/module-details/components/ModuleSourceCode.tsx
@@ -0,0 +1,50 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Button,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+export const ModuleSourceCode = () => {
+  return (
+    <Flex>
+      <Accordion allowToggle w="full" defaultIndex={[0]}>
+        <AccordionItem>
+          <AccordionButton p={4}>
+            <Flex justifyContent="space-between" w="full">
+              <Flex flexDirection="column" alignItems="start">
+                <Text fontWeight={600} variant="body1" color="text.main">
+                  Module Source Code
+                </Text>
+                <Text fontWeight={600} variant="body2" color="text.dark">
+                  The source code is uploaded by the deployer and pulled from
+                  Initia API
+                </Text>
+              </Flex>
+              <Flex alignItems="center" gap={2}>
+                <Button
+                  variant="outline-primary"
+                  w={{ base: "full", md: "auto" }}
+                  leftIcon={<CustomIcon name="copy" />}
+                  size="sm"
+                >
+                  Copy
+                </Button>
+                <AccordionIcon color="gray.600" ml="auto" />
+              </Flex>
+            </Flex>
+          </AccordionButton>
+          <AccordionPanel>
+            <Text>TODO JSON INPUT HERE</Text>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
new file mode 100644
index 000000000..d54e4bff2
--- /dev/null
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -0,0 +1,197 @@
+import { Button, Flex, Heading, Text } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { Breadcrumb } from "lib/components/Breadcrumb";
+import { CopyLink } from "lib/components/CopyLink";
+import { CustomIcon } from "lib/components/icon";
+import { Tooltip } from "lib/components/Tooltip";
+
+interface ModuleTopProps {
+  isVerified?: boolean;
+}
+
+export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
+  const isMobile = useMobile();
+  //   TODO Name
+  const displayName = "Module Name";
+
+  return (
+    <Flex direction="column">
+      <Breadcrumb
+        items={[
+          { text: "TODO Account Address", href: "/" },
+          { text: "Module" },
+          { text: "Module Name" },
+        ]}
+      />
+      <Flex
+        justify="space-between"
+        mt={{ base: 3, md: 6 }}
+        direction={{ base: "column", md: "row" }}
+        gap={{ md: 4 }}
+      >
+        <Flex
+          direction="column"
+          textOverflow="ellipsis"
+          gap={{ base: 2, md: 1 }}
+        >
+          <Flex
+            gap={1}
+            align={{ base: "start", md: "center" }}
+            maxW={{ md: "670px" }}
+          >
+            <CustomIcon
+              name="contract-address"
+              boxSize={5}
+              color="secondary.main"
+            />
+            <Heading
+              as="h5"
+              mt={{ base: 1, md: 0 }}
+              ml={{ base: 1, md: 0 }}
+              variant={{ base: "h6", md: "h5" }}
+              className={!isMobile ? "ellipsis" : ""}
+            >
+              {displayName}
+            </Heading>
+            {isVerified && (
+              <Tooltip label="This module's verification is supported by its provided source code.">
+                <Flex>
+                  <CustomIcon
+                    name="check-circle-solid"
+                    boxSize={5}
+                    color="success.main"
+                  />
+                </Flex>
+              </Tooltip>
+            )}
+          </Flex>
+          <Flex
+            mt={{ base: 2, md: 0 }}
+            gap={{ base: 0, md: 2 }}
+            direction={{ base: "column", md: "row" }}
+          >
+            <Text
+              color="text.dark"
+              variant="body2"
+              fontWeight={500}
+              whiteSpace="nowrap"
+            >
+              Module Path:
+            </Text>
+            {/* TODO module path */}
+            <Flex>
+              <Text
+                color="text.main"
+                variant="body2"
+                fontWeight={500}
+                whiteSpace="nowrap"
+              >
+                cltn13a2sywe6g4a9w84g98w4g1dasdrfafdstlju97::
+              </Text>
+              <Text
+                color="text.main"
+                variant="body2"
+                fontWeight={500}
+                whiteSpace="nowrap"
+              >
+                beeb
+              </Text>
+            </Flex>
+          </Flex>
+          <Flex
+            mt={{ base: 2, md: 0 }}
+            gap={{ base: 0, md: 2 }}
+            direction={{ base: "column", md: "row" }}
+          >
+            <Text
+              color="text.dark"
+              variant="body2"
+              fontWeight={500}
+              whiteSpace="nowrap"
+            >
+              Creator:
+            </Text>
+            {/* TODO Creator */}
+            <CopyLink
+              value="cltn1m9y7um59yxtmek68qkwg3ykm28s52rrell6prx"
+              amptrackSection="contract_top"
+              type="contract_address"
+            />
+          </Flex>
+          <Flex
+            mt={{ base: 2, md: 0 }}
+            gap={{ base: 0, md: 2 }}
+            direction={{ base: "column", md: "row" }}
+          >
+            <Text
+              color="text.dark"
+              variant="body2"
+              fontWeight={500}
+              whiteSpace="nowrap"
+            >
+              Friends:
+            </Text>
+            {/* TODO Friends */}
+            <Flex gap={1}>
+              <Text
+                color="text.dark"
+                variant="body2"
+                fontWeight={500}
+                whiteSpace="nowrap"
+              >
+                0x1::any,
+              </Text>
+              <Text
+                color="text.dark"
+                variant="body2"
+                fontWeight={500}
+                whiteSpace="nowrap"
+              >
+                0x1::copyable_any
+              </Text>
+              <Text
+                color="text.dark"
+                variant="body2"
+                fontWeight={500}
+                whiteSpace="nowrap"
+              >
+                0x1::copyable_any::function_name
+              </Text>
+            </Flex>
+          </Flex>
+        </Flex>
+        <Flex
+          gap={{ base: 2, md: 4 }}
+          mt={{ base: 8, md: 0 }}
+          w={{ base: "full", md: "auto" }}
+        >
+          <Button
+            variant="outline-primary"
+            w={{ base: "full", md: "auto" }}
+            leftIcon={<CustomIcon name="query" />}
+            size={{ base: "sm", md: "md" }}
+          >
+            View
+          </Button>
+          <Button
+            variant="outline-primary"
+            w={{ base: "full", md: "auto" }}
+            leftIcon={<CustomIcon name="execute" />}
+            size={{ base: "sm", md: "md" }}
+          >
+            Execute
+          </Button>
+          <Button
+            variant="outline-primary"
+            w={{ base: "full", md: "auto" }}
+            leftIcon={<CustomIcon name="copy" />}
+            size={{ base: "sm", md: "md" }}
+          >
+            Copy ABI
+          </Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/module-details/components/QuickAccess.tsx b/src/lib/pages/module-details/components/QuickAccess.tsx
new file mode 100644
index 000000000..1d3d798a6
--- /dev/null
+++ b/src/lib/pages/module-details/components/QuickAccess.tsx
@@ -0,0 +1,62 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+
+import { CustomIcon, type IconKeys } from "lib/components/icon";
+
+interface ActionInfo {
+  icon: IconKeys;
+  iconColor: string;
+  name: string;
+  count: number;
+}
+
+export const QuickAccess = () => {
+  const actionList: ActionInfo[] = [
+    {
+      icon: "query" as IconKeys,
+      iconColor: "primary.main",
+      name: "View Functions",
+      count: 430,
+    },
+    {
+      icon: "execute" as IconKeys,
+      iconColor: "accent.main",
+      name: "Execute Functions",
+      count: 30,
+    },
+    {
+      icon: "list" as IconKeys,
+      iconColor: "gray.600",
+      name: "Transactions",
+      count: 30,
+    },
+  ];
+
+  return (
+    <Flex justifyContent="space-between" gap={6}>
+      {actionList.map((item) => (
+        // TODO Navigate to tab
+        <Flex
+          p={4}
+          bg="gray.800"
+          borderRadius={8}
+          w="full"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Flex gap={3} alignItems="center">
+            <CustomIcon name={item.icon} boxSize={6} color={item.iconColor} />
+            <Flex flexDirection="column">
+              <Text variant="body1" color="text.dark" fontWeight={600}>
+                {item.name}
+              </Text>
+              <Heading as="h6" variant="h6" fontWeight={800}>
+                {item.count}
+              </Heading>
+            </Flex>
+          </Flex>
+          <CustomIcon name="chevron-right" color="gray.600" />
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
new file mode 100644
index 000000000..a79b296ee
--- /dev/null
+++ b/src/lib/pages/module-details/index.tsx
@@ -0,0 +1,109 @@
+import { Flex, Tabs, TabList, TabPanel, TabPanels } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useCallback, useEffect } from "react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { CustomTab } from "lib/components/CustomTab";
+import PageContainer from "lib/components/PageContainer";
+import { AmpTrackUseTab } from "lib/services/amplitude";
+import { getFirstQueryParam } from "lib/utils";
+
+import { ModuleInfo } from "./components/ModuleInfo";
+import { ModuleTop } from "./components/ModuleTop";
+import { QuickAccess } from "./components/QuickAccess";
+
+interface ModuleDetailsProps {
+  modulePath: string;
+}
+
+const tableHeaderId = "moduleDetailsTab";
+export enum TabIndex {
+  Overview = "overview",
+  Function = "function",
+  Txs = "txs",
+  Structs = "structs",
+}
+export const ModuleDetails = ({
+  modulePath = "moduletest",
+}: ModuleDetailsProps) => {
+  const navigate = useInternalNavigate();
+  const router = useRouter();
+  const tab = getFirstQueryParam(router.query.tab) as TabIndex;
+
+  const handleTabChange = useCallback(
+    (nextTab: TabIndex) => () => {
+      if (nextTab === tab) return;
+      AmpTrackUseTab(nextTab);
+      navigate({
+        pathname: "/modules/[modulePath]/[tab]",
+        query: {
+          modulePath,
+          tab: nextTab,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [modulePath, tab, navigate]
+  );
+
+  useEffect(() => {
+    if (router.isReady && (!tab || !Object.values(TabIndex).includes(tab))) {
+      navigate({
+        replace: true,
+        pathname: "/modules/[modulePath]/[tab]",
+        query: {
+          modulePath,
+          tab: TabIndex.Overview,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    }
+  }, [router.isReady, tab, modulePath, navigate]);
+
+  return (
+    <PageContainer>
+      <ModuleTop isVerified />
+      <Tabs
+        index={Object.values(TabIndex).indexOf(tab)}
+        isLazy
+        lazyBehavior="keepMounted"
+      >
+        <TabList
+          my={8}
+          borderBottom="1px solid"
+          borderColor="gray.700"
+          overflowX="scroll"
+          id={tableHeaderId}
+        >
+          <CustomTab onClick={handleTabChange(TabIndex.Overview)}>
+            Overview
+          </CustomTab>
+          <CustomTab count={12} onClick={handleTabChange(TabIndex.Function)}>
+            Function
+          </CustomTab>
+          <CustomTab count={12} onClick={handleTabChange(TabIndex.Txs)}>
+            Transactions
+          </CustomTab>
+          <CustomTab count={12} onClick={handleTabChange(TabIndex.Structs)}>
+            Structs
+          </CustomTab>
+        </TabList>
+        <TabPanels>
+          <TabPanel p={0}>
+            <Flex gap={6} flexDirection="column">
+              <QuickAccess />
+              <ModuleInfo isVerified contractAddress={undefined} />
+            </Flex>
+          </TabPanel>
+          <TabPanel p={0}>2</TabPanel>
+          <TabPanel p={0}>3</TabPanel>
+          <TabPanel p={0}>4</TabPanel>
+        </TabPanels>
+      </Tabs>
+    </PageContainer>
+  );
+};
diff --git a/src/pages/[network]/modules/[modulePath]/[tab].tsx b/src/pages/[network]/modules/[modulePath]/[tab].tsx
new file mode 100644
index 000000000..d5deadd8b
--- /dev/null
+++ b/src/pages/[network]/modules/[modulePath]/[tab].tsx
@@ -0,0 +1,3 @@
+import { ModuleDetails } from "lib/pages/module-details";
+
+export default ModuleDetails;
diff --git a/src/pages/modules/index.tsx b/src/pages/[network]/modules/[modulePath]/index.tsx
similarity index 100%
rename from src/pages/modules/index.tsx
rename to src/pages/[network]/modules/[modulePath]/index.tsx
diff --git a/src/pages/[network]/modules/index.tsx b/src/pages/[network]/modules/index.tsx
deleted file mode 100644
index 9d66bb8ef..000000000
--- a/src/pages/[network]/modules/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Modules from "pages/modules";
-
-export default Modules;
diff --git a/src/pages/modules/[modulePath]/[tab].tsx b/src/pages/modules/[modulePath]/[tab].tsx
new file mode 100644
index 000000000..d5deadd8b
--- /dev/null
+++ b/src/pages/modules/[modulePath]/[tab].tsx
@@ -0,0 +1,3 @@
+import { ModuleDetails } from "lib/pages/module-details";
+
+export default ModuleDetails;
diff --git a/src/pages/modules/[modulePath]/index.tsx b/src/pages/modules/[modulePath]/index.tsx
new file mode 100644
index 000000000..49cccb88d
--- /dev/null
+++ b/src/pages/modules/[modulePath]/index.tsx
@@ -0,0 +1,3 @@
+import { Modules } from "lib/pages/modules";
+
+export default Modules;

From f0ca9825a6fe1a760c10c55c026dd8f630a628ec Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 4 Sep 2023 16:06:04 +0700
Subject: [PATCH 016/368] feat(components): add txs table in module detail

---
 .../module-details/components/ModuleInfo.tsx  |  88 +----------
 src/lib/pages/module-details/index.tsx        | 148 +++++++++++++++++-
 2 files changed, 146 insertions(+), 90 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index a56a16ec4..1848f68d3 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -1,45 +1,16 @@
-import {
-  Flex,
-  Heading,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  Text,
-} from "@chakra-ui/react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
 
-import { CustomTab } from "lib/components/CustomTab";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
-import { useContractDetailsTableCounts } from "lib/model/contract";
-import {
-  MigrationTable,
-  RelatedProposalsTable,
-  TxsTable,
-} from "lib/pages/contract-details/components/tables";
-import { useAccountId } from "lib/services/accountService";
-import type { ContractAddr } from "lib/types";
 
 import { ModuleSourceCode } from "./ModuleSourceCode";
 
 interface ModuleInfoProps {
   isVerified?: boolean;
-  contractAddress?: ContractAddr;
 }
 
-export const ModuleInfo = ({
-  isVerified = false,
-  contractAddress = "" as ContractAddr,
-}: ModuleInfoProps) => {
-  const { data: contractAccountId } = useAccountId(contractAddress);
-  const tableHeaderId = "ModuleTxsTableHeader";
-  const {
-    tableCounts,
-    refetchMigration,
-    refetchTransactions,
-    refetchRelatedProposals,
-  } = useContractDetailsTableCounts(contractAddress);
+export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
   return (
     <Flex flexDirection="column" gap={4}>
       <Flex justifyContent="space-between" alignItems="center" w="full">
@@ -108,61 +79,6 @@ export const ModuleInfo = ({
         </LabelText>
       </Flex>
       <ModuleSourceCode />
-      <Flex flexDirection="column" mt={6}>
-        <Heading
-          as="h6"
-          variant="h6"
-          mb={6}
-          fontWeight={800}
-          id={tableHeaderId}
-        >
-          History
-        </Heading>
-        <Tabs isLazy lazyBehavior="keepMounted">
-          <TabList
-            borderBottom="1px solid"
-            borderColor="gray.700"
-            overflowX={{ base: "scroll", md: "auto" }}
-          >
-            <CustomTab count={tableCounts.transactionsCount}>
-              Transactions
-            </CustomTab>
-            <CustomTab count={tableCounts.migrationCount}>Migrations</CustomTab>
-            <CustomTab
-              count={tableCounts.relatedProposalsCount}
-              whiteSpace="nowrap"
-            >
-              Related Proposals
-            </CustomTab>
-          </TabList>
-          <TabPanels>
-            <TabPanel p={0}>
-              <TxsTable
-                contractAccountId={contractAccountId}
-                scrollComponentId={tableHeaderId}
-                totalData={tableCounts.transactionsCount}
-                refetchCount={refetchTransactions}
-              />
-            </TabPanel>
-            <TabPanel p={0}>
-              <MigrationTable
-                contractAddress={contractAddress}
-                scrollComponentId={tableHeaderId}
-                totalData={tableCounts.migrationCount}
-                refetchCount={refetchMigration}
-              />
-            </TabPanel>
-            <TabPanel p={0}>
-              <RelatedProposalsTable
-                contractAddress={contractAddress}
-                scrollComponentId={tableHeaderId}
-                totalData={tableCounts.relatedProposalsCount}
-                refetchCount={refetchRelatedProposals}
-              />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
-      </Flex>
     </Flex>
   );
 };
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index a79b296ee..21da71f17 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -1,11 +1,26 @@
-import { Flex, Tabs, TabList, TabPanel, TabPanels } from "@chakra-ui/react";
+import {
+  Flex,
+  Tabs,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Heading,
+} from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 
+import {
+  MigrationTable,
+  RelatedProposalsTable,
+  TxsTable,
+} from "../contract-details/components/tables";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import PageContainer from "lib/components/PageContainer";
+import { useContractDetailsTableCounts } from "lib/model/contract";
+import { useAccountId } from "lib/services/accountService";
 import { AmpTrackUseTab } from "lib/services/amplitude";
+import type { ContractAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import { ModuleInfo } from "./components/ModuleInfo";
@@ -63,7 +78,15 @@ export const ModuleDetails = ({
       });
     }
   }, [router.isReady, tab, modulePath, navigate]);
-
+  const contractAddress = "" as ContractAddr;
+  const { data: contractAccountId } = useAccountId(contractAddress);
+  const txTableHeaderId = "ModuleTxsTableHeader";
+  const {
+    tableCounts,
+    refetchMigration,
+    refetchTransactions,
+    refetchRelatedProposals,
+  } = useContractDetailsTableCounts(contractAddress);
   return (
     <PageContainer>
       <ModuleTop isVerified />
@@ -96,11 +119,128 @@ export const ModuleDetails = ({
           <TabPanel p={0}>
             <Flex gap={6} flexDirection="column">
               <QuickAccess />
-              <ModuleInfo isVerified contractAddress={undefined} />
+              <ModuleInfo isVerified />
+              {/* TODO History */}
+              <Flex flexDirection="column" mt={6}>
+                <Heading
+                  as="h6"
+                  variant="h6"
+                  mb={6}
+                  fontWeight={800}
+                  id={tableHeaderId}
+                >
+                  History
+                </Heading>
+                <Tabs isLazy lazyBehavior="keepMounted">
+                  <TabList
+                    borderBottom="1px solid"
+                    borderColor="gray.700"
+                    overflowX={{ base: "scroll", md: "auto" }}
+                  >
+                    <CustomTab count={tableCounts.transactionsCount}>
+                      Transactions
+                    </CustomTab>
+                    <CustomTab count={tableCounts.migrationCount}>
+                      Migrations
+                    </CustomTab>
+                    <CustomTab
+                      count={tableCounts.relatedProposalsCount}
+                      whiteSpace="nowrap"
+                    >
+                      Related Proposals
+                    </CustomTab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel p={0}>
+                      <TxsTable
+                        contractAccountId={contractAccountId}
+                        scrollComponentId={txTableHeaderId}
+                        totalData={tableCounts.transactionsCount}
+                        refetchCount={refetchTransactions}
+                      />
+                    </TabPanel>
+                    <TabPanel p={0}>
+                      <MigrationTable
+                        contractAddress={contractAddress}
+                        scrollComponentId={txTableHeaderId}
+                        totalData={tableCounts.migrationCount}
+                        refetchCount={refetchMigration}
+                      />
+                    </TabPanel>
+                    <TabPanel p={0}>
+                      <RelatedProposalsTable
+                        contractAddress={contractAddress}
+                        scrollComponentId={txTableHeaderId}
+                        totalData={tableCounts.relatedProposalsCount}
+                        refetchCount={refetchRelatedProposals}
+                      />
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
+              </Flex>
             </Flex>
           </TabPanel>
           <TabPanel p={0}>2</TabPanel>
-          <TabPanel p={0}>3</TabPanel>
+          <TabPanel p={0}>
+            {/* TODO History */}
+            <Flex flexDirection="column" mt={6}>
+              <Heading
+                as="h6"
+                variant="h6"
+                mb={6}
+                fontWeight={800}
+                id={tableHeaderId}
+              >
+                History
+              </Heading>
+              <Tabs isLazy lazyBehavior="keepMounted">
+                <TabList
+                  borderBottom="1px solid"
+                  borderColor="gray.700"
+                  overflowX={{ base: "scroll", md: "auto" }}
+                >
+                  <CustomTab count={tableCounts.transactionsCount}>
+                    Transactions
+                  </CustomTab>
+                  <CustomTab count={tableCounts.migrationCount}>
+                    Migrations
+                  </CustomTab>
+                  <CustomTab
+                    count={tableCounts.relatedProposalsCount}
+                    whiteSpace="nowrap"
+                  >
+                    Related Proposals
+                  </CustomTab>
+                </TabList>
+                <TabPanels>
+                  <TabPanel p={0}>
+                    <TxsTable
+                      contractAccountId={contractAccountId}
+                      scrollComponentId={txTableHeaderId}
+                      totalData={tableCounts.transactionsCount}
+                      refetchCount={refetchTransactions}
+                    />
+                  </TabPanel>
+                  <TabPanel p={0}>
+                    <MigrationTable
+                      contractAddress={contractAddress}
+                      scrollComponentId={txTableHeaderId}
+                      totalData={tableCounts.migrationCount}
+                      refetchCount={refetchMigration}
+                    />
+                  </TabPanel>
+                  <TabPanel p={0}>
+                    <RelatedProposalsTable
+                      contractAddress={contractAddress}
+                      scrollComponentId={txTableHeaderId}
+                      totalData={tableCounts.relatedProposalsCount}
+                      refetchCount={refetchRelatedProposals}
+                    />
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </Flex>
+          </TabPanel>
           <TabPanel p={0}>4</TabPanel>
         </TabPanels>
       </Tabs>

From 665f9f0b1876ee59e3b7dbd5214d32a01e240598 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 4 Sep 2023 16:52:21 +0700
Subject: [PATCH 017/368] feat: initia select module drawer wireup

---
 CHANGELOG.md                                  |   1 +
 src/config/chain/initia.ts                    |  11 +-
 src/lib/app-provider/env.ts                   |   2 +
 src/lib/app-provider/hooks/index.ts           |   1 +
 src/lib/app-provider/hooks/useAddress.ts      |   6 +
 .../hooks/useConvertHexAddress.ts             |  17 ++
 src/lib/chain-registry/initiatestnet.ts       |  87 ++++++++++
 src/lib/components/CopyLink.tsx               |   8 +-
 src/lib/components/InputWithIcon.tsx          |  36 +++-
 src/lib/components/forms/TextInput.tsx        |   9 +-
 src/lib/components/module/FunctionCard.tsx    |  58 ++++---
 src/lib/components/module/ModuleCard.tsx      |  65 ++++++--
 .../component/ModuleSelectDrawerButton.tsx    |  57 -------
 .../body}/ModuleEmptyState.tsx                |  22 ++-
 .../drawer/body/ModuleFunctionBody.tsx        | 156 ++++++++++++++++++
 .../drawer/body/ModuleSelectMainBody.tsx      | 151 +++++++++++++++++
 .../component/drawer/body/index.ts            |   2 +
 .../interaction/component/drawer/index.tsx    |  86 ++++++++++
 .../drawer/selector/SelectorDisplay.tsx       |  54 ++++++
 .../drawer/selector/SelectorInput.tsx         | 136 +++++++++++++++
 .../component/drawer/selector/index.tsx       |  45 +++++
 .../interaction/component/drawer/types.ts     |  14 ++
 .../select-module/ModuleSelectBody.tsx        |  87 ----------
 .../select-module/ModuleSelector.tsx          |  67 --------
 .../hooks/useValidateModuleInput.ts           |  37 +++++
 src/lib/pages/interaction/index.tsx           |  21 ++-
 src/lib/providers/cosmos-kit.tsx              |   9 +-
 src/lib/services/module.ts                    |  35 ++++
 src/lib/services/moduleService.ts             |  67 ++++++++
 src/lib/types/abi.ts                          |  81 +++++++++
 src/lib/types/addrs.ts                        |   2 +
 src/lib/types/index.ts                        |   1 +
 src/lib/utils/abi.ts                          |  20 +++
 src/lib/utils/address.ts                      |  15 ++
 src/lib/utils/validate.ts                     |  10 ++
 35 files changed, 1195 insertions(+), 281 deletions(-)
 create mode 100644 src/lib/app-provider/hooks/useConvertHexAddress.ts
 create mode 100644 src/lib/chain-registry/initiatestnet.ts
 delete mode 100644 src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
 rename src/lib/pages/interaction/component/{select-module => drawer/body}/ModuleEmptyState.tsx (56%)
 create mode 100644 src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
 create mode 100644 src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
 create mode 100644 src/lib/pages/interaction/component/drawer/body/index.ts
 create mode 100644 src/lib/pages/interaction/component/drawer/index.tsx
 create mode 100644 src/lib/pages/interaction/component/drawer/selector/SelectorDisplay.tsx
 create mode 100644 src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
 create mode 100644 src/lib/pages/interaction/component/drawer/selector/index.tsx
 create mode 100644 src/lib/pages/interaction/component/drawer/types.ts
 delete mode 100644 src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
 delete mode 100644 src/lib/pages/interaction/component/select-module/ModuleSelector.tsx
 create mode 100644 src/lib/pages/interaction/hooks/useValidateModuleInput.ts
 create mode 100644 src/lib/services/module.ts
 create mode 100644 src/lib/services/moduleService.ts
 create mode 100644 src/lib/types/abi.ts
 create mode 100644 src/lib/utils/abi.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 758dc34ef..dd1ef6dde 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#515](https://github.com/alleslabs/celatone-frontend/pull/515) Initia select module drawer wireup
 - [#494](https://github.com/alleslabs/celatone-frontend/pull/494) Initia select module drawer UI
 - [#490](https://github.com/alleslabs/celatone-frontend/pull/490) Add initia module interaction page
 - [#488](https://github.com/alleslabs/celatone-frontend/pull/488) Add initia navigation and sidebar
diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index 3a885c3c0..20ef860b6 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -5,12 +5,11 @@ import type { ChainConfigs } from "./types";
 export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
   "stone-9": {
     chain: "initia",
-    registryChainName: "osmosis",
+    registryChainName: "initiatestnet",
     prettyName: "Initia Testnet",
-    // TODO change to initia
-    lcd: "https://lcd.osmosis.zone",
-    rpc: "https://rpc.osmosis.zone:443",
-    indexer: "https://osmosis-mainnet-graphql.alleslabs.dev/v1/graphql",
+    lcd: "https://stone-rest.initia.tech",
+    rpc: "https://stone-rpc.initia.tech:443",
+    indexer: "https://initia-tesnet-graphql.alleslabs.dev/v1/graphql",
     api: "https://celatone-api.alleslabs.dev",
     wallets: [...keplrWallets],
     features: {
@@ -36,7 +35,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
     gas: {
       gasPrice: {
         tokenPerGas: 0.025,
-        denom: "init",
+        denom: "uinit",
       },
       gasAdjustment: 1.5,
       maxGasLimit: 25_000_000,
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index fb00400ca..0e477df7a 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -92,4 +92,6 @@ export enum CELATONE_QUERY_KEYS {
   POOL_INFO_BY_IDS = "CELATONE_QUERY_POOL_INFO_BY_IDS",
   POOL_TRANSACTION_BY_ID = "CELATONE_QUERY_POOL_TRANSACTION_BY_ID",
   POOL_TRANSACTION_BY_ID_COUNT = "CELATONE_QUERY_POOL_TRANSACTION_BY_ID_COUNT",
+  // MODULES
+  ACCOUNT_MODULES = "CELATONE_QUERY_ACCOUNT_MODULES",
 }
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index 76a5b2de0..98b3d19b0 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -13,3 +13,4 @@ export * from "./useBaseApiRoute";
 export * from "./useRPCEndpoint";
 export * from "./useConfig";
 export * from "./useCurrentChain";
+export * from "./useConvertHexAddress";
diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index 0762dae0d..b69e26a93 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -2,6 +2,7 @@ import { fromBech32 } from "@cosmjs/encoding";
 import { useCallback, useMemo } from "react";
 
 import type { Option } from "lib/types";
+import { isHexAddress } from "lib/utils";
 
 import { useCurrentChain } from "./useCurrentChain";
 import { useExampleAddresses } from "./useExampleAddresses";
@@ -134,5 +135,10 @@ export const useValidateAddress = () => {
         ),
       [bech32Prefix, getAddressTypeByLength]
     ),
+    validateHexAddress: useCallback(
+      (address: string) =>
+        !address.startsWith(bech32Prefix) && isHexAddress(address),
+      [bech32Prefix]
+    ),
   };
 };
diff --git a/src/lib/app-provider/hooks/useConvertHexAddress.ts b/src/lib/app-provider/hooks/useConvertHexAddress.ts
new file mode 100644
index 000000000..749d4ec8b
--- /dev/null
+++ b/src/lib/app-provider/hooks/useConvertHexAddress.ts
@@ -0,0 +1,17 @@
+import { useCallback } from "react";
+
+import type { HexAddr } from "lib/types";
+import { hexToBech32Address } from "lib/utils";
+
+import { useCurrentChain } from "./useCurrentChain";
+
+export const useConvertHexAddress = () => {
+  const {
+    chain: { bech32_prefix: bech32Prefix },
+  } = useCurrentChain();
+
+  return useCallback(
+    (hexAddr: HexAddr) => hexToBech32Address(bech32Prefix, hexAddr),
+    [bech32Prefix]
+  );
+};
diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
new file mode 100644
index 000000000..715686927
--- /dev/null
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -0,0 +1,87 @@
+import type { Chain, AssetList } from "@chain-registry/types";
+
+export const initiatestnet: Chain = {
+  $schema: "../chain.schema.json",
+  chain_name: "initiatestnet",
+  status: "live",
+  network_type: "testnet",
+  pretty_name: "Initia Testnet",
+  chain_id: "stone-9",
+  bech32_prefix: "init",
+  daemon_name: "initd",
+  node_home: "$HOME/.init",
+  key_algos: ["secp256k1"],
+  slip44: 118,
+  fees: {
+    fee_tokens: [
+      {
+        denom: "uinit",
+        fixed_min_gas_price: 0,
+        low_gas_price: 0,
+        average_gas_price: 0.025,
+        high_gas_price: 0.04,
+      },
+    ],
+  },
+  staking: {
+    staking_tokens: [
+      {
+        denom: "uinit",
+      },
+    ],
+  },
+  codebase: {
+    git_repo: "https://github.com/sei-protocol/sei-chain",
+    recommended_version: "v3.0.0",
+    compatible_versions: ["v3.0.0"],
+    cosmos_sdk_version: "",
+    cosmwasm_enabled: true,
+    genesis: {
+      genesis_url: "",
+    },
+    versions: [
+      {
+        name: "v1",
+      },
+    ],
+  },
+  logo_URIs: {
+    png: "",
+    svg: "",
+  },
+  apis: {
+    rpc: [
+      {
+        address: "https://stone-rpc.initia.tech:443",
+      },
+    ],
+    rest: [
+      {
+        address: "https://stone-rest.initia.tech",
+      },
+    ],
+  },
+};
+export const initiatestnetAssets: AssetList = {
+  $schema: "../assetlist.schema.json",
+  chain_name: "initiatestnet",
+  assets: [
+    {
+      description: "The native staking token of Initia.",
+      denom_units: [
+        {
+          denom: "uinit",
+          exponent: 0,
+        },
+        {
+          denom: "init",
+          exponent: 6,
+        },
+      ],
+      base: "uinit",
+      name: "Init",
+      display: "init",
+      symbol: "INIT",
+    },
+  ],
+};
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index 16530a7c7..1190e867e 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -1,6 +1,6 @@
 import type { FlexProps, IconProps } from "@chakra-ui/react";
 import { Flex, Text, useClipboard } from "@chakra-ui/react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { useCurrentChain } from "lib/app-provider";
 import { AmpTrackCopier } from "lib/services/amplitude";
@@ -25,7 +25,7 @@ export const CopyLink = ({
   ...flexProps
 }: CopyLinkProps) => {
   const { address } = useCurrentChain();
-  const { onCopy, hasCopied } = useClipboard(value);
+  const { onCopy, hasCopied, setValue } = useClipboard(value);
   const [isHover, setIsHover] = useState(false);
 
   // TODO - Refactor
@@ -39,6 +39,10 @@ export const CopyLink = ({
     return undefined;
   }, [showCopyOnHover, isHover]);
 
+  useEffect(() => {
+    setValue(value);
+  }, [value, setValue]);
+
   return (
     <Tooltip
       isOpen={isHover || hasCopied}
diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
index 402cf8f9e..0d2f2efa4 100644
--- a/src/lib/components/InputWithIcon.tsx
+++ b/src/lib/components/InputWithIcon.tsx
@@ -1,5 +1,10 @@
 import type { InputProps } from "@chakra-ui/react";
-import { Input, InputGroup, InputRightElement } from "@chakra-ui/react";
+import {
+  InputLeftElement,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
@@ -9,29 +14,48 @@ import { CustomIcon } from "./icon";
 interface InputWithIconProps {
   placeholder: string;
   value: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   size?: InputProps["size"];
+  my?: InputProps["my"];
   action?: string;
+  iconPosition?: "start" | "end";
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
+const SearchIcon = () => <CustomIcon name="search" color="gray.600" />;
+
 const InputWithIcon = ({
   placeholder,
   value,
   size,
+  my,
   action,
+  iconPosition = "end",
   onChange,
 }: InputWithIconProps) => (
-  <InputGroup>
+  <InputGroup my={my}>
     <Input
       placeholder={placeholder}
       value={value}
       onChange={onChange}
       size={size}
+      p={`8px ${iconPosition === "end" ? "40px" : "12px"} 8px ${
+        iconPosition === "start" ? "40px" : "12px"
+      } !important`}
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
-    <InputRightElement h="56px" alignItems="center" mr={1}>
-      <CustomIcon name="search" color="gray.600" />
-    </InputRightElement>
+    {iconPosition === "end" ? (
+      <InputRightElement
+        h={size === "lg" ? "56px" : "full"}
+        alignItems="center"
+        mr={1}
+      >
+        <SearchIcon />
+      </InputRightElement>
+    ) : (
+      <InputLeftElement h={size === "lg" ? "56px" : "full"} alignItems="center">
+        <SearchIcon />
+      </InputLeftElement>
+    )}
   </InputGroup>
 );
 
diff --git a/src/lib/components/forms/TextInput.tsx b/src/lib/components/forms/TextInput.tsx
index e0b13ce70..a3dcda016 100644
--- a/src/lib/components/forms/TextInput.tsx
+++ b/src/lib/components/forms/TextInput.tsx
@@ -23,6 +23,7 @@ import { getResponseMsg, getStatusIcon } from "./FormStatus";
 export interface TextInputProps extends FormControlProps {
   value: string;
   setInputState: Dispatch<SetStateAction<string>>;
+  autoFocus?: boolean;
   label?: string;
   labelBgColor?: string;
   helperText?: string;
@@ -36,6 +37,7 @@ export interface TextInputProps extends FormControlProps {
 export const TextInput = ({
   value,
   setInputState,
+  autoFocus,
   label = "",
   labelBgColor = "background.main",
   helperText,
@@ -62,6 +64,7 @@ export const TextInput = ({
 
     <InputGroup>
       <Input
+        autoFocus={autoFocus}
         size={size}
         placeholder={placeholder}
         type={type}
@@ -78,11 +81,13 @@ export const TextInput = ({
       {error ? (
         <FormErrorMessage className="error-text">{error}</FormErrorMessage>
       ) : (
-        <FormHelperText className="helper-text">
+        <FormHelperText className="helper-text" mt={0}>
           {status?.message ? (
             getResponseMsg(status, helperText)
           ) : (
-            <Text color="text.dark">{helperText}</Text>
+            <Text color="text.dark" variant="body3">
+              {helperText}
+            </Text>
           )}
         </FormHelperText>
       )}
diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
index d670203d6..d05998b59 100644
--- a/src/lib/components/module/FunctionCard.tsx
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -4,22 +4,22 @@ import { Flex, Text } from "@chakra-ui/react";
 import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
 import { Tooltip } from "lib/components/Tooltip";
+import type { ExposedFunction, Visibility } from "lib/types";
 
 interface FunctionCardProps {
-  isView?: boolean;
-  disabled?: boolean;
-  visibility?: "public" | "friends" | "script";
+  exposedFn: ExposedFunction;
+  onFunctionSelect: (fn: ExposedFunction) => void;
 }
 
-const getIcon = (visibility: FunctionCardProps["visibility"]) => {
+const getIcon = (visibility: Visibility) => {
   switch (visibility) {
-    case "friends":
-      return <CustomIcon name="friends" color="text.dark" boxSize={3} />;
+    case "friend":
+      return <CustomIcon name="friends" color="gray.600" boxSize={3} />;
     case "script":
-      return <CustomIcon name="code" color="text.dark" boxSize={3} />;
+      return <CustomIcon name="code" color="gray.600" boxSize={3} />;
     case "public":
     default:
-      return <CustomIcon name="website" color="text.main" boxSize={3} />;
+      return <CustomIcon name="website" color="gray.600" boxSize={3} />;
   }
 };
 
@@ -28,6 +28,7 @@ const disabledStyle: { [key in `${boolean}`]: FlexProps } = {
     bgColor: "gray.900",
     _hover: { bg: "gray.900" },
     cursor: "not-allowed",
+    pointerEvents: "none",
     borderColor: "gray.700",
   },
   false: {
@@ -39,10 +40,12 @@ const disabledStyle: { [key in `${boolean}`]: FlexProps } = {
 };
 
 export const FunctionCard = ({
-  isView = true,
-  disabled = false,
-  visibility = "public",
+  exposedFn,
+  onFunctionSelect,
 }: FunctionCardProps) => {
+  const { is_entry: isEntry, is_view: isView, visibility, name } = exposedFn;
+  const disabled = !isEntry || visibility !== "public";
+
   return (
     <Flex
       borderRadius={8}
@@ -52,6 +55,7 @@ export const FunctionCard = ({
       flexDirection="column"
       gap={1}
       border="1px solid"
+      onClick={() => onFunctionSelect(exposedFn)}
       {...disabledStyle[String(disabled) as `${boolean}`]}
     >
       <Flex gap={1} justifyContent="space-between" w="full">
@@ -66,28 +70,30 @@ export const FunctionCard = ({
           </Text>
         </Flex>
         <Flex alignItems="center" gap={2}>
-          <Tooltip
-            bg="primary.dark"
-            label="Only functions with “is_entry: true” and “visibility: public” are able to interacted through Celatone’s module interactions."
-          >
-            <Flex>
-              <CustomIcon name="check" color="success.main" boxSize={3} />
-            </Flex>
-          </Tooltip>
-          <DotSeparator bg="gray.600" />
+          {!disabled && (
+            <>
+              <Tooltip
+                bg="primary.dark"
+                label="Only functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+              >
+                <Flex>
+                  <CustomIcon name="check" color="success.main" boxSize={3} />
+                </Flex>
+              </Tooltip>
+              <DotSeparator bg="gray.600" />
+            </>
+          )}
           <Flex alignItems="center" gap={1}>
             {getIcon(visibility)}
-            <Text
-              variant="body3"
-              color={visibility === "public" ? "text.main" : "text.dark"}
-              textTransform="capitalize"
-            >
+            <Text variant="body3" color="text.dark" textTransform="capitalize">
               {visibility}
             </Text>
           </Flex>
         </Flex>
       </Flex>
-      <Text variant="body2">Function Name</Text>
+      <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
+        {name}
+      </Text>
     </Flex>
   );
 };
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index 72cb75431..131632cee 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -1,31 +1,60 @@
-import { Flex } from "@chakra-ui/react";
+import { Flex, Grid, Text } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
 
 import { CustomIcon } from "../icon";
+import type { IndexedModule } from "lib/services/moduleService";
+import type { Option } from "lib/types";
 
 import { CountBadge } from "./CountBadge";
 
-export const ModuleCard = () => {
+interface ModuleCardProps {
+  module: IndexedModule;
+  selectedModule: Option<IndexedModule>;
+  setSelectedModule: Dispatch<SetStateAction<Option<IndexedModule>>>;
+}
+
+export const ModuleCard = ({
+  module,
+  selectedModule,
+  setSelectedModule,
+}: ModuleCardProps) => {
+  const noExposedFunctions = !module.parsedAbi.exposed_functions.length;
   return (
-    <Flex
+    <Grid
       borderRadius={8}
-      bgColor="gray.800"
-      p={2}
+      bgColor={
+        module.moduleName === selectedModule?.moduleName
+          ? "gray.700"
+          : "gray.800"
+      }
+      p={3}
       alignItems="center"
-      justifyContent="space-between"
+      cursor="pointer"
+      onClick={() => setSelectedModule(module)}
+      gap={1}
+      templateColumns="20px 1fr auto"
+      _hover={{
+        bg: "gray.700",
+      }}
+      transition=".25s all ease-out"
     >
-      <Flex alignItems="center" gap={1}>
-        <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
-        Module name
-        <CustomIcon
-          name="check-circle-solid"
-          color="success.main"
-          boxSize={3}
-        />
+      <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
+      <Flex align="center" overflow="hidden" gap={1}>
+        <Text className="ellipsis" variant="body2">
+          {module.moduleName}
+        </Text>
+        {!noExposedFunctions && (
+          <CustomIcon
+            name="check-circle-solid"
+            color="success.main"
+            boxSize={3}
+          />
+        )}
       </Flex>
-      <Flex gap={1}>
-        <CountBadge count={12} variant="view" />
-        <CountBadge count={0} variant="execute" />
+      <Flex gap={1} ml="auto">
+        <CountBadge count={module.viewFunctions.length} variant="view" />
+        <CountBadge count={module.executeFunctions.length} variant="execute" />
       </Flex>
-    </Flex>
+    </Grid>
   );
 };
diff --git a/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx b/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
deleted file mode 100644
index ca11aa024..000000000
--- a/src/lib/pages/interaction/component/ModuleSelectDrawerButton.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import {
-  Button,
-  Heading,
-  useDisclosure,
-  Drawer,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerHeader,
-  DrawerCloseButton,
-  DrawerBody,
-} from "@chakra-ui/react";
-
-import { CustomIcon } from "lib/components/icon";
-
-import { ModuleSelectBody } from "./select-module/ModuleSelectBody";
-import {
-  ModuleSelectorDisplay,
-  ModuleSelectorInput,
-} from "./select-module/ModuleSelector";
-// import { ModuleEmptyState } from "./select-module/ModuleEmptyState";
-
-interface ModuleSelectDrawerButtonProps {
-  buttonText?: string;
-}
-
-export const ModuleSelectDrawerButton = ({
-  buttonText = "Select Module",
-}: ModuleSelectDrawerButtonProps) => {
-  const { isOpen, onClose, onOpen } = useDisclosure();
-  return (
-    <>
-      <Button variant="primary" ml="auto" onClick={onOpen}>
-        {buttonText}
-      </Button>
-      <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
-        <DrawerOverlay />
-        <DrawerContent h="80%">
-          <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
-            <CustomIcon name="contract-address" boxSize={6} color="gray.600" />
-            <Heading as="h5" variant="h5">
-              Select Module
-            </Heading>
-          </DrawerHeader>
-          <DrawerCloseButton color="text.dark" />
-          <DrawerBody p={6}>
-            {/* Input */}
-            <ModuleSelectorInput />
-            {/* Selected Address */}
-            <ModuleSelectorDisplay />
-            <ModuleSelectBody />
-            {/* <ModuleEmptyState /> */}
-          </DrawerBody>
-        </DrawerContent>
-      </Drawer>
-    </>
-  );
-};
diff --git a/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx
similarity index 56%
rename from src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx
rename to src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx
index a408d333b..b36e654f1 100644
--- a/src/lib/pages/interaction/component/select-module/ModuleEmptyState.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx
@@ -1,3 +1,4 @@
+import type { FlexProps } from "@chakra-ui/react";
 import { Text, Flex } from "@chakra-ui/react";
 
 import { StateImage } from "lib/components/state";
@@ -5,24 +6,35 @@ import { StateImage } from "lib/components/state";
 interface ModuleEmptyStateProps {
   description?: string;
   imageWidth?: string;
+  hasImage?: boolean;
+  noBorder?: boolean;
+  h?: FlexProps["h"];
+  p?: FlexProps["p"];
 }
 export const ModuleEmptyState = ({
   description = "Available functions for selected modules will display here",
   imageWidth = "160px",
+  hasImage = true,
+  noBorder = false,
+  h = "full",
+  p,
 }: ModuleEmptyStateProps) => {
   return (
     <Flex
-      h="full"
+      h={h}
+      p={p}
       w="full"
       justifyContent="center"
       alignItems="center"
-      border="1px solid"
-      borderRadius={4}
+      border={noBorder ? "none" : "1px solid"}
+      borderRadius="8px"
       borderColor="gray.700"
     >
       <Flex flexDirection="column" gap={4} alignItems="center">
-        <StateImage imageVariant="empty" imageWidth={imageWidth} />
-        <Text variant="body2" color="text.dark">
+        {hasImage && (
+          <StateImage imageVariant="empty" imageWidth={imageWidth} />
+        )}
+        <Text variant="body2" color="text.dark" textAlign="center">
           {description}
         </Text>
       </Flex>
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
new file mode 100644
index 000000000..5e3065c5e
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
@@ -0,0 +1,156 @@
+import type { FlexProps, GridItemProps } from "@chakra-ui/react";
+import { GridItem, Heading, Flex, Text } from "@chakra-ui/react";
+import { useCallback, useMemo, useState } from "react";
+
+import type { ModuleSelectFunction } from "../types";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { CountBadge } from "lib/components/module/CountBadge";
+import { FunctionCard } from "lib/components/module/FunctionCard";
+import type { IndexedModule } from "lib/services/moduleService";
+import type { ExposedFunction, Option } from "lib/types";
+
+import { ModuleEmptyState } from "./ModuleEmptyState";
+
+const functionGridBaseStyle: FlexProps = {
+  border: "1px solid",
+  borderRadius: 8,
+  borderColor: "gray.700",
+  p: 4,
+  direction: "column",
+};
+
+const EmptyFunctionState = ({
+  desc = "No exposed_functions available.",
+}: {
+  desc?: string;
+}) => (
+  <ModuleEmptyState h="fit-content" p={4} hasImage={false} description={desc} />
+);
+
+interface RenderFunctionsProps {
+  exposedFnsLength: number;
+  filtered: Option<ExposedFunction[]>;
+  onFunctionSelect: (fn: ExposedFunction) => void;
+}
+const RenderFunctions = ({
+  exposedFnsLength,
+  filtered,
+  onFunctionSelect,
+}: RenderFunctionsProps) => {
+  if (!exposedFnsLength) return <EmptyFunctionState />;
+  return filtered?.length ? (
+    <>
+      {filtered.map((fn) => (
+        <FunctionCard
+          key={fn.name}
+          exposedFn={fn}
+          onFunctionSelect={onFunctionSelect}
+        />
+      ))}
+    </>
+  ) : (
+    <EmptyFunctionState desc="No matching function found." />
+  );
+};
+
+interface ModuleFunctionBodyProps extends GridItemProps {
+  module: Option<IndexedModule>;
+  handleModuleSelect: ModuleSelectFunction;
+  closeModal: () => void;
+}
+
+export const ModuleFunctionBody = ({
+  module,
+  handleModuleSelect,
+  closeModal,
+  ...gridItemProps
+}: ModuleFunctionBodyProps) => {
+  const [keyword, setKeyword] = useState("");
+  const [filteredView, filteredExecute] = useMemo(
+    () => [
+      module?.viewFunctions.filter((el) => el.name.includes(keyword)),
+      module?.executeFunctions.filter((el) => el.name.includes(keyword)),
+    ],
+    [module?.viewFunctions, module?.executeFunctions, keyword]
+  );
+
+  const onFunctionSelect = useCallback(
+    (fn: ExposedFunction) => {
+      if (module) {
+        handleModuleSelect(module, fn);
+        closeModal();
+      }
+    },
+    [module, handleModuleSelect, closeModal]
+  );
+
+  // TODO: 100% - element and margin hack, find better way to setup the height
+  const maxHeight = "calc(100% - 22px - 32px - 40px)";
+  return (
+    <GridItem
+      gap={4}
+      {...functionGridBaseStyle}
+      {...gridItemProps}
+      overflow="hidden"
+    >
+      {module ? (
+        <>
+          <Heading as="h6" variant="h6" fontWeight={600}>
+            {module.moduleName}
+          </Heading>
+          <InputWithIcon
+            iconPosition="start"
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            placeholder="Search functions ..."
+            my={4}
+          />
+          <Flex gap={6} maxH={maxHeight}>
+            <Flex flex={0.5} gap={3} {...functionGridBaseStyle}>
+              <Flex alignItems="center" gap={1}>
+                <Text variant="body2" fontWeight={600} color="text.dark">
+                  View Functions
+                </Text>
+                <CountBadge
+                  count={module.viewFunctions.length}
+                  variant="view"
+                />
+              </Flex>
+              <Flex direction="column" gap={3} overflow="scroll">
+                <RenderFunctions
+                  exposedFnsLength={module.viewFunctions.length}
+                  filtered={filteredView}
+                  onFunctionSelect={onFunctionSelect}
+                />
+              </Flex>
+            </Flex>
+            <Flex flex={0.5} gap={3} {...functionGridBaseStyle}>
+              <Flex alignItems="center" gap={1}>
+                <Text variant="body2" fontWeight={600} color="text.dark">
+                  Execute Functions
+                </Text>
+                <CountBadge
+                  count={module.executeFunctions.length}
+                  variant="execute"
+                />
+              </Flex>
+              <Flex direction="column" gap={3} overflow="scroll">
+                <RenderFunctions
+                  exposedFnsLength={module.executeFunctions.length}
+                  filtered={filteredExecute}
+                  onFunctionSelect={onFunctionSelect}
+                />
+              </Flex>
+            </Flex>
+          </Flex>
+        </>
+      ) : (
+        <ModuleEmptyState
+          description="Choose a module to see its functions."
+          imageWidth="80px"
+          noBorder
+        />
+      )}
+    </GridItem>
+  );
+};
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
new file mode 100644
index 000000000..d25c0622e
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
@@ -0,0 +1,151 @@
+import { Grid, GridItem, Text, Flex, Box, Button } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
+import { useMemo, useState } from "react";
+
+import type { DisplayMode, ModuleSelectFunction } from "../types";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { CountBadge } from "lib/components/module/CountBadge";
+import { ModuleCard } from "lib/components/module/ModuleCard";
+import type { IndexedModule } from "lib/services/moduleService";
+import type { Option } from "lib/types";
+
+import { ModuleEmptyState } from "./ModuleEmptyState";
+import { ModuleFunctionBody } from "./ModuleFunctionBody";
+
+interface ModuleSelectBodyProps {
+  modules: IndexedModule[];
+  mode: DisplayMode;
+  handleModuleSelect: ModuleSelectFunction;
+  closeModal: () => void;
+}
+
+const RenderModules = ({
+  modulesLength,
+  filtered,
+  selectedModule,
+  setSelectedModule,
+}: {
+  modulesLength: number;
+  filtered: IndexedModule[];
+  selectedModule: Option<IndexedModule>;
+  setSelectedModule: Dispatch<SetStateAction<Option<IndexedModule>>>;
+}) => {
+  if (!modulesLength)
+    return (
+      <ModuleEmptyState
+        h="fit-content"
+        p={4}
+        description="This address does not have any modules."
+        hasImage={false}
+      />
+    );
+  return filtered?.length ? (
+    <>
+      {filtered.map((module) => (
+        <ModuleCard
+          key={module.moduleName}
+          module={module}
+          selectedModule={selectedModule}
+          setSelectedModule={setSelectedModule}
+        />
+      ))}
+    </>
+  ) : (
+    <ModuleEmptyState
+      h="fit-content"
+      p={4}
+      description="No matching module found."
+      hasImage={false}
+    />
+  );
+};
+
+export const ModuleSelectMainBody = ({
+  mode,
+  modules,
+  handleModuleSelect,
+  closeModal,
+}: ModuleSelectBodyProps) => {
+  const [keyword, setKeyword] = useState("");
+  const [selectedModule, setSelectedModule] = useState<IndexedModule>();
+
+  const filteredModules = useMemo(
+    () => modules.filter((el) => el.moduleName.includes(keyword)),
+    [modules, keyword]
+  );
+
+  return (
+    <Grid
+      templateAreas={`"panel main""button button"`}
+      columnGap={4}
+      rowGap={6}
+      templateColumns="300px 1fr"
+      templateRows="1fr auto"
+      position="relative"
+      overflow="hidden"
+      pointerEvents={mode === "input" ? "none" : undefined}
+    >
+      {mode === "input" && (
+        <Box
+          position="absolute"
+          pointerEvents="none"
+          bgColor="background.overlay"
+          opacity={0.8}
+          w="full"
+          h="full"
+          zIndex="overlay"
+        />
+      )}
+      <GridItem area="panel" overflow="hidden">
+        <InputWithIcon
+          iconPosition="start"
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          placeholder="Search module ..."
+        />
+        <Flex alignItems="center" gap={2} mt={6}>
+          <Text variant="body2" fontWeight={600} color="text.dark">
+            Modules
+          </Text>
+          <CountBadge variant="common" count={modules.length} />
+        </Flex>
+        <Flex
+          // TODO: 100% - element and margin hack, find better way to setup the height
+          h="calc(100% - 40px - 24px - 21px - 8px)"
+          overflowY="scroll"
+          direction="column"
+          gap={2}
+          mt={2}
+        >
+          <RenderModules
+            modulesLength={modules.length}
+            filtered={filteredModules}
+            selectedModule={selectedModule}
+            setSelectedModule={setSelectedModule}
+          />
+        </Flex>
+      </GridItem>
+      {/* Left */}
+      <ModuleFunctionBody
+        area="main"
+        module={selectedModule}
+        handleModuleSelect={handleModuleSelect}
+        closeModal={closeModal}
+      />
+      <GridItem area="button" justifySelf="flex-end">
+        <Button
+          size="md"
+          onClick={() => {
+            if (selectedModule) {
+              handleModuleSelect(selectedModule);
+              closeModal();
+            }
+          }}
+          disabled={!selectedModule}
+        >
+          Select this module
+        </Button>
+      </GridItem>
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/interaction/component/drawer/body/index.ts b/src/lib/pages/interaction/component/drawer/body/index.ts
new file mode 100644
index 000000000..06b4852b5
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/body/index.ts
@@ -0,0 +1,2 @@
+export * from "./ModuleEmptyState";
+export * from "./ModuleSelectMainBody";
diff --git a/src/lib/pages/interaction/component/drawer/index.tsx b/src/lib/pages/interaction/component/drawer/index.tsx
new file mode 100644
index 000000000..cf5d0916a
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/index.tsx
@@ -0,0 +1,86 @@
+import {
+  Button,
+  Heading,
+  useDisclosure,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerCloseButton,
+  DrawerBody,
+  Flex,
+} from "@chakra-ui/react";
+import { useState } from "react";
+
+import { CustomIcon } from "lib/components/icon";
+import type { IndexedModule } from "lib/services/moduleService";
+import type { HexAddr, HumanAddr } from "lib/types";
+
+import { ModuleEmptyState, ModuleSelectMainBody } from "./body";
+import { ModuleSelector } from "./selector";
+import type {
+  DisplayMode,
+  SelectedAddress,
+  ModuleSelectFunction,
+} from "./types";
+
+interface ModuleSelectDrawerTriggerProps {
+  buttonText?: string;
+  handleModuleSelect: ModuleSelectFunction;
+}
+
+export const ModuleSelectDrawerTrigger = ({
+  buttonText = "Select Module",
+  handleModuleSelect,
+}: ModuleSelectDrawerTriggerProps) => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+  const [modules, setModules] = useState<IndexedModule[]>();
+  const [mode, setMode] = useState<DisplayMode>("input");
+  const [selectedAddress, setSelectedAddress] = useState<SelectedAddress>({
+    address: "" as HumanAddr,
+    hex: "" as HexAddr,
+  });
+
+  return (
+    <>
+      <Button variant="primary" ml="auto" onClick={onOpen}>
+        {buttonText}
+      </Button>
+      <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+        <DrawerOverlay />
+        <DrawerContent h="90%">
+          <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
+            <CustomIcon name="contract-address" boxSize={6} color="gray.600" />
+            <Heading as="h5" variant="h5">
+              Select Module
+            </Heading>
+          </DrawerHeader>
+          <DrawerCloseButton color="text.dark" />
+          <DrawerBody p={6}>
+            <Flex h="full" direction="column">
+              <ModuleSelector
+                mode={mode}
+                selectedAddress={selectedAddress}
+                setSelectedAddress={setSelectedAddress}
+                setMode={setMode}
+                handleModuleSelect={handleModuleSelect}
+                setModules={setModules}
+                closeModal={onClose}
+              />
+              {modules ? (
+                <ModuleSelectMainBody
+                  mode={mode}
+                  modules={modules}
+                  handleModuleSelect={handleModuleSelect}
+                  closeModal={onClose}
+                />
+              ) : (
+                <ModuleEmptyState />
+              )}
+            </Flex>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorDisplay.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorDisplay.tsx
new file mode 100644
index 000000000..a3127dd2c
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorDisplay.tsx
@@ -0,0 +1,54 @@
+import { Flex, Button } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
+
+import type { DisplayMode, SelectedAddress } from "../types";
+import { CopyLink } from "lib/components/CopyLink";
+import { CustomIcon } from "lib/components/icon";
+import { LabelText } from "lib/components/LabelText";
+
+interface ModuleSelectorDisplayProps {
+  selectedAddress: SelectedAddress;
+  setMode: Dispatch<SetStateAction<DisplayMode>>;
+}
+
+export const ModuleSelectorDisplay = ({
+  selectedAddress,
+  setMode,
+}: ModuleSelectorDisplayProps) => (
+  <Flex
+    className="selector-display"
+    justifyContent="space-between"
+    w="full"
+    bgColor="gray.800"
+    px={4}
+    py={3}
+    mb={6}
+    borderRadius={8}
+    alignItems="center"
+  >
+    <LabelText flex={1} label="Viewing Address">
+      <CopyLink
+        value={selectedAddress.address}
+        type="user_address"
+        w="fit-content"
+        showCopyOnHover
+      />
+    </LabelText>
+    <LabelText flex={1} label="Hex">
+      <CopyLink
+        value={selectedAddress.hex}
+        type="user_address"
+        w="fit-content"
+        showCopyOnHover
+      />
+    </LabelText>
+    <Button
+      variant="outline-white"
+      size="sm"
+      leftIcon={<CustomIcon name="swap" boxSize={3} />}
+      onClick={() => setMode("input")}
+    >
+      Change Address
+    </Button>
+  </Flex>
+);
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
new file mode 100644
index 000000000..067c4b70e
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -0,0 +1,136 @@
+import { Flex, Button } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction, KeyboardEvent } from "react";
+import { useState, useMemo, useCallback } from "react";
+
+import type {
+  SelectedAddress,
+  DisplayMode,
+  ModuleSelectFunction,
+} from "../types";
+import {
+  useConvertHexAddress,
+  useValidateAddress,
+  useExampleAddresses,
+} from "lib/app-provider";
+import { TextInput } from "lib/components/forms";
+import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateModuleInput";
+import type { IndexedModule } from "lib/services/moduleService";
+import { useAddressModules } from "lib/services/moduleService";
+import type { AccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
+import { bech32AddressToHex } from "lib/utils";
+
+export interface ModuleSelectorInputProps {
+  selectedAddress: SelectedAddress;
+  setSelectedAddress: Dispatch<SetStateAction<SelectedAddress>>;
+  handleModuleSelect: ModuleSelectFunction;
+  setModules: Dispatch<SetStateAction<Option<IndexedModule[]>>>;
+  setMode: Dispatch<SetStateAction<DisplayMode>>;
+  closeModal: () => void;
+}
+
+export const ModuleSelectorInput = ({
+  selectedAddress,
+  setSelectedAddress,
+  handleModuleSelect,
+  setModules,
+  setMode,
+  closeModal,
+}: ModuleSelectorInputProps) => {
+  const [keyword, setKeyword] = useState("");
+  const [error, setError] = useState("");
+  const [addr, moduleName] = useMemo(() => keyword.split("::"), [keyword]);
+
+  const convertHexAddr = useConvertHexAddress();
+  const { validateHexAddress } = useValidateAddress();
+  const validateModuleInput = useValidateModuleInput();
+  const { user } = useExampleAddresses();
+  const { refetch, isFetching } = useAddressModules({
+    address: addr as AccountAddr,
+    moduleName,
+    options: {
+      refetchOnWindowFocus: false,
+      enabled: false,
+      retry: false,
+      onSuccess: (data) => {
+        setError("");
+        setSelectedAddress(() => {
+          const isHex = validateHexAddress(addr);
+          return isHex
+            ? {
+                address: convertHexAddr(addr as HexAddr),
+                hex: addr as HexAddr,
+              }
+            : {
+                address: addr as HumanAddr,
+                hex: bech32AddressToHex(addr as HumanAddr),
+              };
+        });
+        if (Array.isArray(data)) {
+          setModules(data);
+          setMode("display");
+        } else {
+          handleModuleSelect(data);
+          closeModal();
+        }
+      },
+      onError: (err) => setError((err as Error).message),
+    },
+  });
+
+  const handleSubmit = useCallback(() => {
+    const err = validateModuleInput(keyword);
+    return err ? setError(err) : refetch();
+  }, [keyword, refetch, validateModuleInput]);
+
+  const handleKeydown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") {
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+
+  return (
+    <Flex
+      className="selector-input"
+      justifyContent="space-between"
+      bgColor="gray.800"
+      p={4}
+      mb={6}
+      gap={4}
+      borderRadius={8}
+    >
+      <TextInput
+        value={keyword}
+        setInputState={setKeyword}
+        error={error}
+        size="md"
+        helperText={`ex. “${user}” or “${user}::module_name”`}
+        label="Fill in address or module path"
+        variant="floating"
+        labelBgColor="gray.800"
+        onKeyDown={handleKeydown}
+        autoFocus
+      />
+      <Flex gap={2}>
+        <Button
+          variant="primary"
+          onClick={handleSubmit}
+          isDisabled={!keyword.length || isFetching}
+          isLoading={isFetching}
+        >
+          Submit
+        </Button>
+        <Button
+          variant="outline-white"
+          onClick={() =>
+            selectedAddress.address ? setMode("display") : closeModal()
+          }
+        >
+          Cancel
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/component/drawer/selector/index.tsx b/src/lib/pages/interaction/component/drawer/selector/index.tsx
new file mode 100644
index 000000000..031897f8d
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/selector/index.tsx
@@ -0,0 +1,45 @@
+import { Box } from "@chakra-ui/react";
+
+import type { DisplayMode, SelectedAddress } from "../types";
+
+import { ModuleSelectorDisplay } from "./SelectorDisplay";
+import type { ModuleSelectorInputProps } from "./SelectorInput";
+import { ModuleSelectorInput } from "./SelectorInput";
+
+interface ModuleSelectorProps extends ModuleSelectorInputProps {
+  mode: DisplayMode;
+  selectedAddress: SelectedAddress;
+}
+
+export const ModuleSelector = ({
+  mode,
+  selectedAddress,
+  setSelectedAddress,
+  setMode,
+  setModules,
+  handleModuleSelect,
+  closeModal,
+}: ModuleSelectorProps) => {
+  const showDisplay = mode === "display" && Boolean(selectedAddress.address);
+  return (
+    <Box
+      sx={{
+        "& .selector-display": { display: showDisplay ? "flex" : "none" },
+        "& .selector-input": { display: showDisplay ? "none" : "flex" },
+      }}
+    >
+      <ModuleSelectorDisplay
+        selectedAddress={selectedAddress}
+        setMode={setMode}
+      />
+      <ModuleSelectorInput
+        setModules={setModules}
+        closeModal={closeModal}
+        selectedAddress={selectedAddress}
+        setSelectedAddress={setSelectedAddress}
+        setMode={setMode}
+        handleModuleSelect={handleModuleSelect}
+      />
+    </Box>
+  );
+};
diff --git a/src/lib/pages/interaction/component/drawer/types.ts b/src/lib/pages/interaction/component/drawer/types.ts
new file mode 100644
index 000000000..80d96c08b
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/types.ts
@@ -0,0 +1,14 @@
+import type { IndexedModule } from "lib/services/moduleService";
+import type { HumanAddr, HexAddr, ExposedFunction } from "lib/types";
+
+export interface SelectedAddress {
+  address: HumanAddr;
+  hex: HexAddr;
+}
+
+export type DisplayMode = "input" | "display";
+
+export type ModuleSelectFunction = (
+  selectedModule: IndexedModule,
+  fn?: ExposedFunction
+) => void;
diff --git a/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx b/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
deleted file mode 100644
index 5d305e46c..000000000
--- a/src/lib/pages/interaction/component/select-module/ModuleSelectBody.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { FlexProps } from "@chakra-ui/react";
-import { Text, Flex, Badge, Skeleton, Button, Heading } from "@chakra-ui/react";
-
-import { CountBadge } from "lib/components/module/CountBadge";
-import { FunctionCard } from "lib/components/module/FunctionCard";
-import { ModuleCard } from "lib/components/module/ModuleCard";
-// import { ModuleEmptyState } from "./ModuleEmptyState";
-
-const functionSelectBaseStyle: FlexProps = {
-  border: "1px solid",
-  borderRadius: 8,
-  borderColor: "gray.700",
-  p: 4,
-  direction: "column",
-};
-
-export const ModuleSelectBody = () => {
-  return (
-    <>
-      <Flex borderRadius={8} columnGap={4}>
-        {/* Left */}
-        <Flex direction="column" flex={0.2}>
-          <Flex bg="teal.300" mb={6}>
-            input here
-          </Flex>
-          <Flex direction="column" gap={2}>
-            <Flex alignItems="center" gap={2}>
-              <Text variant="body2" fontWeight={600} color="text.dark">
-                Modules
-              </Text>
-              <Badge variant="gray" textColor="text.main">
-                <s>0</s>
-              </Badge>
-            </Flex>
-            <Skeleton
-              h={9}
-              borderRadius={8}
-              startColor="gray.500"
-              endColor="gray.700"
-            />
-            <ModuleCard />
-          </Flex>
-        </Flex>
-        {/* Right */}
-        {/* <Flex flex={4}>
-          <ModuleEmptyState
-            description="Choose a module to see its functions."
-            imageWidth="80px"
-          />
-        </Flex> */}
-        <Flex flex={0.8} gap={4} {...functionSelectBaseStyle}>
-          <Heading as="h6" variant="h6" fontWeight={600}>
-            Module name goes here
-          </Heading>
-          <Flex bg="teal.300">input here</Flex>
-          <Flex gap={6}>
-            <Flex flex={0.5} gap={3} {...functionSelectBaseStyle}>
-              <Flex alignItems="center" gap={1}>
-                <Text variant="body2" fontWeight={600} color="text.dark">
-                  View Functions
-                </Text>
-                <CountBadge count={0} variant="view" />
-              </Flex>
-              <FunctionCard />
-              <FunctionCard disabled visibility="friends" />
-              <FunctionCard disabled visibility="script" />
-            </Flex>
-            <Flex flex={0.5} gap={3} {...functionSelectBaseStyle}>
-              <Flex alignItems="center" gap={1}>
-                <Text variant="body2" fontWeight={600} color="text.dark">
-                  Execute Functions
-                </Text>
-                <CountBadge count={0} variant="execute" />
-              </Flex>
-              <FunctionCard isView={false} />
-              <FunctionCard isView={false} disabled visibility="friends" />
-              <FunctionCard isView={false} disabled visibility="script" />
-            </Flex>
-          </Flex>
-        </Flex>
-      </Flex>
-      <Button mt={6} ml="auto">
-        Select this module
-      </Button>
-    </>
-  );
-};
diff --git a/src/lib/pages/interaction/component/select-module/ModuleSelector.tsx b/src/lib/pages/interaction/component/select-module/ModuleSelector.tsx
deleted file mode 100644
index 66d9110b2..000000000
--- a/src/lib/pages/interaction/component/select-module/ModuleSelector.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Button, Flex } from "@chakra-ui/react";
-
-import { CopyLink } from "lib/components/CopyLink";
-import { CustomIcon } from "lib/components/icon";
-import { LabelText } from "lib/components/LabelText";
-
-export const ModuleSelectorInput = () => {
-  return (
-    <Flex
-      justifyContent="space-between"
-      w="full"
-      bgColor="gray.800"
-      px={4}
-      py={3}
-      mb={6}
-      gap={4}
-      borderRadius={8}
-    >
-      <Flex bg="teal.300" w="full">
-        input here
-      </Flex>
-      <Flex gap={2}>
-        <Button variant="primary" size="sm">
-          Submit
-        </Button>
-        <Button variant="outline-white" size="sm">
-          Cancel
-        </Button>
-      </Flex>
-    </Flex>
-  );
-};
-
-export const ModuleSelectorDisplay = () => {
-  return (
-    <Flex
-      justifyContent="space-between"
-      w="full"
-      bgColor="gray.800"
-      px={4}
-      py={3}
-      mb={6}
-      borderRadius={8}
-      alignItems="center"
-    >
-      <LabelText flex={1} label="Viewing Address">
-        <CopyLink
-          value="cltn1m9y7um59yxtmek68qkwg3ykm28s52rrell6prx"
-          type="user_address"
-        />
-      </LabelText>
-      <LabelText flex={1} label="Hex">
-        <CopyLink
-          value="0xe688b84b23f322a994A53dbF8E15FA82CDB71127"
-          type="user_address"
-        />
-      </LabelText>
-      <Button
-        variant="outline-white"
-        size="sm"
-        leftIcon={<CustomIcon name="swap" boxSize={3} />}
-      >
-        Change Address
-      </Button>
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
new file mode 100644
index 000000000..33a3b9fbd
--- /dev/null
+++ b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+
+import {
+  useCurrentChain,
+  useExampleAddresses,
+  useValidateAddress,
+} from "lib/app-provider";
+import { isHexAddress, truncate } from "lib/utils";
+
+export const useValidateModuleInput = () => {
+  const { validateUserAddress } = useValidateAddress();
+  const {
+    chain: { bech32_prefix: prefix },
+  } = useCurrentChain();
+
+  const { user } = useExampleAddresses();
+  const truncateExampleAddr = truncate(user);
+  const errText = `Input must be address (${truncateExampleAddr} or “0x123...456) or module path (“${truncateExampleAddr}::module_name” or “0x123...456::module_name)`;
+
+  return useCallback(
+    (input: string): string | null => {
+      const inputArr = input.split("::");
+      // Allow only module path for now
+      if (inputArr.length > 2) return errText;
+      const [address, module] = inputArr;
+      const addrErr = validateUserAddress(address);
+      const invalidAddress = address.startsWith(prefix)
+        ? addrErr
+        : !isHexAddress(address);
+
+      if (invalidAddress || module === "") return errText;
+
+      return null;
+    },
+    [errText, prefix, validateUserAddress]
+  );
+};
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 1a8f4da28..29c23e530 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -1,17 +1,19 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { CountBadge } from "lib/components/module/CountBadge";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
+import type { IndexedModule } from "lib/services/moduleService";
+import type { ExposedFunction } from "lib/types";
 
+import { ModuleSelectDrawerTrigger } from "./component/drawer";
 import {
   InteractionTypeSwitch,
   InteractionTabs,
 } from "./component/InteractionTypeSwitch";
-import { ModuleSelectDrawerButton } from "./component/ModuleSelectDrawerButton";
 
 const containerBaseStyle: FlexProps = {
   direction: "column",
@@ -25,6 +27,19 @@ const containerBaseStyle: FlexProps = {
 export const Interaction = () => {
   const { query, isReady } = useRouter();
   const [tab, setTab] = useState<InteractionTabs>();
+  // TODO: Remove when wiring up this page
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [module, setModule] = useState<IndexedModule>();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [selectedFn, setSelectedFn] = useState<ExposedFunction>();
+
+  const handleModuleSelect = useCallback(
+    (selectedModule: IndexedModule, fn?: ExposedFunction) => {
+      setModule(selectedModule);
+      setSelectedFn(fn);
+    },
+    []
+  );
 
   useEffect(() => {
     if (isReady) {
@@ -50,7 +65,7 @@ export const Interaction = () => {
         my={8}
       >
         <p>Select module to interact with ...</p>
-        <ModuleSelectDrawerButton />
+        <ModuleSelectDrawerTrigger handleModuleSelect={handleModuleSelect} />
       </Flex>
       <Flex borderTop="1px solid" borderColor="gray.700" py={8} gap={8}>
         {/* Left side */}
diff --git a/src/lib/providers/cosmos-kit.tsx b/src/lib/providers/cosmos-kit.tsx
index fe53fc3f0..ba27b0a0d 100644
--- a/src/lib/providers/cosmos-kit.tsx
+++ b/src/lib/providers/cosmos-kit.tsx
@@ -4,6 +4,10 @@ import { assets, chains } from "chain-registry";
 
 import { CHAIN_CONFIGS } from "config/chain";
 import { useCelatoneApp } from "lib/app-provider";
+import {
+  initiatestnet,
+  initiatestnetAssets,
+} from "lib/chain-registry/initiatestnet";
 import {
   localosmosis,
   localosmosisAsset,
@@ -35,12 +39,13 @@ export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <Provider
-      chains={[...chains, localosmosis, sei, terra2testnet]}
+      chains={[...chains, localosmosis, sei, terra2testnet, initiatestnet]}
       assetLists={[
         ...assets,
         localosmosisAsset,
         seiAssets,
         terra2testnetAssets,
+        initiatestnetAssets,
       ]}
       wallets={wallets}
       endpointOptions={{
@@ -48,7 +53,7 @@ export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
         endpoints: availableChainsEndpoints,
       }}
       signerOptions={{
-        preferredSignType: () => "direct",
+        preferredSignType: () => "amino",
       }}
     >
       {children}
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
new file mode 100644
index 000000000..7daad4658
--- /dev/null
+++ b/src/lib/services/module.ts
@@ -0,0 +1,35 @@
+import axios from "axios";
+
+import type {
+  AccountAddr,
+  ResponseModule,
+  ResponseModules,
+  InternalModule,
+} from "lib/types";
+import { snakeToCamel } from "lib/utils";
+
+interface ModuleReturn {
+  module: ResponseModule;
+}
+
+export const getAccountModules = async (
+  baseEndpoint: string,
+  address: AccountAddr
+): Promise<InternalModule[]> => {
+  const { data } = await axios.get<ResponseModules>(
+    `${baseEndpoint}/initia/move/v1/accounts/${address}/modules`
+  );
+  // Implement LCD pagination
+  return snakeToCamel(data.modules);
+};
+
+export const getAccountModule = async (
+  baseEndpoint: string,
+  address: AccountAddr,
+  moduleName: string
+): Promise<InternalModule> => {
+  const { data } = await axios.get<ModuleReturn>(
+    `${baseEndpoint}/initia/move/v1/accounts/${address}/modules/${moduleName}`
+  );
+  return snakeToCamel(data.module);
+};
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
new file mode 100644
index 000000000..a10144ca0
--- /dev/null
+++ b/src/lib/services/moduleService.ts
@@ -0,0 +1,67 @@
+import type {
+  QueryFunction,
+  UseQueryOptions,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+
+import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
+import type {
+  AccountAddr,
+  ExposedFunction,
+  InternalModule,
+  ResponseABI,
+} from "lib/types";
+import { parseJsonABI, splitViewExecuteFunctions } from "lib/utils/abi";
+
+import { getAccountModule, getAccountModules } from "./module";
+
+export interface IndexedModule extends InternalModule {
+  parsedAbi: ResponseABI;
+  viewFunctions: ExposedFunction[];
+  executeFunctions: ExposedFunction[];
+}
+
+const indexModuleResponse = (module: InternalModule): IndexedModule => {
+  const parsedAbi = parseJsonABI(module.abi);
+  const { view, execute } = splitViewExecuteFunctions(
+    parsedAbi.exposed_functions
+  );
+  return {
+    ...module,
+    parsedAbi,
+    viewFunctions: view,
+    executeFunctions: execute,
+  };
+};
+
+export const useAddressModules = ({
+  address,
+  moduleName,
+  options = {},
+}: {
+  address: AccountAddr;
+  moduleName: string;
+  options?: Omit<UseQueryOptions<IndexedModule | IndexedModule[]>, "queryKey">;
+}): UseQueryResult<IndexedModule | IndexedModule[]> => {
+  const baseEndpoint = useBaseApiRoute("rest");
+  const queryFn: QueryFunction<IndexedModule | IndexedModule[]> = () =>
+    moduleName
+      ? getAccountModule(baseEndpoint, address, moduleName).then((module) =>
+          indexModuleResponse(module)
+        )
+      : getAccountModules(baseEndpoint, address).then((modules) =>
+          modules.map((module) => indexModuleResponse(module))
+        );
+
+  return useQuery(
+    [
+      CELATONE_QUERY_KEYS.ACCOUNT_MODULES,
+      baseEndpoint,
+      address as string,
+      moduleName,
+    ],
+    queryFn,
+    options
+  );
+};
diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
new file mode 100644
index 000000000..369de68d7
--- /dev/null
+++ b/src/lib/types/abi.ts
@@ -0,0 +1,81 @@
+import type { HexAddr } from "./addrs";
+import type { SnakeToCamelCaseNested } from "./converter";
+
+export enum UpgradePolicy {
+  ARBITRARY = "ARBITRARY",
+  COMPATIBLE = "COMPATIBLE",
+  IMMUTABLE = "IMMUTABLE",
+}
+
+export type Visibility = "public" | "friend" | "private" | "script";
+
+export interface ABIModule {
+  address: string;
+  name: string;
+  functions: ABIFunction[];
+}
+
+interface ABIFunction {
+  method: "query" | "tx";
+  moduleAddress: string;
+  moduleName: string;
+  functionName: string;
+  typeArgsLength: number;
+  argsTypes: string[];
+}
+
+/* response */
+export interface ResponseModule {
+  address: string;
+  module_name: string;
+  abi: string;
+  raw_bytes: string;
+  upgrade_policy: UpgradePolicy;
+}
+
+export interface ResponseModules {
+  modules: ResponseModule[];
+  pagination: ModulePagination;
+}
+
+export interface ModulePagination {
+  next_key: null;
+  total: string;
+}
+
+export interface ResponseABI {
+  address: HexAddr;
+  name: string;
+  friends: string[];
+  exposed_functions: ExposedFunction[];
+  structs: Struct[];
+}
+
+export type InternalModule = SnakeToCamelCaseNested<ResponseModule>;
+
+export interface ExposedFunction {
+  name: string;
+  visibility: Visibility;
+  is_view: boolean;
+  is_entry: boolean;
+  generic_type_params: GenericTypeParam[];
+  params: string[];
+  return: string[];
+}
+
+interface Struct {
+  name: string;
+  is_native: boolean;
+  abilities: string[];
+  generic_type_params: GenericTypeParam[];
+  fields: Field[];
+}
+
+interface GenericTypeParam {
+  constraints: string[];
+}
+
+interface Field {
+  name: string;
+  type: string;
+}
diff --git a/src/lib/types/addrs.ts b/src/lib/types/addrs.ts
index 3d1deb162..d1d3db035 100644
--- a/src/lib/types/addrs.ts
+++ b/src/lib/types/addrs.ts
@@ -1,7 +1,9 @@
 import type { NominalType } from "./currency/common";
 
 export type HumanAddr = string & NominalType<"HumanAddr">;
+export type HexAddr = string & NominalType<"HexAddr">;
 export type ContractAddr = string & NominalType<"ContractAddr">;
 export type ValidatorAddr = string & NominalType<"ValidatorAddr">;
 
 export type Addr = HumanAddr | ContractAddr;
+export type AccountAddr = HumanAddr | HexAddr;
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 64b2db555..2796947ca 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -15,3 +15,4 @@ export * from "./upload";
 export * from "./block";
 export * from "./asset";
 export * from "./converter";
+export * from "./abi";
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
new file mode 100644
index 000000000..8f50645fc
--- /dev/null
+++ b/src/lib/utils/abi.ts
@@ -0,0 +1,20 @@
+import type { ExposedFunction, ResponseABI } from "lib/types";
+
+export const parseJsonABI = (jsonString: string): ResponseABI => {
+  try {
+    return JSON.parse(jsonString);
+  } catch {
+    throw new Error("Fail to parse ABI json string");
+  }
+};
+
+export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
+  const functionMap: { [key in "view" | "execute"]: ExposedFunction[] } = {
+    view: [],
+    execute: [],
+  };
+  functions.forEach((fn) =>
+    fn.is_view ? functionMap.view.push(fn) : functionMap.execute.push(fn)
+  );
+  return functionMap;
+};
diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index 3388b2e25..c3f258b9d 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -1,4 +1,7 @@
+import { fromBech32, fromHex, toBech32, toHex } from "@cosmjs/encoding";
+
 import type { AddressReturnType } from "lib/app-provider";
+import type { HexAddr, HumanAddr } from "lib/types";
 
 export const getAddressTypeText = (addressType: AddressReturnType) => {
   switch (addressType) {
@@ -13,3 +16,15 @@ export const getAddressTypeText = (addressType: AddressReturnType) => {
       return "(Invalid Address)";
   }
 };
+
+export const bech32AddressToHex = (addr: HumanAddr): HexAddr =>
+  "0x".concat(toHex(fromBech32(addr).data)) as HexAddr;
+
+export const hexToBech32Address = (
+  prefix: string,
+  hexAddr: HexAddr
+): HumanAddr => {
+  let strip = hexAddr.replace("0x", "");
+  if (strip.length < 40) strip = strip.padStart(40, "0");
+  return toBech32(prefix, fromHex(strip)) as HumanAddr;
+};
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index b9e9ff2e7..58605251c 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -18,3 +18,13 @@ export const isBlock = (input: string): boolean => {
   const numberValue = Number(input);
   return Number.isInteger(numberValue) && numberValue > 0;
 };
+
+export const isHexAddress = (address: string): boolean => {
+  const strip = address.replace("0x", "");
+  try {
+    fromHex(strip);
+  } catch {
+    return false;
+  }
+  return strip.length <= 40;
+};

From 02190a06d9c31d9f8d158b7b5840724667ac5d4f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 4 Sep 2023 17:50:02 +0700
Subject: [PATCH 018/368] feat(components): layout with sticky multiple sidebar

---
 src/lib/layout/index.tsx               |   4 +-
 src/lib/pages/publish-module/index.tsx | 275 ++++++++++++++++++++++++-
 2 files changed, 269 insertions(+), 10 deletions(-)

diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 180746438..a74dbb9d7 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -90,7 +90,9 @@ const Layout = ({ children }: LayoutProps) => {
         </>
       )}
       <GridItem area="main" overflowX="hidden" id="content">
-        <div style={{ minHeight: "calc(100vh - 129px)" }}>{children}</div>
+        <div style={{ minHeight: "calc(100vh - 129px)", position: "relative" }}>
+          {children}
+        </div>
         <Footer />
       </GridItem>
     </Grid>
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 859e48c29..9559d76c6 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -1,14 +1,271 @@
-import { Flex, Text } from "@chakra-ui/react";
+import {
+  Text,
+  Grid,
+  GridItem,
+  Heading,
+  Box,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel,
+} from "@chakra-ui/react";
+
+import { useCelatoneApp } from "lib/app-provider";
+import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 
 export const PublishModule = () => {
+  const {
+    chainConfig: { prettyName: chainPrettyName },
+  } = useCelatoneApp();
+
+  const PUBLISH_MODULE_TEXT = {
+    header: "Publish new module",
+    description: `Upload .mv files to publish new module to ${chainPrettyName}. You can
+    upload multiple .mv files to publish many modules within a
+    transaction.`,
+    connectWallet: "You need to connect wallet to proceed this action",
+  };
   return (
-    <Flex>
-      <Text>
-        PublishModule: Lorem ipsum dolor sit amet consectetur adipisicing elit.
-        Aliquam voluptas hic aperiam ad sint unde sapiente cupiditate! Quo et
-        cupiditate iure, sequi deserunt tempora corrupti eum. Error facere
-        placeat repellendus?
-      </Text>
-    </Flex>
+    <Box as="main" p={{ base: "16px", md: "48px" }} minH="inherit">
+      <Grid
+        templateAreas={`"prespace main sidebar postspace"`}
+        templateColumns="1fr 6fr 4fr 1fr"
+      >
+        <GridItem area="main">
+          <Heading as="h5" variant="h5">
+            {PUBLISH_MODULE_TEXT.header}
+          </Heading>
+          <Text color="text.dark" pt={4}>
+            {PUBLISH_MODULE_TEXT.description}
+          </Text>
+          <ConnectWalletAlert
+            subtitle={PUBLISH_MODULE_TEXT.connectWallet}
+            mt={12}
+          />
+        </GridItem>
+      </Grid>
+      <Box position="relative" display="flex" mt={12}>
+        <Box w="10%" />
+        <Box w="60%">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit ameteiciendis
+          incidunt error! Enim animi mollitia suscipit pariatur odio, eveniet
+          cum ipsum! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+          Ab, expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum!
+        </Box>
+        <Box w="5%" />
+        <Box w="35%" position="relative">
+          <Box position="sticky" top={0}>
+            <Accordion
+              position="relative"
+              allowToggle
+              width={96}
+              defaultIndex={[0]}
+              variant="transparent"
+            >
+              <AccordionItem borderTop="none" borderColor="gray.700">
+                <AccordionButton py={3} px={0}>
+                  <Text
+                    variant="body1"
+                    fontWeight={700}
+                    color="text.main"
+                    textAlign="start"
+                  >
+                    What should I provide in my .mv files?
+                  </Text>
+                  <AccordionIcon color="gray.600" ml="auto" />
+                </AccordionButton>
+                <AccordionPanel
+                  bg="transparent"
+                  py={3}
+                  px={0}
+                  borderTop="1px solid"
+                  borderColor="gray.700"
+                >
+                  Your .mv files should consist of module name, available
+                  functions and their properties, module mechanics, friends.
+                </AccordionPanel>
+              </AccordionItem>
+            </Accordion>
+          </Box>
+        </Box>
+        <Box w="10%" />
+      </Box>
+      {/* Upgrade Policy */}
+      <Box position="relative" display="flex" mt={12}>
+        <Box w="10%" />
+        <Box w="60%">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit ameteiciendis
+          incidunt error! Enim animi mollitia suscipit pariatur odio, eveniet
+          cum ipsum! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+          Ab, expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
+          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
+          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
+          expedita. Et molestiae odio explicabo excepturi numquam assumenda
+          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
+          pariatur odio, eveniet cum ipsum!
+        </Box>
+        <Box w="5%" />
+        <Box w="35%" position="relative">
+          <Box position="sticky" top={0}>
+            <Accordion
+              position="relative"
+              allowToggle
+              width={96}
+              defaultIndex={[0]}
+              variant="transparent"
+            >
+              <AccordionItem borderTop="none" borderColor="gray.700">
+                <AccordionButton py={3} px={0}>
+                  <Text
+                    variant="body1"
+                    fontWeight={700}
+                    color="text.main"
+                    textAlign="start"
+                  >
+                    What is republishing module?
+                  </Text>
+                  <AccordionIcon color="gray.600" ml="auto" />
+                </AccordionButton>
+                <AccordionPanel
+                  bg="transparent"
+                  py={3}
+                  px={0}
+                  borderTop="1px solid"
+                  borderColor="gray.700"
+                >
+                  In {chainPrettyName}, You can republish the module which serve
+                  the purpose to migrate or upgrade the published module by
+                  uploading new .mv file with similar configurations. Each
+                  policy will provide different flexibility for further upgrades
+                  whether you can add new functions without maintaining old
+                  functions (Arbitrary), or required to maintain old functions
+                  (Compatible). Choosing “Immutable” will not allow you to make
+                  any changes with this module ever. You should read more about
+                </AccordionPanel>
+              </AccordionItem>
+            </Accordion>
+          </Box>
+        </Box>
+        <Box w="10%" />
+      </Box>
+    </Box>
   );
 };

From 4a56b463de882e796a8742734467bb16b60dff5a Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 4 Sep 2023 18:37:07 +0700
Subject: [PATCH 019/368] feat: add module verification

---
 src/lib/app-provider/env.ts                   |  1 +
 src/lib/components/module/ModuleCard.tsx      | 13 +++++++---
 .../drawer/body/ModuleSelectMainBody.tsx      | 12 +++++++++-
 .../interaction/component/drawer/index.tsx    |  1 +
 src/lib/services/module.ts                    | 24 +++++++++++++++++++
 src/lib/services/moduleService.ts             | 24 ++++++++++++++++++-
 src/lib/utils/abi.ts                          |  8 +++++++
 7 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 0e477df7a..74f85ad89 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -94,4 +94,5 @@ export enum CELATONE_QUERY_KEYS {
   POOL_TRANSACTION_BY_ID_COUNT = "CELATONE_QUERY_POOL_TRANSACTION_BY_ID_COUNT",
   // MODULES
   ACCOUNT_MODULES = "CELATONE_QUERY_ACCOUNT_MODULES",
+  MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
 }
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index 131632cee..6091ab827 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -3,22 +3,29 @@ import type { Dispatch, SetStateAction } from "react";
 
 import { CustomIcon } from "../icon";
 import type { IndexedModule } from "lib/services/moduleService";
-import type { Option } from "lib/types";
+import { useVerifyModule } from "lib/services/moduleService";
+import type { HumanAddr, Option } from "lib/types";
 
 import { CountBadge } from "./CountBadge";
 
 interface ModuleCardProps {
+  selectedAddress: HumanAddr;
   module: IndexedModule;
   selectedModule: Option<IndexedModule>;
   setSelectedModule: Dispatch<SetStateAction<Option<IndexedModule>>>;
 }
 
 export const ModuleCard = ({
+  selectedAddress,
   module,
   selectedModule,
   setSelectedModule,
 }: ModuleCardProps) => {
-  const noExposedFunctions = !module.parsedAbi.exposed_functions.length;
+  const { data: isVerified } = useVerifyModule({
+    address: selectedAddress,
+    moduleName: module.moduleName,
+  });
+
   return (
     <Grid
       borderRadius={8}
@@ -43,7 +50,7 @@ export const ModuleCard = ({
         <Text className="ellipsis" variant="body2">
           {module.moduleName}
         </Text>
-        {!noExposedFunctions && (
+        {isVerified && (
           <CustomIcon
             name="check-circle-solid"
             color="success.main"
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
index d25c0622e..2a90bba86 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
@@ -2,7 +2,11 @@ import { Grid, GridItem, Text, Flex, Box, Button } from "@chakra-ui/react";
 import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState } from "react";
 
-import type { DisplayMode, ModuleSelectFunction } from "../types";
+import type {
+  DisplayMode,
+  ModuleSelectFunction,
+  SelectedAddress,
+} from "../types";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
 import { ModuleCard } from "lib/components/module/ModuleCard";
@@ -13,6 +17,7 @@ import { ModuleEmptyState } from "./ModuleEmptyState";
 import { ModuleFunctionBody } from "./ModuleFunctionBody";
 
 interface ModuleSelectBodyProps {
+  selectedAddress: SelectedAddress;
   modules: IndexedModule[];
   mode: DisplayMode;
   handleModuleSelect: ModuleSelectFunction;
@@ -20,11 +25,13 @@ interface ModuleSelectBodyProps {
 }
 
 const RenderModules = ({
+  selectedAddress,
   modulesLength,
   filtered,
   selectedModule,
   setSelectedModule,
 }: {
+  selectedAddress: SelectedAddress;
   modulesLength: number;
   filtered: IndexedModule[];
   selectedModule: Option<IndexedModule>;
@@ -44,6 +51,7 @@ const RenderModules = ({
       {filtered.map((module) => (
         <ModuleCard
           key={module.moduleName}
+          selectedAddress={selectedAddress.address}
           module={module}
           selectedModule={selectedModule}
           setSelectedModule={setSelectedModule}
@@ -61,6 +69,7 @@ const RenderModules = ({
 };
 
 export const ModuleSelectMainBody = ({
+  selectedAddress,
   mode,
   modules,
   handleModuleSelect,
@@ -118,6 +127,7 @@ export const ModuleSelectMainBody = ({
           mt={2}
         >
           <RenderModules
+            selectedAddress={selectedAddress}
             modulesLength={modules.length}
             filtered={filteredModules}
             selectedModule={selectedModule}
diff --git a/src/lib/pages/interaction/component/drawer/index.tsx b/src/lib/pages/interaction/component/drawer/index.tsx
index cf5d0916a..4e31721c4 100644
--- a/src/lib/pages/interaction/component/drawer/index.tsx
+++ b/src/lib/pages/interaction/component/drawer/index.tsx
@@ -69,6 +69,7 @@ export const ModuleSelectDrawerTrigger = ({
               />
               {modules ? (
                 <ModuleSelectMainBody
+                  selectedAddress={selectedAddress}
                   mode={mode}
                   modules={modules}
                   handleModuleSelect={handleModuleSelect}
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 7daad4658..79cdc3a6e 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -5,6 +5,7 @@ import type {
   ResponseModule,
   ResponseModules,
   InternalModule,
+  HexAddr,
 } from "lib/types";
 import { snakeToCamel } from "lib/utils";
 
@@ -33,3 +34,26 @@ export const getAccountModule = async (
   );
   return snakeToCamel(data.module);
 };
+
+interface ModuleVerificationReturn {
+  id: number;
+  module_address: HexAddr;
+  module_name: string;
+  verified_at: string;
+  digest: string;
+  source: string;
+  base64: string;
+  chain_id: string;
+}
+
+export const getModuleVerificationStatus = async (
+  address: AccountAddr,
+  moduleName: string
+): Promise<boolean> =>
+  // TODO: move url to base api route? wait for celatone api implementation?
+  axios
+    .get<ModuleVerificationReturn>(
+      `https://stone-compiler.initia.tech/contracts/${address}/${moduleName}`
+    )
+    .then(() => true)
+    .catch(() => false);
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index a10144ca0..14628a18d 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -14,7 +14,11 @@ import type {
 } from "lib/types";
 import { parseJsonABI, splitViewExecuteFunctions } from "lib/utils/abi";
 
-import { getAccountModule, getAccountModules } from "./module";
+import {
+  getAccountModule,
+  getAccountModules,
+  getModuleVerificationStatus,
+} from "./module";
 
 export interface IndexedModule extends InternalModule {
   parsedAbi: ResponseABI;
@@ -65,3 +69,21 @@ export const useAddressModules = ({
     options
   );
 };
+
+export const useVerifyModule = ({
+  address,
+  moduleName,
+}: {
+  address: AccountAddr;
+  moduleName: string;
+}) =>
+  useQuery(
+    [CELATONE_QUERY_KEYS.MODULE_VERIFICATION, address, moduleName],
+    () => getModuleVerificationStatus(address, moduleName),
+    {
+      enabled: Boolean(address && moduleName),
+      retry: 0,
+      refetchOnWindowFocus: false,
+      keepPreviousData: true,
+    }
+  );
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 8f50645fc..01b630699 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -8,6 +8,11 @@ export const parseJsonABI = (jsonString: string): ResponseABI => {
   }
 };
 
+const sortByIsEntry = (a: ExposedFunction, b: ExposedFunction) => {
+  if (a.is_entry === b.is_entry) return 0;
+  return a.is_entry ? -1 : 1;
+};
+
 export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
   const functionMap: { [key in "view" | "execute"]: ExposedFunction[] } = {
     view: [],
@@ -16,5 +21,8 @@ export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
   functions.forEach((fn) =>
     fn.is_view ? functionMap.view.push(fn) : functionMap.execute.push(fn)
   );
+  functionMap.view.sort(sortByIsEntry);
+  functionMap.execute.sort(sortByIsEntry);
+
   return functionMap;
 };

From abc16ad92a500fb10199597839787a1adbeb3f12 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 4 Sep 2023 18:50:48 +0700
Subject: [PATCH 020/368] fix: add selected address to default value

---
 .../interaction/component/drawer/selector/SelectorInput.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index 067c4b70e..faccaa2eb 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -36,7 +36,7 @@ export const ModuleSelectorInput = ({
   setMode,
   closeModal,
 }: ModuleSelectorInputProps) => {
-  const [keyword, setKeyword] = useState("");
+  const [keyword, setKeyword] = useState(selectedAddress.address as string);
   const [error, setError] = useState("");
   const [addr, moduleName] = useMemo(() => keyword.split("::"), [keyword]);
 

From f4a881f4a38462acc8600d46c53578cd869ec408 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 10:51:39 +0700
Subject: [PATCH 021/368] fix(components): fix spacing

---
 public/font/pilatwide.css | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/public/font/pilatwide.css b/public/font/pilatwide.css
index 906dec887..ab1fb3f98 100644
--- a/public/font/pilatwide.css
+++ b/public/font/pilatwide.css
@@ -1,8 +1,7 @@
 @font-face {
-    font-family: 'Pilat Wide';
-    src: url('../font/PilatWide-Bold.woff');
-    src: url('../font/PilatWide-Bold.woff2');
-    font-weight: 600;
-    font-style: normal;
-    }
-    
\ No newline at end of file
+  font-family: "Pilat Wide";
+  src: url("../font/PilatWide-Bold.woff");
+  src: url("../font/PilatWide-Bold.woff2");
+  font-weight: 600;
+  font-style: normal;
+}

From 109bc1ff2d67adb3f8da1de03da0df2f87284a6d Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 11:24:46 +0700
Subject: [PATCH 022/368] feat(components): upload module card

---
 .../components/UploadModuleCard.tsx           | 37 +++++++++++
 src/lib/pages/publish-module/index.tsx        | 63 +++++++++++++++----
 2 files changed, 88 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/pages/publish-module/components/UploadModuleCard.tsx

diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
new file mode 100644
index 000000000..5e51a2f1a
--- /dev/null
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -0,0 +1,37 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+interface UploadModuleCardProps {
+  index: number;
+}
+export const UploadModuleCard = ({ index }: UploadModuleCardProps) => {
+  return (
+    <Flex
+      bg="gray.900"
+      border="1px solid"
+      borderColor="gray.700"
+      borderRadius={8}
+      p={4}
+      gap={4}
+      flexDirection="column"
+    >
+      <Flex justifyContent="space-between" w="full">
+        <Heading as="h6" variant="h6" color="text.dark" fontWeight={800}>
+          Module {index}
+        </Heading>
+        <CustomIcon name="close" color="gray.600" />
+      </Flex>
+      {/* UPLOAD CARD */}
+      add upload card here
+      <Flex justifyContent="space-between" w="full">
+        <Text variant="body2" color="text.dark">
+          Module Path
+        </Text>
+        <Text variant="body2" color="text.dark">
+          -
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 9559d76c6..0da028c9e 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -9,10 +9,14 @@ import {
   AccordionButton,
   AccordionIcon,
   AccordionPanel,
+  Flex,
 } from "@chakra-ui/react";
 
 import { useCelatoneApp } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
+import { CustomIcon } from "lib/components/icon";
+
+import { UploadModuleCard } from "./components/UploadModuleCard";
 
 export const PublishModule = () => {
   const {
@@ -48,6 +52,10 @@ export const PublishModule = () => {
       <Box position="relative" display="flex" mt={12}>
         <Box w="10%" />
         <Box w="60%">
+          <Heading as="h6" variant="h6" fontWeight={800}>
+            Upload .mv files(s)
+          </Heading>
+          <UploadModuleCard index={1} />
           Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
           expedita. Et molestiae odio explicabo excepturi numquam assumenda
           consectetur reiciendis incidunt error! Enim animi mollitia suscipit
@@ -127,7 +135,7 @@ export const PublishModule = () => {
               <AccordionItem borderTop="none" borderColor="gray.700">
                 <AccordionButton py={3} px={0}>
                   <Text
-                    variant="body1"
+                    variant="body2"
                     fontWeight={700}
                     color="text.main"
                     textAlign="start"
@@ -143,8 +151,10 @@ export const PublishModule = () => {
                   borderTop="1px solid"
                   borderColor="gray.700"
                 >
-                  Your .mv files should consist of module name, available
-                  functions and their properties, module mechanics, friends.
+                  <Text variant="body2" color="text.dark" p={1}>
+                    Your .mv files should consist of module name, available
+                    functions and their properties, module mechanics, friends.
+                  </Text>
                 </AccordionPanel>
               </AccordionItem>
             </Accordion>
@@ -235,7 +245,7 @@ export const PublishModule = () => {
               <AccordionItem borderTop="none" borderColor="gray.700">
                 <AccordionButton py={3} px={0}>
                   <Text
-                    variant="body1"
+                    variant="body2"
                     fontWeight={700}
                     color="text.main"
                     textAlign="start"
@@ -251,14 +261,43 @@ export const PublishModule = () => {
                   borderTop="1px solid"
                   borderColor="gray.700"
                 >
-                  In {chainPrettyName}, You can republish the module which serve
-                  the purpose to migrate or upgrade the published module by
-                  uploading new .mv file with similar configurations. Each
-                  policy will provide different flexibility for further upgrades
-                  whether you can add new functions without maintaining old
-                  functions (Arbitrary), or required to maintain old functions
-                  (Compatible). Choosing “Immutable” will not allow you to make
-                  any changes with this module ever. You should read more about
+                  <Text variant="body2" color="text.dark" p={1}>
+                    In {chainPrettyName}, You can republish the module which
+                    serve the purpose to migrate or upgrade the published module
+                    by uploading new .mv file with similar configurations. Each
+                    policy will provide different flexibility for further
+                    upgrades whether you can add new functions without
+                    maintaining old functions (Arbitrary), or required to
+                    maintain old functions (Compatible). Choosing “Immutable”
+                    will not allow you to make any changes with this module
+                    ever. You should read more about
+                  </Text>
+                  <Flex
+                    align="center"
+                    cursor="pointer"
+                    borderRadius={2}
+                    p={1}
+                    gap={1}
+                    alignItems="center"
+                    width="fit-content"
+                    transition="all 0.25s ease-in-out"
+                    color="secondary.main"
+                    _hover={{
+                      color: "secondary.light",
+                      bgColor: "secondary.background",
+                    }}
+                    // onClick={onClick}
+                  >
+                    <Text variant="body2" color="primary.main" fontWeight={700}>
+                      See Initia Doc
+                    </Text>
+                    <CustomIcon
+                      name="chevron-right"
+                      color="primary.main"
+                      boxSize={3}
+                      m={0}
+                    />
+                  </Flex>
                 </AccordionPanel>
               </AccordionItem>
             </Accordion>

From 035721ea45f0afad763a765e7d4c03119ec12549 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 11:38:56 +0700
Subject: [PATCH 023/368] fix(components): fix minor structure

---
 public/font/pilatwide.css                        |  4 ++--
 src/lib/components/resource/ResourceCard.tsx     |  2 +-
 .../components/resources/ResourceLists.tsx       | 16 +++++++++-------
 .../components/resources/ResourceSection.tsx     |  3 ++-
 src/lib/pages/account-details/index.tsx          |  2 +-
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/public/font/pilatwide.css b/public/font/pilatwide.css
index ab1fb3f98..0b13b7a56 100644
--- a/public/font/pilatwide.css
+++ b/public/font/pilatwide.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "Pilat Wide";
-  src: url("../font/PilatWide-Bold.woff");
-  src: url("../font/PilatWide-Bold.woff2");
+  src: url("./PilatWide-Bold.woff");
+  src: url("./PilatWide-Bold.woff2");
   font-weight: 600;
   font-style: normal;
 }
diff --git a/src/lib/components/resource/ResourceCard.tsx b/src/lib/components/resource/ResourceCard.tsx
index 16442ad17..0157c859f 100644
--- a/src/lib/components/resource/ResourceCard.tsx
+++ b/src/lib/components/resource/ResourceCard.tsx
@@ -15,7 +15,7 @@ export const ResourceCard = ({
   return (
     <Flex
       w="full"
-      border={hasBorder ? "1px solid" : "0px"}
+      border={hasBorder ? "1px solid" : "none"}
       _hover={{ background: "gray.800" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index b2b204989..e0693572f 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -55,14 +55,16 @@ export const ResourceLists = ({
       <ResourceTitle onViewMore={onViewMore} totalAsset={totalAsset} />
       {!isMobile && (
         // TODO: data
-        <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
-          <ResourceCard name="resource ja" amount={3} />
-          <ResourceCard name="resource ja" amount={3} />
-          <ResourceCard name="resource ja" amount={3} />
-          <ResourceCard name="resource ja" amount={3} />
-        </SimpleGrid>
+        <>
+          <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
+            <ResourceCard name="resource ja" amount={3} />
+            <ResourceCard name="resource ja" amount={3} />
+            <ResourceCard name="resource ja" amount={3} />
+            <ResourceCard name="resource ja" amount={3} />
+          </SimpleGrid>
+          {onViewMore && <ViewMore onClick={onViewMore} />}
+        </>
       )}
-      {!isMobile && onViewMore && <ViewMore onClick={onViewMore} />}
     </Flex>
   );
 };
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 2f98adb7e..8094a59aa 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -72,7 +72,8 @@ export const ResourceSection = () => {
               9
             </Badge>
           </Flex>
-          <Flex>
+          <Flex gap={3} flexDirection="column">
+            <ResourceDetailCard name="test" />
             <ResourceDetailCard name="test" />
           </Flex>
         </Flex>
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index d60142cad..85eab8031 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -52,7 +52,7 @@ enum TabIndex {
   Overview = "overview",
   Assets = "assets",
   Delegations = "delegations",
-  NFTs = "ntfs",
+  NFTs = "nfts",
   Txs = "txs",
   Codes = "codes",
   Contracts = "contracts",

From 520dfa8c818d7d0cc51bbe0e1f2105a6282c2f89 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 13:20:41 +0700
Subject: [PATCH 024/368] feat(components): publish module page ui

---
 src/lib/components/StickySidebar.tsx          |  10 +-
 src/lib/pages/proposal/components/Footer.tsx  |   4 +-
 src/lib/pages/proposal/store-code/index.tsx   |   2 +-
 .../publish-module/components/Footer.tsx      |  41 ++
 .../publish-module/components/PolicyCard.tsx  |  53 ++
 .../components/UploadModuleCard.tsx           |  24 +-
 src/lib/pages/publish-module/index.tsx        | 503 +++++++++---------
 7 files changed, 360 insertions(+), 277 deletions(-)
 create mode 100644 src/lib/pages/publish-module/components/Footer.tsx
 create mode 100644 src/lib/pages/publish-module/components/PolicyCard.tsx

diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
index 7af7fe432..c25610304 100644
--- a/src/lib/components/StickySidebar.tsx
+++ b/src/lib/components/StickySidebar.tsx
@@ -39,9 +39,10 @@ const ToPage = ({ onClick, title }: ToPageProps) => (
   <Flex
     align="center"
     cursor="pointer"
-    borderRadius={8}
+    borderRadius={4}
     p={1}
-    gap={2}
+    gap={1}
+    alignItems="center"
     width="fit-content"
     transition="all 0.25s ease-in-out"
     color="secondary.main"
@@ -51,7 +52,7 @@ const ToPage = ({ onClick, title }: ToPageProps) => (
     }}
     onClick={onClick}
   >
-    <Text variant="body3" color="inherit" fontWeight={700}>
+    <Text variant="body3" color="secondary.main" fontWeight={700}>
       {title}
     </Text>
     <CustomIcon name="chevron-right" color="secondary.main" boxSize={3} m={0} />
@@ -104,7 +105,7 @@ export const StickySidebar = ({
           <AccordionItem borderTop="none" borderColor="gray.700">
             <AccordionButton py={3} px={0}>
               <Text
-                variant="body1"
+                variant="body2"
                 fontWeight={700}
                 color="text.main"
                 textAlign="start"
@@ -125,6 +126,7 @@ export const StickySidebar = ({
                 color="text.dark"
                 mb={hasAction ? 3 : 0}
                 pb={2}
+                p={1}
               >
                 {description}
               </Text>
diff --git a/src/lib/pages/proposal/components/Footer.tsx b/src/lib/pages/proposal/components/Footer.tsx
index bd8e44f9f..b88133f9f 100644
--- a/src/lib/pages/proposal/components/Footer.tsx
+++ b/src/lib/pages/proposal/components/Footer.tsx
@@ -22,8 +22,8 @@ export const Footer = ({
       bottom="0"
       position="sticky"
       zIndex={2}
-      templateAreas={`"prespace main postspace"`}
-      templateColumns="1fr 6fr 5fr"
+      templateAreas={`"prespace main  postspace"`}
+      templateColumns="1fr 5fr 4fr"
     >
       <GridItem area="main">
         <Flex flex="5" align="center" justify="space-between" h="full" w="full">
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 7fc7c7d0a..819805b62 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -346,7 +346,7 @@ const StoreCodeProposal = () => {
       <PageContainer>
         <Grid
           templateAreas={`"prespace main sidebar postspace"`}
-          templateColumns="1fr 6fr 4fr 1fr"
+          templateColumns="1fr 5fr 3fr 1fr"
         >
           <GridItem area="main">
             <Heading as="h5" variant="h5">
diff --git a/src/lib/pages/publish-module/components/Footer.tsx b/src/lib/pages/publish-module/components/Footer.tsx
new file mode 100644
index 000000000..8f8694a84
--- /dev/null
+++ b/src/lib/pages/publish-module/components/Footer.tsx
@@ -0,0 +1,41 @@
+import { Button, Flex, Grid, GridItem, Spinner } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+interface FooterProps {
+  //   onSubmit: () => void;
+  //   disabled: boolean;
+  isLoading: boolean;
+  fieldAmount: number;
+}
+
+export const Footer = ({ isLoading = false, fieldAmount }: FooterProps) => {
+  const router = useRouter();
+  return (
+    <Grid
+      w="full"
+      px={12}
+      bg="gray.900"
+      h="70px"
+      bottom="0"
+      position="sticky"
+      zIndex={2}
+      templateAreas={`"prespace main postspace"`}
+      templateColumns="1fr 5fr 4fr"
+    >
+      <GridItem area="main">
+        <Flex flex="5" align="center" justify="space-between" h="full" w="full">
+          <Button variant="outline-primary" onClick={router.back}>
+            Cancel
+          </Button>
+          <Button variant="primary" isDisabled={isLoading}>
+            {isLoading ? (
+              <Spinner size="md" variant="light" />
+            ) : (
+              `Publish ${fieldAmount} Modules`
+            )}
+          </Button>
+        </Flex>
+      </GridItem>
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/publish-module/components/PolicyCard.tsx b/src/lib/pages/publish-module/components/PolicyCard.tsx
new file mode 100644
index 000000000..5ab3780fb
--- /dev/null
+++ b/src/lib/pages/publish-module/components/PolicyCard.tsx
@@ -0,0 +1,53 @@
+import { Flex, Radio, Text, Heading, Spinner } from "@chakra-ui/react";
+
+interface PolicyCardProps {
+  value: string;
+  description: string;
+  // total: Option<Record<string, TokenWithValue>>;
+  // defaultToken: TokenWithValue;
+  hasCondition?: boolean;
+  isLoading: boolean;
+}
+
+export const PolicyCard = ({
+  value,
+  description,
+  isLoading,
+  hasCondition = false,
+}: PolicyCardProps) => {
+  return (
+    <Radio variant="card" value={value} overflowX="hidden">
+      <Flex direction="column" gap={1} py={1}>
+        {isLoading ? (
+          <Spinner mt={2} alignSelf="center" size="xl" />
+        ) : (
+          <Flex flexDirection="column">
+            <Heading
+              variant="h6"
+              as="h6"
+              fontWeight={600}
+              textTransform="capitalize"
+            >
+              {value}
+            </Heading>
+            <Flex mt={1}>
+              <Text variant="body2" textColor="text.dark">
+                {description}
+                {hasCondition && (
+                  <Text
+                    ml={1}
+                    as="span"
+                    variant="body2"
+                    textColor="primary.main"
+                  >
+                    View conditions
+                  </Text>
+                )}
+              </Text>
+            </Flex>
+          </Flex>
+        )}
+      </Flex>
+    </Radio>
+  );
+};
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 5e51a2f1a..fca0b21a6 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -1,11 +1,17 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
+import { Flex, Heading, IconButton, Text } from "@chakra-ui/react";
 
 import { CustomIcon } from "lib/components/icon";
 
 interface UploadModuleCardProps {
   index: number;
+  remove: () => void;
+  fieldAmount: number;
 }
-export const UploadModuleCard = ({ index }: UploadModuleCardProps) => {
+export const UploadModuleCard = ({
+  index,
+  remove,
+  fieldAmount,
+}: UploadModuleCardProps) => {
   return (
     <Flex
       bg="gray.900"
@@ -16,11 +22,19 @@ export const UploadModuleCard = ({ index }: UploadModuleCardProps) => {
       gap={4}
       flexDirection="column"
     >
-      <Flex justifyContent="space-between" w="full">
+      <Flex justifyContent="space-between" w="full" alignItems="center">
         <Heading as="h6" variant="h6" color="text.dark" fontWeight={800}>
-          Module {index}
+          Module {index + 1}
         </Heading>
-        <CustomIcon name="close" color="gray.600" />
+        <IconButton
+          onClick={remove}
+          aria-label="remove"
+          variant="ghost"
+          size="sm"
+          disabled={fieldAmount <= 1}
+        >
+          <CustomIcon name="close" color="gray.600" />
+        </IconButton>
       </Flex>
       {/* UPLOAD CARD */}
       add upload card here
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 0da028c9e..e1c6f35b1 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -10,14 +10,29 @@ import {
   AccordionIcon,
   AccordionPanel,
   Flex,
+  Button,
 } from "@chakra-ui/react";
+import { useFieldArray, useForm } from "react-hook-form";
 
 import { useCelatoneApp } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { CustomIcon } from "lib/components/icon";
 
+import { Footer } from "./components/Footer";
+import { PolicyCard } from "./components/PolicyCard";
 import { UploadModuleCard } from "./components/UploadModuleCard";
 
+interface Module {
+  file: string;
+  path: string;
+}
+interface PublishModuleState {
+  modules: { module: Module }[];
+}
+
+const defaultValues: PublishModuleState = {
+  modules: [{ module: { file: "", path: "" } }],
+};
 export const PublishModule = () => {
   const {
     chainConfig: { prettyName: chainPrettyName },
@@ -30,281 +45,239 @@ export const PublishModule = () => {
     transaction.`,
     connectWallet: "You need to connect wallet to proceed this action",
   };
+
+  const policies = [
+    {
+      value: "arbitrary",
+      description:
+        "You can publish these modules again without any restrictions",
+      condition: false,
+    },
+    {
+      value: "compatible",
+      description:
+        "This address can publish these modules again but need to maintain several properties.",
+      condition: true,
+    },
+    {
+      value: "immutable",
+      description: "You cannot publish these modules again with this address",
+      condition: false,
+    },
+  ];
+
+  const { control } = useForm<PublishModuleState>({
+    defaultValues,
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "modules",
+  });
+
   return (
-    <Box as="main" p={{ base: "16px", md: "48px" }} minH="inherit">
-      <Grid
-        templateAreas={`"prespace main sidebar postspace"`}
-        templateColumns="1fr 6fr 4fr 1fr"
-      >
-        <GridItem area="main">
-          <Heading as="h5" variant="h5">
-            {PUBLISH_MODULE_TEXT.header}
-          </Heading>
-          <Text color="text.dark" pt={4}>
-            {PUBLISH_MODULE_TEXT.description}
-          </Text>
-          <ConnectWalletAlert
-            subtitle={PUBLISH_MODULE_TEXT.connectWallet}
-            mt={12}
-          />
-        </GridItem>
-      </Grid>
-      <Box position="relative" display="flex" mt={12}>
-        <Box w="10%" />
-        <Box w="60%">
-          <Heading as="h6" variant="h6" fontWeight={800}>
-            Upload .mv files(s)
-          </Heading>
-          <UploadModuleCard index={1} />
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit ameteiciendis
-          incidunt error! Enim animi mollitia suscipit pariatur odio, eveniet
-          cum ipsum! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-          Ab, expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum!
-        </Box>
-        <Box w="5%" />
-        <Box w="35%" position="relative">
-          <Box position="sticky" top={0}>
-            <Accordion
-              position="relative"
-              allowToggle
-              width={96}
-              defaultIndex={[0]}
-              variant="transparent"
+    <>
+      <Box as="main" p={{ base: "16px", md: "48px" }} minH="inherit">
+        <Grid
+          templateAreas={`"prespace main postspace"`}
+          templateColumns="1fr 5fr 4fr"
+        >
+          <GridItem area="main">
+            <Heading as="h5" variant="h5">
+              {PUBLISH_MODULE_TEXT.header}
+            </Heading>
+            <Text color="text.dark" pt={4}>
+              {PUBLISH_MODULE_TEXT.description}
+            </Text>
+            <ConnectWalletAlert
+              subtitle={PUBLISH_MODULE_TEXT.connectWallet}
+              mt={12}
+            />
+          </GridItem>
+        </Grid>
+        <Box position="relative" display="flex" mt={12}>
+          <Box w="10%" />
+          <Box w="50%">
+            <Heading as="h6" variant="h6" fontWeight={800}>
+              Upload .mv files(s)
+            </Heading>
+            <Flex gap={6} flexDirection="column" my={6}>
+              {fields.map((field, idx) => (
+                <UploadModuleCard
+                  index={idx}
+                  fieldAmount={fields.length}
+                  remove={() => remove(idx)}
+                />
+              ))}
+            </Flex>
+            <Button
+              onClick={() => append({ module: { file: "", path: "" } })}
+              leftIcon={<CustomIcon name="add-new" />}
+              variant="ghost-primary"
+              p={0}
+              pl={1}
+              pr={1}
             >
-              <AccordionItem borderTop="none" borderColor="gray.700">
-                <AccordionButton py={3} px={0}>
-                  <Text
-                    variant="body2"
-                    fontWeight={700}
-                    color="text.main"
-                    textAlign="start"
+              Publish More Modules
+            </Button>
+          </Box>
+          <Box w="30%" position="relative" pl={12}>
+            <Box position="sticky" top={0}>
+              <Accordion
+                position="relative"
+                allowToggle
+                width={96}
+                defaultIndex={[0]}
+                variant="transparent"
+              >
+                <AccordionItem borderTop="none" borderColor="gray.700">
+                  <AccordionButton py={3} px={0}>
+                    <Text
+                      variant="body2"
+                      fontWeight={700}
+                      color="text.main"
+                      textAlign="start"
+                    >
+                      What should I provide in my .mv files?
+                    </Text>
+                    <AccordionIcon color="gray.600" ml="auto" />
+                  </AccordionButton>
+                  <AccordionPanel
+                    bg="transparent"
+                    py={3}
+                    px={0}
+                    borderTop="1px solid"
+                    borderColor="gray.700"
                   >
-                    What should I provide in my .mv files?
-                  </Text>
-                  <AccordionIcon color="gray.600" ml="auto" />
-                </AccordionButton>
-                <AccordionPanel
-                  bg="transparent"
-                  py={3}
-                  px={0}
-                  borderTop="1px solid"
-                  borderColor="gray.700"
-                >
-                  <Text variant="body2" color="text.dark" p={1}>
-                    Your .mv files should consist of module name, available
-                    functions and their properties, module mechanics, friends.
-                  </Text>
-                </AccordionPanel>
-              </AccordionItem>
-            </Accordion>
+                    <Text variant="body2" color="text.dark" p={1}>
+                      Your .mv files should consist of module name, available
+                      functions and their properties, module mechanics, friends.
+                    </Text>
+                  </AccordionPanel>
+                </AccordionItem>
+              </Accordion>
+            </Box>
           </Box>
+          <Box w="10%" />
         </Box>
-        <Box w="10%" />
-      </Box>
-      {/* Upgrade Policy */}
-      <Box position="relative" display="flex" mt={12}>
-        <Box w="10%" />
-        <Box w="60%">
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit ameteiciendis
-          incidunt error! Enim animi mollitia suscipit pariatur odio, eveniet
-          cum ipsum! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-          Ab, expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum! Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Ab, expedita. Et molestiae odio
-          explicabo excepturi numquam assumenda consectetur reiciendis incidunt
-          error! Enim animi mollitia suscipit pariatur odio, eveniet cum ipsum!
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab,
-          expedita. Et molestiae odio explicabo excepturi numquam assumenda
-          consectetur reiciendis incidunt error! Enim animi mollitia suscipit
-          pariatur odio, eveniet cum ipsum!
-        </Box>
-        <Box w="5%" />
-        <Box w="35%" position="relative">
-          <Box position="sticky" top={0}>
-            <Accordion
-              position="relative"
-              allowToggle
-              width={96}
-              defaultIndex={[0]}
-              variant="transparent"
+        {/* Upgrade Policy */}
+        <Box position="relative" display="flex" mt={12}>
+          <Box w="10%" />
+          <Box w="50%">
+            <Heading as="h6" variant="h6" fontWeight={800}>
+              Upgrade Policy
+            </Heading>
+            <Text color="text.dark" variant="body2" mt={2}>
+              Specify how publishing modules will be able to republish.
+            </Text>
+            <Flex flexDirection="column" gap={2} my={4}>
+              {policies.map((item) => (
+                <PolicyCard
+                  value={item.value}
+                  description={item.description}
+                  isLoading={false}
+                  hasCondition={item.condition}
+                />
+              ))}
+            </Flex>
+            <Text color="text.dark" variant="body3">
+              ** Upgrade policy can be changed later, but will not able to
+              change to the more lenient policy.
+            </Text>
+            <Flex
+              mt={12}
+              fontSize="14px"
+              color="text.dark"
+              alignSelf="flex-start"
+              alignItems="center"
+              display="flex"
+              gap={1}
             >
-              <AccordionItem borderTop="none" borderColor="gray.700">
-                <AccordionButton py={3} px={0}>
-                  <Text
-                    variant="body2"
-                    fontWeight={700}
-                    color="text.main"
-                    textAlign="start"
-                  >
-                    What is republishing module?
-                  </Text>
-                  <AccordionIcon color="gray.600" ml="auto" />
-                </AccordionButton>
-                <AccordionPanel
-                  bg="transparent"
-                  py={3}
-                  px={0}
-                  borderTop="1px solid"
-                  borderColor="gray.700"
-                >
-                  <Text variant="body2" color="text.dark" p={1}>
-                    In {chainPrettyName}, You can republish the module which
-                    serve the purpose to migrate or upgrade the published module
-                    by uploading new .mv file with similar configurations. Each
-                    policy will provide different flexibility for further
-                    upgrades whether you can add new functions without
-                    maintaining old functions (Arbitrary), or required to
-                    maintain old functions (Compatible). Choosing “Immutable”
-                    will not allow you to make any changes with this module
-                    ever. You should read more about
-                  </Text>
-                  <Flex
-                    align="center"
-                    cursor="pointer"
-                    borderRadius={2}
-                    p={1}
-                    gap={1}
-                    alignItems="center"
-                    width="fit-content"
-                    transition="all 0.25s ease-in-out"
-                    color="secondary.main"
-                    _hover={{
-                      color: "secondary.light",
-                      bgColor: "secondary.background",
-                    }}
-                    // onClick={onClick}
+              <p>Transaction Fee:</p>
+              {/* <EstimatedFeeRender
+              estimatedFee={estimatedFee}
+              loading={isSimulating}
+            /> */}
+            </Flex>
+          </Box>
+          <Box w="30%" position="relative" pl={12}>
+            <Box position="sticky" top={0}>
+              <Accordion
+                position="relative"
+                allowToggle
+                width={96}
+                defaultIndex={[0]}
+                variant="transparent"
+              >
+                <AccordionItem borderTop="none" borderColor="gray.700">
+                  <AccordionButton py={3} px={0}>
+                    <Text
+                      variant="body2"
+                      fontWeight={700}
+                      color="text.main"
+                      textAlign="start"
+                    >
+                      What is republishing module?
+                    </Text>
+                    <AccordionIcon color="gray.600" ml="auto" />
+                  </AccordionButton>
+                  <AccordionPanel
+                    bg="transparent"
+                    py={3}
+                    px={0}
+                    borderTop="1px solid"
+                    borderColor="gray.700"
                   >
-                    <Text variant="body2" color="primary.main" fontWeight={700}>
-                      See Initia Doc
+                    <Text variant="body2" color="text.dark" p={1}>
+                      In {chainPrettyName}, You can republish the module which
+                      serve the purpose to migrate or upgrade the published
+                      module by uploading new .mv file with similar
+                      configurations. Each policy will provide different
+                      flexibility for further upgrades whether you can add new
+                      functions without maintaining old functions (Arbitrary),
+                      or required to maintain old functions (Compatible).
+                      Choosing “Immutable” will not allow you to make any
+                      changes with this module ever. You should read more about
                     </Text>
-                    <CustomIcon
-                      name="chevron-right"
-                      color="primary.main"
-                      boxSize={3}
-                      m={0}
-                    />
-                  </Flex>
-                </AccordionPanel>
-              </AccordionItem>
-            </Accordion>
+                    <Flex
+                      align="center"
+                      cursor="pointer"
+                      borderRadius={4}
+                      p={1}
+                      gap={1}
+                      alignItems="center"
+                      width="fit-content"
+                      transition="all 0.25s ease-in-out"
+                      color="secondary.main"
+                      _hover={{
+                        color: "secondary.light",
+                        bgColor: "secondary.background",
+                      }}
+                      // onClick={onClick}
+                    >
+                      <Text
+                        variant="body3"
+                        color="secondary.main"
+                        fontWeight={700}
+                      >
+                        See Initia Doc
+                      </Text>
+                      <CustomIcon
+                        name="chevron-right"
+                        color="secondary.main"
+                        boxSize={3}
+                        m={0}
+                      />
+                    </Flex>
+                  </AccordionPanel>
+                </AccordionItem>
+              </Accordion>
+            </Box>
           </Box>
+          <Box w="10%" />
         </Box>
-        <Box w="10%" />
       </Box>
-    </Box>
+      <Footer isLoading={false} fieldAmount={fields.length} />
+    </>
   );
 };

From 4a547ccc75c6b71c1f052bdc670fd437baa23b86 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 13:31:16 +0700
Subject: [PATCH 025/368] feat(components): add nft config

---
 public/font/pilatwide.css                     |  1 +
 src/config/chain/default.ts                   |  3 ++
 src/config/chain/initia.ts                    |  3 ++
 src/config/chain/neutron.ts                   | 10 ++++--
 src/config/chain/osmosis.ts                   |  9 +++++
 src/config/chain/sei.ts                       |  6 ++++
 src/config/chain/stargaze.ts                  |  6 ++++
 src/config/chain/terra.ts                     |  6 ++++
 src/config/chain/types.ts                     |  3 ++
 src/lib/app-provider/hooks/useConfig.ts       | 14 ++++++++
 .../components/AccountHeader.tsx              | 35 ++++++++++---------
 src/lib/pages/account-details/index.tsx       |  4 ++-
 12 files changed, 81 insertions(+), 19 deletions(-)

diff --git a/public/font/pilatwide.css b/public/font/pilatwide.css
index 0b13b7a56..6b3319ca5 100644
--- a/public/font/pilatwide.css
+++ b/public/font/pilatwide.css
@@ -1,3 +1,4 @@
+/* TODO: add another font face later */
 @font-face {
   font-family: "Pilat Wide";
   src: url("./PilatWide-Bold.woff");
diff --git a/src/config/chain/default.ts b/src/config/chain/default.ts
index adf7976a7..9d1594dd1 100644
--- a/src/config/chain/default.ts
+++ b/src/config/chain/default.ts
@@ -28,6 +28,9 @@ export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
     gov: {
       enabled: false,
     },
+    nft: {
+      enabled: false,
+    },
   },
   gas: {
     gasPrice: {
diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index 3a885c3c0..f18373c87 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -32,6 +32,9 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
diff --git a/src/config/chain/neutron.ts b/src/config/chain/neutron.ts
index 88937e6d5..5f64b4617 100644
--- a/src/config/chain/neutron.ts
+++ b/src/config/chain/neutron.ts
@@ -33,6 +33,9 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
@@ -63,8 +66,8 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       },
       wasm: {
         enabled: true,
-        storeCodeMaxFileSize: 800_000,
-        clearAdminGas: 50_000,
+        storeCodeMaxFileSize: 800000,
+        clearAdminGas: 50000,
       },
       move: {
         enabled: false,
@@ -78,6 +81,9 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
diff --git a/src/config/chain/osmosis.ts b/src/config/chain/osmosis.ts
index 76fb3a7ae..e2211923a 100644
--- a/src/config/chain/osmosis.ts
+++ b/src/config/chain/osmosis.ts
@@ -34,6 +34,9 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
@@ -81,6 +84,9 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
@@ -127,6 +133,9 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
diff --git a/src/config/chain/sei.ts b/src/config/chain/sei.ts
index bce746362..df1f6dd12 100644
--- a/src/config/chain/sei.ts
+++ b/src/config/chain/sei.ts
@@ -39,6 +39,9 @@ export const SEI_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: false,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
@@ -86,6 +89,9 @@ export const SEI_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: false,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
diff --git a/src/config/chain/stargaze.ts b/src/config/chain/stargaze.ts
index fbfca617a..dccd49bde 100644
--- a/src/config/chain/stargaze.ts
+++ b/src/config/chain/stargaze.ts
@@ -33,6 +33,9 @@ export const STARGAZE_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
@@ -78,6 +81,9 @@ export const STARGAZE_CHAIN_CONFIGS: ChainConfigs = {
       gov: {
         enabled: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
diff --git a/src/config/chain/terra.ts b/src/config/chain/terra.ts
index 0a849d1dd..645f588c7 100644
--- a/src/config/chain/terra.ts
+++ b/src/config/chain/terra.ts
@@ -34,6 +34,9 @@ export const TERRA_CHAIN_CONFIGS: ChainConfigs = {
         enabled: true,
         disableOpenProposal: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
@@ -80,6 +83,9 @@ export const TERRA_CHAIN_CONFIGS: ChainConfigs = {
         enabled: true,
         disableOpenProposal: true,
       },
+      nft: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
diff --git a/src/config/chain/types.ts b/src/config/chain/types.ts
index 2ae2e1009..17049c659 100644
--- a/src/config/chain/types.ts
+++ b/src/config/chain/types.ts
@@ -38,6 +38,8 @@ type GovConfig =
       enabled: false;
     };
 
+type NftConfig = { enabled: boolean };
+
 export interface ExplorerConfig {
   validator: string;
   proposal: string;
@@ -59,6 +61,7 @@ export interface ChainConfig {
     pool: PoolConfig;
     publicProject: PublicProjectConfig;
     gov: GovConfig;
+    nft: NftConfig;
   };
   gas: {
     gasPrice: {
diff --git a/src/lib/app-provider/hooks/useConfig.ts b/src/lib/app-provider/hooks/useConfig.ts
index 5d73f2339..af36c0b85 100644
--- a/src/lib/app-provider/hooks/useConfig.ts
+++ b/src/lib/app-provider/hooks/useConfig.ts
@@ -52,6 +52,20 @@ export const useMoveConfig = ({
   return useBaseConfig({ feature: move, shouldRedirect });
 };
 
+export const useNftConfig = ({
+  shouldRedirect,
+}: {
+  shouldRedirect: boolean;
+}) => {
+  const {
+    chainConfig: {
+      features: { nft },
+    },
+  } = useCelatoneApp();
+
+  return useBaseConfig({ feature: nft, shouldRedirect });
+};
+
 export const useFaucetConfig = ({
   shouldRedirect,
 }: {
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index 56238ad40..a7bea31e2 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -1,5 +1,6 @@
 import { Flex, Heading, Image, Text } from "@chakra-ui/react";
 
+import { useMoveConfig } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { PrimaryNameMark } from "lib/components/PrimaryNameMark";
@@ -22,7 +23,7 @@ export const AccountHeader = ({
   accountAddress,
 }: AccounHeaderProps) => {
   const displayName = icnsName?.primary_name || "Account Details";
-
+  const move = useMoveConfig({ shouldRedirect: false });
   return (
     <Flex
       justifyContent="space-between"
@@ -64,21 +65,23 @@ export const AccountHeader = ({
               type="user_address"
             />
           </Flex>
-          <Flex
-            gap={{ base: 0, md: 2 }}
-            mt={{ base: 1, md: 0 }}
-            direction={{ base: "column", md: "row" }}
-          >
-            <Text fontWeight={500} color="text.dark" variant="body2">
-              HEX:
-            </Text>
-            {/* TODO: HEX */}
-            <CopyLink
-              value={accountAddress}
-              amptrackSection="account_top"
-              type="user_address"
-            />
-          </Flex>
+          {move.enabled && (
+            <Flex
+              gap={{ base: 0, md: 2 }}
+              mt={{ base: 1, md: 0 }}
+              direction={{ base: "column", md: "row" }}
+            >
+              <Text fontWeight={500} color="text.dark" variant="body2">
+                HEX:
+              </Text>
+              {/* TODO: HEX */}
+              <CopyLink
+                value={accountAddress}
+                amptrackSection="account_top"
+                type="user_address"
+              />
+            </Flex>
+          )}
         </Flex>
         {icnsName?.primary_name && (
           <Flex gap={2} align="center">
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 85eab8031..c5d306c21 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -12,6 +12,7 @@ import { useCallback, useEffect } from "react";
 import {
   useInternalNavigate,
   useMoveConfig,
+  useNftConfig,
   useValidateAddress,
   useWasmConfig,
 } from "lib/app-provider";
@@ -71,6 +72,7 @@ const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
+  const nft = useNftConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
   const router = useRouter();
   // TODO: remove assertion later
@@ -198,7 +200,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             count={tableCounts.txsCount}
             isDisabled={txCountLoading || tableCounts.txsCount === 0}
             onClick={handleTabChange(TabIndex.NFTs)}
-            hidden={!move.enabled}
+            hidden={!nft.enabled}
           >
             NFTs
           </CustomTab>

From 2e7d2de0145985bf8ac06261ce80cf254b651ccd Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 14:04:04 +0700
Subject: [PATCH 026/368] fix(components): revise gas format

---
 src/config/chain/initia.ts  | 2 +-
 src/config/chain/neutron.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index f18373c87..4baba6c71 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -33,7 +33,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
         enabled: true,
       },
       nft: {
-        enabled: false,
+        enabled: true,
       },
     },
     gas: {
diff --git a/src/config/chain/neutron.ts b/src/config/chain/neutron.ts
index 5f64b4617..90d55f69f 100644
--- a/src/config/chain/neutron.ts
+++ b/src/config/chain/neutron.ts
@@ -66,8 +66,8 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       },
       wasm: {
         enabled: true,
-        storeCodeMaxFileSize: 800000,
-        clearAdminGas: 50000,
+        storeCodeMaxFileSize: 800_000,
+        clearAdminGas: 50_000,
       },
       move: {
         enabled: false,
@@ -82,7 +82,7 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
         enabled: true,
       },
       nft: {
-        enabled: false,
+        enabled: true,
       },
     },
     gas: {

From abf1cbd3072e65b473e285f88e4835f3e0894c52 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 14:19:15 +0700
Subject: [PATCH 027/368] fix(components): fix font weight

---
 src/lib/pages/module-details/components/ModuleInfo.tsx  | 2 +-
 src/lib/pages/module-details/components/QuickAccess.tsx | 4 ++--
 src/lib/pages/module-details/index.tsx                  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 1848f68d3..ebd052783 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -14,7 +14,7 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
   return (
     <Flex flexDirection="column" gap={4}>
       <Flex justifyContent="space-between" alignItems="center" w="full">
-        <Heading as="h6" variant="h6" fontWeight={800}>
+        <Heading as="h6" variant="h6" fontWeight={600}>
           Module Information
         </Heading>
         {isVerified && (
diff --git a/src/lib/pages/module-details/components/QuickAccess.tsx b/src/lib/pages/module-details/components/QuickAccess.tsx
index 1d3d798a6..dbbf93602 100644
--- a/src/lib/pages/module-details/components/QuickAccess.tsx
+++ b/src/lib/pages/module-details/components/QuickAccess.tsx
@@ -37,7 +37,7 @@ export const QuickAccess = () => {
         // TODO Navigate to tab
         <Flex
           p={4}
-          bg="gray.800"
+          bg="gray.600"
           borderRadius={8}
           w="full"
           alignItems="center"
@@ -49,7 +49,7 @@ export const QuickAccess = () => {
               <Text variant="body1" color="text.dark" fontWeight={600}>
                 {item.name}
               </Text>
-              <Heading as="h6" variant="h6" fontWeight={800}>
+              <Heading as="h6" variant="h6" fontWeight={600}>
                 {item.count}
               </Heading>
             </Flex>
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 21da71f17..11f3cb657 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -126,7 +126,7 @@ export const ModuleDetails = ({
                   as="h6"
                   variant="h6"
                   mb={6}
-                  fontWeight={800}
+                  fontWeight={600}
                   id={tableHeaderId}
                 >
                   History
@@ -188,7 +188,7 @@ export const ModuleDetails = ({
                 as="h6"
                 variant="h6"
                 mb={6}
-                fontWeight={800}
+                fontWeight={600}
                 id={tableHeaderId}
               >
                 History

From e5c4a6c5709de326550de7157e1c0453dd324a78 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 14:36:05 +0700
Subject: [PATCH 028/368] fix(components): fix as comment

---
 .../module-details/components/ModuleInfo.tsx  | 22 +++---
 .../module-details/components/ModuleTop.tsx   | 72 +++++--------------
 .../module-details/components/QuickAccess.tsx |  2 +-
 src/lib/pages/module-details/index.tsx        | 15 ++--
 .../[network]/modules/[modulePath]/index.tsx  |  4 +-
 src/pages/modules/[modulePath]/index.tsx      |  4 +-
 6 files changed, 37 insertions(+), 82 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index ebd052783..9d93ef6d0 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -28,12 +28,15 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
         )}
       </Flex>
       {/* TODO data */}
-      <Flex p={4} borderRadius={8} border="1px solid" borderColor="gray.700">
-        <LabelText flex="1" label="Upgrade Policy">
-          ARBITRARY
-        </LabelText>
+      <Flex
+        p={4}
+        borderRadius={8}
+        border="1px solid"
+        borderColor="gray.700"
+        sx={{ "& > div": { flex: 1 } }}
+      >
+        <LabelText label="Upgrade Policy">ARBITRARY</LabelText>
         <LabelText
-          flex="1"
           label="Initial Published Block Height"
           helperText1="formatUTC(createdTime)"
           helperText2="dateFromNow(createdTime)"
@@ -45,11 +48,7 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
             fixedHeight
           />
         </LabelText>
-        <LabelText
-          flex="1"
-          label="Initial Published by"
-          helperText1="(Account Address)"
-        >
+        <LabelText label="Initial Published by" helperText1="(Account Address)">
           <ExplorerLink
             type="user_address"
             value="cltn1...7tlju97"
@@ -57,7 +56,7 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
             fixedHeight
           />
         </LabelText>
-        <LabelText flex="1" label="Initial Published Transaction">
+        <LabelText label="Initial Published Transaction">
           <ExplorerLink
             type="tx_hash"
             value="7F8FD8...3A804"
@@ -66,7 +65,6 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
           />
         </LabelText>
         <LabelText
-          flex="1"
           label="Initial Published Proposal ID"
           helperText1="TODO Published DAO Module"
         >
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index d54e4bff2..4e11c88bd 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -1,3 +1,4 @@
+import type { TextProps } from "@chakra-ui/react";
 import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
@@ -10,6 +11,13 @@ interface ModuleTopProps {
   isVerified?: boolean;
 }
 
+const baseTextStyle: TextProps = {
+  color: "text.dark",
+  variant: "body2",
+  fontWeight: 500,
+  whiteSpace: "nowrap",
+};
+
 export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
   const isMobile = useMobile();
   //   TODO Name
@@ -71,32 +79,15 @@ export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
             gap={{ base: 0, md: 2 }}
             direction={{ base: "column", md: "row" }}
           >
-            <Text
-              color="text.dark"
-              variant="body2"
-              fontWeight={500}
-              whiteSpace="nowrap"
-            >
+            <Text {...baseTextStyle} color="text.main">
               Module Path:
             </Text>
             {/* TODO module path */}
             <Flex>
-              <Text
-                color="text.main"
-                variant="body2"
-                fontWeight={500}
-                whiteSpace="nowrap"
-              >
+              <Text {...baseTextStyle}>
                 cltn13a2sywe6g4a9w84g98w4g1dasdrfafdstlju97::
               </Text>
-              <Text
-                color="text.main"
-                variant="body2"
-                fontWeight={500}
-                whiteSpace="nowrap"
-              >
-                beeb
-              </Text>
+              <Text {...baseTextStyle}>beeb</Text>
             </Flex>
           </Flex>
           <Flex
@@ -104,12 +95,7 @@ export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
             gap={{ base: 0, md: 2 }}
             direction={{ base: "column", md: "row" }}
           >
-            <Text
-              color="text.dark"
-              variant="body2"
-              fontWeight={500}
-              whiteSpace="nowrap"
-            >
+            <Text {...baseTextStyle} color="text.main">
               Creator:
             </Text>
             {/* TODO Creator */}
@@ -124,40 +110,14 @@ export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
             gap={{ base: 0, md: 2 }}
             direction={{ base: "column", md: "row" }}
           >
-            <Text
-              color="text.dark"
-              variant="body2"
-              fontWeight={500}
-              whiteSpace="nowrap"
-            >
+            <Text {...baseTextStyle} color="text.main">
               Friends:
             </Text>
             {/* TODO Friends */}
             <Flex gap={1}>
-              <Text
-                color="text.dark"
-                variant="body2"
-                fontWeight={500}
-                whiteSpace="nowrap"
-              >
-                0x1::any,
-              </Text>
-              <Text
-                color="text.dark"
-                variant="body2"
-                fontWeight={500}
-                whiteSpace="nowrap"
-              >
-                0x1::copyable_any
-              </Text>
-              <Text
-                color="text.dark"
-                variant="body2"
-                fontWeight={500}
-                whiteSpace="nowrap"
-              >
-                0x1::copyable_any::function_name
-              </Text>
+              <Text {...baseTextStyle}>0x1::any,</Text>
+              <Text {...baseTextStyle}>0x1::copyable_any</Text>
+              <Text {...baseTextStyle}>0x1::copyable_any::function_name</Text>
             </Flex>
           </Flex>
         </Flex>
diff --git a/src/lib/pages/module-details/components/QuickAccess.tsx b/src/lib/pages/module-details/components/QuickAccess.tsx
index dbbf93602..46660db96 100644
--- a/src/lib/pages/module-details/components/QuickAccess.tsx
+++ b/src/lib/pages/module-details/components/QuickAccess.tsx
@@ -37,7 +37,7 @@ export const QuickAccess = () => {
         // TODO Navigate to tab
         <Flex
           p={4}
-          bg="gray.600"
+          bg="gray.800"
           borderRadius={8}
           w="full"
           alignItems="center"
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 11f3cb657..1f1f1f2d8 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -27,10 +27,6 @@ import { ModuleInfo } from "./components/ModuleInfo";
 import { ModuleTop } from "./components/ModuleTop";
 import { QuickAccess } from "./components/QuickAccess";
 
-interface ModuleDetailsProps {
-  modulePath: string;
-}
-
 const tableHeaderId = "moduleDetailsTab";
 export enum TabIndex {
   Overview = "overview",
@@ -38,13 +34,14 @@ export enum TabIndex {
   Txs = "txs",
   Structs = "structs",
 }
-export const ModuleDetails = ({
-  modulePath = "moduletest",
-}: ModuleDetailsProps) => {
+// TODO get module path
+const txTableHeaderId = "ModuleTxsTableHeader";
+
+export const ModuleDetails = () => {
   const navigate = useInternalNavigate();
   const router = useRouter();
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
-
+  const modulePath = getFirstQueryParam(router.query.modulePath);
   const handleTabChange = useCallback(
     (nextTab: TabIndex) => () => {
       if (nextTab === tab) return;
@@ -80,7 +77,7 @@ export const ModuleDetails = ({
   }, [router.isReady, tab, modulePath, navigate]);
   const contractAddress = "" as ContractAddr;
   const { data: contractAccountId } = useAccountId(contractAddress);
-  const txTableHeaderId = "ModuleTxsTableHeader";
+
   const {
     tableCounts,
     refetchMigration,
diff --git a/src/pages/[network]/modules/[modulePath]/index.tsx b/src/pages/[network]/modules/[modulePath]/index.tsx
index 49cccb88d..d5deadd8b 100644
--- a/src/pages/[network]/modules/[modulePath]/index.tsx
+++ b/src/pages/[network]/modules/[modulePath]/index.tsx
@@ -1,3 +1,3 @@
-import { Modules } from "lib/pages/modules";
+import { ModuleDetails } from "lib/pages/module-details";
 
-export default Modules;
+export default ModuleDetails;
diff --git a/src/pages/modules/[modulePath]/index.tsx b/src/pages/modules/[modulePath]/index.tsx
index 49cccb88d..d5deadd8b 100644
--- a/src/pages/modules/[modulePath]/index.tsx
+++ b/src/pages/modules/[modulePath]/index.tsx
@@ -1,3 +1,3 @@
-import { Modules } from "lib/pages/modules";
+import { ModuleDetails } from "lib/pages/module-details";
 
-export default Modules;
+export default ModuleDetails;

From 0341200dae9faae740677226709230bbd119c8ef Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 5 Sep 2023 14:37:07 +0700
Subject: [PATCH 029/368] fix(components): fix font weight

---
 src/lib/pages/publish-module/components/UploadModuleCard.tsx | 2 +-
 src/lib/pages/publish-module/index.tsx                       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index fca0b21a6..7dff22c2b 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -23,7 +23,7 @@ export const UploadModuleCard = ({
       flexDirection="column"
     >
       <Flex justifyContent="space-between" w="full" alignItems="center">
-        <Heading as="h6" variant="h6" color="text.dark" fontWeight={800}>
+        <Heading as="h6" variant="h6" color="text.dark" fontWeight={600}>
           Module {index + 1}
         </Heading>
         <IconButton
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index e1c6f35b1..03f3a75f0 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -98,7 +98,7 @@ export const PublishModule = () => {
         <Box position="relative" display="flex" mt={12}>
           <Box w="10%" />
           <Box w="50%">
-            <Heading as="h6" variant="h6" fontWeight={800}>
+            <Heading as="h6" variant="h6" fontWeight={600}>
               Upload .mv files(s)
             </Heading>
             <Flex gap={6} flexDirection="column" my={6}>
@@ -164,7 +164,7 @@ export const PublishModule = () => {
         <Box position="relative" display="flex" mt={12}>
           <Box w="10%" />
           <Box w="50%">
-            <Heading as="h6" variant="h6" fontWeight={800}>
+            <Heading as="h6" variant="h6" fontWeight={600}>
               Upgrade Policy
             </Heading>
             <Text color="text.dark" variant="body2" mt={2}>

From 6ec439109df4ea13897c93efe713fda611ff0f1b Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 5 Sep 2023 15:57:47 +0700
Subject: [PATCH 030/368] feat: module interaction header

---
 src/lib/components/LabelText.tsx              |  4 +-
 .../component/InteractionTypeSwitch.tsx       | 13 +--
 .../interaction/component/drawer/drawer.tsx   | 81 +++++++++++++++++
 .../interaction/component/drawer/index.tsx    | 89 +------------------
 .../drawer/selector/SelectorInput.tsx         | 12 ++-
 .../interaction/component/drawer/trigger.tsx  | 32 +++++++
 src/lib/pages/interaction/index.tsx           | 72 +++++++++++++--
 7 files changed, 199 insertions(+), 104 deletions(-)
 create mode 100644 src/lib/pages/interaction/component/drawer/drawer.tsx
 create mode 100644 src/lib/pages/interaction/component/drawer/trigger.tsx

diff --git a/src/lib/components/LabelText.tsx b/src/lib/components/LabelText.tsx
index 825b8edc1..d42f2b4c3 100644
--- a/src/lib/components/LabelText.tsx
+++ b/src/lib/components/LabelText.tsx
@@ -5,6 +5,7 @@ import { TooltipInfo } from "./Tooltip";
 
 interface LabelTextProps extends FlexProps {
   label: string;
+  labelWeight?: number;
   tooltipText?: string;
   children: string | JSX.Element;
   helperText1?: string;
@@ -13,6 +14,7 @@ interface LabelTextProps extends FlexProps {
 
 export const LabelText = ({
   label,
+  labelWeight = 500,
   tooltipText,
   children,
   helperText1,
@@ -21,7 +23,7 @@ export const LabelText = ({
 }: LabelTextProps) => (
   <Flex direction="column" gap={1} {...flexProps}>
     <Flex align="center" gap={1}>
-      <Text variant="body2" color="text.dark" fontWeight={500}>
+      <Text variant="body2" color="text.dark" fontWeight={labelWeight}>
         {label}
       </Text>
       {tooltipText && <TooltipInfo label={tooltipText} />}
diff --git a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
index ad7161c58..aad51ae76 100644
--- a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
+++ b/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
@@ -1,7 +1,6 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Heading } from "@chakra-ui/react";
 import type { Dispatch, SetStateAction } from "react";
-import { useRef } from "react";
 
 import { MotionBox } from "lib/components/MotionBox";
 import type { Option } from "lib/types";
@@ -25,7 +24,6 @@ export const InteractionTypeSwitch = ({
   onTabChange,
   ...flexProps
 }: InteractionTypeSwitchProps) => {
-  const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
   const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
 
   return (
@@ -39,13 +37,10 @@ export const InteractionTypeSwitch = ({
       sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
       {...flexProps}
     >
-      {tabs.map((tab, idx) => (
+      {tabs.map((tab) => (
         <MotionBox
           key={tab}
           w="full"
-          ref={(el) => {
-            tabRefs.current[idx] = el;
-          }}
           cursor="pointer"
           p="2px 10px"
           variants={{
@@ -66,12 +61,12 @@ export const InteractionTypeSwitch = ({
         </MotionBox>
       ))}
       <MotionBox
-        h={tabRefs.current[activeIndex]?.clientHeight}
-        w={tabRefs.current[activeIndex]?.clientWidth}
+        h="calc(100% - 8px)"
+        w="calc(50% - 4px)"
         position="absolute"
         borderRadius="2px"
         backgroundColor="primary.dark"
-        animate={{ left: `${tabRefs.current[activeIndex]?.offsetLeft ?? 0}px` }}
+        animate={{ left: activeIndex === 0 ? "4px" : "50%" }}
         transition={{
           type: "spring",
           stiffness: "250",
diff --git a/src/lib/pages/interaction/component/drawer/drawer.tsx b/src/lib/pages/interaction/component/drawer/drawer.tsx
new file mode 100644
index 000000000..973f219d0
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/drawer.tsx
@@ -0,0 +1,81 @@
+import {
+  Heading,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerCloseButton,
+  DrawerBody,
+  Flex,
+} from "@chakra-ui/react";
+import { useState } from "react";
+
+import { CustomIcon } from "lib/components/icon";
+import type { IndexedModule } from "lib/services/moduleService";
+import type { HexAddr, HumanAddr } from "lib/types";
+
+import { ModuleEmptyState, ModuleSelectMainBody } from "./body";
+import { ModuleSelector } from "./selector";
+import type {
+  DisplayMode,
+  SelectedAddress,
+  ModuleSelectFunction,
+} from "./types";
+
+interface ModuleSelectDrawerTriggerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  handleModuleSelect: ModuleSelectFunction;
+}
+
+export const ModuleSelectDrawer = ({
+  isOpen,
+  onClose,
+  handleModuleSelect,
+}: ModuleSelectDrawerTriggerProps) => {
+  const [modules, setModules] = useState<IndexedModule[]>();
+  const [mode, setMode] = useState<DisplayMode>("input");
+  const [selectedAddress, setSelectedAddress] = useState<SelectedAddress>({
+    address: "" as HumanAddr,
+    hex: "" as HexAddr,
+  });
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+      <DrawerOverlay />
+      <DrawerContent h="90%">
+        <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
+          <CustomIcon name="contract-address" boxSize={6} color="gray.600" />
+          <Heading as="h5" variant="h5">
+            Select Module
+          </Heading>
+        </DrawerHeader>
+        <DrawerCloseButton color="text.dark" />
+        <DrawerBody p={6}>
+          <Flex h="full" direction="column">
+            <ModuleSelector
+              mode={mode}
+              selectedAddress={selectedAddress}
+              setSelectedAddress={setSelectedAddress}
+              setMode={setMode}
+              handleModuleSelect={handleModuleSelect}
+              setModules={setModules}
+              closeModal={onClose}
+            />
+            {modules ? (
+              <ModuleSelectMainBody
+                selectedAddress={selectedAddress}
+                mode={mode}
+                modules={modules}
+                handleModuleSelect={handleModuleSelect}
+                closeModal={onClose}
+              />
+            ) : (
+              <ModuleEmptyState />
+            )}
+          </Flex>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
diff --git a/src/lib/pages/interaction/component/drawer/index.tsx b/src/lib/pages/interaction/component/drawer/index.tsx
index 4e31721c4..0fa92b036 100644
--- a/src/lib/pages/interaction/component/drawer/index.tsx
+++ b/src/lib/pages/interaction/component/drawer/index.tsx
@@ -1,87 +1,2 @@
-import {
-  Button,
-  Heading,
-  useDisclosure,
-  Drawer,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerHeader,
-  DrawerCloseButton,
-  DrawerBody,
-  Flex,
-} from "@chakra-ui/react";
-import { useState } from "react";
-
-import { CustomIcon } from "lib/components/icon";
-import type { IndexedModule } from "lib/services/moduleService";
-import type { HexAddr, HumanAddr } from "lib/types";
-
-import { ModuleEmptyState, ModuleSelectMainBody } from "./body";
-import { ModuleSelector } from "./selector";
-import type {
-  DisplayMode,
-  SelectedAddress,
-  ModuleSelectFunction,
-} from "./types";
-
-interface ModuleSelectDrawerTriggerProps {
-  buttonText?: string;
-  handleModuleSelect: ModuleSelectFunction;
-}
-
-export const ModuleSelectDrawerTrigger = ({
-  buttonText = "Select Module",
-  handleModuleSelect,
-}: ModuleSelectDrawerTriggerProps) => {
-  const { isOpen, onClose, onOpen } = useDisclosure();
-  const [modules, setModules] = useState<IndexedModule[]>();
-  const [mode, setMode] = useState<DisplayMode>("input");
-  const [selectedAddress, setSelectedAddress] = useState<SelectedAddress>({
-    address: "" as HumanAddr,
-    hex: "" as HexAddr,
-  });
-
-  return (
-    <>
-      <Button variant="primary" ml="auto" onClick={onOpen}>
-        {buttonText}
-      </Button>
-      <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
-        <DrawerOverlay />
-        <DrawerContent h="90%">
-          <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
-            <CustomIcon name="contract-address" boxSize={6} color="gray.600" />
-            <Heading as="h5" variant="h5">
-              Select Module
-            </Heading>
-          </DrawerHeader>
-          <DrawerCloseButton color="text.dark" />
-          <DrawerBody p={6}>
-            <Flex h="full" direction="column">
-              <ModuleSelector
-                mode={mode}
-                selectedAddress={selectedAddress}
-                setSelectedAddress={setSelectedAddress}
-                setMode={setMode}
-                handleModuleSelect={handleModuleSelect}
-                setModules={setModules}
-                closeModal={onClose}
-              />
-              {modules ? (
-                <ModuleSelectMainBody
-                  selectedAddress={selectedAddress}
-                  mode={mode}
-                  modules={modules}
-                  handleModuleSelect={handleModuleSelect}
-                  closeModal={onClose}
-                />
-              ) : (
-                <ModuleEmptyState />
-              )}
-            </Flex>
-          </DrawerBody>
-        </DrawerContent>
-      </Drawer>
-    </>
-  );
-};
+export * from "./drawer";
+export * from "./trigger";
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index faccaa2eb..b0392cfda 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -78,9 +78,19 @@ export const ModuleSelectorInput = ({
   });
 
   const handleSubmit = useCallback(() => {
+    if (keyword === selectedAddress.address || keyword === selectedAddress.hex)
+      return setMode("display");
+
     const err = validateModuleInput(keyword);
     return err ? setError(err) : refetch();
-  }, [keyword, refetch, validateModuleInput]);
+  }, [
+    selectedAddress.address,
+    selectedAddress.hex,
+    keyword,
+    refetch,
+    validateModuleInput,
+    setMode,
+  ]);
 
   const handleKeydown = useCallback(
     (event: KeyboardEvent<HTMLInputElement>) => {
diff --git a/src/lib/pages/interaction/component/drawer/trigger.tsx b/src/lib/pages/interaction/component/drawer/trigger.tsx
new file mode 100644
index 000000000..8066ae8f0
--- /dev/null
+++ b/src/lib/pages/interaction/component/drawer/trigger.tsx
@@ -0,0 +1,32 @@
+import type { ButtonProps } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+type TriggerVariant = "select-module" | "change-module";
+
+const buttonStyles: { [key in TriggerVariant]: ButtonProps } = {
+  "select-module": {
+    variant: "primary",
+  },
+  "change-module": {
+    variant: "outline-white",
+    leftIcon: <CustomIcon name="swap" boxSize={3} />,
+  },
+};
+
+interface ModuleSelectDrawerTriggerProps {
+  triggerVariant: TriggerVariant;
+  buttonText?: string;
+  onOpen: () => void;
+}
+
+export const ModuleSelectDrawerTrigger = ({
+  triggerVariant,
+  buttonText = "Select Module",
+  onOpen,
+}: ModuleSelectDrawerTriggerProps) => (
+  <Button {...buttonStyles[triggerVariant]} ml="auto" onClick={onOpen}>
+    {buttonText}
+  </Button>
+);
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 29c23e530..e76627d94 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -1,15 +1,21 @@
 import type { FlexProps } from "@chakra-ui/react";
-import { Button, Flex, Heading, Text } from "@chakra-ui/react";
+import { useDisclosure, Button, Flex, Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
+import { CustomIcon } from "lib/components/icon";
+import { LabelText } from "lib/components/LabelText";
 import { CountBadge } from "lib/components/module/CountBadge";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction } from "lib/types";
+import { parseJsonABI } from "lib/utils/abi";
 
-import { ModuleSelectDrawerTrigger } from "./component/drawer";
+import {
+  ModuleSelectDrawerTrigger,
+  ModuleSelectDrawer,
+} from "./component/drawer";
 import {
   InteractionTypeSwitch,
   InteractionTabs,
@@ -26,13 +32,15 @@ const containerBaseStyle: FlexProps = {
 
 export const Interaction = () => {
   const { query, isReady } = useRouter();
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
   const [tab, setTab] = useState<InteractionTabs>();
-  // TODO: Remove when wiring up this page
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [module, setModule] = useState<IndexedModule>();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [selectedFn, setSelectedFn] = useState<ExposedFunction>();
 
+  const abi = module ? parseJsonABI(module.abi) : undefined;
+
   const handleModuleSelect = useCallback(
     (selectedModule: IndexedModule, fn?: ExposedFunction) => {
       setModule(selectedModule);
@@ -64,8 +72,60 @@ export const Interaction = () => {
         borderRadius={4}
         my={8}
       >
-        <p>Select module to interact with ...</p>
-        <ModuleSelectDrawerTrigger handleModuleSelect={handleModuleSelect} />
+        {module ? (
+          <>
+            <Flex direction="column" gap={4}>
+              <LabelText label="Module Path" labelWeight={600}>
+                <Flex align="center" gap={1}>
+                  <Text variant="body1">{module.address}</Text>
+                  <CustomIcon
+                    name="chevron-right"
+                    color="gray.600"
+                    boxSize={3}
+                  />
+                  <Text variant="body1" fontWeight={700}>
+                    {module.moduleName}
+                  </Text>
+                </Flex>
+              </LabelText>
+              <LabelText label="Friends" labelWeight={600}>
+                <Text variant="body2" color="gray.400">
+                  {abi?.friends.join(" , ")}
+                </Text>
+              </LabelText>
+            </Flex>
+            <Flex direction="column" gap={2}>
+              <ModuleSelectDrawerTrigger
+                triggerVariant="change-module"
+                buttonText="Change Module"
+                onOpen={onOpen}
+              />
+              <Button
+                variant="ghost-gray"
+                rightIcon={
+                  <CustomIcon name="launch" boxSize={3} color="text.dark" />
+                }
+                // TODO: Link to module section in account page
+                onClick={() => {}}
+              >
+                View Module
+              </Button>
+            </Flex>
+          </>
+        ) : (
+          <>
+            <p>Select module to interact with ...</p>
+            <ModuleSelectDrawerTrigger
+              triggerVariant="select-module"
+              onOpen={onOpen}
+            />
+          </>
+        )}
+        <ModuleSelectDrawer
+          isOpen={isOpen}
+          onClose={onClose}
+          handleModuleSelect={handleModuleSelect}
+        />
       </Flex>
       <Flex borderTop="1px solid" borderColor="gray.700" py={8} gap={8}>
         {/* Left side */}

From 6ea3e5df176d79405ed0ddc7e38c64501f78de32 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 5 Sep 2023 17:29:38 +0700
Subject: [PATCH 031/368] fix: implement lcd pagination, refactor some utils

---
 src/lib/chain-registry/initiatestnet.ts       | 15 -----------
 .../hooks/useValidateModuleInput.ts           |  4 +--
 src/lib/providers/cosmos-kit.tsx              |  2 +-
 src/lib/services/module.ts                    | 20 +++++++++++----
 src/lib/services/moduleService.ts             |  9 ++-----
 src/lib/types/abi.ts                          |  2 +-
 src/lib/types/addrs.ts                        |  2 +-
 src/lib/utils/abi.ts                          | 25 +++++++++++++------
 src/lib/utils/index.ts                        |  2 ++
 src/lib/utils/module.ts                       | 15 +++++++++++
 src/lib/utils/validate.ts                     |  9 +++++--
 11 files changed, 64 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/utils/module.ts

diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index 715686927..debbde25f 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -30,21 +30,6 @@ export const initiatestnet: Chain = {
       },
     ],
   },
-  codebase: {
-    git_repo: "https://github.com/sei-protocol/sei-chain",
-    recommended_version: "v3.0.0",
-    compatible_versions: ["v3.0.0"],
-    cosmos_sdk_version: "",
-    cosmwasm_enabled: true,
-    genesis: {
-      genesis_url: "",
-    },
-    versions: [
-      {
-        name: "v1",
-      },
-    ],
-  },
   logo_URIs: {
     png: "",
     svg: "",
diff --git a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
index 33a3b9fbd..eef05892e 100644
--- a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
+++ b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
@@ -5,7 +5,7 @@ import {
   useExampleAddresses,
   useValidateAddress,
 } from "lib/app-provider";
-import { isHexAddress, truncate } from "lib/utils";
+import { isHexAddress, splitModule, truncate } from "lib/utils";
 
 export const useValidateModuleInput = () => {
   const { validateUserAddress } = useValidateAddress();
@@ -19,7 +19,7 @@ export const useValidateModuleInput = () => {
 
   return useCallback(
     (input: string): string | null => {
-      const inputArr = input.split("::");
+      const inputArr = splitModule(input);
       // Allow only module path for now
       if (inputArr.length > 2) return errText;
       const [address, module] = inputArr;
diff --git a/src/lib/providers/cosmos-kit.tsx b/src/lib/providers/cosmos-kit.tsx
index ba27b0a0d..c57f25bf8 100644
--- a/src/lib/providers/cosmos-kit.tsx
+++ b/src/lib/providers/cosmos-kit.tsx
@@ -53,7 +53,7 @@ export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
         endpoints: availableChainsEndpoints,
       }}
       signerOptions={{
-        preferredSignType: () => "amino",
+        preferredSignType: () => "direct",
       }}
     >
       {children}
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 79cdc3a6e..88b24352c 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -17,11 +17,21 @@ export const getAccountModules = async (
   baseEndpoint: string,
   address: AccountAddr
 ): Promise<InternalModule[]> => {
-  const { data } = await axios.get<ResponseModules>(
-    `${baseEndpoint}/initia/move/v1/accounts/${address}/modules`
-  );
-  // Implement LCD pagination
-  return snakeToCamel(data.modules);
+  const result: ResponseModule[] = [];
+
+  const fetchFn = async (paginationKey: string | null) => {
+    const { data } = await axios.get<ResponseModules>(
+      `${baseEndpoint}/initia/move/v1/accounts/${address}/modules${
+        paginationKey ? `?pagination.key=${paginationKey}` : ""
+      }`
+    );
+    result.push(...data.modules);
+    if (data.pagination.next_key) await fetchFn(data.pagination.next_key);
+  };
+
+  await fetchFn(null);
+
+  return snakeToCamel(result);
 };
 
 export const getAccountModule = async (
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 14628a18d..e01a34089 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -12,7 +12,7 @@ import type {
   InternalModule,
   ResponseABI,
 } from "lib/types";
-import { parseJsonABI, splitViewExecuteFunctions } from "lib/utils/abi";
+import { parseJsonABI, splitViewExecuteFunctions } from "lib/utils";
 
 import {
   getAccountModule,
@@ -59,12 +59,7 @@ export const useAddressModules = ({
         );
 
   return useQuery(
-    [
-      CELATONE_QUERY_KEYS.ACCOUNT_MODULES,
-      baseEndpoint,
-      address as string,
-      moduleName,
-    ],
+    [CELATONE_QUERY_KEYS.ACCOUNT_MODULES, baseEndpoint, address, moduleName],
     queryFn,
     options
   );
diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
index 369de68d7..78dde0b12 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/abi.ts
@@ -26,7 +26,7 @@ interface ABIFunction {
 
 /* response */
 export interface ResponseModule {
-  address: string;
+  address: HexAddr;
   module_name: string;
   abi: string;
   raw_bytes: string;
diff --git a/src/lib/types/addrs.ts b/src/lib/types/addrs.ts
index d1d3db035..9e3fd5c6d 100644
--- a/src/lib/types/addrs.ts
+++ b/src/lib/types/addrs.ts
@@ -5,5 +5,5 @@ export type HexAddr = string & NominalType<"HexAddr">;
 export type ContractAddr = string & NominalType<"ContractAddr">;
 export type ValidatorAddr = string & NominalType<"ValidatorAddr">;
 
-export type Addr = HumanAddr | ContractAddr;
 export type AccountAddr = HumanAddr | HexAddr;
+export type Addr = AccountAddr | ContractAddr;
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 01b630699..88ffc9d34 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -4,7 +4,7 @@ export const parseJsonABI = (jsonString: string): ResponseABI => {
   try {
     return JSON.parse(jsonString);
   } catch {
-    throw new Error("Fail to parse ABI json string");
+    throw new Error(`Failed to parse ABI from JSON string: ${jsonString}`);
   }
 };
 
@@ -14,13 +14,24 @@ const sortByIsEntry = (a: ExposedFunction, b: ExposedFunction) => {
 };
 
 export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
-  const functionMap: { [key in "view" | "execute"]: ExposedFunction[] } = {
-    view: [],
-    execute: [],
-  };
-  functions.forEach((fn) =>
-    fn.is_view ? functionMap.view.push(fn) : functionMap.execute.push(fn)
+  const functionMap = functions.reduce<{
+    view: ExposedFunction[];
+    execute: ExposedFunction[];
+  }>(
+    (acc, fn) => {
+      if (fn.is_view) {
+        acc.view.push(fn);
+      } else {
+        acc.execute.push(fn);
+      }
+      return acc;
+    },
+    {
+      view: [],
+      execute: [],
+    }
   );
+
   functionMap.view.sort(sortByIsEntry);
   functionMap.execute.sort(sortByIsEntry);
 
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 256152617..0f0063e21 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -30,3 +30,5 @@ export * from "./icon";
 export * from "./window";
 export * from "./number";
 export * from "./math";
+export * from "./abi";
+export * from "./module";
diff --git a/src/lib/utils/module.ts b/src/lib/utils/module.ts
new file mode 100644
index 000000000..424236350
--- /dev/null
+++ b/src/lib/utils/module.ts
@@ -0,0 +1,15 @@
+import type { AccountAddr } from "lib/types";
+
+/**
+ * @input init1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpqr5e3d::any::pack
+ * @returns [init1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpqr5e3d,any,pack]
+ */
+
+type SplitReturn =
+  | [AccountAddr, undefined, undefined]
+  | [AccountAddr, string, undefined]
+  | [AccountAddr, string, string];
+
+export const splitModule = (path: string): SplitReturn => {
+  return path.split("::") as SplitReturn;
+};
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index 58605251c..64aa39eb2 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -20,11 +20,16 @@ export const isBlock = (input: string): boolean => {
 };
 
 export const isHexAddress = (address: string): boolean => {
-  const strip = address.replace("0x", "");
+  if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
+    return false;
+  }
+
+  const strip = address.slice(2);
+
   try {
     fromHex(strip);
   } catch {
     return false;
   }
-  return strip.length <= 40;
+  return true;
 };

From da1b7ec6715a09f8b9e488b3ec0eb18d5aa8d6ce Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 7 Sep 2023 10:44:36 +0700
Subject: [PATCH 032/368] fix(components): minor refactor

---
 .../publish-module/components/PolicyCard.tsx  | 23 ++++------
 src/lib/pages/publish-module/index.tsx        | 44 +++++++++----------
 2 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/src/lib/pages/publish-module/components/PolicyCard.tsx b/src/lib/pages/publish-module/components/PolicyCard.tsx
index 5ab3780fb..c50786031 100644
--- a/src/lib/pages/publish-module/components/PolicyCard.tsx
+++ b/src/lib/pages/publish-module/components/PolicyCard.tsx
@@ -30,21 +30,14 @@ export const PolicyCard = ({
             >
               {value}
             </Heading>
-            <Flex mt={1}>
-              <Text variant="body2" textColor="text.dark">
-                {description}
-                {hasCondition && (
-                  <Text
-                    ml={1}
-                    as="span"
-                    variant="body2"
-                    textColor="primary.main"
-                  >
-                    View conditions
-                  </Text>
-                )}
-              </Text>
-            </Flex>
+            <Text variant="body2" textColor="text.dark" mt={1}>
+              {description}
+              {hasCondition && (
+                <Text ml={1} as="span" variant="body2" textColor="primary.main">
+                  View conditions
+                </Text>
+              )}
+            </Text>
           </Flex>
         )}
       </Flex>
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 03f3a75f0..4de712228 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -30,9 +30,29 @@ interface PublishModuleState {
   modules: { module: Module }[];
 }
 
+const policies = [
+  {
+    value: "arbitrary",
+    description: "You can publish these modules again without any restrictions",
+    condition: false,
+  },
+  {
+    value: "compatible",
+    description:
+      "This address can publish these modules again but need to maintain several properties.",
+    condition: true,
+  },
+  {
+    value: "immutable",
+    description: "You cannot publish these modules again with this address",
+    condition: false,
+  },
+];
+
 const defaultValues: PublishModuleState = {
   modules: [{ module: { file: "", path: "" } }],
 };
+
 export const PublishModule = () => {
   const {
     chainConfig: { prettyName: chainPrettyName },
@@ -46,26 +66,6 @@ export const PublishModule = () => {
     connectWallet: "You need to connect wallet to proceed this action",
   };
 
-  const policies = [
-    {
-      value: "arbitrary",
-      description:
-        "You can publish these modules again without any restrictions",
-      condition: false,
-    },
-    {
-      value: "compatible",
-      description:
-        "This address can publish these modules again but need to maintain several properties.",
-      condition: true,
-    },
-    {
-      value: "immutable",
-      description: "You cannot publish these modules again with this address",
-      condition: false,
-    },
-  ];
-
   const { control } = useForm<PublishModuleState>({
     defaultValues,
   });
@@ -114,9 +114,7 @@ export const PublishModule = () => {
               onClick={() => append({ module: { file: "", path: "" } })}
               leftIcon={<CustomIcon name="add-new" />}
               variant="ghost-primary"
-              p={0}
-              pl={1}
-              pr={1}
+              p="0 4px"
             >
               Publish More Modules
             </Button>

From f9dd07ab069b17be1db43e8ee6c7657af430ed01 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 7 Sep 2023 17:39:55 +0700
Subject: [PATCH 033/368] feat: initia module interaction function panel and
 selected function info accordion

---
 CHANGELOG.md                                  |   1 +
 src/lib/components/PageContainer.tsx          |   8 +-
 src/lib/components/module/FunctionCard.tsx    |  70 ++++-----
 src/lib/components/module/index.ts            |   3 +
 src/lib/components/state/EmptyState.tsx       |   8 +-
 .../EmptyState.tsx}                           |   5 +
 .../component/common/FunctionAccordion.tsx    |  63 ++++++++
 .../{ => common}/InteractionTypeSwitch.tsx    |   7 +-
 .../component/common/ModuleContainer.tsx      |  12 ++
 .../interaction/component/common/index.ts     |   3 +
 .../drawer/body/ModuleFunctionBody.tsx        |  16 +-
 .../drawer/body/ModuleSelectMainBody.tsx      |  20 +--
 .../component/drawer/body/index.ts            |   1 -
 .../interaction/component/drawer/drawer.tsx   |   3 +-
 .../component/drawer/selector/index.tsx       |   3 +-
 src/lib/pages/interaction/component/index.ts  |   3 +
 .../component/main/SelectedFunctionCard.tsx   | 102 +++++++++++++
 .../pages/interaction/component/main/body.tsx |  62 ++++++++
 .../pages/interaction/component/main/index.ts |   2 +
 .../interaction/component/main/panel.tsx      | 140 ++++++++++++++++++
 src/lib/pages/interaction/index.tsx           | 100 +++++--------
 src/lib/utils/abi.ts                          |  13 +-
 src/lib/utils/icon.ts                         |  13 ++
 23 files changed, 516 insertions(+), 142 deletions(-)
 create mode 100644 src/lib/components/module/index.ts
 rename src/lib/pages/interaction/component/{drawer/body/ModuleEmptyState.tsx => common/EmptyState.tsx} (87%)
 create mode 100644 src/lib/pages/interaction/component/common/FunctionAccordion.tsx
 rename src/lib/pages/interaction/component/{ => common}/InteractionTypeSwitch.tsx (92%)
 create mode 100644 src/lib/pages/interaction/component/common/ModuleContainer.tsx
 create mode 100644 src/lib/pages/interaction/component/common/index.ts
 create mode 100644 src/lib/pages/interaction/component/index.ts
 create mode 100644 src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx
 create mode 100644 src/lib/pages/interaction/component/main/body.tsx
 create mode 100644 src/lib/pages/interaction/component/main/index.ts
 create mode 100644 src/lib/pages/interaction/component/main/panel.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd1ef6dde..7de4b8201 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#521](https://github.com/alleslabs/celatone-frontend/pull/521) Initia module interaction function panel and selected function info accordion
 - [#515](https://github.com/alleslabs/celatone-frontend/pull/515) Initia select module drawer wireup
 - [#494](https://github.com/alleslabs/celatone-frontend/pull/494) Initia select module drawer UI
 - [#490](https://github.com/alleslabs/celatone-frontend/pull/490) Add initia module interaction page
diff --git a/src/lib/components/PageContainer.tsx b/src/lib/components/PageContainer.tsx
index 7bc305562..8abb443e7 100644
--- a/src/lib/components/PageContainer.tsx
+++ b/src/lib/components/PageContainer.tsx
@@ -1,16 +1,18 @@
+import type { BoxProps } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 
-type PageContainerProps = {
+interface PageContainerProps extends BoxProps {
   children: ReactNode;
-};
+}
 
-const PageContainer = ({ children }: PageContainerProps) => (
+const PageContainer = ({ children, ...containerProps }: PageContainerProps) => (
   <Box
     as="main"
     p={{ base: "16px", md: "48px" }}
     overflowX="hidden"
     minH="inherit"
+    {...containerProps}
   >
     {children}
   </Box>
diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
index d05998b59..5913ed408 100644
--- a/src/lib/components/module/FunctionCard.tsx
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -4,42 +4,42 @@ import { Flex, Text } from "@chakra-ui/react";
 import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
 import { Tooltip } from "lib/components/Tooltip";
-import type { ExposedFunction, Visibility } from "lib/types";
+import type { ExposedFunction } from "lib/types";
+import { getVisibilityIcon } from "lib/utils";
+
+type CardVariant = "common" | "disabled" | "selected";
 
 interface FunctionCardProps {
+  variant?: CardVariant;
+  isSelected?: boolean;
   exposedFn: ExposedFunction;
   onFunctionSelect: (fn: ExposedFunction) => void;
 }
 
-const getIcon = (visibility: Visibility) => {
-  switch (visibility) {
-    case "friend":
-      return <CustomIcon name="friends" color="gray.600" boxSize={3} />;
-    case "script":
-      return <CustomIcon name="code" color="gray.600" boxSize={3} />;
-    case "public":
-    default:
-      return <CustomIcon name="website" color="gray.600" boxSize={3} />;
-  }
-};
-
-const disabledStyle: { [key in `${boolean}`]: FlexProps } = {
-  true: {
+const cardStyles: { [key in CardVariant]: FlexProps } = {
+  common: {
+    bgColor: "gray.800",
+    _hover: { bg: "gray.700" },
+    cursor: "pointer",
+    borderColor: "transparent",
+  },
+  disabled: {
     bgColor: "gray.900",
     _hover: { bg: "gray.900" },
     cursor: "not-allowed",
     pointerEvents: "none",
     borderColor: "gray.700",
   },
-  false: {
-    bgColor: "gray.800",
+  selected: {
+    bgColor: "gray.700",
     _hover: { bg: "gray.700" },
     cursor: "pointer",
-    borderColor: "transparent",
+    borderColor: "gray.600",
   },
 };
 
 export const FunctionCard = ({
+  variant = "common",
   exposedFn,
   onFunctionSelect,
 }: FunctionCardProps) => {
@@ -56,7 +56,7 @@ export const FunctionCard = ({
       gap={1}
       border="1px solid"
       onClick={() => onFunctionSelect(exposedFn)}
-      {...disabledStyle[String(disabled) as `${boolean}`]}
+      {...cardStyles[disabled ? "disabled" : variant]}
     >
       <Flex gap={1} justifyContent="space-between" w="full">
         <Flex gap={1} alignItems="center">
@@ -70,21 +70,25 @@ export const FunctionCard = ({
           </Text>
         </Flex>
         <Flex alignItems="center" gap={2}>
-          {!disabled && (
-            <>
-              <Tooltip
-                bg="primary.dark"
-                label="Only functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
-              >
-                <Flex>
-                  <CustomIcon name="check" color="success.main" boxSize={3} />
-                </Flex>
-              </Tooltip>
-              <DotSeparator bg="gray.600" />
-            </>
-          )}
+          <Tooltip
+            bg="primary.dark"
+            label="Only functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+          >
+            <Flex pointerEvents="auto">
+              {disabled ? (
+                <CustomIcon name="close" color="gray.600" boxSize={3} />
+              ) : (
+                <CustomIcon name="check" color="success.main" boxSize={3} />
+              )}
+            </Flex>
+          </Tooltip>
+          <DotSeparator bg="gray.600" />
           <Flex alignItems="center" gap={1}>
-            {getIcon(visibility)}
+            <CustomIcon
+              name={getVisibilityIcon(visibility)}
+              color="gray.600"
+              boxSize={3}
+            />
             <Text variant="body3" color="text.dark" textTransform="capitalize">
               {visibility}
             </Text>
diff --git a/src/lib/components/module/index.ts b/src/lib/components/module/index.ts
new file mode 100644
index 000000000..e4d9b173a
--- /dev/null
+++ b/src/lib/components/module/index.ts
@@ -0,0 +1,3 @@
+export * from "./CountBadge";
+export * from "./FunctionCard";
+export * from "./ModuleCard";
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index a0d923eaf..83de71e6b 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -1,4 +1,4 @@
-import type { ImageProps, TextProps } from "@chakra-ui/react";
+import type { FlexProps, ImageProps, TextProps } from "@chakra-ui/react";
 import { Flex, Heading, Text } from "@chakra-ui/react";
 import type { ReactElement } from "react";
 
@@ -11,7 +11,8 @@ export interface EmptyStateProps {
   message: string | ReactElement;
   heading?: string;
   withBorder?: boolean;
-  my?: number;
+  my?: FlexProps["my"];
+  py?: FlexProps["py"];
   textVariant?: TextProps["variant"];
 }
 
@@ -22,10 +23,11 @@ export const EmptyState = ({
   heading,
   withBorder = false,
   my = 12,
+  py = 8,
   textVariant = "body1",
 }: EmptyStateProps) => (
   <Flex
-    py={8}
+    py={py}
     my={my}
     direction="column"
     borderY={withBorder ? "1px solid" : undefined}
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx b/src/lib/pages/interaction/component/common/EmptyState.tsx
similarity index 87%
rename from src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx
rename to src/lib/pages/interaction/component/common/EmptyState.tsx
index b36e654f1..cb0a25cea 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx
+++ b/src/lib/pages/interaction/component/common/EmptyState.tsx
@@ -11,6 +11,7 @@ interface ModuleEmptyStateProps {
   h?: FlexProps["h"];
   p?: FlexProps["p"];
 }
+
 export const ModuleEmptyState = ({
   description = "Available functions for selected modules will display here",
   imageWidth = "160px",
@@ -41,3 +42,7 @@ export const ModuleEmptyState = ({
     </Flex>
   );
 };
+
+export const NoImageEmptyState = ({ desc }: { desc: string }) => (
+  <ModuleEmptyState h="fit-content" p={4} hasImage={false} description={desc} />
+);
diff --git a/src/lib/pages/interaction/component/common/FunctionAccordion.tsx b/src/lib/pages/interaction/component/common/FunctionAccordion.tsx
new file mode 100644
index 000000000..5465bd991
--- /dev/null
+++ b/src/lib/pages/interaction/component/common/FunctionAccordion.tsx
@@ -0,0 +1,63 @@
+import {
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
+
+import { CountBadge, FunctionCard } from "lib/components/module";
+import type { ExposedFunction, Option } from "lib/types";
+
+import { NoImageEmptyState } from "./EmptyState";
+
+interface FunctionAccordionProps {
+  filteredFns: ExposedFunction[];
+  isEmpty: boolean;
+  triggerText: string;
+  selectedFn: Option<ExposedFunction>;
+  setSelectedFn: Dispatch<SetStateAction<Option<ExposedFunction>>>;
+}
+
+export const FunctionAccordion = ({
+  filteredFns,
+  isEmpty,
+  triggerText,
+  selectedFn,
+  setSelectedFn,
+}: FunctionAccordionProps) => {
+  return (
+    <AccordionItem bg="background.main" py={1}>
+      <h6>
+        <AccordionButton>
+          <Flex align="center" justify="space-between" gap={2}>
+            <Text variant="body2" color="text.dark">
+              {triggerText}
+            </Text>
+            <CountBadge count={filteredFns.length} variant="common" />
+          </Flex>
+          <AccordionIcon color="gray.600" ml="auto" />
+        </AccordionButton>
+      </h6>
+      <AccordionPanel py={3} px={0}>
+        <Flex flexDirection="column" gap={1}>
+          {filteredFns.length ? (
+            filteredFns.map((fn) => (
+              <FunctionCard
+                variant={selectedFn?.name === fn.name ? "selected" : "common"}
+                exposedFn={fn}
+                onFunctionSelect={setSelectedFn}
+              />
+            ))
+          ) : (
+            <NoImageEmptyState
+              desc={isEmpty ? "No function" : "No matching function found"}
+            />
+          )}
+        </Flex>
+      </AccordionPanel>
+    </AccordionItem>
+  );
+};
diff --git a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx b/src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx
similarity index 92%
rename from src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
rename to src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx
index aad51ae76..4d5e6ef2d 100644
--- a/src/lib/pages/interaction/component/InteractionTypeSwitch.tsx
+++ b/src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx
@@ -13,6 +13,7 @@ export enum InteractionTabs {
 interface InteractionTypeSwitchProps extends FlexProps {
   currentTab: Option<InteractionTabs>;
   disabled?: boolean;
+  counts: [Option<number>, Option<number>];
   onTabChange: Dispatch<SetStateAction<Option<InteractionTabs>>>;
 }
 
@@ -21,6 +22,7 @@ const tabs = Object.values(InteractionTabs);
 export const InteractionTypeSwitch = ({
   currentTab,
   disabled = false,
+  counts,
   onTabChange,
   ...flexProps
 }: InteractionTypeSwitchProps) => {
@@ -31,13 +33,14 @@ export const InteractionTypeSwitch = ({
       border="1px solid var(--chakra-colors-gray-700)"
       borderRadius="4px"
       p={1}
+      h="32px"
       direction="row"
       align="center"
       position="relative"
       sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
       {...flexProps}
     >
-      {tabs.map((tab) => (
+      {tabs.map((tab, idx) => (
         <MotionBox
           key={tab}
           w="full"
@@ -56,7 +59,7 @@ export const InteractionTypeSwitch = ({
           textAlign="center"
         >
           <Heading as="h6" variant="h6" fontSize="14px">
-            {tab}
+            {tab} {counts[idx] && `(${counts[idx]})`}
           </Heading>
         </MotionBox>
       ))}
diff --git a/src/lib/pages/interaction/component/common/ModuleContainer.tsx b/src/lib/pages/interaction/component/common/ModuleContainer.tsx
new file mode 100644
index 000000000..75428c444
--- /dev/null
+++ b/src/lib/pages/interaction/component/common/ModuleContainer.tsx
@@ -0,0 +1,12 @@
+import { Flex, chakra } from "@chakra-ui/react";
+
+export const ModuleContainer = chakra(Flex, {
+  baseStyle: {
+    flexDirection: "column",
+    bgColor: "gray.900",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 8,
+    gap: 4,
+  },
+});
diff --git a/src/lib/pages/interaction/component/common/index.ts b/src/lib/pages/interaction/component/common/index.ts
new file mode 100644
index 000000000..b1a205f52
--- /dev/null
+++ b/src/lib/pages/interaction/component/common/index.ts
@@ -0,0 +1,3 @@
+export * from "./EmptyState";
+export * from "./InteractionTypeSwitch";
+export * from "./ModuleContainer";
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
index 5e3065c5e..d5df0f7c3 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
@@ -2,6 +2,7 @@ import type { FlexProps, GridItemProps } from "@chakra-ui/react";
 import { GridItem, Heading, Flex, Text } from "@chakra-ui/react";
 import { useCallback, useMemo, useState } from "react";
 
+import { ModuleEmptyState, NoImageEmptyState } from "../../common";
 import type { ModuleSelectFunction } from "../types";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
@@ -9,8 +10,6 @@ import { FunctionCard } from "lib/components/module/FunctionCard";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction, Option } from "lib/types";
 
-import { ModuleEmptyState } from "./ModuleEmptyState";
-
 const functionGridBaseStyle: FlexProps = {
   border: "1px solid",
   borderRadius: 8,
@@ -19,14 +18,6 @@ const functionGridBaseStyle: FlexProps = {
   direction: "column",
 };
 
-const EmptyFunctionState = ({
-  desc = "No exposed_functions available.",
-}: {
-  desc?: string;
-}) => (
-  <ModuleEmptyState h="fit-content" p={4} hasImage={false} description={desc} />
-);
-
 interface RenderFunctionsProps {
   exposedFnsLength: number;
   filtered: Option<ExposedFunction[]>;
@@ -37,7 +28,8 @@ const RenderFunctions = ({
   filtered,
   onFunctionSelect,
 }: RenderFunctionsProps) => {
-  if (!exposedFnsLength) return <EmptyFunctionState />;
+  if (!exposedFnsLength)
+    return <NoImageEmptyState desc="No exposed_functions available" />;
   return filtered?.length ? (
     <>
       {filtered.map((fn) => (
@@ -49,7 +41,7 @@ const RenderFunctions = ({
       ))}
     </>
   ) : (
-    <EmptyFunctionState desc="No matching function found." />
+    <NoImageEmptyState desc="No matching function found." />
   );
 };
 
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
index 2a90bba86..b58ef81c0 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
@@ -2,6 +2,7 @@ import { Grid, GridItem, Text, Flex, Box, Button } from "@chakra-ui/react";
 import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState } from "react";
 
+import { NoImageEmptyState } from "../../common";
 import type {
   DisplayMode,
   ModuleSelectFunction,
@@ -13,7 +14,6 @@ import { ModuleCard } from "lib/components/module/ModuleCard";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { Option } from "lib/types";
 
-import { ModuleEmptyState } from "./ModuleEmptyState";
 import { ModuleFunctionBody } from "./ModuleFunctionBody";
 
 interface ModuleSelectBodyProps {
@@ -38,14 +38,7 @@ const RenderModules = ({
   setSelectedModule: Dispatch<SetStateAction<Option<IndexedModule>>>;
 }) => {
   if (!modulesLength)
-    return (
-      <ModuleEmptyState
-        h="fit-content"
-        p={4}
-        description="This address does not have any modules."
-        hasImage={false}
-      />
-    );
+    return <NoImageEmptyState desc="This address does not have any modules." />;
   return filtered?.length ? (
     <>
       {filtered.map((module) => (
@@ -59,12 +52,7 @@ const RenderModules = ({
       ))}
     </>
   ) : (
-    <ModuleEmptyState
-      h="fit-content"
-      p={4}
-      description="No matching module found."
-      hasImage={false}
-    />
+    <NoImageEmptyState desc="No matching module found." />
   );
 };
 
@@ -88,7 +76,7 @@ export const ModuleSelectMainBody = ({
       templateAreas={`"panel main""button button"`}
       columnGap={4}
       rowGap={6}
-      templateColumns="300px 1fr"
+      templateColumns="minmax(300px, 20%) 1fr"
       templateRows="1fr auto"
       position="relative"
       overflow="hidden"
diff --git a/src/lib/pages/interaction/component/drawer/body/index.ts b/src/lib/pages/interaction/component/drawer/body/index.ts
index 06b4852b5..6bed2e43e 100644
--- a/src/lib/pages/interaction/component/drawer/body/index.ts
+++ b/src/lib/pages/interaction/component/drawer/body/index.ts
@@ -1,2 +1 @@
-export * from "./ModuleEmptyState";
 export * from "./ModuleSelectMainBody";
diff --git a/src/lib/pages/interaction/component/drawer/drawer.tsx b/src/lib/pages/interaction/component/drawer/drawer.tsx
index 973f219d0..03aa5f7c9 100644
--- a/src/lib/pages/interaction/component/drawer/drawer.tsx
+++ b/src/lib/pages/interaction/component/drawer/drawer.tsx
@@ -10,11 +10,12 @@ import {
 } from "@chakra-ui/react";
 import { useState } from "react";
 
+import { ModuleEmptyState } from "../common";
 import { CustomIcon } from "lib/components/icon";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { HexAddr, HumanAddr } from "lib/types";
 
-import { ModuleEmptyState, ModuleSelectMainBody } from "./body";
+import { ModuleSelectMainBody } from "./body";
 import { ModuleSelector } from "./selector";
 import type {
   DisplayMode,
diff --git a/src/lib/pages/interaction/component/drawer/selector/index.tsx b/src/lib/pages/interaction/component/drawer/selector/index.tsx
index 031897f8d..a00dfdcb8 100644
--- a/src/lib/pages/interaction/component/drawer/selector/index.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/index.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@chakra-ui/react";
 
-import type { DisplayMode, SelectedAddress } from "../types";
+import type { DisplayMode } from "../types";
 
 import { ModuleSelectorDisplay } from "./SelectorDisplay";
 import type { ModuleSelectorInputProps } from "./SelectorInput";
@@ -8,7 +8,6 @@ import { ModuleSelectorInput } from "./SelectorInput";
 
 interface ModuleSelectorProps extends ModuleSelectorInputProps {
   mode: DisplayMode;
-  selectedAddress: SelectedAddress;
 }
 
 export const ModuleSelector = ({
diff --git a/src/lib/pages/interaction/component/index.ts b/src/lib/pages/interaction/component/index.ts
new file mode 100644
index 000000000..6411ec9bc
--- /dev/null
+++ b/src/lib/pages/interaction/component/index.ts
@@ -0,0 +1,3 @@
+export * from "./common";
+export * from "./drawer";
+export * from "./main";
diff --git a/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx b/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx
new file mode 100644
index 000000000..66fb56d62
--- /dev/null
+++ b/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx
@@ -0,0 +1,102 @@
+import { Button, Divider, Flex } from "@chakra-ui/react";
+import { useState } from "react";
+
+import { CustomIcon } from "lib/components/icon";
+import { LabelText } from "lib/components/LabelText";
+import { MotionBox } from "lib/components/MotionBox";
+import type { ExposedFunction } from "lib/types";
+import { getVisibilityIcon } from "lib/utils";
+
+interface SelectedFunctionCardProps {
+  fn: ExposedFunction;
+}
+
+export const SelectedFunctionCard = ({ fn }: SelectedFunctionCardProps) => {
+  const [expand, setExpand] = useState(false);
+  return (
+    <Flex direction="column" bg="gray.900" borderRadius="8px">
+      <Flex align="center" justify="space-between" p={4} borderRadius="8px">
+        <Flex gap={8} h="full">
+          <LabelText label="Selected function" labelWeight={700}>
+            {fn.name}
+          </LabelText>
+          <Divider orientation="vertical" borderColor="gray.700" />
+          <LabelText label="Visibility" labelWeight={700}>
+            <Flex
+              align="center"
+              gap={1}
+              fontSize="14px"
+              color="text.dark"
+              lineHeight={0}
+              textTransform="capitalize"
+            >
+              <CustomIcon
+                name={getVisibilityIcon(fn.visibility)}
+                boxSize={3}
+                color="gray.600"
+              />
+              {fn.visibility}
+            </Flex>
+          </LabelText>
+          <LabelText label="is_entry" labelWeight={700}>
+            <Flex
+              align="center"
+              gap={1}
+              fontSize="14px"
+              color="text.dark"
+              lineHeight={0}
+            >
+              <CustomIcon
+                boxSize={3}
+                color={fn.is_entry ? "success.main" : "gray.600"}
+                name={fn.is_entry ? "check" : "close"}
+              />
+              {String(fn.is_entry)}
+            </Flex>
+          </LabelText>
+        </Flex>
+        <Button
+          size="sm"
+          variant="ghost-gray"
+          rightIcon={
+            <CustomIcon
+              name="chevron-down"
+              boxSize={3}
+              color="gray.400"
+              transform={expand ? "rotate(180deg)" : "rotate(0)"}
+            />
+          }
+          onClick={() => {
+            setExpand((prev) => !prev);
+          }}
+        >
+          {expand ? "View Less" : "View More"}
+        </Button>
+      </Flex>
+      <MotionBox
+        display="flex"
+        flexDir="column"
+        variants={{
+          expanded: { opacity: 1, height: "auto" },
+          collapsed: { opacity: 0, height: 0 },
+        }}
+        overflow="hidden"
+        initial="collapsed"
+        animate={expand ? "expanded" : "collapsed"}
+        transition={{
+          duration: "0.25",
+          ease: "easeInOut",
+        }}
+        p={`0 16px ${expand ? "16px" : 0}`}
+        gap={3}
+      >
+        <LabelText label="generic_type_params" labelWeight={700}>
+          {JSON.stringify(fn.generic_type_params)}
+        </LabelText>
+        <LabelText label="params" labelWeight={700}>
+          {JSON.stringify(fn.params)}
+        </LabelText>
+      </MotionBox>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interaction/component/main/body.tsx
new file mode 100644
index 000000000..226fd18c0
--- /dev/null
+++ b/src/lib/pages/interaction/component/main/body.tsx
@@ -0,0 +1,62 @@
+import { Button, Flex } from "@chakra-ui/react";
+
+import { ModuleContainer } from "../common";
+import { CustomIcon } from "lib/components/icon";
+import { EmptyState } from "lib/components/state";
+import type { IndexedModule } from "lib/services/moduleService";
+import type { ExposedFunction, Option } from "lib/types";
+
+import { SelectedFunctionCard } from "./SelectedFunctionCard";
+
+interface FunctionSelectBodyProps {
+  module: Option<IndexedModule>;
+  selectedFn: Option<ExposedFunction>;
+}
+
+export const FunctionSelectBody = ({
+  module,
+  selectedFn,
+}: FunctionSelectBodyProps) => {
+  return selectedFn ? (
+    <Flex direction="column">
+      <SelectedFunctionCard fn={selectedFn} />
+    </Flex>
+  ) : (
+    <ModuleContainer flexDirection="column" py={24}>
+      {module ? (
+        <Flex
+          align="center"
+          gap={6}
+          h="20%"
+          w="20%"
+          alignSelf="flex-start"
+          ml="40px"
+        >
+          <CustomIcon name="arrow-left" boxSize={6} color="gray.600" />
+          <Flex
+            h="full"
+            color="text.dark"
+            fontSize="14px"
+            justifyContent="space-between"
+            direction="column"
+          >
+            <p>Select available functions at the left panel.</p>
+            <p>Functions input or response type will display here.</p>
+          </Flex>
+        </Flex>
+      ) : (
+        <>
+          <EmptyState
+            imageWidth="80px"
+            imageVariant="empty"
+            message={`Initiate your Module interactions by choosing a module and its associated function. ${"\n"} This section will showcase the input or response type required for the functions.`}
+            textVariant="body2"
+            my={0}
+            py={4}
+          />
+          <Button variant="primary">Select Module</Button>
+        </>
+      )}
+    </ModuleContainer>
+  );
+};
diff --git a/src/lib/pages/interaction/component/main/index.ts b/src/lib/pages/interaction/component/main/index.ts
new file mode 100644
index 000000000..25871cf71
--- /dev/null
+++ b/src/lib/pages/interaction/component/main/index.ts
@@ -0,0 +1,2 @@
+export * from "./body";
+export * from "./panel";
diff --git a/src/lib/pages/interaction/component/main/panel.tsx b/src/lib/pages/interaction/component/main/panel.tsx
new file mode 100644
index 000000000..6fa96f055
--- /dev/null
+++ b/src/lib/pages/interaction/component/main/panel.tsx
@@ -0,0 +1,140 @@
+import { Accordion, Flex } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  NoImageEmptyState,
+  ModuleContainer,
+  InteractionTabs,
+  InteractionTypeSwitch,
+} from "../common";
+import { FunctionAccordion } from "../common/FunctionAccordion";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { EmptyState } from "lib/components/state";
+import type { IndexedModule } from "lib/services/moduleService";
+import type { ExposedFunction, Option } from "lib/types";
+import { checkAvailability } from "lib/utils/abi";
+
+const EmptyStateRender = ({ desc }: { desc: string }) => (
+  <ModuleContainer h="full">
+    <EmptyState
+      imageWidth="80px"
+      imageVariant="empty"
+      message={desc}
+      textVariant="body2"
+    />
+  </ModuleContainer>
+);
+
+interface FunctionStates {
+  filteredFunctions: Option<ExposedFunction[]>;
+  isEmpty: boolean;
+  noAvailableFns: boolean;
+  noOtherFns: boolean;
+}
+
+const RenderFunctions = ({
+  states,
+  selectedFn,
+  setSelectedFn,
+}: {
+  states: FunctionStates;
+  selectedFn: Option<ExposedFunction>;
+  setSelectedFn: Dispatch<SetStateAction<Option<ExposedFunction>>>;
+}) => {
+  if (!states.filteredFunctions)
+    return (
+      <EmptyStateRender desc="Available functions for selected modules will display here." />
+    );
+  if (states.isEmpty)
+    return <NoImageEmptyState desc="No exposed_functions available" />;
+
+  return (
+    <Accordion defaultIndex={[0]} allowMultiple>
+      <FunctionAccordion
+        triggerText="Available functions"
+        isEmpty={states.noAvailableFns}
+        filteredFns={states.filteredFunctions.filter((fn) =>
+          checkAvailability(fn)
+        )}
+        selectedFn={selectedFn}
+        setSelectedFn={setSelectedFn}
+      />
+      <FunctionAccordion
+        triggerText="Other functions"
+        isEmpty={states.noOtherFns}
+        filteredFns={states.filteredFunctions.filter(
+          (fn) => !checkAvailability(fn)
+        )}
+        selectedFn={selectedFn}
+        setSelectedFn={setSelectedFn}
+      />
+    </Accordion>
+  );
+};
+
+interface FunctionSelectPanelProps {
+  module: Option<IndexedModule>;
+  selectedFn: Option<ExposedFunction>;
+  setSelectedFn: Dispatch<SetStateAction<Option<ExposedFunction>>>;
+}
+
+export const FunctionSelectPanel = ({
+  module,
+  selectedFn,
+  setSelectedFn,
+}: FunctionSelectPanelProps) => {
+  const { query, isReady } = useRouter();
+  const [tab, setTab] = useState<InteractionTabs>();
+  const [keyword, setKeyword] = useState("");
+
+  const functionStates = useMemo<FunctionStates>(() => {
+    const targetFunctions =
+      tab === InteractionTabs.VIEW_MODULE
+        ? module?.viewFunctions
+        : module?.executeFunctions;
+    return {
+      filteredFunctions: targetFunctions?.filter((fn) =>
+        fn.name.includes(keyword)
+      ),
+      isEmpty: targetFunctions?.length === 0,
+      noAvailableFns:
+        targetFunctions?.filter((fn) => checkAvailability(fn)).length === 0,
+      noOtherFns:
+        targetFunctions?.filter((fn) => !checkAvailability(fn)).length === 0,
+    };
+  }, [keyword, tab, module?.executeFunctions, module?.viewFunctions]);
+
+  useEffect(() => {
+    if (isReady) {
+      setTab(
+        query.type === "execute"
+          ? InteractionTabs.EXECUTE_MODULE
+          : InteractionTabs.VIEW_MODULE
+      );
+    }
+  }, [isReady, query.type]);
+
+  return (
+    <Flex direction="column" overflow="scroll">
+      <InputWithIcon
+        iconPosition="start"
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        placeholder="Search functions ..."
+      />
+      <InteractionTypeSwitch
+        currentTab={tab}
+        onTabChange={setTab}
+        my={3}
+        counts={[module?.viewFunctions.length, module?.executeFunctions.length]}
+      />
+      <RenderFunctions
+        states={functionStates}
+        selectedFn={selectedFn}
+        setSelectedFn={setSelectedFn}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index e76627d94..f9b1e6891 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -1,13 +1,16 @@
-import type { FlexProps } from "@chakra-ui/react";
-import { useDisclosure, Button, Flex, Heading, Text } from "@chakra-ui/react";
-import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import {
+  Grid,
+  useDisclosure,
+  Button,
+  Flex,
+  Heading,
+  Text,
+} from "@chakra-ui/react";
+import { useCallback, useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
-import { CountBadge } from "lib/components/module/CountBadge";
 import PageContainer from "lib/components/PageContainer";
-import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction } from "lib/types";
 import { parseJsonABI } from "lib/utils/abi";
@@ -15,28 +18,14 @@ import { parseJsonABI } from "lib/utils/abi";
 import {
   ModuleSelectDrawerTrigger,
   ModuleSelectDrawer,
-} from "./component/drawer";
-import {
-  InteractionTypeSwitch,
-  InteractionTabs,
-} from "./component/InteractionTypeSwitch";
-
-const containerBaseStyle: FlexProps = {
-  direction: "column",
-  bgColor: "gray.900",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: 8,
-  gap: 4,
-};
+  FunctionSelectPanel,
+  FunctionSelectBody,
+} from "./component";
 
 export const Interaction = () => {
-  const { query, isReady } = useRouter();
   const { isOpen, onClose, onOpen } = useDisclosure();
 
-  const [tab, setTab] = useState<InteractionTabs>();
   const [module, setModule] = useState<IndexedModule>();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [selectedFn, setSelectedFn] = useState<ExposedFunction>();
 
   const abi = module ? parseJsonABI(module.abi) : undefined;
@@ -49,18 +38,14 @@ export const Interaction = () => {
     []
   );
 
-  useEffect(() => {
-    if (isReady) {
-      setTab(
-        query.type === "execute"
-          ? InteractionTabs.EXECUTE_MODULE
-          : InteractionTabs.VIEW_MODULE
-      );
-    }
-  }, [isReady, query.type]);
-
   return (
-    <PageContainer>
+    <PageContainer
+      overflow="hidden"
+      minH="unset"
+      maxH="calc(100vh - 129px)"
+      display="grid"
+      gridTemplateRows="auto auto 1fr"
+    >
       <Heading as="h5" variant="h5">
         Module Interactions
       </Heading>
@@ -90,7 +75,7 @@ export const Interaction = () => {
               </LabelText>
               <LabelText label="Friends" labelWeight={600}>
                 <Text variant="body2" color="gray.400">
-                  {abi?.friends.join(" , ")}
+                  {abi?.friends ? JSON.stringify(abi.friends) : "N/A"}
                 </Text>
               </LabelText>
             </Flex>
@@ -114,7 +99,7 @@ export const Interaction = () => {
           </>
         ) : (
           <>
-            <p>Select module to interact with ...</p>
+            <p>Select a module to interact with ...</p>
             <ModuleSelectDrawerTrigger
               triggerVariant="select-module"
               onOpen={onOpen}
@@ -127,36 +112,23 @@ export const Interaction = () => {
           handleModuleSelect={handleModuleSelect}
         />
       </Flex>
-      <Flex borderTop="1px solid" borderColor="gray.700" py={8} gap={8}>
+      <Grid
+        borderTop="1px solid"
+        borderColor="gray.700"
+        py={8}
+        gap={8}
+        templateColumns="minmax(300px, 20%) 1fr"
+        overflow="hidden"
+      >
         {/* Left side */}
-        <Flex direction="column" flex={0.2}>
-          <Flex alignItems="center" gap={2}>
-            <Text variant="body2" fontWeight={600}>
-              Available functions
-            </Text>
-            <CountBadge variant="common" count={0} />
-          </Flex>
-          <InteractionTypeSwitch currentTab={tab} onTabChange={setTab} my={3} />
-          <Flex {...containerBaseStyle} p={4} height="full">
-            <EmptyState
-              imageWidth="80px"
-              imageVariant="empty"
-              message="Available functions for selected modules will display here"
-              textVariant="body2"
-            />
-          </Flex>
-        </Flex>
+        <FunctionSelectPanel
+          module={module}
+          selectedFn={selectedFn}
+          setSelectedFn={setSelectedFn}
+        />
         {/* Right side */}
-        <Flex {...containerBaseStyle} flex={0.8} py={24}>
-          <EmptyState
-            imageWidth="80px"
-            imageVariant="empty"
-            message={`Initiate your Module interactions by choosing a module and its associated function. ${"\n"} This section will showcase the input or response type required for the functions.`}
-            textVariant="body2"
-          />
-          <Button variant="primary">Select Module</Button>
-        </Flex>
-      </Flex>
+        <FunctionSelectBody module={module} selectedFn={selectedFn} />
+      </Grid>
     </PageContainer>
   );
 };
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 01b630699..2c5d7950a 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -1,5 +1,8 @@
 import type { ExposedFunction, ResponseABI } from "lib/types";
 
+export const checkAvailability = (fn: ExposedFunction) =>
+  fn.is_entry && fn.visibility === "public";
+
 export const parseJsonABI = (jsonString: string): ResponseABI => {
   try {
     return JSON.parse(jsonString);
@@ -8,9 +11,9 @@ export const parseJsonABI = (jsonString: string): ResponseABI => {
   }
 };
 
-const sortByIsEntry = (a: ExposedFunction, b: ExposedFunction) => {
-  if (a.is_entry === b.is_entry) return 0;
-  return a.is_entry ? -1 : 1;
+const sortByAvailability = (a: ExposedFunction, b: ExposedFunction) => {
+  if (checkAvailability(a) === checkAvailability(b)) return 0;
+  return checkAvailability(a) ? -1 : 1;
 };
 
 export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
@@ -21,8 +24,8 @@ export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
   functions.forEach((fn) =>
     fn.is_view ? functionMap.view.push(fn) : functionMap.execute.push(fn)
   );
-  functionMap.view.sort(sortByIsEntry);
-  functionMap.execute.sort(sortByIsEntry);
+  functionMap.view.sort(sortByAvailability);
+  functionMap.execute.sort(sortByAvailability);
 
   return functionMap;
 };
diff --git a/src/lib/utils/icon.ts b/src/lib/utils/icon.ts
index a985642bf..466eb966d 100644
--- a/src/lib/utils/icon.ts
+++ b/src/lib/utils/icon.ts
@@ -1,5 +1,6 @@
 import type { IconKeys } from "lib/components/icon";
 import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data";
+import type { Visibility } from "lib/types";
 
 export const getListIcon = (listName: string): IconKeys => {
   switch (listName) {
@@ -11,3 +12,15 @@ export const getListIcon = (listName: string): IconKeys => {
       return "contract-list";
   }
 };
+
+export const getVisibilityIcon = (visibility: Visibility): IconKeys => {
+  switch (visibility) {
+    case "friend":
+      return "friends";
+    case "script":
+      return "code";
+    case "public":
+    default:
+      return "website";
+  }
+};

From 0f354193a39765b004f04e0cb8d570e53e5b0ae9 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 7 Sep 2023 17:43:36 +0700
Subject: [PATCH 034/368] chore: add todos

---
 src/lib/types/abi.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
index 78dde0b12..a2dc9ca22 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/abi.ts
@@ -9,12 +9,14 @@ export enum UpgradePolicy {
 
 export type Visibility = "public" | "friend" | "private" | "script";
 
+// TODO: revisit address type later
 export interface ABIModule {
   address: string;
   name: string;
   functions: ABIFunction[];
 }
 
+// TODO: revisit moduleAddress type later
 interface ABIFunction {
   method: "query" | "tx";
   moduleAddress: string;

From d8aac8569ff2903f756bf269c99c0b035786bebd Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 8 Sep 2023 14:29:21 +0700
Subject: [PATCH 035/368] feat: rewrite view function availability and add
 search by function name feature

---
 src/lib/components/LabelText.tsx              |  4 ++-
 src/lib/components/module/FunctionCard.tsx    | 35 +++++++++++--------
 .../drawer/body/ModuleFunctionBody.tsx        |  2 +-
 .../drawer/selector/SelectorInput.tsx         | 13 ++++---
 .../pages/interaction/component/main/body.tsx |  2 +-
 .../hooks/useValidateModuleInput.ts           | 15 ++++----
 src/lib/pages/interaction/index.tsx           |  2 +-
 src/lib/services/moduleService.ts             | 17 +++++++--
 src/lib/utils/abi.ts                          |  2 +-
 src/lib/utils/index.ts                        |  1 +
 src/lib/utils/modules.ts                      | 15 ++++++++
 11 files changed, 75 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/utils/modules.ts

diff --git a/src/lib/components/LabelText.tsx b/src/lib/components/LabelText.tsx
index d42f2b4c3..efd7c9ab5 100644
--- a/src/lib/components/LabelText.tsx
+++ b/src/lib/components/LabelText.tsx
@@ -29,7 +29,9 @@ export const LabelText = ({
       {tooltipText && <TooltipInfo label={tooltipText} />}
     </Flex>
     {typeof children === "string" ? (
-      <Text variant="body2">{children}</Text>
+      <Text variant="body2" overflowWrap="anywhere">
+        {children}
+      </Text>
     ) : (
       children
     )}
diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
index 5913ed408..91e822a53 100644
--- a/src/lib/components/module/FunctionCard.tsx
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -6,6 +6,7 @@ import { CustomIcon } from "../icon";
 import { Tooltip } from "lib/components/Tooltip";
 import type { ExposedFunction } from "lib/types";
 import { getVisibilityIcon } from "lib/utils";
+import { checkAvailability } from "lib/utils/abi";
 
 type CardVariant = "common" | "disabled" | "selected";
 
@@ -43,8 +44,8 @@ export const FunctionCard = ({
   exposedFn,
   onFunctionSelect,
 }: FunctionCardProps) => {
-  const { is_entry: isEntry, is_view: isView, visibility, name } = exposedFn;
-  const disabled = !isEntry || visibility !== "public";
+  const { is_view: isView, visibility, name } = exposedFn;
+  const disabled = !checkAvailability(exposedFn);
 
   return (
     <Flex
@@ -70,19 +71,23 @@ export const FunctionCard = ({
           </Text>
         </Flex>
         <Flex alignItems="center" gap={2}>
-          <Tooltip
-            bg="primary.dark"
-            label="Only functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
-          >
-            <Flex pointerEvents="auto">
-              {disabled ? (
-                <CustomIcon name="close" color="gray.600" boxSize={3} />
-              ) : (
-                <CustomIcon name="check" color="success.main" boxSize={3} />
-              )}
-            </Flex>
-          </Tooltip>
-          <DotSeparator bg="gray.600" />
+          {!isView && (
+            <>
+              <Tooltip
+                bg="primary.dark"
+                label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+              >
+                <Flex pointerEvents="auto" onClick={(e) => e.stopPropagation()}>
+                  {disabled ? (
+                    <CustomIcon name="close" color="gray.600" boxSize={3} />
+                  ) : (
+                    <CustomIcon name="check" color="success.main" boxSize={3} />
+                  )}
+                </Flex>
+              </Tooltip>
+              <DotSeparator bg="gray.600" />
+            </>
+          )}
           <Flex alignItems="center" gap={1}>
             <CustomIcon
               name={getVisibilityIcon(visibility)}
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
index d5df0f7c3..28e08f6f0 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
@@ -97,7 +97,7 @@ export const ModuleFunctionBody = ({
             placeholder="Search functions ..."
             my={4}
           />
-          <Flex gap={6} maxH={maxHeight}>
+          <Flex gap={6} h={maxHeight}>
             <Flex flex={0.5} gap={3} {...functionGridBaseStyle}>
               <Flex alignItems="center" gap={1}>
                 <Text variant="body2" fontWeight={600} color="text.dark">
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index b0392cfda..0898181ec 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -17,7 +17,7 @@ import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateM
 import type { IndexedModule } from "lib/services/moduleService";
 import { useAddressModules } from "lib/services/moduleService";
 import type { AccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
-import { bech32AddressToHex } from "lib/utils";
+import { bech32AddressToHex, splitModule } from "lib/utils";
 
 export interface ModuleSelectorInputProps {
   selectedAddress: SelectedAddress;
@@ -38,7 +38,10 @@ export const ModuleSelectorInput = ({
 }: ModuleSelectorInputProps) => {
   const [keyword, setKeyword] = useState(selectedAddress.address as string);
   const [error, setError] = useState("");
-  const [addr, moduleName] = useMemo(() => keyword.split("::"), [keyword]);
+  const [addr, moduleName, functionName] = useMemo(
+    () => splitModule(keyword),
+    [keyword]
+  );
 
   const convertHexAddr = useConvertHexAddress();
   const { validateHexAddress } = useValidateAddress();
@@ -47,6 +50,7 @@ export const ModuleSelectorInput = ({
   const { refetch, isFetching } = useAddressModules({
     address: addr as AccountAddr,
     moduleName,
+    functionName,
     options: {
       refetchOnWindowFocus: false,
       enabled: false,
@@ -69,8 +73,9 @@ export const ModuleSelectorInput = ({
           setModules(data);
           setMode("display");
         } else {
-          handleModuleSelect(data);
+          handleModuleSelect(data, data.searchedFn);
           closeModal();
+          setMode("display");
         }
       },
       onError: (err) => setError((err as Error).message),
@@ -116,7 +121,7 @@ export const ModuleSelectorInput = ({
         setInputState={setKeyword}
         error={error}
         size="md"
-        helperText={`ex. “${user}” or “${user}::module_name”`}
+        helperText={`ex. “${user}”, “${user}::module_name”, or “${user}::module_name::function_name”`}
         label="Fill in address or module path"
         variant="floating"
         labelBgColor="gray.800"
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interaction/component/main/body.tsx
index 226fd18c0..e547fd9cf 100644
--- a/src/lib/pages/interaction/component/main/body.tsx
+++ b/src/lib/pages/interaction/component/main/body.tsx
@@ -18,7 +18,7 @@ export const FunctionSelectBody = ({
   selectedFn,
 }: FunctionSelectBodyProps) => {
   return selectedFn ? (
-    <Flex direction="column">
+    <Flex direction="column" maxW="full">
       <SelectedFunctionCard fn={selectedFn} />
     </Flex>
   ) : (
diff --git a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
index 33a3b9fbd..f556a6480 100644
--- a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
+++ b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
@@ -5,7 +5,7 @@ import {
   useExampleAddresses,
   useValidateAddress,
 } from "lib/app-provider";
-import { isHexAddress, truncate } from "lib/utils";
+import { isHexAddress, splitModule, truncate } from "lib/utils";
 
 export const useValidateModuleInput = () => {
   const { validateUserAddress } = useValidateAddress();
@@ -15,20 +15,23 @@ export const useValidateModuleInput = () => {
 
   const { user } = useExampleAddresses();
   const truncateExampleAddr = truncate(user);
-  const errText = `Input must be address (${truncateExampleAddr} or “0x123...456) or module path (“${truncateExampleAddr}::module_name” or “0x123...456::module_name)`;
+  const errText = `Input must be address (${truncateExampleAddr} or “0x123...456) 
+  or module path (“${truncateExampleAddr}::module_name” or “0x123...456::module_name)
+  or function path (“${truncateExampleAddr}::module_name::function_name” or “0x123...456::module_name::function_name)`;
 
   return useCallback(
     (input: string): string | null => {
-      const inputArr = input.split("::");
+      const inputArr = splitModule(input);
       // Allow only module path for now
-      if (inputArr.length > 2) return errText;
-      const [address, module] = inputArr;
+      if (inputArr.length > 3) return errText;
+      const [address, module, functionName] = inputArr;
       const addrErr = validateUserAddress(address);
       const invalidAddress = address.startsWith(prefix)
         ? addrErr
         : !isHexAddress(address);
 
-      if (invalidAddress || module === "") return errText;
+      if (invalidAddress || module === "" || functionName === "")
+        return errText;
 
       return null;
     },
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index f9b1e6891..23bbe650f 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -115,7 +115,7 @@ export const Interaction = () => {
       <Grid
         borderTop="1px solid"
         borderColor="gray.700"
-        py={8}
+        pt={8}
         gap={8}
         templateColumns="minmax(300px, 20%) 1fr"
         overflow="hidden"
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 14628a18d..2f140c146 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -11,6 +11,7 @@ import type {
   ExposedFunction,
   InternalModule,
   ResponseABI,
+  Option,
 } from "lib/types";
 import { parseJsonABI, splitViewExecuteFunctions } from "lib/utils/abi";
 
@@ -24,9 +25,13 @@ export interface IndexedModule extends InternalModule {
   parsedAbi: ResponseABI;
   viewFunctions: ExposedFunction[];
   executeFunctions: ExposedFunction[];
+  searchedFn: Option<ExposedFunction>;
 }
 
-const indexModuleResponse = (module: InternalModule): IndexedModule => {
+const indexModuleResponse = (
+  module: InternalModule,
+  functionName?: string
+): IndexedModule => {
   const parsedAbi = parseJsonABI(module.abi);
   const { view, execute } = splitViewExecuteFunctions(
     parsedAbi.exposed_functions
@@ -36,23 +41,28 @@ const indexModuleResponse = (module: InternalModule): IndexedModule => {
     parsedAbi,
     viewFunctions: view,
     executeFunctions: execute,
+    searchedFn: parsedAbi.exposed_functions.find(
+      (fn) => fn.name === functionName
+    ),
   };
 };
 
 export const useAddressModules = ({
   address,
   moduleName,
+  functionName,
   options = {},
 }: {
   address: AccountAddr;
-  moduleName: string;
+  moduleName: Option<string>;
+  functionName: Option<string>;
   options?: Omit<UseQueryOptions<IndexedModule | IndexedModule[]>, "queryKey">;
 }): UseQueryResult<IndexedModule | IndexedModule[]> => {
   const baseEndpoint = useBaseApiRoute("rest");
   const queryFn: QueryFunction<IndexedModule | IndexedModule[]> = () =>
     moduleName
       ? getAccountModule(baseEndpoint, address, moduleName).then((module) =>
-          indexModuleResponse(module)
+          indexModuleResponse(module, functionName)
         )
       : getAccountModules(baseEndpoint, address).then((modules) =>
           modules.map((module) => indexModuleResponse(module))
@@ -64,6 +74,7 @@ export const useAddressModules = ({
       baseEndpoint,
       address as string,
       moduleName,
+      functionName,
     ],
     queryFn,
     options
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 2c5d7950a..fecc97eea 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -1,7 +1,7 @@
 import type { ExposedFunction, ResponseABI } from "lib/types";
 
 export const checkAvailability = (fn: ExposedFunction) =>
-  fn.is_entry && fn.visibility === "public";
+  fn.visibility === "public" && (fn.is_view || fn.is_entry);
 
 export const parseJsonABI = (jsonString: string): ResponseABI => {
   try {
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 256152617..cdd4d6f6c 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -30,3 +30,4 @@ export * from "./icon";
 export * from "./window";
 export * from "./number";
 export * from "./math";
+export * from "./modules";
diff --git a/src/lib/utils/modules.ts b/src/lib/utils/modules.ts
new file mode 100644
index 000000000..424236350
--- /dev/null
+++ b/src/lib/utils/modules.ts
@@ -0,0 +1,15 @@
+import type { AccountAddr } from "lib/types";
+
+/**
+ * @input init1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpqr5e3d::any::pack
+ * @returns [init1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpqr5e3d,any,pack]
+ */
+
+type SplitReturn =
+  | [AccountAddr, undefined, undefined]
+  | [AccountAddr, string, undefined]
+  | [AccountAddr, string, string];
+
+export const splitModule = (path: string): SplitReturn => {
+  return path.split("::") as SplitReturn;
+};

From ef66f273405d4d2cb60040b4000567bb7bb0f17c Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 8 Sep 2023 15:53:06 +0700
Subject: [PATCH 036/368] feat: improve ui and interaction

---
 src/lib/layout/navbar/index.tsx               |  9 ++-------
 .../component/common/FunctionAccordion.tsx    |  1 +
 .../common/InteractionTypeSwitch.tsx          |  4 ++--
 .../component/common/ModuleContainer.tsx      |  1 +
 .../pages/interaction/component/main/body.tsx | 19 ++++++++-----------
 .../interaction/component/main/panel.tsx      | 16 ++--------------
 src/lib/pages/interaction/index.tsx           | 15 ++++++---------
 src/pages/[network]/interaction/[type].tsx    |  3 ---
 src/pages/interaction/[type].tsx              |  3 ---
 9 files changed, 22 insertions(+), 49 deletions(-)
 delete mode 100644 src/pages/[network]/interaction/[type].tsx
 delete mode 100644 src/pages/interaction/[type].tsx

diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index a7c4bcb68..b6f75a1ec 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -119,13 +119,8 @@ const Navbar = ({ isExpand, isDevMode, setIsExpand }: NavbarProps) => {
                 icon: "add-new" as IconKeys,
               },
               {
-                name: "View",
-                slug: "/interaction/view",
-                icon: "query" as IconKeys,
-              },
-              {
-                name: "Execute",
-                slug: "/interaction/execute",
+                name: "View / Execute",
+                slug: "/interaction",
                 icon: "execute" as IconKeys,
               },
               {
diff --git a/src/lib/pages/interaction/component/common/FunctionAccordion.tsx b/src/lib/pages/interaction/component/common/FunctionAccordion.tsx
index 5465bd991..97d03c2b3 100644
--- a/src/lib/pages/interaction/component/common/FunctionAccordion.tsx
+++ b/src/lib/pages/interaction/component/common/FunctionAccordion.tsx
@@ -46,6 +46,7 @@ export const FunctionAccordion = ({
           {filteredFns.length ? (
             filteredFns.map((fn) => (
               <FunctionCard
+                key={fn.name}
                 variant={selectedFn?.name === fn.name ? "selected" : "common"}
                 exposedFn={fn}
                 onFunctionSelect={setSelectedFn}
diff --git a/src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx b/src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx
index 4d5e6ef2d..1571f8143 100644
--- a/src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx
+++ b/src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx
@@ -11,10 +11,10 @@ export enum InteractionTabs {
 }
 
 interface InteractionTypeSwitchProps extends FlexProps {
-  currentTab: Option<InteractionTabs>;
+  currentTab: InteractionTabs;
   disabled?: boolean;
   counts: [Option<number>, Option<number>];
-  onTabChange: Dispatch<SetStateAction<Option<InteractionTabs>>>;
+  onTabChange: Dispatch<SetStateAction<InteractionTabs>>;
 }
 
 const tabs = Object.values(InteractionTabs);
diff --git a/src/lib/pages/interaction/component/common/ModuleContainer.tsx b/src/lib/pages/interaction/component/common/ModuleContainer.tsx
index 75428c444..ad8d4f83f 100644
--- a/src/lib/pages/interaction/component/common/ModuleContainer.tsx
+++ b/src/lib/pages/interaction/component/common/ModuleContainer.tsx
@@ -8,5 +8,6 @@ export const ModuleContainer = chakra(Flex, {
     justifyContent: "center",
     borderRadius: 8,
     gap: 4,
+    px: 4,
   },
 });
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interaction/component/main/body.tsx
index e547fd9cf..e591a8772 100644
--- a/src/lib/pages/interaction/component/main/body.tsx
+++ b/src/lib/pages/interaction/component/main/body.tsx
@@ -11,30 +11,25 @@ import { SelectedFunctionCard } from "./SelectedFunctionCard";
 interface FunctionSelectBodyProps {
   module: Option<IndexedModule>;
   selectedFn: Option<ExposedFunction>;
+  openDrawer: () => void;
 }
 
 export const FunctionSelectBody = ({
   module,
   selectedFn,
+  openDrawer,
 }: FunctionSelectBodyProps) => {
   return selectedFn ? (
     <Flex direction="column" maxW="full">
       <SelectedFunctionCard fn={selectedFn} />
     </Flex>
   ) : (
-    <ModuleContainer flexDirection="column" py={24}>
+    <ModuleContainer flexDirection="column">
       {module ? (
-        <Flex
-          align="center"
-          gap={6}
-          h="20%"
-          w="20%"
-          alignSelf="flex-start"
-          ml="40px"
-        >
+        <Flex align="center" gap={6} alignSelf="flex-start" ml="40px">
           <CustomIcon name="arrow-left" boxSize={6} color="gray.600" />
           <Flex
-            h="full"
+            gap={4}
             color="text.dark"
             fontSize="14px"
             justifyContent="space-between"
@@ -54,7 +49,9 @@ export const FunctionSelectBody = ({
             my={0}
             py={4}
           />
-          <Button variant="primary">Select Module</Button>
+          <Button variant="primary" onClick={openDrawer}>
+            Select Module
+          </Button>
         </>
       )}
     </ModuleContainer>
diff --git a/src/lib/pages/interaction/component/main/panel.tsx b/src/lib/pages/interaction/component/main/panel.tsx
index 6fa96f055..e2816a94b 100644
--- a/src/lib/pages/interaction/component/main/panel.tsx
+++ b/src/lib/pages/interaction/component/main/panel.tsx
@@ -1,7 +1,6 @@
 import { Accordion, Flex } from "@chakra-ui/react";
-import { useRouter } from "next/router";
 import type { Dispatch, SetStateAction } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import {
   NoImageEmptyState,
@@ -85,8 +84,7 @@ export const FunctionSelectPanel = ({
   selectedFn,
   setSelectedFn,
 }: FunctionSelectPanelProps) => {
-  const { query, isReady } = useRouter();
-  const [tab, setTab] = useState<InteractionTabs>();
+  const [tab, setTab] = useState(InteractionTabs.VIEW_MODULE);
   const [keyword, setKeyword] = useState("");
 
   const functionStates = useMemo<FunctionStates>(() => {
@@ -106,16 +104,6 @@ export const FunctionSelectPanel = ({
     };
   }, [keyword, tab, module?.executeFunctions, module?.viewFunctions]);
 
-  useEffect(() => {
-    if (isReady) {
-      setTab(
-        query.type === "execute"
-          ? InteractionTabs.EXECUTE_MODULE
-          : InteractionTabs.VIEW_MODULE
-      );
-    }
-  }, [isReady, query.type]);
-
   return (
     <Flex direction="column" overflow="scroll">
       <InputWithIcon
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 23bbe650f..8ee2e307c 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -112,14 +112,7 @@ export const Interaction = () => {
           handleModuleSelect={handleModuleSelect}
         />
       </Flex>
-      <Grid
-        borderTop="1px solid"
-        borderColor="gray.700"
-        pt={8}
-        gap={8}
-        templateColumns="minmax(300px, 20%) 1fr"
-        overflow="hidden"
-      >
+      <Grid gap={8} templateColumns="minmax(300px, 20%) 1fr" overflow="hidden">
         {/* Left side */}
         <FunctionSelectPanel
           module={module}
@@ -127,7 +120,11 @@ export const Interaction = () => {
           setSelectedFn={setSelectedFn}
         />
         {/* Right side */}
-        <FunctionSelectBody module={module} selectedFn={selectedFn} />
+        <FunctionSelectBody
+          module={module}
+          selectedFn={selectedFn}
+          openDrawer={onOpen}
+        />
       </Grid>
     </PageContainer>
   );
diff --git a/src/pages/[network]/interaction/[type].tsx b/src/pages/[network]/interaction/[type].tsx
deleted file mode 100644
index 6812f4848..000000000
--- a/src/pages/[network]/interaction/[type].tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Interaction } from "lib/pages/interaction";
-
-export default Interaction;
diff --git a/src/pages/interaction/[type].tsx b/src/pages/interaction/[type].tsx
deleted file mode 100644
index 6812f4848..000000000
--- a/src/pages/interaction/[type].tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Interaction } from "lib/pages/interaction";
-
-export default Interaction;

From 3bf80e186a397e2e11b512f1b680e684dfef1f1d Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 8 Sep 2023 16:34:35 +0700
Subject: [PATCH 037/368] fix: comment

---
 .../drawer/body/ModuleEmptyState.tsx          | 42 +++++++++----------
 .../drawer/selector/SelectorInput.tsx         |  4 +-
 src/lib/services/module.ts                    |  8 ++--
 src/lib/services/moduleService.ts             |  6 +--
 src/lib/types/addrs.ts                        |  4 +-
 src/lib/utils/module.ts                       |  8 ++--
 6 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx
index b36e654f1..d401dcbd9 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleEmptyState.tsx
@@ -18,26 +18,22 @@ export const ModuleEmptyState = ({
   noBorder = false,
   h = "full",
   p,
-}: ModuleEmptyStateProps) => {
-  return (
-    <Flex
-      h={h}
-      p={p}
-      w="full"
-      justifyContent="center"
-      alignItems="center"
-      border={noBorder ? "none" : "1px solid"}
-      borderRadius="8px"
-      borderColor="gray.700"
-    >
-      <Flex flexDirection="column" gap={4} alignItems="center">
-        {hasImage && (
-          <StateImage imageVariant="empty" imageWidth={imageWidth} />
-        )}
-        <Text variant="body2" color="text.dark" textAlign="center">
-          {description}
-        </Text>
-      </Flex>
-    </Flex>
-  );
-};
+}: ModuleEmptyStateProps) => (
+  <Flex
+    h={h}
+    p={p}
+    w="full"
+    justifyContent="center"
+    alignItems="center"
+    border={noBorder ? "none" : "1px solid"}
+    borderRadius="8px"
+    borderColor="gray.700"
+    direction="column"
+    gap={4}
+  >
+    {hasImage && <StateImage imageVariant="empty" imageWidth={imageWidth} />}
+    <Text variant="body2" color="text.dark" textAlign="center">
+      {description}
+    </Text>
+  </Flex>
+);
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index faccaa2eb..d023c9d9b 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -16,7 +16,7 @@ import { TextInput } from "lib/components/forms";
 import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateModuleInput";
 import type { IndexedModule } from "lib/services/moduleService";
 import { useAddressModules } from "lib/services/moduleService";
-import type { AccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
+import type { MoveAccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
 import { bech32AddressToHex } from "lib/utils";
 
 export interface ModuleSelectorInputProps {
@@ -45,7 +45,7 @@ export const ModuleSelectorInput = ({
   const validateModuleInput = useValidateModuleInput();
   const { user } = useExampleAddresses();
   const { refetch, isFetching } = useAddressModules({
-    address: addr as AccountAddr,
+    address: addr as MoveAccountAddr,
     moduleName,
     options: {
       refetchOnWindowFocus: false,
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 88b24352c..4cd02a336 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 
 import type {
-  AccountAddr,
+  MoveAccountAddr,
   ResponseModule,
   ResponseModules,
   InternalModule,
@@ -15,7 +15,7 @@ interface ModuleReturn {
 
 export const getAccountModules = async (
   baseEndpoint: string,
-  address: AccountAddr
+  address: MoveAccountAddr
 ): Promise<InternalModule[]> => {
   const result: ResponseModule[] = [];
 
@@ -36,7 +36,7 @@ export const getAccountModules = async (
 
 export const getAccountModule = async (
   baseEndpoint: string,
-  address: AccountAddr,
+  address: MoveAccountAddr,
   moduleName: string
 ): Promise<InternalModule> => {
   const { data } = await axios.get<ModuleReturn>(
@@ -57,7 +57,7 @@ interface ModuleVerificationReturn {
 }
 
 export const getModuleVerificationStatus = async (
-  address: AccountAddr,
+  address: MoveAccountAddr,
   moduleName: string
 ): Promise<boolean> =>
   // TODO: move url to base api route? wait for celatone api implementation?
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index e01a34089..0a81a9e21 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -7,7 +7,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
 import type {
-  AccountAddr,
+  MoveAccountAddr,
   ExposedFunction,
   InternalModule,
   ResponseABI,
@@ -44,7 +44,7 @@ export const useAddressModules = ({
   moduleName,
   options = {},
 }: {
-  address: AccountAddr;
+  address: MoveAccountAddr;
   moduleName: string;
   options?: Omit<UseQueryOptions<IndexedModule | IndexedModule[]>, "queryKey">;
 }): UseQueryResult<IndexedModule | IndexedModule[]> => {
@@ -69,7 +69,7 @@ export const useVerifyModule = ({
   address,
   moduleName,
 }: {
-  address: AccountAddr;
+  address: MoveAccountAddr;
   moduleName: string;
 }) =>
   useQuery(
diff --git a/src/lib/types/addrs.ts b/src/lib/types/addrs.ts
index 9e3fd5c6d..bd8b8d0fe 100644
--- a/src/lib/types/addrs.ts
+++ b/src/lib/types/addrs.ts
@@ -5,5 +5,5 @@ export type HexAddr = string & NominalType<"HexAddr">;
 export type ContractAddr = string & NominalType<"ContractAddr">;
 export type ValidatorAddr = string & NominalType<"ValidatorAddr">;
 
-export type AccountAddr = HumanAddr | HexAddr;
-export type Addr = AccountAddr | ContractAddr;
+export type MoveAccountAddr = HumanAddr | HexAddr;
+export type Addr = MoveAccountAddr | ContractAddr;
diff --git a/src/lib/utils/module.ts b/src/lib/utils/module.ts
index 424236350..611cc60fb 100644
--- a/src/lib/utils/module.ts
+++ b/src/lib/utils/module.ts
@@ -1,4 +1,4 @@
-import type { AccountAddr } from "lib/types";
+import type { MoveAccountAddr } from "lib/types";
 
 /**
  * @input init1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpqr5e3d::any::pack
@@ -6,9 +6,9 @@ import type { AccountAddr } from "lib/types";
  */
 
 type SplitReturn =
-  | [AccountAddr, undefined, undefined]
-  | [AccountAddr, string, undefined]
-  | [AccountAddr, string, string];
+  | [MoveAccountAddr, undefined, undefined]
+  | [MoveAccountAddr, string, undefined]
+  | [MoveAccountAddr, string, string];
 
 export const splitModule = (path: string): SplitReturn => {
   return path.split("::") as SplitReturn;

From 6aab542f1636137b7f33a9ce9498f356f7f56f18 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 8 Sep 2023 16:41:17 +0700
Subject: [PATCH 038/368] fix: unnecessary display flex

---
 src/lib/pages/proposal/components/Footer.tsx | 2 +-
 src/lib/pages/publish-module/index.tsx       | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/lib/pages/proposal/components/Footer.tsx b/src/lib/pages/proposal/components/Footer.tsx
index b88133f9f..0f6a0d28d 100644
--- a/src/lib/pages/proposal/components/Footer.tsx
+++ b/src/lib/pages/proposal/components/Footer.tsx
@@ -22,7 +22,7 @@ export const Footer = ({
       bottom="0"
       position="sticky"
       zIndex={2}
-      templateAreas={`"prespace main  postspace"`}
+      templateAreas={`"prespace main postspace"`}
       templateColumns="1fr 5fr 4fr"
     >
       <GridItem area="main">
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 4de712228..836afda87 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -95,7 +95,7 @@ export const PublishModule = () => {
             />
           </GridItem>
         </Grid>
-        <Box position="relative" display="flex" mt={12}>
+        <Flex position="relative" mt={12}>
           <Box w="10%" />
           <Box w="50%">
             <Heading as="h6" variant="h6" fontWeight={600}>
@@ -157,9 +157,9 @@ export const PublishModule = () => {
             </Box>
           </Box>
           <Box w="10%" />
-        </Box>
+        </Flex>
         {/* Upgrade Policy */}
-        <Box position="relative" display="flex" mt={12}>
+        <Flex position="relative" mt={12}>
           <Box w="10%" />
           <Box w="50%">
             <Heading as="h6" variant="h6" fontWeight={600}>
@@ -188,7 +188,6 @@ export const PublishModule = () => {
               color="text.dark"
               alignSelf="flex-start"
               alignItems="center"
-              display="flex"
               gap={1}
             >
               <p>Transaction Fee:</p>
@@ -273,7 +272,7 @@ export const PublishModule = () => {
             </Box>
           </Box>
           <Box w="10%" />
-        </Box>
+        </Flex>
       </Box>
       <Footer isLoading={false} fieldAmount={fields.length} />
     </>

From a3563b0295b9b6e0344903878b45c6975e453d41 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 8 Sep 2023 16:42:31 +0700
Subject: [PATCH 039/368] fix: add todo

---
 src/lib/pages/publish-module/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 836afda87..72cd0155e 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -75,6 +75,7 @@ export const PublishModule = () => {
     name: "modules",
   });
 
+  // TODO: revisit sticky and grid
   return (
     <>
       <Box as="main" p={{ base: "16px", md: "48px" }} minH="inherit">

From 3f30ae248cdb5af09ec7aa03fb4b740a33c4ec16 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 8 Sep 2023 17:34:37 +0700
Subject: [PATCH 040/368] refactor: var name

---
 .../component/drawer/body/ModuleSelectMainBody.tsx            | 2 +-
 .../interaction/component/drawer/selector/SelectorInput.tsx   | 4 ++--
 src/lib/pages/interaction/hooks/useValidateModuleInput.ts     | 2 +-
 src/lib/services/moduleService.ts                             | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
index 2a90bba86..99f4de9e8 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
@@ -79,7 +79,7 @@ export const ModuleSelectMainBody = ({
   const [selectedModule, setSelectedModule] = useState<IndexedModule>();
 
   const filteredModules = useMemo(
-    () => modules.filter((el) => el.moduleName.includes(keyword)),
+    () => modules.filter((each) => each.moduleName.includes(keyword)),
     [modules, keyword]
   );
 
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index d023c9d9b..c2f5d89d5 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -15,7 +15,7 @@ import {
 import { TextInput } from "lib/components/forms";
 import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateModuleInput";
 import type { IndexedModule } from "lib/services/moduleService";
-import { useAddressModules } from "lib/services/moduleService";
+import { useAccountModules } from "lib/services/moduleService";
 import type { MoveAccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
 import { bech32AddressToHex } from "lib/utils";
 
@@ -44,7 +44,7 @@ export const ModuleSelectorInput = ({
   const { validateHexAddress } = useValidateAddress();
   const validateModuleInput = useValidateModuleInput();
   const { user } = useExampleAddresses();
-  const { refetch, isFetching } = useAddressModules({
+  const { refetch, isFetching } = useAccountModules({
     address: addr as MoveAccountAddr,
     moduleName,
     options: {
diff --git a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
index eef05892e..f9c3671e6 100644
--- a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
+++ b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
@@ -15,7 +15,7 @@ export const useValidateModuleInput = () => {
 
   const { user } = useExampleAddresses();
   const truncateExampleAddr = truncate(user);
-  const errText = `Input must be address (${truncateExampleAddr} or “0x123...456) or module path (“${truncateExampleAddr}::module_name” or “0x123...456::module_name)`;
+  const errText = `Input must be address (${truncateExampleAddr} or “0x123...456“) or module path (“${truncateExampleAddr}::module_name” or “0x123...456::module_name“)`;
 
   return useCallback(
     (input: string): string | null => {
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 0a81a9e21..71be131e7 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -39,7 +39,7 @@ const indexModuleResponse = (module: InternalModule): IndexedModule => {
   };
 };
 
-export const useAddressModules = ({
+export const useAccountModules = ({
   address,
   moduleName,
   options = {},

From 8f696446ed96aeb4a3c4bb83b6002b5fc08eccb8 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 8 Sep 2023 18:05:08 +0700
Subject: [PATCH 041/368] fix: remove line-through

---
 src/lib/components/module/CountBadge.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/components/module/CountBadge.tsx b/src/lib/components/module/CountBadge.tsx
index 2df5935d8..9e9ba283b 100644
--- a/src/lib/components/module/CountBadge.tsx
+++ b/src/lib/components/module/CountBadge.tsx
@@ -11,8 +11,6 @@ export const CountBadge = ({ count, variant }: CountBadgeProps) => (
     bgColor={variant === "common" ? "gray.700" : "transparent"}
     textColor="text.main"
     p="2px 8px"
-    maxH="unset"
-    textDecoration={count === 0 ? "line-through" : undefined}
   >
     {count}
   </Badge>

From 409401ebae1b19fb057092beaebfd48c6205d43b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 12 Sep 2023 14:30:08 +0700
Subject: [PATCH 042/368] feat: initial abi form

---
 src/lib/components/abi/AbiForm.tsx            | 58 +++++++++++++++++
 src/lib/components/abi/index.ts               |  1 +
 .../components/abi/param-form/ParamField.tsx  | 35 ++++++++++
 src/lib/components/abi/param-form/index.tsx   | 65 +++++++++++++++++++
 .../abi/type-form/TypeFieldInput.tsx          | 44 +++++++++++++
 src/lib/components/abi/type-form/index.tsx    | 47 ++++++++++++++
 src/lib/components/forms/ControllerInput.tsx  |  7 +-
 .../component/form/ExecuteArea.tsx            | 22 +++++++
 .../interaction/component/form/ViewArea.tsx   | 31 +++++++++
 .../pages/interaction/component/form/index.ts |  2 +
 src/lib/pages/interaction/component/index.ts  |  1 +
 .../pages/interaction/component/main/body.tsx | 18 +++--
 src/lib/types/abi.ts                          |  2 +-
 src/lib/utils/abi.ts                          |  8 +++
 14 files changed, 334 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/abi/AbiForm.tsx
 create mode 100644 src/lib/components/abi/index.ts
 create mode 100644 src/lib/components/abi/param-form/ParamField.tsx
 create mode 100644 src/lib/components/abi/param-form/index.tsx
 create mode 100644 src/lib/components/abi/type-form/TypeFieldInput.tsx
 create mode 100644 src/lib/components/abi/type-form/index.tsx
 create mode 100644 src/lib/pages/interaction/component/form/ExecuteArea.tsx
 create mode 100644 src/lib/pages/interaction/component/form/ViewArea.tsx
 create mode 100644 src/lib/pages/interaction/component/form/index.ts

diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
new file mode 100644
index 000000000..53cd1d7e4
--- /dev/null
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -0,0 +1,58 @@
+import { Flex } from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+
+import type { ExposedFunction } from "lib/types";
+
+import { ParamForm } from "./param-form";
+import { TypeForm } from "./type-form";
+
+export interface AbiFormData {
+  typeArgs: Record<string, string>;
+  args: Record<string, string>;
+}
+
+interface AbiFormProps {
+  fn: ExposedFunction;
+  initialData: AbiFormData;
+  propsOnChange?: (data: AbiFormData) => void;
+  propsOnErrors?: (errors: [string, string][]) => void;
+}
+
+export const AbiForm = ({
+  fn,
+  initialData,
+  propsOnChange,
+  propsOnErrors,
+}: AbiFormProps) => {
+  const { setValue, watch, getValues } = useForm<AbiFormData>({
+    defaultValues: initialData,
+    mode: "all",
+  });
+  const { typeArgs, args } = watch();
+
+  return (
+    <Flex direction="column" gap={4}>
+      {Object.keys(typeArgs).length > 0 && (
+        <TypeForm
+          genericTypeParams={fn.generic_type_params}
+          initialData={typeArgs}
+          propsOnChange={(value) => {
+            setValue("typeArgs", value);
+            propsOnChange?.(getValues());
+          }}
+        />
+      )}
+      {Object.keys(args).length > 0 && (
+        <ParamForm
+          params={fn.params}
+          initialData={args}
+          propsOnChange={(value, errors) => {
+            setValue("args", value);
+            propsOnChange?.(getValues());
+            propsOnErrors?.(errors);
+          }}
+        />
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/abi/index.ts b/src/lib/components/abi/index.ts
new file mode 100644
index 000000000..46f667e90
--- /dev/null
+++ b/src/lib/components/abi/index.ts
@@ -0,0 +1 @@
+export * from "./AbiForm";
diff --git a/src/lib/components/abi/param-form/ParamField.tsx b/src/lib/components/abi/param-form/ParamField.tsx
new file mode 100644
index 000000000..748b08e35
--- /dev/null
+++ b/src/lib/components/abi/param-form/ParamField.tsx
@@ -0,0 +1,35 @@
+import { parseInt } from "lodash";
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+
+import { ControllerInput } from "lib/components/forms";
+
+interface ParamFieldProps<T extends FieldValues> {
+  index: number;
+  param: string;
+  control: Control<T>;
+  error?: string;
+}
+
+export const ParamField = <T extends FieldValues>({
+  index,
+  param,
+  control,
+  error,
+}: ParamFieldProps<T>) => {
+  return (
+    <ControllerInput
+      name={`${index}` as FieldPath<T>}
+      control={control}
+      label={param}
+      variant="floating"
+      rules={{
+        validate: {
+          positive: (v) => (parseInt(v) > 0 ? undefined : "need positive"),
+          lessThanTen: (v) => parseInt(v) < 10,
+        },
+        // pattern: { value: /^\d+$/, message: "This input is number only." },
+      }}
+      error={error}
+    />
+  );
+};
diff --git a/src/lib/components/abi/param-form/index.tsx b/src/lib/components/abi/param-form/index.tsx
new file mode 100644
index 000000000..9978a632f
--- /dev/null
+++ b/src/lib/components/abi/param-form/index.tsx
@@ -0,0 +1,65 @@
+import { Flex, Heading } from "@chakra-ui/react";
+import { useEffect } from "react";
+import type { FormState } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+import { ParamField } from "./ParamField";
+
+interface ParamFormProps {
+  params: string[];
+  initialData: Record<string, string>;
+  propsOnChange?: (
+    data: Record<string, string>,
+    errors: [string, string][]
+  ) => void;
+}
+
+const formatErrors = (
+  errors: FormState<Record<string, string>>["errors"]
+): [string, string][] =>
+  Object.entries(errors).map(([field, error]) => [
+    field,
+    error?.message ?? "invalid input",
+  ]);
+
+export const ParamForm = ({
+  params,
+  initialData,
+  propsOnChange,
+}: ParamFormProps) => {
+  const {
+    trigger,
+    control,
+    getValues,
+    formState: { errors },
+  } = useForm<Record<string, string>>({
+    defaultValues: initialData,
+    mode: "all",
+  });
+
+  useEffect(() => {
+    trigger();
+  }, [trigger]);
+
+  return (
+    <Flex direction="column" gap={4}>
+      <Heading variant="h6" as="h6" color="text.main">
+        args
+      </Heading>
+      {params.map((param, index) => {
+        control.register(`${index}`, {
+          onChange: () => propsOnChange?.(getValues(), formatErrors(errors)),
+        });
+        return (
+          <ParamField
+            key={param + index.toString()}
+            index={index}
+            param={param}
+            control={control}
+            error={errors[`${index}`]?.message}
+          />
+        );
+      })}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/abi/type-form/TypeFieldInput.tsx b/src/lib/components/abi/type-form/TypeFieldInput.tsx
new file mode 100644
index 000000000..4a7febb49
--- /dev/null
+++ b/src/lib/components/abi/type-form/TypeFieldInput.tsx
@@ -0,0 +1,44 @@
+import { Flex, Input, Text } from "@chakra-ui/react";
+import { capitalize } from "lodash";
+
+interface TypeFieldInputProps {
+  index: number;
+  value: string;
+  constraints: string[];
+  onChange: (value: string) => void;
+}
+
+export const TypeFieldInput = ({
+  index,
+  value,
+  constraints,
+  onChange,
+}: TypeFieldInputProps) => {
+  const placeholder = `Ability : ${
+    constraints.length
+      ? constraints.map((constraint) => capitalize(constraint)).join(" + ")
+      : "none"
+  }`;
+
+  return (
+    <Flex
+      bgColor="gray.900"
+      borderRadius="8px"
+      p="8px 16px"
+      gap={2}
+      alignItems="center"
+    >
+      <Text variant="body1" fontWeight={700} w={7}>
+        {`T${index}:`}
+      </Text>
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => {
+          const newValue = e.target.value;
+          onChange(newValue);
+        }}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/components/abi/type-form/index.tsx b/src/lib/components/abi/type-form/index.tsx
new file mode 100644
index 000000000..1c7630572
--- /dev/null
+++ b/src/lib/components/abi/type-form/index.tsx
@@ -0,0 +1,47 @@
+import { Flex, Heading } from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+
+import type { GenericTypeParam } from "lib/types";
+
+import { TypeFieldInput } from "./TypeFieldInput";
+
+interface TypeFormProps {
+  genericTypeParams: GenericTypeParam[];
+  initialData: Record<string, string>;
+  propsOnChange?: (data: Record<string, string>) => void;
+}
+
+export const TypeForm = ({
+  genericTypeParams,
+  initialData,
+  propsOnChange,
+}: TypeFormProps) => {
+  const { setValue, getValues } = useForm<Record<string, string>>({
+    defaultValues: initialData,
+    mode: "all",
+  });
+
+  const handleOnChange = (index: number) => {
+    return (fieldInput: string) => {
+      setValue(`${index}`, fieldInput);
+      propsOnChange?.(getValues());
+    };
+  };
+
+  return (
+    <Flex direction="column" gap={4}>
+      <Heading variant="h6" as="h6" color="text.main">
+        type_args
+      </Heading>
+      {genericTypeParams.map(({ constraints }, index) => (
+        <TypeFieldInput
+          key={constraints.join() + index.toString()}
+          index={index}
+          value={initialData[index]}
+          constraints={constraints}
+          onChange={handleOnChange(index)}
+        />
+      ))}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
index fca0a4fe8..8a8417255 100644
--- a/src/lib/components/forms/ControllerInput.tsx
+++ b/src/lib/components/forms/ControllerInput.tsx
@@ -52,13 +52,16 @@ export const ControllerInput = <T extends FieldValues>({
     control,
   });
 
-  const { field } = useController({
+  const {
+    field,
+    fieldState: { isTouched },
+  } = useController({
     name,
     control,
     rules,
   });
 
-  const isError = !!error;
+  const isError = isTouched && !!error;
   const isRequired = "required" in rules;
 
   return (
diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
new file mode 100644
index 000000000..4f1a0e666
--- /dev/null
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+import { AbiForm, type AbiFormData } from "lib/components/abi";
+import type { ExposedFunction } from "lib/types";
+import { getAbiInitialData } from "lib/utils";
+
+export const ExecuteArea = ({ fn }: { fn: ExposedFunction }) => {
+  const [data, setData] = useState<AbiFormData>({
+    typeArgs: getAbiInitialData(fn.generic_type_params.length),
+    args: getAbiInitialData(fn.params.length),
+  });
+  const [, setErrors] = useState<[string, string][]>([]);
+
+  return (
+    <AbiForm
+      fn={fn}
+      initialData={data}
+      propsOnChange={setData}
+      propsOnErrors={setErrors}
+    />
+  );
+};
diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interaction/component/form/ViewArea.tsx
new file mode 100644
index 000000000..d14c62f32
--- /dev/null
+++ b/src/lib/pages/interaction/component/form/ViewArea.tsx
@@ -0,0 +1,31 @@
+import { SimpleGrid } from "@chakra-ui/react";
+import { useState } from "react";
+
+import { AbiForm, type AbiFormData } from "lib/components/abi";
+import type { ExposedFunction } from "lib/types";
+import { getAbiInitialData } from "lib/utils";
+
+export const ViewArea = ({ fn }: { fn: ExposedFunction }) => {
+  const [data, setData] = useState<AbiFormData>({
+    typeArgs: getAbiInitialData(fn.generic_type_params.length),
+    args: getAbiInitialData(fn.params.length),
+  });
+  const [, setErrors] = useState<[string, string][]>([]);
+
+  return (
+    <SimpleGrid columns={2} spacing={4}>
+      <AbiForm
+        fn={fn}
+        initialData={data}
+        propsOnChange={setData}
+        propsOnErrors={setErrors}
+      />
+      <AbiForm
+        fn={fn}
+        initialData={data}
+        propsOnChange={setData}
+        propsOnErrors={setErrors}
+      />
+    </SimpleGrid>
+  );
+};
diff --git a/src/lib/pages/interaction/component/form/index.ts b/src/lib/pages/interaction/component/form/index.ts
new file mode 100644
index 000000000..414fbdf25
--- /dev/null
+++ b/src/lib/pages/interaction/component/form/index.ts
@@ -0,0 +1,2 @@
+export * from "./ExecuteArea";
+export * from "./ViewArea";
diff --git a/src/lib/pages/interaction/component/index.ts b/src/lib/pages/interaction/component/index.ts
index 6411ec9bc..5c6375a8d 100644
--- a/src/lib/pages/interaction/component/index.ts
+++ b/src/lib/pages/interaction/component/index.ts
@@ -1,3 +1,4 @@
 export * from "./common";
 export * from "./drawer";
+export * from "./form";
 export * from "./main";
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interaction/component/main/body.tsx
index e591a8772..67e7401d4 100644
--- a/src/lib/pages/interaction/component/main/body.tsx
+++ b/src/lib/pages/interaction/component/main/body.tsx
@@ -1,6 +1,7 @@
 import { Button, Flex } from "@chakra-ui/react";
 
 import { ModuleContainer } from "../common";
+import { ExecuteArea, ViewArea } from "../form";
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
@@ -18,10 +19,20 @@ export const FunctionSelectBody = ({
   module,
   selectedFn,
   openDrawer,
-}: FunctionSelectBodyProps) => {
-  return selectedFn ? (
-    <Flex direction="column" maxW="full">
+}: FunctionSelectBodyProps) =>
+  selectedFn ? (
+    <Flex
+      key={selectedFn.name + selectedFn.is_view}
+      direction="column"
+      maxW="full"
+      gap={8}
+    >
       <SelectedFunctionCard fn={selectedFn} />
+      {selectedFn.is_view ? (
+        <ViewArea fn={selectedFn} />
+      ) : (
+        <ExecuteArea fn={selectedFn} />
+      )}
     </Flex>
   ) : (
     <ModuleContainer flexDirection="column">
@@ -56,4 +67,3 @@ export const FunctionSelectBody = ({
       )}
     </ModuleContainer>
   );
-};
diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
index a2dc9ca22..4a0dcde58 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/abi.ts
@@ -73,7 +73,7 @@ interface Struct {
   fields: Field[];
 }
 
-interface GenericTypeParam {
+export interface GenericTypeParam {
   constraints: string[];
 }
 
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index ffb62a4b8..2bdbed5ca 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -40,3 +40,11 @@ export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
 
   return functionMap;
 };
+
+export const getAbiInitialData = (length: number): Record<string, string> =>
+  Array(length)
+    .fill("")
+    .reduce<Record<string, string>>(
+      (prev, _, index) => ({ ...prev, [index.toString()]: "" }),
+      {}
+    );

From afb476abae0c153a0271e1be68de5e3cc1f1b9e6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 12 Sep 2023 15:32:51 +0700
Subject: [PATCH 043/368] fix: add return form

---
 src/lib/components/abi/AbiForm.tsx            |  4 +-
 src/lib/components/abi/index.ts               |  1 +
 .../components/abi/param-form/ParamField.tsx  | 34 ++++++++++++----
 src/lib/components/abi/param-form/index.tsx   | 19 ++++++---
 .../interaction/component/form/ViewArea.tsx   | 40 +++++++++++--------
 5 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
index 53cd1d7e4..7ec49f437 100644
--- a/src/lib/components/abi/AbiForm.tsx
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -46,11 +46,11 @@ export const AbiForm = ({
         <ParamForm
           params={fn.params}
           initialData={args}
-          propsOnChange={(value, errors) => {
+          propsOnChange={(value) => {
             setValue("args", value);
             propsOnChange?.(getValues());
-            propsOnErrors?.(errors);
           }}
+          propsOnErrors={propsOnErrors}
         />
       )}
     </Flex>
diff --git a/src/lib/components/abi/index.ts b/src/lib/components/abi/index.ts
index 46f667e90..adbb729ac 100644
--- a/src/lib/components/abi/index.ts
+++ b/src/lib/components/abi/index.ts
@@ -1 +1,2 @@
 export * from "./AbiForm";
+export * from "./param-form";
diff --git a/src/lib/components/abi/param-form/ParamField.tsx b/src/lib/components/abi/param-form/ParamField.tsx
index 748b08e35..b61ecf042 100644
--- a/src/lib/components/abi/param-form/ParamField.tsx
+++ b/src/lib/components/abi/param-form/ParamField.tsx
@@ -1,5 +1,10 @@
 import { parseInt } from "lodash";
-import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import type {
+  Control,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+} from "react-hook-form";
 
 import { ControllerInput } from "lib/components/forms";
 
@@ -8,13 +13,31 @@ interface ParamFieldProps<T extends FieldValues> {
   param: string;
   control: Control<T>;
   error?: string;
+  isReadOnly?: boolean;
 }
 
+const getRules = <T extends FieldValues>(
+  param: string,
+  isReadOnly: boolean
+): UseControllerProps<T>["rules"] => {
+  if (isReadOnly) return {};
+  return {
+    validate: {
+      maxLength: (v: string) =>
+        v.length <= 10 ? undefined : `${v.length} more than 10`,
+      positive: (v) => (parseInt(v) > 0 ? undefined : `${v} need positive`),
+      lessThanTen: (v) => parseInt(v) < 10,
+    },
+    // pattern: { value: /^\d+$/, message: "This input is number only." },
+  };
+};
+
 export const ParamField = <T extends FieldValues>({
   index,
   param,
   control,
   error,
+  isReadOnly = false,
 }: ParamFieldProps<T>) => {
   return (
     <ControllerInput
@@ -22,14 +45,9 @@ export const ParamField = <T extends FieldValues>({
       control={control}
       label={param}
       variant="floating"
-      rules={{
-        validate: {
-          positive: (v) => (parseInt(v) > 0 ? undefined : "need positive"),
-          lessThanTen: (v) => parseInt(v) < 10,
-        },
-        // pattern: { value: /^\d+$/, message: "This input is number only." },
-      }}
+      rules={getRules<T>(param, isReadOnly)}
       error={error}
+      isReadOnly={isReadOnly}
     />
   );
 };
diff --git a/src/lib/components/abi/param-form/index.tsx b/src/lib/components/abi/param-form/index.tsx
index 9978a632f..8fafd814f 100644
--- a/src/lib/components/abi/param-form/index.tsx
+++ b/src/lib/components/abi/param-form/index.tsx
@@ -6,12 +6,12 @@ import { useForm } from "react-hook-form";
 import { ParamField } from "./ParamField";
 
 interface ParamFormProps {
+  title?: string;
   params: string[];
   initialData: Record<string, string>;
-  propsOnChange?: (
-    data: Record<string, string>,
-    errors: [string, string][]
-  ) => void;
+  propsOnChange?: (data: Record<string, string>) => void;
+  propsOnErrors?: (errors: [string, string][]) => void;
+  isReadOnly?: boolean;
 }
 
 const formatErrors = (
@@ -23,9 +23,12 @@ const formatErrors = (
   ]);
 
 export const ParamForm = ({
+  title = "args",
   params,
   initialData,
   propsOnChange,
+  propsOnErrors,
+  isReadOnly = false,
 }: ParamFormProps) => {
   const {
     trigger,
@@ -44,11 +47,14 @@ export const ParamForm = ({
   return (
     <Flex direction="column" gap={4}>
       <Heading variant="h6" as="h6" color="text.main">
-        args
+        {title}
       </Heading>
       {params.map((param, index) => {
         control.register(`${index}`, {
-          onChange: () => propsOnChange?.(getValues(), formatErrors(errors)),
+          onChange: () => {
+            propsOnChange?.(getValues());
+            propsOnErrors?.(formatErrors(errors));
+          },
         });
         return (
           <ParamField
@@ -57,6 +63,7 @@ export const ParamForm = ({
             param={param}
             control={control}
             error={errors[`${index}`]?.message}
+            isReadOnly={isReadOnly}
           />
         );
       })}
diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interaction/component/form/ViewArea.tsx
index d14c62f32..34a2b631f 100644
--- a/src/lib/pages/interaction/component/form/ViewArea.tsx
+++ b/src/lib/pages/interaction/component/form/ViewArea.tsx
@@ -1,7 +1,7 @@
-import { SimpleGrid } from "@chakra-ui/react";
+import { Grid, GridItem } from "@chakra-ui/react";
 import { useState } from "react";
 
-import { AbiForm, type AbiFormData } from "lib/components/abi";
+import { AbiForm, ParamForm, type AbiFormData } from "lib/components/abi";
 import type { ExposedFunction } from "lib/types";
 import { getAbiInitialData } from "lib/utils";
 
@@ -11,21 +11,29 @@ export const ViewArea = ({ fn }: { fn: ExposedFunction }) => {
     args: getAbiInitialData(fn.params.length),
   });
   const [, setErrors] = useState<[string, string][]>([]);
+  const [res, setRes] = useState<Record<string, string>>(
+    getAbiInitialData(fn.return.length)
+  );
 
   return (
-    <SimpleGrid columns={2} spacing={4}>
-      <AbiForm
-        fn={fn}
-        initialData={data}
-        propsOnChange={setData}
-        propsOnErrors={setErrors}
-      />
-      <AbiForm
-        fn={fn}
-        initialData={data}
-        propsOnChange={setData}
-        propsOnErrors={setErrors}
-      />
-    </SimpleGrid>
+    <Grid templateColumns="1fr 1fr" gap={4}>
+      <GridItem>
+        <AbiForm
+          fn={fn}
+          initialData={data}
+          propsOnChange={setData}
+          propsOnErrors={setErrors}
+        />
+      </GridItem>
+      <GridItem>
+        <ParamForm
+          title="Return"
+          params={fn.return}
+          initialData={res}
+          propsOnChange={setRes}
+          isReadOnly
+        />
+      </GridItem>
+    </Grid>
   );
 };

From cd3c347eb5d900a236a151babf578da7dae5309a Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 14 Sep 2023 14:48:58 +0700
Subject: [PATCH 044/368] fix: as commented

---
 src/lib/components/module/FunctionCard.tsx                | 3 +--
 src/lib/pages/interaction/component/common/EmptyState.tsx | 8 ++++----
 .../component/drawer/body/ModuleFunctionBody.tsx          | 1 +
 src/lib/pages/interaction/component/drawer/drawer.tsx     | 5 ++++-
 .../interaction/component/main/SelectedFunctionCard.tsx   | 4 +---
 src/lib/pages/interaction/component/main/panel.tsx        | 2 +-
 src/lib/pages/interaction/index.tsx                       | 2 +-
 src/lib/services/moduleService.ts                         | 2 +-
 8 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
index 91e822a53..a24bc9ed2 100644
--- a/src/lib/components/module/FunctionCard.tsx
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -5,8 +5,7 @@ import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
 import { Tooltip } from "lib/components/Tooltip";
 import type { ExposedFunction } from "lib/types";
-import { getVisibilityIcon } from "lib/utils";
-import { checkAvailability } from "lib/utils/abi";
+import { getVisibilityIcon, checkAvailability } from "lib/utils";
 
 type CardVariant = "common" | "disabled" | "selected";
 
diff --git a/src/lib/pages/interaction/component/common/EmptyState.tsx b/src/lib/pages/interaction/component/common/EmptyState.tsx
index f7f402402..79b858ccd 100644
--- a/src/lib/pages/interaction/component/common/EmptyState.tsx
+++ b/src/lib/pages/interaction/component/common/EmptyState.tsx
@@ -4,7 +4,7 @@ import { Text, Flex } from "@chakra-ui/react";
 import { StateImage } from "lib/components/state";
 
 interface ModuleEmptyStateProps {
-  description?: string;
+  description: string;
   imageWidth?: string;
   hasImage?: boolean;
   noBorder?: boolean;
@@ -13,9 +13,9 @@ interface ModuleEmptyStateProps {
 }
 
 export const ModuleEmptyState = ({
-  description = "Available functions for selected modules will display here",
+  description,
   imageWidth = "160px",
-  hasImage = true,
+  hasImage = false,
   noBorder = false,
   h = "full",
   p,
@@ -40,5 +40,5 @@ export const ModuleEmptyState = ({
 );
 
 export const NoImageEmptyState = ({ desc }: { desc: string }) => (
-  <ModuleEmptyState h="fit-content" p={4} hasImage={false} description={desc} />
+  <ModuleEmptyState h="fit-content" p={4} description={desc} />
 );
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
index 28e08f6f0..1e98d508e 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
@@ -141,6 +141,7 @@ export const ModuleFunctionBody = ({
           description="Choose a module to see its functions."
           imageWidth="80px"
           noBorder
+          hasImage
         />
       )}
     </GridItem>
diff --git a/src/lib/pages/interaction/component/drawer/drawer.tsx b/src/lib/pages/interaction/component/drawer/drawer.tsx
index 03aa5f7c9..1827f158f 100644
--- a/src/lib/pages/interaction/component/drawer/drawer.tsx
+++ b/src/lib/pages/interaction/component/drawer/drawer.tsx
@@ -72,7 +72,10 @@ export const ModuleSelectDrawer = ({
                 closeModal={onClose}
               />
             ) : (
-              <ModuleEmptyState />
+              <ModuleEmptyState
+                description="Available functions for selected modules will display here"
+                hasImage
+              />
             )}
           </Flex>
         </DrawerBody>
diff --git a/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx b/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx
index 66fb56d62..b3bd5d1aa 100644
--- a/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx
+++ b/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx
@@ -66,9 +66,7 @@ export const SelectedFunctionCard = ({ fn }: SelectedFunctionCardProps) => {
               transform={expand ? "rotate(180deg)" : "rotate(0)"}
             />
           }
-          onClick={() => {
-            setExpand((prev) => !prev);
-          }}
+          onClick={() => setExpand((prev) => !prev)}
         >
           {expand ? "View Less" : "View More"}
         </Button>
diff --git a/src/lib/pages/interaction/component/main/panel.tsx b/src/lib/pages/interaction/component/main/panel.tsx
index e2816a94b..cb5783ff5 100644
--- a/src/lib/pages/interaction/component/main/panel.tsx
+++ b/src/lib/pages/interaction/component/main/panel.tsx
@@ -13,7 +13,7 @@ import InputWithIcon from "lib/components/InputWithIcon";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction, Option } from "lib/types";
-import { checkAvailability } from "lib/utils/abi";
+import { checkAvailability } from "lib/utils";
 
 const EmptyStateRender = ({ desc }: { desc: string }) => (
   <ModuleContainer h="full">
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 99b923223..48246a8e1 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -13,7 +13,7 @@ import { LabelText } from "lib/components/LabelText";
 import PageContainer from "lib/components/PageContainer";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction } from "lib/types";
-import { parseJsonABI } from "lib/utils/abi";
+import { parseJsonABI } from "lib/utils";
 
 import {
   ModuleSelectDrawerTrigger,
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index c9f2f8dbd..93629b9ef 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -72,7 +72,7 @@ export const useAccountModules = ({
     [
       CELATONE_QUERY_KEYS.ACCOUNT_MODULES,
       baseEndpoint,
-      address as string,
+      address,
       moduleName,
       functionName,
     ],

From 31ba35cc2f28fe9f4aac13d76a172dc593055132 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 14 Sep 2023 16:26:16 +0700
Subject: [PATCH 045/368] feat: publish module component state wireup and add
 leaflet

---
 CHANGELOG.md                                  |   1 +
 src/config/chain/initia.ts                    |   1 +
 src/config/chain/types.ts                     |   4 +-
 src/lib/components/dropzone/config.ts         |  11 +-
 src/lib/components/dropzone/index.tsx         |  15 +-
 src/lib/components/upload/UploadCard.tsx      |   5 +-
 .../components/delegations/RadioCard.tsx      |   2 +-
 .../publish-module/components/Footer.tsx      |   5 +-
 .../publish-module/components/PolicyCard.tsx  |  93 ++++---
 .../components/UploadModuleCard.tsx           |  31 ++-
 .../publish-module/components/accordions.tsx  | 101 ++++++++
 .../pages/publish-module/components/index.ts  |   4 +
 .../components/leaflet/index.tsx              | 189 ++++++++++++++
 .../components/leaflet/metadata.ts            |  69 ++++++
 .../components/leaflet/utils.ts               |  13 +
 src/lib/pages/publish-module/index.tsx        | 234 +++++-------------
 16 files changed, 561 insertions(+), 217 deletions(-)
 create mode 100644 src/lib/pages/publish-module/components/accordions.tsx
 create mode 100644 src/lib/pages/publish-module/components/index.ts
 create mode 100644 src/lib/pages/publish-module/components/leaflet/index.tsx
 create mode 100644 src/lib/pages/publish-module/components/leaflet/metadata.ts
 create mode 100644 src/lib/pages/publish-module/components/leaflet/utils.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecea46e24..34a421756 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#530](https://github.com/alleslabs/celatone-frontend/pull/530) Publish module component state wireup and add leaflet
 - [#515](https://github.com/alleslabs/celatone-frontend/pull/515) Initia select module drawer wireup
 - [#494](https://github.com/alleslabs/celatone-frontend/pull/494) Initia select module drawer UI
 - [#490](https://github.com/alleslabs/celatone-frontend/pull/490) Add initia module interaction page
diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index 6a352aaf2..ee866aeb6 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -21,6 +21,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
       },
       move: {
         enabled: true,
+        moduleMaxFileSize: 1_048_576,
       },
       pool: {
         enabled: false,
diff --git a/src/config/chain/types.ts b/src/config/chain/types.ts
index 17049c659..556c2a176 100644
--- a/src/config/chain/types.ts
+++ b/src/config/chain/types.ts
@@ -17,7 +17,9 @@ type WasmConfig =
       enabled: false;
     };
 
-type MoveConfig = { enabled: boolean };
+type MoveConfig =
+  | { enabled: true; moduleMaxFileSize: number }
+  | { enabled: false };
 
 type PoolConfig =
   | {
diff --git a/src/lib/components/dropzone/config.ts b/src/lib/components/dropzone/config.ts
index db33479f8..7ecabf445 100644
--- a/src/lib/components/dropzone/config.ts
+++ b/src/lib/components/dropzone/config.ts
@@ -1,6 +1,6 @@
 import type { Accept } from "react-dropzone";
 
-export type DropzoneFileType = "wasm" | "schema";
+export type DropzoneFileType = "wasm" | "schema" | "move";
 
 interface DropzoneConfig {
   accept: Accept;
@@ -12,7 +12,7 @@ interface DropzoneConfig {
 
 export const DROPZONE_CONFIG: { [key in DropzoneFileType]: DropzoneConfig } = {
   wasm: {
-    accept: { "application/wasm": [".wasm"] },
+    accept: { "application/octet-stream": [".wasm"] },
     text: {
       prettyFileType: "Wasm",
       rawFileType: ".wasm",
@@ -25,4 +25,11 @@ export const DROPZONE_CONFIG: { [key in DropzoneFileType]: DropzoneConfig } = {
       rawFileType: ".json",
     },
   },
+  move: {
+    accept: { "application/octet-stream": [".mv"] },
+    text: {
+      prettyFileType: ".mv",
+      rawFileType: ".mv",
+    },
+  },
 };
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index deeefb35c..69d72c490 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -1,16 +1,15 @@
+import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
-import type { DetailedHTMLProps, HTMLAttributes } from "react";
 import { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 
 import { UploadIcon } from "../icon";
-import { useWasmConfig } from "lib/app-provider";
+import { useMoveConfig, useWasmConfig } from "lib/app-provider";
 
 import type { DropzoneFileType } from "./config";
 import { DROPZONE_CONFIG } from "./config";
 
-interface DropZoneProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface DropZoneProps extends FlexProps {
   setFile: (file: File) => void;
   fileType: DropzoneFileType;
 }
@@ -21,6 +20,7 @@ export function DropZone({
   ...componentProps
 }: DropZoneProps) {
   const wasm = useWasmConfig({ shouldRedirect: false });
+  const move = useMoveConfig({ shouldRedirect: false });
   const onDrop = useCallback(
     (file: File[]) => {
       setFile(file[0]);
@@ -31,14 +31,17 @@ export function DropZone({
   const config = DROPZONE_CONFIG[fileType];
 
   // Throwing error when wasm is disabled will cause the page to not redirect, so default value is assigned instead
-  const maxSize = wasm.enabled ? wasm.storeCodeMaxFileSize : 0;
+  const maxSize = (() => {
+    if (wasm.enabled) return wasm.storeCodeMaxFileSize;
+    return move.enabled ? move.moduleMaxFileSize : 0;
+  })();
 
   // TODO: JSON Schema file size ??
   const { getRootProps, getInputProps, fileRejections } = useDropzone({
     onDrop,
     maxFiles: 1,
     accept: config.accept,
-    maxSize: fileType === "wasm" ? maxSize : undefined,
+    maxSize,
   });
 
   return (
diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx
index 8e25e0a78..7c62eaaed 100644
--- a/src/lib/components/upload/UploadCard.tsx
+++ b/src/lib/components/upload/UploadCard.tsx
@@ -54,7 +54,10 @@ export const UploadCard = ({
           <Flex direction="column">
             <Text variant="body1">{file.name}</Text>
             <Text variant="body2" color="text.dark" display="flex" gap="4px">
-              {big(file.size).div(1000).toFixed(0)} KB
+              {big(file.size)
+                .div(1000)
+                .toFixed(file.size > 1000 ? 0 : undefined)}{" "}
+              KB
             </Text>
           </Flex>
         </Flex>
diff --git a/src/lib/pages/account-details/components/delegations/RadioCard.tsx b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
index d347e8445..f7696795a 100644
--- a/src/lib/pages/account-details/components/delegations/RadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
@@ -22,7 +22,7 @@ export const RadioCard = ({
 }: RadioCardProps) => {
   const token = total?.[defaultToken.denom] ?? defaultToken;
   return (
-    <Radio variant="card" value={value} overflowX="hidden">
+    <Radio variant="card-primary" value={value} overflowX="hidden">
       <Flex alignItems="center" gap={2} justifyContent="space-between">
         <Flex direction="column" gap={1}>
           <Text variant="body2" textColor="gray.400" fontWeight={500}>
diff --git a/src/lib/pages/publish-module/components/Footer.tsx b/src/lib/pages/publish-module/components/Footer.tsx
index 8f8694a84..fb1db3ae6 100644
--- a/src/lib/pages/publish-module/components/Footer.tsx
+++ b/src/lib/pages/publish-module/components/Footer.tsx
@@ -16,11 +16,12 @@ export const Footer = ({ isLoading = false, fieldAmount }: FooterProps) => {
       px={12}
       bg="gray.900"
       h="70px"
-      bottom="0"
+      bottom={0}
       position="sticky"
       zIndex={2}
       templateAreas={`"prespace main postspace"`}
-      templateColumns="1fr 5fr 4fr"
+      templateColumns="1fr 4fr 2fr"
+      gap="48px"
     >
       <GridItem area="main">
         <Flex flex="5" align="center" justify="space-between" h="full" w="full">
diff --git a/src/lib/pages/publish-module/components/PolicyCard.tsx b/src/lib/pages/publish-module/components/PolicyCard.tsx
index c50786031..ea98f2158 100644
--- a/src/lib/pages/publish-module/components/PolicyCard.tsx
+++ b/src/lib/pages/publish-module/components/PolicyCard.tsx
@@ -1,46 +1,77 @@
-import { Flex, Radio, Text, Heading, Spinner } from "@chakra-ui/react";
+import type { FlexProps } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+
+import type { UpgradePolicy } from "lib/types";
+
+import { Leaflet } from "./leaflet";
+
+interface RadioCardProps extends FlexProps {
+  checked: boolean;
+}
+
+const RadioCard = ({ checked, children, ...props }: RadioCardProps) => (
+  <Flex
+    w="full"
+    p="12px 16px"
+    gap={4}
+    border="2px solid"
+    borderRadius="12px"
+    borderColor={checked ? "text.main" : "gray.700"}
+    bgColor={checked ? "gray.700" : "gray.900"}
+    overflowX="scroll"
+    alignItems="center"
+    cursor="pointer"
+    {...props}
+  >
+    <Flex
+      w="18px"
+      h="18px"
+      flexShrink={0}
+      borderRadius="50%"
+      border="2px solid"
+      borderColor={checked ? "text.main" : "text.dark"}
+      align="center"
+      justify="center"
+    >
+      {checked && (
+        <Box w="9px" h="9px" bgColor="text.main" borderRadius="50%" />
+      )}
+    </Flex>
+    {children}
+  </Flex>
+);
 
 interface PolicyCardProps {
-  value: string;
+  value: UpgradePolicy;
+  selected: UpgradePolicy;
   description: string;
-  // total: Option<Record<string, TokenWithValue>>;
-  // defaultToken: TokenWithValue;
   hasCondition?: boolean;
-  isLoading: boolean;
+  onSelect: () => void;
 }
 
 export const PolicyCard = ({
   value,
+  selected,
   description,
-  isLoading,
   hasCondition = false,
+  onSelect,
 }: PolicyCardProps) => {
+  const isChecked = value === selected;
   return (
-    <Radio variant="card" value={value} overflowX="hidden">
-      <Flex direction="column" gap={1} py={1}>
-        {isLoading ? (
-          <Spinner mt={2} alignSelf="center" size="xl" />
-        ) : (
-          <Flex flexDirection="column">
-            <Heading
-              variant="h6"
-              as="h6"
-              fontWeight={600}
-              textTransform="capitalize"
-            >
-              {value}
-            </Heading>
-            <Text variant="body2" textColor="text.dark" mt={1}>
-              {description}
-              {hasCondition && (
-                <Text ml={1} as="span" variant="body2" textColor="primary.main">
-                  View conditions
-                </Text>
-              )}
-            </Text>
-          </Flex>
-        )}
+    <RadioCard onClick={onSelect} checked={isChecked}>
+      <Flex flexDirection="column">
+        <Text
+          variant="body1"
+          textTransform="lowercase"
+          sx={{ "&:first-letter": { textTransform: "uppercase" } }}
+        >
+          {value}
+        </Text>
+        <Text variant="body2" textColor="text.dark" fontWeight={600}>
+          {description}
+          {hasCondition && <Leaflet />}
+        </Text>
       </Flex>
-    </Radio>
+    </RadioCard>
   );
 };
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 7dff22c2b..880953a42 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -1,16 +1,26 @@
 import { Flex, Heading, IconButton, Text } from "@chakra-ui/react";
 
+import { DropZone } from "lib/components/dropzone";
 import { CustomIcon } from "lib/components/icon";
+import { UploadCard } from "lib/components/upload/UploadCard";
+import type { Option } from "lib/types";
 
 interface UploadModuleCardProps {
   index: number;
-  remove: () => void;
+  file: Option<File>;
   fieldAmount: number;
+  setFile: (file: File, modulePath: string) => void;
+  removeFile: () => void;
+  removeEntry: () => void;
 }
+
 export const UploadModuleCard = ({
   index,
-  remove,
+  file,
   fieldAmount,
+  setFile,
+  removeFile,
+  removeEntry,
 }: UploadModuleCardProps) => {
   return (
     <Flex
@@ -27,7 +37,7 @@ export const UploadModuleCard = ({
           Module {index + 1}
         </Heading>
         <IconButton
-          onClick={remove}
+          onClick={removeEntry}
           aria-label="remove"
           variant="ghost"
           size="sm"
@@ -36,10 +46,19 @@ export const UploadModuleCard = ({
           <CustomIcon name="close" color="gray.600" />
         </IconButton>
       </Flex>
-      {/* UPLOAD CARD */}
-      add upload card here
+      {file ? (
+        <UploadCard file={file} deleteFile={removeFile} theme="secondary" />
+      ) : (
+        // TODO: Retrieve module path
+        <DropZone
+          setFile={(target) => setFile(target, "")}
+          fileType="move"
+          bgColor="background.main"
+          _hover={undefined}
+        />
+      )}
       <Flex justifyContent="space-between" w="full">
-        <Text variant="body2" color="text.dark">
+        <Text variant="body2" color="text.dark" fontWeight={600}>
           Module Path
         </Text>
         <Text variant="body2" color="text.dark">
diff --git a/src/lib/pages/publish-module/components/accordions.tsx b/src/lib/pages/publish-module/components/accordions.tsx
new file mode 100644
index 000000000..74b3fa9e1
--- /dev/null
+++ b/src/lib/pages/publish-module/components/accordions.tsx
@@ -0,0 +1,101 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel,
+  Text,
+  Button,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+export const UploadAccordion = () => (
+  <Accordion allowToggle defaultIndex={[0]} variant="transparent">
+    <AccordionItem borderTop="none" borderColor="gray.700">
+      <AccordionButton py={3} px={0}>
+        <Text
+          variant="body2"
+          fontWeight={700}
+          color="text.main"
+          textAlign="start"
+        >
+          What should I provide in my .mv files?
+        </Text>
+        <AccordionIcon color="gray.600" ml="auto" />
+      </AccordionButton>
+      <AccordionPanel
+        bg="transparent"
+        py={3}
+        px={0}
+        borderTop="1px solid"
+        borderColor="gray.700"
+      >
+        <Text variant="body2" color="text.dark" p={1}>
+          Your .mv files should consist of module name, available functions and
+          their properties, module mechanics, friends.
+        </Text>
+      </AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+export const PolicyAccordion = ({ chainName }: { chainName: string }) => (
+  <Accordion
+    position="relative"
+    allowToggle
+    defaultIndex={[0]}
+    variant="transparent"
+  >
+    <AccordionItem borderTop="none" borderColor="gray.700">
+      <AccordionButton py={3} px={0}>
+        <Text
+          variant="body2"
+          fontWeight={700}
+          color="text.main"
+          textAlign="start"
+        >
+          What is republishing module?
+        </Text>
+        <AccordionIcon color="gray.600" ml="auto" />
+      </AccordionButton>
+      <AccordionPanel
+        bg="transparent"
+        py={3}
+        px={0}
+        borderTop="1px solid"
+        borderColor="gray.700"
+      >
+        <Text variant="body2" color="text.dark" p={1}>
+          In {chainName}, You can republish the module which serve the purpose
+          to migrate or upgrade the published module by uploading new .mv file
+          with similar configurations.
+          <br />
+          <br />
+          Each policy will provide different flexibility for further upgrades
+          whether you can add new functions without maintaining old functions
+          (Arbitrary), or required to maintain old functions (Compatible).
+          <br />
+          <br />
+          Choosing “Immutable” will not allow you to make any changes with this
+          module ever.
+        </Text>
+        <Button
+          variant="ghost-secondary"
+          size="sm"
+          px="1 !important"
+          rightIcon={
+            <CustomIcon
+              name="chevron-right"
+              color="secondary.main"
+              boxSize={3}
+              m={0}
+            />
+          }
+        >
+          See Initia Doc
+        </Button>
+      </AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
diff --git a/src/lib/pages/publish-module/components/index.ts b/src/lib/pages/publish-module/components/index.ts
new file mode 100644
index 000000000..9c15bd86a
--- /dev/null
+++ b/src/lib/pages/publish-module/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./Footer";
+export * from "./PolicyCard";
+export * from "./UploadModuleCard";
+export * from "./accordions";
diff --git a/src/lib/pages/publish-module/components/leaflet/index.tsx b/src/lib/pages/publish-module/components/leaflet/index.tsx
new file mode 100644
index 000000000..fea09caf9
--- /dev/null
+++ b/src/lib/pages/publish-module/components/leaflet/index.tsx
@@ -0,0 +1,189 @@
+import type { GridItemProps } from "@chakra-ui/react";
+import {
+  Button,
+  ModalFooter,
+  Modal,
+  ModalBody,
+  useDisclosure,
+  Text,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+  ModalHeader,
+  Flex,
+  Heading,
+  chakra,
+  Grid,
+  GridItem,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+import { metadata } from "./metadata";
+
+const TitleContainer = chakra(Flex, {
+  baseStyle: {
+    bg: "gray.700",
+    fontSize: "14px",
+    color: "text.main",
+    fontWeight: 600,
+    p: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    wordBreak: "break-all",
+    whiteSpace: "pre",
+  },
+});
+
+const ContentContainer = (props: GridItemProps) => (
+  <GridItem
+    sx={{
+      backgroundColor: "gray.900",
+      color: "text.main",
+      whiteSpace: "pre-wrap",
+      p: "12px 16px",
+      fontSize: "14px",
+      height: "full",
+    }}
+    {...props}
+  />
+);
+
+const GridTemplate = chakra(Grid, {
+  baseStyle: {
+    gridTemplateColumns: "140px repeat(3, 1fr)",
+    columnGap: "2px",
+    rowGap: "4px",
+  },
+});
+
+const Header = () => (
+  <>
+    {metadata.header.map((header) => (
+      <TitleContainer key={header}>{header}</TitleContainer>
+    ))}
+  </>
+);
+
+const columnMapper = (col: string[]) => (
+  <Flex key={JSON.stringify(col)} direction="column" gap="2px">
+    {col.map((row) => (
+      <ContentContainer key={row} dangerouslySetInnerHTML={{ __html: row }} />
+    ))}
+  </Flex>
+);
+
+const StructContent = () => (
+  <>
+    <TitleContainer>fields</TitleContainer>
+    {metadata.fields.map(columnMapper)}
+  </>
+);
+
+const ExposedFnsContent = () => (
+  <>
+    <TitleContainer>visibility</TitleContainer>
+    {metadata.visibility.map(columnMapper)}
+    <TitleContainer>is_entry</TitleContainer>
+    {metadata.is_entry.map(columnMapper)}
+    <TitleContainer>parameter</TitleContainer>
+    <ContentContainer colSpan={3}>{metadata.parameter}</ContentContainer>
+    <TitleContainer>generic_type_{"\n"}params</TitleContainer>
+    <GridItem
+      colSpan={3}
+      display="grid"
+      gridTemplateColumns="repeat(3, minmax(0, 1fr))"
+      gap="2px"
+    >
+      <ContentContainer colSpan={3}>
+        {metadata.generic_type_params[0]}
+      </ContentContainer>
+      {metadata.generic_type_params[1].map((title) => (
+        <TitleContainer key={title.toString()}>{title}</TitleContainer>
+      ))}
+      {(metadata.generic_type_params[2] as Array<string[]>).map(columnMapper)}
+    </GridItem>
+  </>
+);
+export const Leaflet = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <Text
+        ml={1}
+        as="span"
+        variant="body2"
+        textColor="primary.main"
+        fontWeight={600}
+        cursor="pointer"
+        _hover={{ textDecoration: "underline" }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpen();
+        }}
+      >
+        View conditions
+      </Text>
+      <Modal isOpen={isOpen} onClose={onClose} size="6xl">
+        <ModalOverlay />
+        <ModalContent
+          maxH="90%"
+          overflowY="scroll"
+          sx={{ "& > *": { bg: "gray.800" } }}
+        >
+          <ModalHeader position="sticky" top={0}>
+            <Flex align="center" gap={2}>
+              <CustomIcon name="info-circle" boxSize={4} color="gray.600" />
+              <Heading variant="h5" as="h5">
+                Compatible Upgrade Policy
+              </Heading>
+            </Flex>
+            <ModalCloseButton color="gray.600" />
+          </ModalHeader>
+          <ModalBody>
+            <Heading variant="h6" as="h6">
+              Structs
+            </Heading>
+            <Text variant="body2" my={3}>
+              New structs can be added, but all old structs must remain a subset
+              of republished module. New fields cannot be added within structs,
+              but current fields can be removed. Example for struct fields are
+              displayed below
+            </Text>
+            <GridTemplate>
+              <Header />
+              <StructContent />
+            </GridTemplate>
+            <Heading variant="h6" as="h6" mt={6}>
+              Exposed Functions
+            </Heading>
+            <Text variant="body2" my={3}>
+              New functions can be added, but all old functions must remain a
+              subset of republished module. Example for exposed_functions
+              properties changes are displayed below
+            </Text>
+            <GridTemplate>
+              <Header />
+              <ExposedFnsContent />
+            </GridTemplate>
+            <Heading variant="h6" as="h6" mt={6}>
+              Friends
+            </Heading>
+            <Text variant="body2" my={3}>
+              <Text as="span" mx={2}>
+                &#x2022;
+              </Text>
+              New friends can be added, but must maintain all the current
+              friends.
+            </Text>
+          </ModalBody>
+          <ModalFooter justifyContent="center" position="sticky" bottom={0}>
+            <Button variant="outline-white" onClick={onClose} w="240px">
+              Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/lib/pages/publish-module/components/leaflet/metadata.ts b/src/lib/pages/publish-module/components/leaflet/metadata.ts
new file mode 100644
index 000000000..2dc061e64
--- /dev/null
+++ b/src/lib/pages/publish-module/components/leaflet/metadata.ts
@@ -0,0 +1,69 @@
+import { structToString } from "./utils";
+
+const indent = " ".repeat(4);
+
+export const metadata = {
+  header: ["Example", "Published module", "Able to do", "Unable to do"],
+  fields: [
+    [
+      structToString({
+        a: "u64",
+        b: "bool,",
+      }),
+    ],
+    [
+      structToString({
+        a: "u64, // remove old field",
+      }),
+      structToString({
+        a: "u64",
+        b: "bool, // remain the same",
+      }),
+    ],
+    [
+      structToString({
+        a: "u64",
+        b: "<span style='font-weight: 700;'>u64</span>, // cannot change type",
+      }),
+      structToString({
+        a: "u64",
+        b: "bool",
+        c: "<span style='font-weight: 700;'>bool</span>, // cannot add new field",
+      }),
+    ],
+  ],
+  visibility: [
+    ["’public’ or ’script’", "’friend’", "’private’"],
+    [
+      "same as current value",
+      "Can be changed to ‘public’ or maintain as ‘friend’",
+      "Can be changed to any value",
+    ],
+    ["change to new value", "Change to script", "-"],
+  ],
+  is_entry: [
+    ["’true’", "’false’"],
+    ["must remain ’true’", "Can be changed to ’true’ or maintain as ’false’"],
+    ["Change to ’false’", "Can be changed to ’true’ or maintain as ’false’"],
+  ],
+  parameter: ["Ensure the old parameters remain unchanged"],
+  generic_type_params: [
+    [
+      "Abilities can be retained or removed, but adding new ones is not allowed. Example below.",
+    ],
+    ["Example", "Can be", "Cannot be"],
+    [
+      [
+        `public fun example_function&lt;T0: store + drop, T1: store&gt;(...): ... { \n${indent}... \n }`,
+      ],
+      [
+        `public fun example_function&lt;T0: store + drop, T1: store&gt;(...): ... { \n${indent}... <span style='color: #B7B7B7;'>// can remain same</span> \n}`,
+        `public fun example_function&lt;T0, T1: store&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// ability can be removed</span>\n}`,
+      ],
+      [
+        `public fun example_function&lt;T0: store + drop + copy, T1: store&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// cannot add new ability</span>\n}`,
+        `public fun example_function&lt;T0: store + drop&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// T1 cannot be removed</span>\n}`,
+      ],
+    ],
+  ],
+};
diff --git a/src/lib/pages/publish-module/components/leaflet/utils.ts b/src/lib/pages/publish-module/components/leaflet/utils.ts
new file mode 100644
index 000000000..22677d155
--- /dev/null
+++ b/src/lib/pages/publish-module/components/leaflet/utils.ts
@@ -0,0 +1,13 @@
+export const structToString = (obj: Record<string, string>, indent = 4) => {
+  const spacing = " ".repeat(indent);
+  const keys = Object.keys(obj);
+  const keyValuePairs = keys.map((key) => {
+    const value = obj[key];
+    const [val, comment] = value.split("//");
+    const commentRender = comment
+      ? ` <span style='color: #B7B7B7;'>// ${comment.trim()}</span>`
+      : "";
+    return `${spacing}${key}: ${val.trim()}${commentRender}`;
+  });
+  return `struct ExampleStruct {\n${keyValuePairs.join(",\n")}\n}`;
+};
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 72cd0155e..bf4899954 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -1,62 +1,63 @@
-import {
-  Text,
-  Grid,
-  GridItem,
-  Heading,
-  Box,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionIcon,
-  AccordionPanel,
-  Flex,
-  Button,
-} from "@chakra-ui/react";
+import { Text, Grid, GridItem, Heading, Flex, Button } from "@chakra-ui/react";
 import { useFieldArray, useForm } from "react-hook-form";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useMoveConfig } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
+import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { CustomIcon } from "lib/components/icon";
+import PageContainer from "lib/components/PageContainer";
+import type { Option } from "lib/types";
+import { UpgradePolicy } from "lib/types";
 
-import { Footer } from "./components/Footer";
-import { PolicyCard } from "./components/PolicyCard";
-import { UploadModuleCard } from "./components/UploadModuleCard";
+import {
+  PolicyAccordion,
+  UploadAccordion,
+  Footer,
+  PolicyCard,
+  UploadModuleCard,
+} from "./components";
 
 interface Module {
-  file: string;
+  file: Option<File>;
   path: string;
 }
+
 interface PublishModuleState {
-  modules: { module: Module }[];
+  modules: Module[];
+  upgradePolicy: UpgradePolicy;
 }
 
+const emptyModule: Module = { file: undefined, path: "" };
+
 const policies = [
   {
-    value: "arbitrary",
+    value: UpgradePolicy.ARBITRARY,
     description: "You can publish these modules again without any restrictions",
     condition: false,
   },
   {
-    value: "compatible",
+    value: UpgradePolicy.COMPATIBLE,
     description:
       "This address can publish these modules again but need to maintain several properties.",
     condition: true,
   },
   {
-    value: "immutable",
+    value: UpgradePolicy.IMMUTABLE,
     description: "You cannot publish these modules again with this address",
     condition: false,
   },
 ];
 
 const defaultValues: PublishModuleState = {
-  modules: [{ module: { file: "", path: "" } }],
+  modules: [emptyModule],
+  upgradePolicy: UpgradePolicy.ARBITRARY,
 };
 
 export const PublishModule = () => {
   const {
     chainConfig: { prettyName: chainPrettyName },
   } = useCelatoneApp();
+  useMoveConfig({ shouldRedirect: true });
 
   const PUBLISH_MODULE_TEXT = {
     header: "Publish new module",
@@ -66,28 +67,34 @@ export const PublishModule = () => {
     connectWallet: "You need to connect wallet to proceed this action",
   };
 
-  const { control } = useForm<PublishModuleState>({
+  const { control, setValue, watch } = useForm<PublishModuleState>({
     defaultValues,
   });
 
-  const { fields, append, remove } = useFieldArray({
+  const { upgradePolicy } = watch();
+
+  const { fields, append, remove, update } = useFieldArray({
     control,
     name: "modules",
   });
 
-  // TODO: revisit sticky and grid
   return (
     <>
-      <Box as="main" p={{ base: "16px", md: "48px" }} minH="inherit">
+      <PageContainer>
         <Grid
-          templateAreas={`"prespace main postspace"`}
-          templateColumns="1fr 5fr 4fr"
+          templateAreas={`
+          "prespace header postspace"
+          "prespace upload upload-accordion"
+          "prespace policy policy-accordion"
+          `}
+          templateColumns="1fr 4fr 2fr"
+          gap="48px"
         >
-          <GridItem area="main">
-            <Heading as="h5" variant="h5">
+          <GridItem area="header">
+            <Heading as="h5" variant="h5" textAlign="center">
               {PUBLISH_MODULE_TEXT.header}
             </Heading>
-            <Text color="text.dark" pt={4}>
+            <Text color="text.dark" pt={4} textAlign="center">
               {PUBLISH_MODULE_TEXT.description}
             </Text>
             <ConnectWalletAlert
@@ -95,86 +102,54 @@ export const PublishModule = () => {
               mt={12}
             />
           </GridItem>
-        </Grid>
-        <Flex position="relative" mt={12}>
-          <Box w="10%" />
-          <Box w="50%">
+          <GridItem area="upload">
             <Heading as="h6" variant="h6" fontWeight={600}>
               Upload .mv files(s)
             </Heading>
             <Flex gap={6} flexDirection="column" my={6}>
               {fields.map((field, idx) => (
                 <UploadModuleCard
+                  key={field.id}
                   index={idx}
                   fieldAmount={fields.length}
-                  remove={() => remove(idx)}
+                  file={field.file}
+                  setFile={(file: File, modulePath: string) => {
+                    update(idx, { file, path: modulePath });
+                  }}
+                  removeFile={() => {
+                    update(idx, emptyModule);
+                  }}
+                  removeEntry={() => remove(idx)}
                 />
               ))}
             </Flex>
             <Button
-              onClick={() => append({ module: { file: "", path: "" } })}
+              onClick={() => append(emptyModule)}
               leftIcon={<CustomIcon name="add-new" />}
               variant="ghost-primary"
               p="0 4px"
             >
               Publish More Modules
             </Button>
-          </Box>
-          <Box w="30%" position="relative" pl={12}>
-            <Box position="sticky" top={0}>
-              <Accordion
-                position="relative"
-                allowToggle
-                width={96}
-                defaultIndex={[0]}
-                variant="transparent"
-              >
-                <AccordionItem borderTop="none" borderColor="gray.700">
-                  <AccordionButton py={3} px={0}>
-                    <Text
-                      variant="body2"
-                      fontWeight={700}
-                      color="text.main"
-                      textAlign="start"
-                    >
-                      What should I provide in my .mv files?
-                    </Text>
-                    <AccordionIcon color="gray.600" ml="auto" />
-                  </AccordionButton>
-                  <AccordionPanel
-                    bg="transparent"
-                    py={3}
-                    px={0}
-                    borderTop="1px solid"
-                    borderColor="gray.700"
-                  >
-                    <Text variant="body2" color="text.dark" p={1}>
-                      Your .mv files should consist of module name, available
-                      functions and their properties, module mechanics, friends.
-                    </Text>
-                  </AccordionPanel>
-                </AccordionItem>
-              </Accordion>
-            </Box>
-          </Box>
-          <Box w="10%" />
-        </Flex>
-        {/* Upgrade Policy */}
-        <Flex position="relative" mt={12}>
-          <Box w="10%" />
-          <Box w="50%">
+          </GridItem>
+          <GridItem area="upload-accordion">
+            <UploadAccordion />
+          </GridItem>
+          <GridItem area="policy">
             <Heading as="h6" variant="h6" fontWeight={600}>
               Upgrade Policy
             </Heading>
             <Text color="text.dark" variant="body2" mt={2}>
               Specify how publishing modules will be able to republish.
             </Text>
-            <Flex flexDirection="column" gap={2} my={4}>
+            <Flex direction="column" gap={2} my={4}>
               {policies.map((item) => (
                 <PolicyCard
+                  key={item.value}
                   value={item.value}
+                  selected={upgradePolicy}
+                  onSelect={() => setValue("upgradePolicy", item.value)}
                   description={item.description}
-                  isLoading={false}
                   hasCondition={item.condition}
                 />
               ))}
@@ -192,89 +167,14 @@ export const PublishModule = () => {
               gap={1}
             >
               <p>Transaction Fee:</p>
-              {/* <EstimatedFeeRender
-              estimatedFee={estimatedFee}
-              loading={isSimulating}
-            /> */}
+              <EstimatedFeeRender estimatedFee={undefined} loading={false} />
             </Flex>
-          </Box>
-          <Box w="30%" position="relative" pl={12}>
-            <Box position="sticky" top={0}>
-              <Accordion
-                position="relative"
-                allowToggle
-                width={96}
-                defaultIndex={[0]}
-                variant="transparent"
-              >
-                <AccordionItem borderTop="none" borderColor="gray.700">
-                  <AccordionButton py={3} px={0}>
-                    <Text
-                      variant="body2"
-                      fontWeight={700}
-                      color="text.main"
-                      textAlign="start"
-                    >
-                      What is republishing module?
-                    </Text>
-                    <AccordionIcon color="gray.600" ml="auto" />
-                  </AccordionButton>
-                  <AccordionPanel
-                    bg="transparent"
-                    py={3}
-                    px={0}
-                    borderTop="1px solid"
-                    borderColor="gray.700"
-                  >
-                    <Text variant="body2" color="text.dark" p={1}>
-                      In {chainPrettyName}, You can republish the module which
-                      serve the purpose to migrate or upgrade the published
-                      module by uploading new .mv file with similar
-                      configurations. Each policy will provide different
-                      flexibility for further upgrades whether you can add new
-                      functions without maintaining old functions (Arbitrary),
-                      or required to maintain old functions (Compatible).
-                      Choosing “Immutable” will not allow you to make any
-                      changes with this module ever. You should read more about
-                    </Text>
-                    <Flex
-                      align="center"
-                      cursor="pointer"
-                      borderRadius={4}
-                      p={1}
-                      gap={1}
-                      alignItems="center"
-                      width="fit-content"
-                      transition="all 0.25s ease-in-out"
-                      color="secondary.main"
-                      _hover={{
-                        color: "secondary.light",
-                        bgColor: "secondary.background",
-                      }}
-                      // onClick={onClick}
-                    >
-                      <Text
-                        variant="body3"
-                        color="secondary.main"
-                        fontWeight={700}
-                      >
-                        See Initia Doc
-                      </Text>
-                      <CustomIcon
-                        name="chevron-right"
-                        color="secondary.main"
-                        boxSize={3}
-                        m={0}
-                      />
-                    </Flex>
-                  </AccordionPanel>
-                </AccordionItem>
-              </Accordion>
-            </Box>
-          </Box>
-          <Box w="10%" />
-        </Flex>
-      </Box>
+          </GridItem>
+          <GridItem area="policy-accordion">
+            <PolicyAccordion chainName={chainPrettyName} />
+          </GridItem>
+        </Grid>
+      </PageContainer>
       <Footer isLoading={false} fieldAmount={fields.length} />
     </>
   );

From 19bfcc803b8e6ba156e28d739c4ea4cd7e46d25c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 15 Sep 2023 01:13:18 +0700
Subject: [PATCH 046/368] feat: complete abi form for supported types

---
 package.json                                  |   1 +
 src/lib/app-provider/hooks/useAddress.ts      |   2 +-
 src/lib/components/AddressInput.tsx           |   2 +-
 src/lib/components/OffChainForm.tsx           |   4 +-
 src/lib/components/abi/AbiForm.tsx            |  15 +-
 .../abi/args-form/field/ArgFieldWidget.tsx    |  88 ++++++++++
 .../components/abi/args-form/field/index.tsx  | 109 ++++++++++++
 .../components/abi/args-form/field/utils.ts   | 107 ++++++++++++
 .../abi/{param-form => args-form}/index.tsx   |  18 +-
 src/lib/components/abi/index.ts               |   2 +-
 .../components/abi/param-form/ParamField.tsx  |  53 ------
 .../TypeFieldInput.tsx                        |  12 +-
 .../abi/{type-form => types-form}/index.tsx   |  14 +-
 .../components/forms/ControllerTextarea.tsx   |   4 +-
 src/lib/components/forms/TextAreaInput.tsx    |   6 +-
 src/lib/components/forms/index.ts             |   2 +-
 src/lib/components/fund/selectFund.tsx        |   2 +-
 .../modal/code/CodeDetailsTemplate.tsx        |   2 +-
 src/lib/components/modal/code/SaveNewCode.tsx |   6 +-
 .../modal/contract/SaveNewContract.tsx        |   4 +-
 .../components/modal/list/CreateNewList.tsx   |   2 +-
 .../components/modal/list/EditListName.tsx    |   2 +-
 .../select-code/CodeSelectSection.tsx         |   2 +-
 .../select-contract/AllContractLists.tsx      |   2 +-
 .../select-contract/ContractListDetail.tsx    |   2 +-
 .../upload/InstantiatePermissionRadio.tsx     |   2 +-
 src/lib/components/upload/UploadSection.tsx   |   2 +-
 src/lib/pages/admin/index.tsx                 |   2 +-
 src/lib/pages/faucet/index.tsx                |   2 +-
 src/lib/pages/instantiate/instantiate.tsx     |   4 +-
 .../drawer/selector/SelectorInput.tsx         |   2 +-
 .../component/form/ExecuteArea.tsx            |   4 +-
 .../interaction/component/form/ViewArea.tsx   |  10 +-
 src/lib/pages/interaction/index.tsx           |   1 -
 src/lib/pages/proposal/store-code/index.tsx   |  12 +-
 src/lib/pages/proposal/whitelist/index.tsx    |   8 +-
 .../public-project/components/AllProject.tsx  |   2 +-
 .../account/PublicProjectAccountTable.tsx     |   2 +-
 .../table/code/PublicProjectCodeTable.tsx     |   2 +-
 .../contract/PublicProjectContractTable.tsx   |   2 +-
 src/lib/styles/theme/components/form.ts       |  95 +++++++----
 src/lib/types/abi.ts                          |   6 +
 src/lib/utils/abi.ts                          |  41 ++++-
 yarn.lock                                     | 157 ++++++++++++++++--
 44 files changed, 640 insertions(+), 179 deletions(-)
 create mode 100644 src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
 create mode 100644 src/lib/components/abi/args-form/field/index.tsx
 create mode 100644 src/lib/components/abi/args-form/field/utils.ts
 rename src/lib/components/abi/{param-form => args-form}/index.tsx (80%)
 delete mode 100644 src/lib/components/abi/param-form/ParamField.tsx
 rename src/lib/components/abi/{type-form => types-form}/TypeFieldInput.tsx (81%)
 rename src/lib/components/abi/{type-form => types-form}/index.tsx (80%)

diff --git a/package.json b/package.json
index 4094740c9..aee36c6b5 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@emotion/styled": "^11",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
+    "@initia/initia.js": "^0.1.8",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
     "@rjsf/utils": "v5.0.0-beta.10",
diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index b69e26a93..220475716 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -54,7 +54,7 @@ const validateAddress = (
   getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   if (!bech32Prefix)
-    return "Can not retrieve bech32 prefix of the current network.";
+    return "Cannot retrieve bech32 prefix of the current network.";
 
   const prefix = getPrefix(bech32Prefix, addressType);
 
diff --git a/src/lib/components/AddressInput.tsx b/src/lib/components/AddressInput.tsx
index 630be8527..21b2886f5 100644
--- a/src/lib/components/AddressInput.tsx
+++ b/src/lib/components/AddressInput.tsx
@@ -67,7 +67,7 @@ export const AddressInput = <T extends FieldValues>({
       label={label}
       placeholder={placeholder ?? exampleUserAddress}
       type="text"
-      variant="floating"
+      variant="fixed-floating"
       status={status}
       labelBgColor={labelBgColor}
       helperText={helperText}
diff --git a/src/lib/components/OffChainForm.tsx b/src/lib/components/OffChainForm.tsx
index 3e3e42607..a56a333d0 100644
--- a/src/lib/components/OffChainForm.tsx
+++ b/src/lib/components/OffChainForm.tsx
@@ -46,7 +46,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         label="Name"
         placeholder={contractLabel}
         helperText="Set name for your contract"
-        variant="floating"
+        variant="fixed-floating"
         rules={{
           maxLength: constants.maxContractNameLength,
         }}
@@ -60,7 +60,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         control={control}
         label="Description"
         placeholder="Help understanding what this contract do and how it works ..."
-        variant="floating"
+        variant="fixed-floating"
         rules={{
           maxLength: constants.maxContractDescriptionLength,
         }}
diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
index 7ec49f437..cce57b23e 100644
--- a/src/lib/components/abi/AbiForm.tsx
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -1,15 +1,10 @@
 import { Flex } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
-import type { ExposedFunction } from "lib/types";
+import type { AbiFormData, ExposedFunction } from "lib/types";
 
-import { ParamForm } from "./param-form";
-import { TypeForm } from "./type-form";
-
-export interface AbiFormData {
-  typeArgs: Record<string, string>;
-  args: Record<string, string>;
-}
+import { ArgsForm } from "./args-form";
+import { TypesForm } from "./types-form";
 
 interface AbiFormProps {
   fn: ExposedFunction;
@@ -33,7 +28,7 @@ export const AbiForm = ({
   return (
     <Flex direction="column" gap={4}>
       {Object.keys(typeArgs).length > 0 && (
-        <TypeForm
+        <TypesForm
           genericTypeParams={fn.generic_type_params}
           initialData={typeArgs}
           propsOnChange={(value) => {
@@ -43,7 +38,7 @@ export const AbiForm = ({
         />
       )}
       {Object.keys(args).length > 0 && (
-        <ParamForm
+        <ArgsForm
           params={fn.params}
           initialData={args}
           propsOnChange={(value) => {
diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
new file mode 100644
index 000000000..aa5446e0d
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -0,0 +1,88 @@
+import { Input, Textarea } from "@chakra-ui/react";
+import { Select } from "chakra-react-select";
+import type { ControllerRenderProps } from "react-hook-form";
+
+import type { Option } from "lib/types";
+
+import { UintTypes } from "./utils";
+
+const getInputPlaceholder = (type: string, isNull: boolean) => {
+  if (type === "0x1::string::String" && !isNull)
+    return "Left blank to send as empty string";
+  if (type === "&signer") return "Signer is auto-filled when signing a tx";
+  return " ";
+};
+
+const boolOptions = [
+  { label: "True", value: "true" },
+  { label: "False", value: "false" },
+];
+
+interface ArgFieldWidgetProps {
+  type: string;
+  watcher: Option<string>;
+  onChange: ControllerRenderProps["onChange"];
+}
+
+export const ArgFieldWidget = ({
+  type,
+  watcher,
+  onChange,
+}: ArgFieldWidgetProps) => {
+  if (
+    UintTypes.includes(type) ||
+    type === "address" ||
+    type === "0x1::string::String" ||
+    type === "&signer"
+  )
+    return (
+      <Input
+        size="md"
+        placeholder={getInputPlaceholder(type, watcher === undefined)}
+        value={watcher ?? ""}
+        onChange={onChange}
+      />
+    );
+
+  if (type === "bool")
+    return (
+      <Select
+        classNamePrefix="chakra-react-select"
+        size="md"
+        options={boolOptions}
+        value={boolOptions.find(({ value }) => value === watcher)}
+        onChange={(e) => onChange(e?.value)}
+        menuPosition="fixed"
+        chakraStyles={{
+          control: (provided) => ({
+            ...provided,
+            _disabled: {
+              color: "text.main",
+            },
+          }),
+          dropdownIndicator: (provided, state) => ({
+            ...provided,
+            color: state.isDisabled ? "gray.700" : undefined,
+          }),
+          option: (provided, state) => ({
+            ...provided,
+            bg: state.isSelected ? "gray.800" : undefined,
+            color: "text.main",
+            _hover: {
+              bg: "gray.700",
+            },
+          }),
+        }}
+      />
+    );
+
+  return (
+    <Textarea
+      minH="112px"
+      h="fit-content"
+      placeholder={" "}
+      value={watcher ?? ""}
+      onChange={onChange}
+    />
+  );
+};
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
new file mode 100644
index 000000000..dee1c2f7f
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -0,0 +1,109 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import {
+  Box,
+  Checkbox,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Text,
+} from "@chakra-ui/react";
+import { useCallback } from "react";
+import { useWatch, type Control, useController } from "react-hook-form";
+
+import { useValidateAddress } from "lib/app-provider";
+import type { AbiFormData } from "lib/types";
+
+import { ArgFieldWidget } from "./ArgFieldWidget";
+import { getRules } from "./utils";
+
+interface ArgFieldTemplateProps {
+  index: number;
+  param: string;
+  control: Control<AbiFormData["args"]>;
+  error?: string;
+  isReadOnly?: boolean;
+}
+
+export const ArgFieldTemplate = ({
+  index,
+  param,
+  control,
+  error,
+  isReadOnly = false,
+}: ArgFieldTemplateProps) => {
+  const { validateUserAddress, validateContractAddress, validateHexAddress } =
+    useValidateAddress();
+
+  const isValidArgAddress = useCallback(
+    (input: string) =>
+      validateUserAddress(input) === null ||
+      validateContractAddress(input) === null ||
+      validateHexAddress(input),
+    [validateContractAddress, validateHexAddress, validateUserAddress]
+  );
+
+  const isOptional = param.startsWith("0x1::option::Option");
+  const type = isOptional ? param.split(/<(.*)>/)[1] : param;
+  const rules = getRules(type, isOptional, isReadOnly, isValidArgAddress);
+
+  const name = `${index}`;
+  const watcher = useWatch({
+    name,
+    control,
+  });
+  const {
+    field,
+    fieldState: { isTouched },
+  } = useController({
+    name,
+    control,
+    rules,
+  });
+  const isError = isTouched && !!error;
+
+  const size = "md";
+  const isSigner = type === "&signer";
+  const isNull = watcher === undefined;
+  return (
+    <Box>
+      <FormControl
+        className={`${size}-form`}
+        variant={
+          isSigner || (type === "0x1::string::String" && !isNull)
+            ? "fixed-floating"
+            : "floating"
+        }
+        size="md"
+        isInvalid={isError}
+        isReadOnly={isReadOnly}
+        isDisabled={(isSigner && !isReadOnly) || isNull}
+        {...field}
+      >
+        <ArgFieldWidget
+          type={type}
+          watcher={watcher}
+          onChange={field.onChange}
+        />
+        <FormLabel className={`${size}-label`} bgColor="background.main">
+          {param}
+        </FormLabel>
+
+        {isError && (
+          <FormErrorMessage className="error-text" mt={1}>
+            {error}
+          </FormErrorMessage>
+        )}
+      </FormControl>
+      {isOptional && (
+        <Checkbox
+          pt="2px"
+          pl={2}
+          isChecked={watcher === undefined}
+          onChange={(e) => field.onChange(e.target.checked ? undefined : "")}
+        >
+          <Text variant="body3">Send as null</Text>
+        </Checkbox>
+      )}
+    </Box>
+  );
+};
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
new file mode 100644
index 000000000..2b80ecc33
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -0,0 +1,107 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { parseInt } from "lodash";
+import type { FieldValues, UseControllerProps } from "react-hook-form";
+
+import type { Option } from "lib/types";
+
+export const UintTypes = ["u8", "u16", "u32", "u64", "u128", "u256"];
+
+const validateNull = (v: Option<string>) =>
+  v !== undefined ? undefined : "cannot be null";
+
+const validateUint = (uintType: string) => (v: string) => {
+  const value = parseInt(v);
+  const maxValue = 2 ** parseInt(uintType.slice(1)) - 1;
+  return value >= 0 && value <= maxValue
+    ? undefined
+    : `need to be within 0 and ${maxValue}`;
+};
+
+const validateBool = (v: string) =>
+  v === "true" || v === "false" ? undefined : "need to be either true or false";
+
+const validateAddress =
+  (isValidArgAddress: (input: string) => boolean) => (v: string) =>
+    isValidArgAddress(v) ? undefined : "invalid address";
+
+const validateVector = (
+  v: string,
+  vectorType: string,
+  isValidArgAddress: (input: string) => boolean
+) => {
+  const value = v.trim();
+  if (!value.startsWith("[") || !value.endsWith("]"))
+    return "need to be a vector";
+
+  const [, elementType] = vectorType.split(/<(.*)>/);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let validateElement = (_v: string): Option<string> => undefined;
+  if (UintTypes.includes(elementType))
+    validateElement = validateUint(elementType);
+  if (elementType === "bool") validateElement = validateBool;
+  if (elementType === "address")
+    validateElement = validateAddress(isValidArgAddress);
+  // TODO: handle Vector?
+
+  let error: Option<string>;
+  value.split(",").forEach((elementValue) => {
+    const res = validateElement(elementValue);
+    if (res !== undefined) error = `invalid element: ${res}`;
+  });
+
+  return error;
+};
+
+export const getRules = <T extends FieldValues>(
+  type: string,
+  isOptional: boolean,
+  isReadOnly: boolean,
+  isValidArgAddress: (input: string) => boolean
+): UseControllerProps<T>["rules"] => {
+  const rules: UseControllerProps<T>["rules"] = {};
+  if (isReadOnly) return rules;
+
+  if (!isOptional) {
+    rules.validate = {
+      null: validateNull,
+    };
+  }
+  if (UintTypes.includes(type))
+    rules.validate = {
+      ...rules.validate,
+      [type]: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateUint(type)(v);
+      },
+    };
+  if (type === "bool") {
+    rules.validate = {
+      ...rules.validate,
+      bool: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateBool(v);
+      },
+    };
+  }
+  if (type === "address") {
+    rules.validate = {
+      ...rules.validate,
+      address: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateAddress(isValidArgAddress)(v);
+      },
+    };
+  }
+  if (type.startsWith("vector")) {
+    rules.validate = {
+      ...rules.validate,
+      [type]: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateVector(v, type, isValidArgAddress);
+      },
+    };
+  }
+
+  return rules;
+};
diff --git a/src/lib/components/abi/param-form/index.tsx b/src/lib/components/abi/args-form/index.tsx
similarity index 80%
rename from src/lib/components/abi/param-form/index.tsx
rename to src/lib/components/abi/args-form/index.tsx
index 8fafd814f..7e8c25c96 100644
--- a/src/lib/components/abi/param-form/index.tsx
+++ b/src/lib/components/abi/args-form/index.tsx
@@ -3,13 +3,15 @@ import { useEffect } from "react";
 import type { FormState } from "react-hook-form";
 import { useForm } from "react-hook-form";
 
-import { ParamField } from "./ParamField";
+import type { AbiFormData, Option } from "lib/types";
 
-interface ParamFormProps {
+import { ArgFieldTemplate } from "./field";
+
+interface ArgsFormProps {
   title?: string;
   params: string[];
-  initialData: Record<string, string>;
-  propsOnChange?: (data: Record<string, string>) => void;
+  initialData: AbiFormData["args"];
+  propsOnChange?: (data: AbiFormData["args"]) => void;
   propsOnErrors?: (errors: [string, string][]) => void;
   isReadOnly?: boolean;
 }
@@ -22,20 +24,20 @@ const formatErrors = (
     error?.message ?? "invalid input",
   ]);
 
-export const ParamForm = ({
+export const ArgsForm = ({
   title = "args",
   params,
   initialData,
   propsOnChange,
   propsOnErrors,
   isReadOnly = false,
-}: ParamFormProps) => {
+}: ArgsFormProps) => {
   const {
     trigger,
     control,
     getValues,
     formState: { errors },
-  } = useForm<Record<string, string>>({
+  } = useForm<Record<string, Option<string>>>({
     defaultValues: initialData,
     mode: "all",
   });
@@ -57,7 +59,7 @@ export const ParamForm = ({
           },
         });
         return (
-          <ParamField
+          <ArgFieldTemplate
             key={param + index.toString()}
             index={index}
             param={param}
diff --git a/src/lib/components/abi/index.ts b/src/lib/components/abi/index.ts
index adbb729ac..c7045ffc6 100644
--- a/src/lib/components/abi/index.ts
+++ b/src/lib/components/abi/index.ts
@@ -1,2 +1,2 @@
 export * from "./AbiForm";
-export * from "./param-form";
+export * from "./args-form";
diff --git a/src/lib/components/abi/param-form/ParamField.tsx b/src/lib/components/abi/param-form/ParamField.tsx
deleted file mode 100644
index b61ecf042..000000000
--- a/src/lib/components/abi/param-form/ParamField.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { parseInt } from "lodash";
-import type {
-  Control,
-  FieldPath,
-  FieldValues,
-  UseControllerProps,
-} from "react-hook-form";
-
-import { ControllerInput } from "lib/components/forms";
-
-interface ParamFieldProps<T extends FieldValues> {
-  index: number;
-  param: string;
-  control: Control<T>;
-  error?: string;
-  isReadOnly?: boolean;
-}
-
-const getRules = <T extends FieldValues>(
-  param: string,
-  isReadOnly: boolean
-): UseControllerProps<T>["rules"] => {
-  if (isReadOnly) return {};
-  return {
-    validate: {
-      maxLength: (v: string) =>
-        v.length <= 10 ? undefined : `${v.length} more than 10`,
-      positive: (v) => (parseInt(v) > 0 ? undefined : `${v} need positive`),
-      lessThanTen: (v) => parseInt(v) < 10,
-    },
-    // pattern: { value: /^\d+$/, message: "This input is number only." },
-  };
-};
-
-export const ParamField = <T extends FieldValues>({
-  index,
-  param,
-  control,
-  error,
-  isReadOnly = false,
-}: ParamFieldProps<T>) => {
-  return (
-    <ControllerInput
-      name={`${index}` as FieldPath<T>}
-      control={control}
-      label={param}
-      variant="floating"
-      rules={getRules<T>(param, isReadOnly)}
-      error={error}
-      isReadOnly={isReadOnly}
-    />
-  );
-};
diff --git a/src/lib/components/abi/type-form/TypeFieldInput.tsx b/src/lib/components/abi/types-form/TypeFieldInput.tsx
similarity index 81%
rename from src/lib/components/abi/type-form/TypeFieldInput.tsx
rename to src/lib/components/abi/types-form/TypeFieldInput.tsx
index 4a7febb49..f9d8b21ca 100644
--- a/src/lib/components/abi/type-form/TypeFieldInput.tsx
+++ b/src/lib/components/abi/types-form/TypeFieldInput.tsx
@@ -3,8 +3,8 @@ import { capitalize } from "lodash";
 
 interface TypeFieldInputProps {
   index: number;
-  value: string;
   constraints: string[];
+  value: string;
   onChange: (value: string) => void;
 }
 
@@ -14,11 +14,11 @@ export const TypeFieldInput = ({
   constraints,
   onChange,
 }: TypeFieldInputProps) => {
-  const placeholder = `Ability : ${
-    constraints.length
-      ? constraints.map((constraint) => capitalize(constraint)).join(" + ")
-      : "none"
-  }`;
+  const placeholder = constraints.length
+    ? `Ability : ${constraints
+        .map((constraint) => capitalize(constraint))
+        .join(" + ")}`
+    : "No ability";
 
   return (
     <Flex
diff --git a/src/lib/components/abi/type-form/index.tsx b/src/lib/components/abi/types-form/index.tsx
similarity index 80%
rename from src/lib/components/abi/type-form/index.tsx
rename to src/lib/components/abi/types-form/index.tsx
index 1c7630572..558f401b6 100644
--- a/src/lib/components/abi/type-form/index.tsx
+++ b/src/lib/components/abi/types-form/index.tsx
@@ -1,21 +1,21 @@
 import { Flex, Heading } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
-import type { GenericTypeParam } from "lib/types";
+import type { AbiFormData, GenericTypeParam } from "lib/types";
 
 import { TypeFieldInput } from "./TypeFieldInput";
 
-interface TypeFormProps {
+interface TypesFormProps {
   genericTypeParams: GenericTypeParam[];
-  initialData: Record<string, string>;
-  propsOnChange?: (data: Record<string, string>) => void;
+  initialData: AbiFormData["typeArgs"];
+  propsOnChange?: (data: AbiFormData["typeArgs"]) => void;
 }
 
-export const TypeForm = ({
+export const TypesForm = ({
   genericTypeParams,
   initialData,
   propsOnChange,
-}: TypeFormProps) => {
+}: TypesFormProps) => {
   const { setValue, getValues } = useForm<Record<string, string>>({
     defaultValues: initialData,
     mode: "all",
@@ -37,8 +37,8 @@ export const TypeForm = ({
         <TypeFieldInput
           key={constraints.join() + index.toString()}
           index={index}
-          value={initialData[index]}
           constraints={constraints}
+          value={initialData[index]}
           onChange={handleOnChange(index)}
         />
       ))}
diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
index 6155dfa87..f06aa714b 100644
--- a/src/lib/components/forms/ControllerTextarea.tsx
+++ b/src/lib/components/forms/ControllerTextarea.tsx
@@ -14,10 +14,10 @@ import type {
 } from "react-hook-form";
 import { useWatch, useController } from "react-hook-form";
 
-import type { TextAreaProps } from "./TextAreaInput";
+import type { TextareaProps } from "./TextareaInput";
 
 interface ControllerTextareaProps<T extends FieldValues>
-  extends Omit<TextAreaProps, "value" | "setInputState"> {
+  extends Omit<TextareaProps, "value" | "setInputState"> {
   name: FieldPath<T>;
   control: Control<T>;
   rules?: UseControllerProps["rules"];
diff --git a/src/lib/components/forms/TextAreaInput.tsx b/src/lib/components/forms/TextAreaInput.tsx
index 519e106b5..054e9e374 100644
--- a/src/lib/components/forms/TextAreaInput.tsx
+++ b/src/lib/components/forms/TextAreaInput.tsx
@@ -13,7 +13,7 @@ import type { FormStatus } from "./FormStatus";
 import { getResponseMsg } from "./FormStatus";
 
 // TODO: remove
-export interface TextAreaProps extends FormControlProps {
+export interface TextareaProps extends FormControlProps {
   value: string;
   setInputState: Dispatch<SetStateAction<string>> | ((newVal: string) => void);
   label?: string;
@@ -23,7 +23,7 @@ export interface TextAreaProps extends FormControlProps {
   status?: FormStatus;
 }
 
-export const TextAreaInput = ({
+export const TextareaInput = ({
   value,
   setInputState,
   label,
@@ -33,7 +33,7 @@ export const TextAreaInput = ({
   error,
   status,
   ...componentProps
-}: TextAreaProps) => (
+}: TextareaProps) => (
   <FormControl
     isInvalid={!!error || status?.state === "error"}
     size="md"
diff --git a/src/lib/components/forms/index.ts b/src/lib/components/forms/index.ts
index d062c5b7e..333adbc77 100644
--- a/src/lib/components/forms/index.ts
+++ b/src/lib/components/forms/index.ts
@@ -5,5 +5,5 @@ export * from "./FilterByPermission";
 export * from "./FormStatus";
 export * from "./NumberInput";
 export * from "./SelectInput";
-export * from "./TextAreaInput";
+export * from "./TextareaInput";
 export * from "./TextInput";
diff --git a/src/lib/components/fund/selectFund.tsx b/src/lib/components/fund/selectFund.tsx
index 71297fb45..3b2976787 100644
--- a/src/lib/components/fund/selectFund.tsx
+++ b/src/lib/components/fund/selectFund.tsx
@@ -69,7 +69,7 @@ export const SelectFund = ({
               name={`${ASSETS_SELECT}.${idx}.amount`}
               control={control}
               label="Amount"
-              variant="floating"
+              variant="fixed-floating"
               type="number"
               rules={rules}
               labelBgColor={labelBgColor}
diff --git a/src/lib/components/modal/code/CodeDetailsTemplate.tsx b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
index 6ac389fed..f6d09bcea 100644
--- a/src/lib/components/modal/code/CodeDetailsTemplate.tsx
+++ b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
@@ -115,7 +115,7 @@ export const CodeDetailsTemplateModal = ({
       }
     >
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         value={name}
         setInputState={setName}
         size="lg"
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index b3a0ea36f..0a94650d9 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -191,7 +191,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
       <FormControl display="flex" flexDir="column" gap={9}>
         Save other stored codes to your &ldquo;Saved Codes&rdquo; list
         <NumberInput
-          variant="floating"
+          variant="fixed-floating"
           value={codeId}
           onInputChange={setCodeId}
           label="Code ID"
@@ -200,7 +200,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           placeholder="ex. 1234"
         />
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={uploader}
           label="Uploader"
           labelBgColor="gray.900"
@@ -210,7 +210,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           isDisabled
         />
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={name}
           setInputState={setName}
           label="Code Name"
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index 6040a031a..94b0b5cd3 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -180,7 +180,7 @@ export function SaveNewContractModal({
           name="contractAddress"
           control={control}
           label="Contract Address"
-          variant="floating"
+          variant="fixed-floating"
           placeholder={`ex. ${exampleContractAddress}`}
           status={status}
           labelBgColor="gray.900"
@@ -189,7 +189,7 @@ export function SaveNewContractModal({
           name="instantiator"
           control={control}
           label="Instantiated by"
-          variant="floating"
+          variant="fixed-floating"
           isDisabled
           labelBgColor="gray.900"
         />
diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx
index 74ff1aa0d..6b1ccb6e0 100644
--- a/src/lib/components/modal/list/CreateNewList.tsx
+++ b/src/lib/components/modal/list/CreateNewList.tsx
@@ -107,7 +107,7 @@ export function CreateNewListModal({
     >
       <Box py={4}>
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={listName}
           setInputState={setListName}
           labelBgColor="gray.900"
diff --git a/src/lib/components/modal/list/EditListName.tsx b/src/lib/components/modal/list/EditListName.tsx
index 94bddd8a2..395423bb9 100644
--- a/src/lib/components/modal/list/EditListName.tsx
+++ b/src/lib/components/modal/list/EditListName.tsx
@@ -92,7 +92,7 @@ export function EditListNameModal({
       otherAction={() => setListName(list.label)}
     >
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         value={listName}
         setInputState={setListName}
         labelBgColor="gray.900"
diff --git a/src/lib/components/select-code/CodeSelectSection.tsx b/src/lib/components/select-code/CodeSelectSection.tsx
index e91d63c89..53c9356ff 100644
--- a/src/lib/components/select-code/CodeSelectSection.tsx
+++ b/src/lib/components/select-code/CodeSelectSection.tsx
@@ -71,7 +71,7 @@ export const CodeSelectSection = <T extends FieldValues>({
             error={error}
             label="Code ID"
             helperText="Input existing Code ID manually"
-            variant="floating"
+            variant="fixed-floating"
             my={8}
             rules={{ required: "Code ID is required" }}
           />
diff --git a/src/lib/components/select-contract/AllContractLists.tsx b/src/lib/components/select-contract/AllContractLists.tsx
index 075e57d99..ad23a4d44 100644
--- a/src/lib/components/select-contract/AllContractLists.tsx
+++ b/src/lib/components/select-contract/AllContractLists.tsx
@@ -33,7 +33,7 @@ export const AllContractLists = ({
   return (
     <Box minH="xs" w="100%">
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         value={searchKeyword}
         setInputState={setSearchKeyword}
         placeholder="Search for your lists"
diff --git a/src/lib/components/select-contract/ContractListDetail.tsx b/src/lib/components/select-contract/ContractListDetail.tsx
index ba1c60910..72fb03ad8 100644
--- a/src/lib/components/select-contract/ContractListDetail.tsx
+++ b/src/lib/components/select-contract/ContractListDetail.tsx
@@ -119,7 +119,7 @@ export const ContractListDetail = ({
     <Box minH="xs">
       <Flex gap={3} w="full" my={isReadOnly ? "24px" : "48px"}>
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={searchKeyword}
           setInputState={setSearchKeyword}
           placeholder="Search with Contract Address, Name, or Description"
diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index d562dc1cc..8b1038e89 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -117,7 +117,7 @@ export const InstantiatePermissionRadio = ({
                       name={`addresses.${idx}.address`}
                       control={control}
                       label="Address"
-                      variant="floating"
+                      variant="fixed-floating"
                       error={
                         (addresses[idx]?.address &&
                           addresses.find(
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 7356d3a75..652c6a8cb 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -236,7 +236,7 @@ export const UploadSection = ({
         error={
           errors.codeName && getMaxLengthError(codeName.length, "code_name")
         }
-        variant="floating"
+        variant="fixed-floating"
       />
       <InstantiatePermissionRadio
         control={control}
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index 989490056..89112d3ad 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -184,7 +184,7 @@ const UpdateAdmin = () => {
         onContractSelect={(contract) => onContractPathChange(contract)}
       />
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         label="New Admin Address"
         helperText="This address will be an admin for the deployed smart contract."
         value={adminAddress}
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 08c8c41ec..521f79a6f 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -173,7 +173,7 @@ const Faucet = () => {
           "Requests are limited to once per hour for each receiving address and IP address."}
       </Text>
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         placeholder="Enter your address"
         value={address}
         setInputState={setAddress}
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 4d4b481b6..4fa19f93e 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -405,7 +405,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             placeholder="ex. Token Factory"
             label="Label"
             helperText="The contract's label help briefly describe the contract and what it does."
-            variant="floating"
+            variant="fixed-floating"
             mb={8}
             rules={{ required: "Label is required" }}
           />
@@ -415,7 +415,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             label="Admin Address (optional)"
             placeholder={`ex. ${exampleUserAddress}`}
             helperText="The contract's admin will be able to migrate and update future admins."
-            variant="floating"
+            variant="fixed-floating"
             error={validateAdmin(adminAddress)}
             helperAction={
               <AssignMe
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index b2394283a..263350c23 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -123,7 +123,7 @@ export const ModuleSelectorInput = ({
         size="md"
         helperText={`ex. “${user}”, “${user}::module_name”, or “${user}::module_name::function_name”`}
         label="Fill in address or module path"
-        variant="floating"
+        variant="fixed-floating"
         labelBgColor="gray.800"
         onKeyDown={handleKeydown}
         autoFocus
diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
index 4f1a0e666..3b3613999 100644
--- a/src/lib/pages/interaction/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-import { AbiForm, type AbiFormData } from "lib/components/abi";
-import type { ExposedFunction } from "lib/types";
+import { AbiForm } from "lib/components/abi";
+import type { AbiFormData, ExposedFunction } from "lib/types";
 import { getAbiInitialData } from "lib/utils";
 
 export const ExecuteArea = ({ fn }: { fn: ExposedFunction }) => {
diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interaction/component/form/ViewArea.tsx
index 34a2b631f..d3e36e1d0 100644
--- a/src/lib/pages/interaction/component/form/ViewArea.tsx
+++ b/src/lib/pages/interaction/component/form/ViewArea.tsx
@@ -1,8 +1,8 @@
 import { Grid, GridItem } from "@chakra-ui/react";
 import { useState } from "react";
 
-import { AbiForm, ParamForm, type AbiFormData } from "lib/components/abi";
-import type { ExposedFunction } from "lib/types";
+import { AbiForm, ArgsForm } from "lib/components/abi";
+import type { AbiFormData, ExposedFunction, Option } from "lib/types";
 import { getAbiInitialData } from "lib/utils";
 
 export const ViewArea = ({ fn }: { fn: ExposedFunction }) => {
@@ -11,12 +11,12 @@ export const ViewArea = ({ fn }: { fn: ExposedFunction }) => {
     args: getAbiInitialData(fn.params.length),
   });
   const [, setErrors] = useState<[string, string][]>([]);
-  const [res, setRes] = useState<Record<string, string>>(
+  const [res, setRes] = useState<Record<string, Option<string>>>(
     getAbiInitialData(fn.return.length)
   );
 
   return (
-    <Grid templateColumns="1fr 1fr" gap={4}>
+    <Grid templateColumns="1fr 1fr" gap={6}>
       <GridItem>
         <AbiForm
           fn={fn}
@@ -26,7 +26,7 @@ export const ViewArea = ({ fn }: { fn: ExposedFunction }) => {
         />
       </GridItem>
       <GridItem>
-        <ParamForm
+        <ArgsForm
           title="Return"
           params={fn.return}
           initialData={res}
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 99b923223..0737b245c 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -42,7 +42,6 @@ export const Interaction = () => {
     <PageContainer
       overflow="hidden"
       minH="unset"
-      maxH="calc(100vh - 129px)"
       display="grid"
       gridTemplateRows="auto auto 1fr"
     >
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index cd29c14cb..65ffcc102 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -373,7 +373,7 @@ const StoreCodeProposal = () => {
                   placeholder={PROPOSAL_STORE_CODE_TEXT.titlePlaceholder}
                   label={PROPOSAL_STORE_CODE_TEXT.titleLabel}
                   labelBgColor="background.main"
-                  variant="floating"
+                  variant="fixed-floating"
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.titleRequired,
                     maxLength: constants.maxProposalTitleLength,
@@ -392,7 +392,7 @@ const StoreCodeProposal = () => {
                   height="160px"
                   label={PROPOSAL_STORE_CODE_TEXT.descriptionLabel}
                   placeholder={PROPOSAL_STORE_CODE_TEXT.descriptionPlaceholder}
-                  variant="floating"
+                  variant="fixed-floating"
                   labelBgColor="background.main"
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.descriptionRequired,
@@ -407,7 +407,7 @@ const StoreCodeProposal = () => {
                   label={PROPOSAL_STORE_CODE_TEXT.runAsLabel}
                   labelBgColor="background.main"
                   placeholder={`ex. ${exampleUserAddress}`}
-                  variant="floating"
+                  variant="fixed-floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.runAsHelperText}
                   requiredText={PROPOSAL_STORE_CODE_TEXT.runAsRequired}
                   error={errors.runAs?.message}
@@ -478,7 +478,7 @@ const StoreCodeProposal = () => {
                   placeholder={PROPOSAL_STORE_CODE_TEXT.builderPlaceholder}
                   label={PROPOSAL_STORE_CODE_TEXT.builderLabel}
                   labelBgColor="background.main"
-                  variant="floating"
+                  variant="fixed-floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.builderHelperText}
                   // Builder is a docker image, can be tagged, digested, or both
                   rules={{
@@ -500,7 +500,7 @@ const StoreCodeProposal = () => {
                   placeholder={PROPOSAL_STORE_CODE_TEXT.sourcePlaceholder}
                   label={PROPOSAL_STORE_CODE_TEXT.sourceLabel}
                   labelBgColor="background.main"
-                  variant="floating"
+                  variant="fixed-floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.sourceHelperText}
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.sourceRequired,
@@ -538,7 +538,7 @@ const StoreCodeProposal = () => {
                     control={control}
                     label="Amount"
                     placeholder="0.00"
-                    variant="floating"
+                    variant="fixed-floating"
                     type="number"
                     helperAction={
                       <Text
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 7d06b748d..7c2603a58 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -295,7 +295,7 @@ const ProposalToWhitelist = () => {
                   placeholder="ex. Allow XYZ to store code without proposal"
                   label="Proposal Title"
                   labelBgColor="gray.900"
-                  variant="floating"
+                  variant="fixed-floating"
                   rules={{
                     required: "Proposal Title is required",
                     maxLength: constants.maxProposalTitleLength,
@@ -312,7 +312,7 @@ const ProposalToWhitelist = () => {
                   height="160px"
                   label="Proposal Description"
                   placeholder="Please describe your proposal for whitelist. Include all relevant details such as the project you work on or addresses you want to add to the allow list and the reason for the proposal. The description should be clear and concise to help everyone understand your request."
-                  variant="floating"
+                  variant="fixed-floating"
                   labelBgColor="gray.900"
                   rules={{
                     required: "Proposal Description is required",
@@ -333,7 +333,7 @@ const ProposalToWhitelist = () => {
                     name={`addresses.${idx}.address`}
                     control={control}
                     label="Address"
-                    variant="floating"
+                    variant="fixed-floating"
                     validation={{
                       duplicate: () =>
                         addresses.find(
@@ -395,7 +395,7 @@ const ProposalToWhitelist = () => {
                   control={control}
                   label="Amount"
                   placeholder="0.00"
-                  variant="floating"
+                  variant="fixed-floating"
                   type="number"
                   helperAction={
                     <Text
diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
index 06c51fca2..92f65523e 100644
--- a/src/lib/pages/public-project/components/AllProject.tsx
+++ b/src/lib/pages/public-project/components/AllProject.tsx
@@ -68,7 +68,7 @@ export const AllProject = observer(() => {
   return (
     <Box minH="xs" w="100%">
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         value={searchKeyword}
         setInputState={setSearchKeyword}
         labelBgColor="background"
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
index 985a874cf..712afd779 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
@@ -73,7 +73,7 @@ export const PublicProjectAccountTable = ({
       <TableTitle title="Accounts" count={accounts.length} />
       {!onViewMore && (
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={searchKeyword}
           setInputState={setSearchKeyword}
           placeholder="Search with Account Address, Name, or Description"
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
index 2554b4245..84df30ced 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
@@ -102,7 +102,7 @@ export const PublicProjectCodeTable = observer(
         <TableTitle title="Codes" count={codes.length} />
         {!onViewMore && (
           <TextInput
-            variant="floating"
+            variant="fixed-floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
             placeholder="Search with Code ID or Code Name"
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
index 716062c2c..627cd55be 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
@@ -96,7 +96,7 @@ export const PublicProjectContractTable = observer(
         <TableTitle title="Contracts" count={contracts.length} />
         {!onViewMore && (
           <TextInput
-            variant="floating"
+            variant="fixed-floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
             placeholder="Search with Contract Address or Contract Name"
diff --git a/src/lib/styles/theme/components/form.ts b/src/lib/styles/theme/components/form.ts
index 145bf31ad..00a2d12ce 100644
--- a/src/lib/styles/theme/components/form.ts
+++ b/src/lib/styles/theme/components/form.ts
@@ -2,6 +2,57 @@ import type { ComponentStyleConfig } from "@chakra-ui/react";
 
 const errorMain = "error.main";
 
+const labelStyles = {
+  top: 0,
+  left: 0,
+  zIndex: 2,
+  position: "absolute",
+  pointerEvents: "none",
+  mx: 3,
+  px: 1,
+  transformOrigin: "left top",
+  color: "text.dark",
+  fontWeight: "400",
+  _disabled: {
+    color: "text.disabled",
+  },
+  _active: {
+    color: "secondary.main",
+  },
+};
+
+const labelTransform = {
+  md: "scale(0.75) translateY(-20px)",
+  lg: "scale(0.75) translateY(-28px)",
+};
+
+const getActiveLabelStyles = (size: "md" | "lg") => ({
+  _focusWithin: {
+    label: {
+      transform: labelTransform[size],
+      lineHeight: "1.2",
+    },
+  },
+  "input:not(:placeholder-shown) ~ label, .chakra-select__wrapper ~ label, textarea:not(:placeholder-shown) ~ label, .chakra-react-select--has-value ~ label":
+    {
+      transform: labelTransform[size],
+      lineHeight: "1.2",
+    },
+});
+
+const subtextStyles = {
+  ml: 3,
+  mt: 0,
+  fontSize: "12px",
+  color: "text.dark",
+  _disabled: {
+    color: "text.disabled",
+  },
+  "&.chakra-form__error-message": {
+    color: errorMain,
+  },
+};
+
 export const Form: ComponentStyleConfig = {
   baseStyle: {
     container: {
@@ -18,45 +69,27 @@ export const Form: ComponentStyleConfig = {
     },
   },
   variants: {
-    floating: {
+    "fixed-floating": {
       container: {
         label: {
-          top: 0,
-          left: 0,
-          zIndex: 2,
-          mx: 3,
-          px: 1,
-          position: "absolute",
-          fontWeight: "400",
+          ...labelStyles,
           lineHeight: "1.2",
-          pointerEvents: "none",
-          transformOrigin: "left top",
-          color: "text.dark",
-          _disabled: {
-            color: "text.disabled",
-          },
-          _active: {
-            color: "secondary.main",
-          },
           "&.md-label, &.textarea-label": {
-            transform: "scale(0.75) translateY(-20px)",
+            transform: labelTransform.md,
           },
           "&.lg-label": {
-            transform: "scale(0.75) translateY(-28px)",
-          },
-        },
-        "div.helper-text, .error-text": {
-          ml: 3,
-          mt: 0,
-          fontSize: "12px",
-          color: "text.dark",
-          _disabled: {
-            color: "text.disabled",
-          },
-          "&.chakra-form__error-message": {
-            color: errorMain,
+            transform: labelTransform.lg,
           },
         },
+        "div.helper-text, .error-text": { ...subtextStyles },
+      },
+    },
+    floating: {
+      container: {
+        "&.md-form, &.textarea-form": getActiveLabelStyles("md"),
+        "&.lg-form": getActiveLabelStyles("lg"),
+        label: { ...labelStyles },
+        "div.helper-text, .error-text": { ...subtextStyles },
       },
     },
   },
diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
index 4a0dcde58..5e47eb844 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/abi.ts
@@ -1,4 +1,5 @@
 import type { HexAddr } from "./addrs";
+import type { Option } from "./common";
 import type { SnakeToCamelCaseNested } from "./converter";
 
 export enum UpgradePolicy {
@@ -81,3 +82,8 @@ interface Field {
   name: string;
   type: string;
 }
+
+export interface AbiFormData {
+  typeArgs: Record<string, string>;
+  args: Record<string, Option<string>>;
+}
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 2bdbed5ca..5eb9726a8 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -1,4 +1,6 @@
-import type { ExposedFunction, ResponseABI } from "lib/types";
+import { BCS } from "@initia/initia.js";
+
+import type { ExposedFunction, Option, ResponseABI } from "lib/types";
 
 export const checkAvailability = (fn: ExposedFunction) =>
   fn.visibility === "public" && (fn.is_view || fn.is_entry);
@@ -41,10 +43,45 @@ export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
   return functionMap;
 };
 
-export const getAbiInitialData = (length: number): Record<string, string> =>
+export const getAbiInitialData = (length: number) =>
   Array(length)
     .fill("")
     .reduce<Record<string, string>>(
       (prev, _, index) => ({ ...prev, [index.toString()]: "" }),
       {}
     );
+
+// ------------------------------------------//
+// -----------------MOVE ARGS----------------//
+// ------------------------------------------//
+const getArgType = (argType: string) =>
+  argType
+    .replaceAll("0x1::string::String", "string")
+    .replaceAll("0x1::option::Option", "option");
+
+const getArgValue = ({
+  type,
+  value,
+}: {
+  type: string;
+  value: Option<string>;
+}) => {
+  try {
+    if (value === undefined) return null;
+    if (type.startsWith("vector")) return JSON.parse(value) as string[];
+    return value.trim();
+  } catch (e) {
+    return "";
+  }
+};
+
+export const serializeArg = (arg: { type: string; value: Option<string> }) => {
+  const bcs = BCS.getInstance();
+  try {
+    const argType = getArgType(arg.type);
+    const argValue = getArgValue(arg);
+    return bcs.serialize(argType, argValue);
+  } catch (e) {
+    return "";
+  }
+};
diff --git a/yarn.lock b/yarn.lock
index fd74b5404..94db0bf61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3400,6 +3400,45 @@
   dependencies:
     browser-headers "^0.4.1"
 
+"@improbable-eng/grpc-web@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@improbable-eng/grpc-web/-/grpc-web-0.15.0.tgz#3e47e9fdd90381a74abd4b7d26e67422a2a04bef"
+  integrity sha512-ERft9/0/8CmYalqOVnJnpdDry28q+j+nAlFFARdjyxXDJ+Mhgv9+F600QC8BR9ygOfrXRlAk6CvST2j+JCpQPg==
+  dependencies:
+    browser-headers "^0.4.1"
+
+"@initia/initia.js@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.8.tgz#f1d1d12a37788054061b2e5f9db55c33dcc5f67c"
+  integrity sha512-Q7GhXHgIZ3th6k2vou+e+CO4C5JA/JeA6w3oP/kb2cxbqOAOM1+ybN/8oMtHNApxh/gpmCWUXi7axHV5v/91UA==
+  dependencies:
+    "@initia/initia.proto" "^0.1.11"
+    "@ledgerhq/hw-transport" "^6.27.12"
+    "@ledgerhq/hw-transport-webhid" "^6.27.12"
+    "@ledgerhq/hw-transport-webusb" "^6.27.12"
+    "@mysten/bcs" "^0.7.0"
+    axios "^0.27.2"
+    bech32 "^2.0.0"
+    bignumber.js "^9.1.0"
+    bip32 "^2.0.6"
+    bip39 "^3.0.4"
+    jscrypto "^1.0.3"
+    long "^5.2.0"
+    ripemd160 "^2.0.2"
+    secp256k1 "^4.0.3"
+    tmp "^0.2.1"
+    ws "^7.5.9"
+
+"@initia/initia.proto@^0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.11.tgz#39016bbb4d15f06aaec17e56d6f431ddadc600ce"
+  integrity sha512-G9HRTy5xfza6hTjYLuLgcmJWjSDsnLXnc2HvWceDcaSlHp212rMH07+gpazwY0L6aCm3uWyqLh4Yig60L3AaRA==
+  dependencies:
+    "@improbable-eng/grpc-web" "^0.15.0"
+    google-protobuf "^3.21.0"
+    long "^5.2.0"
+    protobufjs "^7.1.1"
+
 "@interchain-ui/react@1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.4.1.tgz#92e9eb3d657596a84f7c93c509a1c4a3f8771f10"
@@ -3872,6 +3911,55 @@
     big-integer "^1.6.48"
     utility-types "^3.10.0"
 
+"@ledgerhq/devices@^8.0.7":
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-8.0.7.tgz#206434dbd8a097529bbfc95f5eef94c2923c7578"
+  integrity sha512-BbPyET52lXnVs7CxJWrGYqmtGdbGzj+XnfCqLsDnA7QYr1CZREysxmie+Rr6BKpNDBRVesAovXjtaVaZOn+upw==
+  dependencies:
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/logs" "^6.10.1"
+    rxjs "6"
+    semver "^7.3.5"
+
+"@ledgerhq/errors@^6.14.0":
+  version "6.14.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-6.14.0.tgz#0bf253983773ef12eebce2091f463bc719223b37"
+  integrity sha512-ZWJw2Ti6Dq1Ott/+qYqJdDWeZm16qI3VNG5rFlb0TQ3UcAyLIQZbnnzzdcVVwVeZiEp66WIpINd/pBdqsHVyOA==
+
+"@ledgerhq/hw-transport-webhid@^6.27.12":
+  version "6.27.19"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webhid/-/hw-transport-webhid-6.27.19.tgz#5a655b497258d94ec6494db7b56e17dd0c610638"
+  integrity sha512-RMnktayqqLE2uFQDw9TKoW+WSP8KnT0ElKcIISf3sXVrzHD2y0moPk/wXOzGfi+cgN4uiKy86UD/5mgz3wlm6Q==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/hw-transport" "^6.28.8"
+    "@ledgerhq/logs" "^6.10.1"
+
+"@ledgerhq/hw-transport-webusb@^6.27.12":
+  version "6.27.19"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webusb/-/hw-transport-webusb-6.27.19.tgz#30a95c2122bcab6709665fda700276622087a930"
+  integrity sha512-M93sCyYREk8jCW/o7D/Ey+GQl38IALc0AY5WLKghzyjgqdPNo0x3j7CuTFJXiMWl5Mh8YDsO/MY8kkG9tuMvKQ==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/hw-transport" "^6.28.8"
+    "@ledgerhq/logs" "^6.10.1"
+
+"@ledgerhq/hw-transport@^6.27.12", "@ledgerhq/hw-transport@^6.28.8":
+  version "6.28.8"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-6.28.8.tgz#f99a5c71c5c09591e9bfb1b970c42aafbe81351f"
+  integrity sha512-XxQVl4htd018u/M66r0iu5nlHi+J6QfdPsORzDF6N39jaz+tMqItb7tUlXM/isggcuS5lc7GJo7NOuJ8rvHZaQ==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    events "^3.3.0"
+
+"@ledgerhq/logs@^6.10.1":
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-6.10.1.tgz#5bd16082261d7364eabb511c788f00937dac588d"
+  integrity sha512-z+ILK8Q3y+nfUl43ctCPuR4Y2bIxk/ooCQFwZxhtci1EhAtMDzMAx2W25qx8G1PPL9UUOdnUax19+F0OjXoj4w==
+
 "@motionone/animation@^10.15.1":
   version "10.15.1"
   resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807"
@@ -3941,6 +4029,13 @@
     "@motionone/dom" "^10.16.2"
     tslib "^2.3.1"
 
+"@mysten/bcs@^0.7.0":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@mysten/bcs/-/bcs-0.7.4.tgz#1e32ec3d1fa68a0ed98323e604a741728927e421"
+  integrity sha512-6DKzM4L10Au3Og5EJRBqJZmXWZ7hS/clVjbVUH4sA0aFtS3AZo2xc+r5fUFfdJbaWZUxVaDiQ8BNiEZWkAnEOw==
+  dependencies:
+    bs58 "^5.0.0"
+
 "@next/env@13.0.0":
   version "13.0.0"
   resolved "https://registry.npmjs.org/@next/env/-/env-13.0.0.tgz"
@@ -5872,6 +5967,11 @@ base-x@^3.0.2:
   dependencies:
     safe-buffer "^5.0.1"
 
+base-x@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
+  integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
+
 base64-js@^1.0.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
@@ -5897,6 +5997,11 @@ big.js@^6.2.1:
   resolved "https://registry.npmjs.org/big.js/-/big.js-6.2.1.tgz"
   integrity sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==
 
+bignumber.js@^9.1.0:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
+  integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
+
 bignumber.js@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.1.tgz#c4df7dc496bd849d4c9464344c1aa74228b4dac6"
@@ -5927,7 +6032,7 @@ bip32@^2.0.6:
     typeforce "^1.11.5"
     wif "^2.0.6"
 
-bip39@^3.0.2, bip39@^3.0.3:
+bip39@^3.0.2, bip39@^3.0.3, bip39@^3.0.4:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bip39/-/bip39-3.1.0.tgz#c55a418deaf48826a6ceb34ac55b3ee1577e18a3"
   integrity sha512-c9kiwdk45Do5GL0vJMe7tS95VjCii65mYAH7DfWl3uW8AVzXKQVUm64i3hzVybBDMp9r7j9iNxR85+ul8MdN/A==
@@ -6068,6 +6173,13 @@ bs58@^4.0.0:
   dependencies:
     base-x "^3.0.2"
 
+bs58@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279"
+  integrity sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ==
+  dependencies:
+    base-x "^4.0.0"
+
 bs58check@<3.0.0, bs58check@^2.1.1, bs58check@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
@@ -8308,7 +8420,7 @@ globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-google-protobuf@^3.17.3:
+google-protobuf@^3.17.3, google-protobuf@^3.21.0:
   version "3.21.2"
   resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
   integrity sha512-3MSOYFO5U9mPGikIYCzK0SaThypfGgS6bHqrUGXG3DPHCrb+txNqeEcns1W0lkGfk0rCyNXm7xB9rMxnCiZOoA==
@@ -9461,7 +9573,7 @@ js-yaml@^4.0.0, js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-jscrypto@^1.0.1:
+jscrypto@^1.0.1, jscrypto@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/jscrypto/-/jscrypto-1.0.3.tgz#598febca2a939d6f679c54f56e1fe364cef30cc9"
   integrity sha512-lryZl0flhodv4SZHOqyb1bx5sKcJxj0VBo0Kzb4QMAg3L021IC9uGpl0RCZa+9KJwlRGSK2C80ITcwbe19OKLQ==
@@ -9913,16 +10025,16 @@ long@^4.0.0:
   resolved "https://registry.npmjs.org/long/-/long-4.0.0.tgz"
   integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
 
+long@^5.0.0, long@^5.2.0, long@^5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
+  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
+
 long@^5.2.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/long/-/long-5.2.1.tgz"
   integrity sha512-GKSNGeNAtw8IryjjkhZxuKB3JzlcLTwjtiQCHKvqQet81I93kXslhDQruGI/QsddO83mcDToBVy7GqGS/zYf/A==
 
-long@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
-  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
-
 longest@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/longest/-/longest-2.0.1.tgz"
@@ -10951,6 +11063,24 @@ protobufjs@6.11.3, protobufjs@^6.11.2, protobufjs@^6.8.8, protobufjs@~6.11.2, pr
     "@types/node" ">=13.7.0"
     long "^4.0.0"
 
+protobufjs@^7.1.1:
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.5.tgz#45d5c57387a6d29a17aab6846dcc283f9b8e7f2d"
+  integrity sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
 proxy-compare@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.5.1.tgz#17818e33d1653fbac8c2ec31406bce8a2966f600"
@@ -11510,6 +11640,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@6:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
 rxjs@^7.0.0, rxjs@^7.5.7:
   version "7.5.7"
   resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz"
@@ -11566,7 +11703,7 @@ scuid@^1.1.0:
   resolved "https://registry.npmjs.org/scuid/-/scuid-1.1.0.tgz"
   integrity sha512-MuCAyrGZcTLfQoH2XoBlQ8C6bzwN88XT/0slOGz0pn8+gIP85BOAfYa44ZXQUTOwRwPU0QvgU+V+OSajl/59Xg==
 
-secp256k1@^4.0.2:
+secp256k1@^4.0.2, secp256k1@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-4.0.3.tgz#c4559ecd1b8d3c1827ed2d1b94190d69ce267303"
   integrity sha512-NLZVf+ROMxwtEj3Xa562qgv2BK5e2WNmXPiOdVIPLgs6lyTzMvBq0aWTYMI5XCP9jZMVKOcqZLw/Wc4vDkuxhA==
@@ -12253,7 +12390,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.3:
+tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

From dc6f063ef780e15170218efb34133dbcf53b3937 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 15 Sep 2023 10:53:51 +0700
Subject: [PATCH 047/368] fix: missing id

---
 CHANGELOG.md                           | 1 +
 src/lib/pages/module-details/index.tsx | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c558b363..129eef675 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Add initia abi form
 - [#521](https://github.com/alleslabs/celatone-frontend/pull/521) Initia module interaction function panel and selected function info accordion
 - [#515](https://github.com/alleslabs/celatone-frontend/pull/515) Initia select module drawer wireup
 - [#494](https://github.com/alleslabs/celatone-frontend/pull/494) Initia select module drawer UI
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 1f1f1f2d8..70dd7c594 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -75,15 +75,16 @@ export const ModuleDetails = () => {
       });
     }
   }, [router.isReady, tab, modulePath, navigate]);
+
   const contractAddress = "" as ContractAddr;
   const { data: contractAccountId } = useAccountId(contractAddress);
-
   const {
     tableCounts,
     refetchMigration,
     refetchTransactions,
     refetchRelatedProposals,
-  } = useContractDetailsTableCounts(contractAddress);
+  } = useContractDetailsTableCounts(contractAddress, contractAccountId);
+
   return (
     <PageContainer>
       <ModuleTop isVerified />

From c1d37f1fa98abb8ac32edd2e71552045ebf8ccd1 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 15 Sep 2023 11:27:01 +0700
Subject: [PATCH 048/368] fix: temp renaming

---
 src/lib/components/forms/ControllerTextarea.tsx              | 2 +-
 src/lib/components/forms/{TextAreaInput.tsx => Textarea.tsx} | 0
 src/lib/components/forms/index.ts                            | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/lib/components/forms/{TextAreaInput.tsx => Textarea.tsx} (100%)

diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
index f06aa714b..8c05bf08f 100644
--- a/src/lib/components/forms/ControllerTextarea.tsx
+++ b/src/lib/components/forms/ControllerTextarea.tsx
@@ -14,7 +14,7 @@ import type {
 } from "react-hook-form";
 import { useWatch, useController } from "react-hook-form";
 
-import type { TextareaProps } from "./TextareaInput";
+import type { TextareaProps } from "./Textarea";
 
 interface ControllerTextareaProps<T extends FieldValues>
   extends Omit<TextareaProps, "value" | "setInputState"> {
diff --git a/src/lib/components/forms/TextAreaInput.tsx b/src/lib/components/forms/Textarea.tsx
similarity index 100%
rename from src/lib/components/forms/TextAreaInput.tsx
rename to src/lib/components/forms/Textarea.tsx
diff --git a/src/lib/components/forms/index.ts b/src/lib/components/forms/index.ts
index 333adbc77..3713a8602 100644
--- a/src/lib/components/forms/index.ts
+++ b/src/lib/components/forms/index.ts
@@ -5,5 +5,5 @@ export * from "./FilterByPermission";
 export * from "./FormStatus";
 export * from "./NumberInput";
 export * from "./SelectInput";
-export * from "./TextareaInput";
+export * from "./Textarea";
 export * from "./TextInput";

From 4c2d4af656b0af2c29d2ade394826a4afb9bae89 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 15 Sep 2023 11:27:41 +0700
Subject: [PATCH 049/368] fix: renaming to lowercase

---
 src/lib/components/forms/ControllerTextarea.tsx              | 2 +-
 src/lib/components/forms/{Textarea.tsx => TextareaInput.tsx} | 0
 src/lib/components/forms/index.ts                            | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/lib/components/forms/{Textarea.tsx => TextareaInput.tsx} (100%)

diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
index 8c05bf08f..f06aa714b 100644
--- a/src/lib/components/forms/ControllerTextarea.tsx
+++ b/src/lib/components/forms/ControllerTextarea.tsx
@@ -14,7 +14,7 @@ import type {
 } from "react-hook-form";
 import { useWatch, useController } from "react-hook-form";
 
-import type { TextareaProps } from "./Textarea";
+import type { TextareaProps } from "./TextareaInput";
 
 interface ControllerTextareaProps<T extends FieldValues>
   extends Omit<TextareaProps, "value" | "setInputState"> {
diff --git a/src/lib/components/forms/Textarea.tsx b/src/lib/components/forms/TextareaInput.tsx
similarity index 100%
rename from src/lib/components/forms/Textarea.tsx
rename to src/lib/components/forms/TextareaInput.tsx
diff --git a/src/lib/components/forms/index.ts b/src/lib/components/forms/index.ts
index 3713a8602..333adbc77 100644
--- a/src/lib/components/forms/index.ts
+++ b/src/lib/components/forms/index.ts
@@ -5,5 +5,5 @@ export * from "./FilterByPermission";
 export * from "./FormStatus";
 export * from "./NumberInput";
 export * from "./SelectInput";
-export * from "./Textarea";
+export * from "./TextareaInput";
 export * from "./TextInput";

From 55477ae7f015e10b5842f40c077238d372717f50 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 15 Sep 2023 11:35:27 +0700
Subject: [PATCH 050/368] fix: placeholder for select

---
 src/lib/components/abi/args-form/field/ArgFieldWidget.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index aa5446e0d..56f5e8b20 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -50,6 +50,7 @@ export const ArgFieldWidget = ({
         classNamePrefix="chakra-react-select"
         size="md"
         options={boolOptions}
+        placeholder={" "}
         value={boolOptions.find(({ value }) => value === watcher)}
         onChange={(e) => onChange(e?.value)}
         menuPosition="fixed"

From 5003702d0af673a3e0ff42181b404628d5bd1680 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 15 Sep 2023 19:40:33 +0700
Subject: [PATCH 051/368] fix: accordion sticky layout and leaflet layout

---
 .../publish-module/components/Footer.tsx      |  16 +-
 .../publish-module/components/PolicyCard.tsx  |   1 -
 .../publish-module/components/accordions.tsx  |  33 ++--
 .../components/leaflet/index.tsx              | 160 ++++++++++--------
 .../components/leaflet/metadata.ts            |  32 ++--
 .../components/leaflet/utils.ts               |   2 +-
 src/lib/pages/publish-module/index.tsx        |  41 +++--
 src/lib/styles/globals.css                    |  56 ++++++
 8 files changed, 207 insertions(+), 134 deletions(-)

diff --git a/src/lib/pages/publish-module/components/Footer.tsx b/src/lib/pages/publish-module/components/Footer.tsx
index fb1db3ae6..9cb9be5fc 100644
--- a/src/lib/pages/publish-module/components/Footer.tsx
+++ b/src/lib/pages/publish-module/components/Footer.tsx
@@ -10,6 +10,8 @@ interface FooterProps {
 
 export const Footer = ({ isLoading = false, fieldAmount }: FooterProps) => {
   const router = useRouter();
+  const publishText =
+    fieldAmount > 1 ? `Publish ${fieldAmount} Modules` : "Publish Module";
   return (
     <Grid
       w="full"
@@ -19,21 +21,17 @@ export const Footer = ({ isLoading = false, fieldAmount }: FooterProps) => {
       bottom={0}
       position="sticky"
       zIndex={2}
-      templateAreas={`"prespace main postspace"`}
-      templateColumns="1fr 4fr 2fr"
-      gap="48px"
+      templateAreas={`"prespace main accordion postspace"`}
+      templateColumns="1fr 6fr 4fr 1fr"
+      columnGap="16px"
     >
       <GridItem area="main">
-        <Flex flex="5" align="center" justify="space-between" h="full" w="full">
+        <Flex align="center" justify="space-between" h="full">
           <Button variant="outline-primary" onClick={router.back}>
             Cancel
           </Button>
           <Button variant="primary" isDisabled={isLoading}>
-            {isLoading ? (
-              <Spinner size="md" variant="light" />
-            ) : (
-              `Publish ${fieldAmount} Modules`
-            )}
+            {isLoading ? <Spinner size="md" variant="light" /> : publishText}
           </Button>
         </Flex>
       </GridItem>
diff --git a/src/lib/pages/publish-module/components/PolicyCard.tsx b/src/lib/pages/publish-module/components/PolicyCard.tsx
index ea98f2158..d57269211 100644
--- a/src/lib/pages/publish-module/components/PolicyCard.tsx
+++ b/src/lib/pages/publish-module/components/PolicyCard.tsx
@@ -18,7 +18,6 @@ const RadioCard = ({ checked, children, ...props }: RadioCardProps) => (
     borderRadius="12px"
     borderColor={checked ? "text.main" : "gray.700"}
     bgColor={checked ? "gray.700" : "gray.900"}
-    overflowX="scroll"
     alignItems="center"
     cursor="pointer"
     {...props}
diff --git a/src/lib/pages/publish-module/components/accordions.tsx b/src/lib/pages/publish-module/components/accordions.tsx
index 74b3fa9e1..f9f8d32db 100644
--- a/src/lib/pages/publish-module/components/accordions.tsx
+++ b/src/lib/pages/publish-module/components/accordions.tsx
@@ -5,15 +5,18 @@ import {
   AccordionIcon,
   AccordionPanel,
   Text,
-  Button,
 } from "@chakra-ui/react";
 
-import { CustomIcon } from "lib/components/icon";
-
 export const UploadAccordion = () => (
-  <Accordion allowToggle defaultIndex={[0]} variant="transparent">
+  <Accordion
+    allowToggle
+    defaultIndex={[0]}
+    variant="transparent"
+    position="sticky"
+    top={0}
+  >
     <AccordionItem borderTop="none" borderColor="gray.700">
-      <AccordionButton py={3} px={0}>
+      <AccordionButton>
         <Text
           variant="body2"
           fontWeight={700}
@@ -42,13 +45,14 @@ export const UploadAccordion = () => (
 
 export const PolicyAccordion = ({ chainName }: { chainName: string }) => (
   <Accordion
-    position="relative"
     allowToggle
     defaultIndex={[0]}
     variant="transparent"
+    position="sticky"
+    top={0}
   >
     <AccordionItem borderTop="none" borderColor="gray.700">
-      <AccordionButton py={3} px={0}>
+      <AccordionButton>
         <Text
           variant="body2"
           fontWeight={700}
@@ -80,21 +84,6 @@ export const PolicyAccordion = ({ chainName }: { chainName: string }) => (
           Choosing “Immutable” will not allow you to make any changes with this
           module ever.
         </Text>
-        <Button
-          variant="ghost-secondary"
-          size="sm"
-          px="1 !important"
-          rightIcon={
-            <CustomIcon
-              name="chevron-right"
-              color="secondary.main"
-              boxSize={3}
-              m={0}
-            />
-          }
-        >
-          See Initia Doc
-        </Button>
       </AccordionPanel>
     </AccordionItem>
   </Accordion>
diff --git a/src/lib/pages/publish-module/components/leaflet/index.tsx b/src/lib/pages/publish-module/components/leaflet/index.tsx
index fea09caf9..e7a09a307 100644
--- a/src/lib/pages/publish-module/components/leaflet/index.tsx
+++ b/src/lib/pages/publish-module/components/leaflet/index.tsx
@@ -21,30 +21,31 @@ import { CustomIcon } from "lib/components/icon";
 
 import { metadata } from "./metadata";
 
-const TitleContainer = chakra(Flex, {
-  baseStyle: {
-    bg: "gray.700",
-    fontSize: "14px",
-    color: "text.main",
-    fontWeight: 600,
-    p: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    wordBreak: "break-all",
-    whiteSpace: "pre",
-  },
-});
+const TitleContainer = (props: GridItemProps) => (
+  <GridItem
+    display="flex"
+    bg="gray.700"
+    fontSize="14px"
+    color="text.main"
+    fontWeight={600}
+    p={1}
+    justifyContent="center"
+    wordBreak="break-all"
+    whiteSpace="pre"
+    alignItems="center"
+    {...props}
+  />
+);
 
 const ContentContainer = (props: GridItemProps) => (
   <GridItem
-    sx={{
-      backgroundColor: "gray.900",
-      color: "text.main",
-      whiteSpace: "pre-wrap",
-      p: "12px 16px",
-      fontSize: "14px",
-      height: "full",
-    }}
+    display="flex"
+    bgColor="gray.900"
+    color="text.main"
+    whiteSpace="pre-wrap"
+    p="12px 16px"
+    fontSize="14px"
+    h="full"
     {...props}
   />
 );
@@ -53,57 +54,86 @@ const GridTemplate = chakra(Grid, {
   baseStyle: {
     gridTemplateColumns: "140px repeat(3, 1fr)",
     columnGap: "2px",
-    rowGap: "4px",
+    rowGap: "2px",
   },
 });
 
 const Header = () => (
-  <>
+  <GridTemplate>
     {metadata.header.map((header) => (
       <TitleContainer key={header}>{header}</TitleContainer>
     ))}
-  </>
+  </GridTemplate>
 );
 
-const columnMapper = (col: string[]) => (
-  <Flex key={JSON.stringify(col)} direction="column" gap="2px">
-    {col.map((row) => (
-      <ContentContainer key={row} dangerouslySetInnerHTML={{ __html: row }} />
-    ))}
-  </Flex>
-);
+const rowMapper = (row: string[]) =>
+  row.map((each, idx) => (
+    <ContentContainer
+      key={each + idx.toString()}
+      dangerouslySetInnerHTML={{ __html: each }}
+    />
+  ));
+
+const centerRowMapper = (row: string[]) =>
+  row.map((each, idx) => (
+    <ContentContainer
+      key={each + idx.toString()}
+      dangerouslySetInnerHTML={{ __html: each }}
+      alignItems="center"
+    />
+  ));
 
 const StructContent = () => (
-  <>
-    <TitleContainer>fields</TitleContainer>
-    {metadata.fields.map(columnMapper)}
-  </>
+  <GridTemplate mt={1}>
+    <TitleContainer rowSpan={2}>fields</TitleContainer>
+    <ContentContainer
+      rowSpan={2}
+      dangerouslySetInnerHTML={{ __html: metadata.fields[0][0] }}
+    />
+    {metadata.fields.slice(1).map(rowMapper)}
+  </GridTemplate>
 );
 
 const ExposedFnsContent = () => (
-  <>
-    <TitleContainer>visibility</TitleContainer>
-    {metadata.visibility.map(columnMapper)}
-    <TitleContainer>is_entry</TitleContainer>
-    {metadata.is_entry.map(columnMapper)}
-    <TitleContainer>parameter</TitleContainer>
-    <ContentContainer colSpan={3}>{metadata.parameter}</ContentContainer>
-    <TitleContainer>generic_type_{"\n"}params</TitleContainer>
-    <GridItem
-      colSpan={3}
-      display="grid"
-      gridTemplateColumns="repeat(3, minmax(0, 1fr))"
-      gap="2px"
-    >
-      <ContentContainer colSpan={3}>
-        {metadata.generic_type_params[0]}
-      </ContentContainer>
-      {metadata.generic_type_params[1].map((title) => (
-        <TitleContainer key={title.toString()}>{title}</TitleContainer>
-      ))}
-      {(metadata.generic_type_params[2] as Array<string[]>).map(columnMapper)}
-    </GridItem>
-  </>
+  <Flex direction="column" rowGap={1} mt={1}>
+    <GridTemplate>
+      <TitleContainer rowSpan={3}>visibility</TitleContainer>
+      {metadata.visibility.map(centerRowMapper)}
+    </GridTemplate>
+    <GridTemplate>
+      <TitleContainer rowSpan={2}>is_entry</TitleContainer>
+      {metadata.is_entry.map(centerRowMapper)}
+    </GridTemplate>
+    <GridTemplate>
+      <TitleContainer>parameter</TitleContainer>
+      <ContentContainer colSpan={3}>{metadata.parameter}</ContentContainer>
+    </GridTemplate>
+    <GridTemplate>
+      <TitleContainer rowSpan={3}>generic_type_{"\n"}params</TitleContainer>
+      <GridItem
+        colSpan={3}
+        display="grid"
+        gridTemplateColumns="repeat(3, minmax(0, 1fr))"
+        gap="2px"
+      >
+        <ContentContainer colSpan={3}>
+          {metadata.generic_type_params[0]}
+        </ContentContainer>
+        {metadata.generic_type_params[1].map((title) => (
+          <TitleContainer key={title.toString()}>{title}</TitleContainer>
+        ))}
+        <ContentContainer
+          rowSpan={2}
+          dangerouslySetInnerHTML={{
+            __html: metadata.generic_type_params[2][0][0],
+          }}
+        />
+        {(metadata.generic_type_params[2].slice(1) as Array<string[]>).map(
+          rowMapper
+        )}
+      </GridItem>
+    </GridTemplate>
+  </Flex>
 );
 export const Leaflet = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -150,10 +180,8 @@ export const Leaflet = () => {
               but current fields can be removed. Example for struct fields are
               displayed below
             </Text>
-            <GridTemplate>
-              <Header />
-              <StructContent />
-            </GridTemplate>
+            <Header />
+            <StructContent />
             <Heading variant="h6" as="h6" mt={6}>
               Exposed Functions
             </Heading>
@@ -162,10 +190,10 @@ export const Leaflet = () => {
               subset of republished module. Example for exposed_functions
               properties changes are displayed below
             </Text>
-            <GridTemplate>
-              <Header />
-              <ExposedFnsContent />
-            </GridTemplate>
+            {/* Exposed Functions Table Content */}
+            <Header />
+            <ExposedFnsContent />
+            {/*  */}
             <Heading variant="h6" as="h6" mt={6}>
               Friends
             </Heading>
diff --git a/src/lib/pages/publish-module/components/leaflet/metadata.ts b/src/lib/pages/publish-module/components/leaflet/metadata.ts
index 2dc061e64..e00de6b76 100644
--- a/src/lib/pages/publish-module/components/leaflet/metadata.ts
+++ b/src/lib/pages/publish-module/components/leaflet/metadata.ts
@@ -2,6 +2,7 @@ import { structToString } from "./utils";
 
 const indent = " ".repeat(4);
 
+// Render by row
 export const metadata = {
   header: ["Example", "Published module", "Able to do", "Unable to do"],
   fields: [
@@ -17,13 +18,13 @@ export const metadata = {
       }),
       structToString({
         a: "u64",
-        b: "bool, // remain the same",
+        b: "<span style='font-weight: 700;'>u64</span>, // cannot change type",
       }),
     ],
     [
       structToString({
         a: "u64",
-        b: "<span style='font-weight: 700;'>u64</span>, // cannot change type",
+        b: "bool, // remain the same",
       }),
       structToString({
         a: "u64",
@@ -33,18 +34,21 @@ export const metadata = {
     ],
   ],
   visibility: [
-    ["’public’ or ’script’", "’friend’", "’private’"],
+    ["’public’ or ’script’", "same as current value", "change to new value"],
     [
-      "same as current value",
+      "’friend’",
       "Can be changed to ‘public’ or maintain as ‘friend’",
-      "Can be changed to any value",
+      "Change to script",
     ],
-    ["change to new value", "Change to script", "-"],
+    ["’private’", "Can be changed to any value", "-"],
   ],
   is_entry: [
-    ["’true’", "’false’"],
-    ["must remain ’true’", "Can be changed to ’true’ or maintain as ’false’"],
-    ["Change to ’false’", "Can be changed to ’true’ or maintain as ’false’"],
+    ["’true’", "must remain ’true’", "Change to ’false’"],
+    [
+      "’false’",
+      "Can be changed to ’true’ or maintain as ’false’",
+      "Can be changed to ’true’ or maintain as ’false’",
+    ],
   ],
   parameter: ["Ensure the old parameters remain unchanged"],
   generic_type_params: [
@@ -54,15 +58,15 @@ export const metadata = {
     ["Example", "Can be", "Cannot be"],
     [
       [
-        `public fun example_function&lt;T0: store + drop, T1: store&gt;(...): ... { \n${indent}... \n }`,
+        `<p>public fun example_function&lt;T0: store + drop, T1: store&gt;(...): ... { \n${indent}... \n }</p>`,
       ],
       [
-        `public fun example_function&lt;T0: store + drop, T1: store&gt;(...): ... { \n${indent}... <span style='color: #B7B7B7;'>// can remain same</span> \n}`,
-        `public fun example_function&lt;T0, T1: store&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// ability can be removed</span>\n}`,
+        `<p>public fun example_function&lt;T0: store + drop, T1: store&gt;(...): ... { \n${indent}... <span style='color: #B7B7B7;'>// can remain same</span> \n}</p>`,
+        `<p>public fun example_function&lt;T0: store + drop + copy, T1: store&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// cannot add new ability</span>\n}</p>`,
       ],
       [
-        `public fun example_function&lt;T0: store + drop + copy, T1: store&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// cannot add new ability</span>\n}`,
-        `public fun example_function&lt;T0: store + drop&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// T1 cannot be removed</span>\n}`,
+        `<p>public fun example_function&lt;T0, T1: store&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// ability can be removed</span>\n}</p>`,
+        `<p>public fun example_function&lt;T0: store + drop&gt;(...): ... {\n${indent}... <span style='color: #B7B7B7;'>// T1 cannot be removed</span>\n}</p>`,
       ],
     ],
   ],
diff --git a/src/lib/pages/publish-module/components/leaflet/utils.ts b/src/lib/pages/publish-module/components/leaflet/utils.ts
index 22677d155..8711e3963 100644
--- a/src/lib/pages/publish-module/components/leaflet/utils.ts
+++ b/src/lib/pages/publish-module/components/leaflet/utils.ts
@@ -9,5 +9,5 @@ export const structToString = (obj: Record<string, string>, indent = 4) => {
       : "";
     return `${spacing}${key}: ${val.trim()}${commentRender}`;
   });
-  return `struct ExampleStruct {\n${keyValuePairs.join(",\n")}\n}`;
+  return `<p>struct ExampleStruct {\n${keyValuePairs.join(",\n")}\n}</p>`;
 };
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index bf4899954..a35d1e60e 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -1,4 +1,4 @@
-import { Text, Grid, GridItem, Heading, Flex, Button } from "@chakra-ui/react";
+import { Text, Grid, Heading, Flex, Button, Box } from "@chakra-ui/react";
 import { useFieldArray, useForm } from "react-hook-form";
 
 import { useCelatoneApp, useMoveConfig } from "lib/app-provider";
@@ -80,17 +80,14 @@ export const PublishModule = () => {
 
   return (
     <>
-      <PageContainer>
+      <PageContainer display="unset" p={0}>
         <Grid
-          templateAreas={`
-          "prespace header postspace"
-          "prespace upload upload-accordion"
-          "prespace policy policy-accordion"
-          `}
-          templateColumns="1fr 4fr 2fr"
-          gap="48px"
+          templateColumns="1fr 6fr 4fr 1fr"
+          columnGap="16px"
+          rowGap="48px"
+          p={{ base: "16px", md: "48px" }}
         >
-          <GridItem area="header">
+          <Box gridArea="1 / 2">
             <Heading as="h5" variant="h5" textAlign="center">
               {PUBLISH_MODULE_TEXT.header}
             </Heading>
@@ -101,10 +98,11 @@ export const PublishModule = () => {
               subtitle={PUBLISH_MODULE_TEXT.connectWallet}
               mt={12}
             />
-          </GridItem>
-          <GridItem area="upload">
+          </Box>
+          {/* Upload File Section */}
+          <Box gridArea="2 / 2">
             <Heading as="h6" variant="h6" fontWeight={600}>
-              Upload .mv files(s)
+              Upload .mv file(s)
             </Heading>
             <Flex gap={6} flexDirection="column" my={6}>
               {fields.map((field, idx) => (
@@ -131,11 +129,9 @@ export const PublishModule = () => {
             >
               Publish More Modules
             </Button>
-          </GridItem>
-          <GridItem area="upload-accordion">
-            <UploadAccordion />
-          </GridItem>
-          <GridItem area="policy">
+          </Box>
+          {/* Upgrade Policy Section */}
+          <Box gridArea="3 / 2">
             <Heading as="h6" variant="h6" fontWeight={600}>
               Upgrade Policy
             </Heading>
@@ -169,10 +165,13 @@ export const PublishModule = () => {
               <p>Transaction Fee:</p>
               <EstimatedFeeRender estimatedFee={undefined} loading={false} />
             </Flex>
-          </GridItem>
-          <GridItem area="policy-accordion">
+          </Box>
+          <Box gridArea="2 / 3" pl="32px">
+            <UploadAccordion />
+          </Box>
+          <Box gridArea="3 / 3" pl="32px">
             <PolicyAccordion chainName={chainPrettyName} />
-          </GridItem>
+          </Box>
         </Grid>
       </PageContainer>
       <Footer isLoading={false} fieldAmount={fields.length} />
diff --git a/src/lib/styles/globals.css b/src/lib/styles/globals.css
index ed1ceb774..62bbfb20a 100644
--- a/src/lib/styles/globals.css
+++ b/src/lib/styles/globals.css
@@ -9,3 +9,59 @@
 .accordion-stepper-wrapper:not(:last-of-type) div#after-stepper {
   visibility: visible;
 }
+
+body {
+  margin: 0;
+}
+
+h1 {
+  color: #fff;
+  font-family: sans-serif;
+  letter-spacing: 4vw;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+  word-spacing: 8vw;
+  z-index: 1;
+}
+
+ul {
+  display: grid;
+
+  grid-template-columns: repeat(5, 20vw);
+  grid-template-rows: repeat(15, 20vh);
+
+  height: 400vh;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  background: #6c5ce7;
+  position: sticky;
+  top: 0;
+}
+
+li:nth-of-type(1) {
+  grid-area: 10 / 1;
+}
+
+li:nth-of-type(2) {
+  grid-area: 3 / 2;
+}
+
+li:nth-of-type(3) {
+  grid-area: 7 / 3;
+}
+
+li:nth-of-type(4) {
+  grid-area: 15 / 4;
+}
+
+li:nth-of-type(5) {
+  grid-area: 12 / 5;
+}

From f6ef83b297b806ade3ef6afa7772d52cd4976dc7 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 15 Sep 2023 19:45:19 +0700
Subject: [PATCH 052/368] fix: remove css test residue

---
 src/lib/styles/globals.css | 56 --------------------------------------
 1 file changed, 56 deletions(-)

diff --git a/src/lib/styles/globals.css b/src/lib/styles/globals.css
index 62bbfb20a..ed1ceb774 100644
--- a/src/lib/styles/globals.css
+++ b/src/lib/styles/globals.css
@@ -9,59 +9,3 @@
 .accordion-stepper-wrapper:not(:last-of-type) div#after-stepper {
   visibility: visible;
 }
-
-body {
-  margin: 0;
-}
-
-h1 {
-  color: #fff;
-  font-family: sans-serif;
-  letter-spacing: 4vw;
-  margin: 0;
-  position: fixed;
-  top: 0;
-  text-align: center;
-  text-transform: uppercase;
-  width: 100%;
-  word-spacing: 8vw;
-  z-index: 1;
-}
-
-ul {
-  display: grid;
-
-  grid-template-columns: repeat(5, 20vw);
-  grid-template-rows: repeat(15, 20vh);
-
-  height: 400vh;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-li {
-  background: #6c5ce7;
-  position: sticky;
-  top: 0;
-}
-
-li:nth-of-type(1) {
-  grid-area: 10 / 1;
-}
-
-li:nth-of-type(2) {
-  grid-area: 3 / 2;
-}
-
-li:nth-of-type(3) {
-  grid-area: 7 / 3;
-}
-
-li:nth-of-type(4) {
-  grid-area: 15 / 4;
-}
-
-li:nth-of-type(5) {
-  grid-area: 12 / 5;
-}

From 81a77733f84e14abde5a6703119d2077a99e7dfc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 18 Sep 2023 12:02:56 +0700
Subject: [PATCH 053/368] fix: error state

---
 .../abi/args-form/field/ArgFieldWidget.tsx    | 14 ++++++-----
 .../components/abi/args-form/field/index.tsx  | 25 ++++++-------------
 .../components/abi/args-form/field/utils.ts   |  4 +--
 src/lib/components/abi/args-form/index.tsx    | 11 +++++---
 src/lib/utils/abi.ts                          | 24 +++++++++++++++---
 5 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index 56f5e8b20..926b9590d 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -20,13 +20,13 @@ const boolOptions = [
 
 interface ArgFieldWidgetProps {
   type: string;
-  watcher: Option<string>;
+  value: Option<string>;
   onChange: ControllerRenderProps["onChange"];
 }
 
 export const ArgFieldWidget = ({
   type,
-  watcher,
+  value,
   onChange,
 }: ArgFieldWidgetProps) => {
   if (
@@ -38,8 +38,8 @@ export const ArgFieldWidget = ({
     return (
       <Input
         size="md"
-        placeholder={getInputPlaceholder(type, watcher === undefined)}
-        value={watcher ?? ""}
+        placeholder={getInputPlaceholder(type, value === undefined)}
+        // value={watcher ?? ""}
         onChange={onChange}
       />
     );
@@ -51,7 +51,9 @@ export const ArgFieldWidget = ({
         size="md"
         options={boolOptions}
         placeholder={" "}
-        value={boolOptions.find(({ value }) => value === watcher)}
+        value={boolOptions.find(
+          ({ value: optionValue }) => optionValue === value
+        )}
         onChange={(e) => onChange(e?.value)}
         menuPosition="fixed"
         chakraStyles={{
@@ -82,7 +84,7 @@ export const ArgFieldWidget = ({
       minH="112px"
       h="fit-content"
       placeholder={" "}
-      value={watcher ?? ""}
+      value={value ?? ""}
       onChange={onChange}
     />
   );
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index dee1c2f7f..7635371de 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -8,7 +8,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { useCallback } from "react";
-import { useWatch, type Control, useController } from "react-hook-form";
+import { type Control, useController } from "react-hook-form";
 
 import { useValidateAddress } from "lib/app-provider";
 import type { AbiFormData } from "lib/types";
@@ -46,16 +46,11 @@ export const ArgFieldTemplate = ({
   const type = isOptional ? param.split(/<(.*)>/)[1] : param;
   const rules = getRules(type, isOptional, isReadOnly, isValidArgAddress);
 
-  const name = `${index}`;
-  const watcher = useWatch({
-    name,
-    control,
-  });
   const {
-    field,
+    field: { value, onChange, ...fieldProps },
     fieldState: { isTouched },
   } = useController({
-    name,
+    name: `${index}`,
     control,
     rules,
   });
@@ -63,7 +58,7 @@ export const ArgFieldTemplate = ({
 
   const size = "md";
   const isSigner = type === "&signer";
-  const isNull = watcher === undefined;
+  const isNull = value === undefined;
   return (
     <Box>
       <FormControl
@@ -77,13 +72,9 @@ export const ArgFieldTemplate = ({
         isInvalid={isError}
         isReadOnly={isReadOnly}
         isDisabled={(isSigner && !isReadOnly) || isNull}
-        {...field}
+        {...fieldProps}
       >
-        <ArgFieldWidget
-          type={type}
-          watcher={watcher}
-          onChange={field.onChange}
-        />
+        <ArgFieldWidget type={type} value={value} onChange={onChange} />
         <FormLabel className={`${size}-label`} bgColor="background.main">
           {param}
         </FormLabel>
@@ -98,8 +89,8 @@ export const ArgFieldTemplate = ({
         <Checkbox
           pt="2px"
           pl={2}
-          isChecked={watcher === undefined}
-          onChange={(e) => field.onChange(e.target.checked ? undefined : "")}
+          isChecked={value === undefined}
+          onChange={(e) => onChange(e.target.checked ? undefined : "")}
         >
           <Text variant="body3">Send as null</Text>
         </Checkbox>
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
index 2b80ecc33..36ed6ae0e 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -12,9 +12,7 @@ const validateNull = (v: Option<string>) =>
 const validateUint = (uintType: string) => (v: string) => {
   const value = parseInt(v);
   const maxValue = 2 ** parseInt(uintType.slice(1)) - 1;
-  return value >= 0 && value <= maxValue
-    ? undefined
-    : `need to be within 0 and ${maxValue}`;
+  return value >= 0 && value <= maxValue ? undefined : `need to be ${uintType}`;
 };
 
 const validateBool = (v: string) =>
diff --git a/src/lib/components/abi/args-form/index.tsx b/src/lib/components/abi/args-form/index.tsx
index 7e8c25c96..2efb226a3 100644
--- a/src/lib/components/abi/args-form/index.tsx
+++ b/src/lib/components/abi/args-form/index.tsx
@@ -46,6 +46,12 @@ export const ArgsForm = ({
     trigger();
   }, [trigger]);
 
+  useEffect(
+    () => propsOnErrors?.(formatErrors(errors)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(errors), propsOnErrors]
+  );
+
   return (
     <Flex direction="column" gap={4}>
       <Heading variant="h6" as="h6" color="text.main">
@@ -53,10 +59,7 @@ export const ArgsForm = ({
       </Heading>
       {params.map((param, index) => {
         control.register(`${index}`, {
-          onChange: () => {
-            propsOnChange?.(getValues());
-            propsOnErrors?.(formatErrors(errors));
-          },
+          onChange: () => propsOnChange?.(getValues()),
         });
         return (
           <ArgFieldTemplate
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 5eb9726a8..ddaf1cb47 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -1,6 +1,11 @@
 import { BCS } from "@initia/initia.js";
 
-import type { ExposedFunction, Option, ResponseABI } from "lib/types";
+import type {
+  AbiFormData,
+  ExposedFunction,
+  Option,
+  ResponseABI,
+} from "lib/types";
 
 export const checkAvailability = (fn: ExposedFunction) =>
   fn.visibility === "public" && (fn.is_view || fn.is_entry);
@@ -75,8 +80,10 @@ const getArgValue = ({
   }
 };
 
-export const serializeArg = (arg: { type: string; value: Option<string> }) => {
-  const bcs = BCS.getInstance();
+const serializeArg = (
+  arg: { type: string; value: Option<string> },
+  bcs: BCS
+) => {
   try {
     const argType = getArgType(arg.type);
     const argValue = getArgValue(arg);
@@ -85,3 +92,14 @@ export const serializeArg = (arg: { type: string; value: Option<string> }) => {
     return "";
   }
 };
+
+export const serializeAbiData = (fn: ExposedFunction, abiData: AbiFormData) => {
+  const bcs = BCS.getInstance();
+  const serializedArgs = fn.params.map((type, index) =>
+    serializeArg({ type, value: abiData.args[index] }, bcs)
+  );
+  return {
+    typeArgs: fn.generic_type_params.map((_, index) => abiData.typeArgs[index]),
+    args: serializedArgs,
+  };
+};

From 5826e525c639e6e55eaccbf8f46f191029af5b07 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 18 Sep 2023 15:32:04 +0700
Subject: [PATCH 054/368] feat: view fn

---
 CHANGELOG.md                                  |   1 +
 src/lib/app-provider/env.ts                   |   1 +
 src/lib/components/abi/AbiForm.tsx            |  46 ++--
 src/lib/components/abi/args-form/index.tsx    |  10 +-
 src/lib/components/abi/types-form/index.tsx   |   8 +-
 src/lib/pages/interaction/_test.tsx           | 206 ++++++++++++++++++
 .../interaction/component/form/ViewArea.tsx   | 131 +++++++++--
 .../pages/interaction/component/main/body.tsx |  10 +-
 src/lib/services/module.ts                    |  18 +-
 src/lib/services/moduleService.ts             |  42 ++++
 10 files changed, 417 insertions(+), 56 deletions(-)
 create mode 100644 src/lib/pages/interaction/_test.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 129eef675..65da0f95c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#533](https://github.com/alleslabs/celatone-frontend/pull/533) Wire up initia view function
 - [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Add initia abi form
 - [#521](https://github.com/alleslabs/celatone-frontend/pull/521) Initia module interaction function panel and selected function info accordion
 - [#515](https://github.com/alleslabs/celatone-frontend/pull/515) Initia select module drawer wireup
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 74f85ad89..b74298013 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -95,4 +95,5 @@ export enum CELATONE_QUERY_KEYS {
   // MODULES
   ACCOUNT_MODULES = "CELATONE_QUERY_ACCOUNT_MODULES",
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
+  FUNCTION_VIEW = "CELATONE_QUERY_FUNCTION_VIEW",
 }
diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
index cce57b23e..315b30ee5 100644
--- a/src/lib/components/abi/AbiForm.tsx
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Flex, Heading } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
 import type { AbiFormData, ExposedFunction } from "lib/types";
@@ -28,25 +28,35 @@ export const AbiForm = ({
   return (
     <Flex direction="column" gap={4}>
       {Object.keys(typeArgs).length > 0 && (
-        <TypesForm
-          genericTypeParams={fn.generic_type_params}
-          initialData={typeArgs}
-          propsOnChange={(value) => {
-            setValue("typeArgs", value);
-            propsOnChange?.(getValues());
-          }}
-        />
+        <Flex direction="column" gap={4}>
+          <Heading variant="h6" as="h6" color="text.main">
+            type_args
+          </Heading>
+          <TypesForm
+            genericTypeParams={fn.generic_type_params}
+            initialData={typeArgs}
+            propsOnChange={(value) => {
+              setValue("typeArgs", value);
+              propsOnChange?.(getValues());
+            }}
+          />
+        </Flex>
       )}
       {Object.keys(args).length > 0 && (
-        <ArgsForm
-          params={fn.params}
-          initialData={args}
-          propsOnChange={(value) => {
-            setValue("args", value);
-            propsOnChange?.(getValues());
-          }}
-          propsOnErrors={propsOnErrors}
-        />
+        <Flex direction="column" gap={4}>
+          <Heading variant="h6" as="h6" color="text.main">
+            args
+          </Heading>
+          <ArgsForm
+            params={fn.params}
+            initialData={args}
+            propsOnChange={(value) => {
+              setValue("args", value);
+              propsOnChange?.(getValues());
+            }}
+            propsOnErrors={propsOnErrors}
+          />
+        </Flex>
       )}
     </Flex>
   );
diff --git a/src/lib/components/abi/args-form/index.tsx b/src/lib/components/abi/args-form/index.tsx
index 2efb226a3..aaf326388 100644
--- a/src/lib/components/abi/args-form/index.tsx
+++ b/src/lib/components/abi/args-form/index.tsx
@@ -1,4 +1,3 @@
-import { Flex, Heading } from "@chakra-ui/react";
 import { useEffect } from "react";
 import type { FormState } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -8,7 +7,6 @@ import type { AbiFormData, Option } from "lib/types";
 import { ArgFieldTemplate } from "./field";
 
 interface ArgsFormProps {
-  title?: string;
   params: string[];
   initialData: AbiFormData["args"];
   propsOnChange?: (data: AbiFormData["args"]) => void;
@@ -25,7 +23,6 @@ const formatErrors = (
   ]);
 
 export const ArgsForm = ({
-  title = "args",
   params,
   initialData,
   propsOnChange,
@@ -53,10 +50,7 @@ export const ArgsForm = ({
   );
 
   return (
-    <Flex direction="column" gap={4}>
-      <Heading variant="h6" as="h6" color="text.main">
-        {title}
-      </Heading>
+    <>
       {params.map((param, index) => {
         control.register(`${index}`, {
           onChange: () => propsOnChange?.(getValues()),
@@ -72,6 +66,6 @@ export const ArgsForm = ({
           />
         );
       })}
-    </Flex>
+    </>
   );
 };
diff --git a/src/lib/components/abi/types-form/index.tsx b/src/lib/components/abi/types-form/index.tsx
index 558f401b6..eb484fde4 100644
--- a/src/lib/components/abi/types-form/index.tsx
+++ b/src/lib/components/abi/types-form/index.tsx
@@ -1,4 +1,3 @@
-import { Flex, Heading } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
 import type { AbiFormData, GenericTypeParam } from "lib/types";
@@ -29,10 +28,7 @@ export const TypesForm = ({
   };
 
   return (
-    <Flex direction="column" gap={4}>
-      <Heading variant="h6" as="h6" color="text.main">
-        type_args
-      </Heading>
+    <>
       {genericTypeParams.map(({ constraints }, index) => (
         <TypeFieldInput
           key={constraints.join() + index.toString()}
@@ -42,6 +38,6 @@ export const TypesForm = ({
           onChange={handleOnChange(index)}
         />
       ))}
-    </Flex>
+    </>
   );
 };
diff --git a/src/lib/pages/interaction/_test.tsx b/src/lib/pages/interaction/_test.tsx
new file mode 100644
index 000000000..4af17e5be
--- /dev/null
+++ b/src/lib/pages/interaction/_test.tsx
@@ -0,0 +1,206 @@
+/* eslint-disable */
+import { Button, Flex, Text } from "@chakra-ui/react";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import type { AxiosError } from "axios";
+import { Msg, MsgExecute, MsgPublish, MsgScript } from "@initia/initia.js";
+
+import {
+  CELATONE_QUERY_KEYS,
+  useCurrentChain,
+  useFabricateFee,
+  useLCDEndpoint,
+  useSimulateFeeQuery,
+} from "lib/app-provider";
+import type { RpcQueryError } from "lib/types";
+import { EncodeObject } from "@cosmjs/proto-signing";
+
+const toEncodeObject = (msgs: Msg[]): EncodeObject[] => {
+  return msgs.map((msg) => ({
+    typeUrl: msg.toData()["@type"],
+    value: msg.toProto(),
+  }));
+};
+
+export const InteractionTest = () => {
+  // const lcdEndpoint = useBaseApiRoute("rest");
+  const lcdEndpoint = useLCDEndpoint();
+  const accountAddr = "0x589b1e861579c3f07092859db5f8963e1dac50f1";
+  const moduleName = "usernames";
+  const functionName = "get_config";
+  const msg = JSON.stringify({ type_args: [], args: [] });
+
+  // ----------------- QUERY ----------------- //
+  const { refetch } = useQuery(
+    [CELATONE_QUERY_KEYS.CONTRACT_QUERY, lcdEndpoint, accountAddr, msg],
+    async () => {
+      const { data } = await axios.post(
+        `${lcdEndpoint}/initia/move/v1/accounts/${accountAddr}/modules/${moduleName}/view_functions/${functionName}`,
+        msg
+      );
+      return data;
+    },
+    {
+      enabled: false,
+      retry: false,
+      cacheTime: 0,
+      onSettled() {
+        console.log("onSettled");
+      },
+      onSuccess(data) {
+        console.log("onSuccess", data);
+        window.alert(JSON.stringify(data, null, 2));
+      },
+      onError(err: AxiosError<RpcQueryError>) {
+        console.log("onError", err);
+      },
+    }
+  );
+
+  // ----------------- EXECUTE ----------------- //
+  // TYPEURL need to be registered in registry
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
+  const fabricateFee = useFabricateFee();
+
+  const execute = async () => {
+    const client = await getSigningCosmWasmClient();
+
+    if (!client || !address) {
+      window.alert("Please connect wallet");
+      return;
+    }
+
+    const msgs = [
+      // new MsgExecute(
+      //   address,
+      //   "0xee0019b10a5d5db025ac3dc15f3621cad3684a14",
+      //   "StdCoin",
+      //   "init"
+      // ),
+      // new MsgExecute(
+      //   address,
+      //   "0xee0019b10a5d5db025ac3dc15f3621cad3684a14",
+      //   "StdCoin",
+      //   "register"
+      // ),
+      new MsgExecute(
+        address,
+        "0xee0019b10a5d5db025ac3dc15f3621cad3684a14",
+        "StdCoin",
+        "mint",
+        undefined,
+        ["AAAAAAAAAAAAAAAA7gAZsQpdXbAlrD3BXzYhytNoShQ=", "QEIPAAAAAAA="]
+      ),
+    ];
+
+    const fee = fabricateFee(160347);
+
+    const txInfo = await client.signAndBroadcast(
+      address,
+      toEncodeObject(msgs),
+      fee
+    );
+
+    window.alert(JSON.stringify(txInfo, null, 2));
+  };
+
+  // ----------------- PUBLISH ----------------- //
+  const publish = async () => {
+    const client = await getSigningCosmWasmClient();
+
+    if (!client || !address) {
+      window.alert("Please connect wallet");
+      return;
+    }
+
+    const msgs = [
+      new MsgPublish(
+        address,
+        [
+          "oRzrCwYAAAALAQAIAggkAywxBF0IBWVaB78BsQEI8AJABrADFArEAxoM3gNSDbAEAgAAAQEBAgEDAAQIAAAFAAABCgUBAAEBDAUBAAEBDQUBAAEDDwcAARIEAQABAAYAAQAABwIBAAAIAAEAAxAEBQABEQcIAQACEwAKAAEHCwwBAAEUDQEBAAEIAAEBAAQGBgYHBggGAQYMAAMGDAUDAwsCAQgBCwMBCAELBAEIAQEKAgEIBQEIAQQGDAgFCAUCAwsCAQkACwMBCQALBAEJAAIGCAALBgEIAQEFAgMGCwQBCQABCwYBCQACBQsGAQkAB1N0ZENvaW4EY29pbgZzaWduZXIGc3RyaW5nCENhcFN0b3JlA1N0ZARpbml0BG1pbnQIcmVnaXN0ZXIEYnVybg5CdXJuQ2FwYWJpbGl0eQZmcmVlemUQRnJlZXplQ2FwYWJpbGl0eQ5NaW50Q2FwYWJpbGl0eQtkdW1teV9maWVsZAZTdHJpbmcEdXRmOAppbml0aWFsaXplBENvaW4KYWRkcmVzc19vZgdkZXBvc2l0AAAAAAAAAAAAAAAA7gAZsQpdXbAlrD3BXzYhytNoShQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQoCCQhTdGQgQ29pbgoCBQRTVERDAAIDCQsCAQgBCwsDAQgBBwsEAQgBAQIBDgEAAAQAAxEKAAcAEQMHAREDMQg4AAwDDAIMAQsACwELAgsDEgAtAAIBAAQBAAkNCwARBSsADAMLAgsDEAA4AQwECwELBDgCAgIABAABAwsAOAMCAAIA",
+        ],
+        0
+      ),
+    ];
+
+    const fee = fabricateFee(160347);
+
+    const txInfo = await client.signAndBroadcast(
+      address,
+      toEncodeObject(msgs),
+      fee
+    );
+
+    window.alert(JSON.stringify(txInfo, null, 2));
+  };
+
+  // ----------------- SIMULATE ----------------- //
+  const composedTxMsg = [
+    new MsgPublish(
+      "init1acqpnvg2t4wmqfdv8hq47d3petfksjs59gckf3",
+      [
+        "oRzrCwYAAAALAQAIAggkAywxBF0IBWVaB78BsQEI8AJABrADFArEAxoM3gNSDbAEAgAAAQEBAgEDAAQIAAAFAAABCgUBAAEBDAUBAAEBDQUBAAEDDwcAARIEAQABAAYAAQAABwIBAAAIAAEAAxAEBQABEQcIAQACEwAKAAEHCwwBAAEUDQEBAAEIAAEBAAQGBgYHBggGAQYMAAMGDAUDAwsCAQgBCwMBCAELBAEIAQEKAgEIBQEIAQQGDAgFCAUCAwsCAQkACwMBCQALBAEJAAIGCAALBgEIAQEFAgMGCwQBCQABCwYBCQACBQsGAQkAB1N0ZENvaW4EY29pbgZzaWduZXIGc3RyaW5nCENhcFN0b3JlA1N0ZARpbml0BG1pbnQIcmVnaXN0ZXIEYnVybg5CdXJuQ2FwYWJpbGl0eQZmcmVlemUQRnJlZXplQ2FwYWJpbGl0eQ5NaW50Q2FwYWJpbGl0eQtkdW1teV9maWVsZAZTdHJpbmcEdXRmOAppbml0aWFsaXplBENvaW4KYWRkcmVzc19vZgdkZXBvc2l0AAAAAAAAAAAAAAAA7gAZsQpdXbAlrD3BXzYhytNoShQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQoCCQhTdGQgQ29pbgoCBQRTVERDAAIDCQsCAQgBCwsDAQgBBwsEAQgBAQIBDgEAAAQAAxEKAAcAEQMHAREDMQg4AAwDDAIMAQsACwELAgsDEgAtAAIBAAQBAAkNCwARBSsADAMLAgsDEAA4AQwECwELBDgCAgIABAABAwsAOAMCAAIA",
+      ],
+      0
+    ),
+  ];
+
+  const { refetch: simulateFee } = useSimulateFeeQuery({
+    enabled: false,
+    messages: toEncodeObject(composedTxMsg),
+    onSuccess: (gasRes) => {
+      window.alert(gasRes);
+    },
+  });
+
+  // ----------------- SCRIPT ----------------- //
+  const script = async () => {
+    const client = await getSigningCosmWasmClient();
+
+    if (!client || !address) {
+      window.alert("Please connect wallet");
+      return;
+    }
+
+    const msgs = [
+      new MsgScript(
+        address,
+        "oRzrCwYAAAAGAQACAwIGBAgCBQoHBxEMCB0gAAAAAQIBAQAAAAEMAAEGCQAFZGVidWcFcHJpbnQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQIAAAABAw4AOAAC",
+        ["0x1::native_uinit::Coin", "0x1::native_uusdc::Coin"]
+      ),
+    ];
+
+    const fee = fabricateFee(80000);
+
+    const txInfo = await client.signAndBroadcast(
+      address,
+      toEncodeObject(msgs),
+      fee
+    );
+
+    window.alert(JSON.stringify(txInfo, null, 2));
+  };
+
+  return (
+    <Flex flexDir="column">
+      <Text fontSize="32px">Testing area</Text>
+      <Flex flexDir="row" my={4} gap={4}>
+        <Button onClick={() => refetch()} width="100px">
+          Query
+        </Button>
+        <Button onClick={() => execute()} width="100px">
+          Execute
+        </Button>
+        <Button onClick={() => publish()} width="100px">
+          Publish
+        </Button>
+        <Button onClick={() => simulateFee()} width="100px">
+          Estimate Fee
+        </Button>
+        <Button onClick={() => script()} width="100px">
+          Script
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interaction/component/form/ViewArea.tsx
index d3e36e1d0..bc24c0220 100644
--- a/src/lib/pages/interaction/component/form/ViewArea.tsx
+++ b/src/lib/pages/interaction/component/form/ViewArea.tsx
@@ -1,38 +1,129 @@
-import { Grid, GridItem } from "@chakra-ui/react";
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  Heading,
+  Spinner,
+  Text,
+} from "@chakra-ui/react";
 import { useState } from "react";
 
-import { AbiForm, ArgsForm } from "lib/components/abi";
-import type { AbiFormData, ExposedFunction, Option } from "lib/types";
-import { getAbiInitialData } from "lib/utils";
+import { AbiForm } from "lib/components/abi";
+import { CustomIcon } from "lib/components/icon";
+import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { DEFAULT_RPC_ERROR } from "lib/data";
+import { useFunctionView } from "lib/services/moduleService";
+import type {
+  Option,
+  AbiFormData,
+  ExposedFunction,
+  HexAddr,
+  JsonDataType,
+} from "lib/types";
+import { getAbiInitialData, jsonPrettify } from "lib/utils";
 
-export const ViewArea = ({ fn }: { fn: ExposedFunction }) => {
-  const [data, setData] = useState<AbiFormData>({
+export const ViewArea = ({
+  address,
+  moduleName,
+  fn,
+}: {
+  address: HexAddr;
+  moduleName: string;
+  fn: ExposedFunction;
+}) => {
+  const [abiData, setAbiData] = useState<AbiFormData>({
     typeArgs: getAbiInitialData(fn.generic_type_params.length),
     args: getAbiInitialData(fn.params.length),
   });
-  const [, setErrors] = useState<[string, string][]>([]);
-  const [res, setRes] = useState<Record<string, Option<string>>>(
-    getAbiInitialData(fn.return.length)
-  );
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+  const [res, setRes] = useState<JsonDataType>(undefined);
+  const [error, setError] = useState<Option<string>>(undefined);
+
+  const {
+    refetch,
+    isFetching: queryFetching,
+    isRefetching: queryRefetching,
+  } = useFunctionView({
+    address,
+    moduleName,
+    fn,
+    abiData,
+    onSuccess: (data) => setRes(JSON.parse(data)),
+    onError: (err) => setError(err.response?.data.message || DEFAULT_RPC_ERROR),
+  });
 
+  const handleQuery = () => {
+    refetch();
+    setError(undefined);
+  };
+
+  const isLoading = queryFetching || queryRefetching;
+  const isDisabled = Boolean(abiErrors.length);
   return (
     <Grid templateColumns="1fr 1fr" gap={6}>
       <GridItem>
         <AbiForm
           fn={fn}
-          initialData={data}
-          propsOnChange={setData}
-          propsOnErrors={setErrors}
+          initialData={abiData}
+          propsOnChange={setAbiData}
+          propsOnErrors={setAbiErrors}
         />
+        <Flex justify="space-between" mt={4}>
+          <Button>TODO: CodeSnippet</Button>
+          <Button
+            variant="primary"
+            fontSize="14px"
+            p="6px 16px"
+            size={{ base: "sm", md: "md" }}
+            onClick={handleQuery}
+            isDisabled={isDisabled}
+            isLoading={isLoading}
+            leftIcon={<CustomIcon name="query" />}
+          >
+            View
+          </Button>
+        </Flex>
       </GridItem>
       <GridItem>
-        <ArgsForm
-          title="Return"
-          params={fn.return}
-          initialData={res}
-          propsOnChange={setRes}
-          isReadOnly
-        />
+        <Flex direction="column" gap={4}>
+          <Heading variant="h6" as="h6" color="text.main">
+            Return
+          </Heading>
+          {error && (
+            <Alert variant="error" alignItems="center" gap={4}>
+              <CustomIcon
+                name="alert-circle-solid"
+                color="error.main"
+                boxSize={4}
+              />
+              <AlertDescription wordBreak="break-word">
+                {error}
+              </AlertDescription>
+            </Alert>
+          )}
+          {res === undefined ? (
+            <Flex
+              direction="column"
+              alignItems="center"
+              gap={4}
+              p="24px 8px"
+              borderRadius="8px"
+              bg="gray.900"
+            >
+              {isLoading && <Spinner size="xl" />}
+              <Text variant="body2" color="text.dark">
+                {isLoading
+                  ? "Viewing ..."
+                  : "Result from viewing function will display here."}
+              </Text>
+            </Flex>
+          ) : (
+            <JsonReadOnly text={jsonPrettify(JSON.stringify(res))} canCopy />
+          )}
+        </Flex>
       </GridItem>
     </Grid>
   );
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interaction/component/main/body.tsx
index 67e7401d4..c59bc5f44 100644
--- a/src/lib/pages/interaction/component/main/body.tsx
+++ b/src/lib/pages/interaction/component/main/body.tsx
@@ -5,7 +5,7 @@ import { ExecuteArea, ViewArea } from "../form";
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
-import type { ExposedFunction, Option } from "lib/types";
+import type { ExposedFunction, HexAddr, Option } from "lib/types";
 
 import { SelectedFunctionCard } from "./SelectedFunctionCard";
 
@@ -20,7 +20,7 @@ export const FunctionSelectBody = ({
   selectedFn,
   openDrawer,
 }: FunctionSelectBodyProps) =>
-  selectedFn ? (
+  module && selectedFn ? (
     <Flex
       key={selectedFn.name + selectedFn.is_view}
       direction="column"
@@ -29,7 +29,11 @@ export const FunctionSelectBody = ({
     >
       <SelectedFunctionCard fn={selectedFn} />
       {selectedFn.is_view ? (
-        <ViewArea fn={selectedFn} />
+        <ViewArea
+          address={module.address.toString() as HexAddr}
+          moduleName={module.moduleName}
+          fn={selectedFn}
+        />
       ) : (
         <ExecuteArea fn={selectedFn} />
       )}
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 4cd02a336..93ddb1813 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -6,8 +6,10 @@ import type {
   ResponseModules,
   InternalModule,
   HexAddr,
+  AbiFormData,
+  ExposedFunction,
 } from "lib/types";
-import { snakeToCamel } from "lib/utils";
+import { serializeAbiData, snakeToCamel } from "lib/utils";
 
 interface ModuleReturn {
   module: ResponseModule;
@@ -67,3 +69,17 @@ export const getModuleVerificationStatus = async (
     )
     .then(() => true)
     .catch(() => false);
+
+export const getFunctionView = async (
+  baseEndpoint: string,
+  address: MoveAccountAddr,
+  moduleName: string,
+  fn: ExposedFunction,
+  abiData: AbiFormData
+): Promise<string> => {
+  const { data } = await axios.post(
+    `${baseEndpoint}/initia/move/v1/accounts/${address}/modules/${moduleName}/view_functions/${fn.name}`,
+    serializeAbiData(fn, abiData)
+  );
+  return data.data;
+};
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index c9f2f8dbd..05232702a 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -4,6 +4,7 @@ import type {
   UseQueryResult,
 } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 
 import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
 import type {
@@ -12,12 +13,15 @@ import type {
   InternalModule,
   ResponseABI,
   Option,
+  AbiFormData,
+  RpcQueryError,
 } from "lib/types";
 import { parseJsonABI, splitViewExecuteFunctions } from "lib/utils";
 
 import {
   getAccountModule,
   getAccountModules,
+  getFunctionView,
   getModuleVerificationStatus,
 } from "./module";
 
@@ -98,3 +102,41 @@ export const useVerifyModule = ({
       keepPreviousData: true,
     }
   );
+
+export const useFunctionView = ({
+  address,
+  moduleName,
+  fn,
+  abiData,
+  onSuccess,
+  onError,
+}: {
+  address: MoveAccountAddr;
+  moduleName: string;
+  fn: ExposedFunction;
+  abiData: AbiFormData;
+  onSuccess?: (data: string) => void;
+  onError?: (err: AxiosError<RpcQueryError>) => void;
+}): UseQueryResult<string> => {
+  // TODO: handle POST in celatone API
+  const baseEndpoint = "https://stone-rest.initia.tech";
+  const queryFn: QueryFunction<string> = () =>
+    getFunctionView(baseEndpoint, address, moduleName, fn, abiData);
+  return useQuery(
+    [
+      CELATONE_QUERY_KEYS.FUNCTION_VIEW,
+      address,
+      moduleName,
+      fn.name,
+      JSON.stringify(abiData),
+    ] as readonly string[],
+    queryFn,
+    {
+      enabled: false,
+      retry: 0,
+      keepPreviousData: true,
+      onSuccess,
+      onError,
+    }
+  );
+};

From 672fdcca8d5ab664de9e3d560532c5df588632bf Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 18 Sep 2023 15:37:34 +0700
Subject: [PATCH 055/368] fix: change input error text

---
 src/lib/components/abi/args-form/field/utils.ts          | 9 +++++----
 src/lib/components/table/transactions/RelationChip.tsx   | 2 +-
 .../account-details/components/modules/ModuleLists.tsx   | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
index 36ed6ae0e..388235ba2 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -12,11 +12,12 @@ const validateNull = (v: Option<string>) =>
 const validateUint = (uintType: string) => (v: string) => {
   const value = parseInt(v);
   const maxValue = 2 ** parseInt(uintType.slice(1)) - 1;
-  return value >= 0 && value <= maxValue ? undefined : `need to be ${uintType}`;
+  return value >= 0 && value <= maxValue
+    ? undefined
+    : `Input must be ‘${uintType}’`;
 };
-
 const validateBool = (v: string) =>
-  v === "true" || v === "false" ? undefined : "need to be either true or false";
+  v === "true" || v === "false" ? undefined : "Input must be ‘boolean’";
 
 const validateAddress =
   (isValidArgAddress: (input: string) => boolean) => (v: string) =>
@@ -29,7 +30,7 @@ const validateVector = (
 ) => {
   const value = v.trim();
   if (!value.startsWith("[") || !value.endsWith("]"))
-    return "need to be a vector";
+    return "Input must be ‘vector’";
 
   const [, elementType] = vectorType.split(/<(.*)>/);
 
diff --git a/src/lib/components/table/transactions/RelationChip.tsx b/src/lib/components/table/transactions/RelationChip.tsx
index 27b44a6ae..9b278b3eb 100644
--- a/src/lib/components/table/transactions/RelationChip.tsx
+++ b/src/lib/components/table/transactions/RelationChip.tsx
@@ -11,7 +11,7 @@ interface RelationChipProps {
 export const RelationChip = ({ isSigner }: RelationChipProps) => {
   const message = isSigner
     ? "‘Signer’ or ‘The signing address’ is the account address that signs the transaction."
-    : "‘Related' or ‘The related address’ is related to the transaction, even if not signing it; e.g., as a recipient address.";
+    : "‘Related’ or ‘The related address’ is related to the transaction, even if not signing it; e.g., as a recipient address.";
   const tagBgColor: CSSProperties["backgroundColor"] = isSigner
     ? CURR_THEME.tag.signer.bg
     : CURR_THEME.tag.related.bg;
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 5c1fc5d7d..351181bc9 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -35,7 +35,7 @@ const ModuleTitle = ({
   return (
     <TableTitle
       title="Module Instances"
-      helperText="Modules are ‘smart contracts' deployed by this account"
+      helperText="Modules are ‘smart contracts’ deployed by this account"
       count={totalAsset}
     />
   );

From 08e8d582f0c5c4d218e4b19e0db0084aed026bb2 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 18 Sep 2023 17:46:50 +0700
Subject: [PATCH 056/368] feat: abi execute

---
 CHANGELOG.md                                  |   1 +
 package.json                                  |   1 +
 src/lib/app-fns/tx/move/executeModule.tsx     |  77 ++++++++++
 src/lib/app-provider/tx/index.ts              |   1 +
 src/lib/app-provider/tx/move/executeModule.ts |  61 ++++++++
 src/lib/app-provider/tx/move/index.ts         |   1 +
 .../component/form/ExecuteArea.tsx            | 143 ++++++++++++++++--
 .../interaction/component/form/ViewArea.tsx   |   6 +-
 .../pages/interaction/component/main/body.tsx |   8 +-
 .../{cosmos-kit.tsx => cosmos-kit/index.tsx}  |   3 +
 src/lib/providers/cosmos-kit/move.ts          |  12 ++
 src/lib/providers/cosmos-kit/options.ts       |  30 ++++
 src/lib/services/moduleService.ts             |   8 +-
 src/lib/utils/tx/composeMsg.ts                |  10 ++
 14 files changed, 342 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/app-fns/tx/move/executeModule.tsx
 create mode 100644 src/lib/app-provider/tx/move/executeModule.ts
 create mode 100644 src/lib/app-provider/tx/move/index.ts
 rename src/lib/providers/{cosmos-kit.tsx => cosmos-kit/index.tsx} (93%)
 create mode 100644 src/lib/providers/cosmos-kit/move.ts
 create mode 100644 src/lib/providers/cosmos-kit/options.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65da0f95c..e7d8bb5ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#534](https://github.com/alleslabs/celatone-frontend/pull/534) Wire up initia execute function
 - [#533](https://github.com/alleslabs/celatone-frontend/pull/533) Wire up initia view function
 - [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Add initia abi form
 - [#521](https://github.com/alleslabs/celatone-frontend/pull/521) Initia module interaction function panel and selected function info accordion
diff --git a/package.json b/package.json
index aee36c6b5..e918a66bf 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
     "@initia/initia.js": "^0.1.8",
+    "@initia/initia.proto": "^0.1.11",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
     "@rjsf/utils": "v5.0.0-beta.10",
diff --git a/src/lib/app-fns/tx/move/executeModule.tsx b/src/lib/app-fns/tx/move/executeModule.tsx
new file mode 100644
index 000000000..c59974e63
--- /dev/null
+++ b/src/lib/app-fns/tx/move/executeModule.tsx
@@ -0,0 +1,77 @@
+import type { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { DeliverTxResponse, StdFee } from "@cosmjs/stargate";
+import { pipe } from "@rx-stream/pipe";
+import type { Observable } from "rxjs";
+
+import { catchTxError } from "../common/catchTxError";
+import { postTx } from "../common/post";
+import { sendingTx } from "../common/sending";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { TxStreamPhase } from "lib/types";
+import type { HumanAddr, TxResultRendering } from "lib/types";
+import { formatUFee } from "lib/utils/formatter/denom";
+
+interface ExecuteModuleTxParams {
+  address: HumanAddr;
+  messages: EncodeObject[];
+  fee: StdFee;
+  client: SigningCosmWasmClient;
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+}
+
+export const executeModuleTx = ({
+  address,
+  messages,
+  fee,
+  client,
+  onTxSucceed,
+  onTxFailed,
+}: ExecuteModuleTxParams): Observable<TxResultRendering> => {
+  return pipe(
+    sendingTx(fee),
+    postTx<DeliverTxResponse>({
+      postFn: () => client.signAndBroadcast(address, messages, fee),
+    }),
+    ({ value: txInfo }) => {
+      AmpTrack(AmpEvent.TX_SUCCEED);
+      onTxSucceed?.();
+      const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]
+        .value;
+      return {
+        value: null,
+        phase: TxStreamPhase.SUCCEED,
+        receipts: [
+          {
+            title: "Tx Hash",
+            value: txInfo.transactionHash,
+            html: (
+              <ExplorerLink
+                type="tx_hash"
+                value={txInfo.transactionHash}
+                openNewTab
+              />
+            ),
+          },
+          {
+            title: "Tx Fee",
+            value: txFee ? formatUFee(txFee) : "N/A",
+          },
+        ],
+        receiptInfo: {
+          header: "Clear Admin Complete!",
+          headerIcon: (
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize={5}
+            />
+          ),
+        },
+      } as TxResultRendering;
+    }
+  )().pipe(catchTxError(onTxFailed));
+};
diff --git a/src/lib/app-provider/tx/index.ts b/src/lib/app-provider/tx/index.ts
index eef38aa36..bddeeba69 100644
--- a/src/lib/app-provider/tx/index.ts
+++ b/src/lib/app-provider/tx/index.ts
@@ -1,3 +1,4 @@
+export * from "./move";
 export * from "./upload";
 export * from "./execute";
 export * from "./instantiate";
diff --git a/src/lib/app-provider/tx/move/executeModule.ts b/src/lib/app-provider/tx/move/executeModule.ts
new file mode 100644
index 000000000..f1b7828fb
--- /dev/null
+++ b/src/lib/app-provider/tx/move/executeModule.ts
@@ -0,0 +1,61 @@
+import type { StdFee } from "@cosmjs/stargate";
+import { MsgExecute as MsgExecuteModule } from "@initia/initia.js";
+import { useCallback } from "react";
+
+import { executeModuleTx } from "lib/app-fns/tx/move/executeModule";
+import { useCurrentChain } from "lib/app-provider/hooks";
+import type { HexAddr, HumanAddr } from "lib/types";
+import { toEncodeObject } from "lib/utils";
+
+export interface ExecuteModuleStreamParams {
+  moduleAddress: HexAddr;
+  moduleName: string;
+  functionName: string;
+  typeArgs: string[];
+  args: string[];
+  estimatedFee?: StdFee;
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+}
+
+export const useExecuteModuleTx = () => {
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
+  return useCallback(
+    async ({
+      moduleAddress,
+      moduleName,
+      functionName,
+      typeArgs,
+      args,
+      estimatedFee,
+      onTxSucceed,
+      onTxFailed,
+    }: ExecuteModuleStreamParams) => {
+      const client = await getSigningCosmWasmClient();
+      if (!address || !client)
+        throw new Error("Please check your wallet connection.");
+
+      const messages = toEncodeObject([
+        new MsgExecuteModule(
+          address,
+          moduleAddress,
+          moduleName,
+          functionName,
+          typeArgs,
+          args
+        ),
+      ]);
+
+      if (!estimatedFee) return null;
+      return executeModuleTx({
+        address: address as HumanAddr,
+        messages,
+        fee: estimatedFee,
+        client,
+        onTxSucceed,
+        onTxFailed,
+      });
+    },
+    [address, getSigningCosmWasmClient]
+  );
+};
diff --git a/src/lib/app-provider/tx/move/index.ts b/src/lib/app-provider/tx/move/index.ts
new file mode 100644
index 000000000..eb5183db6
--- /dev/null
+++ b/src/lib/app-provider/tx/move/index.ts
@@ -0,0 +1 @@
+export * from "./executeModule";
diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
index 3b3613999..27838f613 100644
--- a/src/lib/pages/interaction/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -1,22 +1,143 @@
-import { useState } from "react";
+import { Alert, AlertDescription, Button, Flex } from "@chakra-ui/react";
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { StdFee } from "@cosmjs/stargate";
+import { MsgExecute as MsgExecuteModule } from "@initia/initia.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
+import {
+  useFabricateFee,
+  useSimulateFeeQuery,
+  useExecuteModuleTx,
+  useCurrentChain,
+} from "lib/app-provider";
 import { AbiForm } from "lib/components/abi";
-import type { AbiFormData, ExposedFunction } from "lib/types";
-import { getAbiInitialData } from "lib/utils";
+import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
+import { CustomIcon } from "lib/components/icon";
+import { useTxBroadcast } from "lib/providers/tx-broadcast";
+import type { AbiFormData, ExposedFunction, HexAddr } from "lib/types";
+import { getAbiInitialData, serializeAbiData, toEncodeObject } from "lib/utils";
+
+export const ExecuteArea = ({
+  moduleAddress,
+  moduleName,
+  fn,
+}: {
+  moduleAddress: HexAddr;
+  moduleName: string;
+  fn: ExposedFunction;
+}) => {
+  const { address } = useCurrentChain();
+  const fabricateFee = useFabricateFee();
+  const executeModuleTx = useExecuteModuleTx();
+  const { broadcast } = useTxBroadcast();
 
-export const ExecuteArea = ({ fn }: { fn: ExposedFunction }) => {
   const [data, setData] = useState<AbiFormData>({
     typeArgs: getAbiInitialData(fn.generic_type_params.length),
     args: getAbiInitialData(fn.params.length),
   });
-  const [, setErrors] = useState<[string, string][]>([]);
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+
+  const [composedTxMsgs, setComposedTxMsgs] = useState<EncodeObject[]>([]);
+  const [simulateFeeError, setSimulateFeeError] = useState<string>();
+  const [fee, setFee] = useState<StdFee>();
+  const [processing, setProcessing] = useState(false);
+
+  const enableExecute = useMemo(
+    () => !abiErrors.length && Boolean(address),
+    [abiErrors.length, address]
+  );
+
+  const { isFetching } = useSimulateFeeQuery({
+    enabled: composedTxMsgs.length > 0,
+    messages: composedTxMsgs,
+    onSuccess: (gasRes) => {
+      setSimulateFeeError(undefined);
+      if (gasRes) setFee(fabricateFee(gasRes));
+      else setFee(undefined);
+    },
+    onError: (e) => {
+      setSimulateFeeError(e.message);
+      setFee(undefined);
+    },
+  });
+
+  const proceed = useCallback(async () => {
+    const serializedData = serializeAbiData(fn, data);
+
+    const stream = await executeModuleTx({
+      moduleAddress,
+      moduleName,
+      functionName: fn.name,
+      typeArgs: serializedData.typeArgs,
+      args: serializedData.args,
+      onTxSucceed: () => setProcessing(false),
+      onTxFailed: () => setProcessing(false),
+    });
+    if (stream) {
+      setProcessing(true);
+      broadcast(stream);
+    }
+  }, [broadcast, data, executeModuleTx, fn, moduleAddress, moduleName]);
+
+  useEffect(() => {
+    if (enableExecute) {
+      const serializedData = serializeAbiData(fn, data);
+
+      const composedMsgs = toEncodeObject([
+        new MsgExecuteModule(
+          address as string,
+          moduleAddress,
+          moduleName,
+          fn.name,
+          serializedData.typeArgs,
+          serializedData.args
+        ),
+      ]);
+
+      const timeoutId = setTimeout(() => {
+        setComposedTxMsgs(composedMsgs);
+      }, 1000);
+      return () => clearTimeout(timeoutId);
+    }
+    return () => {};
+  }, [address, data, enableExecute, fn, moduleAddress, moduleName]);
 
   return (
-    <AbiForm
-      fn={fn}
-      initialData={data}
-      propsOnChange={setData}
-      propsOnErrors={setErrors}
-    />
+    <Flex direction="column">
+      <AbiForm
+        fn={fn}
+        initialData={data}
+        propsOnChange={setData}
+        propsOnErrors={setAbiErrors}
+      />
+      {simulateFeeError && (
+        <Alert variant="error" mb={3} alignItems="center">
+          <AlertDescription wordBreak="break-word">
+            {simulateFeeError}
+          </AlertDescription>
+        </Alert>
+      )}
+      <Flex alignItems="center" justify="space-between">
+        <Button>TODO: CodeSnippet</Button>
+        <Flex direction="row" align="center" gap={2}>
+          <Flex fontSize="14px" color="text.dark" alignItems="center">
+            Transaction Fee:{" "}
+            <EstimatedFeeRender estimatedFee={fee} loading={isFetching} />
+          </Flex>
+          <Button
+            variant="primary"
+            fontSize="14px"
+            p="6px 16px"
+            onClick={proceed}
+            isDisabled={!enableExecute || !fee || isFetching}
+            leftIcon={<CustomIcon name="execute" />}
+            isLoading={processing}
+            sx={{ pointerEvents: processing && "none" }}
+          >
+            Execute
+          </Button>
+        </Flex>
+      </Flex>
+    </Flex>
   );
 };
diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interaction/component/form/ViewArea.tsx
index bc24c0220..790e9a079 100644
--- a/src/lib/pages/interaction/component/form/ViewArea.tsx
+++ b/src/lib/pages/interaction/component/form/ViewArea.tsx
@@ -26,11 +26,11 @@ import type {
 import { getAbiInitialData, jsonPrettify } from "lib/utils";
 
 export const ViewArea = ({
-  address,
+  moduleAddress,
   moduleName,
   fn,
 }: {
-  address: HexAddr;
+  moduleAddress: HexAddr;
   moduleName: string;
   fn: ExposedFunction;
 }) => {
@@ -47,7 +47,7 @@ export const ViewArea = ({
     isFetching: queryFetching,
     isRefetching: queryRefetching,
   } = useFunctionView({
-    address,
+    moduleAddress,
     moduleName,
     fn,
     abiData,
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interaction/component/main/body.tsx
index c59bc5f44..a7d9c4eb4 100644
--- a/src/lib/pages/interaction/component/main/body.tsx
+++ b/src/lib/pages/interaction/component/main/body.tsx
@@ -30,12 +30,16 @@ export const FunctionSelectBody = ({
       <SelectedFunctionCard fn={selectedFn} />
       {selectedFn.is_view ? (
         <ViewArea
-          address={module.address.toString() as HexAddr}
+          moduleAddress={module.address.toString() as HexAddr}
           moduleName={module.moduleName}
           fn={selectedFn}
         />
       ) : (
-        <ExecuteArea fn={selectedFn} />
+        <ExecuteArea
+          moduleAddress={module.address.toString() as HexAddr}
+          moduleName={module.moduleName}
+          fn={selectedFn}
+        />
       )}
     </Flex>
   ) : (
diff --git a/src/lib/providers/cosmos-kit.tsx b/src/lib/providers/cosmos-kit/index.tsx
similarity index 93%
rename from src/lib/providers/cosmos-kit.tsx
rename to src/lib/providers/cosmos-kit/index.tsx
index c57f25bf8..52bef39e8 100644
--- a/src/lib/providers/cosmos-kit.tsx
+++ b/src/lib/providers/cosmos-kit/index.tsx
@@ -18,6 +18,8 @@ import {
   terra2testnetAssets,
 } from "lib/chain-registry/terra2testnet";
 
+import { getCustomedSigningCosmwasm } from "./options";
+
 // Remark: The avaliable wallet list won't change after the app is loaded.
 // So we have to revisit this later if we have another solution.
 export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
@@ -53,6 +55,7 @@ export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
         endpoints: availableChainsEndpoints,
       }}
       signerOptions={{
+        signingCosmwasm: () => getCustomedSigningCosmwasm(),
         preferredSignType: () => "direct",
       }}
     >
diff --git a/src/lib/providers/cosmos-kit/move.ts b/src/lib/providers/cosmos-kit/move.ts
new file mode 100644
index 000000000..7cd51e50b
--- /dev/null
+++ b/src/lib/providers/cosmos-kit/move.ts
@@ -0,0 +1,12 @@
+import type { GeneratedType } from "@cosmjs/proto-signing";
+import {
+  MsgExecute,
+  MsgPublish,
+  MsgScript,
+} from "@initia/initia.proto/initia/move/v1/tx";
+
+export const moveTypes: ReadonlyArray<[string, GeneratedType]> = [
+  ["/initia.move.v1.MsgExecute", MsgExecute],
+  ["/initia.move.v1.MsgPublish", MsgPublish],
+  ["/initia.move.v1.MsgScript", MsgScript],
+];
diff --git a/src/lib/providers/cosmos-kit/options.ts b/src/lib/providers/cosmos-kit/options.ts
new file mode 100644
index 000000000..d4e90c238
--- /dev/null
+++ b/src/lib/providers/cosmos-kit/options.ts
@@ -0,0 +1,30 @@
+import {
+  createWasmAminoConverters,
+  type SigningCosmWasmClientOptions,
+} from "@cosmjs/cosmwasm-stargate";
+import { wasmTypes } from "@cosmjs/cosmwasm-stargate/build/modules";
+import { Registry } from "@cosmjs/proto-signing";
+import {
+  AminoTypes,
+  createDefaultAminoConverters,
+  defaultRegistryTypes as defaultStargateTypes,
+} from "@cosmjs/stargate";
+
+import { moveTypes } from "./move";
+
+/**
+ * Remark: This is the custom signerOptions for the SigningCosmWasmClient.
+ */
+export const getCustomedSigningCosmwasm = (): SigningCosmWasmClientOptions => {
+  const registry = [...defaultStargateTypes, ...wasmTypes, ...moveTypes];
+  const aminoTypes = {
+    ...createDefaultAminoConverters(),
+    ...createWasmAminoConverters(),
+    // TODO: move amino converters to be implemented
+  };
+
+  return {
+    registry: new Registry(registry),
+    aminoTypes: new AminoTypes(aminoTypes),
+  };
+};
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 05232702a..1bc7a18ae 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -104,14 +104,14 @@ export const useVerifyModule = ({
   );
 
 export const useFunctionView = ({
-  address,
+  moduleAddress,
   moduleName,
   fn,
   abiData,
   onSuccess,
   onError,
 }: {
-  address: MoveAccountAddr;
+  moduleAddress: MoveAccountAddr;
   moduleName: string;
   fn: ExposedFunction;
   abiData: AbiFormData;
@@ -121,11 +121,11 @@ export const useFunctionView = ({
   // TODO: handle POST in celatone API
   const baseEndpoint = "https://stone-rest.initia.tech";
   const queryFn: QueryFunction<string> = () =>
-    getFunctionView(baseEndpoint, address, moduleName, fn, abiData);
+    getFunctionView(baseEndpoint, moduleAddress, moduleName, fn, abiData);
   return useQuery(
     [
       CELATONE_QUERY_KEYS.FUNCTION_VIEW,
-      address,
+      moduleAddress,
       moduleName,
       fn.name,
       JSON.stringify(abiData),
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index afcd8e5f5..1cf287b29 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -1,4 +1,6 @@
+import type { EncodeObject } from "@cosmjs/proto-signing";
 import type { Coin } from "@cosmjs/stargate";
+import type { Msg } from "@initia/initia.js";
 import { ParameterChangeProposal } from "cosmjs-types/cosmos/params/v1beta1/params";
 import { StoreCodeProposal } from "cosmjs-types/cosmwasm/wasm/v1/proposal";
 
@@ -15,6 +17,14 @@ import type {
 } from "lib/types";
 import { MsgType } from "lib/types";
 
+export const toEncodeObject = (msgs: Msg[]): EncodeObject[] => {
+  return msgs.map((msg) => ({
+    typeUrl: msg.toData()["@type"],
+    value: msg.toProto(),
+  }));
+};
+
+// TODO: remove `composeMsg` and use `toEnCodeObject` for sending tx instead
 export const composeMsg = (msgType: MsgType, msg: TxMessage): ComposedMsg => {
   const typeUrl = typeUrlDict[msgType];
   return {

From ce482b6d8defd9d2d1fff7be7453b2e101bace03 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 18 Sep 2023 17:50:53 +0700
Subject: [PATCH 057/368] fix: remove test file

---
 src/lib/pages/interaction/_test.tsx | 206 ----------------------------
 1 file changed, 206 deletions(-)
 delete mode 100644 src/lib/pages/interaction/_test.tsx

diff --git a/src/lib/pages/interaction/_test.tsx b/src/lib/pages/interaction/_test.tsx
deleted file mode 100644
index 4af17e5be..000000000
--- a/src/lib/pages/interaction/_test.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-/* eslint-disable */
-import { Button, Flex, Text } from "@chakra-ui/react";
-import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import type { AxiosError } from "axios";
-import { Msg, MsgExecute, MsgPublish, MsgScript } from "@initia/initia.js";
-
-import {
-  CELATONE_QUERY_KEYS,
-  useCurrentChain,
-  useFabricateFee,
-  useLCDEndpoint,
-  useSimulateFeeQuery,
-} from "lib/app-provider";
-import type { RpcQueryError } from "lib/types";
-import { EncodeObject } from "@cosmjs/proto-signing";
-
-const toEncodeObject = (msgs: Msg[]): EncodeObject[] => {
-  return msgs.map((msg) => ({
-    typeUrl: msg.toData()["@type"],
-    value: msg.toProto(),
-  }));
-};
-
-export const InteractionTest = () => {
-  // const lcdEndpoint = useBaseApiRoute("rest");
-  const lcdEndpoint = useLCDEndpoint();
-  const accountAddr = "0x589b1e861579c3f07092859db5f8963e1dac50f1";
-  const moduleName = "usernames";
-  const functionName = "get_config";
-  const msg = JSON.stringify({ type_args: [], args: [] });
-
-  // ----------------- QUERY ----------------- //
-  const { refetch } = useQuery(
-    [CELATONE_QUERY_KEYS.CONTRACT_QUERY, lcdEndpoint, accountAddr, msg],
-    async () => {
-      const { data } = await axios.post(
-        `${lcdEndpoint}/initia/move/v1/accounts/${accountAddr}/modules/${moduleName}/view_functions/${functionName}`,
-        msg
-      );
-      return data;
-    },
-    {
-      enabled: false,
-      retry: false,
-      cacheTime: 0,
-      onSettled() {
-        console.log("onSettled");
-      },
-      onSuccess(data) {
-        console.log("onSuccess", data);
-        window.alert(JSON.stringify(data, null, 2));
-      },
-      onError(err: AxiosError<RpcQueryError>) {
-        console.log("onError", err);
-      },
-    }
-  );
-
-  // ----------------- EXECUTE ----------------- //
-  // TYPEURL need to be registered in registry
-  const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const fabricateFee = useFabricateFee();
-
-  const execute = async () => {
-    const client = await getSigningCosmWasmClient();
-
-    if (!client || !address) {
-      window.alert("Please connect wallet");
-      return;
-    }
-
-    const msgs = [
-      // new MsgExecute(
-      //   address,
-      //   "0xee0019b10a5d5db025ac3dc15f3621cad3684a14",
-      //   "StdCoin",
-      //   "init"
-      // ),
-      // new MsgExecute(
-      //   address,
-      //   "0xee0019b10a5d5db025ac3dc15f3621cad3684a14",
-      //   "StdCoin",
-      //   "register"
-      // ),
-      new MsgExecute(
-        address,
-        "0xee0019b10a5d5db025ac3dc15f3621cad3684a14",
-        "StdCoin",
-        "mint",
-        undefined,
-        ["AAAAAAAAAAAAAAAA7gAZsQpdXbAlrD3BXzYhytNoShQ=", "QEIPAAAAAAA="]
-      ),
-    ];
-
-    const fee = fabricateFee(160347);
-
-    const txInfo = await client.signAndBroadcast(
-      address,
-      toEncodeObject(msgs),
-      fee
-    );
-
-    window.alert(JSON.stringify(txInfo, null, 2));
-  };
-
-  // ----------------- PUBLISH ----------------- //
-  const publish = async () => {
-    const client = await getSigningCosmWasmClient();
-
-    if (!client || !address) {
-      window.alert("Please connect wallet");
-      return;
-    }
-
-    const msgs = [
-      new MsgPublish(
-        address,
-        [
-          "oRzrCwYAAAALAQAIAggkAywxBF0IBWVaB78BsQEI8AJABrADFArEAxoM3gNSDbAEAgAAAQEBAgEDAAQIAAAFAAABCgUBAAEBDAUBAAEBDQUBAAEDDwcAARIEAQABAAYAAQAABwIBAAAIAAEAAxAEBQABEQcIAQACEwAKAAEHCwwBAAEUDQEBAAEIAAEBAAQGBgYHBggGAQYMAAMGDAUDAwsCAQgBCwMBCAELBAEIAQEKAgEIBQEIAQQGDAgFCAUCAwsCAQkACwMBCQALBAEJAAIGCAALBgEIAQEFAgMGCwQBCQABCwYBCQACBQsGAQkAB1N0ZENvaW4EY29pbgZzaWduZXIGc3RyaW5nCENhcFN0b3JlA1N0ZARpbml0BG1pbnQIcmVnaXN0ZXIEYnVybg5CdXJuQ2FwYWJpbGl0eQZmcmVlemUQRnJlZXplQ2FwYWJpbGl0eQ5NaW50Q2FwYWJpbGl0eQtkdW1teV9maWVsZAZTdHJpbmcEdXRmOAppbml0aWFsaXplBENvaW4KYWRkcmVzc19vZgdkZXBvc2l0AAAAAAAAAAAAAAAA7gAZsQpdXbAlrD3BXzYhytNoShQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQoCCQhTdGQgQ29pbgoCBQRTVERDAAIDCQsCAQgBCwsDAQgBBwsEAQgBAQIBDgEAAAQAAxEKAAcAEQMHAREDMQg4AAwDDAIMAQsACwELAgsDEgAtAAIBAAQBAAkNCwARBSsADAMLAgsDEAA4AQwECwELBDgCAgIABAABAwsAOAMCAAIA",
-        ],
-        0
-      ),
-    ];
-
-    const fee = fabricateFee(160347);
-
-    const txInfo = await client.signAndBroadcast(
-      address,
-      toEncodeObject(msgs),
-      fee
-    );
-
-    window.alert(JSON.stringify(txInfo, null, 2));
-  };
-
-  // ----------------- SIMULATE ----------------- //
-  const composedTxMsg = [
-    new MsgPublish(
-      "init1acqpnvg2t4wmqfdv8hq47d3petfksjs59gckf3",
-      [
-        "oRzrCwYAAAALAQAIAggkAywxBF0IBWVaB78BsQEI8AJABrADFArEAxoM3gNSDbAEAgAAAQEBAgEDAAQIAAAFAAABCgUBAAEBDAUBAAEBDQUBAAEDDwcAARIEAQABAAYAAQAABwIBAAAIAAEAAxAEBQABEQcIAQACEwAKAAEHCwwBAAEUDQEBAAEIAAEBAAQGBgYHBggGAQYMAAMGDAUDAwsCAQgBCwMBCAELBAEIAQEKAgEIBQEIAQQGDAgFCAUCAwsCAQkACwMBCQALBAEJAAIGCAALBgEIAQEFAgMGCwQBCQABCwYBCQACBQsGAQkAB1N0ZENvaW4EY29pbgZzaWduZXIGc3RyaW5nCENhcFN0b3JlA1N0ZARpbml0BG1pbnQIcmVnaXN0ZXIEYnVybg5CdXJuQ2FwYWJpbGl0eQZmcmVlemUQRnJlZXplQ2FwYWJpbGl0eQ5NaW50Q2FwYWJpbGl0eQtkdW1teV9maWVsZAZTdHJpbmcEdXRmOAppbml0aWFsaXplBENvaW4KYWRkcmVzc19vZgdkZXBvc2l0AAAAAAAAAAAAAAAA7gAZsQpdXbAlrD3BXzYhytNoShQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQoCCQhTdGQgQ29pbgoCBQRTVERDAAIDCQsCAQgBCwsDAQgBBwsEAQgBAQIBDgEAAAQAAxEKAAcAEQMHAREDMQg4AAwDDAIMAQsACwELAgsDEgAtAAIBAAQBAAkNCwARBSsADAMLAgsDEAA4AQwECwELBDgCAgIABAABAwsAOAMCAAIA",
-      ],
-      0
-    ),
-  ];
-
-  const { refetch: simulateFee } = useSimulateFeeQuery({
-    enabled: false,
-    messages: toEncodeObject(composedTxMsg),
-    onSuccess: (gasRes) => {
-      window.alert(gasRes);
-    },
-  });
-
-  // ----------------- SCRIPT ----------------- //
-  const script = async () => {
-    const client = await getSigningCosmWasmClient();
-
-    if (!client || !address) {
-      window.alert("Please connect wallet");
-      return;
-    }
-
-    const msgs = [
-      new MsgScript(
-        address,
-        "oRzrCwYAAAAGAQACAwIGBAgCBQoHBxEMCB0gAAAAAQIBAQAAAAEMAAEGCQAFZGVidWcFcHJpbnQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQIAAAABAw4AOAAC",
-        ["0x1::native_uinit::Coin", "0x1::native_uusdc::Coin"]
-      ),
-    ];
-
-    const fee = fabricateFee(80000);
-
-    const txInfo = await client.signAndBroadcast(
-      address,
-      toEncodeObject(msgs),
-      fee
-    );
-
-    window.alert(JSON.stringify(txInfo, null, 2));
-  };
-
-  return (
-    <Flex flexDir="column">
-      <Text fontSize="32px">Testing area</Text>
-      <Flex flexDir="row" my={4} gap={4}>
-        <Button onClick={() => refetch()} width="100px">
-          Query
-        </Button>
-        <Button onClick={() => execute()} width="100px">
-          Execute
-        </Button>
-        <Button onClick={() => publish()} width="100px">
-          Publish
-        </Button>
-        <Button onClick={() => simulateFee()} width="100px">
-          Estimate Fee
-        </Button>
-        <Button onClick={() => script()} width="100px">
-          Script
-        </Button>
-      </Flex>
-    </Flex>
-  );
-};

From 1938dbec7f21f1ae154d00d4e534a076c82f5aa8 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 18 Sep 2023 20:13:53 +0700
Subject: [PATCH 058/368] fix: initia config

---
 src/config/chain/initia.ts                    |  2 +-
 src/lib/chain-registry/initiatestnet.ts       |  6 +--
 .../component/form/ExecuteArea.tsx            | 40 ++++++++++++-------
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index 6a352aaf2..9aa4e66c1 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -37,7 +37,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
     },
     gas: {
       gasPrice: {
-        tokenPerGas: 0.025,
+        tokenPerGas: 0.15,
         denom: "uinit",
       },
       gasAdjustment: 1.5,
diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index debbde25f..9ae42547b 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -17,9 +17,9 @@ export const initiatestnet: Chain = {
       {
         denom: "uinit",
         fixed_min_gas_price: 0,
-        low_gas_price: 0,
-        average_gas_price: 0.025,
-        high_gas_price: 0.04,
+        low_gas_price: 0.15,
+        average_gas_price: 0.15,
+        high_gas_price: 0.15,
       },
     ],
   },
diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
index 27838f613..9da08fcc2 100644
--- a/src/lib/pages/interaction/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -26,14 +26,18 @@ export const ExecuteArea = ({
   moduleName: string;
   fn: ExposedFunction;
 }) => {
+  const executeFn = fn;
+  executeFn.params =
+    fn.params[0] === "&signer" ? fn.params.slice(1) : fn.params;
+
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const executeModuleTx = useExecuteModuleTx();
   const { broadcast } = useTxBroadcast();
 
   const [data, setData] = useState<AbiFormData>({
-    typeArgs: getAbiInitialData(fn.generic_type_params.length),
-    args: getAbiInitialData(fn.params.length),
+    typeArgs: getAbiInitialData(executeFn.generic_type_params.length),
+    args: getAbiInitialData(executeFn.params.length),
   });
   const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
 
@@ -62,14 +66,14 @@ export const ExecuteArea = ({
   });
 
   const proceed = useCallback(async () => {
-    const serializedData = serializeAbiData(fn, data);
-
+    const { typeArgs, args } = serializeAbiData(executeFn, data);
     const stream = await executeModuleTx({
       moduleAddress,
       moduleName,
-      functionName: fn.name,
-      typeArgs: serializedData.typeArgs,
-      args: serializedData.args,
+      functionName: executeFn.name,
+      typeArgs,
+      args,
+      estimatedFee: fee,
       onTxSucceed: () => setProcessing(false),
       onTxFailed: () => setProcessing(false),
     });
@@ -77,20 +81,28 @@ export const ExecuteArea = ({
       setProcessing(true);
       broadcast(stream);
     }
-  }, [broadcast, data, executeModuleTx, fn, moduleAddress, moduleName]);
+  }, [
+    broadcast,
+    data,
+    executeFn,
+    executeModuleTx,
+    fee,
+    moduleAddress,
+    moduleName,
+  ]);
 
   useEffect(() => {
     if (enableExecute) {
-      const serializedData = serializeAbiData(fn, data);
+      const { typeArgs, args } = serializeAbiData(executeFn, data);
 
       const composedMsgs = toEncodeObject([
         new MsgExecuteModule(
           address as string,
           moduleAddress,
           moduleName,
-          fn.name,
-          serializedData.typeArgs,
-          serializedData.args
+          executeFn.name,
+          typeArgs,
+          args
         ),
       ]);
 
@@ -100,12 +112,12 @@ export const ExecuteArea = ({
       return () => clearTimeout(timeoutId);
     }
     return () => {};
-  }, [address, data, enableExecute, fn, moduleAddress, moduleName]);
+  }, [address, data, enableExecute, executeFn, moduleAddress, moduleName]);
 
   return (
     <Flex direction="column">
       <AbiForm
-        fn={fn}
+        fn={executeFn}
         initialData={data}
         propsOnChange={setData}
         propsOnErrors={setAbiErrors}

From 44899186d4a12f0d47c1b7d96f989af043f6a512 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 19 Sep 2023 11:58:28 +0700
Subject: [PATCH 059/368] fix: is_entry and remove signer

---
 package.json                                  |  10 +-
 src/lib/app-fns/tx/move/executeModule.tsx     |   2 +-
 .../abi/args-form/field/ArgFieldWidget.tsx    |   4 +-
 .../components/abi/args-form/field/index.tsx  |   5 +-
 src/lib/components/module/FunctionCard.tsx    |   2 +-
 src/lib/utils/abi.ts                          |  15 +-
 yarn.lock                                     | 182 +++++++-----------
 7 files changed, 91 insertions(+), 129 deletions(-)

diff --git a/package.json b/package.json
index e918a66bf..74a2e015d 100644
--- a/package.json
+++ b/package.json
@@ -26,11 +26,11 @@
     "@chakra-ui/icons": "^2.0.11",
     "@chakra-ui/react": "2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
-    "@cosmjs/cosmwasm-stargate": "^0.30.1",
-    "@cosmjs/crypto": "^0.30.1",
-    "@cosmjs/encoding": "^0.30.1",
-    "@cosmjs/proto-signing": "^0.30.1",
-    "@cosmjs/stargate": "^0.30.1",
+    "@cosmjs/cosmwasm-stargate": "^0.31.1",
+    "@cosmjs/crypto": "^0.31.1",
+    "@cosmjs/encoding": "^0.31.1",
+    "@cosmjs/proto-signing": "^0.31.1",
+    "@cosmjs/stargate": "^0.31.1",
     "@cosmos-kit/compass": "2.3.0",
     "@cosmos-kit/core": "2.5.0",
     "@cosmos-kit/keplr": "2.3.0",
diff --git a/src/lib/app-fns/tx/move/executeModule.tsx b/src/lib/app-fns/tx/move/executeModule.tsx
index c59974e63..a9f2c5e43 100644
--- a/src/lib/app-fns/tx/move/executeModule.tsx
+++ b/src/lib/app-fns/tx/move/executeModule.tsx
@@ -62,7 +62,7 @@ export const executeModuleTx = ({
           },
         ],
         receiptInfo: {
-          header: "Clear Admin Complete!",
+          header: "Transaction Complete!",
           headerIcon: (
             <CustomIcon
               name="check-circle-solid"
diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index 926b9590d..58d6f5575 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -9,7 +9,6 @@ import { UintTypes } from "./utils";
 const getInputPlaceholder = (type: string, isNull: boolean) => {
   if (type === "0x1::string::String" && !isNull)
     return "Left blank to send as empty string";
-  if (type === "&signer") return "Signer is auto-filled when signing a tx";
   return " ";
 };
 
@@ -32,8 +31,7 @@ export const ArgFieldWidget = ({
   if (
     UintTypes.includes(type) ||
     type === "address" ||
-    type === "0x1::string::String" ||
-    type === "&signer"
+    type === "0x1::string::String"
   )
     return (
       <Input
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index 7635371de..6456f89de 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -57,21 +57,20 @@ export const ArgFieldTemplate = ({
   const isError = isTouched && !!error;
 
   const size = "md";
-  const isSigner = type === "&signer";
   const isNull = value === undefined;
   return (
     <Box>
       <FormControl
         className={`${size}-form`}
         variant={
-          isSigner || (type === "0x1::string::String" && !isNull)
+          type === "0x1::string::String" && !isNull
             ? "fixed-floating"
             : "floating"
         }
         size="md"
         isInvalid={isError}
         isReadOnly={isReadOnly}
-        isDisabled={(isSigner && !isReadOnly) || isNull}
+        isDisabled={isNull}
         {...fieldProps}
       >
         <ArgFieldWidget type={type} value={value} onChange={onChange} />
diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
index 91e822a53..5b0b02835 100644
--- a/src/lib/components/module/FunctionCard.tsx
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -75,7 +75,7 @@ export const FunctionCard = ({
             <>
               <Tooltip
                 bg="primary.dark"
-                label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+                label="Only execute functions with “is_entry: true” are interactable through Celatone’s module interactions."
               >
                 <Flex pointerEvents="auto" onClick={(e) => e.stopPropagation()}>
                   {disabled ? (
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index ddaf1cb47..33c919cc5 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -8,7 +8,7 @@ import type {
 } from "lib/types";
 
 export const checkAvailability = (fn: ExposedFunction) =>
-  fn.visibility === "public" && (fn.is_view || fn.is_entry);
+  fn.is_view || fn.is_entry;
 
 export const parseJsonABI = (jsonString: string): ResponseABI => {
   try {
@@ -19,7 +19,8 @@ export const parseJsonABI = (jsonString: string): ResponseABI => {
 };
 
 const sortByAvailability = (a: ExposedFunction, b: ExposedFunction) => {
-  if (checkAvailability(a) === checkAvailability(b)) return 0;
+  if (checkAvailability(a) === checkAvailability(b))
+    return a.name < b.name ? -1 : 1;
   return checkAvailability(a) ? -1 : 1;
 };
 
@@ -29,11 +30,11 @@ export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
     execute: ExposedFunction[];
   }>(
     (acc, fn) => {
-      if (fn.is_view) {
-        acc.view.push(fn);
-      } else {
-        acc.execute.push(fn);
-      }
+      if (fn.is_view) acc.view.push(fn);
+      // Filtering out execute fns with
+      // is_entry === false and visibility === private
+      // as these fns are this module's internal fns
+      else if (fn.is_entry || fn.visibility !== "private") acc.execute.push(fn);
       return acc;
     },
     {
diff --git a/yarn.lock b/yarn.lock
index 94db0bf61..0c85ad35a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2065,17 +2065,7 @@
   resolved "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.29.tgz"
   integrity sha512-q/yVUnqckA8Do+EvAfpy7RLdumnBy9ZsducMUtZTvpdbJC7azEf1hGtnYYxm0QfphYxjwggv6XtH64prvS1W+A==
 
-"@cosmjs/amino@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.30.1.tgz#7c18c14627361ba6c88e3495700ceea1f76baace"
-  integrity sha512-yNHnzmvAlkETDYIpeCTdVqgvrdt1qgkOXwuRVi8s27UKI5hfqyE9fJ/fuunXE6ZZPnKkjIecDznmuUOMrMvw4w==
-  dependencies:
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-
-"@cosmjs/amino@^0.31.0":
+"@cosmjs/amino@^0.31.0", "@cosmjs/amino@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.31.1.tgz#e6b4adc3ebe19ddfd953c67ee04b1eae488238af"
   integrity sha512-kkB9IAkNEUFtjp/uwHv95TgM8VGJ4VWfZwrTyLNqBDD1EpSX2dsNrmUe7k8OMPzKlZUFcKmD4iA0qGvIwzjbGA==
@@ -2085,36 +2075,23 @@
     "@cosmjs/math" "^0.31.1"
     "@cosmjs/utils" "^0.31.1"
 
-"@cosmjs/cosmwasm-stargate@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.30.1.tgz#6f9ca310f75433a3e30d683bc6aa24eadb345d79"
-  integrity sha512-W/6SLUCJAJGBN+sJLXouLZikVgmqDd9LCdlMzQaxczcCHTWeJAmRvOiZGSZaSy3shw/JN1qc6g6PKpvTVgj10A==
-  dependencies:
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/proto-signing" "^0.30.1"
-    "@cosmjs/stargate" "^0.30.1"
-    "@cosmjs/tendermint-rpc" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+"@cosmjs/cosmwasm-stargate@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.31.1.tgz#36d4386238fd4310d144486a27585a4fec3f27cd"
+  integrity sha512-5hwv4oztFnpqnFaXhYxZc93na3qdxylT2kqms4pLzD8CWMEQmrwhdM4KpZimrsyZK55WiMQtTPsdSh7M8KLOow==
+  dependencies:
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/proto-signing" "^0.31.1"
+    "@cosmjs/stargate" "^0.31.1"
+    "@cosmjs/tendermint-rpc" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
     pako "^2.0.2"
 
-"@cosmjs/crypto@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.30.1.tgz#21e94d5ca8f8ded16eee1389d2639cb5c43c3eb5"
-  integrity sha512-rAljUlake3MSXs9xAm87mu34GfBLN0h/1uPPV6jEwClWjNkAMotzjC0ab9MARy5FFAvYHL3lWb57bhkbt2GtzQ==
-  dependencies:
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    "@noble/hashes" "^1"
-    bn.js "^5.2.0"
-    elliptic "^6.5.4"
-    libsodium-wrappers "^0.7.6"
-
 "@cosmjs/crypto@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.31.1.tgz#ce4917df0f7b38f0909a32020907ccff04acefe6"
@@ -2137,15 +2114,6 @@
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/encoding@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.30.1.tgz#b5c4e0ef7ceb1f2753688eb96400ed70f35c6058"
-  integrity sha512-rXmrTbgqwihORwJ3xYhIgQFfMSrwLu1s43RIK9I8EBudPx3KmnmyAKzMOVsRDo9edLFNuZ9GIvysUCwQfq3WlQ==
-  dependencies:
-    base64-js "^1.3.0"
-    bech32 "^1.1.4"
-    readonly-date "^1.0.0"
-
 "@cosmjs/encoding@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.31.1.tgz#0041b2650c443d883e22f27c7d3cd7b844c6d0ec"
@@ -2155,12 +2123,12 @@
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/json-rpc@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.30.1.tgz#16f21305fc167598c8a23a45549b85106b2372bc"
-  integrity sha512-pitfC/2YN9t+kXZCbNuyrZ6M8abnCC2n62m+JtU9vQUfaEtVsgy+1Fk4TRQ175+pIWSdBMFi2wT8FWVEE4RhxQ==
+"@cosmjs/json-rpc@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.31.1.tgz#54d1064adb3ebd0412b04f87a3c2029384e4cb5e"
+  integrity sha512-gIkCj2mUDHAxvmJnHtybXtMLZDeXrkDZlujjzhvJlWsIuj1kpZbKtYqh+eNlfwhMkMMAlQa/y4422jDmizW+ng==
   dependencies:
-    "@cosmjs/stream" "^0.30.1"
+    "@cosmjs/stream" "^0.31.1"
     xstream "^11.14.0"
 
 "@cosmjs/math@^0.20.0":
@@ -2170,13 +2138,6 @@
   dependencies:
     bn.js "^4.11.8"
 
-"@cosmjs/math@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.30.1.tgz#8b816ef4de5d3afa66cb9fdfb5df2357a7845b8a"
-  integrity sha512-yaoeI23pin9ZiPHIisa6qqLngfnBR/25tSaWpkTm8Cy10MX70UF5oN4+/t1heLaM6SSmRrhk3psRkV4+7mH51Q==
-  dependencies:
-    bn.js "^5.2.0"
-
 "@cosmjs/math@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.31.1.tgz#74c02cf237c2996b77661b636b014168b18d95e6"
@@ -2184,66 +2145,66 @@
   dependencies:
     bn.js "^5.2.0"
 
-"@cosmjs/proto-signing@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.30.1.tgz#f0dda372488df9cd2677150b89b3e9c72b3cb713"
-  integrity sha512-tXh8pPYXV4aiJVhTKHGyeZekjj+K9s2KKojMB93Gcob2DxUjfKapFYBMJSgfKPuWUPEmyr8Q9km2hplI38ILgQ==
-  dependencies:
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+"@cosmjs/proto-signing@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.31.1.tgz#3929d5bee3c88c42b3bc3c4b9db4ab3bddb684c4"
+  integrity sha512-hipbBVrssPu+jnmRzQRP5hhS/mbz2nU7RvxG/B1ZcdNhr1AtZC5DN09OTUoEpMSRgyQvScXmk/NTbyf+xmCgYg==
+  dependencies:
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
 
-"@cosmjs/socket@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/socket/-/socket-0.30.1.tgz#00b22f4b5e2ab01f4d82ccdb7b2e59536bfe5ce0"
-  integrity sha512-r6MpDL+9N+qOS/D5VaxnPaMJ3flwQ36G+vPvYJsXArj93BjgyFB7BwWwXCQDzZ+23cfChPUfhbINOenr8N2Kow==
+"@cosmjs/socket@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/socket/-/socket-0.31.1.tgz#887d4e9b6aad4b3d264d64a47bdb40bcfa9802ff"
+  integrity sha512-XTtEr+x3WGbqkzoGX0sCkwVqf5n+bBqDwqNgb+DWaBABQxHVRuuainrTVp0Yc91D3Iy2twLQzeBA9OrRxDSerw==
   dependencies:
-    "@cosmjs/stream" "^0.30.1"
+    "@cosmjs/stream" "^0.31.1"
     isomorphic-ws "^4.0.1"
     ws "^7"
     xstream "^11.14.0"
 
-"@cosmjs/stargate@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.30.1.tgz#e1b22e1226cffc6e93914a410755f1f61057ba04"
-  integrity sha512-RdbYKZCGOH8gWebO7r6WvNnQMxHrNXInY/gPHPzMjbQF6UatA6fNM2G2tdgS5j5u7FTqlCI10stNXrknaNdzog==
+"@cosmjs/stargate@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.31.1.tgz#7e2b0fd6f181250915b1d73ecf9dfbab6f3cdd0d"
+  integrity sha512-TqOJZYOH5W3sZIjR6949GfjhGXO3kSHQ3/KmE+SuKyMMmQ5fFZ45beawiRtVF0/CJg5RyPFyFGJKhb1Xxv3Lcg==
   dependencies:
     "@confio/ics23" "^0.6.8"
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/proto-signing" "^0.30.1"
-    "@cosmjs/stream" "^0.30.1"
-    "@cosmjs/tendermint-rpc" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/proto-signing" "^0.31.1"
+    "@cosmjs/stream" "^0.31.1"
+    "@cosmjs/tendermint-rpc" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
     protobufjs "~6.11.3"
     xstream "^11.14.0"
 
-"@cosmjs/stream@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/stream/-/stream-0.30.1.tgz#ba038a2aaf41343696b1e6e759d8e03a9516ec1a"
-  integrity sha512-Fg0pWz1zXQdoxQZpdHRMGvUH5RqS6tPv+j9Eh7Q953UjMlrwZVo0YFLC8OTf/HKVf10E4i0u6aM8D69Q6cNkgQ==
+"@cosmjs/stream@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stream/-/stream-0.31.1.tgz#01bab56278bfe32cd601043949fcdc021a5f7ca7"
+  integrity sha512-xsIGD9bpBvYYZASajCyOevh1H5pDdbOWmvb4UwGZ78doGVz3IC3Kb9BZKJHIX2fjq9CMdGVJHmlM+Zp5aM8yZA==
   dependencies:
     xstream "^11.14.0"
 
-"@cosmjs/tendermint-rpc@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.30.1.tgz#c16378892ba1ac63f72803fdf7567eab9d4f0aa0"
-  integrity sha512-Z3nCwhXSbPZJ++v85zHObeUggrEHVfm1u18ZRwXxFE9ZMl5mXTybnwYhczuYOl7KRskgwlB+rID0WYACxj4wdQ==
-  dependencies:
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/json-rpc" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/socket" "^0.30.1"
-    "@cosmjs/stream" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
+"@cosmjs/tendermint-rpc@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.31.1.tgz#0699c6046fc8afd1eee3c648cfb3b896119ce52e"
+  integrity sha512-KX+wwi725sSePqIxfMPPOqg+xTETV8BHGOBhRhCZXEl5Fq48UlXXq3/yG1sn7K67ADC0kqHqcCF41Wn1GxNNPA==
+  dependencies:
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/json-rpc" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/socket" "^0.31.1"
+    "@cosmjs/stream" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
     axios "^0.21.2"
     readonly-date "^1.0.0"
     xstream "^11.14.0"
@@ -2253,11 +2214,6 @@
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.20.1.tgz#4d239b7d93c15523cdf109f225cbf61326fb69cd"
   integrity sha512-xl9YnIrAAaBd6nFffwFbyrnKjqjD9zKGP8OBKxzyglxamHfqAS+PcJPEiaEpt+oUt7HAIOyhL3KK75Dh52hGvA==
 
-"@cosmjs/utils@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.30.1.tgz#6d92582341be3c2ec8d82090253cfa4b7f959edb"
-  integrity sha512-KvvX58MGMWh7xA+N+deCfunkA/ZNDvFLw4YbOmX3f/XBIkqrVY7qlotfy2aNb1kgp6h4B6Yc8YawJPDTfvWX7g==
-
 "@cosmjs/utils@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.31.1.tgz#e6055cd7d722fa72df9cbd0d39cd1f7a9ac80483"
@@ -6939,7 +6895,7 @@ cosmiconfig@7.0.1, cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmjs-types@^0.7.1, cosmjs-types@^0.7.2:
+cosmjs-types@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.7.2.tgz#a757371abd340949c5bd5d49c6f8379ae1ffd7e2"
   integrity sha512-vf2uLyktjr/XVAgEq0DjMxeAWh1yYREe7AMHDKd7EiHVqxBPCaBS+qEEQUkXbR9ndnckqr1sUG8BQhazh4X5lA==
@@ -6947,6 +6903,14 @@ cosmjs-types@^0.7.1, cosmjs-types@^0.7.2:
     long "^4.0.0"
     protobufjs "~6.11.2"
 
+cosmjs-types@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.8.0.tgz#2ed78f3e990f770229726f95f3ef5bf9e2b6859b"
+  integrity sha512-Q2Mj95Fl0PYMWEhA2LuGEIhipF7mQwd9gTQ85DdP9jjjopeoGaDxvmPa5nakNzsq7FnO1DMTatXTAx6bxMH7Lg==
+  dependencies:
+    long "^4.0.0"
+    protobufjs "~6.11.2"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"

From 301e6ba2c3eccaca36a5e52fde0b0fa96577b838 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:01:48 +0700
Subject: [PATCH 060/368] fix: value on input

---
 src/lib/components/abi/args-form/field/ArgFieldWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index 926b9590d..9182a5681 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -39,7 +39,7 @@ export const ArgFieldWidget = ({
       <Input
         size="md"
         placeholder={getInputPlaceholder(type, value === undefined)}
-        // value={watcher ?? ""}
+        value={value ?? ""}
         onChange={onChange}
       />
     );

From eadbd141421aeac917caf573dbdaf8e0e3dd5b4a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:02:52 +0700
Subject: [PATCH 061/368] fix: value on input

---
 src/lib/components/abi/args-form/field/ArgFieldWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index 926b9590d..9182a5681 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -39,7 +39,7 @@ export const ArgFieldWidget = ({
       <Input
         size="md"
         placeholder={getInputPlaceholder(type, value === undefined)}
-        // value={watcher ?? ""}
+        value={value ?? ""}
         onChange={onChange}
       />
     );

From 27aae086d0624336d9b742517a6f9e388649f608 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:24:36 +0700
Subject: [PATCH 062/368] fix: is entry and add wallet connect

---
 src/lib/components/module/FunctionCard.tsx    | 117 ++++++++++--------
 .../drawer/selector/SelectorInput.tsx         |   4 +-
 .../component/form/ExecuteArea.tsx            |   7 +-
 src/lib/utils/address.ts                      |   6 +-
 src/lib/utils/validate.ts                     |   9 +-
 5 files changed, 86 insertions(+), 57 deletions(-)

diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
index 5b0b02835..c80d59e82 100644
--- a/src/lib/components/module/FunctionCard.tsx
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -28,7 +28,6 @@ const cardStyles: { [key in CardVariant]: FlexProps } = {
     bgColor: "gray.900",
     _hover: { bg: "gray.900" },
     cursor: "not-allowed",
-    pointerEvents: "none",
     borderColor: "gray.700",
   },
   selected: {
@@ -48,61 +47,81 @@ export const FunctionCard = ({
   const disabled = !checkAvailability(exposedFn);
 
   return (
-    <Flex
-      borderRadius={8}
-      py={2}
-      px={3}
-      transition="all .25s ease-in-out"
-      flexDirection="column"
-      gap={1}
-      border="1px solid"
-      onClick={() => onFunctionSelect(exposedFn)}
-      {...cardStyles[disabled ? "disabled" : variant]}
+    <Tooltip
+      bg="primary.dark"
+      label="Only functions with “is_entry: true” are able to interacted through Celatone’s module interactions."
+      isDisabled={!disabled}
     >
-      <Flex gap={1} justifyContent="space-between" w="full">
-        <Flex gap={1} alignItems="center">
-          <CustomIcon
-            name="query"
-            color={isView ? "primary.main" : "accent.dark"}
-            boxSize={3}
-          />
-          <Text variant="body3" color={isView ? "primary.main" : "accent.dark"}>
-            {isView ? "View" : "Execute"}
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap={2}>
-          {!isView && (
-            <>
-              <Tooltip
-                bg="primary.dark"
-                label="Only execute functions with “is_entry: true” are interactable through Celatone’s module interactions."
-              >
-                <Flex pointerEvents="auto" onClick={(e) => e.stopPropagation()}>
-                  {disabled ? (
-                    <CustomIcon name="close" color="gray.600" boxSize={3} />
-                  ) : (
-                    <CustomIcon name="check" color="success.main" boxSize={3} />
-                  )}
-                </Flex>
-              </Tooltip>
-              <DotSeparator bg="gray.600" />
-            </>
-          )}
-          <Flex alignItems="center" gap={1}>
+      <Flex
+        borderRadius={8}
+        py={2}
+        px={3}
+        transition="all .25s ease-in-out"
+        flexDirection="column"
+        gap={1}
+        border="1px solid"
+        onClick={disabled ? undefined : () => onFunctionSelect(exposedFn)}
+        {...cardStyles[disabled ? "disabled" : variant]}
+      >
+        <Flex gap={1} justifyContent="space-between" w="full">
+          <Flex gap={1} alignItems="center">
             <CustomIcon
-              name={getVisibilityIcon(visibility)}
-              color="gray.600"
+              name="query"
+              color={isView ? "primary.main" : "accent.dark"}
               boxSize={3}
             />
-            <Text variant="body3" color="text.dark" textTransform="capitalize">
-              {visibility}
+            <Text
+              variant="body3"
+              color={isView ? "primary.main" : "accent.dark"}
+            >
+              {isView ? "View" : "Execute"}
             </Text>
           </Flex>
+          <Flex alignItems="center" gap={2}>
+            {!isView && (
+              <>
+                <Tooltip
+                  bg="primary.dark"
+                  label={`is_entry: ${exposedFn.is_entry}`}
+                >
+                  <Flex
+                    pointerEvents="auto"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {disabled ? (
+                      <CustomIcon name="close" color="gray.600" boxSize={3} />
+                    ) : (
+                      <CustomIcon
+                        name="check"
+                        color="success.main"
+                        boxSize={3}
+                      />
+                    )}
+                  </Flex>
+                </Tooltip>
+                <DotSeparator bg="gray.600" />
+              </>
+            )}
+            <Flex alignItems="center" gap={1}>
+              <CustomIcon
+                name={getVisibilityIcon(visibility)}
+                color="gray.600"
+                boxSize={3}
+              />
+              <Text
+                variant="body3"
+                color="text.dark"
+                textTransform="capitalize"
+              >
+                {visibility}
+              </Text>
+            </Flex>
+          </Flex>
         </Flex>
+        <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
+          {name}
+        </Text>
       </Flex>
-      <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
-        {name}
-      </Text>
-    </Flex>
+    </Tooltip>
   );
 };
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index 263350c23..6abfc8f02 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -17,7 +17,7 @@ import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateM
 import type { IndexedModule } from "lib/services/moduleService";
 import { useAccountModules } from "lib/services/moduleService";
 import type { MoveAccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
-import { bech32AddressToHex, splitModule } from "lib/utils";
+import { bech32AddressToHex, formatHexAddress, splitModule } from "lib/utils";
 
 export interface ModuleSelectorInputProps {
   selectedAddress: SelectedAddress;
@@ -62,7 +62,7 @@ export const ModuleSelectorInput = ({
           return isHex
             ? {
                 address: convertHexAddr(addr as HexAddr),
-                hex: addr as HexAddr,
+                hex: formatHexAddress(addr as HexAddr),
               }
             : {
                 address: addr as HumanAddr,
diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
index 9da08fcc2..3c49d206b 100644
--- a/src/lib/pages/interaction/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -11,6 +11,7 @@ import {
   useCurrentChain,
 } from "lib/app-provider";
 import { AbiForm } from "lib/components/abi";
+import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { CustomIcon } from "lib/components/icon";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
@@ -116,6 +117,10 @@ export const ExecuteArea = ({
 
   return (
     <Flex direction="column">
+      <ConnectWalletAlert
+        subtitle="You need to connect your wallet to perform this action"
+        mb={8}
+      />
       <AbiForm
         fn={executeFn}
         initialData={data}
@@ -129,7 +134,7 @@ export const ExecuteArea = ({
           </AlertDescription>
         </Alert>
       )}
-      <Flex alignItems="center" justify="space-between">
+      <Flex alignItems="center" justify="space-between" mt={6}>
         <Button>TODO: CodeSnippet</Button>
         <Flex direction="row" align="center" gap={2}>
           <Flex fontSize="14px" color="text.dark" alignItems="center">
diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index c3f258b9d..b3f68e8f7 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -20,11 +20,13 @@ export const getAddressTypeText = (addressType: AddressReturnType) => {
 export const bech32AddressToHex = (addr: HumanAddr): HexAddr =>
   "0x".concat(toHex(fromBech32(addr).data)) as HexAddr;
 
+export const formatHexAddress = (hexAddr: HexAddr): HexAddr =>
+  `0x${hexAddr.slice(2).padStart(40, "0")}` as HexAddr;
+
 export const hexToBech32Address = (
   prefix: string,
   hexAddr: HexAddr
 ): HumanAddr => {
-  let strip = hexAddr.replace("0x", "");
-  if (strip.length < 40) strip = strip.padStart(40, "0");
+  const strip = formatHexAddress(hexAddr).slice(2);
   return toBech32(prefix, fromHex(strip)) as HumanAddr;
 };
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index 64aa39eb2..9b2794759 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -1,5 +1,9 @@
 import { fromHex } from "@cosmjs/encoding";
 
+import type { HexAddr } from "lib/types";
+
+import { formatHexAddress } from "./address";
+
 export const isCodeId = (input: string): boolean => {
   const numberValue = Number(input);
   return input.length <= 7 && Number.isInteger(numberValue) && numberValue > 0;
@@ -20,12 +24,11 @@ export const isBlock = (input: string): boolean => {
 };
 
 export const isHexAddress = (address: string): boolean => {
-  if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
+  if (!/^0x[a-fA-F0-9]{1,40}$/.test(address)) {
     return false;
   }
 
-  const strip = address.slice(2);
-
+  const strip = formatHexAddress(address as HexAddr).slice(2);
   try {
     fromHex(strip);
   } catch {

From f1cf5f92083b5de6908109b090afff76d4bf9f13 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 19 Sep 2023 16:02:50 +0700
Subject: [PATCH 063/368] feat: add publish module validation and decode query

---
 CHANGELOG.md                                  |   1 +
 global.d.ts                                   |  15 +++
 src/lib/app-provider/env.ts                   |   1 +
 .../components/json-schema/UploadTemplate.tsx |   3 +-
 src/lib/components/upload/UploadCard.tsx      |  32 +++--
 .../components/UploadModuleCard.tsx           | 118 +++++++++++++++---
 src/lib/pages/publish-module/formConstants.ts |  63 ++++++++++
 src/lib/pages/publish-module/index.tsx        |  75 +++++------
 src/lib/pages/publish-module/utils.ts         |  71 +++++++++++
 src/lib/services/module.ts                    |  19 ++-
 src/lib/services/moduleService.ts             |  55 +++++++-
 src/lib/utils/address.ts                      |   5 +
 12 files changed, 386 insertions(+), 72 deletions(-)
 create mode 100644 global.d.ts
 create mode 100644 src/lib/pages/publish-module/formConstants.ts
 create mode 100644 src/lib/pages/publish-module/utils.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f91cf19b..0b23f61bd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#536](https://github.com/alleslabs/celatone-frontend/pull/536) Add publish module validation and decode query
 - [#530](https://github.com/alleslabs/celatone-frontend/pull/530) Publish module component state wireup and add leaflet
 - [#521](https://github.com/alleslabs/celatone-frontend/pull/521) Initia module interaction function panel and selected function info accordion
 - [#515](https://github.com/alleslabs/celatone-frontend/pull/515) Initia select module drawer wireup
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 000000000..9796615dd
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export {};
+
+declare global {
+  interface Array<T> {
+    findLastIndex(
+      predicate: (value: T, index: number, obj: T[]) => unknown,
+      thisArg?: any
+    ): number;
+    findLast(
+      predicate: (value: T, index: number, obj: T[]) => unknown,
+      thisArg?: any
+    ): T | undefined;
+  }
+}
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 74f85ad89..355a33683 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -95,4 +95,5 @@ export enum CELATONE_QUERY_KEYS {
   // MODULES
   ACCOUNT_MODULES = "CELATONE_QUERY_ACCOUNT_MODULES",
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
+  MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
 }
diff --git a/src/lib/components/json-schema/UploadTemplate.tsx b/src/lib/components/json-schema/UploadTemplate.tsx
index 5dbb1715b..fb1212f48 100644
--- a/src/lib/components/json-schema/UploadTemplate.tsx
+++ b/src/lib/components/json-schema/UploadTemplate.tsx
@@ -94,7 +94,8 @@ const MethodRender = ({
               schemaString: "",
             });
           }}
-          error={error}
+          status={error ? "error" : undefined}
+          statusText={error}
         />
       ) : (
         <DropZone
diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx
index 7c62eaaed..6be0f2398 100644
--- a/src/lib/components/upload/UploadCard.tsx
+++ b/src/lib/components/upload/UploadCard.tsx
@@ -2,14 +2,18 @@ import { Flex, Text } from "@chakra-ui/react";
 import big from "big.js";
 
 import { CustomIcon, UploadIcon } from "lib/components/icon";
+import type { Option } from "lib/types";
 
 type CardTheme = "primary" | "secondary";
 
+type Status = "error" | "info" | "init";
+
 interface UploadCardProps {
   file: File;
   deleteFile: () => void;
   theme?: CardTheme;
-  error?: string | null;
+  status?: Status;
+  statusText?: string | null;
 }
 
 const getTheme = (theme: CardTheme) => {
@@ -29,13 +33,27 @@ const getTheme = (theme: CardTheme) => {
       };
   }
 };
+
+const resolveStatusColor = (status: Option<Status>): Option<string> => {
+  switch (status) {
+    case "error":
+      return "error.main";
+    case "info":
+      return "primary.main";
+    default:
+      return undefined;
+  }
+};
+
 export const UploadCard = ({
   file,
   deleteFile,
   theme = "primary",
-  error,
+  status,
+  statusText,
 }: UploadCardProps) => {
   const themeConfig = getTheme(theme);
+  const statusColor = resolveStatusColor(status);
   return (
     <>
       <Flex
@@ -45,7 +63,7 @@ export const UploadCard = ({
         w="full"
         bgColor={themeConfig.bgColor}
         border={themeConfig.border}
-        borderColor={error ? "error.main" : undefined}
+        borderColor={statusColor}
         borderRadius="8px"
         justifyContent="space-between"
       >
@@ -68,7 +86,7 @@ export const UploadCard = ({
             onClick={deleteFile}
             cursor="pointer"
           />
-          {error && (
+          {status === "error" && (
             <CustomIcon
               name="alert-triangle-solid"
               color="error.main"
@@ -77,9 +95,9 @@ export const UploadCard = ({
           )}
         </Flex>
       </Flex>
-      {error && (
-        <Text variant="body3" color="error.main" mt={1}>
-          {error}
+      {status && (
+        <Text variant="body3" color={statusColor} mt={1}>
+          {statusText}
         </Text>
       )}
     </>
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 880953a42..a677a08d4 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -1,27 +1,86 @@
-import { Flex, Heading, IconButton, Text } from "@chakra-ui/react";
+import { Flex, Heading, IconButton, Spinner, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { useState } from "react";
 
+import type {
+  FileArrayFields,
+  FileField,
+  PublishStatus,
+} from "../formConstants";
+import { statusResolver } from "../utils";
+import { useCurrentChain } from "lib/app-provider";
 import { DropZone } from "lib/components/dropzone";
 import { CustomIcon } from "lib/components/icon";
 import { UploadCard } from "lib/components/upload/UploadCard";
-import type { Option } from "lib/types";
+import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
+import { useDecodeModule } from "lib/services/moduleService";
+import type { HumanAddr, UpgradePolicy, Option } from "lib/types";
 
 interface UploadModuleCardProps {
   index: number;
-  file: Option<File>;
-  fieldAmount: number;
-  setFile: (file: File, modulePath: string) => void;
+  fileState: FileField;
+  fields: FileArrayFields;
+  policy: UpgradePolicy;
+  setFile: (
+    file: Option<File>,
+    base64File: string,
+    decodeRes: DecodeModuleQueryResponse,
+    publishStatus: PublishStatus
+  ) => void;
   removeFile: () => void;
   removeEntry: () => void;
 }
 
+const ComponentLoader = ({
+  isLoading,
+  children,
+}: {
+  isLoading: boolean;
+  children: ReactNode;
+}) => {
+  if (isLoading) return <Spinner size="lg" mx="auto" />;
+  return <>{children}</>;
+};
+
 export const UploadModuleCard = ({
   index,
-  file,
-  fieldAmount,
+  fileState: {
+    file,
+    decodeRes,
+    publishStatus: { status, text },
+  },
+  fields,
+  policy,
   setFile,
   removeFile,
   removeEntry,
 }: UploadModuleCardProps) => {
+  const [tempFile, setTempFile] = useState<{
+    file: Option<File>;
+    base64: string;
+  }>({
+    file: undefined,
+    base64: "",
+  });
+  const { address } = useCurrentChain();
+
+  const { isFetching } = useDecodeModule({
+    moduleEncode: tempFile.base64,
+    address: address as HumanAddr,
+    options: {
+      enabled: Boolean(tempFile.base64),
+      retry: 0,
+      refetchOnWindowFocus: false,
+      onSuccess: (data) =>
+        setFile(
+          tempFile.file,
+          tempFile.base64,
+          data,
+          statusResolver({ data, fields, index, policy })
+        ),
+    },
+  });
+
   return (
     <Flex
       bg="gray.900"
@@ -41,28 +100,47 @@ export const UploadModuleCard = ({
           aria-label="remove"
           variant="ghost"
           size="sm"
-          disabled={fieldAmount <= 1}
+          disabled={fields.length <= 1}
         >
           <CustomIcon name="close" color="gray.600" />
         </IconButton>
       </Flex>
-      {file ? (
-        <UploadCard file={file} deleteFile={removeFile} theme="secondary" />
-      ) : (
-        // TODO: Retrieve module path
-        <DropZone
-          setFile={(target) => setFile(target, "")}
-          fileType="move"
-          bgColor="background.main"
-          _hover={undefined}
-        />
-      )}
+      <Flex direction="column" w="full">
+        <ComponentLoader isLoading={isFetching}>
+          {file ? (
+            <UploadCard
+              file={file}
+              deleteFile={removeFile}
+              theme="secondary"
+              status={status}
+              statusText={text}
+            />
+          ) : (
+            <DropZone
+              setFile={async (target) => {
+                const reader = new FileReader();
+
+                reader.onload = () => {
+                  const dataUrl = reader.result as string;
+                  // strip "data:application/octet-stream;base64,oRzrCw..."
+                  const base64String = dataUrl.replace(/^data:.*;base64,/, "");
+                  setTempFile({ file: target, base64: base64String });
+                };
+                reader.readAsDataURL(target);
+              }}
+              fileType="move"
+              bgColor="background.main"
+              _hover={undefined}
+            />
+          )}
+        </ComponentLoader>
+      </Flex>
       <Flex justifyContent="space-between" w="full">
         <Text variant="body2" color="text.dark" fontWeight={600}>
           Module Path
         </Text>
         <Text variant="body2" color="text.dark">
-          -
+          {decodeRes?.modulePath ?? "-"}
         </Text>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/publish-module/formConstants.ts b/src/lib/pages/publish-module/formConstants.ts
new file mode 100644
index 000000000..27c3c9520
--- /dev/null
+++ b/src/lib/pages/publish-module/formConstants.ts
@@ -0,0 +1,63 @@
+import type { FieldArrayWithId } from "react-hook-form";
+
+import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
+import type { Option } from "lib/types";
+import { UpgradePolicy } from "lib/types";
+
+type Status = "error" | "info" | "init";
+
+export interface PublishStatus {
+  status: Status;
+  text: string;
+}
+
+interface Module {
+  file: Option<File>;
+  base64File: string;
+  decodeRes: Option<DecodeModuleQueryResponse>;
+  publishStatus: PublishStatus;
+}
+
+export interface PublishModuleState {
+  modules: Module[];
+  upgradePolicy: UpgradePolicy;
+}
+
+export type FileField = FieldArrayWithId<PublishModuleState, "modules", "id">;
+export type FileArrayFields = FileField[];
+
+export const publishStatusDefault: { status: Status; text: string } = {
+  status: "init",
+  text: "",
+};
+
+export const emptyModule: Module = {
+  base64File: "",
+  decodeRes: undefined,
+  publishStatus: publishStatusDefault,
+  file: undefined,
+};
+
+export const policies = [
+  {
+    value: UpgradePolicy.ARBITRARY,
+    description: "You can publish these modules again without any restrictions",
+    condition: false,
+  },
+  {
+    value: UpgradePolicy.COMPATIBLE,
+    description:
+      "This address can publish these modules again but need to maintain several properties.",
+    condition: true,
+  },
+  {
+    value: UpgradePolicy.IMMUTABLE,
+    description: "You cannot publish these modules again with this address",
+    condition: false,
+  },
+];
+
+export const defaultValues: PublishModuleState = {
+  modules: [emptyModule],
+  upgradePolicy: UpgradePolicy.ARBITRARY,
+};
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index a35d1e60e..58281d828 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -6,8 +6,8 @@ import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
+import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
 import type { Option } from "lib/types";
-import { UpgradePolicy } from "lib/types";
 
 import {
   PolicyAccordion,
@@ -16,42 +16,9 @@ import {
   PolicyCard,
   UploadModuleCard,
 } from "./components";
-
-interface Module {
-  file: Option<File>;
-  path: string;
-}
-
-interface PublishModuleState {
-  modules: Module[];
-  upgradePolicy: UpgradePolicy;
-}
-
-const emptyModule: Module = { file: undefined, path: "" };
-
-const policies = [
-  {
-    value: UpgradePolicy.ARBITRARY,
-    description: "You can publish these modules again without any restrictions",
-    condition: false,
-  },
-  {
-    value: UpgradePolicy.COMPATIBLE,
-    description:
-      "This address can publish these modules again but need to maintain several properties.",
-    condition: true,
-  },
-  {
-    value: UpgradePolicy.IMMUTABLE,
-    description: "You cannot publish these modules again with this address",
-    condition: false,
-  },
-];
-
-const defaultValues: PublishModuleState = {
-  modules: [emptyModule],
-  upgradePolicy: UpgradePolicy.ARBITRARY,
-};
+import type { PublishModuleState, PublishStatus } from "./formConstants";
+import { emptyModule, policies, defaultValues } from "./formConstants";
+import { statusResolver } from "./utils";
 
 export const PublishModule = () => {
   const {
@@ -109,10 +76,21 @@ export const PublishModule = () => {
                 <UploadModuleCard
                   key={field.id}
                   index={idx}
-                  fieldAmount={fields.length}
-                  file={field.file}
-                  setFile={(file: File, modulePath: string) => {
-                    update(idx, { file, path: modulePath });
+                  fields={fields}
+                  fileState={field}
+                  policy={upgradePolicy}
+                  setFile={(
+                    file: Option<File>,
+                    base64File: string,
+                    decodeRes: DecodeModuleQueryResponse,
+                    publishStatus: PublishStatus
+                  ) => {
+                    update(idx, {
+                      file,
+                      base64File,
+                      decodeRes,
+                      publishStatus,
+                    });
                   }}
                   removeFile={() => {
                     update(idx, emptyModule);
@@ -144,7 +122,20 @@ export const PublishModule = () => {
                   key={item.value}
                   value={item.value}
                   selected={upgradePolicy}
-                  onSelect={() => setValue("upgradePolicy", item.value)}
+                  onSelect={() => {
+                    setValue("upgradePolicy", item.value);
+                    fields.forEach((field, index) =>
+                      update(index, {
+                        ...field,
+                        publishStatus: statusResolver({
+                          data: field.decodeRes,
+                          fields,
+                          index,
+                          policy: item.value,
+                        }),
+                      })
+                    );
+                  }}
                   description={item.description}
                   hasCondition={item.condition}
                 />
diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
new file mode 100644
index 000000000..d28abfc12
--- /dev/null
+++ b/src/lib/pages/publish-module/utils.ts
@@ -0,0 +1,71 @@
+import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
+import type { Option } from "lib/types";
+import { UpgradePolicy } from "lib/types";
+import { truncate } from "lib/utils";
+
+import type { FileArrayFields, PublishStatus } from "./formConstants";
+
+const priority = Object.keys(UpgradePolicy);
+
+const resolvePolicyPriority = (
+  selected: UpgradePolicy,
+  current: UpgradePolicy
+) => priority.indexOf(selected) >= priority.indexOf(current);
+
+export const statusResolver = ({
+  data,
+  fields,
+  index,
+  policy,
+}: {
+  data: Option<DecodeModuleQueryResponse>;
+  fields: FileArrayFields;
+  index: number;
+  policy: UpgradePolicy;
+}): PublishStatus => {
+  if (!data) return { status: "init", text: "" };
+
+  const { abi, validPublisher, currentPolicy, modulePath } = data;
+  const priorUpload = fields
+    .slice(0, index)
+    .findLast((field) => field.decodeRes?.modulePath === modulePath);
+
+  const policyUpdateText = `Its upgrade policy will be updated from ${currentPolicy} to ${policy}`;
+
+  if (!validPublisher)
+    return {
+      status: "error",
+      text: `This .mv file can be published by ${truncate(abi.address)} only.`,
+    };
+  if (currentPolicy) {
+    if (currentPolicy === UpgradePolicy.IMMUTABLE)
+      return {
+        status: "error",
+        text: `“${abi.name}” is published with “Immutable” policy, which cannot be republished.`,
+      };
+    if (currentPolicy === policy)
+      return {
+        status: "info",
+        text: `The file will be uploaded to republish module “${abi.name}” in your address.`,
+      };
+    return resolvePolicyPriority(policy, currentPolicy)
+      ? {
+          status: "info",
+          text: `The file will be uploaded to republish module “${
+            abi.name
+          }” in your address. ${
+            currentPolicy === policy ? "" : policyUpdateText
+          }`,
+        }
+      : {
+          status: "error",
+          text: `“${abi.name}” is published with “${currentPolicy}” policy, which cannot be republished to “${policy}”`,
+        };
+  }
+  if (priorUpload)
+    return {
+      status: "info",
+      text: `The file will be uploaded to republish module “${abi.name}” in your address.`,
+    };
+  return { status: "init", text: "" };
+};
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 4cd02a336..4f48b1fa1 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -6,8 +6,9 @@ import type {
   ResponseModules,
   InternalModule,
   HexAddr,
+  ResponseABI,
 } from "lib/types";
-import { snakeToCamel } from "lib/utils";
+import { libDecode, parseJsonABI, snakeToCamel } from "lib/utils";
 
 interface ModuleReturn {
   module: ResponseModule;
@@ -67,3 +68,19 @@ export const getModuleVerificationStatus = async (
     )
     .then(() => true)
     .catch(() => false);
+
+interface DecodeModuleReturn {
+  abi: string;
+}
+
+export const decodeModule = async (
+  moduleEncode: string
+): Promise<ResponseABI> =>
+  axios
+    .post<DecodeModuleReturn>(
+      "https://initia-api-jiod42ec2q-as.a.run.app/decode_module",
+      {
+        code_bytes: moduleEncode,
+      }
+    )
+    .then(({ data }) => parseJsonABI(libDecode(data.abi)));
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 93629b9ef..1fef5c612 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -12,10 +12,19 @@ import type {
   InternalModule,
   ResponseABI,
   Option,
+  HumanAddr,
+  UpgradePolicy,
 } from "lib/types";
-import { parseJsonABI, splitViewExecuteFunctions } from "lib/utils";
+import {
+  bech32AddressToHex,
+  parseJsonABI,
+  splitViewExecuteFunctions,
+  truncate,
+  unpadHexAddress,
+} from "lib/utils";
 
 import {
+  decodeModule,
   getAccountModule,
   getAccountModules,
   getModuleVerificationStatus,
@@ -98,3 +107,47 @@ export const useVerifyModule = ({
       keepPreviousData: true,
     }
   );
+
+export interface DecodeModuleQueryResponse {
+  abi: ResponseABI;
+  modulePath: string;
+  validPublisher: boolean;
+  currentPolicy: Option<UpgradePolicy>;
+}
+
+export const useDecodeModule = ({
+  moduleEncode,
+  address,
+  options,
+}: {
+  moduleEncode: string;
+  address: Option<HumanAddr>;
+  options?: Omit<UseQueryOptions<DecodeModuleQueryResponse>, "queryKey">;
+}) => {
+  const baseEndpoint = useBaseApiRoute("rest");
+
+  const queryFn = async (): Promise<DecodeModuleQueryResponse> => {
+    const abi = await decodeModule(moduleEncode);
+    const modulePath = `${truncate(abi.address)}::${abi.name}`;
+
+    const validPublisher = address
+      ? unpadHexAddress(bech32AddressToHex(address as HumanAddr)) ===
+        abi.address
+      : false;
+
+    const currentPolicy = await getAccountModule(
+      baseEndpoint,
+      abi.address,
+      abi.name
+    )
+      .then((data) => data.upgradePolicy)
+      .catch(() => undefined);
+    return { abi, modulePath, validPublisher, currentPolicy };
+  };
+
+  return useQuery(
+    [CELATONE_QUERY_KEYS.MODULE_DECODE, moduleEncode, address],
+    queryFn,
+    options
+  );
+};
diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index c3f258b9d..7c08464bc 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -28,3 +28,8 @@ export const hexToBech32Address = (
   if (strip.length < 40) strip = strip.padStart(40, "0");
   return toBech32(prefix, fromHex(strip)) as HumanAddr;
 };
+
+export const unpadHexAddress = (hexAddr: HexAddr) => {
+  const hex = hexAddr.startsWith("0x") ? hexAddr.slice(2) : hexAddr;
+  return "0x".concat(hex.replace(/^0+/, ""));
+};

From f1152fc4b73d0017868bd3705c768f9d6c47dc62 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 19 Sep 2023 16:26:06 +0700
Subject: [PATCH 064/368] fix: tab and dropzone file size

---
 src/lib/components/dropzone/index.tsx               | 13 ++++++++++---
 .../pages/publish-module/components/PolicyCard.tsx  |  9 ++-------
 .../publish-module/components/leaflet/metadata.ts   |  2 +-
 .../publish-module/components/leaflet/utils.ts      |  4 ++--
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 69d72c490..c5214ea7f 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -32,11 +32,18 @@ export function DropZone({
 
   // Throwing error when wasm is disabled will cause the page to not redirect, so default value is assigned instead
   const maxSize = (() => {
-    if (wasm.enabled) return wasm.storeCodeMaxFileSize;
-    return move.enabled ? move.moduleMaxFileSize : 0;
+    switch (fileType) {
+      case "schema":
+        return 10_000_000;
+      case "wasm":
+        return wasm.enabled ? wasm.storeCodeMaxFileSize : 0;
+      case "move":
+        return move.enabled ? move.moduleMaxFileSize : 0;
+      default:
+        return 0;
+    }
   })();
 
-  // TODO: JSON Schema file size ??
   const { getRootProps, getInputProps, fileRejections } = useDropzone({
     onDrop,
     maxFiles: 1,
diff --git a/src/lib/pages/publish-module/components/PolicyCard.tsx b/src/lib/pages/publish-module/components/PolicyCard.tsx
index d57269211..bba92f819 100644
--- a/src/lib/pages/publish-module/components/PolicyCard.tsx
+++ b/src/lib/pages/publish-module/components/PolicyCard.tsx
@@ -1,5 +1,6 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Box, Flex, Text } from "@chakra-ui/react";
+import { capitalize } from "lodash";
 
 import type { UpgradePolicy } from "lib/types";
 
@@ -59,13 +60,7 @@ export const PolicyCard = ({
   return (
     <RadioCard onClick={onSelect} checked={isChecked}>
       <Flex flexDirection="column">
-        <Text
-          variant="body1"
-          textTransform="lowercase"
-          sx={{ "&:first-letter": { textTransform: "uppercase" } }}
-        >
-          {value}
-        </Text>
+        <Text variant="body1">{capitalize(value)}</Text>
         <Text variant="body2" textColor="text.dark" fontWeight={600}>
           {description}
           {hasCondition && <Leaflet />}
diff --git a/src/lib/pages/publish-module/components/leaflet/metadata.ts b/src/lib/pages/publish-module/components/leaflet/metadata.ts
index e00de6b76..7fa9d4145 100644
--- a/src/lib/pages/publish-module/components/leaflet/metadata.ts
+++ b/src/lib/pages/publish-module/components/leaflet/metadata.ts
@@ -1,6 +1,6 @@
 import { structToString } from "./utils";
 
-const indent = " ".repeat(4);
+const indent = "\t";
 
 // Render by row
 export const metadata = {
diff --git a/src/lib/pages/publish-module/components/leaflet/utils.ts b/src/lib/pages/publish-module/components/leaflet/utils.ts
index 8711e3963..590152d9b 100644
--- a/src/lib/pages/publish-module/components/leaflet/utils.ts
+++ b/src/lib/pages/publish-module/components/leaflet/utils.ts
@@ -1,5 +1,5 @@
-export const structToString = (obj: Record<string, string>, indent = 4) => {
-  const spacing = " ".repeat(indent);
+export const structToString = (obj: Record<string, string>) => {
+  const spacing = "\t";
   const keys = Object.keys(obj);
   const keyValuePairs = keys.map((key) => {
     const value = obj[key];

From 4bb1a46db9d749bba65cfe0b04593c0650fbb5c9 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 20 Sep 2023 10:59:39 +0700
Subject: [PATCH 065/368] fix: hex padding

---
 .../component/drawer/selector/SelectorInput.tsx            | 6 +++---
 src/lib/utils/address.ts                                   | 7 +++++--
 src/lib/utils/validate.ts                                  | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index 6abfc8f02..110da0757 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -17,7 +17,7 @@ import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateM
 import type { IndexedModule } from "lib/services/moduleService";
 import { useAccountModules } from "lib/services/moduleService";
 import type { MoveAccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
-import { bech32AddressToHex, formatHexAddress, splitModule } from "lib/utils";
+import { bech32AddressToHex, splitModule, unpadHexAddress } from "lib/utils";
 
 export interface ModuleSelectorInputProps {
   selectedAddress: SelectedAddress;
@@ -62,11 +62,11 @@ export const ModuleSelectorInput = ({
           return isHex
             ? {
                 address: convertHexAddr(addr as HexAddr),
-                hex: formatHexAddress(addr as HexAddr),
+                hex: unpadHexAddress(addr as HexAddr),
               }
             : {
                 address: addr as HumanAddr,
-                hex: bech32AddressToHex(addr as HumanAddr),
+                hex: unpadHexAddress(bech32AddressToHex(addr as HumanAddr)),
               };
         });
         if (Array.isArray(data)) {
diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index b3f68e8f7..5ef2a4695 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -20,13 +20,16 @@ export const getAddressTypeText = (addressType: AddressReturnType) => {
 export const bech32AddressToHex = (addr: HumanAddr): HexAddr =>
   "0x".concat(toHex(fromBech32(addr).data)) as HexAddr;
 
-export const formatHexAddress = (hexAddr: HexAddr): HexAddr =>
+export const padHexAddress = (hexAddr: HexAddr): HexAddr =>
   `0x${hexAddr.slice(2).padStart(40, "0")}` as HexAddr;
 
+export const unpadHexAddress = (hexAddr: HexAddr) =>
+  `0x${hexAddr.slice(2).replace(/^0+/, "")}` as HexAddr;
+
 export const hexToBech32Address = (
   prefix: string,
   hexAddr: HexAddr
 ): HumanAddr => {
-  const strip = formatHexAddress(hexAddr).slice(2);
+  const strip = padHexAddress(hexAddr).slice(2);
   return toBech32(prefix, fromHex(strip)) as HumanAddr;
 };
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index 9b2794759..926de4406 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -2,7 +2,7 @@ import { fromHex } from "@cosmjs/encoding";
 
 import type { HexAddr } from "lib/types";
 
-import { formatHexAddress } from "./address";
+import { padHexAddress } from "./address";
 
 export const isCodeId = (input: string): boolean => {
   const numberValue = Number(input);
@@ -28,7 +28,7 @@ export const isHexAddress = (address: string): boolean => {
     return false;
   }
 
-  const strip = formatHexAddress(address as HexAddr).slice(2);
+  const strip = padHexAddress(address as HexAddr).slice(2);
   try {
     fromHex(strip);
   } catch {

From ff36aeae173f47a23f26380689a70cf641b5175a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:39:43 +0700
Subject: [PATCH 066/368] fix: add handle signer

---
 src/lib/pages/interaction/component/form/ExecuteArea.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
index 3c49d206b..7ae9c2ec5 100644
--- a/src/lib/pages/interaction/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -29,7 +29,9 @@ export const ExecuteArea = ({
 }) => {
   const executeFn = fn;
   executeFn.params =
-    fn.params[0] === "&signer" ? fn.params.slice(1) : fn.params;
+    fn.params[0] === "signer" || fn.params[0] === "&signer"
+      ? fn.params.slice(1)
+      : fn.params;
 
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();

From 482bd58605a4da3c9807ad6585149bb5252aa9aa Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:40:59 +0700
Subject: [PATCH 067/368] feat: add note

---
 src/lib/pages/interaction/component/form/ExecuteArea.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
index 7ae9c2ec5..194b2698c 100644
--- a/src/lib/pages/interaction/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -27,6 +27,8 @@ export const ExecuteArea = ({
   moduleName: string;
   fn: ExposedFunction;
 }) => {
+  // Remove `signer` or `&signer` field from the params
+  // as they are auto-filled by the chain
   const executeFn = fn;
   executeFn.params =
     fn.params[0] === "signer" || fn.params[0] === "&signer"

From 2ff47107e544ae6632b3e29f3263f9fd6c404fa8 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 20 Sep 2023 17:30:24 +0700
Subject: [PATCH 068/368] fix(components): get module detail data

---
 .../components/FunctionTypeSwitch.tsx         | 87 +++++++++++++++++++
 .../components/ModuleFunction.tsx             | 64 ++++++++++++++
 .../module-details/components/ModuleInfo.tsx  | 13 ++-
 .../components/ModuleStruct.tsx               |  5 ++
 .../module-details/components/ModuleTop.tsx   | 70 +++++++++------
 .../module-details/components/QuickAccess.tsx | 16 +++-
 src/lib/pages/module-details/index.tsx        | 59 ++++++++++---
 src/lib/services/moduleService.ts             |  2 +-
 .../[moduleName]}/[tab].tsx                   |  0
 .../[moduleName]}/index.tsx                   |  0
 .../[moduleName]}/[tab].tsx                   |  0
 .../[moduleName]}/index.tsx                   |  0
 12 files changed, 269 insertions(+), 47 deletions(-)
 create mode 100644 src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
 create mode 100644 src/lib/pages/module-details/components/ModuleFunction.tsx
 create mode 100644 src/lib/pages/module-details/components/ModuleStruct.tsx
 rename src/pages/[network]/modules/{[modulePath] => [address]/[moduleName]}/[tab].tsx (100%)
 rename src/pages/[network]/modules/{[modulePath] => [address]/[moduleName]}/index.tsx (100%)
 rename src/pages/modules/{[modulePath] => [address]/[moduleName]}/[tab].tsx (100%)
 rename src/pages/modules/{[modulePath] => [address]/[moduleName]}/index.tsx (100%)

diff --git a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
new file mode 100644
index 000000000..eb9593d29
--- /dev/null
+++ b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
@@ -0,0 +1,87 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Flex, Heading } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
+
+import { MotionBox } from "lib/components/MotionBox";
+import type { Option } from "lib/types";
+
+export enum FunctionTypeTabs {
+  ALL = "All",
+  VIEW = "View",
+  EXECUTE = "Execute",
+}
+
+interface FunctionTypeSwitchProps extends FlexProps {
+  currentTab: FunctionTypeTabs;
+  disabled?: boolean;
+  counts: [Option<number>, Option<number>, Option<number>];
+  onTabChange: Dispatch<SetStateAction<FunctionTypeTabs>>;
+}
+
+const tabs = Object.values(FunctionTypeTabs);
+
+export const FunctionTypeSwitch = ({
+  currentTab,
+  disabled = false,
+  counts,
+  onTabChange,
+  ...flexProps
+}: FunctionTypeSwitchProps) => {
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
+  return (
+    <Flex
+      border="1px solid var(--chakra-colors-gray-700)"
+      borderRadius="4px"
+      p={1}
+      h="32px"
+      direction="row"
+      align="center"
+      position="relative"
+      sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
+      {...flexProps}
+    >
+      {tabs.map((tab, idx) => (
+        <MotionBox
+          key={tab}
+          w="full"
+          minW="128px"
+          cursor="pointer"
+          p="2px 10px"
+          variants={{
+            active: { color: "var(--chakra-colors-text-main)" },
+            inactive: {
+              color: "var(--chakra-colors-primary-light)",
+            },
+          }}
+          initial="inactive"
+          animate={currentTab === tab ? "active" : "inactive"}
+          onClick={() => onTabChange(tab)}
+          zIndex={1}
+          textAlign="center"
+        >
+          <Heading as="h6" variant="h6" fontSize="14px">
+            {tab} {counts[idx] && `(${counts[idx]})`}
+          </Heading>
+        </MotionBox>
+      ))}
+      <MotionBox
+        h="calc(100% - 8px)"
+        w="128px"
+        position="absolute"
+        borderRadius="2px"
+        backgroundColor="primary.dark"
+        animate={{
+          left:
+            activeIndex === 0
+              ? "4px"
+              : `calc(${(100 / 3) * activeIndex}% - 1px)`,
+        }}
+        transition={{
+          type: "spring",
+          stiffness: "250",
+          damping: "30",
+        }}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
new file mode 100644
index 000000000..3efcb8219
--- /dev/null
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -0,0 +1,64 @@
+import { Flex, Heading, Button } from "@chakra-ui/react";
+import { useState } from "react";
+
+// import { FunctionCard } from "lib/components/module";
+import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
+import type { IndexedModule } from "lib/services/moduleService";
+import { openNewTab } from "lib/utils";
+
+import { FunctionTypeSwitch, FunctionTypeTabs } from "./FunctionTypeSwitch";
+
+interface ModuleFunctionProps {
+  moduleData: IndexedModule;
+}
+
+export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
+  const [tab, setTab] = useState(FunctionTypeTabs.ALL);
+
+  if (!moduleData) return <Loading />;
+
+  const openFunctionJSON = () =>
+    openNewTab(`${moduleData.parsedAbi.exposed_functions}`);
+
+  return (
+    <Flex direction="column" gap={8}>
+      <Heading as="h6" variant="h6" fontWeight={600}>
+        Exposed Function
+      </Heading>
+      <Flex>search input ja</Flex>
+      <Flex justifyContent="space-between">
+        <Flex>
+          <FunctionTypeSwitch
+            currentTab={tab}
+            onTabChange={setTab}
+            my={3}
+            counts={[
+              moduleData.parsedAbi.exposed_functions.length,
+              moduleData.viewFunctions.length,
+              moduleData.executeFunctions.length,
+            ]}
+          />
+        </Flex>
+        <Flex gap={4}>
+          <Button
+            variant="outline-primary"
+            size="sm"
+            rightIcon={<CustomIcon name="chevron-down" />}
+          >
+            Collapse
+          </Button>
+          <Button
+            variant="outline-primary"
+            size="sm"
+            rightIcon={<CustomIcon name="launch" />}
+            onClick={openFunctionJSON}
+          >
+            View in JSON
+          </Button>
+        </Flex>
+      </Flex>
+      {/* <FunctionCard /> */}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 9d93ef6d0..656a1ee2c 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -3,14 +3,21 @@ import { Flex, Heading, Text } from "@chakra-ui/react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
+import { Loading } from "lib/components/Loading";
+import type { IndexedModule } from "lib/services/moduleService";
 
 import { ModuleSourceCode } from "./ModuleSourceCode";
 
 interface ModuleInfoProps {
+  moduleData: IndexedModule;
   isVerified?: boolean;
 }
 
-export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
+export const ModuleInfo = ({
+  moduleData,
+  isVerified = false,
+}: ModuleInfoProps) => {
+  if (!moduleData) return <Loading />;
   return (
     <Flex flexDirection="column" gap={4}>
       <Flex justifyContent="space-between" alignItems="center" w="full">
@@ -27,7 +34,6 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
           </Flex>
         )}
       </Flex>
-      {/* TODO data */}
       <Flex
         p={4}
         borderRadius={8}
@@ -35,7 +41,8 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
         borderColor="gray.700"
         sx={{ "& > div": { flex: 1 } }}
       >
-        <LabelText label="Upgrade Policy">ARBITRARY</LabelText>
+        <LabelText label="Upgrade Policy">{moduleData.upgradePolicy}</LabelText>
+        {/* TODO data */}
         <LabelText
           label="Initial Published Block Height"
           helperText1="formatUTC(createdTime)"
diff --git a/src/lib/pages/module-details/components/ModuleStruct.tsx b/src/lib/pages/module-details/components/ModuleStruct.tsx
new file mode 100644
index 000000000..7ca504812
--- /dev/null
+++ b/src/lib/pages/module-details/components/ModuleStruct.tsx
@@ -0,0 +1,5 @@
+import { Flex } from "@chakra-ui/react";
+
+export const ModuleStruct = () => {
+  return <Flex>kkkkk</Flex>;
+};
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 4e11c88bd..bdcac3872 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -3,12 +3,16 @@ import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
+import { CopyButton } from "lib/components/copy";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
 import { Tooltip } from "lib/components/Tooltip";
+import type { IndexedModule } from "lib/services/moduleService";
 
 interface ModuleTopProps {
   isVerified?: boolean;
+  moduleData: IndexedModule;
 }
 
 const baseTextStyle: TextProps = {
@@ -18,18 +22,24 @@ const baseTextStyle: TextProps = {
   whiteSpace: "nowrap",
 };
 
-export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
+export const ModuleTop = ({
+  moduleData,
+  isVerified = false,
+}: ModuleTopProps) => {
   const isMobile = useMobile();
-  //   TODO Name
-  const displayName = "Module Name";
+  if (!moduleData) return <Loading />;
 
   return (
     <Flex direction="column">
       <Breadcrumb
         items={[
-          { text: "TODO Account Address", href: "/" },
-          { text: "Module" },
-          { text: "Module Name" },
+          // TODO recheck how to get account
+          {
+            text: moduleData.parsedAbi.address,
+            href: `/accounts/${moduleData.parsedAbi.address}`,
+          },
+          { text: "Modules" },
+          { text: moduleData.moduleName },
         ]}
       />
       <Flex
@@ -60,7 +70,7 @@ export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
               variant={{ base: "h6", md: "h5" }}
               className={!isMobile ? "ellipsis" : ""}
             >
-              {displayName}
+              {moduleData.moduleName}
             </Heading>
             {isVerified && (
               <Tooltip label="This module's verification is supported by its provided source code.">
@@ -82,13 +92,11 @@ export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
             <Text {...baseTextStyle} color="text.main">
               Module Path:
             </Text>
-            {/* TODO module path */}
-            <Flex>
-              <Text {...baseTextStyle}>
-                cltn13a2sywe6g4a9w84g98w4g1dasdrfafdstlju97::
-              </Text>
-              <Text {...baseTextStyle}>beeb</Text>
-            </Flex>
+            {/* TODO recheck module path */}
+            <Text {...baseTextStyle}>
+              {moduleData.parsedAbi.address}::
+              {moduleData.parsedAbi.name}
+            </Text>
           </Flex>
           <Flex
             mt={{ base: 2, md: 0 }}
@@ -100,7 +108,7 @@ export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
             </Text>
             {/* TODO Creator */}
             <CopyLink
-              value="cltn1m9y7um59yxtmek68qkwg3ykm28s52rrell6prx"
+              value={moduleData.parsedAbi.address}
               amptrackSection="contract_top"
               type="contract_address"
             />
@@ -113,11 +121,25 @@ export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
             <Text {...baseTextStyle} color="text.main">
               Friends:
             </Text>
-            {/* TODO Friends */}
             <Flex gap={1}>
-              <Text {...baseTextStyle}>0x1::any,</Text>
-              <Text {...baseTextStyle}>0x1::copyable_any</Text>
-              <Text {...baseTextStyle}>0x1::copyable_any::function_name</Text>
+              {moduleData.parsedAbi.friends.length ? (
+                <Flex
+                  sx={{
+                    "> p:last-child > span": {
+                      display: "none",
+                    },
+                  }}
+                >
+                  {moduleData.parsedAbi.friends.map((item) => (
+                    <Text {...baseTextStyle}>
+                      {item}
+                      <span>,</span>
+                    </Text>
+                  ))}
+                </Flex>
+              ) : (
+                <Text {...baseTextStyle}>-</Text>
+              )}
             </Flex>
           </Flex>
         </Flex>
@@ -142,14 +164,12 @@ export const ModuleTop = ({ isVerified = false }: ModuleTopProps) => {
           >
             Execute
           </Button>
-          <Button
+          <CopyButton
+            value={moduleData.abi}
             variant="outline-primary"
-            w={{ base: "full", md: "auto" }}
-            leftIcon={<CustomIcon name="copy" />}
             size={{ base: "sm", md: "md" }}
-          >
-            Copy ABI
-          </Button>
+            buttonText="Copy ABI"
+          />
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/module-details/components/QuickAccess.tsx b/src/lib/pages/module-details/components/QuickAccess.tsx
index 46660db96..b90d20386 100644
--- a/src/lib/pages/module-details/components/QuickAccess.tsx
+++ b/src/lib/pages/module-details/components/QuickAccess.tsx
@@ -9,25 +9,33 @@ interface ActionInfo {
   count: number;
 }
 
-export const QuickAccess = () => {
+interface QuickAccessProps {
+  viewFnCount: number;
+  executeFnCount: number;
+}
+
+export const QuickAccess = ({
+  viewFnCount,
+  executeFnCount,
+}: QuickAccessProps) => {
   const actionList: ActionInfo[] = [
     {
       icon: "query" as IconKeys,
       iconColor: "primary.main",
       name: "View Functions",
-      count: 430,
+      count: viewFnCount,
     },
     {
       icon: "execute" as IconKeys,
       iconColor: "accent.main",
       name: "Execute Functions",
-      count: 30,
+      count: executeFnCount,
     },
     {
       icon: "list" as IconKeys,
       iconColor: "gray.600",
       name: "Transactions",
-      count: 30,
+      count: 0,
     },
   ];
 
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 1f1f1f2d8..588f09583 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -16,13 +16,17 @@ import {
 } from "../contract-details/components/tables";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
+import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { useContractDetailsTableCounts } from "lib/model/contract";
 import { useAccountId } from "lib/services/accountService";
 import { AmpTrackUseTab } from "lib/services/amplitude";
-import type { ContractAddr } from "lib/types";
+import type { IndexedModule } from "lib/services/moduleService";
+import { useAccountModules } from "lib/services/moduleService";
+import type { ContractAddr, MoveAccountAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
+import { ModuleFunction } from "./components/ModuleFunction";
 import { ModuleInfo } from "./components/ModuleInfo";
 import { ModuleTop } from "./components/ModuleTop";
 import { QuickAccess } from "./components/QuickAccess";
@@ -41,15 +45,22 @@ export const ModuleDetails = () => {
   const navigate = useInternalNavigate();
   const router = useRouter();
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
-  const modulePath = getFirstQueryParam(router.query.modulePath);
+  const moduleName = getFirstQueryParam(router.query.moduleName);
+  const addr = getFirstQueryParam(router.query.address);
+  const { data, isLoading } = useAccountModules({
+    address: addr as MoveAccountAddr,
+    moduleName,
+  });
+
   const handleTabChange = useCallback(
     (nextTab: TabIndex) => () => {
       if (nextTab === tab) return;
       AmpTrackUseTab(nextTab);
       navigate({
-        pathname: "/modules/[modulePath]/[tab]",
+        pathname: "/modules/[address]/[moduleName]/[tab]",
         query: {
-          modulePath,
+          address: addr,
+          moduleName,
           tab: nextTab,
         },
         options: {
@@ -57,16 +68,17 @@ export const ModuleDetails = () => {
         },
       });
     },
-    [modulePath, tab, navigate]
+    [addr, moduleName, tab, navigate]
   );
 
   useEffect(() => {
     if (router.isReady && (!tab || !Object.values(TabIndex).includes(tab))) {
       navigate({
         replace: true,
-        pathname: "/modules/[modulePath]/[tab]",
+        pathname: "/modules/[address]/[moduleName]/[tab]",
         query: {
-          modulePath,
+          address: addr,
+          moduleName,
           tab: TabIndex.Overview,
         },
         options: {
@@ -74,7 +86,7 @@ export const ModuleDetails = () => {
         },
       });
     }
-  }, [router.isReady, tab, modulePath, navigate]);
+  }, [router.isReady, tab, addr, moduleName, navigate]);
   const contractAddress = "" as ContractAddr;
   const { data: contractAccountId } = useAccountId(contractAddress);
 
@@ -84,9 +96,15 @@ export const ModuleDetails = () => {
     refetchTransactions,
     refetchRelatedProposals,
   } = useContractDetailsTableCounts(contractAddress);
+
+  if (isLoading && !data) return <Loading />;
+  const moduleData = data as IndexedModule;
+  // moduleData.parsedAbi.exposed_functions
+  // moduleData.viewFunctions
+  // moduleData.executeFunctions
   return (
     <PageContainer>
-      <ModuleTop isVerified />
+      <ModuleTop isVerified moduleData={moduleData} />
       <Tabs
         index={Object.values(TabIndex).indexOf(tab)}
         isLazy
@@ -102,21 +120,32 @@ export const ModuleDetails = () => {
           <CustomTab onClick={handleTabChange(TabIndex.Overview)}>
             Overview
           </CustomTab>
-          <CustomTab count={12} onClick={handleTabChange(TabIndex.Function)}>
+          <CustomTab
+            count={moduleData.parsedAbi.exposed_functions.length}
+            onClick={handleTabChange(TabIndex.Function)}
+            isDisabled={!moduleData.parsedAbi.exposed_functions.length}
+          >
             Function
           </CustomTab>
           <CustomTab count={12} onClick={handleTabChange(TabIndex.Txs)}>
             Transactions
           </CustomTab>
-          <CustomTab count={12} onClick={handleTabChange(TabIndex.Structs)}>
+          <CustomTab
+            count={moduleData.parsedAbi.structs.length}
+            onClick={handleTabChange(TabIndex.Structs)}
+            isDisabled={!moduleData.parsedAbi.structs.length}
+          >
             Structs
           </CustomTab>
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
             <Flex gap={6} flexDirection="column">
-              <QuickAccess />
-              <ModuleInfo isVerified />
+              <QuickAccess
+                viewFnCount={moduleData.viewFunctions.length}
+                executeFnCount={moduleData.executeFunctions.length}
+              />
+              <ModuleInfo isVerified moduleData={moduleData} />
               {/* TODO History */}
               <Flex flexDirection="column" mt={6}>
                 <Heading
@@ -177,7 +206,9 @@ export const ModuleDetails = () => {
               </Flex>
             </Flex>
           </TabPanel>
-          <TabPanel p={0}>2</TabPanel>
+          <TabPanel p={0}>
+            <ModuleFunction moduleData={moduleData} />
+          </TabPanel>
           <TabPanel p={0}>
             {/* TODO History */}
             <Flex flexDirection="column" mt={6}>
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 93629b9ef..7fe7c04bb 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -55,7 +55,7 @@ export const useAccountModules = ({
 }: {
   address: MoveAccountAddr;
   moduleName: Option<string>;
-  functionName: Option<string>;
+  functionName?: Option<string>;
   options?: Omit<UseQueryOptions<IndexedModule | IndexedModule[]>, "queryKey">;
 }): UseQueryResult<IndexedModule | IndexedModule[]> => {
   const baseEndpoint = useBaseApiRoute("rest");
diff --git a/src/pages/[network]/modules/[modulePath]/[tab].tsx b/src/pages/[network]/modules/[address]/[moduleName]/[tab].tsx
similarity index 100%
rename from src/pages/[network]/modules/[modulePath]/[tab].tsx
rename to src/pages/[network]/modules/[address]/[moduleName]/[tab].tsx
diff --git a/src/pages/[network]/modules/[modulePath]/index.tsx b/src/pages/[network]/modules/[address]/[moduleName]/index.tsx
similarity index 100%
rename from src/pages/[network]/modules/[modulePath]/index.tsx
rename to src/pages/[network]/modules/[address]/[moduleName]/index.tsx
diff --git a/src/pages/modules/[modulePath]/[tab].tsx b/src/pages/modules/[address]/[moduleName]/[tab].tsx
similarity index 100%
rename from src/pages/modules/[modulePath]/[tab].tsx
rename to src/pages/modules/[address]/[moduleName]/[tab].tsx
diff --git a/src/pages/modules/[modulePath]/index.tsx b/src/pages/modules/[address]/[moduleName]/index.tsx
similarity index 100%
rename from src/pages/modules/[modulePath]/index.tsx
rename to src/pages/modules/[address]/[moduleName]/index.tsx

From 312302892d4ebc744ecc1fac6224c860ed1771f7 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 21 Sep 2023 14:05:54 +0700
Subject: [PATCH 069/368] fix: error padding

---
 src/lib/pages/interaction/component/form/ExecuteArea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
index 194b2698c..b8f7a276a 100644
--- a/src/lib/pages/interaction/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -132,7 +132,7 @@ export const ExecuteArea = ({
         propsOnErrors={setAbiErrors}
       />
       {simulateFeeError && (
-        <Alert variant="error" mb={3} alignItems="center">
+        <Alert variant="error" mt={4} alignItems="center">
           <AlertDescription wordBreak="break-word">
             {simulateFeeError}
           </AlertDescription>

From fd0779e7bd3e6791f59556ae0cc44af35ef73027 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 21 Sep 2023 14:36:00 +0700
Subject: [PATCH 070/368] fix: commentes

---
 src/lib/pages/publish-module/components/Footer.tsx       | 2 +-
 src/lib/pages/publish-module/components/leaflet/utils.ts | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/publish-module/components/Footer.tsx b/src/lib/pages/publish-module/components/Footer.tsx
index 9cb9be5fc..398be0ceb 100644
--- a/src/lib/pages/publish-module/components/Footer.tsx
+++ b/src/lib/pages/publish-module/components/Footer.tsx
@@ -23,7 +23,7 @@ export const Footer = ({ isLoading = false, fieldAmount }: FooterProps) => {
       zIndex={2}
       templateAreas={`"prespace main accordion postspace"`}
       templateColumns="1fr 6fr 4fr 1fr"
-      columnGap="16px"
+      columnGap={4}
     >
       <GridItem area="main">
         <Flex align="center" justify="space-between" h="full">
diff --git a/src/lib/pages/publish-module/components/leaflet/utils.ts b/src/lib/pages/publish-module/components/leaflet/utils.ts
index 590152d9b..6707b7a0c 100644
--- a/src/lib/pages/publish-module/components/leaflet/utils.ts
+++ b/src/lib/pages/publish-module/components/leaflet/utils.ts
@@ -1,7 +1,6 @@
 export const structToString = (obj: Record<string, string>) => {
   const spacing = "\t";
-  const keys = Object.keys(obj);
-  const keyValuePairs = keys.map((key) => {
+  const keyValuePairs = Object.entries(obj).map(([key]) => {
     const value = obj[key];
     const [val, comment] = value.split("//");
     const commentRender = comment

From 3d37732967f13ce215d529138442c54467354f49 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 21 Sep 2023 18:02:30 +0700
Subject: [PATCH 071/368] feat: wireup publish module tx

---
 CHANGELOG.md                                  |   1 +
 package.json                                  |  16 +-
 src/config/chain/initia.ts                    |   4 +-
 src/config/chain/types.ts                     |   6 +-
 src/lib/app-fns/tx/publish.tsx                |  45 +++
 src/lib/app-provider/tx/publish.tsx           |  49 +++
 src/lib/chain-registry/initiatestnet.ts       |   9 +-
 src/lib/components/forms/ControllerInput.tsx  |   2 +-
 .../components/forms/ControllerTextarea.tsx   |   2 +-
 src/lib/components/tx/TxReceiptRender.tsx     |   3 +
 src/lib/pages/publish-module/completed.tsx    |  55 +++
 .../publish-module/components/Footer.tsx      |  17 +-
 .../components/ModulePublishCard.tsx          | 122 ++++++
 src/lib/pages/publish-module/index.tsx        | 197 ++--------
 src/lib/pages/publish-module/publish.tsx      | 295 +++++++++++++++
 .../{cosmos-kit.tsx => cosmos-kit/index.tsx}  |   3 +
 src/lib/providers/cosmos-kit/move.ts          |  12 +
 src/lib/providers/cosmos-kit/options.ts       |  30 ++
 src/lib/utils/encode.ts                       |   9 +
 src/lib/utils/index.ts                        |   1 +
 src/lib/utils/tx/composeMsg.ts                |  12 +
 src/pages/[network]/publish-module/index.tsx  |   4 +-
 src/pages/publish-module/index.tsx            |   4 +-
 yarn.lock                                     | 357 +++++++++++-------
 24 files changed, 933 insertions(+), 322 deletions(-)
 create mode 100644 src/lib/app-fns/tx/publish.tsx
 create mode 100644 src/lib/app-provider/tx/publish.tsx
 create mode 100644 src/lib/pages/publish-module/completed.tsx
 create mode 100644 src/lib/pages/publish-module/components/ModulePublishCard.tsx
 create mode 100644 src/lib/pages/publish-module/publish.tsx
 rename src/lib/providers/{cosmos-kit.tsx => cosmos-kit/index.tsx} (93%)
 create mode 100644 src/lib/providers/cosmos-kit/move.ts
 create mode 100644 src/lib/providers/cosmos-kit/options.ts
 create mode 100644 src/lib/utils/encode.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b23f61bd..83a3f3474 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Wireup publish module tx
 - [#536](https://github.com/alleslabs/celatone-frontend/pull/536) Add publish module validation and decode query
 - [#530](https://github.com/alleslabs/celatone-frontend/pull/530) Publish module component state wireup and add leaflet
 - [#521](https://github.com/alleslabs/celatone-frontend/pull/521) Initia module interaction function panel and selected function info accordion
diff --git a/package.json b/package.json
index 4094740c9..6e5ca9435 100644
--- a/package.json
+++ b/package.json
@@ -20,17 +20,17 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.8.0",
-    "@chain-registry/types": "^0.13.1",
+    "@chain-registry/types": "0.13.1",
     "@chakra-ui/anatomy": "^2.1.0",
     "@chakra-ui/card": "^2.1.1",
     "@chakra-ui/icons": "^2.0.11",
     "@chakra-ui/react": "2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
-    "@cosmjs/cosmwasm-stargate": "^0.30.1",
-    "@cosmjs/crypto": "^0.30.1",
-    "@cosmjs/encoding": "^0.30.1",
-    "@cosmjs/proto-signing": "^0.30.1",
-    "@cosmjs/stargate": "^0.30.1",
+    "@cosmjs/cosmwasm-stargate": "0.31.1",
+    "@cosmjs/crypto": "0.31.1",
+    "@cosmjs/encoding": "0.31.1",
+    "@cosmjs/proto-signing": "0.31.1",
+    "@cosmjs/stargate": "0.31.1",
     "@cosmos-kit/compass": "2.3.0",
     "@cosmos-kit/core": "2.5.0",
     "@cosmos-kit/keplr": "2.3.0",
@@ -40,6 +40,8 @@
     "@emotion/styled": "^11",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
+    "@initia/initia.js": "^0.1.9",
+    "@initia/initia.proto": "^0.1.11",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
     "@rjsf/utils": "v5.0.0-beta.10",
@@ -54,7 +56,7 @@
     "axios": "^1.1.3",
     "big.js": "^6.2.1",
     "camelcase": "^7.0.0",
-    "chain-registry": "^1.19.0",
+    "chain-registry": "1.19.0",
     "chakra-react-select": "^4.7.0",
     "cosmjs-types": "^0.7.2",
     "dayjs": "^1.11.6",
diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index ee866aeb6..6b35a8e2a 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -3,7 +3,7 @@ import { wallets as keplrWallets } from "@cosmos-kit/keplr";
 import type { ChainConfigs } from "./types";
 
 export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
-  "stone-9": {
+  "stone-10": {
     chain: "initia",
     registryChainName: "initiatestnet",
     prettyName: "Initia Testnet",
@@ -38,7 +38,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
     },
     gas: {
       gasPrice: {
-        tokenPerGas: 0.025,
+        tokenPerGas: 0.151,
         denom: "uinit",
       },
       gasAdjustment: 1.5,
diff --git a/src/config/chain/types.ts b/src/config/chain/types.ts
index 556c2a176..e1770c9c1 100644
--- a/src/config/chain/types.ts
+++ b/src/config/chain/types.ts
@@ -1,5 +1,3 @@
-import type { MainWalletBase } from "@cosmos-kit/core";
-
 type FaucetConfig =
   | {
       enabled: true;
@@ -55,7 +53,9 @@ export interface ChainConfig {
   rpc: string;
   indexer: string;
   api: string;
-  wallets: MainWalletBase[];
+  // TODO: Fix MainWalletBase type conflict
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  wallets: any[];
   features: {
     faucet: FaucetConfig;
     wasm: WasmConfig;
diff --git a/src/lib/app-fns/tx/publish.tsx b/src/lib/app-fns/tx/publish.tsx
new file mode 100644
index 000000000..91f225854
--- /dev/null
+++ b/src/lib/app-fns/tx/publish.tsx
@@ -0,0 +1,45 @@
+import type { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { StdFee } from "@cosmjs/stargate";
+import { pipe } from "@rx-stream/pipe";
+import type { Observable } from "rxjs";
+
+import type { PublishSucceedCallback } from "lib/app-provider/tx/publish";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import type { HumanAddr, TxResultRendering } from "lib/types";
+import { formatUFee } from "lib/utils";
+
+import { catchTxError, postTx, sendingTx } from "./common";
+
+interface PublishModuleTxParams {
+  address: HumanAddr;
+  client: SigningCosmWasmClient;
+  onTxSucceed?: PublishSucceedCallback;
+  onTxFailed?: () => void;
+  fee: StdFee;
+  messages: EncodeObject[];
+}
+
+export const publishModuleTx = ({
+  address,
+  client,
+  onTxSucceed,
+  onTxFailed,
+  fee,
+  messages,
+}: PublishModuleTxParams): Observable<TxResultRendering> => {
+  return pipe(
+    sendingTx(fee),
+    postTx({
+      postFn: () => client.signAndBroadcast(address, messages, fee),
+    }),
+    ({ value: txInfo }) => {
+      const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]
+        .value;
+      const formattedFee = txFee ? formatUFee(txFee) : "N/A";
+      AmpTrack(AmpEvent.TX_SUCCEED);
+      onTxSucceed?.({ txHash: txInfo.transactionHash, formattedFee });
+      return null as unknown as TxResultRendering;
+    }
+  )().pipe(catchTxError(onTxFailed));
+};
diff --git a/src/lib/app-provider/tx/publish.tsx b/src/lib/app-provider/tx/publish.tsx
new file mode 100644
index 000000000..6d0983933
--- /dev/null
+++ b/src/lib/app-provider/tx/publish.tsx
@@ -0,0 +1,49 @@
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { StdFee } from "@cosmjs/stargate";
+import { useCallback } from "react";
+
+import { useCurrentChain } from "../hooks";
+import { publishModuleTx } from "lib/app-fns/tx/publish";
+import type { HumanAddr } from "lib/types";
+
+export interface PublishTxInternalResult {
+  txHash: string;
+  formattedFee: string;
+}
+
+export type PublishSucceedCallback = (
+  txResult: PublishTxInternalResult
+) => void;
+
+export interface PublishModuleStreamParams {
+  onTxSucceed?: PublishSucceedCallback;
+  onTxFailed?: () => void;
+  estimatedFee?: StdFee;
+  messages: EncodeObject[];
+}
+
+export const usePublishModuleTx = () => {
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
+  return useCallback(
+    async ({
+      onTxSucceed,
+      onTxFailed,
+      estimatedFee,
+      messages,
+    }: PublishModuleStreamParams) => {
+      const client = await getSigningCosmWasmClient();
+      if (!address || !client)
+        throw new Error("Please check your wallet connection.");
+      if (!estimatedFee) return null;
+      return publishModuleTx({
+        address: address as HumanAddr,
+        client,
+        onTxSucceed,
+        onTxFailed,
+        fee: estimatedFee,
+        messages,
+      });
+    },
+    [address, getSigningCosmWasmClient]
+  );
+};
diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index debbde25f..9a3d7a6c1 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -1,4 +1,4 @@
-import type { Chain, AssetList } from "@chain-registry/types";
+import type { AssetList, Chain } from "@chain-registry/types";
 
 export const initiatestnet: Chain = {
   $schema: "../chain.schema.json",
@@ -6,7 +6,7 @@ export const initiatestnet: Chain = {
   status: "live",
   network_type: "testnet",
   pretty_name: "Initia Testnet",
-  chain_id: "stone-9",
+  chain_id: "stone-10",
   bech32_prefix: "init",
   daemon_name: "initd",
   node_home: "$HOME/.init",
@@ -18,8 +18,8 @@ export const initiatestnet: Chain = {
         denom: "uinit",
         fixed_min_gas_price: 0,
         low_gas_price: 0,
-        average_gas_price: 0.025,
-        high_gas_price: 0.04,
+        average_gas_price: 0.151,
+        high_gas_price: 0.25,
       },
     ],
   },
@@ -47,6 +47,7 @@ export const initiatestnet: Chain = {
     ],
   },
 };
+
 export const initiatestnetAssets: AssetList = {
   $schema: "../assetlist.schema.json",
   chain_name: "initiatestnet",
diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
index fca0a4fe8..55a1275f3 100644
--- a/src/lib/components/forms/ControllerInput.tsx
+++ b/src/lib/components/forms/ControllerInput.tsx
@@ -52,7 +52,7 @@ export const ControllerInput = <T extends FieldValues>({
     control,
   });
 
-  const { field } = useController({
+  const { field } = useController<T>({
     name,
     control,
     rules,
diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
index 6155dfa87..e532971e3 100644
--- a/src/lib/components/forms/ControllerTextarea.tsx
+++ b/src/lib/components/forms/ControllerTextarea.tsx
@@ -39,7 +39,7 @@ export const ControllerTextarea = <T extends FieldValues>({
     name,
     control,
   });
-  const { field } = useController({ name, control, rules });
+  const { field } = useController<T>({ name, control, rules });
   const isError = Boolean(error);
   const isRequired = "required" in rules;
   return (
diff --git a/src/lib/components/tx/TxReceiptRender.tsx b/src/lib/components/tx/TxReceiptRender.tsx
index b66e87c74..62e50ba5d 100644
--- a/src/lib/components/tx/TxReceiptRender.tsx
+++ b/src/lib/components/tx/TxReceiptRender.tsx
@@ -19,6 +19,9 @@ const variantStyle: Record<
       justifyContent: "space-between",
       alignItems: "center",
     },
+    "> div > p:first-of-type": {
+      fontWeight: 600,
+    },
   },
   packed: {
     w: "60%",
diff --git a/src/lib/pages/publish-module/completed.tsx b/src/lib/pages/publish-module/completed.tsx
new file mode 100644
index 000000000..739d4d2ce
--- /dev/null
+++ b/src/lib/pages/publish-module/completed.tsx
@@ -0,0 +1,55 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+import { capitalize } from "lodash";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { TxReceiptRender } from "lib/components/tx";
+import WasmPageContainer from "lib/components/WasmPageContainer";
+
+import type { PublishCompleteState } from ".";
+import { ModulePublishCard } from "./components/ModulePublishCard";
+
+export const PublishCompleted = ({
+  txHash,
+  formattedFee,
+  upgradePolicy,
+  modules,
+}: PublishCompleteState) => {
+  return (
+    <WasmPageContainer>
+      <CustomIcon boxSize={8} color="success.main" name="check-circle-solid" />
+      <Heading as="h4" variant="h4" mt={4} mb={2}>
+        {`<${modules.length}>`} Modules published!
+      </Heading>
+      <Text variant="body2" color="text.dark">
+        Your .mv files are uploaded and published as modules.
+      </Text>
+      <TxReceiptRender
+        receipts={[
+          {
+            title: "Tx Hash",
+            html: <ExplorerLink type="tx_hash" value={txHash} />,
+          },
+          {
+            title: "Tx Fee",
+            value: formattedFee,
+          },
+          {
+            title: "Upgrade Policy",
+            value: capitalize(upgradePolicy),
+          },
+        ]}
+        variant="full"
+        my={12}
+      />
+      <Flex direction="column" gap={6} w="full">
+        <Heading as="h6" variant="h6">
+          Published {`<${modules.length}>`} modules
+        </Heading>
+        {modules.map((module) => (
+          <ModulePublishCard key={module.id} module={module} />
+        ))}
+      </Flex>
+    </WasmPageContainer>
+  );
+};
diff --git a/src/lib/pages/publish-module/components/Footer.tsx b/src/lib/pages/publish-module/components/Footer.tsx
index 9cb9be5fc..b892f43f3 100644
--- a/src/lib/pages/publish-module/components/Footer.tsx
+++ b/src/lib/pages/publish-module/components/Footer.tsx
@@ -2,13 +2,18 @@ import { Button, Flex, Grid, GridItem, Spinner } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
 interface FooterProps {
-  //   onSubmit: () => void;
-  //   disabled: boolean;
+  publishModule: () => void;
+  disabled: boolean;
   isLoading: boolean;
   fieldAmount: number;
 }
 
-export const Footer = ({ isLoading = false, fieldAmount }: FooterProps) => {
+export const Footer = ({
+  isLoading = false,
+  disabled,
+  fieldAmount,
+  publishModule,
+}: FooterProps) => {
   const router = useRouter();
   const publishText =
     fieldAmount > 1 ? `Publish ${fieldAmount} Modules` : "Publish Module";
@@ -30,7 +35,11 @@ export const Footer = ({ isLoading = false, fieldAmount }: FooterProps) => {
           <Button variant="outline-primary" onClick={router.back}>
             Cancel
           </Button>
-          <Button variant="primary" isDisabled={isLoading}>
+          <Button
+            variant="primary"
+            isDisabled={isLoading || disabled}
+            onClick={publishModule}
+          >
             {isLoading ? <Spinner size="md" variant="light" /> : publishText}
           </Button>
         </Flex>
diff --git a/src/lib/pages/publish-module/components/ModulePublishCard.tsx b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
new file mode 100644
index 000000000..8afc4aa66
--- /dev/null
+++ b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
@@ -0,0 +1,122 @@
+import { Button, Flex, Grid, Heading, Text } from "@chakra-ui/react";
+
+import type { FileField } from "../formConstants";
+import { useInternalNavigate } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { CountBadge } from "lib/components/module";
+
+interface ModulePublishCardProps {
+  module: FileField;
+}
+
+export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
+  const navigate = useInternalNavigate();
+  const { file, decodeRes } = module;
+  return (
+    <Flex
+      bg="gray.900"
+      border="1px solid"
+      borderColor="gray.700"
+      borderRadius="8px"
+      p={4}
+      direction="column"
+      gap={4}
+    >
+      <Flex align="center" gap={2}>
+        <CustomIcon name="contract-address" color="primary.main" />
+        <Heading variant="h6" as="h6">
+          {decodeRes?.abi.name}
+        </Heading>
+        <Flex align="center" gap={1}>
+          <CountBadge
+            variant="view"
+            count={
+              module.decodeRes?.abi.exposed_functions.filter((fn) => fn.is_view)
+                .length ?? 0
+            }
+          />
+          <CountBadge
+            variant="execute"
+            count={
+              module.decodeRes?.abi.exposed_functions.filter(
+                (fn) => !fn.is_view
+              ).length ?? 0
+            }
+          />
+        </Flex>
+      </Flex>
+      <Flex direction="column" gap={2}>
+        {[
+          {
+            title: "Uploaded file",
+            value: <Text variant="body2">{file?.name}</Text>,
+          },
+          {
+            title: "Module address",
+            value: (
+              <ExplorerLink
+                type="user_address"
+                value={decodeRes?.abi.address ?? ""}
+              />
+            ),
+          },
+          {
+            title: "Module name",
+            value: <Text variant="body2">{decodeRes?.abi.name}</Text>,
+          },
+        ].map(({ title, value }) => (
+          <Flex key={title} align="center" justify="space-between">
+            <Text variant="body2" color="text.dark" fontWeight={600}>
+              {title}
+            </Text>
+            {value}
+          </Flex>
+        ))}
+      </Flex>
+      <Grid templateColumns="1fr 1fr 1fr" columnGap={4}>
+        {/* TODO: add navigation */}
+        <Button
+          rightIcon={
+            <CustomIcon name="chevron-right" boxSize={3} color="text.dark" />
+          }
+          variant="outline-white"
+        >
+          See Details
+        </Button>
+        <Button
+          leftIcon={<CustomIcon name="query" boxSize={3} color="text.main" />}
+          variant="outline-white"
+          onClick={() =>
+            navigate({
+              pathname: "/interaction",
+              query: {
+                functionType: "view",
+                address: decodeRes?.abi.address,
+                moduleName: decodeRes?.abi.name,
+              },
+            })
+          }
+        >
+          View
+        </Button>
+        <Button
+          leftIcon={<CustomIcon name="execute" boxSize={3} color="text.main" />}
+          variant="outline-white"
+          onClick={() =>
+            navigate({
+              pathname: "/interaction",
+              query: {
+                functionType: "execute",
+                address: decodeRes?.abi.address,
+                moduleName: decodeRes?.abi.name,
+              },
+            })
+          }
+        >
+          Execute
+        </Button>
+      </Grid>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 58281d828..686a85b74 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -1,171 +1,32 @@
-import { Text, Grid, Heading, Flex, Button, Box } from "@chakra-ui/react";
-import { useFieldArray, useForm } from "react-hook-form";
-
-import { useCelatoneApp, useMoveConfig } from "lib/app-provider";
-import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
-import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
-import { CustomIcon } from "lib/components/icon";
-import PageContainer from "lib/components/PageContainer";
-import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
-import type { Option } from "lib/types";
-
-import {
-  PolicyAccordion,
-  UploadAccordion,
-  Footer,
-  PolicyCard,
-  UploadModuleCard,
-} from "./components";
-import type { PublishModuleState, PublishStatus } from "./formConstants";
-import { emptyModule, policies, defaultValues } from "./formConstants";
-import { statusResolver } from "./utils";
-
-export const PublishModule = () => {
-  const {
-    chainConfig: { prettyName: chainPrettyName },
-  } = useCelatoneApp();
-  useMoveConfig({ shouldRedirect: true });
-
-  const PUBLISH_MODULE_TEXT = {
-    header: "Publish new module",
-    description: `Upload .mv files to publish new module to ${chainPrettyName}. You can
-    upload multiple .mv files to publish many modules within a
-    transaction.`,
-    connectWallet: "You need to connect wallet to proceed this action",
-  };
-
-  const { control, setValue, watch } = useForm<PublishModuleState>({
-    defaultValues,
+import { useState } from "react";
+
+import type { PublishTxInternalResult } from "lib/app-provider/tx/publish";
+import { UpgradePolicy } from "lib/types";
+
+import { PublishCompleted } from "./completed";
+import type { FileArrayFields } from "./formConstants";
+import { PublishModule } from "./publish";
+
+export interface PublishCompleteState extends PublishTxInternalResult {
+  upgradePolicy: UpgradePolicy;
+  modules: FileArrayFields;
+}
+
+export const PublishIndex = () => {
+  const [publishTxInfo, setPublishTxInfo] = useState<PublishCompleteState>({
+    txHash: "",
+    formattedFee: "",
+    upgradePolicy: UpgradePolicy.ARBITRARY,
+    modules: [],
   });
-
-  const { upgradePolicy } = watch();
-
-  const { fields, append, remove, update } = useFieldArray({
-    control,
-    name: "modules",
-  });
-
-  return (
-    <>
-      <PageContainer display="unset" p={0}>
-        <Grid
-          templateColumns="1fr 6fr 4fr 1fr"
-          columnGap="16px"
-          rowGap="48px"
-          p={{ base: "16px", md: "48px" }}
-        >
-          <Box gridArea="1 / 2">
-            <Heading as="h5" variant="h5" textAlign="center">
-              {PUBLISH_MODULE_TEXT.header}
-            </Heading>
-            <Text color="text.dark" pt={4} textAlign="center">
-              {PUBLISH_MODULE_TEXT.description}
-            </Text>
-            <ConnectWalletAlert
-              subtitle={PUBLISH_MODULE_TEXT.connectWallet}
-              mt={12}
-            />
-          </Box>
-          {/* Upload File Section */}
-          <Box gridArea="2 / 2">
-            <Heading as="h6" variant="h6" fontWeight={600}>
-              Upload .mv file(s)
-            </Heading>
-            <Flex gap={6} flexDirection="column" my={6}>
-              {fields.map((field, idx) => (
-                <UploadModuleCard
-                  key={field.id}
-                  index={idx}
-                  fields={fields}
-                  fileState={field}
-                  policy={upgradePolicy}
-                  setFile={(
-                    file: Option<File>,
-                    base64File: string,
-                    decodeRes: DecodeModuleQueryResponse,
-                    publishStatus: PublishStatus
-                  ) => {
-                    update(idx, {
-                      file,
-                      base64File,
-                      decodeRes,
-                      publishStatus,
-                    });
-                  }}
-                  removeFile={() => {
-                    update(idx, emptyModule);
-                  }}
-                  removeEntry={() => remove(idx)}
-                />
-              ))}
-            </Flex>
-            <Button
-              onClick={() => append(emptyModule)}
-              leftIcon={<CustomIcon name="add-new" />}
-              variant="ghost-primary"
-              p="0 4px"
-            >
-              Publish More Modules
-            </Button>
-          </Box>
-          {/* Upgrade Policy Section */}
-          <Box gridArea="3 / 2">
-            <Heading as="h6" variant="h6" fontWeight={600}>
-              Upgrade Policy
-            </Heading>
-            <Text color="text.dark" variant="body2" mt={2}>
-              Specify how publishing modules will be able to republish.
-            </Text>
-            <Flex direction="column" gap={2} my={4}>
-              {policies.map((item) => (
-                <PolicyCard
-                  key={item.value}
-                  value={item.value}
-                  selected={upgradePolicy}
-                  onSelect={() => {
-                    setValue("upgradePolicy", item.value);
-                    fields.forEach((field, index) =>
-                      update(index, {
-                        ...field,
-                        publishStatus: statusResolver({
-                          data: field.decodeRes,
-                          fields,
-                          index,
-                          policy: item.value,
-                        }),
-                      })
-                    );
-                  }}
-                  description={item.description}
-                  hasCondition={item.condition}
-                />
-              ))}
-            </Flex>
-            <Text color="text.dark" variant="body3">
-              ** Upgrade policy can be changed later, but will not able to
-              change to the more lenient policy.
-            </Text>
-            <Flex
-              mt={12}
-              fontSize="14px"
-              color="text.dark"
-              alignSelf="flex-start"
-              alignItems="center"
-              gap={1}
-            >
-              <p>Transaction Fee:</p>
-              <EstimatedFeeRender estimatedFee={undefined} loading={false} />
-            </Flex>
-          </Box>
-          <Box gridArea="2 / 3" pl="32px">
-            <UploadAccordion />
-          </Box>
-          <Box gridArea="3 / 3" pl="32px">
-            <PolicyAccordion chainName={chainPrettyName} />
-          </Box>
-        </Grid>
-      </PageContainer>
-      <Footer isLoading={false} fieldAmount={fields.length} />
-    </>
+  const [completed, setCompleted] = useState(false);
+
+  return completed ? (
+    <PublishCompleted {...publishTxInfo} />
+  ) : (
+    <PublishModule
+      setCompleted={setCompleted}
+      setPublishTxInfo={setPublishTxInfo}
+    />
   );
 };
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
new file mode 100644
index 000000000..7a3f79945
--- /dev/null
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -0,0 +1,295 @@
+import { Text, Grid, Heading, Flex, Button, Box } from "@chakra-ui/react";
+import type { StdFee } from "@cosmjs/stargate";
+import type { Dispatch, SetStateAction } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+
+import {
+  useCelatoneApp,
+  useCurrentChain,
+  useFabricateFee,
+  useMoveConfig,
+  useSimulateFeeQuery,
+} from "lib/app-provider";
+import { usePublishModuleTx } from "lib/app-provider/tx/publish";
+import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
+import { ErrorMessageRender } from "lib/components/ErrorMessageRender";
+import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
+import { CustomIcon } from "lib/components/icon";
+import PageContainer from "lib/components/PageContainer";
+import { useTxBroadcast } from "lib/providers/tx-broadcast";
+import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
+import type { HumanAddr, Option } from "lib/types";
+import { composePublishMsg } from "lib/utils";
+
+import type { PublishCompleteState } from ".";
+import {
+  PolicyAccordion,
+  UploadAccordion,
+  Footer,
+  PolicyCard,
+  UploadModuleCard,
+} from "./components";
+import type { PublishModuleState, PublishStatus } from "./formConstants";
+import { emptyModule, policies, defaultValues } from "./formConstants";
+import { statusResolver } from "./utils";
+
+interface PublishModuleProps {
+  setPublishTxInfo: Dispatch<SetStateAction<PublishCompleteState>>;
+  setCompleted: Dispatch<SetStateAction<boolean>>;
+}
+
+export const PublishModule = ({
+  setPublishTxInfo,
+  setCompleted,
+}: PublishModuleProps) => {
+  // ------------------------------------------//
+  // ---------------DEPENDENCIES---------------//
+  // ------------------------------------------//
+  const {
+    chainConfig: { prettyName: chainPrettyName },
+  } = useCelatoneApp();
+  const { address } = useCurrentChain();
+  const fabricateFee = useFabricateFee();
+  const postPublishTx = usePublishModuleTx();
+  const { broadcast } = useTxBroadcast();
+  useMoveConfig({ shouldRedirect: true });
+
+  // ------------------------------------------//
+  // ------------------STATES------------------//
+  // ------------------------------------------//
+  const [estimatedFee, setEstimatedFee] = useState<StdFee>();
+  const [simulateError, setSimulateError] = useState("");
+  const [processing, setProcessing] = useState(false);
+
+  // ------------------------------------------//
+  // ----------------FORM HOOKS----------------//
+  // ------------------------------------------//
+  const { control, setValue, watch } = useForm<PublishModuleState>({
+    defaultValues,
+  });
+
+  const { upgradePolicy } = watch();
+
+  const { fields, append, remove, update } = useFieldArray({
+    control,
+    name: "modules",
+  });
+
+  // ------------------------------------------//
+  // ---------------TRANSACTION----------------//
+  // ------------------------------------------//
+  const enablePublish = useMemo(
+    () =>
+      Boolean(
+        address &&
+          fields.every(
+            (field) =>
+              field.base64File && field.publishStatus.status !== "error"
+          )
+      ),
+    [address, fields]
+  );
+
+  const { isFetching: isSimulating } = useSimulateFeeQuery({
+    enabled: enablePublish,
+    messages: composePublishMsg(
+      address as HumanAddr,
+      fields.map((file) => file.base64File),
+      upgradePolicy
+    ),
+    onSuccess: (gasRes) => {
+      if (gasRes) setEstimatedFee(fabricateFee(gasRes));
+      else setEstimatedFee(undefined);
+    },
+    onError: (e) => {
+      setSimulateError(e.message);
+      setEstimatedFee(undefined);
+    },
+  });
+
+  const proceed = useCallback(async () => {
+    const stream = await postPublishTx({
+      onTxSucceed: (txResult) => {
+        setPublishTxInfo({ ...txResult, upgradePolicy, modules: fields });
+        setProcessing(false);
+        setCompleted(true);
+      },
+      onTxFailed: () => setProcessing(false),
+      estimatedFee,
+      messages: composePublishMsg(
+        address as HumanAddr,
+        fields.map((file) => file.base64File),
+        upgradePolicy
+      ),
+    });
+    if (stream) {
+      setProcessing(true);
+      broadcast(stream);
+    }
+  }, [
+    address,
+    estimatedFee,
+    fields,
+    upgradePolicy,
+    broadcast,
+    postPublishTx,
+    setCompleted,
+    setPublishTxInfo,
+  ]);
+
+  // ------------------------------------------//
+  // ---------------SIDE EFFECTS---------------//
+  // ------------------------------------------//
+  useEffect(() => {
+    if (!fields.every((field) => field.base64File)) {
+      setEstimatedFee(undefined);
+    }
+  }, [fields]);
+
+  const PUBLISH_MODULE_TEXT = {
+    header: "Publish new module",
+    description: `Upload .mv files to publish new module to ${chainPrettyName}. You can
+    upload multiple .mv files to publish many modules within a
+    transaction.`,
+    connectWallet: "You need to connect wallet to proceed this action",
+  };
+  return (
+    <>
+      <PageContainer display="unset" p={0}>
+        <Grid
+          templateColumns="1fr 6fr 4fr 1fr"
+          columnGap="16px"
+          rowGap="48px"
+          p={{ base: "16px", md: "48px" }}
+        >
+          <Box gridArea="1 / 2">
+            <Heading as="h5" variant="h5" textAlign="center">
+              {PUBLISH_MODULE_TEXT.header}
+            </Heading>
+            <Text color="text.dark" pt={4} textAlign="center">
+              {PUBLISH_MODULE_TEXT.description}
+            </Text>
+            <ConnectWalletAlert
+              subtitle={PUBLISH_MODULE_TEXT.connectWallet}
+              mt={12}
+            />
+          </Box>
+          {/* Upload File Section */}
+          <Box gridArea="2 / 2">
+            <Heading as="h6" variant="h6" fontWeight={600}>
+              Upload .mv file(s)
+            </Heading>
+            <Flex gap={6} flexDirection="column" my={6}>
+              {fields.map((field, idx) => (
+                <UploadModuleCard
+                  key={field.id}
+                  index={idx}
+                  fields={fields}
+                  fileState={field}
+                  policy={upgradePolicy}
+                  setFile={(
+                    file: Option<File>,
+                    base64File: string,
+                    decodeRes: DecodeModuleQueryResponse,
+                    publishStatus: PublishStatus
+                  ) => {
+                    update(idx, {
+                      file,
+                      base64File,
+                      decodeRes,
+                      publishStatus,
+                    });
+                  }}
+                  removeFile={() => {
+                    update(idx, emptyModule);
+                  }}
+                  removeEntry={() => remove(idx)}
+                />
+              ))}
+            </Flex>
+            <Button
+              onClick={() => append(emptyModule)}
+              leftIcon={<CustomIcon name="add-new" />}
+              variant="ghost-primary"
+              p="0 4px"
+            >
+              Publish More Modules
+            </Button>
+          </Box>
+          {/* Upgrade Policy Section */}
+          <Box gridArea="3 / 2">
+            <Heading as="h6" variant="h6" fontWeight={600}>
+              Upgrade Policy
+            </Heading>
+            <Text color="text.dark" variant="body2" mt={2}>
+              Specify how publishing modules will be able to republish.
+            </Text>
+            <Flex direction="column" gap={2} my={4}>
+              {policies.map((item) => (
+                <PolicyCard
+                  key={item.value}
+                  value={item.value}
+                  selected={upgradePolicy}
+                  onSelect={() => {
+                    setValue("upgradePolicy", item.value);
+                    fields.forEach((field, index) =>
+                      update(index, {
+                        ...field,
+                        publishStatus: statusResolver({
+                          data: field.decodeRes,
+                          fields,
+                          index,
+                          policy: item.value,
+                        }),
+                      })
+                    );
+                  }}
+                  description={item.description}
+                  hasCondition={item.condition}
+                />
+              ))}
+            </Flex>
+            <Text color="text.dark" variant="body3">
+              ** Upgrade policy can be changed later, but will not able to
+              change to the more lenient policy.
+            </Text>
+            <Flex
+              mt={12}
+              fontSize="14px"
+              color="text.dark"
+              alignSelf="flex-start"
+              alignItems="center"
+              gap={1}
+            >
+              <p>Transaction Fee:</p>
+              <EstimatedFeeRender
+                estimatedFee={estimatedFee}
+                loading={isSimulating}
+              />
+            </Flex>
+            {simulateError && (
+              <ErrorMessageRender
+                error={simulateError}
+                mt={2}
+                alignSelf="flex-start"
+              />
+            )}
+          </Box>
+          <Box gridArea="2 / 3" pl="32px">
+            <UploadAccordion />
+          </Box>
+          <Box gridArea="3 / 3" pl="32px">
+            <PolicyAccordion chainName={chainPrettyName} />
+          </Box>
+        </Grid>
+      </PageContainer>
+      <Footer
+        publishModule={proceed}
+        isLoading={processing}
+        disabled={!enablePublish || Boolean(simulateError) || isSimulating}
+        fieldAmount={fields.length}
+      />
+    </>
+  );
+};
diff --git a/src/lib/providers/cosmos-kit.tsx b/src/lib/providers/cosmos-kit/index.tsx
similarity index 93%
rename from src/lib/providers/cosmos-kit.tsx
rename to src/lib/providers/cosmos-kit/index.tsx
index c57f25bf8..52bef39e8 100644
--- a/src/lib/providers/cosmos-kit.tsx
+++ b/src/lib/providers/cosmos-kit/index.tsx
@@ -18,6 +18,8 @@ import {
   terra2testnetAssets,
 } from "lib/chain-registry/terra2testnet";
 
+import { getCustomedSigningCosmwasm } from "./options";
+
 // Remark: The avaliable wallet list won't change after the app is loaded.
 // So we have to revisit this later if we have another solution.
 export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
@@ -53,6 +55,7 @@ export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
         endpoints: availableChainsEndpoints,
       }}
       signerOptions={{
+        signingCosmwasm: () => getCustomedSigningCosmwasm(),
         preferredSignType: () => "direct",
       }}
     >
diff --git a/src/lib/providers/cosmos-kit/move.ts b/src/lib/providers/cosmos-kit/move.ts
new file mode 100644
index 000000000..7cd51e50b
--- /dev/null
+++ b/src/lib/providers/cosmos-kit/move.ts
@@ -0,0 +1,12 @@
+import type { GeneratedType } from "@cosmjs/proto-signing";
+import {
+  MsgExecute,
+  MsgPublish,
+  MsgScript,
+} from "@initia/initia.proto/initia/move/v1/tx";
+
+export const moveTypes: ReadonlyArray<[string, GeneratedType]> = [
+  ["/initia.move.v1.MsgExecute", MsgExecute],
+  ["/initia.move.v1.MsgPublish", MsgPublish],
+  ["/initia.move.v1.MsgScript", MsgScript],
+];
diff --git a/src/lib/providers/cosmos-kit/options.ts b/src/lib/providers/cosmos-kit/options.ts
new file mode 100644
index 000000000..d4e90c238
--- /dev/null
+++ b/src/lib/providers/cosmos-kit/options.ts
@@ -0,0 +1,30 @@
+import {
+  createWasmAminoConverters,
+  type SigningCosmWasmClientOptions,
+} from "@cosmjs/cosmwasm-stargate";
+import { wasmTypes } from "@cosmjs/cosmwasm-stargate/build/modules";
+import { Registry } from "@cosmjs/proto-signing";
+import {
+  AminoTypes,
+  createDefaultAminoConverters,
+  defaultRegistryTypes as defaultStargateTypes,
+} from "@cosmjs/stargate";
+
+import { moveTypes } from "./move";
+
+/**
+ * Remark: This is the custom signerOptions for the SigningCosmWasmClient.
+ */
+export const getCustomedSigningCosmwasm = (): SigningCosmWasmClientOptions => {
+  const registry = [...defaultStargateTypes, ...wasmTypes, ...moveTypes];
+  const aminoTypes = {
+    ...createDefaultAminoConverters(),
+    ...createWasmAminoConverters(),
+    // TODO: move amino converters to be implemented
+  };
+
+  return {
+    registry: new Registry(registry),
+    aminoTypes: new AminoTypes(aminoTypes),
+  };
+};
diff --git a/src/lib/utils/encode.ts b/src/lib/utils/encode.ts
new file mode 100644
index 000000000..28d3c851c
--- /dev/null
+++ b/src/lib/utils/encode.ts
@@ -0,0 +1,9 @@
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { Msg } from "@initia/initia.js";
+
+export const toEncodeObject = (msgs: Msg[]): EncodeObject[] => {
+  return msgs.map((msg) => ({
+    typeUrl: msg.toData()["@type"],
+    value: msg.toProto(),
+  }));
+};
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index e5f5bba2b..12c9e78ff 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -32,3 +32,4 @@ export * from "./number";
 export * from "./math";
 export * from "./abi";
 export * from "./modules";
+export * from "./encode";
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index afcd8e5f5..69e37b32f 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -1,7 +1,9 @@
 import type { Coin } from "@cosmjs/stargate";
+import { MsgPublish } from "@initia/initia.js";
 import { ParameterChangeProposal } from "cosmjs-types/cosmos/params/v1beta1/params";
 import { StoreCodeProposal } from "cosmjs-types/cosmwasm/wasm/v1/proposal";
 
+import { toEncodeObject } from "../encode";
 import { exponentify } from "../formatter";
 import { typeUrlDict } from "lib/data";
 import type {
@@ -12,6 +14,7 @@ import type {
   Token,
   HumanAddr,
   Option,
+  UpgradePolicy,
 } from "lib/types";
 import { MsgType } from "lib/types";
 
@@ -155,3 +158,12 @@ export const composeStoreCodeProposalMsg = ({
     ],
     proposer,
   });
+
+export const composePublishMsg = (
+  address: HumanAddr,
+  codeBytesArr: string[],
+  upgradePolicy: UpgradePolicy
+) =>
+  toEncodeObject([
+    new MsgPublish(address as HumanAddr, codeBytesArr, upgradePolicy),
+  ]);
diff --git a/src/pages/[network]/publish-module/index.tsx b/src/pages/[network]/publish-module/index.tsx
index 3e1ca0dbf..6df5a8e18 100644
--- a/src/pages/[network]/publish-module/index.tsx
+++ b/src/pages/[network]/publish-module/index.tsx
@@ -1,3 +1,3 @@
-import { PublishModule } from "lib/pages/publish-module";
+import { PublishIndex } from "lib/pages/publish-module";
 
-export default PublishModule;
+export default PublishIndex;
diff --git a/src/pages/publish-module/index.tsx b/src/pages/publish-module/index.tsx
index 3e1ca0dbf..6df5a8e18 100644
--- a/src/pages/publish-module/index.tsx
+++ b/src/pages/publish-module/index.tsx
@@ -1,3 +1,3 @@
-import { PublishModule } from "lib/pages/publish-module";
+import { PublishIndex } from "lib/pages/publish-module";
 
-export default PublishModule;
+export default PublishIndex;
diff --git a/yarn.lock b/yarn.lock
index fd74b5404..d75b9504b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2065,17 +2065,7 @@
   resolved "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.29.tgz"
   integrity sha512-q/yVUnqckA8Do+EvAfpy7RLdumnBy9ZsducMUtZTvpdbJC7azEf1hGtnYYxm0QfphYxjwggv6XtH64prvS1W+A==
 
-"@cosmjs/amino@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.30.1.tgz#7c18c14627361ba6c88e3495700ceea1f76baace"
-  integrity sha512-yNHnzmvAlkETDYIpeCTdVqgvrdt1qgkOXwuRVi8s27UKI5hfqyE9fJ/fuunXE6ZZPnKkjIecDznmuUOMrMvw4w==
-  dependencies:
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-
-"@cosmjs/amino@^0.31.0":
+"@cosmjs/amino@^0.31.0", "@cosmjs/amino@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.31.1.tgz#e6b4adc3ebe19ddfd953c67ee04b1eae488238af"
   integrity sha512-kkB9IAkNEUFtjp/uwHv95TgM8VGJ4VWfZwrTyLNqBDD1EpSX2dsNrmUe7k8OMPzKlZUFcKmD4iA0qGvIwzjbGA==
@@ -2085,37 +2075,24 @@
     "@cosmjs/math" "^0.31.1"
     "@cosmjs/utils" "^0.31.1"
 
-"@cosmjs/cosmwasm-stargate@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.30.1.tgz#6f9ca310f75433a3e30d683bc6aa24eadb345d79"
-  integrity sha512-W/6SLUCJAJGBN+sJLXouLZikVgmqDd9LCdlMzQaxczcCHTWeJAmRvOiZGSZaSy3shw/JN1qc6g6PKpvTVgj10A==
-  dependencies:
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/proto-signing" "^0.30.1"
-    "@cosmjs/stargate" "^0.30.1"
-    "@cosmjs/tendermint-rpc" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+"@cosmjs/cosmwasm-stargate@0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.31.1.tgz#36d4386238fd4310d144486a27585a4fec3f27cd"
+  integrity sha512-5hwv4oztFnpqnFaXhYxZc93na3qdxylT2kqms4pLzD8CWMEQmrwhdM4KpZimrsyZK55WiMQtTPsdSh7M8KLOow==
+  dependencies:
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/proto-signing" "^0.31.1"
+    "@cosmjs/stargate" "^0.31.1"
+    "@cosmjs/tendermint-rpc" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
     pako "^2.0.2"
 
-"@cosmjs/crypto@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.30.1.tgz#21e94d5ca8f8ded16eee1389d2639cb5c43c3eb5"
-  integrity sha512-rAljUlake3MSXs9xAm87mu34GfBLN0h/1uPPV6jEwClWjNkAMotzjC0ab9MARy5FFAvYHL3lWb57bhkbt2GtzQ==
-  dependencies:
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    "@noble/hashes" "^1"
-    bn.js "^5.2.0"
-    elliptic "^6.5.4"
-    libsodium-wrappers "^0.7.6"
-
-"@cosmjs/crypto@^0.31.1":
+"@cosmjs/crypto@0.31.1", "@cosmjs/crypto@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.31.1.tgz#ce4917df0f7b38f0909a32020907ccff04acefe6"
   integrity sha512-4R/SqdzdVzd4E5dpyEh1IKm5GbTqwDogutyIyyb1bcOXiX/x3CrvPI9Tb4WSIMDLvlb5TVzu2YnUV51Q1+6mMA==
@@ -2128,39 +2105,30 @@
     elliptic "^6.5.4"
     libsodium-wrappers-sumo "^0.7.11"
 
-"@cosmjs/encoding@^0.20.0":
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.20.1.tgz#1d1162b3eca51b7244cd45102e313612cea77281"
-  integrity sha512-aBp153iq2LD4GwDGwodDWZk/eyAUZ8J8bbiqZ1uK8rrylzm9Rdw84aa6JxykezJe+uBPtoI4lx9eH7VQXCGDXw==
+"@cosmjs/encoding@0.31.1", "@cosmjs/encoding@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.31.1.tgz#0041b2650c443d883e22f27c7d3cd7b844c6d0ec"
+  integrity sha512-IuxP6ewwX6vg9sUJ8ocJD92pkerI4lyG8J5ynAM3NaX3q+n+uMoPRSQXNeL9bnlrv01FF1kIm8if/f5F7ZPtkA==
   dependencies:
     base64-js "^1.3.0"
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/encoding@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.30.1.tgz#b5c4e0ef7ceb1f2753688eb96400ed70f35c6058"
-  integrity sha512-rXmrTbgqwihORwJ3xYhIgQFfMSrwLu1s43RIK9I8EBudPx3KmnmyAKzMOVsRDo9edLFNuZ9GIvysUCwQfq3WlQ==
+"@cosmjs/encoding@^0.20.0":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.20.1.tgz#1d1162b3eca51b7244cd45102e313612cea77281"
+  integrity sha512-aBp153iq2LD4GwDGwodDWZk/eyAUZ8J8bbiqZ1uK8rrylzm9Rdw84aa6JxykezJe+uBPtoI4lx9eH7VQXCGDXw==
   dependencies:
     base64-js "^1.3.0"
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/encoding@^0.31.1":
+"@cosmjs/json-rpc@^0.31.1":
   version "0.31.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.31.1.tgz#0041b2650c443d883e22f27c7d3cd7b844c6d0ec"
-  integrity sha512-IuxP6ewwX6vg9sUJ8ocJD92pkerI4lyG8J5ynAM3NaX3q+n+uMoPRSQXNeL9bnlrv01FF1kIm8if/f5F7ZPtkA==
-  dependencies:
-    base64-js "^1.3.0"
-    bech32 "^1.1.4"
-    readonly-date "^1.0.0"
-
-"@cosmjs/json-rpc@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.30.1.tgz#16f21305fc167598c8a23a45549b85106b2372bc"
-  integrity sha512-pitfC/2YN9t+kXZCbNuyrZ6M8abnCC2n62m+JtU9vQUfaEtVsgy+1Fk4TRQ175+pIWSdBMFi2wT8FWVEE4RhxQ==
+  resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.31.1.tgz#54d1064adb3ebd0412b04f87a3c2029384e4cb5e"
+  integrity sha512-gIkCj2mUDHAxvmJnHtybXtMLZDeXrkDZlujjzhvJlWsIuj1kpZbKtYqh+eNlfwhMkMMAlQa/y4422jDmizW+ng==
   dependencies:
-    "@cosmjs/stream" "^0.30.1"
+    "@cosmjs/stream" "^0.31.1"
     xstream "^11.14.0"
 
 "@cosmjs/math@^0.20.0":
@@ -2170,13 +2138,6 @@
   dependencies:
     bn.js "^4.11.8"
 
-"@cosmjs/math@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.30.1.tgz#8b816ef4de5d3afa66cb9fdfb5df2357a7845b8a"
-  integrity sha512-yaoeI23pin9ZiPHIisa6qqLngfnBR/25tSaWpkTm8Cy10MX70UF5oN4+/t1heLaM6SSmRrhk3psRkV4+7mH51Q==
-  dependencies:
-    bn.js "^5.2.0"
-
 "@cosmjs/math@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.31.1.tgz#74c02cf237c2996b77661b636b014168b18d95e6"
@@ -2184,66 +2145,66 @@
   dependencies:
     bn.js "^5.2.0"
 
-"@cosmjs/proto-signing@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.30.1.tgz#f0dda372488df9cd2677150b89b3e9c72b3cb713"
-  integrity sha512-tXh8pPYXV4aiJVhTKHGyeZekjj+K9s2KKojMB93Gcob2DxUjfKapFYBMJSgfKPuWUPEmyr8Q9km2hplI38ILgQ==
-  dependencies:
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+"@cosmjs/proto-signing@0.31.1", "@cosmjs/proto-signing@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.31.1.tgz#3929d5bee3c88c42b3bc3c4b9db4ab3bddb684c4"
+  integrity sha512-hipbBVrssPu+jnmRzQRP5hhS/mbz2nU7RvxG/B1ZcdNhr1AtZC5DN09OTUoEpMSRgyQvScXmk/NTbyf+xmCgYg==
+  dependencies:
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
 
-"@cosmjs/socket@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/socket/-/socket-0.30.1.tgz#00b22f4b5e2ab01f4d82ccdb7b2e59536bfe5ce0"
-  integrity sha512-r6MpDL+9N+qOS/D5VaxnPaMJ3flwQ36G+vPvYJsXArj93BjgyFB7BwWwXCQDzZ+23cfChPUfhbINOenr8N2Kow==
+"@cosmjs/socket@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/socket/-/socket-0.31.1.tgz#887d4e9b6aad4b3d264d64a47bdb40bcfa9802ff"
+  integrity sha512-XTtEr+x3WGbqkzoGX0sCkwVqf5n+bBqDwqNgb+DWaBABQxHVRuuainrTVp0Yc91D3Iy2twLQzeBA9OrRxDSerw==
   dependencies:
-    "@cosmjs/stream" "^0.30.1"
+    "@cosmjs/stream" "^0.31.1"
     isomorphic-ws "^4.0.1"
     ws "^7"
     xstream "^11.14.0"
 
-"@cosmjs/stargate@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.30.1.tgz#e1b22e1226cffc6e93914a410755f1f61057ba04"
-  integrity sha512-RdbYKZCGOH8gWebO7r6WvNnQMxHrNXInY/gPHPzMjbQF6UatA6fNM2G2tdgS5j5u7FTqlCI10stNXrknaNdzog==
+"@cosmjs/stargate@0.31.1", "@cosmjs/stargate@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.31.1.tgz#7e2b0fd6f181250915b1d73ecf9dfbab6f3cdd0d"
+  integrity sha512-TqOJZYOH5W3sZIjR6949GfjhGXO3kSHQ3/KmE+SuKyMMmQ5fFZ45beawiRtVF0/CJg5RyPFyFGJKhb1Xxv3Lcg==
   dependencies:
     "@confio/ics23" "^0.6.8"
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/proto-signing" "^0.30.1"
-    "@cosmjs/stream" "^0.30.1"
-    "@cosmjs/tendermint-rpc" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/proto-signing" "^0.31.1"
+    "@cosmjs/stream" "^0.31.1"
+    "@cosmjs/tendermint-rpc" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
     protobufjs "~6.11.3"
     xstream "^11.14.0"
 
-"@cosmjs/stream@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/stream/-/stream-0.30.1.tgz#ba038a2aaf41343696b1e6e759d8e03a9516ec1a"
-  integrity sha512-Fg0pWz1zXQdoxQZpdHRMGvUH5RqS6tPv+j9Eh7Q953UjMlrwZVo0YFLC8OTf/HKVf10E4i0u6aM8D69Q6cNkgQ==
+"@cosmjs/stream@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stream/-/stream-0.31.1.tgz#01bab56278bfe32cd601043949fcdc021a5f7ca7"
+  integrity sha512-xsIGD9bpBvYYZASajCyOevh1H5pDdbOWmvb4UwGZ78doGVz3IC3Kb9BZKJHIX2fjq9CMdGVJHmlM+Zp5aM8yZA==
   dependencies:
     xstream "^11.14.0"
 
-"@cosmjs/tendermint-rpc@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.30.1.tgz#c16378892ba1ac63f72803fdf7567eab9d4f0aa0"
-  integrity sha512-Z3nCwhXSbPZJ++v85zHObeUggrEHVfm1u18ZRwXxFE9ZMl5mXTybnwYhczuYOl7KRskgwlB+rID0WYACxj4wdQ==
-  dependencies:
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/json-rpc" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/socket" "^0.30.1"
-    "@cosmjs/stream" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
+"@cosmjs/tendermint-rpc@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.31.1.tgz#0699c6046fc8afd1eee3c648cfb3b896119ce52e"
+  integrity sha512-KX+wwi725sSePqIxfMPPOqg+xTETV8BHGOBhRhCZXEl5Fq48UlXXq3/yG1sn7K67ADC0kqHqcCF41Wn1GxNNPA==
+  dependencies:
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/json-rpc" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/socket" "^0.31.1"
+    "@cosmjs/stream" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
     axios "^0.21.2"
     readonly-date "^1.0.0"
     xstream "^11.14.0"
@@ -2253,11 +2214,6 @@
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.20.1.tgz#4d239b7d93c15523cdf109f225cbf61326fb69cd"
   integrity sha512-xl9YnIrAAaBd6nFffwFbyrnKjqjD9zKGP8OBKxzyglxamHfqAS+PcJPEiaEpt+oUt7HAIOyhL3KK75Dh52hGvA==
 
-"@cosmjs/utils@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.30.1.tgz#6d92582341be3c2ec8d82090253cfa4b7f959edb"
-  integrity sha512-KvvX58MGMWh7xA+N+deCfunkA/ZNDvFLw4YbOmX3f/XBIkqrVY7qlotfy2aNb1kgp6h4B6Yc8YawJPDTfvWX7g==
-
 "@cosmjs/utils@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.31.1.tgz#e6055cd7d722fa72df9cbd0d39cd1f7a9ac80483"
@@ -3400,6 +3356,45 @@
   dependencies:
     browser-headers "^0.4.1"
 
+"@improbable-eng/grpc-web@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@improbable-eng/grpc-web/-/grpc-web-0.15.0.tgz#3e47e9fdd90381a74abd4b7d26e67422a2a04bef"
+  integrity sha512-ERft9/0/8CmYalqOVnJnpdDry28q+j+nAlFFARdjyxXDJ+Mhgv9+F600QC8BR9ygOfrXRlAk6CvST2j+JCpQPg==
+  dependencies:
+    browser-headers "^0.4.1"
+
+"@initia/initia.js@^0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.9.tgz#e15c63b78b6385ce39f9677a75bd1abc1da92f4c"
+  integrity sha512-ZTN/uAd6r4f/SHgtzsNeAnAS1dIyyHa46sD0CXrzrWbIPFHs8dpJgNJY7Qca8bZaANecobU9jB6eI1K/MWVcLQ==
+  dependencies:
+    "@initia/initia.proto" "^0.1.11"
+    "@ledgerhq/hw-transport" "^6.27.12"
+    "@ledgerhq/hw-transport-webhid" "^6.27.12"
+    "@ledgerhq/hw-transport-webusb" "^6.27.12"
+    "@mysten/bcs" "^0.7.0"
+    axios "^0.27.2"
+    bech32 "^2.0.0"
+    bignumber.js "^9.1.0"
+    bip32 "^2.0.6"
+    bip39 "^3.0.4"
+    jscrypto "^1.0.3"
+    long "^5.2.0"
+    ripemd160 "^2.0.2"
+    secp256k1 "^4.0.3"
+    tmp "^0.2.1"
+    ws "^7.5.9"
+
+"@initia/initia.proto@^0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.11.tgz#39016bbb4d15f06aaec17e56d6f431ddadc600ce"
+  integrity sha512-G9HRTy5xfza6hTjYLuLgcmJWjSDsnLXnc2HvWceDcaSlHp212rMH07+gpazwY0L6aCm3uWyqLh4Yig60L3AaRA==
+  dependencies:
+    "@improbable-eng/grpc-web" "^0.15.0"
+    google-protobuf "^3.21.0"
+    long "^5.2.0"
+    protobufjs "^7.1.1"
+
 "@interchain-ui/react@1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.4.1.tgz#92e9eb3d657596a84f7c93c509a1c4a3f8771f10"
@@ -3872,6 +3867,55 @@
     big-integer "^1.6.48"
     utility-types "^3.10.0"
 
+"@ledgerhq/devices@^8.0.7":
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-8.0.7.tgz#206434dbd8a097529bbfc95f5eef94c2923c7578"
+  integrity sha512-BbPyET52lXnVs7CxJWrGYqmtGdbGzj+XnfCqLsDnA7QYr1CZREysxmie+Rr6BKpNDBRVesAovXjtaVaZOn+upw==
+  dependencies:
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/logs" "^6.10.1"
+    rxjs "6"
+    semver "^7.3.5"
+
+"@ledgerhq/errors@^6.14.0":
+  version "6.14.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-6.14.0.tgz#0bf253983773ef12eebce2091f463bc719223b37"
+  integrity sha512-ZWJw2Ti6Dq1Ott/+qYqJdDWeZm16qI3VNG5rFlb0TQ3UcAyLIQZbnnzzdcVVwVeZiEp66WIpINd/pBdqsHVyOA==
+
+"@ledgerhq/hw-transport-webhid@^6.27.12":
+  version "6.27.19"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webhid/-/hw-transport-webhid-6.27.19.tgz#5a655b497258d94ec6494db7b56e17dd0c610638"
+  integrity sha512-RMnktayqqLE2uFQDw9TKoW+WSP8KnT0ElKcIISf3sXVrzHD2y0moPk/wXOzGfi+cgN4uiKy86UD/5mgz3wlm6Q==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/hw-transport" "^6.28.8"
+    "@ledgerhq/logs" "^6.10.1"
+
+"@ledgerhq/hw-transport-webusb@^6.27.12":
+  version "6.27.19"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webusb/-/hw-transport-webusb-6.27.19.tgz#30a95c2122bcab6709665fda700276622087a930"
+  integrity sha512-M93sCyYREk8jCW/o7D/Ey+GQl38IALc0AY5WLKghzyjgqdPNo0x3j7CuTFJXiMWl5Mh8YDsO/MY8kkG9tuMvKQ==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/hw-transport" "^6.28.8"
+    "@ledgerhq/logs" "^6.10.1"
+
+"@ledgerhq/hw-transport@^6.27.12", "@ledgerhq/hw-transport@^6.28.8":
+  version "6.28.8"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-6.28.8.tgz#f99a5c71c5c09591e9bfb1b970c42aafbe81351f"
+  integrity sha512-XxQVl4htd018u/M66r0iu5nlHi+J6QfdPsORzDF6N39jaz+tMqItb7tUlXM/isggcuS5lc7GJo7NOuJ8rvHZaQ==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    events "^3.3.0"
+
+"@ledgerhq/logs@^6.10.1":
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-6.10.1.tgz#5bd16082261d7364eabb511c788f00937dac588d"
+  integrity sha512-z+ILK8Q3y+nfUl43ctCPuR4Y2bIxk/ooCQFwZxhtci1EhAtMDzMAx2W25qx8G1PPL9UUOdnUax19+F0OjXoj4w==
+
 "@motionone/animation@^10.15.1":
   version "10.15.1"
   resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807"
@@ -3941,6 +3985,13 @@
     "@motionone/dom" "^10.16.2"
     tslib "^2.3.1"
 
+"@mysten/bcs@^0.7.0":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@mysten/bcs/-/bcs-0.7.4.tgz#1e32ec3d1fa68a0ed98323e604a741728927e421"
+  integrity sha512-6DKzM4L10Au3Og5EJRBqJZmXWZ7hS/clVjbVUH4sA0aFtS3AZo2xc+r5fUFfdJbaWZUxVaDiQ8BNiEZWkAnEOw==
+  dependencies:
+    bs58 "^5.0.0"
+
 "@next/env@13.0.0":
   version "13.0.0"
   resolved "https://registry.npmjs.org/@next/env/-/env-13.0.0.tgz"
@@ -5872,6 +5923,11 @@ base-x@^3.0.2:
   dependencies:
     safe-buffer "^5.0.1"
 
+base-x@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
+  integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
+
 base64-js@^1.0.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
@@ -5897,6 +5953,11 @@ big.js@^6.2.1:
   resolved "https://registry.npmjs.org/big.js/-/big.js-6.2.1.tgz"
   integrity sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==
 
+bignumber.js@^9.1.0:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
+  integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
+
 bignumber.js@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.1.tgz#c4df7dc496bd849d4c9464344c1aa74228b4dac6"
@@ -5927,7 +5988,7 @@ bip32@^2.0.6:
     typeforce "^1.11.5"
     wif "^2.0.6"
 
-bip39@^3.0.2, bip39@^3.0.3:
+bip39@^3.0.2, bip39@^3.0.3, bip39@^3.0.4:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bip39/-/bip39-3.1.0.tgz#c55a418deaf48826a6ceb34ac55b3ee1577e18a3"
   integrity sha512-c9kiwdk45Do5GL0vJMe7tS95VjCii65mYAH7DfWl3uW8AVzXKQVUm64i3hzVybBDMp9r7j9iNxR85+ul8MdN/A==
@@ -6068,6 +6129,13 @@ bs58@^4.0.0:
   dependencies:
     base-x "^3.0.2"
 
+bs58@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279"
+  integrity sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ==
+  dependencies:
+    base-x "^4.0.0"
+
 bs58check@<3.0.0, bs58check@^2.1.1, bs58check@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
@@ -6201,7 +6269,7 @@ capital-case@^1.0.4:
     tslib "^2.0.3"
     upper-case-first "^2.0.2"
 
-chain-registry@^1.19.0:
+chain-registry@1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/chain-registry/-/chain-registry-1.19.0.tgz#6d2d56b56efebee0d15ced8f9bd8329a099ce04d"
   integrity sha512-7Ax0cRurfS+I0Oru3Td8NqBY/2YRCv570XM555E5vu3ib3f/k5SELwxsSalTtQj+Furx6quEyKWuOjrNwPpcQg==
@@ -6827,7 +6895,7 @@ cosmiconfig@7.0.1, cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmjs-types@^0.7.1, cosmjs-types@^0.7.2:
+cosmjs-types@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.7.2.tgz#a757371abd340949c5bd5d49c6f8379ae1ffd7e2"
   integrity sha512-vf2uLyktjr/XVAgEq0DjMxeAWh1yYREe7AMHDKd7EiHVqxBPCaBS+qEEQUkXbR9ndnckqr1sUG8BQhazh4X5lA==
@@ -6835,6 +6903,14 @@ cosmjs-types@^0.7.1, cosmjs-types@^0.7.2:
     long "^4.0.0"
     protobufjs "~6.11.2"
 
+cosmjs-types@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.8.0.tgz#2ed78f3e990f770229726f95f3ef5bf9e2b6859b"
+  integrity sha512-Q2Mj95Fl0PYMWEhA2LuGEIhipF7mQwd9gTQ85DdP9jjjopeoGaDxvmPa5nakNzsq7FnO1DMTatXTAx6bxMH7Lg==
+  dependencies:
+    long "^4.0.0"
+    protobufjs "~6.11.2"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -8308,7 +8384,7 @@ globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-google-protobuf@^3.17.3:
+google-protobuf@^3.17.3, google-protobuf@^3.21.0:
   version "3.21.2"
   resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
   integrity sha512-3MSOYFO5U9mPGikIYCzK0SaThypfGgS6bHqrUGXG3DPHCrb+txNqeEcns1W0lkGfk0rCyNXm7xB9rMxnCiZOoA==
@@ -9461,7 +9537,7 @@ js-yaml@^4.0.0, js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-jscrypto@^1.0.1:
+jscrypto@^1.0.1, jscrypto@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/jscrypto/-/jscrypto-1.0.3.tgz#598febca2a939d6f679c54f56e1fe364cef30cc9"
   integrity sha512-lryZl0flhodv4SZHOqyb1bx5sKcJxj0VBo0Kzb4QMAg3L021IC9uGpl0RCZa+9KJwlRGSK2C80ITcwbe19OKLQ==
@@ -9913,16 +9989,16 @@ long@^4.0.0:
   resolved "https://registry.npmjs.org/long/-/long-4.0.0.tgz"
   integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
 
+long@^5.0.0, long@^5.2.0, long@^5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
+  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
+
 long@^5.2.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/long/-/long-5.2.1.tgz"
   integrity sha512-GKSNGeNAtw8IryjjkhZxuKB3JzlcLTwjtiQCHKvqQet81I93kXslhDQruGI/QsddO83mcDToBVy7GqGS/zYf/A==
 
-long@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
-  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
-
 longest@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/longest/-/longest-2.0.1.tgz"
@@ -10951,6 +11027,24 @@ protobufjs@6.11.3, protobufjs@^6.11.2, protobufjs@^6.8.8, protobufjs@~6.11.2, pr
     "@types/node" ">=13.7.0"
     long "^4.0.0"
 
+protobufjs@^7.1.1:
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.5.tgz#45d5c57387a6d29a17aab6846dcc283f9b8e7f2d"
+  integrity sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
 proxy-compare@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.5.1.tgz#17818e33d1653fbac8c2ec31406bce8a2966f600"
@@ -11510,6 +11604,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@6:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
 rxjs@^7.0.0, rxjs@^7.5.7:
   version "7.5.7"
   resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz"
@@ -11566,7 +11667,7 @@ scuid@^1.1.0:
   resolved "https://registry.npmjs.org/scuid/-/scuid-1.1.0.tgz"
   integrity sha512-MuCAyrGZcTLfQoH2XoBlQ8C6bzwN88XT/0slOGz0pn8+gIP85BOAfYa44ZXQUTOwRwPU0QvgU+V+OSajl/59Xg==
 
-secp256k1@^4.0.2:
+secp256k1@^4.0.2, secp256k1@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-4.0.3.tgz#c4559ecd1b8d3c1827ed2d1b94190d69ce267303"
   integrity sha512-NLZVf+ROMxwtEj3Xa562qgv2BK5e2WNmXPiOdVIPLgs6lyTzMvBq0aWTYMI5XCP9jZMVKOcqZLw/Wc4vDkuxhA==
@@ -12253,7 +12354,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.3:
+tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

From 895463da4f13482628ab5f18f5393570dbf85ae0 Mon Sep 17 00:00:00 2001
From: traviolus <david.tumcharoen@gmail.com>
Date: Fri, 22 Sep 2023 01:47:31 +0700
Subject: [PATCH 072/368] fix: initia chain config

---
 src/config/chain/initia.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index ee866aeb6..2831aa669 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -3,13 +3,13 @@ import { wallets as keplrWallets } from "@cosmos-kit/keplr";
 import type { ChainConfigs } from "./types";
 
 export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
-  "stone-9": {
+  "stone-10": {
     chain: "initia",
     registryChainName: "initiatestnet",
     prettyName: "Initia Testnet",
     lcd: "https://stone-rest.initia.tech",
     rpc: "https://stone-rpc.initia.tech:443",
-    indexer: "https://initia-tesnet-graphql.alleslabs.dev/v1/graphql",
+    indexer: "https://stone-10-graphql.alleslabs.dev/v1/graphql",
     api: "https://celatone-api.alleslabs.dev",
     wallets: [...keplrWallets],
     features: {
@@ -46,7 +46,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
     },
     explorerLink: {
       validator: "https://app.initia.tech/validator",
-      proposal: "https://app.initia.tech/proposals",
+      proposal: "https://app.initia.tech/proposal",
     },
     extra: {},
   },

From 80f654c87cf90a2a12f68954d52117c61b265398 Mon Sep 17 00:00:00 2001
From: traviolus <david.tumcharoen@gmail.com>
Date: Fri, 22 Sep 2023 01:53:20 +0700
Subject: [PATCH 073/368] chore: update CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f91cf19b..a023d6a54 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -102,6 +102,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#543](https://github.com/alleslabs/celatone-frontend/pull/543) Fix Initia testnet chain config
 - [#522](https://github.com/alleslabs/celatone-frontend/pull/522) Fix to support undefined execute msg
 - [#520](https://github.com/alleslabs/celatone-frontend/pull/520) Fix update instantiated info height data and handle genesis height case
 - [#518](https://github.com/alleslabs/celatone-frontend/pull/518) Fix contract migration remark data

From 0ff31ea421c75ab51c34ee3ddb0a9ab955bb9631 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 22 Sep 2023 11:04:11 +0700
Subject: [PATCH 074/368] feat: show module source code if available

---
 CHANGELOG.md                                  |   1 +
 src/config/chain/initia.ts                    |   2 +-
 src/lib/chain-registry/initiatestnet.ts       |   2 +-
 .../components/module/ModuleSourceCode.tsx    |  80 ++++++++
 src/lib/components/module/index.ts            |   1 +
 src/lib/pages/interaction/index.tsx           | 190 ++++++++++--------
 .../module-details/components/ModuleInfo.tsx  |   6 +-
 .../components/ModuleSourceCode.tsx           |  50 -----
 src/lib/services/module.ts                    |  20 +-
 src/lib/services/moduleService.ts             |   9 +-
 src/lib/types/abi.ts                          |   7 +-
 src/lib/types/addrs.ts                        |   2 +-
 src/lib/types/common.ts                       |   2 +
 src/lib/types/currency/common.ts              |   1 -
 src/lib/types/currency/index.ts               |   1 -
 src/lib/types/currency/token.ts               |   2 +-
 16 files changed, 221 insertions(+), 155 deletions(-)
 create mode 100644 src/lib/components/module/ModuleSourceCode.tsx
 delete mode 100644 src/lib/pages/module-details/components/ModuleSourceCode.tsx
 delete mode 100644 src/lib/types/currency/common.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f91cf19b..17298c680 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#544](https://github.com/alleslabs/celatone-frontend/pull/544) Show module source code if available
 - [#530](https://github.com/alleslabs/celatone-frontend/pull/530) Publish module component state wireup and add leaflet
 - [#521](https://github.com/alleslabs/celatone-frontend/pull/521) Initia module interaction function panel and selected function info accordion
 - [#515](https://github.com/alleslabs/celatone-frontend/pull/515) Initia select module drawer wireup
diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index ee866aeb6..bf8c85a11 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -3,7 +3,7 @@ import { wallets as keplrWallets } from "@cosmos-kit/keplr";
 import type { ChainConfigs } from "./types";
 
 export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
-  "stone-9": {
+  "stone-10": {
     chain: "initia",
     registryChainName: "initiatestnet",
     prettyName: "Initia Testnet",
diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index debbde25f..4c8208858 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -6,7 +6,7 @@ export const initiatestnet: Chain = {
   status: "live",
   network_type: "testnet",
   pretty_name: "Initia Testnet",
-  chain_id: "stone-9",
+  chain_id: "stone-10",
   bech32_prefix: "init",
   daemon_name: "initd",
   node_home: "$HOME/.init",
diff --git a/src/lib/components/module/ModuleSourceCode.tsx b/src/lib/components/module/ModuleSourceCode.tsx
new file mode 100644
index 000000000..718d1cf09
--- /dev/null
+++ b/src/lib/components/module/ModuleSourceCode.tsx
@@ -0,0 +1,80 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import dynamic from "next/dynamic";
+
+import { CopyButton } from "../copy";
+import { CURR_THEME } from "env";
+import type { Option } from "lib/types";
+
+const AceEditor = dynamic(() => import("react-ace"), {
+  ssr: false,
+});
+
+interface ModuleSourceCodeProps {
+  sourceCode: Option<string>;
+}
+export const ModuleSourceCode = ({ sourceCode }: ModuleSourceCodeProps) => {
+  if (!sourceCode) return null;
+  return (
+    <Accordion allowToggle w="full" defaultIndex={[0]}>
+      <AccordionItem>
+        <AccordionButton p={4}>
+          <Flex justifyContent="space-between" w="full">
+            <Flex flexDirection="column" alignItems="start">
+              <Text fontWeight={600} variant="body1" color="text.main">
+                Module Source Code
+              </Text>
+              <Text fontWeight={600} variant="body2" color="text.dark">
+                The source code is uploaded by the deployer and pulled from
+                Initia API
+              </Text>
+            </Flex>
+            <Flex alignItems="center" gap={2}>
+              <CopyButton
+                value={sourceCode}
+                variant="outline-primary"
+                w={{ base: "full", md: "auto" }}
+              />
+              <AccordionIcon color="gray.600" ml="auto" boxSize={6} />
+            </Flex>
+          </Flex>
+        </AccordionButton>
+        <AccordionPanel pt={0} pb={4}>
+          <Box
+            p="16px 12px"
+            border="1px solid"
+            borderColor="gray.700"
+            borderRadius="8px"
+          >
+            <AceEditor
+              readOnly
+              mode="rust"
+              theme={CURR_THEME.jsonTheme}
+              fontSize="14px"
+              style={{
+                color: CURR_THEME.colors.text.main,
+                width: "100%",
+                background: "transparent",
+              }}
+              value={sourceCode}
+              setOptions={{
+                showGutter: false,
+                useWorker: false,
+                printMargin: false,
+                wrap: true,
+              }}
+            />
+          </Box>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};
diff --git a/src/lib/components/module/index.ts b/src/lib/components/module/index.ts
index e4d9b173a..5b95371fb 100644
--- a/src/lib/components/module/index.ts
+++ b/src/lib/components/module/index.ts
@@ -1,3 +1,4 @@
 export * from "./CountBadge";
 export * from "./FunctionCard";
 export * from "./ModuleCard";
+export * from "./ModuleSourceCode";
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 48246a8e1..2738965c7 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -5,15 +5,17 @@ import {
   Flex,
   Heading,
   Text,
+  Box,
 } from "@chakra-ui/react";
 import { useCallback, useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
+import { ModuleSourceCode } from "lib/components/module";
 import PageContainer from "lib/components/PageContainer";
 import type { IndexedModule } from "lib/services/moduleService";
-import type { ExposedFunction } from "lib/types";
-import { parseJsonABI } from "lib/utils";
+import { useVerifyModule } from "lib/services/moduleService";
+import type { ExposedFunction, HexAddr, Option } from "lib/types";
 
 import {
   ModuleSelectDrawerTrigger,
@@ -28,8 +30,6 @@ export const Interaction = () => {
   const [module, setModule] = useState<IndexedModule>();
   const [selectedFn, setSelectedFn] = useState<ExposedFunction>();
 
-  const abi = module ? parseJsonABI(module.abi) : undefined;
-
   const handleModuleSelect = useCallback(
     (selectedModule: IndexedModule, fn?: ExposedFunction) => {
       setModule(selectedModule);
@@ -38,94 +38,110 @@ export const Interaction = () => {
     []
   );
 
+  const { data: verificationData } = useVerifyModule({
+    address: module?.address as Option<HexAddr>,
+    moduleName: module?.moduleName,
+  });
+
   return (
-    <PageContainer
-      overflow="hidden"
-      minH="unset"
-      maxH="calc(100vh - 129px)"
-      display="grid"
-      gridTemplateRows="auto auto 1fr"
-    >
-      <Heading as="h5" variant="h5">
-        Module Interactions
-      </Heading>
-      <Flex
-        alignItems="center"
-        justifyContent="space-between"
-        bgColor="gray.900"
-        p={4}
-        borderRadius={4}
-        my={8}
+    <>
+      <PageContainer
+        overflow="hidden"
+        minH="unset"
+        maxH="calc(100vh - 129px)"
+        display="grid"
+        gridTemplateRows="auto auto 1fr"
       >
-        {module ? (
-          <>
-            <Flex direction="column" gap={4}>
-              <LabelText label="Module Path" labelWeight={600}>
-                <Flex align="center" gap={1}>
-                  <Text variant="body1">{module.address.toString()}</Text>
-                  <CustomIcon
-                    name="chevron-right"
-                    color="gray.600"
-                    boxSize={3}
-                  />
-                  <Text variant="body1" fontWeight={700}>
-                    {module.moduleName}
+        <Heading as="h5" variant="h5">
+          Module Interactions
+        </Heading>
+        <Flex
+          alignItems="center"
+          justifyContent="space-between"
+          bgColor="gray.900"
+          p={4}
+          borderRadius={4}
+          my={8}
+        >
+          {module ? (
+            <>
+              <Flex direction="column" gap={4}>
+                <LabelText label="Module Path" labelWeight={600}>
+                  <Flex align="center" gap={1}>
+                    <Text variant="body1">{module.address.toString()}</Text>
+                    <CustomIcon
+                      name="chevron-right"
+                      color="gray.600"
+                      boxSize={3}
+                    />
+                    <Text variant="body1" fontWeight={700}>
+                      {module.moduleName}
+                    </Text>
+                  </Flex>
+                </LabelText>
+                <LabelText label="Friends" labelWeight={600}>
+                  <Text variant="body2" color="gray.400">
+                    {module?.parsedAbi.friends
+                      ? JSON.stringify(module?.parsedAbi.friends)
+                      : "N/A"}
                   </Text>
-                </Flex>
-              </LabelText>
-              <LabelText label="Friends" labelWeight={600}>
-                <Text variant="body2" color="gray.400">
-                  {abi?.friends ? JSON.stringify(abi.friends) : "N/A"}
-                </Text>
-              </LabelText>
-            </Flex>
-            <Flex direction="column" gap={2}>
+                </LabelText>
+              </Flex>
+              <Flex direction="column" gap={2}>
+                <ModuleSelectDrawerTrigger
+                  triggerVariant="change-module"
+                  buttonText="Change Module"
+                  onOpen={onOpen}
+                />
+                <Button
+                  variant="ghost-gray"
+                  rightIcon={
+                    <CustomIcon name="launch" boxSize={3} color="text.dark" />
+                  }
+                  // TODO: Link to module section in account page
+                  onClick={() => {}}
+                >
+                  View Module
+                </Button>
+              </Flex>
+            </>
+          ) : (
+            <>
+              <p>Select a module to interact with ...</p>
               <ModuleSelectDrawerTrigger
-                triggerVariant="change-module"
-                buttonText="Change Module"
+                triggerVariant="select-module"
                 onOpen={onOpen}
               />
-              <Button
-                variant="ghost-gray"
-                rightIcon={
-                  <CustomIcon name="launch" boxSize={3} color="text.dark" />
-                }
-                // TODO: Link to module section in account page
-                onClick={() => {}}
-              >
-                View Module
-              </Button>
-            </Flex>
-          </>
-        ) : (
-          <>
-            <p>Select a module to interact with ...</p>
-            <ModuleSelectDrawerTrigger
-              triggerVariant="select-module"
-              onOpen={onOpen}
-            />
-          </>
-        )}
-        <ModuleSelectDrawer
-          isOpen={isOpen}
-          onClose={onClose}
-          handleModuleSelect={handleModuleSelect}
-        />
-      </Flex>
-      <Grid gap={8} templateColumns="minmax(300px, 20%) 1fr" overflow="hidden">
-        {/* Left side */}
-        <FunctionSelectPanel
-          module={module}
-          selectedFn={selectedFn}
-          setSelectedFn={setSelectedFn}
-        />
-        {/* Right side */}
-        <FunctionSelectBody
-          module={module}
-          selectedFn={selectedFn}
-          openDrawer={onOpen}
-        />
-      </Grid>
-    </PageContainer>
+            </>
+          )}
+          <ModuleSelectDrawer
+            isOpen={isOpen}
+            onClose={onClose}
+            handleModuleSelect={handleModuleSelect}
+          />
+        </Flex>
+        <Grid
+          gap={8}
+          templateColumns="minmax(300px, 20%) 1fr"
+          overflow="hidden"
+        >
+          {/* Left side */}
+          <FunctionSelectPanel
+            module={module}
+            selectedFn={selectedFn}
+            setSelectedFn={setSelectedFn}
+          />
+          {/* Right side */}
+          <FunctionSelectBody
+            module={module}
+            selectedFn={selectedFn}
+            openDrawer={onOpen}
+          />
+        </Grid>
+      </PageContainer>
+      <Box px={{ base: "16px", md: "48px" }}>
+        <ModuleSourceCode sourceCode={verificationData?.source} />
+      </Box>
+    </>
   );
 };
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 9d93ef6d0..e2f257617 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -3,8 +3,7 @@ import { Flex, Heading, Text } from "@chakra-ui/react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
-
-import { ModuleSourceCode } from "./ModuleSourceCode";
+import { ModuleSourceCode } from "lib/components/module";
 
 interface ModuleInfoProps {
   isVerified?: boolean;
@@ -76,7 +75,8 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
           />
         </LabelText>
       </Flex>
-      <ModuleSourceCode />
+      {/* TODO: Wireup */}
+      <ModuleSourceCode sourceCode="" />
     </Flex>
   );
 };
diff --git a/src/lib/pages/module-details/components/ModuleSourceCode.tsx b/src/lib/pages/module-details/components/ModuleSourceCode.tsx
deleted file mode 100644
index a1b2dda15..000000000
--- a/src/lib/pages/module-details/components/ModuleSourceCode.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Button,
-  Flex,
-  Text,
-} from "@chakra-ui/react";
-
-import { CustomIcon } from "lib/components/icon";
-
-export const ModuleSourceCode = () => {
-  return (
-    <Flex>
-      <Accordion allowToggle w="full" defaultIndex={[0]}>
-        <AccordionItem>
-          <AccordionButton p={4}>
-            <Flex justifyContent="space-between" w="full">
-              <Flex flexDirection="column" alignItems="start">
-                <Text fontWeight={600} variant="body1" color="text.main">
-                  Module Source Code
-                </Text>
-                <Text fontWeight={600} variant="body2" color="text.dark">
-                  The source code is uploaded by the deployer and pulled from
-                  Initia API
-                </Text>
-              </Flex>
-              <Flex alignItems="center" gap={2}>
-                <Button
-                  variant="outline-primary"
-                  w={{ base: "full", md: "auto" }}
-                  leftIcon={<CustomIcon name="copy" />}
-                  size="sm"
-                >
-                  Copy
-                </Button>
-                <AccordionIcon color="gray.600" ml="auto" />
-              </Flex>
-            </Flex>
-          </AccordionButton>
-          <AccordionPanel>
-            <Text>TODO JSON INPUT HERE</Text>
-          </AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    </Flex>
-  );
-};
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 4cd02a336..19816c91c 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -6,6 +6,8 @@ import type {
   ResponseModules,
   InternalModule,
   HexAddr,
+  Option,
+  SnakeToCamelCaseNested,
 } from "lib/types";
 import { snakeToCamel } from "lib/utils";
 
@@ -56,14 +58,26 @@ interface ModuleVerificationReturn {
   chain_id: string;
 }
 
+// TODO: Figure out how to correctly infer NominalType intersection
+export interface ModuleVerificationInternal
+  extends Omit<
+    SnakeToCamelCaseNested<ModuleVerificationReturn>,
+    "moduleAddress"
+  > {
+  moduleAddress: HexAddr;
+}
+
 export const getModuleVerificationStatus = async (
   address: MoveAccountAddr,
   moduleName: string
-): Promise<boolean> =>
+): Promise<Option<ModuleVerificationInternal>> =>
   // TODO: move url to base api route? wait for celatone api implementation?
   axios
     .get<ModuleVerificationReturn>(
       `https://stone-compiler.initia.tech/contracts/${address}/${moduleName}`
     )
-    .then(() => true)
-    .catch(() => false);
+    .then(({ data }) => ({
+      ...snakeToCamel(data),
+      moduleAddress: data.module_address,
+    }))
+    .catch(() => undefined);
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 93629b9ef..fa7f8e6b7 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -85,12 +85,15 @@ export const useVerifyModule = ({
   address,
   moduleName,
 }: {
-  address: MoveAccountAddr;
-  moduleName: string;
+  address: Option<MoveAccountAddr>;
+  moduleName: Option<string>;
 }) =>
   useQuery(
     [CELATONE_QUERY_KEYS.MODULE_VERIFICATION, address, moduleName],
-    () => getModuleVerificationStatus(address, moduleName),
+    () => {
+      if (!address || !moduleName) return undefined;
+      return getModuleVerificationStatus(address, moduleName);
+    },
     {
       enabled: Boolean(address && moduleName),
       retry: 0,
diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
index a2dc9ca22..dee17c062 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/abi.ts
@@ -1,4 +1,3 @@
-import type { HexAddr } from "./addrs";
 import type { SnakeToCamelCaseNested } from "./converter";
 
 export enum UpgradePolicy {
@@ -27,8 +26,9 @@ interface ABIFunction {
 }
 
 /* response */
+// TODO: change address type to HexAddr after figuring out how to correctly infer NominalType intersection
 export interface ResponseModule {
-  address: HexAddr;
+  address: string;
   module_name: string;
   abi: string;
   raw_bytes: string;
@@ -45,8 +45,9 @@ export interface ModulePagination {
   total: string;
 }
 
+// TODO: change address type to HexAddr after figuring out how to correctly infer NominalType intersection
 export interface ResponseABI {
-  address: HexAddr;
+  address: string;
   name: string;
   friends: string[];
   exposed_functions: ExposedFunction[];
diff --git a/src/lib/types/addrs.ts b/src/lib/types/addrs.ts
index bd8b8d0fe..8119999bd 100644
--- a/src/lib/types/addrs.ts
+++ b/src/lib/types/addrs.ts
@@ -1,4 +1,4 @@
-import type { NominalType } from "./currency/common";
+import type { NominalType } from "./common";
 
 export type HumanAddr = string & NominalType<"HumanAddr">;
 export type HexAddr = string & NominalType<"HexAddr">;
diff --git a/src/lib/types/common.ts b/src/lib/types/common.ts
index 9a120421d..1a9b50659 100644
--- a/src/lib/types/common.ts
+++ b/src/lib/types/common.ts
@@ -1,3 +1,5 @@
 export type Dict<K extends string | number, T> = Partial<Record<K, T>>;
 
 export type Option<T> = T | undefined;
+
+export type NominalType<T extends string> = { __type: T };
diff --git a/src/lib/types/currency/common.ts b/src/lib/types/currency/common.ts
deleted file mode 100644
index fb4a0510b..000000000
--- a/src/lib/types/currency/common.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type NominalType<T extends string> = { __type: T };
diff --git a/src/lib/types/currency/index.ts b/src/lib/types/currency/index.ts
index 4e267ac75..0111c632e 100644
--- a/src/lib/types/currency/index.ts
+++ b/src/lib/types/currency/index.ts
@@ -1,3 +1,2 @@
-export * from "./common";
 export * from "./token";
 export * from "./balance";
diff --git a/src/lib/types/currency/token.ts b/src/lib/types/currency/token.ts
index 8c7649382..73c69e271 100644
--- a/src/lib/types/currency/token.ts
+++ b/src/lib/types/currency/token.ts
@@ -1,4 +1,4 @@
-import type { NominalType } from "./common";
+import type { NominalType } from "../common";
 
 export type U<T = string> = T & { __micro: true };
 

From 56bf30a48cea52e845594f706e571892cfa20ad7 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 22 Sep 2023 11:51:10 +0700
Subject: [PATCH 075/368] fix: return null instead of undefined

---
 src/lib/services/module.ts        | 5 ++---
 src/lib/services/moduleService.ts | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 19816c91c..2f47df76a 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -6,7 +6,6 @@ import type {
   ResponseModules,
   InternalModule,
   HexAddr,
-  Option,
   SnakeToCamelCaseNested,
 } from "lib/types";
 import { snakeToCamel } from "lib/utils";
@@ -70,7 +69,7 @@ export interface ModuleVerificationInternal
 export const getModuleVerificationStatus = async (
   address: MoveAccountAddr,
   moduleName: string
-): Promise<Option<ModuleVerificationInternal>> =>
+): Promise<ModuleVerificationInternal | null> =>
   // TODO: move url to base api route? wait for celatone api implementation?
   axios
     .get<ModuleVerificationReturn>(
@@ -80,4 +79,4 @@ export const getModuleVerificationStatus = async (
       ...snakeToCamel(data),
       moduleAddress: data.module_address,
     }))
-    .catch(() => undefined);
+    .catch(() => null);
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index fa7f8e6b7..0e8a20ef5 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -91,7 +91,7 @@ export const useVerifyModule = ({
   useQuery(
     [CELATONE_QUERY_KEYS.MODULE_VERIFICATION, address, moduleName],
     () => {
-      if (!address || !moduleName) return undefined;
+      if (!address || !moduleName) return null;
       return getModuleVerificationStatus(address, moduleName);
     },
     {

From 5f959763e133105f745209add2a7ffe1b865d57c Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 22 Sep 2023 12:55:20 +0700
Subject: [PATCH 076/368] fix(components): module function

---
 src/lib/components/LabelText.tsx              |  10 +-
 .../components/module/FunctionDetailCard.tsx  | 225 ++++++++++++++++++
 .../components/ModuleFunction.tsx             |  95 ++++++--
 src/lib/pages/module-details/index.tsx        |  18 +-
 4 files changed, 313 insertions(+), 35 deletions(-)
 create mode 100644 src/lib/components/module/FunctionDetailCard.tsx

diff --git a/src/lib/components/LabelText.tsx b/src/lib/components/LabelText.tsx
index efd7c9ab5..98b5e05d9 100644
--- a/src/lib/components/LabelText.tsx
+++ b/src/lib/components/LabelText.tsx
@@ -6,6 +6,7 @@ import { TooltipInfo } from "./Tooltip";
 interface LabelTextProps extends FlexProps {
   label: string;
   labelWeight?: number;
+  isSmall?: boolean;
   tooltipText?: string;
   children: string | JSX.Element;
   helperText1?: string;
@@ -15,6 +16,7 @@ interface LabelTextProps extends FlexProps {
 export const LabelText = ({
   label,
   labelWeight = 500,
+  isSmall = false,
   tooltipText,
   children,
   helperText1,
@@ -23,13 +25,17 @@ export const LabelText = ({
 }: LabelTextProps) => (
   <Flex direction="column" gap={1} {...flexProps}>
     <Flex align="center" gap={1}>
-      <Text variant="body2" color="text.dark" fontWeight={labelWeight}>
+      <Text
+        variant={isSmall ? "body3" : "body2"}
+        color="text.dark"
+        fontWeight={labelWeight}
+      >
         {label}
       </Text>
       {tooltipText && <TooltipInfo label={tooltipText} />}
     </Flex>
     {typeof children === "string" ? (
-      <Text variant="body2" overflowWrap="anywhere">
+      <Text variant={isSmall ? "body3" : "body2"} overflowWrap="anywhere">
         {children}
       </Text>
     ) : (
diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
new file mode 100644
index 000000000..99ee51a79
--- /dev/null
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -0,0 +1,225 @@
+import {
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  Button,
+  Flex,
+  IconButton,
+  Text,
+  chakra,
+} from "@chakra-ui/react";
+
+import { DotSeparator } from "../DotSeparator";
+import { CustomIcon } from "../icon";
+import { LabelText } from "../LabelText";
+import { Tooltip } from "../Tooltip";
+import { AmpTrackExpand } from "lib/services/amplitude";
+import type { ExposedFunction } from "lib/types";
+import { checkAvailability, getVisibilityIcon } from "lib/utils";
+
+interface FunctionDetailCardProps {
+  // isSelected?: boolean;
+  exposedFn: ExposedFunction;
+}
+
+const StyledIconButton = chakra(IconButton, {
+  baseStyle: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: "24px",
+    color: "gray.600",
+  },
+});
+
+export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
+  const { is_view: isView, visibility, name } = exposedFn;
+  const disabled = !checkAvailability(exposedFn);
+
+  const getColor = () => {
+    switch (isView) {
+      case false:
+        return "accent.main";
+      case true:
+      default:
+        return "primary.main";
+    }
+  };
+
+  return (
+    <AccordionItem
+      bg="gray.800"
+      _hover={{ bg: "gray.700" }}
+      borderRadius={8}
+      p={4}
+      transition="all .25s ease-in-out"
+      flexDirection="column"
+      gap={1}
+    >
+      {({ isExpanded }) => (
+        <>
+          <AccordionButton
+            flexDirection="column"
+            alignItems="flex-start"
+            onClick={() =>
+              AmpTrackExpand({
+                action: !isExpanded ? "expand" : "collapse",
+                component: "unsupported_pool",
+                section: "pool-list-page",
+              })
+            }
+          >
+            <Flex justifyContent="space-between" w="full">
+              <Flex direction="column" gap={1}>
+                <Flex gap={1} alignItems="center">
+                  <CustomIcon
+                    name={isView ? "query" : "execute"}
+                    color={getColor()}
+                    boxSize={3}
+                  />
+                  <Text variant="body3" color={getColor()}>
+                    {isView ? "View" : "Execute"}
+                  </Text>
+                </Flex>
+                <Text
+                  variant="body2"
+                  color={disabled ? "text.disabled" : "text.main"}
+                >
+                  {name}
+                </Text>
+              </Flex>
+              <Flex alignItems="center" gap={4}>
+                <Flex alignItems="center" gap={2}>
+                  <Tooltip
+                    bg="primary.dark"
+                    label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+                  >
+                    <Flex
+                      pointerEvents="auto"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Flex gap={1} alignItems="center">
+                        {disabled ? (
+                          <CustomIcon
+                            name="close"
+                            color="gray.600"
+                            boxSize={3}
+                          />
+                        ) : (
+                          <CustomIcon
+                            name="check"
+                            color="success.main"
+                            boxSize={3}
+                          />
+                        )}
+                        <Text variant="body3" color="text.dark">
+                          is_entry
+                        </Text>
+                      </Flex>
+                    </Flex>
+                  </Tooltip>
+                  <DotSeparator bg="gray.600" />
+                  <Flex alignItems="center" gap={1}>
+                    <CustomIcon
+                      name={getVisibilityIcon(visibility)}
+                      color="gray.600"
+                      boxSize={3}
+                    />
+                    <Text
+                      variant="body3"
+                      color="text.dark"
+                      textTransform="capitalize"
+                    >
+                      {visibility}
+                    </Text>
+                  </Flex>
+                </Flex>
+                <Button
+                  variant={isView ? "outline-primary" : "outline-accent"}
+                  borderColor={isView ? "primary.dark" : "accent.dark"}
+                  size="sm"
+                  leftIcon={
+                    <CustomIcon
+                      mx={0}
+                      name={isView ? "query" : "execute"}
+                      color={getColor()}
+                      boxSize={3}
+                    />
+                  }
+                >
+                  <Text color={getColor()} mt="2px">
+                    {isView ? "View" : "Execute"}
+                  </Text>
+                </Button>
+                <StyledIconButton
+                  variant="none"
+                  aria-label="external"
+                  _hover={{ backgroundColor: "gray.700" }}
+                  icon={
+                    <CustomIcon
+                      name="chevron-down"
+                      transform={isExpanded ? "rotate(180deg)" : "rotate(0)"}
+                      transition="all .25s ease-in-out"
+                    />
+                  }
+                />
+              </Flex>
+            </Flex>
+          </AccordionButton>
+          <AccordionPanel bg="gray.900" borderRadius={8} mt={4} py={3} px={4}>
+            <Flex gap={3} direction="column">
+              <Flex gap={8}>
+                <LabelText isSmall label="Visibility" labelWeight={700}>
+                  <Flex
+                    align="center"
+                    gap={1}
+                    color="text.dark"
+                    lineHeight={0}
+                    textTransform="capitalize"
+                  >
+                    <CustomIcon
+                      name={getVisibilityIcon(exposedFn.visibility)}
+                      boxSize={3}
+                      ml={0}
+                      color="gray.600"
+                    />
+                    <Text variant="body3">{exposedFn.visibility}</Text>
+                  </Flex>
+                </LabelText>
+                <LabelText isSmall label="is_entry" labelWeight={700}>
+                  <Flex align="center" gap={1} color="text.dark" lineHeight={0}>
+                    <CustomIcon
+                      boxSize={3}
+                      ml={0}
+                      color={exposedFn.is_entry ? "success.main" : "gray.600"}
+                      name={exposedFn.is_entry ? "check" : "close"}
+                    />
+                    <Text variant="body3">{String(exposedFn.is_entry)}</Text>
+                  </Flex>
+                </LabelText>
+                <LabelText isSmall label="is_view" labelWeight={700}>
+                  <Flex align="center" gap={1} color="text.dark" lineHeight={0}>
+                    <CustomIcon
+                      boxSize={3}
+                      ml={0}
+                      color={exposedFn.is_view ? "success.main" : "gray.600"}
+                      name={exposedFn.is_view ? "check" : "close"}
+                    />
+                    <Text variant="body3">{String(exposedFn.is_view)}</Text>
+                  </Flex>
+                </LabelText>
+              </Flex>
+              <LabelText isSmall label="generic_type_params" labelWeight={700}>
+                <Text variant="body3">
+                  {JSON.stringify(exposedFn.generic_type_params)}
+                </Text>
+              </LabelText>
+              <LabelText isSmall label="params" labelWeight={700}>
+                <Text variant="body3">{JSON.stringify(exposedFn.params)}</Text>
+              </LabelText>
+            </Flex>
+          </AccordionPanel>
+        </>
+      )}
+    </AccordionItem>
+  );
+};
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index 3efcb8219..ef57c93d1 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -1,11 +1,11 @@
-import { Flex, Heading, Button } from "@chakra-ui/react";
+import { Flex, Heading, Button, Accordion } from "@chakra-ui/react";
 import { useState } from "react";
 
-// import { FunctionCard } from "lib/components/module";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
+import { FunctionDetailCard } from "lib/components/module/FunctionDetailCard";
+import { AmpTrackExpandAll } from "lib/services/amplitude";
 import type { IndexedModule } from "lib/services/moduleService";
-import { openNewTab } from "lib/utils";
 
 import { FunctionTypeSwitch, FunctionTypeTabs } from "./FunctionTypeSwitch";
 
@@ -15,50 +15,97 @@ interface ModuleFunctionProps {
 
 export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
   const [tab, setTab] = useState(FunctionTypeTabs.ALL);
+  const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+  const updateExpandedIndexes = (indexes: number[]) =>
+    setExpandedIndexes(indexes);
 
   if (!moduleData) return <Loading />;
 
-  const openFunctionJSON = () =>
-    openNewTab(`${moduleData.parsedAbi.exposed_functions}`);
-
   return (
     <Flex direction="column" gap={8}>
       <Heading as="h6" variant="h6" fontWeight={600}>
         Exposed Function
       </Heading>
       <Flex>search input ja</Flex>
-      <Flex justifyContent="space-between">
-        <Flex>
-          <FunctionTypeSwitch
-            currentTab={tab}
-            onTabChange={setTab}
-            my={3}
-            counts={[
-              moduleData.parsedAbi.exposed_functions.length,
-              moduleData.viewFunctions.length,
-              moduleData.executeFunctions.length,
-            ]}
-          />
-        </Flex>
-        <Flex gap={4}>
+      <Flex justifyContent="space-between" alignItems="center">
+        <FunctionTypeSwitch
+          currentTab={tab}
+          onTabChange={setTab}
+          my={3}
+          counts={[
+            moduleData.parsedAbi.exposed_functions.length,
+            moduleData.viewFunctions.length,
+            moduleData.executeFunctions.length,
+          ]}
+        />
+        <Flex gap={4} alignItems="center">
           <Button
             variant="outline-primary"
             size="sm"
-            rightIcon={<CustomIcon name="chevron-down" />}
+            rightIcon={
+              <CustomIcon
+                name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+                boxSize={3}
+              />
+            }
+            onClick={() => {
+              AmpTrackExpandAll(expandedIndexes.length ? "collapse" : "expand");
+              setExpandedIndexes((prev) =>
+                !prev.length
+                  ? Array.from(
+                      Array(
+                        moduleData.parsedAbi.exposed_functions.length
+                      ).keys()
+                    )
+                  : []
+              );
+            }}
           >
-            Collapse
+            {expandedIndexes.length ? "Collapse All" : "Expand All"}
           </Button>
           <Button
             variant="outline-primary"
             size="sm"
             rightIcon={<CustomIcon name="launch" />}
-            onClick={openFunctionJSON}
+            onClick={() => {
+              const jsonString = JSON.stringify(
+                moduleData.parsedAbi.exposed_functions,
+                null,
+                2
+              );
+              const jsonWindow = window.open();
+              if (jsonWindow) {
+                // Modify styling later
+                jsonWindow.document.write(
+                  `<html><head><title>Module Exposed Function</title>`
+                );
+
+                // Add styling
+                jsonWindow.document.write(
+                  "<style>body { background-color: #f0f0f0; color: #333; }</style>"
+                );
+
+                jsonWindow.document.write(
+                  `</head><body><pre>${jsonString}</pre></body></html>`
+                );
+              }
+            }}
           >
             View in JSON
           </Button>
         </Flex>
       </Flex>
-      {/* <FunctionCard /> */}
+      <Accordion
+        allowMultiple
+        index={expandedIndexes}
+        onChange={updateExpandedIndexes}
+      >
+        <Flex direction="column" gap={4}>
+          {moduleData.parsedAbi.exposed_functions.map((fn) => (
+            <FunctionDetailCard exposedFn={fn} key={fn.name} />
+          ))}
+        </Flex>
+      </Accordion>
     </Flex>
   );
 };
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 588f09583..0a5140a37 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -99,9 +99,9 @@ export const ModuleDetails = () => {
 
   if (isLoading && !data) return <Loading />;
   const moduleData = data as IndexedModule;
-  // moduleData.parsedAbi.exposed_functions
-  // moduleData.viewFunctions
-  // moduleData.executeFunctions
+  // moduleData?.parsedAbi.exposed_functions
+  // moduleData?.viewFunctions
+  // moduleData?.executeFunctions
   return (
     <PageContainer>
       <ModuleTop isVerified moduleData={moduleData} />
@@ -121,9 +121,9 @@ export const ModuleDetails = () => {
             Overview
           </CustomTab>
           <CustomTab
-            count={moduleData.parsedAbi.exposed_functions.length}
+            count={moduleData?.parsedAbi.exposed_functions.length}
             onClick={handleTabChange(TabIndex.Function)}
-            isDisabled={!moduleData.parsedAbi.exposed_functions.length}
+            isDisabled={!moduleData?.parsedAbi.exposed_functions.length}
           >
             Function
           </CustomTab>
@@ -131,9 +131,9 @@ export const ModuleDetails = () => {
             Transactions
           </CustomTab>
           <CustomTab
-            count={moduleData.parsedAbi.structs.length}
+            count={moduleData?.parsedAbi.structs.length}
             onClick={handleTabChange(TabIndex.Structs)}
-            isDisabled={!moduleData.parsedAbi.structs.length}
+            isDisabled={!moduleData?.parsedAbi.structs.length}
           >
             Structs
           </CustomTab>
@@ -142,8 +142,8 @@ export const ModuleDetails = () => {
           <TabPanel p={0}>
             <Flex gap={6} flexDirection="column">
               <QuickAccess
-                viewFnCount={moduleData.viewFunctions.length}
-                executeFnCount={moduleData.executeFunctions.length}
+                viewFnCount={moduleData?.viewFunctions.length}
+                executeFnCount={moduleData?.executeFunctions.length}
               />
               <ModuleInfo isVerified moduleData={moduleData} />
               {/* TODO History */}

From ad4e0358ae84031483176fc466979f00bf4103ef Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 22 Sep 2023 13:58:16 +0700
Subject: [PATCH 077/368] fix: add immutable republish case

---
 src/config/chain/initia.ts              | 2 +-
 src/lib/chain-registry/initiatestnet.ts | 2 +-
 src/lib/pages/publish-module/utils.ts   | 9 ++++++++-
 src/lib/utils/address.ts                | 4 ++--
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index ee866aeb6..bf8c85a11 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -3,7 +3,7 @@ import { wallets as keplrWallets } from "@cosmos-kit/keplr";
 import type { ChainConfigs } from "./types";
 
 export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
-  "stone-9": {
+  "stone-10": {
     chain: "initia",
     registryChainName: "initiatestnet",
     prettyName: "Initia Testnet",
diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index debbde25f..4c8208858 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -6,7 +6,7 @@ export const initiatestnet: Chain = {
   status: "live",
   network_type: "testnet",
   pretty_name: "Initia Testnet",
-  chain_id: "stone-9",
+  chain_id: "stone-10",
   bech32_prefix: "init",
   daemon_name: "initd",
   node_home: "$HOME/.init",
diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
index d28abfc12..6fcb5d353 100644
--- a/src/lib/pages/publish-module/utils.ts
+++ b/src/lib/pages/publish-module/utils.ts
@@ -62,10 +62,17 @@ export const statusResolver = ({
           text: `“${abi.name}” is published with “${currentPolicy}” policy, which cannot be republished to “${policy}”`,
         };
   }
-  if (priorUpload)
+  if (priorUpload) {
+    if (policy === UpgradePolicy.IMMUTABLE)
+      return {
+        status: "error",
+        text: `“${abi.name}” is published with “Immutable” policy, which cannot be republished.`,
+      };
     return {
       status: "info",
       text: `The file will be uploaded to republish module “${abi.name}” in your address.`,
     };
+  }
+
   return { status: "init", text: "" };
 };
diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index 7c08464bc..2f977ad80 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -29,7 +29,7 @@ export const hexToBech32Address = (
   return toBech32(prefix, fromHex(strip)) as HumanAddr;
 };
 
-export const unpadHexAddress = (hexAddr: HexAddr) => {
+export const unpadHexAddress = (hexAddr: HexAddr): HexAddr => {
   const hex = hexAddr.startsWith("0x") ? hexAddr.slice(2) : hexAddr;
-  return "0x".concat(hex.replace(/^0+/, ""));
+  return "0x".concat(hex.replace(/^0+/, "")) as HexAddr;
 };

From 7095e802acea3e19d2eb0d1a820e9f6877f9b22a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 22 Sep 2023 14:41:06 +0700
Subject: [PATCH 078/368] fix: amp move execute

---
 src/lib/app-fns/tx/move/executeModule.tsx     |  6 +++---
 src/lib/app-provider/tx/move/executeModule.ts | 13 +++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/lib/app-fns/tx/move/executeModule.tsx b/src/lib/app-fns/tx/move/executeModule.tsx
index a9f2c5e43..c3888a1db 100644
--- a/src/lib/app-fns/tx/move/executeModule.tsx
+++ b/src/lib/app-fns/tx/move/executeModule.tsx
@@ -4,12 +4,11 @@ import type { DeliverTxResponse, StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import { catchTxError } from "../common/catchTxError";
 import { postTx } from "../common/post";
 import { sendingTx } from "../common/sending";
+import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { TxStreamPhase } from "lib/types";
 import type { HumanAddr, TxResultRendering } from "lib/types";
 import { formatUFee } from "lib/utils/formatter/denom";
@@ -19,6 +18,7 @@ interface ExecuteModuleTxParams {
   messages: EncodeObject[];
   fee: StdFee;
   client: SigningCosmWasmClient;
+  catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
 }
@@ -28,6 +28,7 @@ export const executeModuleTx = ({
   messages,
   fee,
   client,
+  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: ExecuteModuleTxParams): Observable<TxResultRendering> => {
@@ -37,7 +38,6 @@ export const executeModuleTx = ({
       postFn: () => client.signAndBroadcast(address, messages, fee),
     }),
     ({ value: txInfo }) => {
-      AmpTrack(AmpEvent.TX_SUCCEED);
       onTxSucceed?.();
       const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]
         .value;
diff --git a/src/lib/app-provider/tx/move/executeModule.ts b/src/lib/app-provider/tx/move/executeModule.ts
index f1b7828fb..6ab05881c 100644
--- a/src/lib/app-provider/tx/move/executeModule.ts
+++ b/src/lib/app-provider/tx/move/executeModule.ts
@@ -2,6 +2,8 @@ import type { StdFee } from "@cosmjs/stargate";
 import { MsgExecute as MsgExecuteModule } from "@initia/initia.js";
 import { useCallback } from "react";
 
+import { useCatchTxError } from "../catchTxError";
+import { useTrack } from "lib/amplitude";
 import { executeModuleTx } from "lib/app-fns/tx/move/executeModule";
 import { useCurrentChain } from "lib/app-provider/hooks";
 import type { HexAddr, HumanAddr } from "lib/types";
@@ -20,6 +22,9 @@ export interface ExecuteModuleStreamParams {
 
 export const useExecuteModuleTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
+  const { trackTxSucceed } = useTrack();
+  const catchTxError = useCatchTxError();
+
   return useCallback(
     async ({
       moduleAddress,
@@ -52,10 +57,14 @@ export const useExecuteModuleTx = () => {
         messages,
         fee: estimatedFee,
         client,
-        onTxSucceed,
+        catchTxError,
+        onTxSucceed: () => {
+          trackTxSucceed();
+          onTxSucceed?.();
+        },
         onTxFailed,
       });
     },
-    [address, getSigningCosmWasmClient]
+    [address, catchTxError, getSigningCosmWasmClient, trackTxSucceed]
   );
 };

From 17d637075b6da55b40a791e615a976ce895fb64c Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 22 Sep 2023 16:37:18 +0700
Subject: [PATCH 079/368] fix: minor detail and state reset

---
 src/lib/pages/publish-module/completed.tsx | 5 +++--
 src/lib/pages/publish-module/publish.tsx   | 6 ++++--
 src/lib/pages/publish-module/utils.ts      | 9 ++++++++-
 src/lib/utils/tx/composeMsg.ts             | 9 ++++++---
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/lib/pages/publish-module/completed.tsx b/src/lib/pages/publish-module/completed.tsx
index 739d4d2ce..25abab185 100644
--- a/src/lib/pages/publish-module/completed.tsx
+++ b/src/lib/pages/publish-module/completed.tsx
@@ -1,5 +1,6 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
 import { capitalize } from "lodash";
+import plur from "plur";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
@@ -19,7 +20,7 @@ export const PublishCompleted = ({
     <WasmPageContainer>
       <CustomIcon boxSize={8} color="success.main" name="check-circle-solid" />
       <Heading as="h4" variant="h4" mt={4} mb={2}>
-        {`<${modules.length}>`} Modules published!
+        {modules.length} {plur("module", modules.length)} published!
       </Heading>
       <Text variant="body2" color="text.dark">
         Your .mv files are uploaded and published as modules.
@@ -44,7 +45,7 @@ export const PublishCompleted = ({
       />
       <Flex direction="column" gap={6} w="full">
         <Heading as="h6" variant="h6">
-          Published {`<${modules.length}>`} modules
+          Published {modules.length} {plur("module", modules.length)}
         </Heading>
         {modules.map((module) => (
           <ModulePublishCard key={module.id} module={module} />
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 7a3f79945..4299709cb 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -99,8 +99,10 @@ export const PublishModule = ({
       upgradePolicy
     ),
     onSuccess: (gasRes) => {
-      if (gasRes) setEstimatedFee(fabricateFee(gasRes));
-      else setEstimatedFee(undefined);
+      if (gasRes) {
+        setEstimatedFee(fabricateFee(gasRes));
+        setSimulateError("");
+      } else setEstimatedFee(undefined);
     },
     onError: (e) => {
       setSimulateError(e.message);
diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
index d28abfc12..11b199f2e 100644
--- a/src/lib/pages/publish-module/utils.ts
+++ b/src/lib/pages/publish-module/utils.ts
@@ -62,10 +62,17 @@ export const statusResolver = ({
           text: `“${abi.name}” is published with “${currentPolicy}” policy, which cannot be republished to “${policy}”`,
         };
   }
-  if (priorUpload)
+  if (priorUpload) {
+    if (policy === UpgradePolicy.IMMUTABLE) {
+      return {
+        status: "error",
+        text: `“${abi.name}” is published with “Immutable” policy, which cannot be republished.`,
+      };
+    }
     return {
       status: "info",
       text: `The file will be uploaded to republish module “${abi.name}” in your address.`,
     };
+  }
   return { status: "init", text: "" };
 };
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index 69e37b32f..eb5b89c18 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -14,9 +14,8 @@ import type {
   Token,
   HumanAddr,
   Option,
-  UpgradePolicy,
 } from "lib/types";
-import { MsgType } from "lib/types";
+import { UpgradePolicy, MsgType } from "lib/types";
 
 export const composeMsg = (msgType: MsgType, msg: TxMessage): ComposedMsg => {
   const typeUrl = typeUrlDict[msgType];
@@ -165,5 +164,9 @@ export const composePublishMsg = (
   upgradePolicy: UpgradePolicy
 ) =>
   toEncodeObject([
-    new MsgPublish(address as HumanAddr, codeBytesArr, upgradePolicy),
+    new MsgPublish(
+      address as HumanAddr,
+      codeBytesArr,
+      Object.keys(UpgradePolicy).findIndex((policy) => policy === upgradePolicy)
+    ),
   ]);

From 373eea523db95af2cfb017991f5b55370093ba9e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 22 Sep 2023 17:13:46 +0700
Subject: [PATCH 080/368] fix: comment

---
 src/lib/components/abi/args-form/field/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index 7635371de..0f2ef1ad2 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -68,7 +68,7 @@ export const ArgFieldTemplate = ({
             ? "fixed-floating"
             : "floating"
         }
-        size="md"
+        size={size}
         isInvalid={isError}
         isReadOnly={isReadOnly}
         isDisabled={(isSigner && !isReadOnly) || isNull}

From 7be53cf705f3ab5a7554c3873aee8e547ed767f5 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 22 Sep 2023 17:19:22 +0700
Subject: [PATCH 081/368] refactor: file drop fn and api route

---
 src/config/chain/initia.ts                    |  1 +
 src/config/chain/types.ts                     |  2 +-
 src/lib/components/dropzone/index.tsx         |  8 +++-
 .../components/json-schema/UploadTemplate.tsx |  1 +
 .../components/UploadModuleCard.tsx           | 40 +++++++++----------
 src/lib/pages/publish-module/formConstants.ts |  6 +--
 src/lib/pages/publish-module/index.tsx        | 37 ++++++++++-------
 src/lib/pages/publish-module/utils.ts         |  7 ++++
 src/lib/services/module.ts                    | 10 ++---
 src/lib/services/moduleService.ts             | 21 +++++++---
 src/lib/utils/address.ts                      |  6 +--
 11 files changed, 83 insertions(+), 56 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index 2831aa669..acd3216d6 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -22,6 +22,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
       move: {
         enabled: true,
         moduleMaxFileSize: 1_048_576,
+        decodeApi: "https://initia-api-jiod42ec2q-as.a.run.app/decode_module",
       },
       pool: {
         enabled: false,
diff --git a/src/config/chain/types.ts b/src/config/chain/types.ts
index b09060891..c83e2203f 100644
--- a/src/config/chain/types.ts
+++ b/src/config/chain/types.ts
@@ -18,7 +18,7 @@ type WasmConfig =
     };
 
 type MoveConfig =
-  | { enabled: true; moduleMaxFileSize: number }
+  | { enabled: true; moduleMaxFileSize: number; decodeApi: string }
   | { enabled: false };
 
 type PoolConfig =
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index c5214ea7f..1c0fdde38 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -1,5 +1,6 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
+import big from "big.js";
 import { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 
@@ -84,8 +85,11 @@ export function DropZone({
           </Text>
         </Flex>
         <Text variant="body2" color="text.dark">
-          {config.text.rawFileType}{" "}
-          {fileType === "wasm" && `(max. ${maxSize / 1000}KB)`}
+          {config.text.rawFileType} (max.{" "}
+          {fileType === "wasm"
+            ? `${maxSize / 1000}KB`
+            : `${big(maxSize).div(1_000_000).toPrecision(3)}MB`}
+          )
         </Text>
       </Flex>
       {fileRejections.length > 0 && (
diff --git a/src/lib/components/json-schema/UploadTemplate.tsx b/src/lib/components/json-schema/UploadTemplate.tsx
index 4c027d00d..c0f8aff62 100644
--- a/src/lib/components/json-schema/UploadTemplate.tsx
+++ b/src/lib/components/json-schema/UploadTemplate.tsx
@@ -104,6 +104,7 @@ const MethodRender = ({
               schemaString: "",
             });
           }}
+          // TODO: change to discriminated union pattern later
           status={error ? "error" : undefined}
           statusText={error}
         />
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index a677a08d4..68614927a 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -1,6 +1,5 @@
 import { Flex, Heading, IconButton, Spinner, Text } from "@chakra-ui/react";
-import type { ReactNode } from "react";
-import { useState } from "react";
+import { type PropsWithChildren, useCallback, useState } from "react";
 
 import type {
   FileArrayFields,
@@ -12,8 +11,10 @@ import { useCurrentChain } from "lib/app-provider";
 import { DropZone } from "lib/components/dropzone";
 import { CustomIcon } from "lib/components/icon";
 import { UploadCard } from "lib/components/upload/UploadCard";
-import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
-import { useDecodeModule } from "lib/services/moduleService";
+import {
+  type DecodeModuleQueryResponse,
+  useDecodeModule,
+} from "lib/services/moduleService";
 import type { HumanAddr, UpgradePolicy, Option } from "lib/types";
 
 interface UploadModuleCardProps {
@@ -34,10 +35,7 @@ interface UploadModuleCardProps {
 const ComponentLoader = ({
   isLoading,
   children,
-}: {
-  isLoading: boolean;
-  children: ReactNode;
-}) => {
+}: PropsWithChildren<{ isLoading: boolean }>) => {
   if (isLoading) return <Spinner size="lg" mx="auto" />;
   return <>{children}</>;
 };
@@ -65,7 +63,7 @@ export const UploadModuleCard = ({
   const { address } = useCurrentChain();
 
   const { isFetching } = useDecodeModule({
-    moduleEncode: tempFile.base64,
+    base64EncodedFile: tempFile.base64,
     address: address as HumanAddr,
     options: {
       enabled: Boolean(tempFile.base64),
@@ -81,6 +79,18 @@ export const UploadModuleCard = ({
     },
   });
 
+  const handleFileDrop = useCallback(async (target: File) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const dataUrl = reader.result as string;
+      // strip "data:application/octet-stream;base64,oRzrCw..."
+      const base64String = dataUrl.replace(/^data:.*;base64,/, "");
+      setTempFile({ file: target, base64: base64String });
+    };
+    reader.readAsDataURL(target);
+  }, []);
+
   return (
     <Flex
       bg="gray.900"
@@ -117,17 +127,7 @@ export const UploadModuleCard = ({
             />
           ) : (
             <DropZone
-              setFile={async (target) => {
-                const reader = new FileReader();
-
-                reader.onload = () => {
-                  const dataUrl = reader.result as string;
-                  // strip "data:application/octet-stream;base64,oRzrCw..."
-                  const base64String = dataUrl.replace(/^data:.*;base64,/, "");
-                  setTempFile({ file: target, base64: base64String });
-                };
-                reader.readAsDataURL(target);
-              }}
+              setFile={handleFileDrop}
               fileType="move"
               bgColor="background.main"
               _hover={undefined}
diff --git a/src/lib/pages/publish-module/formConstants.ts b/src/lib/pages/publish-module/formConstants.ts
index 27c3c9520..6b5abd3f1 100644
--- a/src/lib/pages/publish-module/formConstants.ts
+++ b/src/lib/pages/publish-module/formConstants.ts
@@ -13,7 +13,7 @@ export interface PublishStatus {
 
 interface Module {
   file: Option<File>;
-  base64File: string;
+  base64EncodedFile: string;
   decodeRes: Option<DecodeModuleQueryResponse>;
   publishStatus: PublishStatus;
 }
@@ -32,13 +32,13 @@ export const publishStatusDefault: { status: Status; text: string } = {
 };
 
 export const emptyModule: Module = {
-  base64File: "",
+  base64EncodedFile: "",
   decodeRes: undefined,
   publishStatus: publishStatusDefault,
   file: undefined,
 };
 
-export const policies = [
+export const POLICIES = [
   {
     value: UpgradePolicy.ARBITRARY,
     description: "You can publish these modules again without any restrictions",
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 58281d828..84aeea25d 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -1,4 +1,5 @@
 import { Text, Grid, Heading, Flex, Button, Box } from "@chakra-ui/react";
+import { useCallback } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 
 import { useCelatoneApp, useMoveConfig } from "lib/app-provider";
@@ -17,7 +18,7 @@ import {
   UploadModuleCard,
 } from "./components";
 import type { PublishModuleState, PublishStatus } from "./formConstants";
-import { emptyModule, policies, defaultValues } from "./formConstants";
+import { emptyModule, POLICIES, defaultValues } from "./formConstants";
 import { statusResolver } from "./utils";
 
 export const PublishModule = () => {
@@ -45,6 +46,24 @@ export const PublishModule = () => {
     name: "modules",
   });
 
+  const setFileValue = useCallback(
+    (index: number) =>
+      (
+        file: Option<File>,
+        base64EncodedFile: string,
+        decodeRes: DecodeModuleQueryResponse,
+        publishStatus: PublishStatus
+      ) => {
+        update(index, {
+          file,
+          base64EncodedFile,
+          decodeRes,
+          publishStatus,
+        });
+      },
+    [update]
+  );
+
   return (
     <>
       <PageContainer display="unset" p={0}>
@@ -79,19 +98,7 @@ export const PublishModule = () => {
                   fields={fields}
                   fileState={field}
                   policy={upgradePolicy}
-                  setFile={(
-                    file: Option<File>,
-                    base64File: string,
-                    decodeRes: DecodeModuleQueryResponse,
-                    publishStatus: PublishStatus
-                  ) => {
-                    update(idx, {
-                      file,
-                      base64File,
-                      decodeRes,
-                      publishStatus,
-                    });
-                  }}
+                  setFile={setFileValue(idx)}
                   removeFile={() => {
                     update(idx, emptyModule);
                   }}
@@ -117,7 +124,7 @@ export const PublishModule = () => {
               Specify how publishing modules will be able to republish.
             </Text>
             <Flex direction="column" gap={2} my={4}>
-              {policies.map((item) => (
+              {POLICIES.map((item) => (
                 <PolicyCard
                   key={item.value}
                   value={item.value}
diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
index 6fcb5d353..65a7ebde2 100644
--- a/src/lib/pages/publish-module/utils.ts
+++ b/src/lib/pages/publish-module/utils.ts
@@ -32,12 +32,18 @@ export const statusResolver = ({
 
   const policyUpdateText = `Its upgrade policy will be updated from ${currentPolicy} to ${policy}`;
 
+  // Check module address and connected wallet address equality
   if (!validPublisher)
     return {
       status: "error",
       text: `This .mv file can be published by ${truncate(abi.address)} only.`,
     };
+  // Condition check for existing module
   if (currentPolicy) {
+    // Policy check
+    // IMMUTABLE -> cannot be republished
+    // COMPATIBLE -> can be republished as COMPATIBLE and IMMUTABLE only
+    // ARBITRARY -> can be freely republished
     if (currentPolicy === UpgradePolicy.IMMUTABLE)
       return {
         status: "error",
@@ -62,6 +68,7 @@ export const statusResolver = ({
           text: `“${abi.name}” is published with “${currentPolicy}” policy, which cannot be republished to “${policy}”`,
         };
   }
+  // Condition check for non-existing module with identical module file uploaded
   if (priorUpload) {
     if (policy === UpgradePolicy.IMMUTABLE)
       return {
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 4f48b1fa1..5cee66a36 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -74,13 +74,11 @@ interface DecodeModuleReturn {
 }
 
 export const decodeModule = async (
+  decodeAPI: string,
   moduleEncode: string
 ): Promise<ResponseABI> =>
   axios
-    .post<DecodeModuleReturn>(
-      "https://initia-api-jiod42ec2q-as.a.run.app/decode_module",
-      {
-        code_bytes: moduleEncode,
-      }
-    )
+    .post<DecodeModuleReturn>(decodeAPI, {
+      code_bytes: moduleEncode,
+    })
     .then(({ data }) => parseJsonABI(libDecode(data.abi)));
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 1fef5c612..0fc67f6be 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -5,7 +5,11 @@ import type {
 } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 
-import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
+import {
+  CELATONE_QUERY_KEYS,
+  useBaseApiRoute,
+  useMoveConfig,
+} from "lib/app-provider";
 import type {
   MoveAccountAddr,
   ExposedFunction,
@@ -116,18 +120,20 @@ export interface DecodeModuleQueryResponse {
 }
 
 export const useDecodeModule = ({
-  moduleEncode,
+  base64EncodedFile,
   address,
   options,
 }: {
-  moduleEncode: string;
+  base64EncodedFile: string;
   address: Option<HumanAddr>;
   options?: Omit<UseQueryOptions<DecodeModuleQueryResponse>, "queryKey">;
 }) => {
   const baseEndpoint = useBaseApiRoute("rest");
+  const move = useMoveConfig({ shouldRedirect: false });
 
   const queryFn = async (): Promise<DecodeModuleQueryResponse> => {
-    const abi = await decodeModule(moduleEncode);
+    if (!move.enabled) throw new Error("Move configuration is disabled.");
+    const abi = await decodeModule(move.decodeApi, base64EncodedFile);
     const modulePath = `${truncate(abi.address)}::${abi.name}`;
 
     const validPublisher = address
@@ -146,7 +152,12 @@ export const useDecodeModule = ({
   };
 
   return useQuery(
-    [CELATONE_QUERY_KEYS.MODULE_DECODE, moduleEncode, address],
+    [
+      CELATONE_QUERY_KEYS.MODULE_DECODE,
+      move.enabled,
+      base64EncodedFile,
+      address,
+    ],
     queryFn,
     options
   );
diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index 2f977ad80..989cf5a01 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -29,7 +29,5 @@ export const hexToBech32Address = (
   return toBech32(prefix, fromHex(strip)) as HumanAddr;
 };
 
-export const unpadHexAddress = (hexAddr: HexAddr): HexAddr => {
-  const hex = hexAddr.startsWith("0x") ? hexAddr.slice(2) : hexAddr;
-  return "0x".concat(hex.replace(/^0+/, "")) as HexAddr;
-};
+export const unpadHexAddress = (hexAddr: HexAddr): HexAddr =>
+  "0x".concat(hexAddr.slice(2).replace(/^0+/, "")) as HexAddr;

From 2c16bf98b77066b65cd82c0bc83cb2bd863c80cb Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 22 Sep 2023 17:40:09 +0700
Subject: [PATCH 082/368] fix: lock cosmjs package

---
 package.json | 10 +++++-----
 yarn.lock    | 24 ++++++++++++------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 8f57a702d..436adf221 100644
--- a/package.json
+++ b/package.json
@@ -27,11 +27,11 @@
     "@chakra-ui/icons": "^2.0.11",
     "@chakra-ui/react": "2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
-    "@cosmjs/cosmwasm-stargate": "^0.31.1",
-    "@cosmjs/crypto": "^0.31.1",
-    "@cosmjs/encoding": "^0.31.1",
-    "@cosmjs/proto-signing": "^0.31.1",
-    "@cosmjs/stargate": "^0.31.1",
+    "@cosmjs/cosmwasm-stargate": "0.31.1",
+    "@cosmjs/crypto": "0.31.1",
+    "@cosmjs/encoding": "0.31.1",
+    "@cosmjs/proto-signing": "0.31.1",
+    "@cosmjs/stargate": "0.31.1",
     "@cosmos-kit/compass": "2.3.0",
     "@cosmos-kit/core": "2.5.0",
     "@cosmos-kit/keplr": "2.3.0",
diff --git a/yarn.lock b/yarn.lock
index f6de41c60..c7c9a52ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2143,7 +2143,7 @@
     "@cosmjs/math" "^0.31.1"
     "@cosmjs/utils" "^0.31.1"
 
-"@cosmjs/cosmwasm-stargate@^0.31.1":
+"@cosmjs/cosmwasm-stargate@0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.31.1.tgz#36d4386238fd4310d144486a27585a4fec3f27cd"
   integrity sha512-5hwv4oztFnpqnFaXhYxZc93na3qdxylT2kqms4pLzD8CWMEQmrwhdM4KpZimrsyZK55WiMQtTPsdSh7M8KLOow==
@@ -2160,7 +2160,7 @@
     long "^4.0.0"
     pako "^2.0.2"
 
-"@cosmjs/crypto@^0.31.1":
+"@cosmjs/crypto@0.31.1", "@cosmjs/crypto@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.31.1.tgz#ce4917df0f7b38f0909a32020907ccff04acefe6"
   integrity sha512-4R/SqdzdVzd4E5dpyEh1IKm5GbTqwDogutyIyyb1bcOXiX/x3CrvPI9Tb4WSIMDLvlb5TVzu2YnUV51Q1+6mMA==
@@ -2173,19 +2173,19 @@
     elliptic "^6.5.4"
     libsodium-wrappers-sumo "^0.7.11"
 
-"@cosmjs/encoding@^0.20.0":
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.20.1.tgz#1d1162b3eca51b7244cd45102e313612cea77281"
-  integrity sha512-aBp153iq2LD4GwDGwodDWZk/eyAUZ8J8bbiqZ1uK8rrylzm9Rdw84aa6JxykezJe+uBPtoI4lx9eH7VQXCGDXw==
+"@cosmjs/encoding@0.31.1", "@cosmjs/encoding@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.31.1.tgz#0041b2650c443d883e22f27c7d3cd7b844c6d0ec"
+  integrity sha512-IuxP6ewwX6vg9sUJ8ocJD92pkerI4lyG8J5ynAM3NaX3q+n+uMoPRSQXNeL9bnlrv01FF1kIm8if/f5F7ZPtkA==
   dependencies:
     base64-js "^1.3.0"
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/encoding@^0.31.1":
-  version "0.31.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.31.1.tgz#0041b2650c443d883e22f27c7d3cd7b844c6d0ec"
-  integrity sha512-IuxP6ewwX6vg9sUJ8ocJD92pkerI4lyG8J5ynAM3NaX3q+n+uMoPRSQXNeL9bnlrv01FF1kIm8if/f5F7ZPtkA==
+"@cosmjs/encoding@^0.20.0":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.20.1.tgz#1d1162b3eca51b7244cd45102e313612cea77281"
+  integrity sha512-aBp153iq2LD4GwDGwodDWZk/eyAUZ8J8bbiqZ1uK8rrylzm9Rdw84aa6JxykezJe+uBPtoI4lx9eH7VQXCGDXw==
   dependencies:
     base64-js "^1.3.0"
     bech32 "^1.1.4"
@@ -2213,7 +2213,7 @@
   dependencies:
     bn.js "^5.2.0"
 
-"@cosmjs/proto-signing@^0.31.1":
+"@cosmjs/proto-signing@0.31.1", "@cosmjs/proto-signing@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.31.1.tgz#3929d5bee3c88c42b3bc3c4b9db4ab3bddb684c4"
   integrity sha512-hipbBVrssPu+jnmRzQRP5hhS/mbz2nU7RvxG/B1ZcdNhr1AtZC5DN09OTUoEpMSRgyQvScXmk/NTbyf+xmCgYg==
@@ -2236,7 +2236,7 @@
     ws "^7"
     xstream "^11.14.0"
 
-"@cosmjs/stargate@^0.31.1":
+"@cosmjs/stargate@0.31.1", "@cosmjs/stargate@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.31.1.tgz#7e2b0fd6f181250915b1d73ecf9dfbab6f3cdd0d"
   integrity sha512-TqOJZYOH5W3sZIjR6949GfjhGXO3kSHQ3/KmE+SuKyMMmQ5fFZ45beawiRtVF0/CJg5RyPFyFGJKhb1Xxv3Lcg==

From a1108908edb08e6e9cf7c3a28cfa73054a5af899 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 22 Sep 2023 18:01:58 +0700
Subject: [PATCH 083/368] fix: refactor form

---
 src/lib/components/abi/AbiForm.tsx            | 46 ++++++++-----------
 .../components/abi/args-form/field/index.tsx  |  5 +-
 .../components/abi/args-form/field/utils.ts   |  2 -
 src/lib/components/abi/args-form/index.tsx    | 11 +++--
 src/lib/components/abi/types-form/index.tsx   |  8 +++-
 5 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
index 315b30ee5..cce57b23e 100644
--- a/src/lib/components/abi/AbiForm.tsx
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
 import type { AbiFormData, ExposedFunction } from "lib/types";
@@ -28,35 +28,25 @@ export const AbiForm = ({
   return (
     <Flex direction="column" gap={4}>
       {Object.keys(typeArgs).length > 0 && (
-        <Flex direction="column" gap={4}>
-          <Heading variant="h6" as="h6" color="text.main">
-            type_args
-          </Heading>
-          <TypesForm
-            genericTypeParams={fn.generic_type_params}
-            initialData={typeArgs}
-            propsOnChange={(value) => {
-              setValue("typeArgs", value);
-              propsOnChange?.(getValues());
-            }}
-          />
-        </Flex>
+        <TypesForm
+          genericTypeParams={fn.generic_type_params}
+          initialData={typeArgs}
+          propsOnChange={(value) => {
+            setValue("typeArgs", value);
+            propsOnChange?.(getValues());
+          }}
+        />
       )}
       {Object.keys(args).length > 0 && (
-        <Flex direction="column" gap={4}>
-          <Heading variant="h6" as="h6" color="text.main">
-            args
-          </Heading>
-          <ArgsForm
-            params={fn.params}
-            initialData={args}
-            propsOnChange={(value) => {
-              setValue("args", value);
-              propsOnChange?.(getValues());
-            }}
-            propsOnErrors={propsOnErrors}
-          />
-        </Flex>
+        <ArgsForm
+          params={fn.params}
+          initialData={args}
+          propsOnChange={(value) => {
+            setValue("args", value);
+            propsOnChange?.(getValues());
+          }}
+          propsOnErrors={propsOnErrors}
+        />
       )}
     </Flex>
   );
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index 6456f89de..d4c879c74 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -21,7 +21,6 @@ interface ArgFieldTemplateProps {
   param: string;
   control: Control<AbiFormData["args"]>;
   error?: string;
-  isReadOnly?: boolean;
 }
 
 export const ArgFieldTemplate = ({
@@ -29,7 +28,6 @@ export const ArgFieldTemplate = ({
   param,
   control,
   error,
-  isReadOnly = false,
 }: ArgFieldTemplateProps) => {
   const { validateUserAddress, validateContractAddress, validateHexAddress } =
     useValidateAddress();
@@ -44,7 +42,7 @@ export const ArgFieldTemplate = ({
 
   const isOptional = param.startsWith("0x1::option::Option");
   const type = isOptional ? param.split(/<(.*)>/)[1] : param;
-  const rules = getRules(type, isOptional, isReadOnly, isValidArgAddress);
+  const rules = getRules(type, isOptional, isValidArgAddress);
 
   const {
     field: { value, onChange, ...fieldProps },
@@ -69,7 +67,6 @@ export const ArgFieldTemplate = ({
         }
         size="md"
         isInvalid={isError}
-        isReadOnly={isReadOnly}
         isDisabled={isNull}
         {...fieldProps}
       >
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
index 388235ba2..6b34d2ba0 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -55,11 +55,9 @@ const validateVector = (
 export const getRules = <T extends FieldValues>(
   type: string,
   isOptional: boolean,
-  isReadOnly: boolean,
   isValidArgAddress: (input: string) => boolean
 ): UseControllerProps<T>["rules"] => {
   const rules: UseControllerProps<T>["rules"] = {};
-  if (isReadOnly) return rules;
 
   if (!isOptional) {
     rules.validate = {
diff --git a/src/lib/components/abi/args-form/index.tsx b/src/lib/components/abi/args-form/index.tsx
index aaf326388..0296e4ab8 100644
--- a/src/lib/components/abi/args-form/index.tsx
+++ b/src/lib/components/abi/args-form/index.tsx
@@ -1,3 +1,4 @@
+import { Flex, Heading } from "@chakra-ui/react";
 import { useEffect } from "react";
 import type { FormState } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -11,7 +12,6 @@ interface ArgsFormProps {
   initialData: AbiFormData["args"];
   propsOnChange?: (data: AbiFormData["args"]) => void;
   propsOnErrors?: (errors: [string, string][]) => void;
-  isReadOnly?: boolean;
 }
 
 const formatErrors = (
@@ -27,7 +27,6 @@ export const ArgsForm = ({
   initialData,
   propsOnChange,
   propsOnErrors,
-  isReadOnly = false,
 }: ArgsFormProps) => {
   const {
     trigger,
@@ -50,7 +49,10 @@ export const ArgsForm = ({
   );
 
   return (
-    <>
+    <Flex direction="column" gap={4}>
+      <Heading variant="h6" as="h6" color="text.main">
+        args
+      </Heading>
       {params.map((param, index) => {
         control.register(`${index}`, {
           onChange: () => propsOnChange?.(getValues()),
@@ -62,10 +64,9 @@ export const ArgsForm = ({
             param={param}
             control={control}
             error={errors[`${index}`]?.message}
-            isReadOnly={isReadOnly}
           />
         );
       })}
-    </>
+    </Flex>
   );
 };
diff --git a/src/lib/components/abi/types-form/index.tsx b/src/lib/components/abi/types-form/index.tsx
index eb484fde4..558f401b6 100644
--- a/src/lib/components/abi/types-form/index.tsx
+++ b/src/lib/components/abi/types-form/index.tsx
@@ -1,3 +1,4 @@
+import { Flex, Heading } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
 import type { AbiFormData, GenericTypeParam } from "lib/types";
@@ -28,7 +29,10 @@ export const TypesForm = ({
   };
 
   return (
-    <>
+    <Flex direction="column" gap={4}>
+      <Heading variant="h6" as="h6" color="text.main">
+        type_args
+      </Heading>
       {genericTypeParams.map(({ constraints }, index) => (
         <TypeFieldInput
           key={constraints.join() + index.toString()}
@@ -38,6 +42,6 @@ export const TypesForm = ({
           onChange={handleOnChange(index)}
         />
       ))}
-    </>
+    </Flex>
   );
 };

From 613c0d67d448be5a748c57d2c8a9d16605d4dc78 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 22 Sep 2023 18:13:35 +0700
Subject: [PATCH 084/368] fix: lock initia package

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 436adf221..298cfb50f 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "@emotion/styled": "^11",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
-    "@initia/initia.js": "^0.1.8",
-    "@initia/initia.proto": "^0.1.11",
+    "@initia/initia.js": "0.1.8",
+    "@initia/initia.proto": "0.1.11",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
     "@rjsf/utils": "v5.0.0-beta.10",

From 1c2ebe3f92a04adfd154e4847a705d34f4c0434a Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 22 Sep 2023 18:32:25 +0700
Subject: [PATCH 085/368] chore: align dependency

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0a149df3c..db08850d1 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.8.0",
-    "@chain-registry/types": "0.13.1",
     "@amplitude/marketing-analytics-browser": "^1.0.7",
+    "@chain-registry/types": "0.13.1",
     "@chakra-ui/anatomy": "^2.1.0",
     "@chakra-ui/card": "^2.1.1",
     "@chakra-ui/icons": "^2.0.11",

From 7868eafdc43843e1742eba5176ecb1e9482d24ac Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 22 Sep 2023 18:40:34 +0700
Subject: [PATCH 086/368] fix: revert package and yarn.lock

---
 package.json | 4 ++--
 yarn.lock    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index db08850d1..298cfb50f 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^1.8.0",
     "@amplitude/marketing-analytics-browser": "^1.0.7",
-    "@chain-registry/types": "0.13.1",
+    "@chain-registry/types": "^0.13.1",
     "@chakra-ui/anatomy": "^2.1.0",
     "@chakra-ui/card": "^2.1.1",
     "@chakra-ui/icons": "^2.0.11",
@@ -57,7 +57,7 @@
     "axios": "^1.1.3",
     "big.js": "^6.2.1",
     "camelcase": "^7.0.0",
-    "chain-registry": "1.19.0",
+    "chain-registry": "^1.19.0",
     "chakra-react-select": "^4.7.0",
     "cosmjs-types": "^0.7.2",
     "dayjs": "^1.11.6",
diff --git a/yarn.lock b/yarn.lock
index a6f24d034..c7c9a52ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3431,7 +3431,7 @@
   dependencies:
     browser-headers "^0.4.1"
 
-"@initia/initia.js@0.1.8":
+"@initia/initia.js@^0.1.8":
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.8.tgz#f1d1d12a37788054061b2e5f9db55c33dcc5f67c"
   integrity sha512-Q7GhXHgIZ3th6k2vou+e+CO4C5JA/JeA6w3oP/kb2cxbqOAOM1+ybN/8oMtHNApxh/gpmCWUXi7axHV5v/91UA==
@@ -3453,7 +3453,7 @@
     tmp "^0.2.1"
     ws "^7.5.9"
 
-"@initia/initia.proto@0.1.11", "@initia/initia.proto@^0.1.11":
+"@initia/initia.proto@^0.1.11":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.11.tgz#39016bbb4d15f06aaec17e56d6f431ddadc600ce"
   integrity sha512-G9HRTy5xfza6hTjYLuLgcmJWjSDsnLXnc2HvWceDcaSlHp212rMH07+gpazwY0L6aCm3uWyqLh4Yig60L3AaRA==
@@ -6337,7 +6337,7 @@ capital-case@^1.0.4:
     tslib "^2.0.3"
     upper-case-first "^2.0.2"
 
-chain-registry@1.19.0:
+chain-registry@^1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/chain-registry/-/chain-registry-1.19.0.tgz#6d2d56b56efebee0d15ced8f9bd8329a099ce04d"
   integrity sha512-7Ax0cRurfS+I0Oru3Td8NqBY/2YRCv570XM555E5vu3ib3f/k5SELwxsSalTtQj+Furx6quEyKWuOjrNwPpcQg==

From 5498c714393d02171244ee8461b056ba7e11dca4 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 22 Sep 2023 18:51:07 +0700
Subject: [PATCH 087/368] fix: gas price

---
 src/lib/chain-registry/initiatestnet.ts  |  4 ++--
 src/lib/pages/publish-module/publish.tsx | 24 ++++++++++++++----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index 9a3d7a6c1..3daf56a14 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -17,9 +17,9 @@ export const initiatestnet: Chain = {
       {
         denom: "uinit",
         fixed_min_gas_price: 0,
-        low_gas_price: 0,
+        low_gas_price: 0.151,
         average_gas_price: 0.151,
-        high_gas_price: 0.25,
+        high_gas_price: 0.151,
       },
     ],
   },
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 141350009..435b86001 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -167,13 +167,17 @@ export const PublishModule = ({
     }
   }, [fields]);
 
-  const PUBLISH_MODULE_TEXT = {
-    header: "Publish new module",
-    description: `Upload .mv files to publish new module to ${chainPrettyName}. You can
-    upload multiple .mv files to publish many modules within a
-    transaction.`,
-    connectWallet: "You need to connect wallet to proceed this action",
-  };
+  const publishModuleText = useMemo(
+    () => ({
+      header: "Publish new module",
+      description: `Upload .mv files to publish new module to ${chainPrettyName}. You can
+      upload multiple .mv files to publish many modules within a
+      transaction.`,
+      connectWallet: "You need to connect wallet to proceed this action",
+    }),
+    [chainPrettyName]
+  );
+
   return (
     <>
       <PageContainer display="unset" p={0}>
@@ -185,13 +189,13 @@ export const PublishModule = ({
         >
           <Box gridArea="1 / 2">
             <Heading as="h5" variant="h5" textAlign="center">
-              {PUBLISH_MODULE_TEXT.header}
+              {publishModuleText.header}
             </Heading>
             <Text color="text.dark" pt={4} textAlign="center">
-              {PUBLISH_MODULE_TEXT.description}
+              {publishModuleText.description}
             </Text>
             <ConnectWalletAlert
-              subtitle={PUBLISH_MODULE_TEXT.connectWallet}
+              subtitle={publishModuleText.connectWallet}
               mt={12}
             />
           </Box>

From 164a4cea9e2555a5715357ea34f0bac5358fa448 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 25 Sep 2023 00:42:25 +0700
Subject: [PATCH 088/368] fix(components): add struct and search

---
 src/lib/components/LabelText.tsx              |   8 +-
 .../components/module/FunctionDetailCard.tsx  |  74 ++++++----
 src/lib/components/module/StructCard.tsx      | 130 ++++++++++++++++++
 .../components/FunctionTypeSwitch.tsx         |   2 +-
 .../components/ModuleFunction.tsx             |  24 +++-
 .../components/ModuleStruct.tsx               | 110 ++++++++++++++-
 .../module-details/components/QuickAccess.tsx |  70 ----------
 src/lib/pages/module-details/index.tsx        |  86 ++++++++++--
 src/lib/types/abi.ts                          |   2 +-
 9 files changed, 390 insertions(+), 116 deletions(-)
 create mode 100644 src/lib/components/module/StructCard.tsx
 delete mode 100644 src/lib/pages/module-details/components/QuickAccess.tsx

diff --git a/src/lib/components/LabelText.tsx b/src/lib/components/LabelText.tsx
index 98b5e05d9..06ed721bf 100644
--- a/src/lib/components/LabelText.tsx
+++ b/src/lib/components/LabelText.tsx
@@ -6,6 +6,7 @@ import { TooltipInfo } from "./Tooltip";
 interface LabelTextProps extends FlexProps {
   label: string;
   labelWeight?: number;
+  labelColor?: string;
   isSmall?: boolean;
   tooltipText?: string;
   children: string | JSX.Element;
@@ -17,6 +18,7 @@ export const LabelText = ({
   label,
   labelWeight = 500,
   isSmall = false,
+  labelColor = "text.dark",
   tooltipText,
   children,
   helperText1,
@@ -27,7 +29,7 @@ export const LabelText = ({
     <Flex align="center" gap={1}>
       <Text
         variant={isSmall ? "body3" : "body2"}
-        color="text.dark"
+        color={labelColor}
         fontWeight={labelWeight}
       >
         {label}
@@ -42,12 +44,12 @@ export const LabelText = ({
       children
     )}
     {helperText1 && (
-      <Text variant="body3" color="text.dark">
+      <Text variant="body3" color={labelColor}>
         {helperText1}
       </Text>
     )}
     {helperText2 && (
-      <Text variant="body3" color="text.dark">
+      <Text variant="body3" color={labelColor}>
         {helperText2}
       </Text>
     )}
diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index 99ee51a79..d20087735 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -18,7 +18,6 @@ import type { ExposedFunction } from "lib/types";
 import { checkAvailability, getVisibilityIcon } from "lib/utils";
 
 interface FunctionDetailCardProps {
-  // isSelected?: boolean;
   exposedFn: ExposedFunction;
 }
 
@@ -35,7 +34,7 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
   const { is_view: isView, visibility, name } = exposedFn;
   const disabled = !checkAvailability(exposedFn);
 
-  const getColor = () => {
+  const getFnColor = () => {
     switch (isView) {
       case false:
         return "accent.main";
@@ -45,6 +44,11 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
     }
   };
 
+  const getButtonStyle = () => {
+    if (disabled) return { variant: "outline-gray", color: "gray.500" };
+    if (isView) return { variant: "outline-primary", color: "primary.dark" };
+    return { variant: "outline-accent", color: "accent.dark" };
+  };
   return (
     <AccordionItem
       bg="gray.800"
@@ -69,14 +73,14 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
             }
           >
             <Flex justifyContent="space-between" w="full">
-              <Flex direction="column" gap={1}>
+              <Flex direction="column" gap={1} alignItems="flex-start">
                 <Flex gap={1} alignItems="center">
                   <CustomIcon
                     name={isView ? "query" : "execute"}
-                    color={getColor()}
+                    color={getFnColor()}
                     boxSize={3}
                   />
-                  <Text variant="body3" color={getColor()}>
+                  <Text variant="body3" color={getFnColor()}>
                     {isView ? "View" : "Execute"}
                   </Text>
                 </Flex>
@@ -134,19 +138,20 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
                   </Flex>
                 </Flex>
                 <Button
-                  variant={isView ? "outline-primary" : "outline-accent"}
-                  borderColor={isView ? "primary.dark" : "accent.dark"}
+                  variant={getButtonStyle().variant}
+                  isDisabled={disabled}
+                  borderColor={getButtonStyle().color}
                   size="sm"
                   leftIcon={
                     <CustomIcon
                       mx={0}
                       name={isView ? "query" : "execute"}
-                      color={getColor()}
+                      color={getButtonStyle().color}
                       boxSize={3}
                     />
                   }
                 >
-                  <Text color={getColor()} mt="2px">
+                  <Text color={getButtonStyle().color} mt="2px">
                     {isView ? "View" : "Execute"}
                   </Text>
                 </Button>
@@ -168,25 +173,31 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
           <AccordionPanel bg="gray.900" borderRadius={8} mt={4} py={3} px={4}>
             <Flex gap={3} direction="column">
               <Flex gap={8}>
-                <LabelText isSmall label="Visibility" labelWeight={700}>
-                  <Flex
-                    align="center"
-                    gap={1}
-                    color="text.dark"
-                    lineHeight={0}
-                    textTransform="capitalize"
-                  >
+                <LabelText
+                  isSmall
+                  label="visibility"
+                  labelWeight={700}
+                  labelColor="text.disabled"
+                >
+                  <Flex align="center">
                     <CustomIcon
                       name={getVisibilityIcon(exposedFn.visibility)}
                       boxSize={3}
                       ml={0}
                       color="gray.600"
                     />
-                    <Text variant="body3">{exposedFn.visibility}</Text>
+                    <Text variant="body3" textTransform="capitalize">
+                      {exposedFn.visibility}
+                    </Text>
                   </Flex>
                 </LabelText>
-                <LabelText isSmall label="is_entry" labelWeight={700}>
-                  <Flex align="center" gap={1} color="text.dark" lineHeight={0}>
+                <LabelText
+                  isSmall
+                  label="is_entry"
+                  labelWeight={700}
+                  labelColor="text.disabled"
+                >
+                  <Flex align="center">
                     <CustomIcon
                       boxSize={3}
                       ml={0}
@@ -196,8 +207,13 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
                     <Text variant="body3">{String(exposedFn.is_entry)}</Text>
                   </Flex>
                 </LabelText>
-                <LabelText isSmall label="is_view" labelWeight={700}>
-                  <Flex align="center" gap={1} color="text.dark" lineHeight={0}>
+                <LabelText
+                  isSmall
+                  label="is_view"
+                  labelWeight={700}
+                  labelColor="text.disabled"
+                >
+                  <Flex align="center">
                     <CustomIcon
                       boxSize={3}
                       ml={0}
@@ -208,12 +224,22 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
                   </Flex>
                 </LabelText>
               </Flex>
-              <LabelText isSmall label="generic_type_params" labelWeight={700}>
+              <LabelText
+                isSmall
+                label="generic_type_params"
+                labelWeight={700}
+                labelColor="text.disabled"
+              >
                 <Text variant="body3">
                   {JSON.stringify(exposedFn.generic_type_params)}
                 </Text>
               </LabelText>
-              <LabelText isSmall label="params" labelWeight={700}>
+              <LabelText
+                isSmall
+                label="params"
+                labelWeight={700}
+                labelColor="text.disabled"
+              >
                 <Text variant="body3">{JSON.stringify(exposedFn.params)}</Text>
               </LabelText>
             </Flex>
diff --git a/src/lib/components/module/StructCard.tsx b/src/lib/components/module/StructCard.tsx
new file mode 100644
index 000000000..055bb3ae6
--- /dev/null
+++ b/src/lib/components/module/StructCard.tsx
@@ -0,0 +1,130 @@
+import {
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  Flex,
+  IconButton,
+  chakra,
+  Text,
+  Tag,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "../icon";
+import { LabelText } from "../LabelText";
+import { AmpTrackExpand } from "lib/services/amplitude";
+import type { Struct } from "lib/types";
+
+interface StructCardProps {
+  struct: Struct;
+}
+
+const StyledIconButton = chakra(IconButton, {
+  baseStyle: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: "24px",
+    color: "gray.600",
+  },
+});
+export const StructCard = ({ struct }: StructCardProps) => {
+  const structAbilities = ["copy", "drop", "key", "store"];
+  return (
+    <AccordionItem
+      bg="gray.800"
+      _hover={{ bg: "gray.700" }}
+      borderRadius={8}
+      px={4}
+      py={3}
+      transition="all .25s ease-in-out"
+      flexDirection="column"
+      gap={1}
+    >
+      {({ isExpanded }) => (
+        <>
+          <AccordionButton
+            flexDirection="column"
+            alignItems="flex-start"
+            onClick={() =>
+              AmpTrackExpand({
+                action: !isExpanded ? "expand" : "collapse",
+                component: "unsupported_pool",
+                section: "pool-list-page",
+              })
+            }
+          >
+            <Flex justifyContent="space-between" w="full" alignItems="center">
+              <Text variant="body2">{struct.name}</Text>
+              <Flex align="center">
+                <Flex gap={1}>
+                  {structAbilities.map((item) => (
+                    <Tag
+                      size="sm"
+                      variant="gray"
+                      opacity={struct.abilities.includes(item) ? 1 : 0.3}
+                    >
+                      {item}
+                    </Tag>
+                  ))}
+                </Flex>
+                <StyledIconButton
+                  variant="none"
+                  aria-label="external"
+                  _hover={{ backgroundColor: "gray.700" }}
+                  icon={
+                    <CustomIcon
+                      name="chevron-down"
+                      transform={isExpanded ? "rotate(180deg)" : "rotate(0)"}
+                      transition="all .25s ease-in-out"
+                    />
+                  }
+                />
+              </Flex>
+            </Flex>
+          </AccordionButton>
+          <AccordionPanel bg="gray.900" borderRadius={8} mt={2} py={3} px={4}>
+            <Flex gap={3} direction="column">
+              <Flex gap={8}>
+                <LabelText
+                  isSmall
+                  label="is_native"
+                  labelWeight={700}
+                  labelColor="text.disabled"
+                >
+                  <Text variant="body3">{String(struct.is_native)}</Text>
+                </LabelText>
+                <LabelText
+                  isSmall
+                  label="abilities"
+                  labelWeight={700}
+                  labelColor="text.disabled"
+                >
+                  <Text variant="body3">
+                    {JSON.stringify(struct.abilities)}
+                  </Text>
+                </LabelText>
+              </Flex>
+              <LabelText
+                isSmall
+                label="generic_type_params"
+                labelWeight={700}
+                labelColor="text.disabled"
+              >
+                <Text variant="body3">
+                  {JSON.stringify(struct.generic_type_params)}
+                </Text>
+              </LabelText>
+              <LabelText
+                isSmall
+                label="fields"
+                labelWeight={700}
+                labelColor="text.disabled"
+              >
+                <Text variant="body3">{JSON.stringify(struct.fields)}</Text>
+              </LabelText>
+            </Flex>
+          </AccordionPanel>
+        </>
+      )}
+    </AccordionItem>
+  );
+};
diff --git a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
index eb9593d29..56089c5cd 100644
--- a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
+++ b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
@@ -60,7 +60,7 @@ export const FunctionTypeSwitch = ({
           textAlign="center"
         >
           <Heading as="h6" variant="h6" fontSize="14px">
-            {tab} {counts[idx] && `(${counts[idx]})`}
+            {tab} {`(${counts[idx]})`}
           </Heading>
         </MotionBox>
       ))}
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index ef57c93d1..6072c6875 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -1,7 +1,8 @@
 import { Flex, Heading, Button, Accordion } from "@chakra-ui/react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
+import InputWithIcon from "lib/components/InputWithIcon";
 import { Loading } from "lib/components/Loading";
 import { FunctionDetailCard } from "lib/components/module/FunctionDetailCard";
 import { AmpTrackExpandAll } from "lib/services/amplitude";
@@ -16,6 +17,14 @@ interface ModuleFunctionProps {
 export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
   const [tab, setTab] = useState(FunctionTypeTabs.ALL);
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+  const [keyword, setKeyword] = useState("");
+
+  const exposedFns = moduleData.parsedAbi.exposed_functions;
+  const filteredFns = useMemo(() => {
+    if (!keyword) return exposedFns;
+    return exposedFns.filter((fn) => fn.name?.includes(keyword));
+  }, [keyword, exposedFns]);
+
   const updateExpandedIndexes = (indexes: number[]) =>
     setExpandedIndexes(indexes);
 
@@ -23,17 +32,22 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
 
   return (
     <Flex direction="column" gap={8}>
-      <Heading as="h6" variant="h6" fontWeight={600}>
+      <Heading as="h6" variant="h6" fontWeight={600} minH="24px">
         Exposed Function
       </Heading>
-      <Flex>search input ja</Flex>
+      <InputWithIcon
+        placeholder="Search functions..."
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        action="exposed-function-search"
+      />
       <Flex justifyContent="space-between" alignItems="center">
         <FunctionTypeSwitch
           currentTab={tab}
           onTabChange={setTab}
           my={3}
           counts={[
-            moduleData.parsedAbi.exposed_functions.length,
+            filteredFns.length,
             moduleData.viewFunctions.length,
             moduleData.executeFunctions.length,
           ]}
@@ -101,7 +115,7 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
         onChange={updateExpandedIndexes}
       >
         <Flex direction="column" gap={4}>
-          {moduleData.parsedAbi.exposed_functions.map((fn) => (
+          {filteredFns.map((fn) => (
             <FunctionDetailCard exposedFn={fn} key={fn.name} />
           ))}
         </Flex>
diff --git a/src/lib/pages/module-details/components/ModuleStruct.tsx b/src/lib/pages/module-details/components/ModuleStruct.tsx
index 7ca504812..857014d94 100644
--- a/src/lib/pages/module-details/components/ModuleStruct.tsx
+++ b/src/lib/pages/module-details/components/ModuleStruct.tsx
@@ -1,5 +1,109 @@
-import { Flex } from "@chakra-ui/react";
+import { Button, Flex, Heading, Accordion } from "@chakra-ui/react";
+import { useMemo, useState } from "react";
 
-export const ModuleStruct = () => {
-  return <Flex>kkkkk</Flex>;
+import { CustomIcon } from "lib/components/icon";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { Loading } from "lib/components/Loading";
+import { StructCard } from "lib/components/module/StructCard";
+import { AmpTrackExpandAll } from "lib/services/amplitude";
+import type { IndexedModule } from "lib/services/moduleService";
+
+interface ModuleStructProps {
+  moduleData: IndexedModule;
+}
+export const ModuleStruct = ({ moduleData }: ModuleStructProps) => {
+  const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+  const [keyword, setKeyword] = useState("");
+
+  const moduleStructs = moduleData.parsedAbi.structs;
+  const filteredStructs = useMemo(() => {
+    if (!keyword) return moduleStructs;
+    return moduleStructs.filter((struct) => struct.name?.includes(keyword));
+  }, [keyword, moduleStructs]);
+
+  const updateExpandedIndexes = (indexes: number[]) =>
+    setExpandedIndexes(indexes);
+  if (!moduleData) return <Loading />;
+  return (
+    <Flex direction="column" gap={8}>
+      <Flex maxH="24px" justifyContent="space-between" alignItems="center">
+        <Heading as="h6" variant="h6" fontWeight={600}>
+          Structs
+        </Heading>
+        <Flex gap={4} alignItems="center">
+          <Button
+            variant="outline-primary"
+            size="sm"
+            rightIcon={
+              <CustomIcon
+                name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+                boxSize={3}
+              />
+            }
+            onClick={() => {
+              AmpTrackExpandAll(expandedIndexes.length ? "collapse" : "expand");
+              setExpandedIndexes((prev) =>
+                !prev.length
+                  ? Array.from(
+                      Array(
+                        moduleData.parsedAbi.exposed_functions.length
+                      ).keys()
+                    )
+                  : []
+              );
+            }}
+          >
+            {expandedIndexes.length ? "Collapse All" : "Expand All"}
+          </Button>
+          <Button
+            variant="outline-primary"
+            size="sm"
+            rightIcon={<CustomIcon name="launch" />}
+            onClick={() => {
+              const jsonString = JSON.stringify(
+                moduleData.parsedAbi.exposed_functions,
+                null,
+                2
+              );
+              const jsonWindow = window.open();
+              if (jsonWindow) {
+                // Modify styling later
+                jsonWindow.document.write(
+                  `<html><head><title>Module Exposed Function</title>`
+                );
+
+                // Add styling
+                jsonWindow.document.write(
+                  "<style>body { background-color: #f0f0f0; color: #333; }</style>"
+                );
+
+                jsonWindow.document.write(
+                  `</head><body><pre>${jsonString}</pre></body></html>`
+                );
+              }
+            }}
+          >
+            View in JSON
+          </Button>
+        </Flex>
+      </Flex>
+      <InputWithIcon
+        placeholder="Search structs..."
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        action="module-struct-search"
+      />
+      <Accordion
+        allowMultiple
+        index={expandedIndexes}
+        onChange={updateExpandedIndexes}
+      >
+        <Flex direction="column" gap={4}>
+          {filteredStructs.map((item) => (
+            <StructCard struct={item} key={item.name} />
+          ))}
+        </Flex>
+      </Accordion>
+    </Flex>
+  );
 };
diff --git a/src/lib/pages/module-details/components/QuickAccess.tsx b/src/lib/pages/module-details/components/QuickAccess.tsx
deleted file mode 100644
index b90d20386..000000000
--- a/src/lib/pages/module-details/components/QuickAccess.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
-
-import { CustomIcon, type IconKeys } from "lib/components/icon";
-
-interface ActionInfo {
-  icon: IconKeys;
-  iconColor: string;
-  name: string;
-  count: number;
-}
-
-interface QuickAccessProps {
-  viewFnCount: number;
-  executeFnCount: number;
-}
-
-export const QuickAccess = ({
-  viewFnCount,
-  executeFnCount,
-}: QuickAccessProps) => {
-  const actionList: ActionInfo[] = [
-    {
-      icon: "query" as IconKeys,
-      iconColor: "primary.main",
-      name: "View Functions",
-      count: viewFnCount,
-    },
-    {
-      icon: "execute" as IconKeys,
-      iconColor: "accent.main",
-      name: "Execute Functions",
-      count: executeFnCount,
-    },
-    {
-      icon: "list" as IconKeys,
-      iconColor: "gray.600",
-      name: "Transactions",
-      count: 0,
-    },
-  ];
-
-  return (
-    <Flex justifyContent="space-between" gap={6}>
-      {actionList.map((item) => (
-        // TODO Navigate to tab
-        <Flex
-          p={4}
-          bg="gray.800"
-          borderRadius={8}
-          w="full"
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          <Flex gap={3} alignItems="center">
-            <CustomIcon name={item.icon} boxSize={6} color={item.iconColor} />
-            <Flex flexDirection="column">
-              <Text variant="body1" color="text.dark" fontWeight={600}>
-                {item.name}
-              </Text>
-              <Heading as="h6" variant="h6" fontWeight={600}>
-                {item.count}
-              </Heading>
-            </Flex>
-          </Flex>
-          <CustomIcon name="chevron-right" color="gray.600" />
-        </Flex>
-      ))}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 0a5140a37..420e21f92 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -1,5 +1,6 @@
 import {
   Flex,
+  Text,
   Tabs,
   TabList,
   TabPanel,
@@ -7,6 +8,7 @@ import {
   Heading,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import type { MouseEventHandler } from "react";
 import { useCallback, useEffect } from "react";
 
 import {
@@ -16,6 +18,8 @@ import {
 } from "../contract-details/components/tables";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
+import type { IconKeys } from "lib/components/icon";
+import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { useContractDetailsTableCounts } from "lib/model/contract";
@@ -28,8 +32,8 @@ import { getFirstQueryParam } from "lib/utils";
 
 import { ModuleFunction } from "./components/ModuleFunction";
 import { ModuleInfo } from "./components/ModuleInfo";
+import { ModuleStruct } from "./components/ModuleStruct";
 import { ModuleTop } from "./components/ModuleTop";
-import { QuickAccess } from "./components/QuickAccess";
 
 const tableHeaderId = "moduleDetailsTab";
 export enum TabIndex {
@@ -38,6 +42,15 @@ export enum TabIndex {
   Txs = "txs",
   Structs = "structs",
 }
+
+interface ActionInfo {
+  icon: IconKeys;
+  iconColor: string;
+  name: string;
+  count: number;
+  onClick: MouseEventHandler<HTMLDivElement>;
+}
+
 // TODO get module path
 const txTableHeaderId = "ModuleTxsTableHeader";
 
@@ -99,9 +112,29 @@ export const ModuleDetails = () => {
 
   if (isLoading && !data) return <Loading />;
   const moduleData = data as IndexedModule;
-  // moduleData?.parsedAbi.exposed_functions
-  // moduleData?.viewFunctions
-  // moduleData?.executeFunctions
+  const actionList: ActionInfo[] = [
+    {
+      icon: "query" as IconKeys,
+      iconColor: "primary.main",
+      name: "View Functions",
+      count: moduleData?.viewFunctions.length,
+      onClick: handleTabChange(TabIndex.Function),
+    },
+    {
+      icon: "execute" as IconKeys,
+      iconColor: "accent.main",
+      name: "Execute Functions",
+      count: moduleData?.executeFunctions.length,
+      onClick: handleTabChange(TabIndex.Function),
+    },
+    {
+      icon: "list" as IconKeys,
+      iconColor: "gray.600",
+      name: "Transactions",
+      count: 0,
+      onClick: handleTabChange(TabIndex.Txs),
+    },
+  ];
   return (
     <PageContainer>
       <ModuleTop isVerified moduleData={moduleData} />
@@ -141,10 +174,43 @@ export const ModuleDetails = () => {
         <TabPanels>
           <TabPanel p={0}>
             <Flex gap={6} flexDirection="column">
-              <QuickAccess
-                viewFnCount={moduleData?.viewFunctions.length}
-                executeFnCount={moduleData?.executeFunctions.length}
-              />
+              <Flex justifyContent="space-between" gap={6} mb={6}>
+                {actionList.map((item) => (
+                  <Flex
+                    p={4}
+                    bg="gray.800"
+                    _hover={{ bg: "gray.700" }}
+                    transition="all .25s ease-in-out"
+                    borderRadius={8}
+                    w="full"
+                    alignItems="center"
+                    justifyContent="space-between"
+                    cursor="pointer"
+                    onClick={item.onClick}
+                  >
+                    <Flex gap={3} alignItems="center">
+                      <CustomIcon
+                        name={item.icon}
+                        boxSize={6}
+                        color={item.iconColor}
+                      />
+                      <Flex flexDirection="column">
+                        <Text
+                          variant="body1"
+                          color="text.dark"
+                          fontWeight={600}
+                        >
+                          {item.name}
+                        </Text>
+                        <Heading as="h6" variant="h6" fontWeight={600}>
+                          {item.count}
+                        </Heading>
+                      </Flex>
+                    </Flex>
+                    <CustomIcon name="chevron-right" color="gray.600" />
+                  </Flex>
+                ))}
+              </Flex>
               <ModuleInfo isVerified moduleData={moduleData} />
               {/* TODO History */}
               <Flex flexDirection="column" mt={6}>
@@ -269,7 +335,9 @@ export const ModuleDetails = () => {
               </Tabs>
             </Flex>
           </TabPanel>
-          <TabPanel p={0}>4</TabPanel>
+          <TabPanel p={0}>
+            <ModuleStruct moduleData={moduleData} />
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </PageContainer>
diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
index a2dc9ca22..9023d80e2 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/abi.ts
@@ -65,7 +65,7 @@ export interface ExposedFunction {
   return: string[];
 }
 
-interface Struct {
+export interface Struct {
   name: string;
   is_native: boolean;
   abilities: string[];

From 2a958c17be7c4f0a582aab0ca933eeaad837211c Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 25 Sep 2023 17:03:23 +0700
Subject: [PATCH 089/368] fix(components): module function filter

---
 .../components/FunctionTypeSwitch.tsx         |  3 +-
 .../components/ModuleFunction.tsx             | 49 +++++++++++++++----
 .../module-details/components/ModuleInfo.tsx  | 26 +++++-----
 src/lib/pages/module-details/index.tsx        | 15 +++---
 4 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
index 56089c5cd..e9e6061ca 100644
--- a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
+++ b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
@@ -1,6 +1,5 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Heading } from "@chakra-ui/react";
-import type { Dispatch, SetStateAction } from "react";
 
 import { MotionBox } from "lib/components/MotionBox";
 import type { Option } from "lib/types";
@@ -15,7 +14,7 @@ interface FunctionTypeSwitchProps extends FlexProps {
   currentTab: FunctionTypeTabs;
   disabled?: boolean;
   counts: [Option<number>, Option<number>, Option<number>];
-  onTabChange: Dispatch<SetStateAction<FunctionTypeTabs>>;
+  onTabChange: (newTab: FunctionTypeTabs) => void;
 }
 
 const tabs = Object.values(FunctionTypeTabs);
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index 834096d3b..554ea0b99 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -1,11 +1,14 @@
 import { Flex, Heading, Button, Accordion } from "@chakra-ui/react";
-import { useMemo, useState } from "react";
+import { useRouter } from "next/router";
+import { useCallback, useMemo, useState } from "react";
 
+import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { Loading } from "lib/components/Loading";
 import { FunctionDetailCard } from "lib/components/module/FunctionDetailCard";
 import type { IndexedModule } from "lib/services/moduleService";
+import { getFirstQueryParam } from "lib/utils";
 
 import { FunctionTypeSwitch, FunctionTypeTabs } from "./FunctionTypeSwitch";
 
@@ -14,19 +17,49 @@ interface ModuleFunctionProps {
 }
 
 export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
-  const [tab, setTab] = useState(FunctionTypeTabs.ALL);
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+
+  const tab = getFirstQueryParam(router.query.type) as FunctionTypeTabs;
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
   const [keyword, setKeyword] = useState("");
 
   const exposedFns = moduleData.parsedAbi.exposed_functions;
-  const filteredFns = useMemo(() => {
+
+  const searchedFns = useMemo(() => {
     if (!keyword) return exposedFns;
     return exposedFns.filter((fn) => fn.name?.includes(keyword));
   }, [keyword, exposedFns]);
+  const viewFns = searchedFns.filter((fn) => fn.is_view);
+  const executeFns = searchedFns.filter((fn) => !fn.is_view);
+
+  const getDisplayedFns = (selectedTab: FunctionTypeTabs) => {
+    if (selectedTab === FunctionTypeTabs.VIEW) return viewFns;
+    if (selectedTab === FunctionTypeTabs.EXECUTE) return executeFns;
+    return searchedFns;
+  };
 
   const updateExpandedIndexes = (indexes: number[]) =>
     setExpandedIndexes(indexes);
 
+  const handleTabChange = useCallback(
+    (nextTab: FunctionTypeTabs) => {
+      if (nextTab === tab) return;
+      navigate({
+        pathname: `/modules/[address]/[moduleName]/function`,
+        query: {
+          address: moduleData.address,
+          moduleName: moduleData.moduleName,
+          type: nextTab,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [tab, moduleData.address, moduleData.moduleName, navigate]
+  );
+
   if (!moduleData) return <Loading />;
 
   return (
@@ -43,13 +76,9 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
       <Flex justifyContent="space-between" alignItems="center">
         <FunctionTypeSwitch
           currentTab={tab}
-          onTabChange={setTab}
+          onTabChange={handleTabChange}
           my={3}
-          counts={[
-            filteredFns.length,
-            moduleData.viewFunctions.length,
-            moduleData.executeFunctions.length,
-          ]}
+          counts={[searchedFns.length, viewFns.length, executeFns.length]}
         />
         <Flex gap={4} alignItems="center">
           <Button
@@ -113,7 +142,7 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
         onChange={updateExpandedIndexes}
       >
         <Flex direction="column" gap={4}>
-          {filteredFns.map((fn) => (
+          {getDisplayedFns(tab).map((fn) => (
             <FunctionDetailCard exposedFn={fn} key={fn.name} />
           ))}
         </Flex>
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index c6b1a8a96..a0eca7cf4 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -5,17 +5,21 @@ import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { Loading } from "lib/components/Loading";
 import { ModuleSourceCode } from "lib/components/module";
-import type { IndexedModule } from "lib/services/moduleService";
+import {
+  useVerifyModule,
+  type IndexedModule,
+} from "lib/services/moduleService";
+import type { HexAddr, Option } from "lib/types";
 
 interface ModuleInfoProps {
   moduleData: IndexedModule;
-  isVerified?: boolean;
 }
 
-export const ModuleInfo = ({
-  moduleData,
-  isVerified = false,
-}: ModuleInfoProps) => {
+export const ModuleInfo = ({ moduleData }: ModuleInfoProps) => {
+  const { data: verificationData } = useVerifyModule({
+    address: moduleData?.address as Option<HexAddr>,
+    moduleName: moduleData?.moduleName,
+  });
   if (!moduleData) return <Loading />;
   return (
     <Flex flexDirection="column" gap={4}>
@@ -23,7 +27,7 @@ export const ModuleInfo = ({
         <Heading as="h6" variant="h6" fontWeight={600}>
           Module Information
         </Heading>
-        {isVerified && (
+        {verificationData?.source && (
           <Flex alignItems="center" gap={1}>
             <CustomIcon name="check-circle-solid" color="success.main" />
             <Text variant="body2" color="text.dark">
@@ -41,7 +45,7 @@ export const ModuleInfo = ({
         sx={{ "& > div": { flex: 1 } }}
       >
         <LabelText label="Upgrade Policy">{moduleData.upgradePolicy}</LabelText>
-        {/* TODO data */}
+        {/* TODO get block height */}
         <LabelText
           label="Initial Published Block Height"
           helperText1="formatUTC(createdTime)"
@@ -57,11 +61,12 @@ export const ModuleInfo = ({
         <LabelText label="Initial Published by" helperText1="(Account Address)">
           <ExplorerLink
             type="user_address"
-            value="cltn1...7tlju97"
+            value={moduleData.address}
             showCopyOnHover
             fixedHeight
           />
         </LabelText>
+        {/* TODO get  Transaction or proposal */}
         <LabelText label="Initial Published Transaction">
           <ExplorerLink
             type="tx_hash"
@@ -82,8 +87,7 @@ export const ModuleInfo = ({
           />
         </LabelText>
       </Flex>
-      {/* TODO: Wireup */}
-      <ModuleSourceCode sourceCode="" />
+      <ModuleSourceCode sourceCode={verificationData?.source} />
     </Flex>
   );
 };
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index b1f2d0974..0372925de 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -30,6 +30,7 @@ import { useAccountModules } from "lib/services/moduleService";
 import type { ContractAddr, MoveAccountAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
+import { FunctionTypeTabs } from "./components/FunctionTypeSwitch";
 import { ModuleFunction } from "./components/ModuleFunction";
 import { ModuleInfo } from "./components/ModuleInfo";
 import { ModuleStruct } from "./components/ModuleStruct";
@@ -68,7 +69,7 @@ export const ModuleDetails = () => {
   });
 
   const handleTabChange = useCallback(
-    (nextTab: TabIndex) => () => {
+    (nextTab: TabIndex, fnType?: FunctionTypeTabs) => () => {
       if (nextTab === tab) return;
       trackUseTab(nextTab);
       navigate({
@@ -77,6 +78,7 @@ export const ModuleDetails = () => {
           address: addr,
           moduleName,
           tab: nextTab,
+          ...(fnType ? { type: fnType } : {}),
         },
         options: {
           shallow: true,
@@ -119,16 +121,17 @@ export const ModuleDetails = () => {
       iconColor: "primary.main",
       name: "View Functions",
       count: moduleData?.viewFunctions.length,
-      onClick: handleTabChange(TabIndex.Function),
+      onClick: handleTabChange(TabIndex.Function, FunctionTypeTabs.VIEW),
     },
     {
       icon: "execute" as IconKeys,
       iconColor: "accent.main",
       name: "Execute Functions",
       count: moduleData?.executeFunctions.length,
-      onClick: handleTabChange(TabIndex.Function),
+      onClick: handleTabChange(TabIndex.Function, FunctionTypeTabs.EXECUTE),
     },
     {
+      // TO DO get tx count
       icon: "list" as IconKeys,
       iconColor: "gray.600",
       name: "Transactions",
@@ -156,7 +159,7 @@ export const ModuleDetails = () => {
           </CustomTab>
           <CustomTab
             count={moduleData?.parsedAbi.exposed_functions.length}
-            onClick={handleTabChange(TabIndex.Function)}
+            onClick={handleTabChange(TabIndex.Function, FunctionTypeTabs.ALL)}
             isDisabled={!moduleData?.parsedAbi.exposed_functions.length}
           >
             Function
@@ -212,7 +215,7 @@ export const ModuleDetails = () => {
                   </Flex>
                 ))}
               </Flex>
-              <ModuleInfo isVerified moduleData={moduleData} />
+              <ModuleInfo moduleData={moduleData} />
               {/* TODO History */}
               <Flex flexDirection="column" mt={6}>
                 <Heading
@@ -276,8 +279,8 @@ export const ModuleDetails = () => {
           <TabPanel p={0}>
             <ModuleFunction moduleData={moduleData} />
           </TabPanel>
+          {/* TODO TX History */}
           <TabPanel p={0}>
-            {/* TODO History */}
             <Flex flexDirection="column" mt={6}>
               <Heading
                 as="h6"

From c0c3aee9727236231effeae5b00107617a6a88bc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 13:11:34 +0700
Subject: [PATCH 090/368] fix: selected chain 404

---
 CHANGELOG.md                                  |  1 +
 .../app-provider/hooks/useNetworkChange.ts    | 23 +++++++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cbeebe81b..428408fe9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
 - [#538](https://github.com/alleslabs/celatone-frontend/pull/538) Add empty state in query and execute with json schema
diff --git a/src/lib/app-provider/hooks/useNetworkChange.ts b/src/lib/app-provider/hooks/useNetworkChange.ts
index 7e8facfb7..e3978b00c 100644
--- a/src/lib/app-provider/hooks/useNetworkChange.ts
+++ b/src/lib/app-provider/hooks/useNetworkChange.ts
@@ -14,11 +14,8 @@ export const useNetworkChange = (
   const navigate = useInternalNavigate();
 
   useEffect(() => {
-    const networkRoute = router.query.network
-      ? getFirstQueryParam(router.query.network, DEFAULT_SUPPORTED_CHAIN_ID)
-      : router.asPath.split("/")[1];
-
-    if (router.isReady || router.pathname === "/404") {
+    if (router.isReady) {
+      const networkRoute = getFirstQueryParam(router.query.network);
       // Redirect to default chain if there is no network query provided
       if (!router.query.network) {
         navigate({
@@ -31,13 +28,25 @@ export const useNetworkChange = (
         !SUPPORTED_CHAIN_IDS.includes(networkRoute)
       ) {
         navigate({
-          pathname: "/",
-          replace: true,
+          pathname: "/404",
+          query: {
+            network: DEFAULT_SUPPORTED_CHAIN_ID,
+          },
         });
       } else if (networkRoute !== networkRef.current) {
         networkRef.current = networkRoute;
         handleOnChainIdChange(networkRoute);
       }
+    } else if (router.pathname === "/404") {
+      const networkRoute = router.asPath.split("/")[1];
+      navigate({
+        pathname: "/404",
+        query: {
+          network: SUPPORTED_CHAIN_IDS.includes(networkRoute)
+            ? networkRoute
+            : DEFAULT_SUPPORTED_CHAIN_ID,
+        },
+      });
     }
   }, [
     handleOnChainIdChange,

From 9b81646fb2895229a1976560a3c7f128be318b9c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 13:23:16 +0700
Subject: [PATCH 091/368] fix: add comment

---
 src/lib/app-provider/hooks/useNetworkChange.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/app-provider/hooks/useNetworkChange.ts b/src/lib/app-provider/hooks/useNetworkChange.ts
index e3978b00c..0600fbacf 100644
--- a/src/lib/app-provider/hooks/useNetworkChange.ts
+++ b/src/lib/app-provider/hooks/useNetworkChange.ts
@@ -27,6 +27,7 @@ export const useNetworkChange = (
         router.pathname === "/[network]" &&
         !SUPPORTED_CHAIN_IDS.includes(networkRoute)
       ) {
+        // Redirect to default network 404 if `/invalid_network`
         navigate({
           pathname: "/404",
           query: {
@@ -39,6 +40,8 @@ export const useNetworkChange = (
       }
     } else if (router.pathname === "/404") {
       const networkRoute = router.asPath.split("/")[1];
+      // Redirect to the current network 404 if `/current_network/random_path`
+      // If the current network is also invalid, redicrect to default network 404
       navigate({
         pathname: "/404",
         query: {

From 15a4ae82b0c672c857f6b44000594651ac1742f3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 13:29:37 +0700
Subject: [PATCH 092/368] fix: handle refetch

---
 CHANGELOG.md                        | 1 +
 src/lib/pages/interaction/index.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7eebc98cb..e3316af40 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -116,6 +116,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#547](https://github.com/alleslabs/celatone-frontend/pull/547) Fix refetch module when clicking change module button
 - [#543](https://github.com/alleslabs/celatone-frontend/pull/543) Fix Initia testnet chain config
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 2738965c7..678006cf6 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -38,11 +38,16 @@ export const Interaction = () => {
     []
   );
 
-  const { data: verificationData } = useVerifyModule({
+  const { data: verificationData, refetch } = useVerifyModule({
     address: module?.address as Option<HexAddr>,
     moduleName: module?.moduleName,
   });
 
+  const handleChangeModule = () => {
+    refetch();
+    onOpen();
+  };
+
   return (
     <>
       <PageContainer
@@ -91,7 +96,7 @@ export const Interaction = () => {
                 <ModuleSelectDrawerTrigger
                   triggerVariant="change-module"
                   buttonText="Change Module"
-                  onOpen={onOpen}
+                  onOpen={handleChangeModule}
                 />
                 <Button
                   variant="ghost-gray"

From 12c815fd9b8c9f7cc3768b6e8e53d98da47a136c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 13:54:13 +0700
Subject: [PATCH 093/368] fix: refetch on focus

---
 .../component/drawer/selector/SelectorInput.tsx          | 1 -
 src/lib/pages/interaction/index.tsx                      | 9 ++-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index 110da0757..d6e7f813a 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -52,7 +52,6 @@ export const ModuleSelectorInput = ({
     moduleName,
     functionName,
     options: {
-      refetchOnWindowFocus: false,
       enabled: false,
       retry: false,
       onSuccess: (data) => {
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 678006cf6..2738965c7 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -38,16 +38,11 @@ export const Interaction = () => {
     []
   );
 
-  const { data: verificationData, refetch } = useVerifyModule({
+  const { data: verificationData } = useVerifyModule({
     address: module?.address as Option<HexAddr>,
     moduleName: module?.moduleName,
   });
 
-  const handleChangeModule = () => {
-    refetch();
-    onOpen();
-  };
-
   return (
     <>
       <PageContainer
@@ -96,7 +91,7 @@ export const Interaction = () => {
                 <ModuleSelectDrawerTrigger
                   triggerVariant="change-module"
                   buttonText="Change Module"
-                  onOpen={handleChangeModule}
+                  onOpen={onOpen}
                 />
                 <Button
                   variant="ghost-gray"

From 3274baf3e8dbabb0851d6f9b5ed21237069534ce Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 14:07:27 +0700
Subject: [PATCH 094/368] fix: revert

---
 .../interaction/component/drawer/selector/SelectorInput.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index d6e7f813a..b7aa97dbd 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -52,7 +52,9 @@ export const ModuleSelectorInput = ({
     moduleName,
     functionName,
     options: {
+      refetchOnWindowFocus: false,
       enabled: false,
+      refetchOnMount: true,
       retry: false,
       onSuccess: (data) => {
         setError("");

From 4ff3d43ddc7398a1a80b357a6e9577cb9bd365c8 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 8 Sep 2023 16:30:55 +0700
Subject: [PATCH 095/368] fix(components): refactor contract detail page and
 add contract states

---
 CHANGELOG.md                                  |   1 +
 src/lib/components/PublicDescription.tsx      |   1 -
 .../components/CommandSection.tsx             |   8 +-
 .../components/ContractTop.tsx                |   1 +
 .../components/TokenSection.tsx               |  62 +++---
 .../contract-description/UserContractDesc.tsx |   1 -
 .../components/contract-description/index.tsx |   7 +-
 .../contract-state/ContractStates.tsx         |  70 +++++++
 .../components/contract-state/StateCard.tsx   |  18 ++
 .../components/contract-state/StateLoader.tsx |  47 +++++
 src/lib/pages/contract-details/index.tsx      | 183 +++++++++++++++++-
 .../[tab].tsx}                                |   0
 .../contracts/[contractAddress]/index.tsx}    |   0
 .../contracts/[contractAddress]/[tab].tsx     |   3 +
 .../contracts/[contractAddress]/index.tsx     |   3 +
 15 files changed, 373 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/pages/contract-details/components/contract-state/ContractStates.tsx
 create mode 100644 src/lib/pages/contract-details/components/contract-state/StateCard.tsx
 create mode 100644 src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
 rename src/pages/[network]/contracts/{[contractAddress].tsx => [contractAddress]/[tab].tsx} (100%)
 rename src/pages/{contracts/[contractAddress].tsx => [network]/contracts/[contractAddress]/index.tsx} (100%)
 create mode 100644 src/pages/contracts/[contractAddress]/[tab].tsx
 create mode 100644 src/pages/contracts/[contractAddress]/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cbeebe81b..3ace284ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Refactor contract detail page and add contract states
 - [#487](https://github.com/alleslabs/celatone-frontend/pull/487) Support Station Extension
 - [#508](https://github.com/alleslabs/celatone-frontend/pull/508) Add auto focus, enter key listener on contract selection
 - [#492](https://github.com/alleslabs/celatone-frontend/pull/492) Add jsonschema actions on contract detail page
diff --git a/src/lib/components/PublicDescription.tsx b/src/lib/components/PublicDescription.tsx
index b8f831acb..7ed6abfdc 100644
--- a/src/lib/components/PublicDescription.tsx
+++ b/src/lib/components/PublicDescription.tsx
@@ -34,7 +34,6 @@ export const PublicDescription = ({
       maxW="100%"
       borderRadius="8px"
       p={4}
-      mt={{ base: 4, md: 6 }}
       flex="1"
     >
       <Flex align="center" gap={1} h="32px">
diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index 34a9907f8..b9772c00d 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -90,7 +90,13 @@ export const CommandSection = observer(
     };
 
     return (
-      <Flex direction="column" gap={6}>
+      <Flex
+        direction="column"
+        gap={6}
+        pb={{ base: 0, md: 8 }}
+        borderBottom={{ base: "0px", md: "1px solid" }}
+        borderBottomColor={{ base: "transparent", md: "gray.700" }}
+      >
         <Flex gap={4} alignItems="center">
           <Heading as="h6" variant="h6" minW="fit-content">
             Available command shortcuts
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 95c055bbb..b4acae030 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -134,6 +134,7 @@ export const ContractTop = ({
             gap={1}
             align={{ base: "start", md: "center" }}
             maxW={{ md: "670px" }}
+            minH="36px"
           >
             <CustomIcon
               name="contract-address"
diff --git a/src/lib/pages/contract-details/components/TokenSection.tsx b/src/lib/pages/contract-details/components/TokenSection.tsx
index 918fa12c7..1068b7907 100644
--- a/src/lib/pages/contract-details/components/TokenSection.tsx
+++ b/src/lib/pages/contract-details/components/TokenSection.tsx
@@ -1,8 +1,8 @@
-import { Flex, Grid, Text } from "@chakra-ui/react";
-import { useMemo, useState } from "react";
+import { Button, Flex, Grid, Heading, Text } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 import type { ContractData } from "../types";
-import { ShowMoreButton } from "lib/components/button";
+import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { UnsupportedTokensModal } from "lib/components/modal";
 import { TokenCard } from "lib/components/TokenCard";
@@ -13,15 +13,17 @@ interface TokenSectionProps {
   balances: ContractData["balances"];
   isBalancesLoading: ContractData["isBalancesLoading"];
   amptrackPage?: string;
+  isDetailPage?: boolean;
+  onViewMore?: () => void;
 }
 export const TokenSection = ({
   contractAddress,
   balances,
   isBalancesLoading,
   amptrackPage,
+  onViewMore,
+  isDetailPage = false,
 }: TokenSectionProps) => {
-  const [showMore, setShowMore] = useState(false);
-
   const unsupportedAssets = useMemo(
     () => balances?.filter((balance) => !balance.assetInfo) ?? [],
     [balances]
@@ -47,31 +49,47 @@ export const TokenSection = ({
           gridGap={4}
           gridTemplateColumns={{ base: "1fr", md: "repeat(4, 1fr)" }}
         >
-          {supportedAssets.map((balance, index) => {
-            if (!showMore && index >= 4) {
-              return null;
-            }
-            return <TokenCard key={balance.balance.id} userBalance={balance} />;
-          })}
+          {supportedAssets
+            .slice(0, isDetailPage ? undefined : 4)
+            .map((balance) => {
+              return (
+                <TokenCard key={balance.balance.id} userBalance={balance} />
+              );
+            })}
         </Grid>
-        {supportedAssets.length > 4 && (
-          <ShowMoreButton
-            showMoreText="View All Assets"
-            showLessText="View Less Assets"
-            toggleShowMore={showMore}
-            setToggleShowMore={() => setShowMore(!showMore)}
-          />
+
+        {supportedAssets.length > 4 && onViewMore && (
+          <Button
+            p={0}
+            mt={1}
+            color="secondary.main"
+            variant="none"
+            w="fit-content"
+            onClick={() => {
+              onViewMore();
+            }}
+          >
+            <Text variant="body3" color="secondary.main" fontWeight={700}>
+              View All Assets
+            </Text>
+            <CustomIcon name="chevron-right" boxSize={3} />
+          </Button>
         )}
       </>
     );
   };
 
   return (
-    <>
+    <Flex
+      flexDirection="column"
+      pb={{ base: 2, md: 8 }}
+      borderBottom={onViewMore ? { base: "none", md: "1px solid" } : "none"}
+      borderBottomColor={{ base: "transparent", md: "gray.700" }}
+    >
       <Flex justify="space-between" align="center" mb={{ base: 2, md: 1 }}>
-        <Text variant="body2" color="text.dark" fontWeight={500}>
+        <Heading as="h6" variant="h6" color="text.main" fontWeight={500}>
           Assets
-        </Text>
+        </Heading>
         <UnsupportedTokensModal
           unsupportedAssets={unsupportedAssets}
           address={contractAddress as ContractAddr}
@@ -79,6 +97,6 @@ export const TokenSection = ({
         />
       </Flex>
       {renderContext()}
-    </>
+    </Flex>
   );
 };
diff --git a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
index fe71cd04f..3b0fbb357 100644
--- a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
@@ -69,7 +69,6 @@ export const UserContractDesc = ({
       maxW="100%"
       borderRadius="8px"
       p={4}
-      my={{ base: 0, md: 6 }}
       flex="1"
       role="group"
     >
diff --git a/src/lib/pages/contract-details/components/contract-description/index.tsx b/src/lib/pages/contract-details/components/contract-description/index.tsx
index 104e97ad9..948fec9c4 100644
--- a/src/lib/pages/contract-details/components/contract-description/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/index.tsx
@@ -21,10 +21,13 @@ export const ContractDesc = ({
 
   return (
     <Flex
-      gap={{ base: 4, md: 6 }}
       direction={{ base: "column", md: "row" }}
-      mt={{ base: 4, md: 0 }}
+      mt={{ base: 0, md: 0 }}
       mb={4}
+      gap={{ base: 4, md: 6 }}
+      pb={{ base: 0, md: 8 }}
+      borderBottom={{ base: "0px", md: "1px solid" }}
+      borderBottomColor={{ base: "transparent", md: "gray.700" }}
     >
       {publicProject.publicInfo?.description && (
         <PublicDescription
diff --git a/src/lib/pages/contract-details/components/contract-state/ContractStates.tsx b/src/lib/pages/contract-details/components/contract-state/ContractStates.tsx
new file mode 100644
index 000000000..ca7dba7aa
--- /dev/null
+++ b/src/lib/pages/contract-details/components/contract-state/ContractStates.tsx
@@ -0,0 +1,70 @@
+import { Button, ButtonGroup, Flex, Heading } from "@chakra-ui/react";
+
+import { StateCard } from "./StateCard";
+import { StateLoader } from "./StateLoader";
+
+const namespaces = [
+  "test1",
+  "test2",
+  "test3",
+  "test4",
+  "test5",
+  "test6",
+  "test7",
+  "test8",
+  "test9",
+  "test10",
+  "test11",
+  "test12",
+  "test13",
+  "test14",
+  "test15",
+  "test16",
+  "test17",
+  "test18",
+  "test19",
+  "test20",
+];
+export const ContractStates = () => {
+  return (
+    <Flex direction="column" gap={8}>
+      <Flex direction="column" gap={6}>
+        <Heading as="h6" variant="h6">
+          Contract States
+        </Heading>
+        <StateLoader isLoading isCompleted={false} />
+        <StateLoader isLoading={false} isCompleted={false} />
+        <StateLoader isLoading={false} isCompleted />
+      </Flex>
+      {/* Namespace filter */}
+      <ButtonGroup
+        flexWrap="wrap"
+        rowGap={2}
+        sx={{
+          "> button": {
+            marginInlineStart: "0 !important",
+            marginInlineEnd: "1",
+          },
+        }}
+      >
+        {namespaces.map((item) => (
+          <Button
+            variant="command-button"
+            fontSize="14px"
+            height="28px"
+            borderRadius="16px"
+            fontWeight={400}
+          >
+            {item}
+          </Button>
+        ))}
+      </ButtonGroup>
+      {/* Searchbar */}
+      search in put here
+      {/* States */}
+      <Flex direction="column" gap={4}>
+        <StateCard /> <StateCard /> <StateCard /> <StateCard />
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/contract-details/components/contract-state/StateCard.tsx b/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
new file mode 100644
index 000000000..6fd68da3a
--- /dev/null
+++ b/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
@@ -0,0 +1,18 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+export const StateCard = () => {
+  return (
+    <Flex borderRadius={8} bgColor="gray.900" p={3}>
+      <Flex w="15%">
+        <Text variant="body2" color="text.main">
+          lorem
+        </Text>
+      </Flex>
+      <Flex w="85%">
+        <Text variant="body2" color="text.dark">
+          lorem
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx b/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
new file mode 100644
index 000000000..02bb6542a
--- /dev/null
+++ b/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
@@ -0,0 +1,47 @@
+import { Button, Flex, Spinner, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+interface StateLoaderProps {
+  isLoading: boolean;
+  isCompleted: boolean;
+}
+export const StateLoader = ({ isLoading, isCompleted }: StateLoaderProps) => {
+  return (
+    <Flex
+      borderRadius={8}
+      bgColor="gray.900"
+      p={3}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      {isLoading ? (
+        <Flex gap={4} alignItems="center">
+          <Spinner size="sm" />
+          <Text variant="body2" fontWeight={600} color="text.dark">
+            Loading xx states...
+          </Text>
+          <Button size="sm" variant="outline-primary" disabled>
+            Load More
+          </Button>
+        </Flex>
+      ) : (
+        <Flex gap={4} alignItems="center">
+          <CustomIcon name="check" color="success.main" />
+          <Text variant="body2" fontWeight={600} color="text.dark">
+            {isCompleted
+              ? "All States Loaded (XXX States)"
+              : "XXX States Loaded"}
+          </Text>
+          <Button size="sm" variant="outline-primary" disabled={isCompleted}>
+            Load More
+          </Button>
+        </Flex>
+      )}
+      <Button size="sm" variant="outline-primary" disabled={isLoading}>
+        <CustomIcon name="download" />
+        Download States
+      </Button>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 7850c524a..1be152f82 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -8,10 +8,15 @@ import {
 } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
-import { useValidateAddress, useWasmConfig, useMobile } from "lib/app-provider";
+import {
+  useValidateAddress,
+  useWasmConfig,
+  useMobile,
+  useInternalNavigate,
+} from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -23,6 +28,7 @@ import { getFirstQueryParam, jsonPrettify } from "lib/utils";
 
 import { CommandSection } from "./components/CommandSection";
 import { ContractDesc } from "./components/contract-description";
+import { ContractStates } from "./components/contract-state/ContractStates";
 import { ContractTop } from "./components/ContractTop";
 import { InstantiateInfo } from "./components/InstantiateInfo";
 import { JsonInfo } from "./components/JsonInfo";
@@ -35,6 +41,14 @@ import { TokenSection } from "./components/TokenSection";
 import { useContractData } from "./data";
 import type { ContractData } from "./types";
 
+const tableTabHeaderId = "contractDetailTab";
+
+enum TabIndex {
+  Overview = "overview",
+  Assets = "assets",
+  Txs = "txs",
+  States = "states",
+}
 interface ContractDetailsBodyProps {
   contractAddress: ContractAddr;
   contractData: ContractData;
@@ -42,7 +56,7 @@ interface ContractDetailsBodyProps {
 
 const InvalidContract = () => <InvalidState title="Contract does not exist" />;
 
-const ContractDetailsBody = observer(
+const ContractTxsTable = observer(
   ({ contractAddress, contractData }: ContractDetailsBodyProps) => {
     const tableHeaderId = "contractDetailsTableHeader";
     const { data: contractAccountId } = useAccountId(contractAddress);
@@ -54,7 +68,6 @@ const ContractDetailsBody = observer(
     } = useContractDetailsTableCounts(contractAddress, contractAccountId);
     const isMobile = useMobile();
     if (!contractData.contractDetail) return <InvalidContract />;
-
     return (
       <>
         <ContractTop contractAddress={contractAddress} {...contractData} />
@@ -70,6 +83,7 @@ const ContractDetailsBody = observer(
           codeHash={contractData.contractDetail.codeHash}
           codeId={String(contractData.contractDetail.codeId)}
         />
+
         {/* Instantiate/Contract Info Section */}
         <Flex
           my={12}
@@ -111,7 +125,7 @@ const ContractDetailsBody = observer(
         </Flex>
         {/* History Table section */}
         <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
-          History
+          Transaction & History
         </Heading>
         <Tabs isLazy lazyBehavior="keepMounted">
           <TabList
@@ -162,6 +176,165 @@ const ContractDetailsBody = observer(
   }
 );
 
+const ContractDetailsBody = observer(
+  ({ contractAddress, contractData }: ContractDetailsBodyProps) => {
+    const tableHeaderId = "contractDetailsTableHeader";
+    const isMobile = useMobile();
+    if (!contractData.contractDetail) return <InvalidContract />;
+    const router = useRouter();
+    const tab = getFirstQueryParam(router.query.tab) as TabIndex;
+    const navigate = useInternalNavigate();
+    const handleTabChange = useCallback(
+      (nextTab: TabIndex) => () => {
+        if (nextTab === tab) return;
+        navigate({
+          pathname: "/contracts/[contractAddress]/[tab]",
+          query: {
+            contractAddress,
+            tab: nextTab,
+          },
+          options: {
+            shallow: true,
+          },
+        });
+      },
+      [contractAddress, tab, navigate]
+    );
+    useEffect(() => {
+      if (router.isReady && (!tab || !Object.values(TabIndex).includes(tab))) {
+        navigate({
+          replace: true,
+          pathname: "/contracts/[contractAddress]/[tab]",
+          query: {
+            contractAddress,
+            tab: TabIndex.Overview,
+          },
+          options: {
+            shallow: true,
+          },
+        });
+      }
+    }, [router.isReady, tab, contractAddress, navigate]);
+
+    return (
+      <>
+        <ContractTop contractAddress={contractAddress} {...contractData} />
+        <Tabs>
+          <TabList
+            mt={6}
+            mb={8}
+            borderBottom="1px solid"
+            borderColor="gray.700"
+            overflowX="scroll"
+            id={tableTabHeaderId}
+          >
+            <CustomTab onClick={handleTabChange(TabIndex.Overview)}>
+              Overview
+            </CustomTab>
+            <CustomTab onClick={handleTabChange(TabIndex.Assets)}>
+              Assets
+            </CustomTab>
+            <CustomTab onClick={handleTabChange(TabIndex.Txs)}>
+              Transaction & History
+            </CustomTab>
+            <CustomTab onClick={handleTabChange(TabIndex.States)}>
+              Contract States
+            </CustomTab>
+          </TabList>
+          <TabPanels>
+            <TabPanel p={0}>
+              <Flex flexDirection="column" gap={8}>
+                {/* Contract Description Section */}
+                <ContractDesc {...contractData} />
+                {/* Tokens Section */}
+                <TokenSection
+                  contractAddress={contractAddress}
+                  {...contractData}
+                  onViewMore={handleTabChange(TabIndex.Assets)}
+                />
+                {/* Query/Execute commands section */}
+                <CommandSection
+                  contractAddress={contractAddress}
+                  codeHash={contractData.contractDetail.codeHash}
+                  codeId={contractData.contractDetail.codeId.toString()}
+                />
+                {/* Instantiate/Contract Info Section */}
+                <Heading as="h6" variant="h6" minW="fit-content">
+                  Contract Information
+                </Heading>
+                <Flex
+                  mb={12}
+                  mt={6}
+                  justify="space-between"
+                  direction={{ base: "column", md: "row" }}
+                >
+                  {/* Instantiate Info */}
+                  {isMobile && (
+                    <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
+                      Instantiate Info
+                    </Heading>
+                  )}
+                  <InstantiateInfo
+                    isLoading={
+                      contractData.isContractDetailLoading ||
+                      contractData.isContractCw2InfoLoading ||
+                      contractData.isInstantiateDetailLoading
+                    }
+                    {...contractData}
+                  />
+                  {/* Contract Info (Expand) */}
+                  <Flex
+                    direction="column"
+                    flex={0.8}
+                    gap={4}
+                    mt={{ base: 12, md: 0 }}
+                  >
+                    <JsonInfo
+                      header="Contract Info"
+                      jsonString={jsonPrettify(
+                        JSON.stringify(
+                          contractData.rawContractResponse?.contract_info ?? {}
+                        )
+                      )}
+                      isLoading={contractData.isRawContractResponseLoading}
+                    />
+                    <JsonInfo
+                      header="Instantiate Message"
+                      jsonString={jsonPrettify(contractData.initMsg ?? "")}
+                      isLoading={contractData.isInstantiateDetailLoading}
+                      defaultExpand
+                    />
+                  </Flex>
+                </Flex>
+                <ContractTxsTable
+                  contractAddress={contractAddress}
+                  contractData={contractData}
+                />
+              </Flex>
+            </TabPanel>
+            <TabPanel p={0}>
+              <TokenSection
+                contractAddress={contractAddress}
+                isDetailPage
+                {...contractData}
+              />
+            </TabPanel>
+            <TabPanel p={0}>
+              <ContractTxsTable
+                contractAddress={contractAddress}
+                contractData={contractData}
+              />
+            </TabPanel>
+            <TabPanel p={0}>
+              <ContractStates />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </>
+    );
+  }
+);
+
 const ContractDetails = observer(() => {
   useWasmConfig({ shouldRedirect: true });
   const { track } = useTrack();
diff --git a/src/pages/[network]/contracts/[contractAddress].tsx b/src/pages/[network]/contracts/[contractAddress]/[tab].tsx
similarity index 100%
rename from src/pages/[network]/contracts/[contractAddress].tsx
rename to src/pages/[network]/contracts/[contractAddress]/[tab].tsx
diff --git a/src/pages/contracts/[contractAddress].tsx b/src/pages/[network]/contracts/[contractAddress]/index.tsx
similarity index 100%
rename from src/pages/contracts/[contractAddress].tsx
rename to src/pages/[network]/contracts/[contractAddress]/index.tsx
diff --git a/src/pages/contracts/[contractAddress]/[tab].tsx b/src/pages/contracts/[contractAddress]/[tab].tsx
new file mode 100644
index 000000000..5776fddfd
--- /dev/null
+++ b/src/pages/contracts/[contractAddress]/[tab].tsx
@@ -0,0 +1,3 @@
+import ContractDetails from "lib/pages/contract-details";
+
+export default ContractDetails;
diff --git a/src/pages/contracts/[contractAddress]/index.tsx b/src/pages/contracts/[contractAddress]/index.tsx
new file mode 100644
index 000000000..5776fddfd
--- /dev/null
+++ b/src/pages/contracts/[contractAddress]/index.tsx
@@ -0,0 +1,3 @@
+import ContractDetails from "lib/pages/contract-details";
+
+export default ContractDetails;

From 129a97c97c3d651c61d334b0308ec25485785aa8 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 16:13:52 +0700
Subject: [PATCH 096/368] fix: sort module

---
 CHANGELOG.md                                  |  2 +-
 src/lib/app-fns/tx/submitProposal.tsx         |  6 ++--
 src/lib/app-provider/contexts/nav.tsx         |  3 +-
 .../app-provider/hooks/usePreviousPathname.ts |  4 ++-
 src/lib/app-provider/tx/submitProposal.ts     |  6 ++--
 src/lib/components/ValidatorBadge.tsx         |  4 +--
 .../abi/args-form/field/ArgFieldWidget.tsx    |  6 ++--
 .../components/abi/args-form/field/index.tsx  |  9 +++--
 .../components/abi/args-form/field/utils.ts   |  9 ++---
 src/lib/components/abi/args-form/index.tsx    |  4 +--
 src/lib/components/forms/FormStatus.tsx       |  3 +-
 .../components/json-schema/UploadTemplate.tsx | 10 ++++--
 .../json-schema/view/ViewSchemaPanel.tsx      |  4 +--
 src/lib/components/json/JsonInput.tsx         |  3 +-
 src/lib/components/upload/UploadCard.tsx      |  4 +--
 src/lib/layout/Searchbar.tsx                  |  4 +--
 src/lib/model/account.ts                      |  4 +--
 src/lib/model/contract.ts                     |  3 +-
 .../components/tables/txs/TxsTable.tsx        |  4 +--
 .../components/json-schema/SchemaPanel.tsx    |  4 +--
 .../components/tables/TxsTable.tsx            |  4 +--
 src/lib/pages/contract-details/types.ts       |  3 +-
 .../component/drawer/selector/index.tsx       | 36 ++++++++-----------
 .../interaction/component/main/panel.tsx      |  3 +-
 .../hooks/useValidateModuleInput.ts           |  3 +-
 src/lib/pages/interaction/index.tsx           |  1 -
 src/lib/pages/proposal/utils/getAlert.tsx     |  4 +--
 .../tx-message/msg-receipts/renderUtils.tsx   |  3 +-
 src/lib/providers/tx-broadcast.tsx            | 10 +++---
 src/lib/services/accountService.ts            |  8 +++--
 src/lib/services/blockService.ts              |  5 +--
 src/lib/services/codeService.ts               |  8 ++---
 src/lib/services/contractService.ts           |  3 +-
 src/lib/services/expression/txExpression.ts   |  4 +--
 src/lib/services/module.ts                    |  5 +--
 src/lib/services/moduleService.ts             |  4 ++-
 src/lib/services/txService.ts                 |  5 +--
 src/lib/services/validatorService.ts          |  9 +++--
 src/lib/stores/schema.ts                      | 12 +++----
 src/lib/types/abi.ts                          |  4 +--
 src/lib/types/block.ts                        |  8 ++---
 src/lib/types/code.ts                         | 10 +++---
 src/lib/types/common.ts                       |  2 ++
 src/lib/types/contract.ts                     |  6 ++--
 src/lib/types/pool.ts                         | 26 ++++++++------
 src/lib/types/projects.ts                     |  5 +--
 src/lib/types/proposal.ts                     |  4 +--
 src/lib/types/tx/model.ts                     |  4 ++-
 src/lib/utils/abi.ts                          | 16 ++++-----
 src/lib/utils/cw2.ts                          |  6 ++--
 src/lib/utils/mergeRefs.ts                    |  4 ++-
 src/lib/utils/option.ts                       |  7 ++--
 src/lib/utils/tx/types.ts                     |  3 +-
 53 files changed, 182 insertions(+), 149 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2070edef..b4ceed83c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -117,7 +117,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#547](https://github.com/alleslabs/celatone-frontend/pull/547) Fix refetch module when clicking change module button
+- [#547](https://github.com/alleslabs/celatone-frontend/pull/547) Fix form null and sort modules when submit an address
 - [#543](https://github.com/alleslabs/celatone-frontend/pull/543) Fix Initia testnet chain config
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
index 1b134e4d9..f04e73560 100644
--- a/src/lib/app-fns/tx/submitProposal.tsx
+++ b/src/lib/app-fns/tx/submitProposal.tsx
@@ -8,7 +8,7 @@ import type { Observable } from "rxjs";
 import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
-import type { HumanAddr, TxResultRendering } from "lib/types";
+import type { HumanAddr, Nullable, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { findAttr, formatUFee } from "lib/utils";
 
@@ -20,7 +20,7 @@ interface SubmitWhitelistProposalTxParams {
   fee: StdFee;
   messages: EncodeObject[];
   whitelistNumber: number;
-  amountToVote: string | null;
+  amountToVote: Nullable<string>;
   catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
@@ -109,7 +109,7 @@ interface SubmitStoreCodeProposalTxParams {
   chainName: string;
   wasmFileName: string;
   messages: EncodeObject[];
-  amountToVote: string | null;
+  amountToVote: Nullable<string>;
   catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
diff --git a/src/lib/app-provider/contexts/nav.tsx b/src/lib/app-provider/contexts/nav.tsx
index 1a42305f4..260c34744 100644
--- a/src/lib/app-provider/contexts/nav.tsx
+++ b/src/lib/app-provider/contexts/nav.tsx
@@ -4,10 +4,11 @@ import { useContext, createContext, useMemo } from "react";
 import { usePreviousPathname } from "../hooks/usePreviousPathname";
 import { StorageKeys } from "lib/data";
 import { useLocalStorage } from "lib/hooks/useLocalStorage";
+import type { Nullable } from "lib/types";
 
 interface NavContextInterface {
   isExpand: boolean;
-  prevPathname: string | null;
+  prevPathname: Nullable<string>;
   setIsExpand: Dispatch<SetStateAction<boolean>>;
 }
 const NavContext = createContext<NavContextInterface>({
diff --git a/src/lib/app-provider/hooks/usePreviousPathname.ts b/src/lib/app-provider/hooks/usePreviousPathname.ts
index 7d15ccaf5..da9819492 100644
--- a/src/lib/app-provider/hooks/usePreviousPathname.ts
+++ b/src/lib/app-provider/hooks/usePreviousPathname.ts
@@ -1,10 +1,12 @@
 import { useRouter } from "next/router";
 import { useEffect, useRef } from "react";
 
+import type { Nullable } from "lib/types";
+
 export const usePreviousPathname = () => {
   const { pathname } = useRouter();
 
-  const ref = useRef<string | null>(null);
+  const ref = useRef<Nullable<string>>(null);
 
   useEffect(() => {
     ref.current = pathname;
diff --git a/src/lib/app-provider/tx/submitProposal.ts b/src/lib/app-provider/tx/submitProposal.ts
index 7c771b6c2..8a2258e7c 100644
--- a/src/lib/app-provider/tx/submitProposal.ts
+++ b/src/lib/app-provider/tx/submitProposal.ts
@@ -8,7 +8,7 @@ import {
   submitStoreCodeProposalTx,
   submitWhitelistProposalTx,
 } from "lib/app-fns/tx/submitProposal";
-import type { HumanAddr } from "lib/types";
+import type { HumanAddr, Nullable } from "lib/types";
 
 import { useCatchTxError } from "./catchTxError";
 
@@ -16,7 +16,7 @@ export interface SubmitWhitelistProposalStreamParams {
   estimatedFee?: StdFee;
   messages: EncodeObject[];
   whitelistNumber: number;
-  amountToVote: string | null;
+  amountToVote: Nullable<string>;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
 }
@@ -61,7 +61,7 @@ export const useSubmitWhitelistProposalTx = () => {
 interface SubmitStoreCodeProposalStreamParams {
   wasmFileName: string;
   messages: EncodeObject[];
-  amountToVote: string | null;
+  amountToVote: Nullable<string>;
   estimatedFee?: StdFee;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx
index 4e6857560..9103fdc65 100644
--- a/src/lib/components/ValidatorBadge.tsx
+++ b/src/lib/components/ValidatorBadge.tsx
@@ -6,10 +6,10 @@ import { useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
 import { useValidatorImage } from "lib/services/validatorService";
-import type { ValidatorInfo } from "lib/types";
+import type { Nullable, ValidatorInfo } from "lib/types";
 
 interface ValidatorBadgeProps {
-  validator: ValidatorInfo | null;
+  validator: Nullable<ValidatorInfo>;
   badgeSize?: ImageProps["boxSize"];
   ampCopierSection?: string;
   maxWidth?: string;
diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index bb408745f..919883978 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -2,7 +2,7 @@ import { Input, Textarea } from "@chakra-ui/react";
 import { Select } from "chakra-react-select";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import type { Option } from "lib/types";
+import type { Nullable } from "lib/types";
 
 import { UintTypes } from "./utils";
 
@@ -19,7 +19,7 @@ const boolOptions = [
 
 interface ArgFieldWidgetProps {
   type: string;
-  value: Option<string>;
+  value: Nullable<string>;
   onChange: ControllerRenderProps["onChange"];
 }
 
@@ -36,7 +36,7 @@ export const ArgFieldWidget = ({
     return (
       <Input
         size="md"
-        placeholder={getInputPlaceholder(type, value === undefined)}
+        placeholder={getInputPlaceholder(type, value === null)}
         value={value ?? ""}
         onChange={onChange}
       />
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index ea6235772..da91a5044 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -55,7 +55,7 @@ export const ArgFieldTemplate = ({
   const isError = isTouched && !!error;
 
   const size = "md";
-  const isNull = value === undefined;
+  const isNull = value === null;
   return (
     <Box>
       <FormControl
@@ -85,8 +85,11 @@ export const ArgFieldTemplate = ({
         <Checkbox
           pt="2px"
           pl={2}
-          isChecked={value === undefined}
-          onChange={(e) => onChange(e.target.checked ? undefined : "")}
+          isChecked={isNull}
+          onChange={(e) => {
+            const newValue = e.target.checked;
+            onChange(newValue ? null : "");
+          }}
         >
           <Text variant="body3">Send as null</Text>
         </Checkbox>
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
index 6b34d2ba0..75866515f 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -21,7 +21,7 @@ const validateBool = (v: string) =>
 
 const validateAddress =
   (isValidArgAddress: (input: string) => boolean) => (v: string) =>
-    isValidArgAddress(v) ? undefined : "invalid address";
+    isValidArgAddress(v) ? undefined : "Invalid address";
 
 const validateVector = (
   v: string,
@@ -29,9 +29,6 @@ const validateVector = (
   isValidArgAddress: (input: string) => boolean
 ) => {
   const value = v.trim();
-  if (!value.startsWith("[") || !value.endsWith("]"))
-    return "Input must be ‘vector’";
-
   const [, elementType] = vectorType.split(/<(.*)>/);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -45,8 +42,8 @@ const validateVector = (
 
   let error: Option<string>;
   value.split(",").forEach((elementValue) => {
-    const res = validateElement(elementValue);
-    if (res !== undefined) error = `invalid element: ${res}`;
+    const res = validateElement(elementValue.trim());
+    if (res !== undefined) error = `Invalid element: ${res}`;
   });
 
   return error;
diff --git a/src/lib/components/abi/args-form/index.tsx b/src/lib/components/abi/args-form/index.tsx
index 0296e4ab8..17bd16b78 100644
--- a/src/lib/components/abi/args-form/index.tsx
+++ b/src/lib/components/abi/args-form/index.tsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import type { FormState } from "react-hook-form";
 import { useForm } from "react-hook-form";
 
-import type { AbiFormData, Option } from "lib/types";
+import type { AbiFormData, Nullable } from "lib/types";
 
 import { ArgFieldTemplate } from "./field";
 
@@ -33,7 +33,7 @@ export const ArgsForm = ({
     control,
     getValues,
     formState: { errors },
-  } = useForm<Record<string, Option<string>>>({
+  } = useForm<Record<string, Nullable<string>>>({
     defaultValues: initialData,
     mode: "all",
   });
diff --git a/src/lib/components/forms/FormStatus.tsx b/src/lib/components/forms/FormStatus.tsx
index 20e8c6efb..5c1bfa328 100644
--- a/src/lib/components/forms/FormStatus.tsx
+++ b/src/lib/components/forms/FormStatus.tsx
@@ -1,12 +1,13 @@
 import { Spinner, Text } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
+import type { Nullable } from "lib/types";
 
 export type ResponseState = "init" | "loading" | "success" | "error";
 
 export interface FormStatus {
   state: ResponseState;
-  message?: string | null;
+  message?: Nullable<string>;
   messageColor?: string;
 }
 
diff --git a/src/lib/components/json-schema/UploadTemplate.tsx b/src/lib/components/json-schema/UploadTemplate.tsx
index c0f8aff62..8941172b9 100644
--- a/src/lib/components/json-schema/UploadTemplate.tsx
+++ b/src/lib/components/json-schema/UploadTemplate.tsx
@@ -18,6 +18,7 @@ import { TextInput } from "lib/components/forms";
 import JsonInput from "lib/components/json/JsonInput";
 import { UploadCard } from "lib/components/upload/UploadCard";
 import { useSchemaStore } from "lib/providers/store";
+import type { Nullable } from "lib/types";
 import { jsonValidate } from "lib/utils";
 
 enum Method {
@@ -26,7 +27,10 @@ enum Method {
   FILL_MANUALLY = "fill-manually",
 }
 
-type JsonState = Record<Method, { schemaString: string; error: string | null }>;
+type JsonState = Record<
+  Method,
+  { schemaString: string; error: Nullable<string> }
+>;
 
 enum ActionType {
   SET_SCHEMA = "set-schema",
@@ -38,7 +42,7 @@ type Action = {
   type: ActionType;
   method: Method;
   schemaString?: string;
-  error?: string | null;
+  error?: Nullable<string>;
 };
 
 const initialJsonState: JsonState = {
@@ -68,7 +72,7 @@ const reducer = (state: JsonState, action: Action): JsonState => {
   }
 };
 
-const validateSchema = (schemaString: string): string | null => {
+const validateSchema = (schemaString: string): Nullable<string> => {
   return (
     jsonValidate(schemaString) ??
     ("instantiate" in JSON.parse(schemaString)
diff --git a/src/lib/components/json-schema/view/ViewSchemaPanel.tsx b/src/lib/components/json-schema/view/ViewSchemaPanel.tsx
index a9395df4f..adee4695a 100644
--- a/src/lib/components/json-schema/view/ViewSchemaPanel.tsx
+++ b/src/lib/components/json-schema/view/ViewSchemaPanel.tsx
@@ -2,11 +2,11 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 import { jsonPrettify } from "lib/utils";
 
 interface ViewSchemaPanelProps {
-  jsonSchema: Option<object | null>;
+  jsonSchema: Option<Nullable<object>>;
   codeId: string;
 }
 
diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
index 81f04ae7d..bbe2fd3df 100644
--- a/src/lib/components/json/JsonInput.tsx
+++ b/src/lib/components/json/JsonInput.tsx
@@ -3,6 +3,7 @@ import dynamic from "next/dynamic";
 import { useState, useEffect, useMemo } from "react";
 
 import { CustomIcon } from "../icon";
+import type { Nullable } from "lib/types";
 import { jsonLineCount, jsonPrettify, jsonValidate } from "lib/utils";
 
 const JsonEditor = dynamic(() => import("./JsonEditor"), {
@@ -15,7 +16,7 @@ interface JsonInputProps {
   minLines?: number;
   maxLines?: number;
   setText: (value: string) => void;
-  validateFn?: (value: string) => string | null;
+  validateFn?: (value: string) => Nullable<string>;
 }
 
 interface JsonState {
diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx
index 6be0f2398..1d59c26bb 100644
--- a/src/lib/components/upload/UploadCard.tsx
+++ b/src/lib/components/upload/UploadCard.tsx
@@ -2,7 +2,7 @@ import { Flex, Text } from "@chakra-ui/react";
 import big from "big.js";
 
 import { CustomIcon, UploadIcon } from "lib/components/icon";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 
 type CardTheme = "primary" | "secondary";
 
@@ -13,7 +13,7 @@ interface UploadCardProps {
   deleteFile: () => void;
   theme?: CardTheme;
   status?: Status;
-  statusText?: string | null;
+  statusText?: Nullable<string>;
 }
 
 const getTheme = (theme: CardTheme) => {
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index a2c18818f..5dd5249a1 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -35,7 +35,7 @@ import type {
   SearchResultType,
 } from "lib/services/searchService";
 import { useSearchHandler } from "lib/services/searchService";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 
 const NOT_FOUND_MSG =
   "Matches not found. Please check your spelling or make sure you have selected the correct network.";
@@ -60,7 +60,7 @@ interface ResultItemProps {
 
 const getRouteOptions = (
   type: Option<SearchResultType>
-): { pathname: string; query: string } | null => {
+): Nullable<{ pathname: string; query: string }> => {
   switch (type) {
     case "Wallet Address":
       return {
diff --git a/src/lib/model/account.ts b/src/lib/model/account.ts
index d64554087..b90ae3320 100644
--- a/src/lib/model/account.ts
+++ b/src/lib/model/account.ts
@@ -8,7 +8,7 @@ import {
 } from "lib/services/contractService";
 import { useProposalsCountByWalletAddress } from "lib/services/proposalService";
 import { useTxsCountByAddress } from "lib/services/txService";
-import type { HumanAddr, Option } from "lib/types";
+import type { HumanAddr, Nullable, Option } from "lib/types";
 
 /**
  * @remark
@@ -16,7 +16,7 @@ import type { HumanAddr, Option } from "lib/types";
  */
 export const useAccountDetailsTableCounts = (
   walletAddress: HumanAddr,
-  accountId: Option<number | null>
+  accountId: Option<Nullable<number>>
 ) => {
   const { data: codesCount, refetch: refetchCodesCount } =
     useCodeListCountByWalletAddress(walletAddress);
diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts
index 8e19bf308..710666e29 100644
--- a/src/lib/model/contract.ts
+++ b/src/lib/model/contract.ts
@@ -17,6 +17,7 @@ import type {
   HumanAddr,
   ContractInfo,
   Option,
+  Nullable,
 } from "lib/types";
 import { formatSlugName, getCurrentDate, getDefaultDate } from "lib/utils";
 
@@ -75,7 +76,7 @@ export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
  */
 export const useContractDetailsTableCounts = (
   contractAddress: ContractAddr,
-  contractAccountId: Option<number | null>
+  contractAccountId: Option<Nullable<number>>
 ) => {
   const { data: migrationCount, refetch: refetchMigration } =
     useMigrationHistoriesCountByContractAddress(contractAddress);
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
index f57cc085d..b518d7a20 100644
--- a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
@@ -17,14 +17,14 @@ import {
   useTxsByAddressPagination,
   useTxsCountByAddress,
 } from "lib/services/txService";
-import type { Option, Transaction, TxFilters } from "lib/types";
+import type { Nullable, Option, Transaction, TxFilters } from "lib/types";
 
 import { TxsAlert } from "./TxsAlert";
 import { TxsBody } from "./TxsBody";
 import { TxsTop } from "./TxsTop";
 
 interface TxsTableProps {
-  accountId: Option<number | null>;
+  accountId: Option<Nullable<number>>;
   scrollComponentId: string;
   onViewMore?: () => void;
 }
diff --git a/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx b/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
index 58c1baac8..456331091 100644
--- a/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
+++ b/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
@@ -1,12 +1,12 @@
 import { UploadSchemaSection } from "lib/components/json-schema";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 import { jsonPrettify } from "lib/utils";
 
 interface SchemaPanelProps {
   codeId: string;
   codeHash: string;
-  schema: Option<object | null>;
+  schema: Option<Nullable<object>>;
 }
 
 export const SchemaPanel = ({ codeId, codeHash, schema }: SchemaPanelProps) =>
diff --git a/src/lib/pages/contract-details/components/tables/TxsTable.tsx b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
index cd0e48aea..08285e1c2 100644
--- a/src/lib/pages/contract-details/components/tables/TxsTable.tsx
+++ b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
@@ -9,10 +9,10 @@ import { EmptyState } from "lib/components/state";
 import { TransactionsTable } from "lib/components/table";
 import { DEFAULT_TX_FILTERS } from "lib/data";
 import { useTxsByAddressPagination } from "lib/services/txService";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 
 interface TxsTableProps {
-  contractAccountId: Option<number | null>;
+  contractAccountId: Option<Nullable<number>>;
   scrollComponentId: string;
   totalData: Option<number>;
   refetchCount: () => void;
diff --git a/src/lib/pages/contract-details/types.ts b/src/lib/pages/contract-details/types.ts
index 14af159b3..24ad5a23a 100644
--- a/src/lib/pages/contract-details/types.ts
+++ b/src/lib/pages/contract-details/types.ts
@@ -4,6 +4,7 @@ import type { CodeLocalInfo } from "lib/stores/code";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type {
   BalanceWithAssetInfo,
+  Nullable,
   Option,
   PublicDetail,
   PublicInfo,
@@ -23,7 +24,7 @@ export interface ContractData {
   isBalancesLoading: boolean;
   contractCw2Info: Option<ContractCw2Info>;
   isContractCw2InfoLoading: boolean;
-  initMsg: Option<string | null>;
+  initMsg: Option<Nullable<string>>;
   initTxHash: Option<string>;
   initProposalId: Option<number>;
   initProposalTitle: Option<string>;
diff --git a/src/lib/pages/interaction/component/drawer/selector/index.tsx b/src/lib/pages/interaction/component/drawer/selector/index.tsx
index a00dfdcb8..bdd84a1bc 100644
--- a/src/lib/pages/interaction/component/drawer/selector/index.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/index.tsx
@@ -1,5 +1,3 @@
-import { Box } from "@chakra-ui/react";
-
 import type { DisplayMode } from "../types";
 
 import { ModuleSelectorDisplay } from "./SelectorDisplay";
@@ -20,25 +18,19 @@ export const ModuleSelector = ({
   closeModal,
 }: ModuleSelectorProps) => {
   const showDisplay = mode === "display" && Boolean(selectedAddress.address);
-  return (
-    <Box
-      sx={{
-        "& .selector-display": { display: showDisplay ? "flex" : "none" },
-        "& .selector-input": { display: showDisplay ? "none" : "flex" },
-      }}
-    >
-      <ModuleSelectorDisplay
-        selectedAddress={selectedAddress}
-        setMode={setMode}
-      />
-      <ModuleSelectorInput
-        setModules={setModules}
-        closeModal={closeModal}
-        selectedAddress={selectedAddress}
-        setSelectedAddress={setSelectedAddress}
-        setMode={setMode}
-        handleModuleSelect={handleModuleSelect}
-      />
-    </Box>
+  return showDisplay ? (
+    <ModuleSelectorDisplay
+      selectedAddress={selectedAddress}
+      setMode={setMode}
+    />
+  ) : (
+    <ModuleSelectorInput
+      setModules={setModules}
+      closeModal={closeModal}
+      selectedAddress={selectedAddress}
+      setSelectedAddress={setSelectedAddress}
+      setMode={setMode}
+      handleModuleSelect={handleModuleSelect}
+    />
   );
 };
diff --git a/src/lib/pages/interaction/component/main/panel.tsx b/src/lib/pages/interaction/component/main/panel.tsx
index cb5783ff5..9bbf701db 100644
--- a/src/lib/pages/interaction/component/main/panel.tsx
+++ b/src/lib/pages/interaction/component/main/panel.tsx
@@ -104,8 +104,9 @@ export const FunctionSelectPanel = ({
     };
   }, [keyword, tab, module?.executeFunctions, module?.viewFunctions]);
 
+  // TODO: find a better way to handle height
   return (
-    <Flex direction="column" overflow="scroll">
+    <Flex direction="column" maxH="calc(100vh - 364px)" overflow="scroll">
       <InputWithIcon
         iconPosition="start"
         value={keyword}
diff --git a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
index c94bd372f..675bbd423 100644
--- a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
+++ b/src/lib/pages/interaction/hooks/useValidateModuleInput.ts
@@ -5,6 +5,7 @@ import {
   useExampleAddresses,
   useValidateAddress,
 } from "lib/app-provider";
+import type { Nullable } from "lib/types";
 import { isHexAddress, splitModule, truncate } from "lib/utils";
 
 export const useValidateModuleInput = () => {
@@ -20,7 +21,7 @@ export const useValidateModuleInput = () => {
   or function path (“${truncateExampleAddr}::module_name::function_name” or “0x123...456::module_name::function_name“)`;
 
   return useCallback(
-    (input: string): string | null => {
+    (input: string): Nullable<string> => {
       const inputArr = splitModule(input);
       // Allow only module path for now
       if (inputArr.length > 3) return errText;
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 2738965c7..5611b6843 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -48,7 +48,6 @@ export const Interaction = () => {
       <PageContainer
         overflow="hidden"
         minH="unset"
-        maxH="calc(100vh - 129px)"
         display="grid"
         gridTemplateRows="auto auto 1fr"
       >
diff --git a/src/lib/pages/proposal/utils/getAlert.tsx b/src/lib/pages/proposal/utils/getAlert.tsx
index 2fe212b52..c8e1b4939 100644
--- a/src/lib/pages/proposal/utils/getAlert.tsx
+++ b/src/lib/pages/proposal/utils/getAlert.tsx
@@ -1,13 +1,13 @@
 import big from "big.js";
 
 import { CustomIcon } from "lib/components/icon";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 import { d2Formatter } from "lib/utils";
 
 interface AlertProps {
   variant: string;
   description: string;
-  icon: JSX.Element | null;
+  icon: Nullable<JSX.Element>;
 }
 const defaultAlertProps: AlertProps = {
   variant: "",
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
index a1d9dc4cd..2194603f5 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
@@ -8,6 +8,7 @@ import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import type {
   Addr,
   AssetInfo,
+  Nullable,
   Option,
   TxReceipt,
   ValidatorAddr,
@@ -20,7 +21,7 @@ type HtmlType = "json" | "explorer";
 
 interface CommonReceiptHtmlArgs<T extends HtmlType, V> {
   type: T;
-  value: Option<V> | null;
+  value: Option<Nullable<V>>;
   linkType?: LinkType;
   fallback?: string;
 }
diff --git a/src/lib/providers/tx-broadcast.tsx b/src/lib/providers/tx-broadcast.tsx
index 9eca8e845..3126ec097 100644
--- a/src/lib/providers/tx-broadcast.tsx
+++ b/src/lib/providers/tx-broadcast.tsx
@@ -10,7 +10,8 @@ import {
 import type { Observable } from "rxjs";
 
 import { TxModal } from "lib/components/tx";
-import type { TxResultRendering } from "lib/types";
+import type { Nullable } from "lib/types";
+import { type TxResultRendering } from "lib/types";
 
 interface TxBroadcast {
   broadcast: (nextStream: Observable<TxResultRendering>) => void;
@@ -20,10 +21,9 @@ const TxBroadcastContext = createContext<TxBroadcast>({
 });
 
 export const TxBroadcastProvider = ({ children }: { children: ReactNode }) => {
-  const [stream, setStream] = useState<Observable<TxResultRendering> | null>(
-    null
-  );
-  const [result, setResult] = useState<TxResultRendering | null>(null);
+  const [stream, setStream] =
+    useState<Nullable<Observable<TxResultRendering>>>(null);
+  const [result, setResult] = useState<Nullable<TxResultRendering>>(null);
 
   const broadcast = useCallback((nextStream: Observable<TxResultRendering>) => {
     setStream(nextStream);
diff --git a/src/lib/services/accountService.ts b/src/lib/services/accountService.ts
index e63334b87..66fa7e702 100644
--- a/src/lib/services/accountService.ts
+++ b/src/lib/services/accountService.ts
@@ -8,7 +8,7 @@ import {
   CELATONE_QUERY_KEYS,
 } from "lib/app-provider";
 import { getAccountIdByAddressQueryDocument } from "lib/query";
-import type { Addr, Balance, Option } from "lib/types";
+import type { Addr, Balance, Nullable, Option } from "lib/types";
 
 import { getAccountBalanceInfo } from "./account";
 
@@ -26,7 +26,7 @@ export const useAccountBalances = (
 
 export const useAccountId = (
   walletAddress: Option<Addr>
-): UseQueryResult<number | null> => {
+): UseQueryResult<Nullable<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = useCallback(async () => {
@@ -34,7 +34,9 @@ export const useAccountId = (
       throw new Error("Error fetching account id: failed to retrieve address.");
     return indexerGraphClient
       .request(getAccountIdByAddressQueryDocument, { address: walletAddress })
-      .then<number | null>(({ accounts_by_pk }) => accounts_by_pk?.id ?? null);
+      .then<Nullable<number>>(
+        ({ accounts_by_pk }) => accounts_by_pk?.id ?? null
+      );
   }, [indexerGraphClient, walletAddress]);
 
   return useQuery(
diff --git a/src/lib/services/blockService.ts b/src/lib/services/blockService.ts
index 9b4d70661..4660ec79e 100644
--- a/src/lib/services/blockService.ts
+++ b/src/lib/services/blockService.ts
@@ -14,6 +14,7 @@ import type {
   BlockInfo,
   BlockTimeInfo,
   LatestBlock,
+  Nullable,
   ValidatorAddr,
 } from "lib/types";
 import { isBlock, parseDate, parseDateOpt, parseTxHash } from "lib/utils";
@@ -80,7 +81,7 @@ export const useBlockCountQuery = (): UseQueryResult<number> => {
 
 export const useBlockInfoQuery = (
   height: string
-): UseQueryResult<BlockDetails | null> => {
+): UseQueryResult<Nullable<BlockDetails>> => {
   const { currentChainId } = useCelatoneApp();
   const { indexerGraphClient } = useCelatoneApp();
 
@@ -90,7 +91,7 @@ export const useBlockInfoQuery = (
         .request(getBlockDetailsByHeightQueryDocument, {
           height: Number(height),
         })
-        .then<BlockDetails | null>(({ blocks_by_pk }) =>
+        .then<Nullable<BlockDetails>>(({ blocks_by_pk }) =>
           blocks_by_pk
             ? {
                 network: currentChainId,
diff --git a/src/lib/services/codeService.ts b/src/lib/services/codeService.ts
index 255800d4a..923ff80ac 100644
--- a/src/lib/services/codeService.ts
+++ b/src/lib/services/codeService.ts
@@ -26,6 +26,7 @@ import type {
   PermissionAddresses,
   Addr,
   HumanAddr,
+  Nullable,
 } from "lib/types";
 import { isCodeId, parseDateOpt, parseTxHashOpt } from "lib/utils";
 
@@ -141,10 +142,9 @@ interface CodeDataByCodeIdParams {
 export const useCodeDataByCodeId = ({
   codeId,
   enabled = true,
-}: CodeDataByCodeIdParams): UseQueryResult<Omit<
-  CodeData,
-  "chainId"
-> | null> => {
+}: CodeDataByCodeIdParams): UseQueryResult<
+  Nullable<Omit<CodeData, "chainId">>
+> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = useCallback(async () => {
diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts
index 017b6a1a8..4baab1faf 100644
--- a/src/lib/services/contractService.ts
+++ b/src/lib/services/contractService.ts
@@ -34,6 +34,7 @@ import type {
   Dict,
   Addr,
   ContractInfo,
+  Nullable,
 } from "lib/types";
 import { parseDate, parseTxHashOpt, parseDateOpt } from "lib/utils";
 
@@ -48,7 +49,7 @@ export interface ContractDetail extends ContractLocalInfo {
 interface InstantiateDetail {
   createdHeight: Option<number>;
   createdTime: Option<Date>;
-  initMsg: Option<string | null>;
+  initMsg: Option<Nullable<string>>;
   initTxHash: Option<string>;
   initProposalId: Option<number>;
   initProposalTitle: Option<string>;
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index c8b567aa8..cede8a9cb 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import type { Option, PoolTxFilter, TxFilters } from "lib/types";
+import type { Nullable, Option, PoolTxFilter, TxFilters } from "lib/types";
 import { isTxHash } from "lib/utils";
 
 const actions = {
@@ -40,7 +40,7 @@ export const useTxExpression = ({
   filters,
   isSigner,
 }: {
-  accountId: Option<number | null>;
+  accountId: Option<Nullable<number>>;
   search: string;
   filters: TxFilters;
   isSigner: Option<boolean>;
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index de0936714..a88a83870 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -10,6 +10,7 @@ import type {
   ResponseABI,
   ExposedFunction,
   AbiFormData,
+  Nullable,
 } from "lib/types";
 import {
   libDecode,
@@ -28,7 +29,7 @@ export const getAccountModules = async (
 ): Promise<InternalModule[]> => {
   const result: ResponseModule[] = [];
 
-  const fetchFn = async (paginationKey: string | null) => {
+  const fetchFn = async (paginationKey: Nullable<string>) => {
     const { data } = await axios.get<ResponseModules>(
       `${baseEndpoint}/initia/move/v1/accounts/${address}/modules${
         paginationKey ? `?pagination.key=${paginationKey}` : ""
@@ -77,7 +78,7 @@ export interface ModuleVerificationInternal
 export const getModuleVerificationStatus = async (
   address: MoveAccountAddr,
   moduleName: string
-): Promise<ModuleVerificationInternal | null> =>
+): Promise<Nullable<ModuleVerificationInternal>> =>
   // TODO: move url to base api route? wait for celatone api implementation?
   axios
     .get<ModuleVerificationReturn>(
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index bfc9489ce..dae4144f1 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -83,7 +83,9 @@ export const useAccountModules = ({
           indexModuleResponse(module, functionName)
         )
       : getAccountModules(baseEndpoint, address).then((modules) =>
-          modules.map((module) => indexModuleResponse(module))
+          modules
+            .sort((a, b) => (a.moduleName < b.moduleName ? -1 : 1))
+            .map((module) => indexModuleResponse(module))
         );
 
   return useQuery(
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 1440c07d0..ec642cb7d 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -28,6 +28,7 @@ import type {
   TxFilters,
   Message,
   PoolTxFilter,
+  Nullable,
 } from "lib/types";
 import { ActionMsgType, MsgFurtherAction } from "lib/types";
 import {
@@ -76,7 +77,7 @@ export const useTxData = (
 };
 
 export const useTxsByAddressPagination = (
-  accountId: Option<number | null>,
+  accountId: Option<Nullable<number>>,
   search: string,
   filters: TxFilters,
   isSigner: Option<boolean>,
@@ -163,7 +164,7 @@ export const useTxsCountByAddress = ({
   filters,
   isSigner,
 }: {
-  accountId: Option<number | null>;
+  accountId: Option<Nullable<number>>;
   search: string;
   filters: TxFilters;
   isSigner: Option<boolean>;
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index ff3fb00a8..9ceebc90a 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -12,7 +12,12 @@ import {
   useCelatoneApp,
 } from "lib/app-provider";
 import { getValidators } from "lib/query/validator";
-import type { ValidatorInfo, Validator, ValidatorAddr } from "lib/types";
+import type {
+  ValidatorInfo,
+  Validator,
+  ValidatorAddr,
+  Nullable,
+} from "lib/types";
 
 import { resolveValIdentity, getValidator } from "./validator";
 
@@ -70,7 +75,7 @@ export const useValidators = (): UseQueryResult<
 };
 
 export const useValidatorImage = (
-  validator: ValidatorInfo | null
+  validator: Nullable<ValidatorInfo>
 ): UseQueryResult<string> => {
   const {
     chain: { chain_name: chainName },
diff --git a/src/lib/stores/schema.ts b/src/lib/stores/schema.ts
index b37cc9ba8..1dd7cbc4d 100644
--- a/src/lib/stores/schema.ts
+++ b/src/lib/stores/schema.ts
@@ -2,7 +2,7 @@ import type { RJSFSchema as JsonSchema } from "@rjsf/utils";
 import { makeAutoObservable } from "mobx";
 import { makePersistable } from "mobx-persist-store";
 
-import type { Dict, Option } from "lib/types";
+import type { Dict, Nullable, Option } from "lib/types";
 
 export enum SchemaProperties {
   CONTRACT_NAME = "contract_name",
@@ -17,8 +17,6 @@ export enum SchemaProperties {
   ATTACHED_CODE_ID = "attached_code_id",
 }
 
-type NullableJsonSchema = JsonSchema | null;
-
 export interface SchemaInfo {
   title: Option<string>;
   description: Option<string>;
@@ -31,10 +29,10 @@ export interface CodeSchema {
   [SchemaProperties.CONTRACT_VERSION]: string;
   [SchemaProperties.IDL_VERSION]: string;
   [SchemaProperties.INSTANTIATE]: JsonSchema;
-  [SchemaProperties.EXECUTE]: NullableJsonSchema;
-  [SchemaProperties.QUERY]: NullableJsonSchema;
-  [SchemaProperties.MIGRATE]: NullableJsonSchema;
-  [SchemaProperties.SUDO]: NullableJsonSchema;
+  [SchemaProperties.EXECUTE]: Nullable<JsonSchema>;
+  [SchemaProperties.QUERY]: Nullable<JsonSchema>;
+  [SchemaProperties.MIGRATE]: Nullable<JsonSchema>;
+  [SchemaProperties.SUDO]: Nullable<JsonSchema>;
   [SchemaProperties.RESPONSES]: { [key: string]: JsonSchema };
   [SchemaProperties.ATTACHED_CODE_ID]: string;
 }
diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
index c4c9b2b73..52ec83eaa 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/abi.ts
@@ -1,4 +1,4 @@
-import type { Option } from "./common";
+import type { Nullable } from "./common";
 import type { SnakeToCamelCaseNested } from "./converter";
 
 export enum UpgradePolicy {
@@ -86,5 +86,5 @@ interface Field {
 
 export interface AbiFormData {
   typeArgs: Record<string, string>;
-  args: Record<string, Option<string>>;
+  args: Record<string, Nullable<string>>;
 }
diff --git a/src/lib/types/block.ts b/src/lib/types/block.ts
index cf798e944..941c1a17a 100644
--- a/src/lib/types/block.ts
+++ b/src/lib/types/block.ts
@@ -1,4 +1,4 @@
-import type { Option } from "./common";
+import type { Nullable, Option } from "./common";
 import type { ValidatorInfo } from "./validator";
 
 export interface BlockInfo {
@@ -7,12 +7,12 @@ export interface BlockInfo {
   height: number;
   timestamp: Date;
   txCount: number;
-  proposer: ValidatorInfo | null;
+  proposer: Nullable<ValidatorInfo>;
 }
 
 export interface BlockDetails extends Omit<BlockInfo, "txCount"> {
-  gasUsed: Option<number | null>;
-  gasLimit: Option<number | null>;
+  gasUsed: Option<Nullable<number>>;
+  gasLimit: Option<Nullable<number>>;
 }
 
 export interface LatestBlock {
diff --git a/src/lib/types/code.ts b/src/lib/types/code.ts
index 0df87cae8..c6b0ffdc8 100644
--- a/src/lib/types/code.ts
+++ b/src/lib/types/code.ts
@@ -1,5 +1,5 @@
 import type { CodeLocalInfo } from "lib/stores/code";
-import type { Option, Addr } from "lib/types";
+import type { Option, Addr, Nullable } from "lib/types";
 
 export enum AccessConfigPermission {
   EVERYBODY = "Everybody",
@@ -16,8 +16,8 @@ export interface CodeInfo extends CodeLocalInfo {
   contractCount: Option<number>;
   instantiatePermission: AccessConfigPermission;
   permissionAddresses: PermissionAddresses;
-  cw2Contract: Option<string | null>;
-  cw2Version: Option<string | null>;
+  cw2Contract: Option<Nullable<string>>;
+  cw2Version: Option<Nullable<string>>;
   isSaved?: boolean;
 }
 
@@ -36,6 +36,6 @@ export interface CodeData {
   proposal: Option<CodeProposal>;
   instantiatePermission: AccessConfigPermission;
   permissionAddresses: PermissionAddresses;
-  cw2Contract: Option<string | null>;
-  cw2Version: Option<string | null>;
+  cw2Contract: Option<Nullable<string>>;
+  cw2Version: Option<Nullable<string>>;
 }
diff --git a/src/lib/types/common.ts b/src/lib/types/common.ts
index 1a9b50659..2968f4e6f 100644
--- a/src/lib/types/common.ts
+++ b/src/lib/types/common.ts
@@ -2,4 +2,6 @@ export type Dict<K extends string | number, T> = Partial<Record<K, T>>;
 
 export type Option<T> = T | undefined;
 
+export type Nullable<T> = T | null;
+
 export type NominalType<T extends string> = { __type: T };
diff --git a/src/lib/types/contract.ts b/src/lib/types/contract.ts
index 00eea6d17..dfdc41193 100644
--- a/src/lib/types/contract.ts
+++ b/src/lib/types/contract.ts
@@ -1,5 +1,5 @@
 import type { ContractLocalInfo } from "lib/stores/contract";
-import type { Addr, Option } from "lib/types";
+import type { Addr, Nullable, Option } from "lib/types";
 
 export enum RemarkOperation {
   CONTRACT_CODE_HISTORY_OPERATION_TYPE_INIT = "CONTRACT_CODE_HISTORY_OPERATION_TYPE_INIT",
@@ -30,6 +30,6 @@ export interface ContractMigrationHistory {
   timestamp: Date;
   remark: ContractHistoryRemark;
   uploader: Addr;
-  cw2Contract: Option<string | null>;
-  cw2Version: Option<string | null>;
+  cw2Contract: Option<Nullable<string>>;
+  cw2Version: Option<Nullable<string>>;
 }
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index dd0a7b338..83e621e03 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -1,7 +1,13 @@
 import type { Coin } from "@cosmjs/stargate";
 import type { Big } from "big.js";
 
-import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
+import type {
+  Addr,
+  ContractAddr,
+  Nullable,
+  Option,
+  TokenWithValue,
+} from "lib/types";
 
 export enum PoolType {
   ALL = "All",
@@ -16,7 +22,7 @@ export type PoolTypeFilter = PoolType;
 export interface PoolWeight<T extends string | Big = Big> {
   denom: string;
   weight: T;
-  percentWeight: string | null;
+  percentWeight: Nullable<string>;
 }
 
 export interface Pool<
@@ -26,7 +32,7 @@ export interface Pool<
   type: PoolType;
   isSuperfluid: boolean;
   poolLiquidity: TLiquidity[];
-  contractAddress: Option<ContractAddr | null>;
+  contractAddress: Option<Nullable<ContractAddr>>;
 }
 
 export interface PoolDetail<
@@ -40,11 +46,11 @@ export interface PoolDetail<
   swapFee: string;
   exitFee: string;
   futurePoolGovernor: string;
-  weight: PoolWeight<TWeight>[] | null;
-  smoothWeightChangeParams: object | null;
-  scalingFactors: string[] | null;
-  scalingFactorController: string | null;
-  spreadFactor: string | null;
-  tickSpacing: number | null;
-  contractAddress: ContractAddr | null;
+  weight: Nullable<PoolWeight<TWeight>[]>;
+  smoothWeightChangeParams: Nullable<object>;
+  scalingFactors: Nullable<string[]>;
+  scalingFactorController: Nullable<string>;
+  spreadFactor: Nullable<string>;
+  tickSpacing: Nullable<number>;
+  contractAddress: Nullable<ContractAddr>;
 }
diff --git a/src/lib/types/projects.ts b/src/lib/types/projects.ts
index 80585b373..3b5fd0d80 100644
--- a/src/lib/types/projects.ts
+++ b/src/lib/types/projects.ts
@@ -6,6 +6,7 @@ import type {
   AccessConfigPermission,
   PermissionAddresses,
   Option,
+  Nullable,
 } from "lib/types";
 
 export interface Account {
@@ -27,8 +28,8 @@ export interface RawPublicCode {
   permissionAddresses: PermissionAddresses;
   github: string;
   verified: boolean;
-  cw2Contract: Option<string | null>;
-  cw2Version: Option<string | null>;
+  cw2Contract: Option<Nullable<string>>;
+  cw2Version: Option<Nullable<string>>;
 }
 
 export interface PublicCode extends Omit<RawPublicCode, "contracts"> {
diff --git a/src/lib/types/proposal.ts b/src/lib/types/proposal.ts
index 40c8db095..24aaf3c89 100644
--- a/src/lib/types/proposal.ts
+++ b/src/lib/types/proposal.ts
@@ -1,4 +1,4 @@
-import type { Addr, Option } from "lib/types";
+import type { Addr, Nullable, Option } from "lib/types";
 
 export enum ProposalStatus {
   DEPOSIT_PERIOD = "DepositPeriod",
@@ -55,7 +55,7 @@ export interface Proposal {
   status: ProposalStatus;
   votingEndTime: Date;
   depositEndTime: Date;
-  resolvedHeight: Option<number | null>;
+  resolvedHeight: Option<Nullable<number>>;
   type: ProposalType;
   proposer: Option<Addr>;
   isExpedited: boolean;
diff --git a/src/lib/types/tx/model.ts b/src/lib/types/tx/model.ts
index 880bf8262..3ef71741f 100644
--- a/src/lib/types/tx/model.ts
+++ b/src/lib/types/tx/model.ts
@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import type { Nullable } from "../common";
+
 export enum TxStreamPhase {
   BROADCAST = "BROADCAST",
   SUCCEED = "SUCCEED",
@@ -13,7 +15,7 @@ export interface TxErrorRendering {
 
 export interface TxReceipt {
   title: string;
-  value?: string | number | null;
+  value?: Nullable<string | number>;
   html?: ReactNode;
 }
 
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 33c919cc5..3d957e124 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -3,7 +3,7 @@ import { BCS } from "@initia/initia.js";
 import type {
   AbiFormData,
   ExposedFunction,
-  Option,
+  Nullable,
   ResponseABI,
 } from "lib/types";
 
@@ -66,15 +66,15 @@ const getArgType = (argType: string) =>
     .replaceAll("0x1::option::Option", "option");
 
 const getArgValue = ({
-  type,
+  // type,
   value,
 }: {
-  type: string;
-  value: Option<string>;
+  // type: string;
+  value: Nullable<string>;
 }) => {
   try {
-    if (value === undefined) return null;
-    if (type.startsWith("vector")) return JSON.parse(value) as string[];
+    if (value === null) return null;
+    // if (type.startsWith("vector")) return JSON.parse(value) as string[];
     return value.trim();
   } catch (e) {
     return "";
@@ -82,13 +82,13 @@ const getArgValue = ({
 };
 
 const serializeArg = (
-  arg: { type: string; value: Option<string> },
+  arg: { type: string; value: Nullable<string> },
   bcs: BCS
 ) => {
   try {
     const argType = getArgType(arg.type);
     const argValue = getArgValue(arg);
-    return bcs.serialize(argType, argValue);
+    return bcs.serialize(argType, argValue, 1024 * 1024);
   } catch (e) {
     return "";
   }
diff --git a/src/lib/utils/cw2.ts b/src/lib/utils/cw2.ts
index 55edc005e..5196cedfc 100644
--- a/src/lib/utils/cw2.ts
+++ b/src/lib/utils/cw2.ts
@@ -1,7 +1,7 @@
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 
 export const getCw2Info = (
-  cw2Contract: Option<string | null>,
-  cw2Version: Option<string | null>
+  cw2Contract: Option<Nullable<string>>,
+  cw2Version: Option<Nullable<string>>
 ): Option<string> =>
   cw2Contract && cw2Version ? `${cw2Contract} (${cw2Version})` : undefined;
diff --git a/src/lib/utils/mergeRefs.ts b/src/lib/utils/mergeRefs.ts
index f4107a50b..8f0699c07 100644
--- a/src/lib/utils/mergeRefs.ts
+++ b/src/lib/utils/mergeRefs.ts
@@ -1,6 +1,8 @@
 /* eslint-disable no-param-reassign */
 import type * as React from "react";
 
+import type { Nullable } from "lib/types";
+
 export const mergeRefs = <T = unknown>(
   refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
 ): React.RefCallback<T> => {
@@ -9,7 +11,7 @@ export const mergeRefs = <T = unknown>(
       if (typeof ref === "function") {
         ref(value);
       } else if (ref != null) {
-        (ref as React.MutableRefObject<T | null>).current = value;
+        (ref as React.MutableRefObject<Nullable<T>>).current = value;
       }
     });
   };
diff --git a/src/lib/utils/option.ts b/src/lib/utils/option.ts
index 62fe0f7b9..7c8fba90e 100644
--- a/src/lib/utils/option.ts
+++ b/src/lib/utils/option.ts
@@ -1,4 +1,4 @@
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 
 export const unwrap = <T>(data: Option<T>, errorMsg?: string): T => {
   if (data === undefined) {
@@ -7,7 +7,10 @@ export const unwrap = <T>(data: Option<T>, errorMsg?: string): T => {
   return data;
 };
 
-export const unwrapAll = <T>(data: Option<T | null>, errorMsg?: string): T => {
+export const unwrapAll = <T>(
+  data: Option<Nullable<T>>,
+  errorMsg?: string
+): T => {
   if (data === undefined || data === null) {
     throw new Error(errorMsg || "Cannot unwrap the given data");
   }
diff --git a/src/lib/utils/tx/types.ts b/src/lib/utils/tx/types.ts
index 06ac2d4e5..205797974 100644
--- a/src/lib/utils/tx/types.ts
+++ b/src/lib/utils/tx/types.ts
@@ -7,6 +7,7 @@ import type {
   AccessConfigPermission,
   Option,
   ValidatorAddr,
+  Nullable,
 } from "lib/types";
 
 import type { VoteOption } from "./mapping";
@@ -32,7 +33,7 @@ export interface MsgStoreCodeDetails extends MsgBaseDetails {
   code_id: Option<string>;
   sender: Addr;
   wasm_byte_code: string; // base64
-  instantiate_permission: InstantiatePermissionResponse | null;
+  instantiate_permission: Nullable<InstantiatePermissionResponse>;
 }
 
 export interface MsgInstantiateDetails extends MsgBaseDetails {

From 745878b9a4c12b1c59375509a70eeaa2edbd0ffe Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 26 Sep 2023 17:42:45 +0700
Subject: [PATCH 097/368] fix: boolean

---
 .../components/abi/args-form/field/utils.ts   | 18 ++++++++----
 src/lib/pages/pools/data.ts                   |  8 ++---
 src/lib/utils/abi.ts                          | 29 ++++++++++++-------
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
index 75866515f..bf8708fcb 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -17,7 +17,9 @@ const validateUint = (uintType: string) => (v: string) => {
     : `Input must be ‘${uintType}’`;
 };
 const validateBool = (v: string) =>
-  v === "true" || v === "false" ? undefined : "Input must be ‘boolean’";
+  v.toLowerCase() === "true" || v.toLowerCase() === "false"
+    ? undefined
+    : "Input must be ‘boolean’";
 
 const validateAddress =
   (isValidArgAddress: (input: string) => boolean) => (v: string) =>
@@ -29,6 +31,9 @@ const validateVector = (
   isValidArgAddress: (input: string) => boolean
 ) => {
   const value = v.trim();
+  if (!value.startsWith("[") || !value.endsWith("]"))
+    return "Input must be ‘vector’";
+
   const [, elementType] = vectorType.split(/<(.*)>/);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -41,10 +46,13 @@ const validateVector = (
   // TODO: handle Vector?
 
   let error: Option<string>;
-  value.split(",").forEach((elementValue) => {
-    const res = validateElement(elementValue.trim());
-    if (res !== undefined) error = `Invalid element: ${res}`;
-  });
+  value
+    .slice(1, -1)
+    .split(",")
+    .forEach((elementValue) => {
+      const res = validateElement(elementValue.trim());
+      if (res !== undefined) error = `Invalid element: ${res}`;
+    });
 
   return error;
 };
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index a79789e04..70316292f 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -1,6 +1,7 @@
 import type { Big } from "big.js";
 import big from "big.js";
 
+import { UPPERBOUND_COUNT } from "lib/data";
 import type { Order_By } from "lib/gql/graphql";
 import { useAssetInfos } from "lib/services/assetService";
 import { usePoolByPoolId, usePoolListQuery } from "lib/services/poolService";
@@ -134,11 +135,10 @@ export const usePoolTxsCount = (
   const loading = isLoading || txsIsLoading;
   if (error && txs?.length === 0)
     return { count: 0, countDisplay: "0", isLoading: loading };
-  const upperboundCount = 10000;
-  const showActualCount = data !== undefined && data <= upperboundCount;
+  const showActualCount = data !== undefined && data <= UPPERBOUND_COUNT;
   return {
-    count: showActualCount ? data : upperboundCount,
-    countDisplay: showActualCount ? data.toString() : `${upperboundCount}+`,
+    count: showActualCount ? data : UPPERBOUND_COUNT,
+    countDisplay: showActualCount ? data.toString() : `${UPPERBOUND_COUNT}+`,
     isLoading: loading,
   };
 };
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 3d957e124..02af6729b 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -66,38 +66,47 @@ const getArgType = (argType: string) =>
     .replaceAll("0x1::option::Option", "option");
 
 const getArgValue = ({
-  // type,
+  type,
   value,
 }: {
-  // type: string;
+  type: string;
   value: Nullable<string>;
 }) => {
   try {
     if (value === null) return null;
-    // if (type.startsWith("vector")) return JSON.parse(value) as string[];
+    if (type.startsWith("vector")) {
+      const [, elementType] = type.split(/<(.*)>/);
+      const values = value
+        .split(/\[(.*)\]/)[1]
+        .split(",")
+        .map((element) => element.trim());
+      return elementType === "bool"
+        ? values.map((element) => element.toLowerCase() === "true")
+        : values;
+    }
+    if (type === "bool") return value === "true";
     return value.trim();
   } catch (e) {
     return "";
   }
 };
 
-const serializeArg = (
-  arg: { type: string; value: Nullable<string> },
-  bcs: BCS
-) => {
+const BUFFER_SIZE = 1024 * 1024;
+const bcs = BCS.getInstance();
+
+const serializeArg = (arg: { type: string; value: Nullable<string> }) => {
   try {
     const argType = getArgType(arg.type);
     const argValue = getArgValue(arg);
-    return bcs.serialize(argType, argValue, 1024 * 1024);
+    return bcs.serialize(argType, argValue, BUFFER_SIZE);
   } catch (e) {
     return "";
   }
 };
 
 export const serializeAbiData = (fn: ExposedFunction, abiData: AbiFormData) => {
-  const bcs = BCS.getInstance();
   const serializedArgs = fn.params.map((type, index) =>
-    serializeArg({ type, value: abiData.args[index] }, bcs)
+    serializeArg({ type, value: abiData.args[index] })
   );
   return {
     typeArgs: fn.generic_type_params.map((_, index) => abiData.typeArgs[index]),

From 5274b2818e861f2e516cfe81ed8b02d3be1d67b7 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 26 Sep 2023 19:47:29 +0700
Subject: [PATCH 098/368] fix(components): get resource data

---
 src/lib/app-provider/env.ts                   |  2 +
 src/lib/components/module/ModuleCard.tsx      | 11 ++-
 .../components/modules/ModuleLists.tsx        | 96 +++++++++++++-----
 .../components/resources/ResourceLists.tsx    | 55 ++++++++++-
 .../components/resources/ResourceSection.tsx  | 99 ++++++++++++-------
 src/lib/pages/account-details/index.tsx       | 48 ++++++---
 .../drawer/body/ModuleFunctionBody.tsx        |  2 +-
 .../drawer/body/ModuleSelectMainBody.tsx      |  2 +-
 .../interaction/component/drawer/drawer.tsx   |  2 +-
 .../drawer/selector/SelectorInput.tsx         |  4 +-
 .../interaction/component/drawer/types.ts     |  2 +-
 .../interaction/component/form/ViewArea.tsx   |  2 +-
 .../pages/interaction/component/main/body.tsx |  2 +-
 .../interaction/component/main/panel.tsx      |  2 +-
 src/lib/pages/interaction/index.tsx           |  4 +-
 .../components/UploadModuleCard.tsx           |  2 +-
 src/lib/pages/publish-module/formConstants.ts |  2 +-
 src/lib/pages/publish-module/publish.tsx      |  2 +-
 src/lib/pages/publish-module/utils.ts         |  2 +-
 src/lib/services/{ => move}/module.ts         |  9 +-
 src/lib/services/{ => move}/moduleService.ts  |  0
 src/lib/services/move/resource.ts             | 32 ++++++
 src/lib/services/move/resourceService.ts      | 45 +++++++++
 src/lib/types/index.ts                        |  2 +-
 src/lib/types/{ => move}/abi.ts               | 12 +--
 src/lib/types/move/index.ts                   |  2 +
 src/lib/types/move/resource.ts                | 16 +++
 src/lib/types/rest.ts                         |  4 +
 yarn.lock                                     |  4 +-
 29 files changed, 355 insertions(+), 112 deletions(-)
 rename src/lib/services/{ => move}/module.ts (99%)
 rename src/lib/services/{ => move}/moduleService.ts (100%)
 create mode 100644 src/lib/services/move/resource.ts
 create mode 100644 src/lib/services/move/resourceService.ts
 rename src/lib/types/{ => move}/abi.ts (89%)
 create mode 100644 src/lib/types/move/index.ts
 create mode 100644 src/lib/types/move/resource.ts
 create mode 100644 src/lib/types/rest.ts

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index cbd9fe8fe..8acfa081c 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -97,4 +97,6 @@ export enum CELATONE_QUERY_KEYS {
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
   FUNCTION_VIEW = "CELATONE_QUERY_FUNCTION_VIEW",
   MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
+  // RESOURCE
+  RESOURCE_MODULES = "CELATONE_QUERY_ACCOUNT_RESOURCES",
 }
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index 6091ab827..7360868a0 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -1,9 +1,8 @@
 import { Flex, Grid, Text } from "@chakra-ui/react";
-import type { Dispatch, SetStateAction } from "react";
 
 import { CustomIcon } from "../icon";
-import type { IndexedModule } from "lib/services/moduleService";
-import { useVerifyModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
+import { useVerifyModule } from "lib/services/move/moduleService";
 import type { HumanAddr, Option } from "lib/types";
 
 import { CountBadge } from "./CountBadge";
@@ -12,7 +11,8 @@ interface ModuleCardProps {
   selectedAddress: HumanAddr;
   module: IndexedModule;
   selectedModule: Option<IndexedModule>;
-  setSelectedModule: Dispatch<SetStateAction<Option<IndexedModule>>>;
+  setSelectedModule: (module: IndexedModule) => void;
+  isLarge?: boolean;
 }
 
 export const ModuleCard = ({
@@ -20,6 +20,7 @@ export const ModuleCard = ({
   module,
   selectedModule,
   setSelectedModule,
+  isLarge = false,
 }: ModuleCardProps) => {
   const { data: isVerified } = useVerifyModule({
     address: selectedAddress,
@@ -34,7 +35,7 @@ export const ModuleCard = ({
           ? "gray.700"
           : "gray.800"
       }
-      p={3}
+      p={isLarge ? 4 : 3}
       alignItems="center"
       cursor="pointer"
       onClick={() => setSelectedModule(module)}
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 351181bc9..19cccc128 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -1,21 +1,30 @@
 import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { useMemo, useState } from "react";
 
-import { useMobile } from "lib/app-provider";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-// import { ModuleCard } from "lib/components/module/ModuleCard";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { Loading } from "lib/components/Loading";
+import { ModuleCard } from "lib/components/module";
 import { TableTitle, ViewMore } from "lib/components/table";
+import {
+  useAccountModules,
+  type IndexedModule,
+} from "lib/services/move/moduleService";
+import type { HumanAddr } from "lib/types";
 
 interface ModuleListsProps {
   onViewMore?: () => void;
-  totalAsset: number;
+  totalCount: number;
+  selectedAddress: HumanAddr;
 }
 
 const ModuleTitle = ({
   onViewMore,
-  totalAsset,
+  totalCount,
 }: {
   onViewMore: ModuleListsProps["onViewMore"];
-  totalAsset: number;
+  totalCount: number;
 }) => {
   const isMobile = useMobile();
   if (isMobile && onViewMore)
@@ -28,7 +37,7 @@ const ModuleTitle = ({
         p={4}
         onClick={onViewMore}
       >
-        <TableTitle title="Modules" count={totalAsset} mb={0} />
+        <TableTitle title="Modules" count={totalCount} mb={0} />
         <CustomIcon name="chevron-right" color="gray.600" />
       </Flex>
     );
@@ -36,12 +45,43 @@ const ModuleTitle = ({
     <TableTitle
       title="Module Instances"
       helperText="Modules are ‘smart contracts’ deployed by this account"
-      count={totalAsset}
+      count={totalCount}
     />
   );
 };
-export const ModuleLists = ({ onViewMore, totalAsset }: ModuleListsProps) => {
+export const ModuleLists = ({
+  onViewMore,
+  totalCount,
+  selectedAddress,
+}: ModuleListsProps) => {
   const isMobile = useMobile();
+  const navigate = useInternalNavigate();
+  // move
+  const { data = [] } = useAccountModules({
+    address: selectedAddress,
+    moduleName: undefined,
+    functionName: undefined,
+  });
+  // TODO: remove assertion later
+  const modules = data as IndexedModule[] | undefined;
+
+  const [keyword, setKeyword] = useState("");
+  const filteredModules = useMemo(() => {
+    if (!keyword) return modules;
+
+    return modules?.filter((module) => module.moduleName?.includes(keyword));
+  }, [keyword, modules]);
+
+  const handleOnSelect = (module: IndexedModule) => {
+    navigate({
+      pathname: `/modules/[address]/[moduleName]`,
+      query: {
+        address: selectedAddress,
+        moduleName: module.moduleName,
+      },
+    });
+  };
+  if (!filteredModules) return <Loading />;
   return (
     <Flex
       direction="column"
@@ -49,20 +89,32 @@ export const ModuleLists = ({ onViewMore, totalAsset }: ModuleListsProps) => {
       mb={{ base: 0, md: 8 }}
       width="full"
     >
-      <ModuleTitle onViewMore={onViewMore} totalAsset={totalAsset} />
-      {!(isMobile && onViewMore) && (
-        <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
-          {/* <ModuleCard />
-          <ModuleCard />
-          <ModuleCard />
-          <ModuleCard />
-          <ModuleCard />
-          <ModuleCard />
-          <ModuleCard />
-          <ModuleCard />
-          <ModuleCard /> */}
-        </SimpleGrid>
-      )}
+      <ModuleTitle onViewMore={onViewMore} totalCount={totalCount} />
+      <Flex direction="column" gap={8}>
+        {!onViewMore && (
+          <InputWithIcon
+            placeholder="Search with Execute Message"
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            action="execute-message-search"
+          />
+        )}
+        {!(isMobile && onViewMore) && (
+          <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
+            {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
+              (item) => (
+                <ModuleCard
+                  isLarge
+                  selectedAddress={selectedAddress}
+                  module={item}
+                  selectedModule={undefined}
+                  setSelectedModule={handleOnSelect}
+                />
+              )
+            )}
+          </SimpleGrid>
+        )}
+      </Flex>
       {!isMobile && onViewMore && <ViewMore onClick={onViewMore} />}
     </Flex>
   );
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index e0693572f..c3a9d533f 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -2,13 +2,32 @@ import { Flex, SimpleGrid } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
 import { ResourceCard } from "lib/components/resource/ResourceCard";
 import { TableTitle, ViewMore } from "lib/components/table";
+import {
+  useAccountResources,
+  type IndexedResource,
+} from "lib/services/move/resourceService";
+import type { HumanAddr } from "lib/types";
+import { truncate } from "lib/utils";
+
+export interface ResourceGroup {
+  group: string;
+  items: IndexedResource[];
+}
+
+export interface ResourceGroupByAccount {
+  owner: string;
+  resources: Record<string, ResourceGroup>;
+}
 
 interface ResourcesListsProps {
   onViewMore?: () => void;
   totalAsset: number;
+  address: HumanAddr;
 }
+
 const ResourceTitle = ({
   onViewMore,
   totalAsset,
@@ -43,8 +62,36 @@ const ResourceTitle = ({
 export const ResourceLists = ({
   onViewMore,
   totalAsset,
+  address,
 }: ResourcesListsProps) => {
   const isMobile = useMobile();
+  const { data: resourcesData = [] } = useAccountResources({
+    address,
+  });
+  const resources = resourcesData as IndexedResource[];
+
+  const restructuredResources = resources.reduce<Record<string, ResourceGroup>>(
+    (acc, resource) => {
+      const [ownerName, groupName] = resource.structTag.split("::");
+
+      const name = `${truncate(ownerName)}::${groupName}`;
+      const groupResources = acc[name] ?? {};
+      const items = groupResources?.items ?? [];
+      items.push(resource);
+
+      return {
+        ...acc,
+        [name]: {
+          group: name,
+          items,
+        },
+      };
+    },
+    {} as Record<string, ResourceGroup>
+  );
+  const groupedResources = Object.values(restructuredResources);
+
+  if (!resources) return <Loading />;
   return (
     <Flex
       direction="column"
@@ -54,13 +101,11 @@ export const ResourceLists = ({
     >
       <ResourceTitle onViewMore={onViewMore} totalAsset={totalAsset} />
       {!isMobile && (
-        // TODO: data
         <>
           <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
-            <ResourceCard name="resource ja" amount={3} />
-            <ResourceCard name="resource ja" amount={3} />
-            <ResourceCard name="resource ja" amount={3} />
-            <ResourceCard name="resource ja" amount={3} />
+            {groupedResources.slice(0, 8).map((item) => (
+              <ResourceCard name={item.group} amount={item.items.length} />
+            ))}
           </SimpleGrid>
           {onViewMore && <ViewMore onClick={onViewMore} />}
         </>
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 8094a59aa..280b6f6e7 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -13,8 +13,48 @@ import { CustomIcon } from "lib/components/icon";
 import { ResourceCard } from "lib/components/resource/ResourceCard";
 import { ResourceDetailCard } from "lib/components/resource/ResourceDetailCard";
 import { TableTitle } from "lib/components/table";
+import type { IndexedResource } from "lib/services/move/resourceService";
+import { useAccountResources } from "lib/services/move/resourceService";
+import type { HumanAddr } from "lib/types";
+import { truncate } from "lib/utils";
 
-export const ResourceSection = () => {
+import type { ResourceGroupByAccount } from "./ResourceLists";
+
+interface ResourceSectionProps {
+  address: HumanAddr;
+}
+export const ResourceSection = ({ address }: ResourceSectionProps) => {
+  const { data: resourcesData = [] } = useAccountResources({
+    address,
+  });
+  const resources = resourcesData as IndexedResource[];
+
+  const sortedResource = resources.reduce<
+    Record<string, ResourceGroupByAccount>
+  >((acc, resource) => {
+    const [ownerName, groupName] = resource.structTag.split("::");
+
+    const ownerResources = acc[ownerName]?.resources ?? {};
+    const groupResources = ownerResources[groupName] ?? {};
+    const items = groupResources?.items ?? [];
+    items.push(resource);
+
+    return {
+      ...acc,
+      [ownerName]: {
+        owner: ownerName,
+        resources: {
+          ...ownerResources,
+          [groupName]: {
+            group: groupName,
+            items,
+          },
+        },
+      },
+    };
+  }, {} as Record<string, ResourceGroupByAccount>);
+
+  const groupedResources = Object.values(sortedResource);
   return (
     <Flex direction="column" mt={8}>
       <TableTitle
@@ -24,43 +64,26 @@ export const ResourceSection = () => {
       />
       <Flex gap={6} flexDirection={{ base: "column", md: "row" }}>
         <Flex width={{ base: "full", md: 80 }}>
-          <Accordion defaultIndex={[0]} allowToggle width="full">
-            <AccordionItem mb={4}>
-              <AccordionButton>
-                <Flex p={4} justifyContent="space-between" w="full">
-                  <Text variant="body1" fontWeight={600}>
-                    0x1
-                  </Text>
-                  <CustomIcon name="chevron-down" color="gray.600" />
-                </Flex>
-              </AccordionButton>
-              <AccordionPanel>
-                <Flex direction="column" gap={3}>
-                  <ResourceCard hasBorder name="beeb" amount={2} />
-                  <ResourceCard isSelected hasBorder name="beeb" amount={2} />
-                  <ResourceCard hasBorder name="beeb" amount={2} />
-                  <ResourceCard hasBorder name="beeb" amount={2} />
-                </Flex>
-              </AccordionPanel>
-            </AccordionItem>
-            <AccordionItem mb={4}>
-              <AccordionButton>
-                <Flex p={4} justifyContent="space-between" w="full">
-                  <Text variant="body1" fontWeight={600}>
-                    0x2
-                  </Text>
-                  <CustomIcon name="chevron-down" color="gray.600" />
-                </Flex>
-              </AccordionButton>
-              <AccordionPanel>
-                <Flex direction="column" gap={3}>
-                  <ResourceCard hasBorder name="beeb" amount={2} />
-                  <ResourceCard isSelected hasBorder name="beeb" amount={2} />
-                  <ResourceCard hasBorder name="beeb" amount={2} />
-                  <ResourceCard hasBorder name="beeb" amount={2} />
-                </Flex>
-              </AccordionPanel>
-            </AccordionItem>
+          <Accordion defaultIndex={[0]} allowToggle width="full" allowMultiple>
+            {groupedResources.map((item) => (
+              <AccordionItem mb={4}>
+                <AccordionButton>
+                  <Flex p={4} justifyContent="space-between" w="full">
+                    <Text variant="body1" fontWeight={600}>
+                      {truncate(item.owner)}
+                    </Text>
+                    <CustomIcon name="chevron-down" color="gray.600" />
+                  </Flex>
+                </AccordionButton>
+                <AccordionPanel>
+                  <Flex direction="column" gap={3}>
+                    {Object.values(item.resources).map((subitem) => (
+                      <ResourceCard hasBorder name={subitem.group} amount={2} />
+                    ))}
+                  </Flex>
+                </AccordionPanel>
+              </AccordionItem>
+            ))}
           </Accordion>
         </Flex>
         <Flex direction="column" w="full">
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index cbf12c699..f86596643 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -25,6 +25,10 @@ import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
 import { useAccountDetailsTableCounts } from "lib/model/account";
 import { useAccountId } from "lib/services/accountService";
+import type { IndexedModule } from "lib/services/move/moduleService";
+import { useAccountModules } from "lib/services/move/moduleService";
+import { useAccountResources } from "lib/services/move/resourceService";
+import type { IndexedResource } from "lib/services/move/resourceService";
 import { useICNSNamesByAddress } from "lib/services/nameService";
 import {
   usePublicProjectByAccountAddress,
@@ -58,12 +62,12 @@ enum TabIndex {
   Codes = "codes",
   Contracts = "contracts",
   Admins = "admins",
-  Resources = "resouces",
+  Resource = "resources",
   Modules = "modules",
   Proposals = "proposals",
 }
 
-interface AccountDetailsBodyProps {
+export interface AccountDetailsBodyProps {
   accountAddress: HumanAddr;
 }
 
@@ -83,6 +87,20 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
   const { data: accountId } = useAccountId(accountAddress);
   const { data: icnsName } = useICNSNamesByAddress(accountAddress);
 
+  // TODO: combine with useAccountDetailsTableCounts and remove type assertion
+  // move
+  const { data = [] } = useAccountModules({
+    address: accountAddress,
+    moduleName: undefined,
+    functionName: undefined,
+  });
+  const modulesData = data as IndexedModule[];
+
+  const { data: resourcesData = [] } = useAccountResources({
+    address: accountAddress,
+  });
+  const resources = resourcesData as IndexedResource[];
+
   const publicDetail = publicInfoBySlug?.details;
   const {
     tableCounts,
@@ -237,16 +255,16 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             Admins
           </CustomTab>
           <CustomTab
-            count={tableCounts.txsCount}
-            isDisabled={txCountLoading || tableCounts.txsCount === 0}
-            onClick={handleTabChange(TabIndex.Resources)}
+            count={resources.length}
+            isDisabled={!resources.length}
+            onClick={handleTabChange(TabIndex.Resource)}
             hidden={!move.enabled}
           >
-            Resources
+            Resource
           </CustomTab>
           <CustomTab
-            count={tableCounts.txsCount}
-            isDisabled={txCountLoading || tableCounts.txsCount === 0}
+            count={modulesData.length}
+            isDisabled={!modulesData.length}
             onClick={handleTabChange(TabIndex.Modules)}
             hidden={!move.enabled}
           >
@@ -310,11 +328,14 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             {move.enabled && (
               <>
                 <ResourceLists
+                  address={accountAddress}
                   totalAsset={0}
-                  onViewMore={handleTabChange(TabIndex.Resources)}
+                  onViewMore={handleTabChange(TabIndex.Resource)}
                 />
+                {/* TODO remove type assertion */}
                 <ModuleLists
-                  totalAsset={0}
+                  selectedAddress={accountAddress}
+                  totalCount={modulesData.length}
                   onViewMore={handleTabChange(TabIndex.Modules)}
                 />
               </>
@@ -362,10 +383,13 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             />
           </TabPanel>
           <TabPanel p={0}>
-            <ResourceSection />
+            <ResourceSection address={accountAddress} />
           </TabPanel>
           <TabPanel p={0}>
-            <ModuleLists totalAsset={0} />
+            <ModuleLists
+              selectedAddress={accountAddress}
+              totalCount={modulesData.length}
+            />
           </TabPanel>
           <TabPanel p={0}>
             <OpenedProposalsTable
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
index 1e98d508e..1a147822c 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
@@ -7,7 +7,7 @@ import type { ModuleSelectFunction } from "../types";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
 import { FunctionCard } from "lib/components/module/FunctionCard";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 import type { ExposedFunction, Option } from "lib/types";
 
 const functionGridBaseStyle: FlexProps = {
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
index e9548029a..e34ce8ac8 100644
--- a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
+++ b/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
@@ -11,7 +11,7 @@ import type {
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
 import { ModuleCard } from "lib/components/module/ModuleCard";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 import type { Option } from "lib/types";
 
 import { ModuleFunctionBody } from "./ModuleFunctionBody";
diff --git a/src/lib/pages/interaction/component/drawer/drawer.tsx b/src/lib/pages/interaction/component/drawer/drawer.tsx
index 1827f158f..622def4a5 100644
--- a/src/lib/pages/interaction/component/drawer/drawer.tsx
+++ b/src/lib/pages/interaction/component/drawer/drawer.tsx
@@ -12,7 +12,7 @@ import { useState } from "react";
 
 import { ModuleEmptyState } from "../common";
 import { CustomIcon } from "lib/components/icon";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 import type { HexAddr, HumanAddr } from "lib/types";
 
 import { ModuleSelectMainBody } from "./body";
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index 110da0757..e28c254ce 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -14,8 +14,8 @@ import {
 } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
 import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateModuleInput";
-import type { IndexedModule } from "lib/services/moduleService";
-import { useAccountModules } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
+import { useAccountModules } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
 import { bech32AddressToHex, splitModule, unpadHexAddress } from "lib/utils";
 
diff --git a/src/lib/pages/interaction/component/drawer/types.ts b/src/lib/pages/interaction/component/drawer/types.ts
index 80d96c08b..adc7205f6 100644
--- a/src/lib/pages/interaction/component/drawer/types.ts
+++ b/src/lib/pages/interaction/component/drawer/types.ts
@@ -1,4 +1,4 @@
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 import type { HumanAddr, HexAddr, ExposedFunction } from "lib/types";
 
 export interface SelectedAddress {
diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interaction/component/form/ViewArea.tsx
index 790e9a079..3bbc87884 100644
--- a/src/lib/pages/interaction/component/form/ViewArea.tsx
+++ b/src/lib/pages/interaction/component/form/ViewArea.tsx
@@ -15,7 +15,7 @@ import { AbiForm } from "lib/components/abi";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import { DEFAULT_RPC_ERROR } from "lib/data";
-import { useFunctionView } from "lib/services/moduleService";
+import { useFunctionView } from "lib/services/move/moduleService";
 import type {
   Option,
   AbiFormData,
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interaction/component/main/body.tsx
index a7d9c4eb4..15609d0ee 100644
--- a/src/lib/pages/interaction/component/main/body.tsx
+++ b/src/lib/pages/interaction/component/main/body.tsx
@@ -4,7 +4,7 @@ import { ModuleContainer } from "../common";
 import { ExecuteArea, ViewArea } from "../form";
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 import type { ExposedFunction, HexAddr, Option } from "lib/types";
 
 import { SelectedFunctionCard } from "./SelectedFunctionCard";
diff --git a/src/lib/pages/interaction/component/main/panel.tsx b/src/lib/pages/interaction/component/main/panel.tsx
index cb5783ff5..6a75ca2a1 100644
--- a/src/lib/pages/interaction/component/main/panel.tsx
+++ b/src/lib/pages/interaction/component/main/panel.tsx
@@ -11,7 +11,7 @@ import {
 import { FunctionAccordion } from "../common/FunctionAccordion";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { EmptyState } from "lib/components/state";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 import type { ExposedFunction, Option } from "lib/types";
 import { checkAvailability } from "lib/utils";
 
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 2738965c7..6dfce10b4 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -13,8 +13,8 @@ import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { ModuleSourceCode } from "lib/components/module";
 import PageContainer from "lib/components/PageContainer";
-import type { IndexedModule } from "lib/services/moduleService";
-import { useVerifyModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
+import { useVerifyModule } from "lib/services/move/moduleService";
 import type { ExposedFunction, HexAddr, Option } from "lib/types";
 
 import {
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 68614927a..9fa0f7c8b 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -14,7 +14,7 @@ import { UploadCard } from "lib/components/upload/UploadCard";
 import {
   type DecodeModuleQueryResponse,
   useDecodeModule,
-} from "lib/services/moduleService";
+} from "lib/services/move/moduleService";
 import type { HumanAddr, UpgradePolicy, Option } from "lib/types";
 
 interface UploadModuleCardProps {
diff --git a/src/lib/pages/publish-module/formConstants.ts b/src/lib/pages/publish-module/formConstants.ts
index 6b5abd3f1..7332f4acb 100644
--- a/src/lib/pages/publish-module/formConstants.ts
+++ b/src/lib/pages/publish-module/formConstants.ts
@@ -1,6 +1,6 @@
 import type { FieldArrayWithId } from "react-hook-form";
 
-import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
+import type { DecodeModuleQueryResponse } from "lib/services/move/moduleService";
 import type { Option } from "lib/types";
 import { UpgradePolicy } from "lib/types";
 
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 435b86001..053c464d0 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -18,7 +18,7 @@ import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
-import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
+import type { DecodeModuleQueryResponse } from "lib/services/move/moduleService";
 import type { HumanAddr, Option } from "lib/types";
 import { composePublishMsg } from "lib/utils";
 
diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
index 6ef6da893..c1ee81bfa 100644
--- a/src/lib/pages/publish-module/utils.ts
+++ b/src/lib/pages/publish-module/utils.ts
@@ -1,4 +1,4 @@
-import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
+import type { DecodeModuleQueryResponse } from "lib/services/move/moduleService";
 import type { Option } from "lib/types";
 import { UpgradePolicy } from "lib/types";
 import { truncate } from "lib/utils";
diff --git a/src/lib/services/module.ts b/src/lib/services/move/module.ts
similarity index 99%
rename from src/lib/services/module.ts
rename to src/lib/services/move/module.ts
index de0936714..f55fe5a8a 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/move/module.ts
@@ -18,10 +18,6 @@ import {
   snakeToCamel,
 } from "lib/utils";
 
-interface ModuleReturn {
-  module: ResponseModule;
-}
-
 export const getAccountModules = async (
   baseEndpoint: string,
   address: MoveAccountAddr
@@ -43,6 +39,10 @@ export const getAccountModules = async (
   return snakeToCamel(result);
 };
 
+interface ModuleReturn {
+  module: ResponseModule;
+}
+
 export const getAccountModule = async (
   baseEndpoint: string,
   address: MoveAccountAddr,
@@ -102,6 +102,7 @@ export const getFunctionView = async (
   );
   return data.data;
 };
+
 interface DecodeModuleReturn {
   abi: string;
 }
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/move/moduleService.ts
similarity index 100%
rename from src/lib/services/moduleService.ts
rename to src/lib/services/move/moduleService.ts
diff --git a/src/lib/services/move/resource.ts b/src/lib/services/move/resource.ts
new file mode 100644
index 000000000..f2c7b1983
--- /dev/null
+++ b/src/lib/services/move/resource.ts
@@ -0,0 +1,32 @@
+import axios from "axios";
+
+import type { MoveAccountAddr } from "lib/types";
+import type {
+  InternalResource,
+  ResponseResource,
+  ResponseResources,
+} from "lib/types/move/resource";
+import { snakeToCamel } from "lib/utils";
+
+export const getAccountResources = async (
+  baseEndpoint: string,
+  address: MoveAccountAddr
+): Promise<InternalResource[]> => {
+  const result: ResponseResource[] = [];
+
+  const fetchFn = async (paginationKey: string | null) => {
+    const { data } = await axios.get<ResponseResources>(
+      `${baseEndpoint}/initia/move/v1/accounts/${address}/resources${
+        paginationKey ? `?pagination.key=${paginationKey}` : ""
+      }`
+    );
+    result.push(...data.resources);
+    if (data.pagination.next_key) await fetchFn(data.pagination.next_key);
+  };
+
+  await fetchFn(null);
+
+  return snakeToCamel(result).sort((a, b) =>
+    a.structTag < b.structTag ? -1 : 1
+  );
+};
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
new file mode 100644
index 000000000..ef203b64e
--- /dev/null
+++ b/src/lib/services/move/resourceService.ts
@@ -0,0 +1,45 @@
+import type { QueryFunction, UseQueryResult } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+
+import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
+import type { MoveAccountAddr } from "lib/types";
+import type { InternalResource } from "lib/types/move/resource";
+
+import { getAccountResources } from "./resource";
+
+export interface IndexedResource extends InternalResource {
+  address: string;
+  move_resources: string;
+  raw_bytes: string;
+  struct_tag: string;
+}
+
+// const indexResourceResponse = (resource: InternalResource): IndexedResource => {
+//   const parsedAbi = parseJsonABI(module.abi);
+//   const { view, execute } = splitViewExecuteFunctions(
+//     parsedAbi.exposed_functions
+//   );
+//   return {
+//     ...module,
+//     parsedAbi,
+//     viewFunctions: view,
+//     executeFunctions: execute,
+//     searchedFn: parsedAbi.exposed_functions.find(
+//       (fn) => fn.name === functionName
+//     ),
+//   };
+// };
+
+export const useAccountResources = ({
+  address,
+}: {
+  address: MoveAccountAddr;
+}): UseQueryResult<IndexedResource[]> => {
+  const baseEndpoint = useBaseApiRoute("rest");
+  const queryFn: QueryFunction<InternalResource[]> = () =>
+    getAccountResources(baseEndpoint, address);
+  return useQuery(
+    [CELATONE_QUERY_KEYS.RESOURCE_MODULES, baseEndpoint, address],
+    queryFn
+  );
+};
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 4fd34b3b3..a88db8e0c 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -1,4 +1,5 @@
 export * from "./currency";
+export * from "./move";
 export * from "./tx";
 export * from "./code";
 export * from "./common";
@@ -15,5 +16,4 @@ export * from "./upload";
 export * from "./block";
 export * from "./asset";
 export * from "./converter";
-export * from "./abi";
 export * from "./json";
diff --git a/src/lib/types/abi.ts b/src/lib/types/move/abi.ts
similarity index 89%
rename from src/lib/types/abi.ts
rename to src/lib/types/move/abi.ts
index c4c9b2b73..823716277 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/move/abi.ts
@@ -1,5 +1,6 @@
-import type { Option } from "./common";
-import type { SnakeToCamelCaseNested } from "./converter";
+import type { Option } from "../common";
+import type { SnakeToCamelCaseNested } from "../converter";
+import type { Pagination } from "../rest";
 
 export enum UpgradePolicy {
   ARBITRARY = "ARBITRARY",
@@ -38,12 +39,7 @@ export interface ResponseModule {
 
 export interface ResponseModules {
   modules: ResponseModule[];
-  pagination: ModulePagination;
-}
-
-export interface ModulePagination {
-  next_key: null;
-  total: string;
+  pagination: Pagination;
 }
 
 // TODO: change address type to HexAddr after figuring out how to correctly infer NominalType intersection
diff --git a/src/lib/types/move/index.ts b/src/lib/types/move/index.ts
new file mode 100644
index 000000000..0f4553e08
--- /dev/null
+++ b/src/lib/types/move/index.ts
@@ -0,0 +1,2 @@
+export * from "./abi";
+export * from "./resource";
diff --git a/src/lib/types/move/resource.ts b/src/lib/types/move/resource.ts
new file mode 100644
index 000000000..738644ea7
--- /dev/null
+++ b/src/lib/types/move/resource.ts
@@ -0,0 +1,16 @@
+import type { SnakeToCamelCaseNested } from "../converter";
+import type { Pagination } from "../rest";
+
+export interface ResponseResource {
+  address: string;
+  move_resources: string;
+  raw_bytes: string;
+  struct_tag: string;
+}
+
+export interface ResponseResources {
+  resources: ResponseResource[];
+  pagination: Pagination;
+}
+
+export type InternalResource = SnakeToCamelCaseNested<ResponseResource>;
diff --git a/src/lib/types/rest.ts b/src/lib/types/rest.ts
new file mode 100644
index 000000000..d42c44ea9
--- /dev/null
+++ b/src/lib/types/rest.ts
@@ -0,0 +1,4 @@
+export interface Pagination {
+  next_key?: string;
+  total: number;
+}
diff --git a/yarn.lock b/yarn.lock
index c7c9a52ce..1c2e4b7a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3431,7 +3431,7 @@
   dependencies:
     browser-headers "^0.4.1"
 
-"@initia/initia.js@^0.1.8":
+"@initia/initia.js@0.1.8":
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.8.tgz#f1d1d12a37788054061b2e5f9db55c33dcc5f67c"
   integrity sha512-Q7GhXHgIZ3th6k2vou+e+CO4C5JA/JeA6w3oP/kb2cxbqOAOM1+ybN/8oMtHNApxh/gpmCWUXi7axHV5v/91UA==
@@ -3453,7 +3453,7 @@
     tmp "^0.2.1"
     ws "^7.5.9"
 
-"@initia/initia.proto@^0.1.11":
+"@initia/initia.proto@0.1.11", "@initia/initia.proto@^0.1.11":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.11.tgz#39016bbb4d15f06aaec17e56d6f431ddadc600ce"
   integrity sha512-G9HRTy5xfza6hTjYLuLgcmJWjSDsnLXnc2HvWceDcaSlHp212rMH07+gpazwY0L6aCm3uWyqLh4Yig60L3AaRA==

From 017eb024e426d231e8b7f023ed46cf5a9a09fb4c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 11:00:35 +0700
Subject: [PATCH 099/368] feat: interaction query param

---
 CHANGELOG.md                                  |  1 +
 .../component/common/EmptyState.tsx           |  0
 .../component/common/FunctionAccordion.tsx    |  3 +-
 .../common/InteractionTypeSwitch.tsx          |  0
 .../component/common/ModuleContainer.tsx      |  0
 .../component/common/index.ts                 |  0
 .../drawer/body/ModuleFunctionBody.tsx        |  0
 .../drawer/body/ModuleSelectMainBody.tsx      |  0
 .../component/drawer/body/index.ts            |  0
 .../component/drawer/drawer.tsx               | 25 ++++-
 .../component/drawer/index.tsx                |  0
 .../drawer/selector/SelectorDisplay.tsx       |  0
 .../drawer/selector/SelectorInput.tsx         |  2 +-
 .../component/drawer/selector/index.tsx       |  0
 .../component/drawer/trigger.tsx              |  0
 .../component/drawer/types.ts                 |  0
 .../component/form/ExecuteArea.tsx            |  0
 .../component/form/ViewArea.tsx               |  0
 .../component/form/index.ts                   |  0
 .../component/index.ts                        |  0
 .../component/main/SelectedFunctionCard.tsx   |  0
 .../component/main/body.tsx                   |  0
 .../component/main/index.ts                   |  0
 .../component/main/panel.tsx                  |  9 +-
 .../hooks/useValidateModuleInput.ts           |  0
 .../pages/{interaction => interact}/index.tsx | 92 +++++++++++++++++--
 .../components/ModulePublishCard.tsx          |  8 +-
 src/lib/services/moduleService.ts             |  2 +
 src/pages/[network]/interact/index.tsx        |  3 +
 src/pages/[network]/interaction/index.tsx     |  3 -
 src/pages/interact/index.tsx                  |  3 +
 src/pages/interaction/index.tsx               |  3 -
 32 files changed, 125 insertions(+), 29 deletions(-)
 rename src/lib/pages/{interaction => interact}/component/common/EmptyState.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/common/FunctionAccordion.tsx (93%)
 rename src/lib/pages/{interaction => interact}/component/common/InteractionTypeSwitch.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/common/ModuleContainer.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/common/index.ts (100%)
 rename src/lib/pages/{interaction => interact}/component/drawer/body/ModuleFunctionBody.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/drawer/body/ModuleSelectMainBody.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/drawer/body/index.ts (100%)
 rename src/lib/pages/{interaction => interact}/component/drawer/drawer.tsx (80%)
 rename src/lib/pages/{interaction => interact}/component/drawer/index.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/drawer/selector/SelectorDisplay.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/drawer/selector/SelectorInput.tsx (97%)
 rename src/lib/pages/{interaction => interact}/component/drawer/selector/index.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/drawer/trigger.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/drawer/types.ts (100%)
 rename src/lib/pages/{interaction => interact}/component/form/ExecuteArea.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/form/ViewArea.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/form/index.ts (100%)
 rename src/lib/pages/{interaction => interact}/component/index.ts (100%)
 rename src/lib/pages/{interaction => interact}/component/main/SelectedFunctionCard.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/main/body.tsx (100%)
 rename src/lib/pages/{interaction => interact}/component/main/index.ts (100%)
 rename src/lib/pages/{interaction => interact}/component/main/panel.tsx (94%)
 rename src/lib/pages/{interaction => interact}/hooks/useValidateModuleInput.ts (100%)
 rename src/lib/pages/{interaction => interact}/index.tsx (61%)
 create mode 100644 src/pages/[network]/interact/index.tsx
 delete mode 100644 src/pages/[network]/interaction/index.tsx
 create mode 100644 src/pages/interact/index.tsx
 delete mode 100644 src/pages/interaction/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d906ada40..81090d1d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
diff --git a/src/lib/pages/interaction/component/common/EmptyState.tsx b/src/lib/pages/interact/component/common/EmptyState.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/common/EmptyState.tsx
rename to src/lib/pages/interact/component/common/EmptyState.tsx
diff --git a/src/lib/pages/interaction/component/common/FunctionAccordion.tsx b/src/lib/pages/interact/component/common/FunctionAccordion.tsx
similarity index 93%
rename from src/lib/pages/interaction/component/common/FunctionAccordion.tsx
rename to src/lib/pages/interact/component/common/FunctionAccordion.tsx
index 97d03c2b3..ce6d6423b 100644
--- a/src/lib/pages/interaction/component/common/FunctionAccordion.tsx
+++ b/src/lib/pages/interact/component/common/FunctionAccordion.tsx
@@ -6,7 +6,6 @@ import {
   Flex,
   Text,
 } from "@chakra-ui/react";
-import type { Dispatch, SetStateAction } from "react";
 
 import { CountBadge, FunctionCard } from "lib/components/module";
 import type { ExposedFunction, Option } from "lib/types";
@@ -18,7 +17,7 @@ interface FunctionAccordionProps {
   isEmpty: boolean;
   triggerText: string;
   selectedFn: Option<ExposedFunction>;
-  setSelectedFn: Dispatch<SetStateAction<Option<ExposedFunction>>>;
+  setSelectedFn: (fn: ExposedFunction) => void;
 }
 
 export const FunctionAccordion = ({
diff --git a/src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx b/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx
rename to src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx
diff --git a/src/lib/pages/interaction/component/common/ModuleContainer.tsx b/src/lib/pages/interact/component/common/ModuleContainer.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/common/ModuleContainer.tsx
rename to src/lib/pages/interact/component/common/ModuleContainer.tsx
diff --git a/src/lib/pages/interaction/component/common/index.ts b/src/lib/pages/interact/component/common/index.ts
similarity index 100%
rename from src/lib/pages/interaction/component/common/index.ts
rename to src/lib/pages/interact/component/common/index.ts
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx
rename to src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx
diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx
rename to src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
diff --git a/src/lib/pages/interaction/component/drawer/body/index.ts b/src/lib/pages/interact/component/drawer/body/index.ts
similarity index 100%
rename from src/lib/pages/interaction/component/drawer/body/index.ts
rename to src/lib/pages/interact/component/drawer/body/index.ts
diff --git a/src/lib/pages/interaction/component/drawer/drawer.tsx b/src/lib/pages/interact/component/drawer/drawer.tsx
similarity index 80%
rename from src/lib/pages/interaction/component/drawer/drawer.tsx
rename to src/lib/pages/interact/component/drawer/drawer.tsx
index 1827f158f..1eab65deb 100644
--- a/src/lib/pages/interaction/component/drawer/drawer.tsx
+++ b/src/lib/pages/interact/component/drawer/drawer.tsx
@@ -8,12 +8,13 @@ import {
   DrawerBody,
   Flex,
 } from "@chakra-ui/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { ModuleEmptyState } from "../common";
+import { useConvertHexAddress } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import type { IndexedModule } from "lib/services/moduleService";
-import type { HexAddr, HumanAddr } from "lib/types";
+import type { HexAddr, HumanAddr, Option } from "lib/types";
 
 import { ModuleSelectMainBody } from "./body";
 import { ModuleSelector } from "./selector";
@@ -23,23 +24,37 @@ import type {
   ModuleSelectFunction,
 } from "./types";
 
-interface ModuleSelectDrawerTriggerProps {
+interface ModuleSelectDrawerProps {
   isOpen: boolean;
   onClose: () => void;
+  hexAddress: Option<HexAddr>;
   handleModuleSelect: ModuleSelectFunction;
 }
 
 export const ModuleSelectDrawer = ({
   isOpen,
   onClose,
+  hexAddress,
   handleModuleSelect,
-}: ModuleSelectDrawerTriggerProps) => {
-  const [modules, setModules] = useState<IndexedModule[]>();
+}: ModuleSelectDrawerProps) => {
+  const convertHexAddr = useConvertHexAddress();
+
   const [mode, setMode] = useState<DisplayMode>("input");
   const [selectedAddress, setSelectedAddress] = useState<SelectedAddress>({
     address: "" as HumanAddr,
     hex: "" as HexAddr,
   });
+  const [modules, setModules] = useState<IndexedModule[]>();
+
+  useEffect(() => {
+    if (hexAddress) {
+      // setMode("display");
+      // setSelectedAddress({
+      //   address: convertHexAddr(hexAddress),
+      //   hex: hexAddress,
+      // });
+    }
+  }, [convertHexAddr, hexAddress]);
 
   return (
     <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
diff --git a/src/lib/pages/interaction/component/drawer/index.tsx b/src/lib/pages/interact/component/drawer/index.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/drawer/index.tsx
rename to src/lib/pages/interact/component/drawer/index.tsx
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorDisplay.tsx b/src/lib/pages/interact/component/drawer/selector/SelectorDisplay.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/drawer/selector/SelectorDisplay.tsx
rename to src/lib/pages/interact/component/drawer/selector/SelectorDisplay.tsx
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx
similarity index 97%
rename from src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
rename to src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx
index 110da0757..8b8f6c7dc 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx
@@ -13,7 +13,7 @@ import {
   useExampleAddresses,
 } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
-import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateModuleInput";
+import { useValidateModuleInput } from "lib/pages/interact/hooks/useValidateModuleInput";
 import type { IndexedModule } from "lib/services/moduleService";
 import { useAccountModules } from "lib/services/moduleService";
 import type { MoveAccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
diff --git a/src/lib/pages/interaction/component/drawer/selector/index.tsx b/src/lib/pages/interact/component/drawer/selector/index.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/drawer/selector/index.tsx
rename to src/lib/pages/interact/component/drawer/selector/index.tsx
diff --git a/src/lib/pages/interaction/component/drawer/trigger.tsx b/src/lib/pages/interact/component/drawer/trigger.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/drawer/trigger.tsx
rename to src/lib/pages/interact/component/drawer/trigger.tsx
diff --git a/src/lib/pages/interaction/component/drawer/types.ts b/src/lib/pages/interact/component/drawer/types.ts
similarity index 100%
rename from src/lib/pages/interaction/component/drawer/types.ts
rename to src/lib/pages/interact/component/drawer/types.ts
diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/form/ExecuteArea.tsx
rename to src/lib/pages/interact/component/form/ExecuteArea.tsx
diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/form/ViewArea.tsx
rename to src/lib/pages/interact/component/form/ViewArea.tsx
diff --git a/src/lib/pages/interaction/component/form/index.ts b/src/lib/pages/interact/component/form/index.ts
similarity index 100%
rename from src/lib/pages/interaction/component/form/index.ts
rename to src/lib/pages/interact/component/form/index.ts
diff --git a/src/lib/pages/interaction/component/index.ts b/src/lib/pages/interact/component/index.ts
similarity index 100%
rename from src/lib/pages/interaction/component/index.ts
rename to src/lib/pages/interact/component/index.ts
diff --git a/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx b/src/lib/pages/interact/component/main/SelectedFunctionCard.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx
rename to src/lib/pages/interact/component/main/SelectedFunctionCard.tsx
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interact/component/main/body.tsx
similarity index 100%
rename from src/lib/pages/interaction/component/main/body.tsx
rename to src/lib/pages/interact/component/main/body.tsx
diff --git a/src/lib/pages/interaction/component/main/index.ts b/src/lib/pages/interact/component/main/index.ts
similarity index 100%
rename from src/lib/pages/interaction/component/main/index.ts
rename to src/lib/pages/interact/component/main/index.ts
diff --git a/src/lib/pages/interaction/component/main/panel.tsx b/src/lib/pages/interact/component/main/panel.tsx
similarity index 94%
rename from src/lib/pages/interaction/component/main/panel.tsx
rename to src/lib/pages/interact/component/main/panel.tsx
index cb5783ff5..05328cd90 100644
--- a/src/lib/pages/interaction/component/main/panel.tsx
+++ b/src/lib/pages/interact/component/main/panel.tsx
@@ -40,7 +40,7 @@ const RenderFunctions = ({
 }: {
   states: FunctionStates;
   selectedFn: Option<ExposedFunction>;
-  setSelectedFn: Dispatch<SetStateAction<Option<ExposedFunction>>>;
+  setSelectedFn: (fn: ExposedFunction) => void;
 }) => {
   if (!states.filteredFunctions)
     return (
@@ -75,16 +75,19 @@ const RenderFunctions = ({
 
 interface FunctionSelectPanelProps {
   module: Option<IndexedModule>;
+  tab: InteractionTabs;
+  setTab: Dispatch<SetStateAction<InteractionTabs>>;
   selectedFn: Option<ExposedFunction>;
-  setSelectedFn: Dispatch<SetStateAction<Option<ExposedFunction>>>;
+  setSelectedFn: (fn: ExposedFunction) => void;
 }
 
 export const FunctionSelectPanel = ({
   module,
+  tab,
+  setTab,
   selectedFn,
   setSelectedFn,
 }: FunctionSelectPanelProps) => {
-  const [tab, setTab] = useState(InteractionTabs.VIEW_MODULE);
   const [keyword, setKeyword] = useState("");
 
   const functionStates = useMemo<FunctionStates>(() => {
diff --git a/src/lib/pages/interaction/hooks/useValidateModuleInput.ts b/src/lib/pages/interact/hooks/useValidateModuleInput.ts
similarity index 100%
rename from src/lib/pages/interaction/hooks/useValidateModuleInput.ts
rename to src/lib/pages/interact/hooks/useValidateModuleInput.ts
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interact/index.tsx
similarity index 61%
rename from src/lib/pages/interaction/index.tsx
rename to src/lib/pages/interact/index.tsx
index 2738965c7..72dd6db40 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interact/index.tsx
@@ -7,35 +7,80 @@ import {
   Text,
   Box,
 } from "@chakra-ui/react";
+import { useRouter } from "next/router";
 import { useCallback, useState } from "react";
 
+import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { ModuleSourceCode } from "lib/components/module";
 import PageContainer from "lib/components/PageContainer";
 import type { IndexedModule } from "lib/services/moduleService";
-import { useVerifyModule } from "lib/services/moduleService";
-import type { ExposedFunction, HexAddr, Option } from "lib/types";
+import { useAccountModules, useVerifyModule } from "lib/services/moduleService";
+import type {
+  ExposedFunction,
+  HexAddr,
+  MoveAccountAddr,
+  Option,
+} from "lib/types";
+import { getFirstQueryParam } from "lib/utils";
 
 import {
   ModuleSelectDrawerTrigger,
   ModuleSelectDrawer,
   FunctionSelectPanel,
   FunctionSelectBody,
+  InteractionTabs,
 } from "./component";
 
-export const Interaction = () => {
+export const Interact = () => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
   const { isOpen, onClose, onOpen } = useDisclosure();
 
   const [module, setModule] = useState<IndexedModule>();
+  const [selectedType, setSelectedType] = useState<InteractionTabs>(
+    InteractionTabs.VIEW_MODULE
+  );
   const [selectedFn, setSelectedFn] = useState<ExposedFunction>();
 
+  const handleSetSelectedType = (type: string) =>
+    setSelectedType(
+      type === "execute"
+        ? InteractionTabs.EXECUTE_MODULE
+        : InteractionTabs.VIEW_MODULE
+    );
+
   const handleModuleSelect = useCallback(
     (selectedModule: IndexedModule, fn?: ExposedFunction) => {
       setModule(selectedModule);
       setSelectedFn(fn);
+      navigate({
+        pathname: "/interact",
+        query: {
+          address: selectedModule.address,
+          moduleName: selectedModule.moduleName,
+          ...(fn && { functionName: fn.name }),
+        },
+        options: { shallow: true },
+      });
     },
-    []
+    [navigate]
+  );
+
+  const handleFunctionSelect = useCallback(
+    (fn: ExposedFunction) => {
+      setSelectedFn(fn);
+      navigate({
+        pathname: "/interact",
+        query: {
+          ...router.query,
+          functionName: fn.name,
+        },
+        options: { shallow: true },
+      });
+    },
+    [navigate, router.query]
   );
 
   const { data: verificationData } = useVerifyModule({
@@ -43,6 +88,36 @@ export const Interaction = () => {
     moduleName: module?.moduleName,
   });
 
+  const address = getFirstQueryParam(router.query.address);
+  const moduleName = getFirstQueryParam(router.query.moduleName);
+  const functionName = getFirstQueryParam(router.query.functionName);
+  let functionType = getFirstQueryParam(router.query.functionType);
+  useAccountModules({
+    address: address as MoveAccountAddr,
+    moduleName,
+    functionName,
+    options: {
+      refetchOnWindowFocus: false,
+      enabled: !!address && !!moduleName,
+      retry: false,
+      onSuccess: (data) => {
+        if (!Array.isArray(data)) {
+          setModule(data);
+          if (functionName) {
+            const fn = [...data.viewFunctions, ...data.executeFunctions].find(
+              (exposedFn) => exposedFn.name === functionName
+            );
+            if (fn) {
+              functionType = fn.is_view ? "view" : "execute";
+              setSelectedFn(fn);
+            }
+          }
+          if (functionType) handleSetSelectedType(functionType);
+        }
+      },
+    },
+  });
+
   return (
     <>
       <PageContainer
@@ -81,9 +156,7 @@ export const Interaction = () => {
                 </LabelText>
                 <LabelText label="Friends" labelWeight={600}>
                   <Text variant="body2" color="gray.400">
-                    {module?.parsedAbi.friends
-                      ? JSON.stringify(module?.parsedAbi.friends)
-                      : "N/A"}
+                    {JSON.stringify(module.parsedAbi.friends)}
                   </Text>
                 </LabelText>
               </Flex>
@@ -117,6 +190,7 @@ export const Interaction = () => {
           <ModuleSelectDrawer
             isOpen={isOpen}
             onClose={onClose}
+            hexAddress={module?.address}
             handleModuleSelect={handleModuleSelect}
           />
         </Flex>
@@ -128,8 +202,10 @@ export const Interaction = () => {
           {/* Left side */}
           <FunctionSelectPanel
             module={module}
+            tab={selectedType}
+            setTab={setSelectedType}
             selectedFn={selectedFn}
-            setSelectedFn={setSelectedFn}
+            setSelectedFn={handleFunctionSelect}
           />
           {/* Right side */}
           <FunctionSelectBody
diff --git a/src/lib/pages/publish-module/components/ModulePublishCard.tsx b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
index 8afc4aa66..05abdf3fe 100644
--- a/src/lib/pages/publish-module/components/ModulePublishCard.tsx
+++ b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
@@ -89,11 +89,11 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
           variant="outline-white"
           onClick={() =>
             navigate({
-              pathname: "/interaction",
+              pathname: "/interact",
               query: {
-                functionType: "view",
                 address: decodeRes?.abi.address,
                 moduleName: decodeRes?.abi.name,
+                functionType: "view",
               },
             })
           }
@@ -105,11 +105,11 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
           variant="outline-white"
           onClick={() =>
             navigate({
-              pathname: "/interaction",
+              pathname: "/interact",
               query: {
-                functionType: "execute",
                 address: decodeRes?.abi.address,
                 moduleName: decodeRes?.abi.name,
+                functionType: "execute",
               },
             })
           }
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index bfc9489ce..8a35e48da 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -40,6 +40,7 @@ import {
 } from "./module";
 
 export interface IndexedModule extends InternalModule {
+  address: HexAddr;
   parsedAbi: ResponseABI;
   viewFunctions: ExposedFunction[];
   executeFunctions: ExposedFunction[];
@@ -56,6 +57,7 @@ const indexModuleResponse = (
   );
   return {
     ...module,
+    address: module.address as HexAddr,
     parsedAbi,
     viewFunctions: view,
     executeFunctions: execute,
diff --git a/src/pages/[network]/interact/index.tsx b/src/pages/[network]/interact/index.tsx
new file mode 100644
index 000000000..e84e5e0cf
--- /dev/null
+++ b/src/pages/[network]/interact/index.tsx
@@ -0,0 +1,3 @@
+import { Interact } from "lib/pages/interact";
+
+export default Interact;
diff --git a/src/pages/[network]/interaction/index.tsx b/src/pages/[network]/interaction/index.tsx
deleted file mode 100644
index 6812f4848..000000000
--- a/src/pages/[network]/interaction/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Interaction } from "lib/pages/interaction";
-
-export default Interaction;
diff --git a/src/pages/interact/index.tsx b/src/pages/interact/index.tsx
new file mode 100644
index 000000000..e84e5e0cf
--- /dev/null
+++ b/src/pages/interact/index.tsx
@@ -0,0 +1,3 @@
+import { Interact } from "lib/pages/interact";
+
+export default Interact;
diff --git a/src/pages/interaction/index.tsx b/src/pages/interaction/index.tsx
deleted file mode 100644
index 6812f4848..000000000
--- a/src/pages/interaction/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Interaction } from "lib/pages/interaction";
-
-export default Interaction;

From 4f16e73624dfa8ce5f4bfe980b3a34266fc7138e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 13:45:58 +0700
Subject: [PATCH 100/368] fix: refetch modules

---
 src/lib/layout/navbar/index.tsx               |  2 +-
 .../{main/body.tsx => FunctionSelectBody.tsx} |  4 +-
 .../panel.tsx => FunctionSelectPanel.tsx}     | 33 +++++-----
 .../{main => }/SelectedFunctionCard.tsx       |  0
 .../component/common/FunctionAccordion.tsx    | 66 +++++++++----------
 .../pages/interact/component/common/index.ts  |  1 +
 .../{drawer.tsx => ModuleSelectDrawer.tsx}    | 44 ++++++++++---
 ...gger.tsx => ModuleSelectDrawerTrigger.tsx} |  0
 .../pages/interact/component/drawer/index.ts  |  2 +
 .../pages/interact/component/drawer/index.tsx |  2 -
 .../drawer/selector/SelectorInput.tsx         |  3 +-
 .../interact/component/form/ExecuteArea.tsx   |  4 +-
 .../interact/component/form/ViewArea.tsx      |  4 +-
 src/lib/pages/interact/component/index.ts     |  3 +-
 .../pages/interact/component/main/index.ts    |  2 -
 src/lib/pages/interact/index.tsx              | 22 +++++--
 src/lib/services/moduleService.ts             |  2 +-
 17 files changed, 115 insertions(+), 79 deletions(-)
 rename src/lib/pages/interact/component/{main/body.tsx => FunctionSelectBody.tsx} (96%)
 rename src/lib/pages/interact/component/{main/panel.tsx => FunctionSelectPanel.tsx} (90%)
 rename src/lib/pages/interact/component/{main => }/SelectedFunctionCard.tsx (100%)
 rename src/lib/pages/interact/component/drawer/{drawer.tsx => ModuleSelectDrawer.tsx} (73%)
 rename src/lib/pages/interact/component/drawer/{trigger.tsx => ModuleSelectDrawerTrigger.tsx} (100%)
 create mode 100644 src/lib/pages/interact/component/drawer/index.ts
 delete mode 100644 src/lib/pages/interact/component/drawer/index.tsx
 delete mode 100644 src/lib/pages/interact/component/main/index.ts

diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 3ced0e782..a59649b38 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -95,7 +95,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
                 },
                 {
                   name: "View / Execute",
-                  slug: "/interaction",
+                  slug: "/interact",
                   icon: "execute" as IconKeys,
                 },
                 {
diff --git a/src/lib/pages/interact/component/main/body.tsx b/src/lib/pages/interact/component/FunctionSelectBody.tsx
similarity index 96%
rename from src/lib/pages/interact/component/main/body.tsx
rename to src/lib/pages/interact/component/FunctionSelectBody.tsx
index a7d9c4eb4..389522e47 100644
--- a/src/lib/pages/interact/component/main/body.tsx
+++ b/src/lib/pages/interact/component/FunctionSelectBody.tsx
@@ -1,12 +1,12 @@
 import { Button, Flex } from "@chakra-ui/react";
 
-import { ModuleContainer } from "../common";
-import { ExecuteArea, ViewArea } from "../form";
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction, HexAddr, Option } from "lib/types";
 
+import { ModuleContainer } from "./common";
+import { ExecuteArea, ViewArea } from "./form";
 import { SelectedFunctionCard } from "./SelectedFunctionCard";
 
 interface FunctionSelectBodyProps {
diff --git a/src/lib/pages/interact/component/main/panel.tsx b/src/lib/pages/interact/component/FunctionSelectPanel.tsx
similarity index 90%
rename from src/lib/pages/interact/component/main/panel.tsx
rename to src/lib/pages/interact/component/FunctionSelectPanel.tsx
index ccd89f070..60bd72b1c 100644
--- a/src/lib/pages/interact/component/main/panel.tsx
+++ b/src/lib/pages/interact/component/FunctionSelectPanel.tsx
@@ -2,19 +2,20 @@ import { Accordion, Flex } from "@chakra-ui/react";
 import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState } from "react";
 
-import {
-  NoImageEmptyState,
-  ModuleContainer,
-  InteractionTabs,
-  InteractionTypeSwitch,
-} from "../common";
-import { FunctionAccordion } from "../common/FunctionAccordion";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction, Option } from "lib/types";
 import { checkAvailability } from "lib/utils";
 
+import {
+  NoImageEmptyState,
+  ModuleContainer,
+  InteractionTabs,
+  InteractionTypeSwitch,
+  FunctionAccordion,
+} from "./common";
+
 const EmptyStateRender = ({ desc }: { desc: string }) => (
   <ModuleContainer h="full">
     <EmptyState
@@ -107,9 +108,8 @@ export const FunctionSelectPanel = ({
     };
   }, [keyword, tab, module?.executeFunctions, module?.viewFunctions]);
 
-  // TODO: find a better way to handle height
   return (
-    <Flex direction="column" maxH="calc(100vh - 364px)" overflow="scroll">
+    <div>
       <InputWithIcon
         iconPosition="start"
         value={keyword}
@@ -122,11 +122,14 @@ export const FunctionSelectPanel = ({
         my={3}
         counts={[module?.viewFunctions.length, module?.executeFunctions.length]}
       />
-      <RenderFunctions
-        states={functionStates}
-        selectedFn={selectedFn}
-        setSelectedFn={setSelectedFn}
-      />
-    </Flex>
+      {/* TODO: find a better way to handle height */}
+      <Flex direction="column" maxH="calc(100vh - 400px)" overflow="scroll">
+        <RenderFunctions
+          states={functionStates}
+          selectedFn={selectedFn}
+          setSelectedFn={setSelectedFn}
+        />
+      </Flex>
+    </div>
   );
 };
diff --git a/src/lib/pages/interact/component/main/SelectedFunctionCard.tsx b/src/lib/pages/interact/component/SelectedFunctionCard.tsx
similarity index 100%
rename from src/lib/pages/interact/component/main/SelectedFunctionCard.tsx
rename to src/lib/pages/interact/component/SelectedFunctionCard.tsx
diff --git a/src/lib/pages/interact/component/common/FunctionAccordion.tsx b/src/lib/pages/interact/component/common/FunctionAccordion.tsx
index ce6d6423b..9d1095e21 100644
--- a/src/lib/pages/interact/component/common/FunctionAccordion.tsx
+++ b/src/lib/pages/interact/component/common/FunctionAccordion.tsx
@@ -26,38 +26,36 @@ export const FunctionAccordion = ({
   triggerText,
   selectedFn,
   setSelectedFn,
-}: FunctionAccordionProps) => {
-  return (
-    <AccordionItem bg="background.main" py={1}>
-      <h6>
-        <AccordionButton>
-          <Flex align="center" justify="space-between" gap={2}>
-            <Text variant="body2" color="text.dark">
-              {triggerText}
-            </Text>
-            <CountBadge count={filteredFns.length} variant="common" />
-          </Flex>
-          <AccordionIcon color="gray.600" ml="auto" />
-        </AccordionButton>
-      </h6>
-      <AccordionPanel py={3} px={0}>
-        <Flex flexDirection="column" gap={1}>
-          {filteredFns.length ? (
-            filteredFns.map((fn) => (
-              <FunctionCard
-                key={fn.name}
-                variant={selectedFn?.name === fn.name ? "selected" : "common"}
-                exposedFn={fn}
-                onFunctionSelect={setSelectedFn}
-              />
-            ))
-          ) : (
-            <NoImageEmptyState
-              desc={isEmpty ? "No function" : "No matching function found"}
-            />
-          )}
+}: FunctionAccordionProps) => (
+  <AccordionItem bg="background.main" py={1}>
+    <h6>
+      <AccordionButton>
+        <Flex align="center" justify="space-between" gap={2}>
+          <Text variant="body2" color="text.dark">
+            {triggerText}
+          </Text>
+          <CountBadge count={filteredFns.length} variant="common" />
         </Flex>
-      </AccordionPanel>
-    </AccordionItem>
-  );
-};
+        <AccordionIcon color="gray.600" ml="auto" />
+      </AccordionButton>
+    </h6>
+    <AccordionPanel py={3} px={0}>
+      <Flex flexDirection="column" gap={1}>
+        {filteredFns.length ? (
+          filteredFns.map((fn) => (
+            <FunctionCard
+              key={fn.name}
+              variant={selectedFn?.name === fn.name ? "selected" : "common"}
+              exposedFn={fn}
+              onFunctionSelect={setSelectedFn}
+            />
+          ))
+        ) : (
+          <NoImageEmptyState
+            desc={isEmpty ? "No function" : "No matching function found"}
+          />
+        )}
+      </Flex>
+    </AccordionPanel>
+  </AccordionItem>
+);
diff --git a/src/lib/pages/interact/component/common/index.ts b/src/lib/pages/interact/component/common/index.ts
index b1a205f52..067ae44cc 100644
--- a/src/lib/pages/interact/component/common/index.ts
+++ b/src/lib/pages/interact/component/common/index.ts
@@ -1,3 +1,4 @@
 export * from "./EmptyState";
+export * from "./FunctionAccordion";
 export * from "./InteractionTypeSwitch";
 export * from "./ModuleContainer";
diff --git a/src/lib/pages/interact/component/drawer/drawer.tsx b/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
similarity index 73%
rename from src/lib/pages/interact/component/drawer/drawer.tsx
rename to src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
index 1eab65deb..da3a7dda1 100644
--- a/src/lib/pages/interact/component/drawer/drawer.tsx
+++ b/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
@@ -13,8 +13,11 @@ import { useEffect, useState } from "react";
 import { ModuleEmptyState } from "../common";
 import { useConvertHexAddress } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import type { IndexedModule } from "lib/services/moduleService";
-import type { HexAddr, HumanAddr, Option } from "lib/types";
+import {
+  useAccountModules,
+  type IndexedModule,
+} from "lib/services/moduleService";
+import type { HexAddr, HumanAddr, MoveAccountAddr, Option } from "lib/types";
 
 import { ModuleSelectMainBody } from "./body";
 import { ModuleSelector } from "./selector";
@@ -46,16 +49,41 @@ export const ModuleSelectDrawer = ({
   });
   const [modules, setModules] = useState<IndexedModule[]>();
 
+  const { refetch } = useAccountModules({
+    address: selectedAddress.hex as MoveAccountAddr,
+    moduleName: undefined,
+    functionName: undefined,
+    options: {
+      refetchOnWindowFocus: false,
+      enabled: false,
+      retry: false,
+      onSuccess: (data) => {
+        if (Array.isArray(data)) setModules(data);
+      },
+    },
+  });
+
   useEffect(() => {
     if (hexAddress) {
-      // setMode("display");
-      // setSelectedAddress({
-      //   address: convertHexAddr(hexAddress),
-      //   hex: hexAddress,
-      // });
+      setMode("display");
+      setSelectedAddress({
+        address: convertHexAddr(hexAddress),
+        hex: hexAddress,
+      });
+    } else {
+      setMode("input");
+      setSelectedAddress({
+        address: "" as HumanAddr,
+        hex: "" as HexAddr,
+      });
+      setModules(undefined);
     }
   }, [convertHexAddr, hexAddress]);
 
+  useEffect(() => {
+    if (isOpen && selectedAddress.hex) refetch();
+  }, [isOpen, refetch, selectedAddress.hex]);
+
   return (
     <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
       <DrawerOverlay />
@@ -73,9 +101,9 @@ export const ModuleSelectDrawer = ({
               mode={mode}
               selectedAddress={selectedAddress}
               setSelectedAddress={setSelectedAddress}
+              setModules={setModules}
               setMode={setMode}
               handleModuleSelect={handleModuleSelect}
-              setModules={setModules}
               closeModal={onClose}
             />
             {modules ? (
diff --git a/src/lib/pages/interact/component/drawer/trigger.tsx b/src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx
similarity index 100%
rename from src/lib/pages/interact/component/drawer/trigger.tsx
rename to src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx
diff --git a/src/lib/pages/interact/component/drawer/index.ts b/src/lib/pages/interact/component/drawer/index.ts
new file mode 100644
index 000000000..fce144444
--- /dev/null
+++ b/src/lib/pages/interact/component/drawer/index.ts
@@ -0,0 +1,2 @@
+export * from "./ModuleSelectDrawer";
+export * from "./ModuleSelectDrawerTrigger";
diff --git a/src/lib/pages/interact/component/drawer/index.tsx b/src/lib/pages/interact/component/drawer/index.tsx
deleted file mode 100644
index 0fa92b036..000000000
--- a/src/lib/pages/interact/component/drawer/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./drawer";
-export * from "./trigger";
diff --git a/src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx
index 0b4e91d94..e51e61b6c 100644
--- a/src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx
@@ -36,7 +36,7 @@ export const ModuleSelectorInput = ({
   setMode,
   closeModal,
 }: ModuleSelectorInputProps) => {
-  const [keyword, setKeyword] = useState(selectedAddress.address as string);
+  const [keyword, setKeyword] = useState(selectedAddress.hex as string);
   const [error, setError] = useState("");
   const [addr, moduleName, functionName] = useMemo(
     () => splitModule(keyword),
@@ -54,7 +54,6 @@ export const ModuleSelectorInput = ({
     options: {
       refetchOnWindowFocus: false,
       enabled: false,
-      refetchOnMount: true,
       retry: false,
       onSuccess: (data) => {
         setError("");
diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index b8f7a276a..cb15b3f01 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -138,8 +138,8 @@ export const ExecuteArea = ({
           </AlertDescription>
         </Alert>
       )}
-      <Flex alignItems="center" justify="space-between" mt={6}>
-        <Button>TODO: CodeSnippet</Button>
+      <Flex alignItems="center" justify="end" mt={6}>
+        {/* <Button>TODO: CodeSnippet</Button> */}
         <Flex direction="row" align="center" gap={2}>
           <Flex fontSize="14px" color="text.dark" alignItems="center">
             Transaction Fee:{" "}
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 790e9a079..579100ba8 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -71,8 +71,8 @@ export const ViewArea = ({
           propsOnChange={setAbiData}
           propsOnErrors={setAbiErrors}
         />
-        <Flex justify="space-between" mt={4}>
-          <Button>TODO: CodeSnippet</Button>
+        <Flex justify="end" mt={4}>
+          {/* <Button>TODO: CodeSnippet</Button> */}
           <Button
             variant="primary"
             fontSize="14px"
diff --git a/src/lib/pages/interact/component/index.ts b/src/lib/pages/interact/component/index.ts
index 5c6375a8d..0671e8b81 100644
--- a/src/lib/pages/interact/component/index.ts
+++ b/src/lib/pages/interact/component/index.ts
@@ -1,4 +1,5 @@
 export * from "./common";
 export * from "./drawer";
 export * from "./form";
-export * from "./main";
+export * from "./FunctionSelectBody";
+export * from "./FunctionSelectPanel";
diff --git a/src/lib/pages/interact/component/main/index.ts b/src/lib/pages/interact/component/main/index.ts
deleted file mode 100644
index 25871cf71..000000000
--- a/src/lib/pages/interact/component/main/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./body";
-export * from "./panel";
diff --git a/src/lib/pages/interact/index.tsx b/src/lib/pages/interact/index.tsx
index 7428a1aab..dd30b29ff 100644
--- a/src/lib/pages/interact/index.tsx
+++ b/src/lib/pages/interact/index.tsx
@@ -8,7 +8,7 @@ import {
   Box,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
@@ -91,14 +91,14 @@ export const Interact = () => {
   const address = getFirstQueryParam(router.query.address);
   const moduleName = getFirstQueryParam(router.query.moduleName);
   const functionName = getFirstQueryParam(router.query.functionName);
-  let functionType = getFirstQueryParam(router.query.functionType);
-  useAccountModules({
+  const functionType = getFirstQueryParam(router.query.functionType);
+  const { refetch } = useAccountModules({
     address: address as MoveAccountAddr,
     moduleName,
     functionName,
     options: {
       refetchOnWindowFocus: false,
-      enabled: !!address && !!moduleName,
+      enabled: false,
       retry: false,
       onSuccess: (data) => {
         if (!Array.isArray(data)) {
@@ -108,16 +108,24 @@ export const Interact = () => {
               (exposedFn) => exposedFn.name === functionName
             );
             if (fn) {
-              functionType = fn.is_view ? "view" : "execute";
+              handleSetSelectedType(fn.is_view ? "view" : "execute");
               setSelectedFn(fn);
             }
-          }
-          if (functionType) handleSetSelectedType(functionType);
+          } else if (functionType) handleSetSelectedType(functionType);
         }
       },
     },
   });
 
+  useEffect(() => {
+    if (!!address && !!moduleName) refetch();
+    else {
+      setModule(undefined);
+      setSelectedType(InteractionTabs.VIEW_MODULE);
+      setSelectedFn(undefined);
+    }
+  }, [address, moduleName, refetch]);
+
   return (
     <>
       <PageContainer
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 889440ca3..1a6f7487c 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -86,7 +86,7 @@ export const useAccountModules = ({
         )
       : getAccountModules(baseEndpoint, address).then((modules) =>
           modules
-            .sort((a, b) => (a.moduleName < b.moduleName ? -1 : 1))
+            .sort((a, b) => a.moduleName.localeCompare(b.moduleName))
             .map((module) => indexModuleResponse(module))
         );
 

From 3045342de6ef8192ac9a48c3dd97500b385ea4d9 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:05:22 +0700
Subject: [PATCH 101/368] fix: add is_entry false warning

---
 .../interact/component/form/ExecuteArea.tsx   | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index cb15b3f01..90d434e2c 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -121,10 +121,27 @@ export const ExecuteArea = ({
 
   return (
     <Flex direction="column">
-      <ConnectWalletAlert
-        subtitle="You need to connect your wallet to perform this action"
-        mb={8}
-      />
+      {fn.is_entry ? (
+        <ConnectWalletAlert
+          subtitle="You need to connect your wallet to perform this action"
+          mb={8}
+        />
+      ) : (
+        <Alert variant="warning" mb={8} alignItems="center">
+          <CustomIcon
+            name="alert-circle-solid"
+            boxSize={4}
+            color="warning.main"
+            mr={4}
+          />
+          <AlertDescription wordBreak="break-word">
+            Title This function cannot be executed through this page. Only
+            execute functions with “is_entry: true” and visibility is “public”
+            or “friend” are able to interacted through Celatone’s module
+            interactions.
+          </AlertDescription>
+        </Alert>
+      )}
       <AbiForm
         fn={executeFn}
         initialData={data}

From 0ecb66069fc0e5d26c22ceef01b52c7095c9cf03 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:08:38 +0700
Subject: [PATCH 102/368] fix: use gap instead

---
 src/lib/pages/interact/component/form/ExecuteArea.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index 90d434e2c..f2e8dea8b 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -127,12 +127,11 @@ export const ExecuteArea = ({
           mb={8}
         />
       ) : (
-        <Alert variant="warning" mb={8} alignItems="center">
+        <Alert variant="warning" mb={8} alignItems="center" gap={4}>
           <CustomIcon
             name="alert-circle-solid"
             boxSize={4}
             color="warning.main"
-            mr={4}
           />
           <AlertDescription wordBreak="break-word">
             Title This function cannot be executed through this page. Only

From 9a5fc8ebf3948c22a2b51eb0eda0f600ab4df167 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:19:10 +0700
Subject: [PATCH 103/368] fix: change tab reload page

---
 .../components/ModuleFunction.tsx             | 134 +++++++++++-------
 src/lib/pages/module-details/index.tsx        |  71 +++++++---
 2 files changed, 138 insertions(+), 67 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index 554ea0b99..c2d962925 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -5,18 +5,54 @@ import { useCallback, useMemo, useState } from "react";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
-import { Loading } from "lib/components/Loading";
 import { FunctionDetailCard } from "lib/components/module/FunctionDetailCard";
 import type { IndexedModule } from "lib/services/moduleService";
+import type { ExposedFunction } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import { FunctionTypeSwitch, FunctionTypeTabs } from "./FunctionTypeSwitch";
 
 interface ModuleFunctionProps {
-  moduleData: IndexedModule;
+  address: IndexedModule["address"];
+  moduleName: IndexedModule["moduleName"];
+  fns: IndexedModule["parsedAbi"]["exposed_functions"];
+  viewFns: IndexedModule["viewFunctions"];
+  executeFns: IndexedModule["executeFunctions"];
 }
 
-export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
+const FunctionAccordions = ({
+  type,
+  fns,
+  expandedIndexes,
+  updateExpandedIndexes,
+}: {
+  type: FunctionTypeTabs;
+  fns: ExposedFunction[];
+  expandedIndexes: number[];
+  updateExpandedIndexes: (indexes: number[]) => void;
+}) => (
+  <Accordion
+    id={type}
+    display="none"
+    allowMultiple
+    index={expandedIndexes}
+    onChange={updateExpandedIndexes}
+  >
+    <Flex direction="column" gap={4}>
+      {fns.map((fn) => (
+        <FunctionDetailCard exposedFn={fn} key={fn.name} />
+      ))}
+    </Flex>
+  </Accordion>
+);
+
+export const ModuleFunction = ({
+  address,
+  moduleName,
+  fns,
+  viewFns,
+  executeFns,
+}: ModuleFunctionProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
 
@@ -24,20 +60,14 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
   const [keyword, setKeyword] = useState("");
 
-  const exposedFns = moduleData.parsedAbi.exposed_functions;
-
-  const searchedFns = useMemo(() => {
-    if (!keyword) return exposedFns;
-    return exposedFns.filter((fn) => fn.name?.includes(keyword));
-  }, [keyword, exposedFns]);
-  const viewFns = searchedFns.filter((fn) => fn.is_view);
-  const executeFns = searchedFns.filter((fn) => !fn.is_view);
-
-  const getDisplayedFns = (selectedTab: FunctionTypeTabs) => {
-    if (selectedTab === FunctionTypeTabs.VIEW) return viewFns;
-    if (selectedTab === FunctionTypeTabs.EXECUTE) return executeFns;
-    return searchedFns;
-  };
+  const [filteredFns, filteredViewFns, filteredExecuteFns] = useMemo(() => {
+    if (!keyword) return [fns, viewFns, executeFns];
+    return [
+      fns.filter((fn) => fn.name.includes(keyword)),
+      viewFns.filter((fn) => fn.name.includes(keyword)),
+      executeFns.filter((fn) => fn.name.includes(keyword)),
+    ];
+  }, [executeFns, fns, keyword, viewFns]);
 
   const updateExpandedIndexes = (indexes: number[]) =>
     setExpandedIndexes(indexes);
@@ -46,10 +76,11 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
     (nextTab: FunctionTypeTabs) => {
       if (nextTab === tab) return;
       navigate({
-        pathname: `/modules/[address]/[moduleName]/function`,
+        pathname: `/modules/[address]/[moduleName]/[tab]`,
         query: {
-          address: moduleData.address,
-          moduleName: moduleData.moduleName,
+          address,
+          moduleName,
+          tab: "function",
           type: nextTab,
         },
         options: {
@@ -57,15 +88,17 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
         },
       });
     },
-    [tab, moduleData.address, moduleData.moduleName, navigate]
+    [address, moduleName, navigate, tab]
   );
 
-  if (!moduleData) return <Loading />;
-
   return (
-    <Flex direction="column" gap={8}>
+    <Flex
+      direction="column"
+      gap={8}
+      sx={{ [`& #${tab}`]: { display: "block" } }}
+    >
       <Heading as="h6" variant="h6" fontWeight={600} minH="24px">
-        Exposed Function
+        Exposed Functions
       </Heading>
       <InputWithIcon
         placeholder="Search functions..."
@@ -78,7 +111,11 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
           currentTab={tab}
           onTabChange={handleTabChange}
           my={3}
-          counts={[searchedFns.length, viewFns.length, executeFns.length]}
+          counts={[
+            filteredFns.length,
+            filteredViewFns.length,
+            filteredExecuteFns.length,
+          ]}
         />
         <Flex gap={4} alignItems="center">
           <Button
@@ -92,13 +129,7 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
             }
             onClick={() => {
               setExpandedIndexes((prev) =>
-                !prev.length
-                  ? Array.from(
-                      Array(
-                        moduleData.parsedAbi.exposed_functions.length
-                      ).keys()
-                    )
-                  : []
+                !prev.length ? Array.from(Array(fns.length).keys()) : []
               );
             }}
           >
@@ -109,11 +140,7 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
             size="sm"
             rightIcon={<CustomIcon name="launch" />}
             onClick={() => {
-              const jsonString = JSON.stringify(
-                moduleData.parsedAbi.exposed_functions,
-                null,
-                2
-              );
+              const jsonString = JSON.stringify(fns, null, 2);
               const jsonWindow = window.open();
               if (jsonWindow) {
                 // Modify styling later
@@ -136,17 +163,26 @@ export const ModuleFunction = ({ moduleData }: ModuleFunctionProps) => {
           </Button>
         </Flex>
       </Flex>
-      <Accordion
-        allowMultiple
-        index={expandedIndexes}
-        onChange={updateExpandedIndexes}
-      >
-        <Flex direction="column" gap={4}>
-          {getDisplayedFns(tab).map((fn) => (
-            <FunctionDetailCard exposedFn={fn} key={fn.name} />
-          ))}
-        </Flex>
-      </Accordion>
+
+      {/* rendering all tabs at once and use css selector to avoid lagginess when changing tab */}
+      <FunctionAccordions
+        type={FunctionTypeTabs.ALL}
+        fns={filteredFns}
+        expandedIndexes={expandedIndexes}
+        updateExpandedIndexes={updateExpandedIndexes}
+      />
+      <FunctionAccordions
+        type={FunctionTypeTabs.VIEW}
+        fns={filteredViewFns}
+        expandedIndexes={expandedIndexes}
+        updateExpandedIndexes={updateExpandedIndexes}
+      />
+      <FunctionAccordions
+        type={FunctionTypeTabs.EXECUTE}
+        fns={filteredExecuteFns}
+        expandedIndexes={expandedIndexes}
+        updateExpandedIndexes={updateExpandedIndexes}
+      />
     </Flex>
   );
 };
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 0372925de..20128f51a 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -23,6 +23,7 @@ import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
+import { InvalidState } from "lib/components/state";
 import { useContractDetailsTableCounts } from "lib/model/contract";
 import { useAccountId } from "lib/services/accountService";
 import type { IndexedModule } from "lib/services/moduleService";
@@ -55,18 +56,18 @@ interface ActionInfo {
 // TODO get module path
 const txTableHeaderId = "ModuleTxsTableHeader";
 
-export const ModuleDetails = () => {
-  const navigate = useInternalNavigate();
+interface ModuleDetailsBodyProps {
+  moduleData: IndexedModule;
+}
+
+const InvalidModule = () => <InvalidState title="Module does not exist" />;
+
+export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
   const router = useRouter();
+  const navigate = useInternalNavigate();
   const { trackUseTab } = useTrack();
 
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
-  const moduleName = getFirstQueryParam(router.query.moduleName);
-  const addr = getFirstQueryParam(router.query.address);
-  const { data, isLoading } = useAccountModules({
-    address: addr as MoveAccountAddr,
-    moduleName,
-  });
 
   const handleTabChange = useCallback(
     (nextTab: TabIndex, fnType?: FunctionTypeTabs) => () => {
@@ -75,8 +76,8 @@ export const ModuleDetails = () => {
       navigate({
         pathname: "/modules/[address]/[moduleName]/[tab]",
         query: {
-          address: addr,
-          moduleName,
+          address: moduleData.address,
+          moduleName: moduleData.moduleName,
           tab: nextTab,
           ...(fnType ? { type: fnType } : {}),
         },
@@ -85,7 +86,7 @@ export const ModuleDetails = () => {
         },
       });
     },
-    [addr, moduleName, tab, navigate, trackUseTab]
+    [moduleData.address, moduleData.moduleName, navigate, tab, trackUseTab]
   );
 
   useEffect(() => {
@@ -94,8 +95,8 @@ export const ModuleDetails = () => {
         replace: true,
         pathname: "/modules/[address]/[moduleName]/[tab]",
         query: {
-          address: addr,
-          moduleName,
+          address: moduleData.address,
+          moduleName: moduleData.moduleName,
           tab: TabIndex.Overview,
         },
         options: {
@@ -103,7 +104,14 @@ export const ModuleDetails = () => {
         },
       });
     }
-  }, [router.isReady, tab, addr, moduleName, navigate]);
+  }, [
+    router.isReady,
+    tab,
+    navigate,
+    moduleData.address,
+    moduleData.moduleName,
+  ]);
+
   const contractAddress = "" as ContractAddr;
   const { data: contractAccountId } = useAccountId(contractAddress);
   const {
@@ -113,8 +121,6 @@ export const ModuleDetails = () => {
     refetchRelatedProposals,
   } = useContractDetailsTableCounts(contractAddress, contractAccountId);
 
-  if (isLoading && !data) return <Loading />;
-  const moduleData = data as IndexedModule;
   const actionList: ActionInfo[] = [
     {
       icon: "query" as IconKeys,
@@ -140,7 +146,7 @@ export const ModuleDetails = () => {
     },
   ];
   return (
-    <PageContainer>
+    <>
       <ModuleTop isVerified moduleData={moduleData} />
       <Tabs
         index={Object.values(TabIndex).indexOf(tab)}
@@ -277,7 +283,13 @@ export const ModuleDetails = () => {
             </Flex>
           </TabPanel>
           <TabPanel p={0}>
-            <ModuleFunction moduleData={moduleData} />
+            <ModuleFunction
+              address={moduleData.address}
+              moduleName={moduleData.moduleName}
+              fns={moduleData.parsedAbi.exposed_functions}
+              viewFns={moduleData.viewFunctions}
+              executeFns={moduleData.executeFunctions}
+            />
           </TabPanel>
           {/* TODO TX History */}
           <TabPanel p={0}>
@@ -344,6 +356,29 @@ export const ModuleDetails = () => {
           </TabPanel>
         </TabPanels>
       </Tabs>
+    </>
+  );
+};
+
+export const ModuleDetails = () => {
+  const router = useRouter();
+
+  const addr = getFirstQueryParam(router.query.address);
+  const moduleName = getFirstQueryParam(router.query.moduleName);
+
+  const { data, isLoading } = useAccountModules({
+    address: addr as MoveAccountAddr,
+    moduleName,
+  });
+
+  if (!router.isReady || isLoading) return <Loading />;
+  return (
+    <PageContainer>
+      {data === undefined ? (
+        <InvalidModule />
+      ) : (
+        <ModuleDetailsBody moduleData={data as IndexedModule} />
+      )}
     </PageContainer>
   );
 };

From f512153981af88ad7983dfe46fd7597e4dbaf297 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 27 Sep 2023 16:19:39 +0700
Subject: [PATCH 104/368] fix(components): wire up resource section

---
 src/lib/components/resource/ResourceCard.tsx  |  3 +
 .../resource/ResourceDetailCard.tsx           | 60 ++++++++----
 .../components/modules/ModuleLists.tsx        |  2 +-
 .../components/resources/ResourceSection.tsx  | 92 ++++++++++++++++---
 src/lib/services/move/resourceService.ts      |  2 +-
 src/lib/types/move/resource.ts                |  2 +-
 6 files changed, 129 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/resource/ResourceCard.tsx b/src/lib/components/resource/ResourceCard.tsx
index 0157c859f..f3b552eba 100644
--- a/src/lib/components/resource/ResourceCard.tsx
+++ b/src/lib/components/resource/ResourceCard.tsx
@@ -5,12 +5,14 @@ interface ResourceCardProps {
   amount: number;
   hasBorder?: boolean;
   isSelected?: boolean;
+  onClick?: () => void;
 }
 export const ResourceCard = ({
   name,
   amount,
   hasBorder = false,
   isSelected = false,
+  onClick,
 }: ResourceCardProps) => {
   return (
     <Flex
@@ -24,6 +26,7 @@ export const ResourceCard = ({
       borderRadius={8}
       p={3}
       alignItems="center"
+      onClick={onClick}
     >
       {name}
       <Badge variant={isSelected ? "primary" : "gray"} ml={2}>
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 39d5a66a8..7c99829c4 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -1,46 +1,72 @@
+import type { ExpandedIndex } from "@chakra-ui/react";
 import {
   Accordion,
   AccordionButton,
   AccordionItem,
   AccordionPanel,
-  Button,
   Flex,
   Text,
 } from "@chakra-ui/react";
 
+import { CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
+import type { IndexedResource } from "lib/services/move/resourceService";
 
 interface ResourceDetailCardProps {
-  name: string;
+  resourceData: IndexedResource;
+  defaultIndex: ExpandedIndex;
 }
-export const ResourceDetailCard = ({ name }: ResourceDetailCardProps) => {
+export const ResourceDetailCard = ({
+  resourceData,
+  defaultIndex,
+}: ResourceDetailCardProps) => {
+  const moveResourceObject = JSON.parse(resourceData.moveResource);
+  const dataObject = moveResourceObject.data;
+  const formattedArray: { key: string; value: unknown }[] = Object.entries(
+    dataObject
+  ).map(([key, value]) => ({
+    key: key as string,
+    value: value as unknown,
+  }));
+
   return (
-    <Accordion allowToggle width="full">
+    <Accordion allowMultiple width="full" defaultIndex={defaultIndex}>
       <AccordionItem>
         <AccordionButton>
-          <Flex p={4} justifyContent="space-between" w="full">
-            <Text variant="body1" fontWeight={600}>
-              {name}
+          <Flex p={4} justifyContent="space-between" w="full" align="center">
+            <Text variant="body1" fontWeight={600} textAlign="left">
+              {resourceData.structTag}
             </Text>
             <Flex alignItems="center" gap={2}>
-              <Button
+              {/* TODO  <button> cannot appear as a descendant of <button> */}
+              <CopyButton
+                value={resourceData.moveResource}
                 variant="outline-primary"
                 size="sm"
-                leftIcon={<CustomIcon name="copy" />}
-              >
-                Copy JSON
-              </Button>
+                buttonText="Copy JSON"
+              />
               <CustomIcon name="chevron-down" color="gray.600" />
             </Flex>
           </Flex>
         </AccordionButton>
         <AccordionPanel p={4} borderTop="1px solid" borderColor="gray.700">
           <Flex direction="column" gap={3}>
-            content goes here content goes here content goes here content goes
-            here Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est
-            quia, impedit sed assumenda ex quibusdam earum quae, ipsum
-            recusandae, saepe quaerat obcaecati labore? Aspernatur, vitae
-            adipisci ex consequatur officiis at.
+            {formattedArray.map((item) => (
+              <Flex gap={4}>
+                <Text variant="body2" color="text.dark" w={52}>
+                  {item.key}
+                </Text>
+                {typeof item.value === "object" ? (
+                  <Text variant="body2" color="text.main">
+                    {JSON.stringify(item.value)}
+                  </Text>
+                ) : (
+                  <Text variant="body2" color="text.main">
+                    {item.value?.toString()}
+                  </Text>
+                )}
+              </Flex>
+            ))}
           </Flex>
         </AccordionPanel>
       </AccordionItem>
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 19cccc128..115cb53c7 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -93,7 +93,7 @@ export const ModuleLists = ({
       <Flex direction="column" gap={8}>
         {!onViewMore && (
           <InputWithIcon
-            placeholder="Search with Execute Message"
+            placeholder="Search with Module Name..."
             value={keyword}
             onChange={(e) => setKeyword(e.target.value)}
             action="execute-message-search"
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 280b6f6e7..96cc7e8b6 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -8,22 +8,29 @@ import {
   Heading,
   Text,
 } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useCallback } from "react";
 
+import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
 import { ResourceCard } from "lib/components/resource/ResourceCard";
 import { ResourceDetailCard } from "lib/components/resource/ResourceDetailCard";
 import { TableTitle } from "lib/components/table";
 import type { IndexedResource } from "lib/services/move/resourceService";
 import { useAccountResources } from "lib/services/move/resourceService";
 import type { HumanAddr } from "lib/types";
-import { truncate } from "lib/utils";
+import { getFirstQueryParam, truncate } from "lib/utils";
 
-import type { ResourceGroupByAccount } from "./ResourceLists";
+import type { ResourceGroup, ResourceGroupByAccount } from "./ResourceLists";
 
 interface ResourceSectionProps {
   address: HumanAddr;
 }
 export const ResourceSection = ({ address }: ResourceSectionProps) => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+
   const { data: resourcesData = [] } = useAccountResources({
     address,
   });
@@ -55,6 +62,49 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
   }, {} as Record<string, ResourceGroupByAccount>);
 
   const groupedResources = Object.values(sortedResource);
+
+  const selectedAccount = getFirstQueryParam(router.query.account);
+
+  const selectedName = getFirstQueryParam(router.query.selected);
+
+  const handleSelectResource = useCallback(
+    (
+      account: ResourceGroupByAccount["owner"],
+      resource: ResourceGroup["group"]
+    ) => {
+      if (account === selectedAccount && resource === selectedName) return;
+      navigate({
+        pathname: `/accounts/[address]/resources`,
+        query: {
+          address,
+          account,
+          selected: resource,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [selectedName, selectedAccount, address, navigate]
+  );
+
+  const selectedGroup =
+    groupedResources.find((item) => item.owner === router.query.account) ||
+    groupedResources[0];
+
+  if (!selectedGroup) return null;
+  const selectedGroupArray = Object.values(selectedGroup.resources);
+
+  const selectedResources = selectedGroupArray.find(
+    (item) => item.group === router.query.selected
+  );
+
+  const selectedIndex = !router.query.account
+    ? 0
+    : groupedResources.findIndex((item) => item.owner === router.query.account);
+
+  if (!selectedResources) return <Loading />;
+
   return (
     <Flex direction="column" mt={8}>
       <TableTitle
@@ -62,11 +112,15 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
         title="Resources"
         count={12}
       />
-      <Flex gap={6} flexDirection={{ base: "column", md: "row" }}>
-        <Flex width={{ base: "full", md: 80 }}>
-          <Accordion defaultIndex={[0]} allowToggle width="full" allowMultiple>
+      <Flex
+        gap={6}
+        flexDirection={{ base: "column", md: "row" }}
+        position="relative"
+      >
+        <Flex minW={{ base: "full", md: 80 }}>
+          <Accordion allowMultiple defaultIndex={[selectedIndex]} width="full">
             {groupedResources.map((item) => (
-              <AccordionItem mb={4}>
+              <AccordionItem mb={4} key={item.owner}>
                 <AccordionButton>
                   <Flex p={4} justifyContent="space-between" w="full">
                     <Text variant="body1" fontWeight={600}>
@@ -78,7 +132,16 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
                 <AccordionPanel>
                   <Flex direction="column" gap={3}>
                     {Object.values(item.resources).map((subitem) => (
-                      <ResourceCard hasBorder name={subitem.group} amount={2} />
+                      <ResourceCard
+                        hasBorder
+                        name={subitem.group}
+                        key={subitem.group}
+                        amount={subitem.items.length}
+                        isSelected={router.query.selected === subitem.group}
+                        onClick={() =>
+                          handleSelectResource(item.owner, subitem.group)
+                        }
+                      />
                     ))}
                   </Flex>
                 </AccordionPanel>
@@ -89,15 +152,20 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
         <Flex direction="column" w="full">
           <Flex alignItems="center" pb={6}>
             <Heading as="h6" variant="h6">
-              0x1::dex
+              {router.query.account}::{selectedResources?.group}
             </Heading>
             <Badge variant="primary" ml={2}>
-              9
+              {selectedResources?.items.length}
             </Badge>
           </Flex>
-          <Flex gap={3} flexDirection="column">
-            <ResourceDetailCard name="test" />
-            <ResourceDetailCard name="test" />
+          <Flex gap={4} flexDirection="column">
+            {selectedResources.items.map((item) => (
+              <ResourceDetailCard
+                resourceData={item}
+                key={item.struct_tag}
+                defaultIndex={selectedResources.items.length > 2 ? [] : [0]}
+              />
+            ))}
           </Flex>
         </Flex>
       </Flex>
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index ef203b64e..a59ff9c99 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -9,7 +9,7 @@ import { getAccountResources } from "./resource";
 
 export interface IndexedResource extends InternalResource {
   address: string;
-  move_resources: string;
+  move_resource: string;
   raw_bytes: string;
   struct_tag: string;
 }
diff --git a/src/lib/types/move/resource.ts b/src/lib/types/move/resource.ts
index 738644ea7..c41e38ece 100644
--- a/src/lib/types/move/resource.ts
+++ b/src/lib/types/move/resource.ts
@@ -3,7 +3,7 @@ import type { Pagination } from "../rest";
 
 export interface ResponseResource {
   address: string;
-  move_resources: string;
+  move_resource: string;
   raw_bytes: string;
   struct_tag: string;
 }

From 1f707a061b60413abaf9695e3f150ed622078dc4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:20:44 +0700
Subject: [PATCH 105/368] fix: remove unnecessary ?

---
 src/lib/pages/module-details/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 20128f51a..eea9340a0 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -126,14 +126,14 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
       icon: "query" as IconKeys,
       iconColor: "primary.main",
       name: "View Functions",
-      count: moduleData?.viewFunctions.length,
+      count: moduleData.viewFunctions.length,
       onClick: handleTabChange(TabIndex.Function, FunctionTypeTabs.VIEW),
     },
     {
       icon: "execute" as IconKeys,
       iconColor: "accent.main",
       name: "Execute Functions",
-      count: moduleData?.executeFunctions.length,
+      count: moduleData.executeFunctions.length,
       onClick: handleTabChange(TabIndex.Function, FunctionTypeTabs.EXECUTE),
     },
     {

From 86d451f32b47666bd472e0dd4d92d7caa436c3c4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:21:34 +0700
Subject: [PATCH 106/368] fix: remove unnecessary ?

---
 src/lib/pages/module-details/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index eea9340a0..d71180756 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -164,9 +164,9 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
             Overview
           </CustomTab>
           <CustomTab
-            count={moduleData?.parsedAbi.exposed_functions.length}
+            count={moduleData.parsedAbi.exposed_functions.length}
             onClick={handleTabChange(TabIndex.Function, FunctionTypeTabs.ALL)}
-            isDisabled={!moduleData?.parsedAbi.exposed_functions.length}
+            isDisabled={!moduleData.parsedAbi.exposed_functions.length}
           >
             Function
           </CustomTab>
@@ -174,9 +174,9 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
             Transactions
           </CustomTab>
           <CustomTab
-            count={moduleData?.parsedAbi.structs.length}
+            count={moduleData.parsedAbi.structs.length}
             onClick={handleTabChange(TabIndex.Structs)}
-            isDisabled={!moduleData?.parsedAbi.structs.length}
+            isDisabled={!moduleData.parsedAbi.structs.length}
           >
             Structs
           </CustomTab>

From 7c3d0ddd00a47cfc36473c6d11c35d117742ffa3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:23:15 +0700
Subject: [PATCH 107/368] fix: change logic

---
 src/lib/pages/module-details/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index d71180756..802d88f73 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -79,7 +79,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
           address: moduleData.address,
           moduleName: moduleData.moduleName,
           tab: nextTab,
-          ...(fnType ? { type: fnType } : {}),
+          ...(fnType && { type: fnType }),
         },
         options: {
           shallow: true,

From 8ab27893de9b523a2c3805764f4d2ba497dda9c1 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:32:30 +0700
Subject: [PATCH 108/368] fix: removing unreachable loading

---
 .../module-details/components/ModuleInfo.tsx  | 23 +++++++++++--------
 src/lib/pages/module-details/index.tsx        |  2 +-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index a0eca7cf4..2df1613b9 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -3,24 +3,29 @@ import { Flex, Heading, Text } from "@chakra-ui/react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
-import { Loading } from "lib/components/Loading";
 import { ModuleSourceCode } from "lib/components/module";
 import {
   useVerifyModule,
   type IndexedModule,
 } from "lib/services/moduleService";
-import type { HexAddr, Option } from "lib/types";
+import type { HexAddr } from "lib/types";
 
 interface ModuleInfoProps {
-  moduleData: IndexedModule;
+  address: IndexedModule["address"];
+  moduleName: IndexedModule["moduleName"];
+  upgradePolicy: IndexedModule["upgradePolicy"];
 }
 
-export const ModuleInfo = ({ moduleData }: ModuleInfoProps) => {
+export const ModuleInfo = ({
+  address,
+  moduleName,
+  upgradePolicy,
+}: ModuleInfoProps) => {
   const { data: verificationData } = useVerifyModule({
-    address: moduleData?.address as Option<HexAddr>,
-    moduleName: moduleData?.moduleName,
+    address: address as HexAddr,
+    moduleName,
   });
-  if (!moduleData) return <Loading />;
+
   return (
     <Flex flexDirection="column" gap={4}>
       <Flex justifyContent="space-between" alignItems="center" w="full">
@@ -44,7 +49,7 @@ export const ModuleInfo = ({ moduleData }: ModuleInfoProps) => {
         borderColor="gray.700"
         sx={{ "& > div": { flex: 1 } }}
       >
-        <LabelText label="Upgrade Policy">{moduleData.upgradePolicy}</LabelText>
+        <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
         {/* TODO get block height */}
         <LabelText
           label="Initial Published Block Height"
@@ -61,7 +66,7 @@ export const ModuleInfo = ({ moduleData }: ModuleInfoProps) => {
         <LabelText label="Initial Published by" helperText1="(Account Address)">
           <ExplorerLink
             type="user_address"
-            value={moduleData.address}
+            value={address}
             showCopyOnHover
             fixedHeight
           />
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 802d88f73..18a177aea 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -221,7 +221,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                   </Flex>
                 ))}
               </Flex>
-              <ModuleInfo moduleData={moduleData} />
+              <ModuleInfo {...moduleData} />
               {/* TODO History */}
               <Flex flexDirection="column" mt={6}>
                 <Heading

From 71c25ca604c9e992893ce287c721420535329c9f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 27 Sep 2023 16:44:14 +0700
Subject: [PATCH 109/368] fix(components): fix navigate tab

---
 .../account-details/components/resources/ResourceSection.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 96cc7e8b6..2740a8cef 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -74,9 +74,10 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
     ) => {
       if (account === selectedAccount && resource === selectedName) return;
       navigate({
-        pathname: `/accounts/[address]/resources`,
+        pathname: `/accounts/[address]/[tab]`,
         query: {
           address,
+          tab: "resources",
           account,
           selected: resource,
         },

From 9646824a11c02e0a76d456b850dcd7cc02efb819 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 16:54:11 +0700
Subject: [PATCH 110/368] fix: module structs

---
 .../components/ModuleStruct.tsx               | 30 ++++++-------------
 src/lib/pages/module-details/index.tsx        |  2 +-
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleStruct.tsx b/src/lib/pages/module-details/components/ModuleStruct.tsx
index e50628ab6..7da60e1dc 100644
--- a/src/lib/pages/module-details/components/ModuleStruct.tsx
+++ b/src/lib/pages/module-details/components/ModuleStruct.tsx
@@ -3,26 +3,24 @@ import { useMemo, useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
-import { Loading } from "lib/components/Loading";
 import { StructCard } from "lib/components/module/StructCard";
 import type { IndexedModule } from "lib/services/moduleService";
 
 interface ModuleStructProps {
-  moduleData: IndexedModule;
+  structs: IndexedModule["parsedAbi"]["structs"];
 }
-export const ModuleStruct = ({ moduleData }: ModuleStructProps) => {
+export const ModuleStruct = ({ structs }: ModuleStructProps) => {
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
   const [keyword, setKeyword] = useState("");
 
-  const moduleStructs = moduleData.parsedAbi.structs;
   const filteredStructs = useMemo(() => {
-    if (!keyword) return moduleStructs;
-    return moduleStructs.filter((struct) => struct.name?.includes(keyword));
-  }, [keyword, moduleStructs]);
+    if (!keyword) return structs;
+    return structs.filter((struct) => struct.name.includes(keyword));
+  }, [keyword, structs]);
 
   const updateExpandedIndexes = (indexes: number[]) =>
     setExpandedIndexes(indexes);
-  if (!moduleData) return <Loading />;
+
   return (
     <Flex direction="column" gap={8}>
       <Flex maxH="24px" justifyContent="space-between" alignItems="center">
@@ -41,13 +39,7 @@ export const ModuleStruct = ({ moduleData }: ModuleStructProps) => {
             }
             onClick={() => {
               setExpandedIndexes((prev) =>
-                !prev.length
-                  ? Array.from(
-                      Array(
-                        moduleData.parsedAbi.exposed_functions.length
-                      ).keys()
-                    )
-                  : []
+                !prev.length ? Array.from(Array(structs.length).keys()) : []
               );
             }}
           >
@@ -58,16 +50,12 @@ export const ModuleStruct = ({ moduleData }: ModuleStructProps) => {
             size="sm"
             rightIcon={<CustomIcon name="launch" />}
             onClick={() => {
-              const jsonString = JSON.stringify(
-                moduleData.parsedAbi.exposed_functions,
-                null,
-                2
-              );
+              const jsonString = JSON.stringify(structs, null, 2);
               const jsonWindow = window.open();
               if (jsonWindow) {
                 // Modify styling later
                 jsonWindow.document.write(
-                  `<html><head><title>Module Exposed Function</title>`
+                  `<html><head><title>Module Structs</title>`
                 );
 
                 // Add styling
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 18a177aea..fe396d9e8 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -352,7 +352,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
             </Flex>
           </TabPanel>
           <TabPanel p={0}>
-            <ModuleStruct moduleData={moduleData} />
+            <ModuleStruct structs={moduleData.parsedAbi.structs} />
           </TabPanel>
         </TabPanels>
       </Tabs>

From c32b2207a9b7f452ff769378661ab6017373da70 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Sep 2023 17:15:41 +0700
Subject: [PATCH 111/368] fix: rename

---
 ...rDisplay.tsx => ModuleSelectorDisplay.tsx} |  0
 ...ectorInput.tsx => ModuleSelectorInput.tsx} |  0
 .../component/drawer/selector/index.tsx       |  6 ++---
 src/lib/pages/interact/index.tsx              | 25 ++++++++++---------
 4 files changed, 16 insertions(+), 15 deletions(-)
 rename src/lib/pages/interact/component/drawer/selector/{SelectorDisplay.tsx => ModuleSelectorDisplay.tsx} (100%)
 rename src/lib/pages/interact/component/drawer/selector/{SelectorInput.tsx => ModuleSelectorInput.tsx} (100%)

diff --git a/src/lib/pages/interact/component/drawer/selector/SelectorDisplay.tsx b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorDisplay.tsx
similarity index 100%
rename from src/lib/pages/interact/component/drawer/selector/SelectorDisplay.tsx
rename to src/lib/pages/interact/component/drawer/selector/ModuleSelectorDisplay.tsx
diff --git a/src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx
similarity index 100%
rename from src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx
rename to src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx
diff --git a/src/lib/pages/interact/component/drawer/selector/index.tsx b/src/lib/pages/interact/component/drawer/selector/index.tsx
index bdd84a1bc..5a3184ea2 100644
--- a/src/lib/pages/interact/component/drawer/selector/index.tsx
+++ b/src/lib/pages/interact/component/drawer/selector/index.tsx
@@ -1,8 +1,8 @@
 import type { DisplayMode } from "../types";
 
-import { ModuleSelectorDisplay } from "./SelectorDisplay";
-import type { ModuleSelectorInputProps } from "./SelectorInput";
-import { ModuleSelectorInput } from "./SelectorInput";
+import { ModuleSelectorDisplay } from "./ModuleSelectorDisplay";
+import type { ModuleSelectorInputProps } from "./ModuleSelectorInput";
+import { ModuleSelectorInput } from "./ModuleSelectorInput";
 
 interface ModuleSelectorProps extends ModuleSelectorInputProps {
   mode: DisplayMode;
diff --git a/src/lib/pages/interact/index.tsx b/src/lib/pages/interact/index.tsx
index dd30b29ff..66b41678e 100644
--- a/src/lib/pages/interact/index.tsx
+++ b/src/lib/pages/interact/index.tsx
@@ -88,14 +88,14 @@ export const Interact = () => {
     moduleName: module?.moduleName,
   });
 
-  const address = getFirstQueryParam(router.query.address);
-  const moduleName = getFirstQueryParam(router.query.moduleName);
-  const functionName = getFirstQueryParam(router.query.functionName);
-  const functionType = getFirstQueryParam(router.query.functionType);
+  const addressParam = getFirstQueryParam(router.query.address);
+  const moduleNameParam = getFirstQueryParam(router.query.moduleName);
+  const functionNameParam = getFirstQueryParam(router.query.functionName);
+  const functionTypeParam = getFirstQueryParam(router.query.functionType);
   const { refetch } = useAccountModules({
-    address: address as MoveAccountAddr,
-    moduleName,
-    functionName,
+    address: addressParam as MoveAccountAddr,
+    moduleName: moduleNameParam,
+    functionName: functionNameParam,
     options: {
       refetchOnWindowFocus: false,
       enabled: false,
@@ -103,28 +103,29 @@ export const Interact = () => {
       onSuccess: (data) => {
         if (!Array.isArray(data)) {
           setModule(data);
-          if (functionName) {
+          if (functionNameParam) {
             const fn = [...data.viewFunctions, ...data.executeFunctions].find(
-              (exposedFn) => exposedFn.name === functionName
+              (exposedFn) => exposedFn.name === functionNameParam
             );
             if (fn) {
               handleSetSelectedType(fn.is_view ? "view" : "execute");
               setSelectedFn(fn);
             }
-          } else if (functionType) handleSetSelectedType(functionType);
+          } else if (functionTypeParam)
+            handleSetSelectedType(functionTypeParam);
         }
       },
     },
   });
 
   useEffect(() => {
-    if (!!address && !!moduleName) refetch();
+    if (!!addressParam && !!moduleNameParam) refetch();
     else {
       setModule(undefined);
       setSelectedType(InteractionTabs.VIEW_MODULE);
       setSelectedFn(undefined);
     }
-  }, [address, moduleName, refetch]);
+  }, [addressParam, moduleNameParam, refetch]);
 
   return (
     <>

From 1f0df0111938d80f8161cddcd1624a116c3dd36a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 28 Sep 2023 16:24:28 +0700
Subject: [PATCH 112/368] feat: move tx filter

---
 CHANGELOG.md                                |  1 +
 src/lib/components/TxFilterSelection.tsx    | 33 +++++++++++++++++----
 src/lib/data/constant.ts                    |  8 +++--
 src/lib/pages/past-txs/index.tsx            |  7 +++--
 src/lib/services/expression/txExpression.ts |  8 +++--
 src/lib/services/txService.ts               |  4 +++
 src/lib/types/tx/transaction.ts             |  8 +++--
 src/lib/utils/extractActionValue.ts         | 16 +++++++---
 8 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8872fbaa..f7e200d1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#549](https://github.com/alleslabs/celatone-frontend/pull/549) Add move tx filer options
 - [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 10ae6e782..08b6831e6 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -16,6 +16,7 @@ import { matchSorter } from "match-sorter";
 import type { CSSProperties } from "react";
 import { useMemo, useState, useRef, forwardRef } from "react";
 
+import { useMoveConfig, useWasmConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { displayActionValue, mergeRefs } from "lib/utils";
 
@@ -41,17 +42,25 @@ const listItemProps: CSSProperties = {
   cursor: "pointer",
 };
 
-const OPTIONS = [
+const OPTIONS = ["isSend", "isIbc"];
+
+const WASM_OPTIONS = [
   "isUpload",
   "isInstantiate",
   "isExecute",
-  "isSend",
-  "isIbc",
   "isMigrate",
   "isClearAdmin",
   "isUpdateAdmin",
 ];
 
+const MOVE_OPTIONS = [
+  "isPublish",
+  "isExecute",
+  "isEntryExecute",
+  "isUpgrade",
+  "isScript",
+];
+
 // TODO - Refactor this along with TagSelection
 export const TxFilterSelection = forwardRef<
   HTMLInputElement,
@@ -78,14 +87,26 @@ export const TxFilterSelection = forwardRef<
     const inputRef = useRef<HTMLInputElement>(null);
     const boxRef = useRef<HTMLDivElement>(null);
 
+    const wasm = useWasmConfig({ shouldRedirect: false });
+    const move = useMoveConfig({ shouldRedirect: false });
+
+    const options = useMemo(
+      () => [
+        ...OPTIONS,
+        ...(wasm.enabled ? WASM_OPTIONS : []),
+        ...(move.enabled ? MOVE_OPTIONS : []),
+      ],
+      [wasm.enabled, move.enabled]
+    );
+
     const partialResults = useMemo(
       () =>
         keyword
-          ? matchSorter(OPTIONS, keyword, {
+          ? matchSorter(options, keyword, {
               threshold: matchSorter.rankings.CONTAINS,
             })
-          : OPTIONS,
-      [keyword]
+          : options,
+      [options, keyword]
     );
 
     const isOptionSelected = (option: string) =>
diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
index 047ba327d..9a5face13 100644
--- a/src/lib/data/constant.ts
+++ b/src/lib/data/constant.ts
@@ -33,14 +33,18 @@ export const typeUrlDict = {
 export const DEFAULT_RPC_ERROR = "Invalid format, or Something went wrong";
 
 export const DEFAULT_TX_FILTERS = {
+  isSend: false,
+  isIbc: false,
   isExecute: false,
   isInstantiate: false,
   isUpload: false,
-  isIbc: false,
-  isSend: false,
   isMigrate: false,
   isUpdateAdmin: false,
   isClearAdmin: false,
+  isPublish: false,
+  isEntryExecute: false,
+  isUpgrade: false,
+  isScript: false,
 };
 
 export const UPPERBOUND_COUNT = 10000;
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 2712e8540..b90b8fd6a 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -11,7 +11,7 @@ import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
-import { useCurrentChain } from "lib/app-provider";
+import { useCurrentChain, useWasmConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { Pagination } from "lib/components/pagination";
@@ -41,6 +41,7 @@ const PastTxs = () => {
     address,
     chain: { chain_id: chainId },
   } = useCurrentChain();
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   const defaultValues: PastTxsState = {
     search: "",
@@ -159,7 +160,9 @@ const PastTxs = () => {
               setCurrentPage(1);
               setValue("search", e.target.value);
             }}
-            placeholder="Search with Transaction Hash or Contract Address"
+            placeholder={`Search with Transaction Hash${
+              wasm.enabled ? " or Contract Address" : ""
+            }`}
             h="full"
           />
           <InputRightElement pointerEvents="none" h="full" mr={1}>
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index cede8a9cb..8b4361c11 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -4,14 +4,18 @@ import type { Nullable, Option, PoolTxFilter, TxFilters } from "lib/types";
 import { isTxHash } from "lib/utils";
 
 const actions = {
+  isSend: "is_send",
+  isIbc: "is_ibc",
   isExecute: "is_execute",
   isInstantiate: "is_instantiate",
   isUpload: "is_store_code",
-  isIbc: "is_ibc",
-  isSend: "is_send",
   isMigrate: "is_migrate",
   isUpdateAdmin: "is_update_admin",
   isClearAdmin: "is_clear_admin",
+  isPublish: "is_publish",
+  isEntryExecute: "is_entry_execute",
+  isUpgrade: "is_upgrade",
+  isScript: "is_script",
 };
 
 const generateActionsFilter = (filters: TxFilters) =>
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index ec642cb7d..de63d52ab 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -129,6 +129,10 @@ export const useTxsByAddressPagination = (
               isUpdateAdmin: transaction.transaction.is_update_admin,
               isClearAdmin: transaction.transaction.is_clear_admin,
               isIbc: transaction.transaction.is_ibc,
+              isPublish: false,
+              isEntryExecute: false,
+              isUpgrade: false,
+              isScript: false,
             },
             transaction.transaction.success,
             transaction.is_signer
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index cfcd465d2..634560ae5 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -40,14 +40,18 @@ export interface Transaction {
 }
 
 export interface TxFilters {
+  isSend: boolean;
+  isIbc: boolean;
   isExecute: boolean;
   isInstantiate: boolean;
   isUpload: boolean;
-  isIbc: boolean;
-  isSend: boolean;
   isMigrate: boolean;
   isUpdateAdmin: boolean;
   isClearAdmin: boolean;
+  isPublish: boolean;
+  isEntryExecute: boolean;
+  isUpgrade: boolean;
+  isScript: boolean;
 }
 
 export type PoolTxFilter =
diff --git a/src/lib/utils/extractActionValue.ts b/src/lib/utils/extractActionValue.ts
index da238839c..0c191b41f 100644
--- a/src/lib/utils/extractActionValue.ts
+++ b/src/lib/utils/extractActionValue.ts
@@ -1,21 +1,29 @@
 export const displayActionValue = (isActionName: string) => {
   switch (isActionName) {
+    case "isSend":
+      return "Send";
+    case "isIbc":
+      return "IBC";
     case "isUpload":
       return "Upload";
     case "isInstantiate":
       return "Instantiate";
     case "isExecute":
       return "Execute";
-    case "isSend":
-      return "Send";
-    case "isIbc":
-      return "IBC";
     case "isMigrate":
       return "Migrate";
     case "isClearAdmin":
       return "Clear Admin";
     case "isUpdateAdmin":
       return "Update Admin";
+    case "isPublish":
+      return "Publish Module";
+    case "isEntryExecute":
+      return "Execute Function";
+    case "isUpgrade":
+      return "Upgrade Module";
+    case "isScript":
+      return "Run Script";
     default:
       return "";
   }

From ae37481624cabc73d114b2597017bd9ee9476cd8 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 28 Sep 2023 16:25:19 +0700
Subject: [PATCH 113/368] fix: add todo

---
 src/lib/services/txService.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index de63d52ab..f27bfb5df 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -117,6 +117,7 @@ export const useTxsByAddressPagination = (
             transaction.transaction.is_migrate,
             transaction.transaction.is_update_admin,
             transaction.transaction.is_clear_admin,
+            // TODO: handle more action msg type
           ]),
           furtherAction: getMsgFurtherAction(
             transaction.transaction.messages.length,

From 62265967c916f0210a718b4a3a18f6d0925c606f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 28 Sep 2023 17:36:24 +0700
Subject: [PATCH 114/368] fix(components): revise resouce detail

---
 src/lib/app-provider/env.ts                   |   2 +-
 src/lib/components/copy/CopyButton.tsx        |   5 +-
 src/lib/components/resource/ResourceCard.tsx  |   6 +-
 .../resource/ResourceDetailCard.tsx           | 113 +++++++------
 .../components/resources/ResourceLists.tsx    |  61 +++++--
 .../components/resources/ResourceSection.tsx  | 150 +++++++++++-------
 src/lib/pages/account-details/index.tsx       |   5 +-
 src/lib/services/move/resource.ts             |   2 +-
 src/lib/services/move/resourceService.ts      |  27 +---
 9 files changed, 215 insertions(+), 156 deletions(-)

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 8acfa081c..febab402f 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -98,5 +98,5 @@ export enum CELATONE_QUERY_KEYS {
   FUNCTION_VIEW = "CELATONE_QUERY_FUNCTION_VIEW",
   MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
   // RESOURCE
-  RESOURCE_MODULES = "CELATONE_QUERY_ACCOUNT_RESOURCES",
+  ACCOUNT_RESOURCES = "CELATONE_QUERY_ACCOUNT_RESOURCES",
 }
diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index 4bcf5d6d4..473ae510a 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -45,9 +45,12 @@ export const CopyButton = ({
             track(AmpEvent.USE_COPY_BUTTON, { section: amptrackSection })
           }
           leftIcon={
-            hasIcon ? <CustomIcon name="copy" boxSize={4} /> : undefined
+            hasIcon ? (
+              <CustomIcon name="copy" boxSize={size === "xs" ? 3 : 4} />
+            ) : undefined
           }
           {...buttonProps}
+          borderRadius={size === "xs" ? 6 : 8}
         >
           {buttonText}
         </Button>
diff --git a/src/lib/components/resource/ResourceCard.tsx b/src/lib/components/resource/ResourceCard.tsx
index f3b552eba..12c7d597b 100644
--- a/src/lib/components/resource/ResourceCard.tsx
+++ b/src/lib/components/resource/ResourceCard.tsx
@@ -1,11 +1,11 @@
-import { Badge, Flex } from "@chakra-ui/react";
+import { Badge, Flex, Text } from "@chakra-ui/react";
 
 interface ResourceCardProps {
   name: string;
   amount: number;
   hasBorder?: boolean;
   isSelected?: boolean;
-  onClick?: () => void;
+  onClick: () => void;
 }
 export const ResourceCard = ({
   name,
@@ -28,7 +28,7 @@ export const ResourceCard = ({
       alignItems="center"
       onClick={onClick}
     >
-      {name}
+      <Text className="ellipsis">{name}</Text>
       <Badge variant={isSelected ? "primary" : "gray"} ml={2}>
         {amount}
       </Badge>
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 7c99829c4..d8180be7f 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -1,6 +1,4 @@
-import type { ExpandedIndex } from "@chakra-ui/react";
 import {
-  Accordion,
   AccordionButton,
   AccordionItem,
   AccordionPanel,
@@ -10,18 +8,37 @@ import {
 
 import { CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
-import type { IndexedResource } from "lib/services/move/resourceService";
+import type { InternalResource } from "lib/types";
 
 interface ResourceDetailCardProps {
-  resourceData: IndexedResource;
-  defaultIndex: ExpandedIndex;
+  resourceData: InternalResource;
 }
 export const ResourceDetailCard = ({
   resourceData,
-  defaultIndex,
 }: ResourceDetailCardProps) => {
   const moveResourceObject = JSON.parse(resourceData.moveResource);
-  const dataObject = moveResourceObject.data;
+
+  if (resourceData.moveResource === '""')
+    return (
+      <Flex bg="gray.900" p={4} borderRadius={8} alignItems="center">
+        <CustomIcon
+          name="alert-circle-solid"
+          color="gray.600"
+          boxSize={4}
+          mr={3}
+        />
+        <Text color="text.dark" textAlign="center">
+          Invalid Data, resource and module provided are incompatible or contain
+          invalid data within the module.
+        </Text>
+      </Flex>
+    );
+
+  const dataObject = moveResourceObject.data as {
+    key: string;
+    value: unknown;
+  }[];
+
   const formattedArray: { key: string; value: unknown }[] = Object.entries(
     dataObject
   ).map(([key, value]) => ({
@@ -30,46 +47,50 @@ export const ResourceDetailCard = ({
   }));
 
   return (
-    <Accordion allowMultiple width="full" defaultIndex={defaultIndex}>
-      <AccordionItem>
-        <AccordionButton>
-          <Flex p={4} justifyContent="space-between" w="full" align="center">
-            <Text variant="body1" fontWeight={600} textAlign="left">
-              {resourceData.structTag}
-            </Text>
-            <Flex alignItems="center" gap={2}>
-              {/* TODO  <button> cannot appear as a descendant of <button> */}
-              <CopyButton
-                value={resourceData.moveResource}
-                variant="outline-primary"
-                size="sm"
-                buttonText="Copy JSON"
-              />
-              <CustomIcon name="chevron-down" color="gray.600" />
-            </Flex>
+    <AccordionItem mb={4}>
+      <AccordionButton>
+        <Flex
+          p={4}
+          justifyContent="space-between"
+          w="full"
+          align="center"
+          gap={8}
+        >
+          <Text variant="body1" fontWeight={600} textAlign="left">
+            {resourceData.structTag}
+          </Text>
+          <Flex alignItems="center" gap={2} minW={36}>
+            {/* TODO  <button> cannot appear as a descendant of <button> */}
+            <CopyButton
+              value={resourceData.moveResource}
+              variant="outline-primary"
+              size="xs"
+              buttonText="Copy JSON"
+            />
+            <CustomIcon name="chevron-down" color="gray.600" />
           </Flex>
-        </AccordionButton>
-        <AccordionPanel p={4} borderTop="1px solid" borderColor="gray.700">
-          <Flex direction="column" gap={3}>
-            {formattedArray.map((item) => (
-              <Flex gap={4}>
-                <Text variant="body2" color="text.dark" w={52}>
-                  {item.key}
+        </Flex>
+      </AccordionButton>
+      <AccordionPanel p={4} borderTop="1px solid" borderColor="gray.700">
+        <Flex direction="column" gap={3}>
+          {formattedArray.map((item) => (
+            <Flex gap={4}>
+              <Text variant="body2" color="text.dark" w={52}>
+                {item.key}
+              </Text>
+              {typeof item.value === "object" ? (
+                <Text variant="body2" color="text.main">
+                  {JSON.stringify(item.value)}
                 </Text>
-                {typeof item.value === "object" ? (
-                  <Text variant="body2" color="text.main">
-                    {JSON.stringify(item.value)}
-                  </Text>
-                ) : (
-                  <Text variant="body2" color="text.main">
-                    {item.value?.toString()}
-                  </Text>
-                )}
-              </Flex>
-            ))}
-          </Flex>
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
+              ) : (
+                <Text variant="body2" color="text.main">
+                  {item.value?.toString()}
+                </Text>
+              )}
+            </Flex>
+          ))}
+        </Flex>
+      </AccordionPanel>
+    </AccordionItem>
   );
 };
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index c3a9d533f..f0bca770a 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -1,20 +1,22 @@
 import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { useCallback } from "react";
 
-import { useMobile } from "lib/app-provider";
+import { ErrorFetching } from "../ErrorFetching";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { ResourceCard } from "lib/components/resource/ResourceCard";
+import { EmptyState } from "lib/components/state";
 import { TableTitle, ViewMore } from "lib/components/table";
-import {
-  useAccountResources,
-  type IndexedResource,
-} from "lib/services/move/resourceService";
-import type { HumanAddr } from "lib/types";
+import { useAccountResources } from "lib/services/move/resourceService";
+import type { HumanAddr, InternalResource } from "lib/types";
 import { truncate } from "lib/utils";
 
 export interface ResourceGroup {
   group: string;
-  items: IndexedResource[];
+  account: string;
+  displayName: string;
+  items: InternalResource[];
 }
 
 export interface ResourceGroupByAccount {
@@ -65,24 +67,46 @@ export const ResourceLists = ({
   address,
 }: ResourcesListsProps) => {
   const isMobile = useMobile();
-  const { data: resourcesData = [] } = useAccountResources({
+  const navigate = useInternalNavigate();
+  const { data: resources, isLoading } = useAccountResources({
     address,
   });
-  const resources = resourcesData as IndexedResource[];
+
+  const handleSelectResource = useCallback(
+    (resource: ResourceGroup) => {
+      navigate({
+        pathname: `/accounts/[accountAddress]/[tab]`,
+        query: {
+          accountAddress: address,
+          tab: "resources",
+          account: resource.account,
+          selected: resource.group,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [address, navigate]
+  );
+  if (isLoading) return <Loading />;
+  if (!resources) return <ErrorFetching />;
+  if (resources.length === 0)
+    return <EmptyState imageVariant="empty" message="No resources found." />;
 
   const restructuredResources = resources.reduce<Record<string, ResourceGroup>>(
     (acc, resource) => {
-      const [ownerName, groupName] = resource.structTag.split("::");
-
-      const name = `${truncate(ownerName)}::${groupName}`;
-      const groupResources = acc[name] ?? {};
+      const [accountName, groupName] = resource.structTag.split("::");
+      const groupResources = acc[groupName] ?? {};
       const items = groupResources?.items ?? [];
       items.push(resource);
 
       return {
         ...acc,
-        [name]: {
-          group: name,
+        [groupName]: {
+          displayName: `${truncate(accountName)}::${groupName}`,
+          account: accountName,
+          group: groupName,
           items,
         },
       };
@@ -91,7 +115,6 @@ export const ResourceLists = ({
   );
   const groupedResources = Object.values(restructuredResources);
 
-  if (!resources) return <Loading />;
   return (
     <Flex
       direction="column"
@@ -104,7 +127,11 @@ export const ResourceLists = ({
         <>
           <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
             {groupedResources.slice(0, 8).map((item) => (
-              <ResourceCard name={item.group} amount={item.items.length} />
+              <ResourceCard
+                name={item.displayName}
+                amount={item.items.length}
+                onClick={() => handleSelectResource(item)}
+              />
             ))}
           </SimpleGrid>
           {onViewMore && <ViewMore onClick={onViewMore} />}
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 2740a8cef..36a8d6656 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -4,20 +4,22 @@ import {
   AccordionItem,
   AccordionPanel,
   Badge,
+  Button,
   Flex,
   Heading,
   Text,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
+import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { ResourceCard } from "lib/components/resource/ResourceCard";
 import { ResourceDetailCard } from "lib/components/resource/ResourceDetailCard";
+import { EmptyState } from "lib/components/state";
 import { TableTitle } from "lib/components/table";
-import type { IndexedResource } from "lib/services/move/resourceService";
 import { useAccountResources } from "lib/services/move/resourceService";
 import type { HumanAddr } from "lib/types";
 import { getFirstQueryParam, truncate } from "lib/utils";
@@ -30,11 +32,41 @@ interface ResourceSectionProps {
 export const ResourceSection = ({ address }: ResourceSectionProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
+  const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+  const selectedAccountParam = getFirstQueryParam(router.query.account);
+  const selectedNameParam = getFirstQueryParam(router.query.selected);
 
-  const { data: resourcesData = [] } = useAccountResources({
+  const handleSelectResource = useCallback(
+    (
+      account: ResourceGroupByAccount["owner"],
+      resource: ResourceGroup["group"]
+    ) => {
+      if (account === selectedAccountParam && resource === selectedNameParam)
+        return;
+      navigate({
+        pathname: `/accounts/[accountAddress]/[tab]`,
+        query: {
+          accountAddress: address,
+          tab: "resources",
+          account,
+          selected: resource,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [selectedNameParam, selectedAccountParam, address, navigate]
+  );
+
+  const { data: resources, isLoading } = useAccountResources({
     address,
   });
-  const resources = resourcesData as IndexedResource[];
+
+  if (isLoading) return <Loading />;
+  if (!resources) return <ErrorFetching />;
+  if (resources.length === 0)
+    return <EmptyState imageVariant="empty" message="No resources found." />;
 
   const sortedResource = resources.reduce<
     Record<string, ResourceGroupByAccount>
@@ -44,6 +76,7 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
     const ownerResources = acc[ownerName]?.resources ?? {};
     const groupResources = ownerResources[groupName] ?? {};
     const items = groupResources?.items ?? [];
+
     items.push(resource);
 
     return {
@@ -54,6 +87,8 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
           ...ownerResources,
           [groupName]: {
             group: groupName,
+            account: ownerName,
+            displayName: `${truncate(ownerName)}::${groupName}`,
             items,
           },
         },
@@ -63,56 +98,31 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
 
   const groupedResources = Object.values(sortedResource);
 
-  const selectedAccount = getFirstQueryParam(router.query.account);
-
-  const selectedName = getFirstQueryParam(router.query.selected);
-
-  const handleSelectResource = useCallback(
-    (
-      account: ResourceGroupByAccount["owner"],
-      resource: ResourceGroup["group"]
-    ) => {
-      if (account === selectedAccount && resource === selectedName) return;
-      navigate({
-        pathname: `/accounts/[address]/[tab]`,
-        query: {
-          address,
-          tab: "resources",
-          account,
-          selected: resource,
-        },
-        options: {
-          shallow: true,
-        },
-      });
-    },
-    [selectedName, selectedAccount, address, navigate]
-  );
-
   const selectedGroup =
-    groupedResources.find((item) => item.owner === router.query.account) ||
+    groupedResources.find((item) => item.owner === selectedAccountParam) ??
     groupedResources[0];
-
-  if (!selectedGroup) return null;
   const selectedGroupArray = Object.values(selectedGroup.resources);
 
-  const selectedResources = selectedGroupArray.find(
-    (item) => item.group === router.query.selected
-  );
+  const selectedResources =
+    selectedGroupArray.find((item) => item.group === selectedNameParam) ??
+    selectedGroupArray[0];
 
-  const selectedIndex = !router.query.account
+  const selectedIndex = !selectedAccountParam
     ? 0
-    : groupedResources.findIndex((item) => item.owner === router.query.account);
+    : groupedResources.findIndex((item) => item.owner === selectedAccountParam);
 
-  if (!selectedResources) return <Loading />;
+  const updateExpandedIndexes = (indexes: number[]) =>
+    setExpandedIndexes(indexes);
 
   return (
     <Flex direction="column" mt={8}>
-      <TableTitle
-        helperText="Resources stored in this account"
-        title="Resources"
-        count={12}
-      />
+      <Flex>
+        <TableTitle
+          helperText="Resources stored in this account"
+          title="Resources"
+          count={12}
+        />
+      </Flex>
       <Flex
         gap={6}
         flexDirection={{ base: "column", md: "row" }}
@@ -138,7 +148,7 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
                         name={subitem.group}
                         key={subitem.group}
                         amount={subitem.items.length}
-                        isSelected={router.query.selected === subitem.group}
+                        isSelected={selectedResources.group === subitem.group}
                         onClick={() =>
                           handleSelectResource(item.owner, subitem.group)
                         }
@@ -151,23 +161,45 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
           </Accordion>
         </Flex>
         <Flex direction="column" w="full">
-          <Flex alignItems="center" pb={6}>
-            <Heading as="h6" variant="h6">
-              {router.query.account}::{selectedResources?.group}
-            </Heading>
-            <Badge variant="primary" ml={2}>
-              {selectedResources?.items.length}
-            </Badge>
+          <Flex justifyContent="space-between" alignItems="center" pb={6}>
+            <Flex alignItems="center">
+              <Heading as="h6" variant="h6">
+                {selectedGroup.owner}::{selectedResources.group}
+              </Heading>
+              <Badge variant="primary" ml={2}>
+                {selectedResources.items.length}
+              </Badge>
+            </Flex>
+            <Button
+              variant="outline-primary"
+              size="sm"
+              rightIcon={
+                <CustomIcon
+                  name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+                  boxSize={3}
+                />
+              }
+              onClick={() => {
+                setExpandedIndexes((prev) =>
+                  !prev.length
+                    ? Array.from(Array(selectedResources.items.length).keys())
+                    : []
+                );
+              }}
+            >
+              {expandedIndexes.length ? "Collapse All" : "Expand All"}
+            </Button>
           </Flex>
-          <Flex gap={4} flexDirection="column">
+          <Accordion
+            allowMultiple
+            width="full"
+            index={expandedIndexes}
+            onChange={updateExpandedIndexes}
+          >
             {selectedResources.items.map((item) => (
-              <ResourceDetailCard
-                resourceData={item}
-                key={item.struct_tag}
-                defaultIndex={selectedResources.items.length > 2 ? [] : [0]}
-              />
+              <ResourceDetailCard resourceData={item} key={item.structTag} />
             ))}
-          </Flex>
+          </Accordion>
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index f86596643..bea02c4f9 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -28,13 +28,12 @@ import { useAccountId } from "lib/services/accountService";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import { useAccountModules } from "lib/services/move/moduleService";
 import { useAccountResources } from "lib/services/move/resourceService";
-import type { IndexedResource } from "lib/services/move/resourceService";
 import { useICNSNamesByAddress } from "lib/services/nameService";
 import {
   usePublicProjectByAccountAddress,
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
-import type { HumanAddr } from "lib/types";
+import type { HumanAddr, InternalResource } from "lib/types";
 import { getFirstQueryParam, truncate } from "lib/utils";
 
 import { AccountHeader } from "./components/AccountHeader";
@@ -99,7 +98,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
   const { data: resourcesData = [] } = useAccountResources({
     address: accountAddress,
   });
-  const resources = resourcesData as IndexedResource[];
+  const resources = resourcesData as InternalResource[];
 
   const publicDetail = publicInfoBySlug?.details;
   const {
diff --git a/src/lib/services/move/resource.ts b/src/lib/services/move/resource.ts
index f2c7b1983..69ea2e0c4 100644
--- a/src/lib/services/move/resource.ts
+++ b/src/lib/services/move/resource.ts
@@ -27,6 +27,6 @@ export const getAccountResources = async (
   await fetchFn(null);
 
   return snakeToCamel(result).sort((a, b) =>
-    a.structTag < b.structTag ? -1 : 1
+    a.structTag.localeCompare(b.structTag)
   );
 };
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index a59ff9c99..37fcaa149 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -7,39 +7,16 @@ import type { InternalResource } from "lib/types/move/resource";
 
 import { getAccountResources } from "./resource";
 
-export interface IndexedResource extends InternalResource {
-  address: string;
-  move_resource: string;
-  raw_bytes: string;
-  struct_tag: string;
-}
-
-// const indexResourceResponse = (resource: InternalResource): IndexedResource => {
-//   const parsedAbi = parseJsonABI(module.abi);
-//   const { view, execute } = splitViewExecuteFunctions(
-//     parsedAbi.exposed_functions
-//   );
-//   return {
-//     ...module,
-//     parsedAbi,
-//     viewFunctions: view,
-//     executeFunctions: execute,
-//     searchedFn: parsedAbi.exposed_functions.find(
-//       (fn) => fn.name === functionName
-//     ),
-//   };
-// };
-
 export const useAccountResources = ({
   address,
 }: {
   address: MoveAccountAddr;
-}): UseQueryResult<IndexedResource[]> => {
+}): UseQueryResult<InternalResource[]> => {
   const baseEndpoint = useBaseApiRoute("rest");
   const queryFn: QueryFunction<InternalResource[]> = () =>
     getAccountResources(baseEndpoint, address);
   return useQuery(
-    [CELATONE_QUERY_KEYS.RESOURCE_MODULES, baseEndpoint, address],
+    [CELATONE_QUERY_KEYS.ACCOUNT_RESOURCES, baseEndpoint, address],
     queryFn
   );
 };

From cbc45222e0f9dc99b801ca789b358ba89e59e735 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 28 Sep 2023 17:45:56 +0700
Subject: [PATCH 115/368] fix(components): add change log

---
 CHANGELOG.md                                                     | 1 +
 .../account-details/components/resources/ResourceSection.tsx     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d906ada40..869ff7f97 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#550](https://github.com/alleslabs/celatone-frontend/pull/550) Add modules and resources in account detail
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Wireup publish module tx
 - [#544](https://github.com/alleslabs/celatone-frontend/pull/544) Show module source code if available
 - [#534](https://github.com/alleslabs/celatone-frontend/pull/534) Wire up initia execute function
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 36a8d6656..8f582eb6c 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -33,6 +33,7 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+
   const selectedAccountParam = getFirstQueryParam(router.query.account);
   const selectedNameParam = getFirstQueryParam(router.query.selected);
 

From 65aed418448133a78a3bf8a8b7beea20a0c6f432 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:55:21 +0700
Subject: [PATCH 116/368] fix: bug bash interaction

---
 src/lib/components/EstimatedFeeRender.tsx     |  5 +-
 src/lib/components/abi/AbiForm.tsx            | 20 +++---
 .../abi/args-form/field/ArgFieldWidget.tsx    | 37 +++++++---
 .../components/abi/args-form/field/index.tsx  | 23 ++++---
 .../components/abi/args-form/field/utils.ts   | 14 ++--
 src/lib/components/abi/args-form/index.tsx    | 50 +++++++++-----
 .../abi/types-form/TypeFieldInput.tsx         | 67 ++++++++++++-------
 src/lib/components/abi/types-form/index.tsx   | 33 +++++----
 src/lib/components/dropzone/index.tsx         |  2 +-
 .../component/FunctionSelectPanel.tsx         | 23 ++++---
 .../common/InteractionTypeSwitch.tsx          |  2 +-
 .../interact/component/form/ExecuteArea.tsx   |  7 +-
 .../interact/component/form/ViewArea.tsx      |  4 +-
 src/lib/pages/interact/index.tsx              |  2 +
 14 files changed, 186 insertions(+), 103 deletions(-)

diff --git a/src/lib/components/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx
index 08f492424..5628252ba 100644
--- a/src/lib/components/EstimatedFeeRender.tsx
+++ b/src/lib/components/EstimatedFeeRender.tsx
@@ -1,5 +1,6 @@
 import { Spinner } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
+import { useState } from "react";
 
 import { useAssetInfos } from "lib/services/assetService";
 import { formatBalanceWithDenom } from "lib/utils";
@@ -11,8 +12,10 @@ export const EstimatedFeeRender = ({
   estimatedFee: StdFee | undefined;
   loading: boolean;
 }) => {
+  const [isUsed, setIsUsed] = useState(false);
   const { assetInfos, isLoading } = useAssetInfos({ withPrices: false });
-  if (loading || isLoading) {
+  if (loading || (isUsed && isLoading)) {
+    if (!isUsed) setIsUsed(true);
     return (
       <>
         <Spinner size="sm" mx={1} /> Estimating ...
diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
index cce57b23e..3c6fd8e26 100644
--- a/src/lib/components/abi/AbiForm.tsx
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -37,17 +37,15 @@ export const AbiForm = ({
           }}
         />
       )}
-      {Object.keys(args).length > 0 && (
-        <ArgsForm
-          params={fn.params}
-          initialData={args}
-          propsOnChange={(value) => {
-            setValue("args", value);
-            propsOnChange?.(getValues());
-          }}
-          propsOnErrors={propsOnErrors}
-        />
-      )}
+      <ArgsForm
+        params={fn.params}
+        initialData={args}
+        propsOnChange={(value) => {
+          setValue("args", value);
+          propsOnChange?.(getValues());
+        }}
+        propsOnErrors={propsOnErrors}
+      />
     </Flex>
   );
 };
diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index 919883978..c5e64e8c6 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -2,16 +2,35 @@ import { Input, Textarea } from "@chakra-ui/react";
 import { Select } from "chakra-react-select";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import type { Nullable } from "lib/types";
+import { useExampleAddresses } from "lib/app-provider";
+import type { HumanAddr, Nullable } from "lib/types";
 
 import { UintTypes } from "./utils";
 
+const STRING_TYPE = "0x1::string::String";
+
 const getInputPlaceholder = (type: string, isNull: boolean) => {
-  if (type === "0x1::string::String" && !isNull)
+  if (type === STRING_TYPE && !isNull)
     return "Left blank to send as empty string";
   return " ";
 };
 
+const getVectorPlaceholder = (
+  type: string,
+  isNull: boolean,
+  sampleAddresses: HumanAddr
+) => {
+  if (isNull) return " ";
+  const [, elementType] = type.split(/<(.*)>/);
+
+  if (UintTypes.includes(elementType)) return "[1, 2, 3]";
+  if (elementType === "address") return `[0x1, ${sampleAddresses}]`;
+  if (elementType === STRING_TYPE)
+    return "[some first string, some second string]";
+  if (elementType === "bool") return "[true, false]";
+  return `[${elementType}]`;
+};
+
 const boolOptions = [
   { label: "True", value: "true" },
   { label: "False", value: "false" },
@@ -28,11 +47,9 @@ export const ArgFieldWidget = ({
   value,
   onChange,
 }: ArgFieldWidgetProps) => {
-  if (
-    UintTypes.includes(type) ||
-    type === "address" ||
-    type === "0x1::string::String"
-  )
+  const { user: exampleAddress } = useExampleAddresses();
+
+  if (UintTypes.includes(type) || type === "address" || type === STRING_TYPE)
     return (
       <Input
         size="md"
@@ -81,7 +98,11 @@ export const ArgFieldWidget = ({
     <Textarea
       minH="112px"
       h="fit-content"
-      placeholder={" "}
+      placeholder={
+        type.startsWith("vector")
+          ? getVectorPlaceholder(type, value === null, exampleAddress)
+          : " "
+      }
       value={value ?? ""}
       onChange={onChange}
     />
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index da91a5044..fddb88e25 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -7,7 +7,7 @@ import {
   FormLabel,
   Text,
 } from "@chakra-ui/react";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { type Control, useController } from "react-hook-form";
 
 import { useValidateAddress } from "lib/app-provider";
@@ -20,15 +20,14 @@ interface ArgFieldTemplateProps {
   index: number;
   param: string;
   control: Control<AbiFormData["args"]>;
-  error?: string;
 }
 
 export const ArgFieldTemplate = ({
   index,
   param,
   control,
-  error,
 }: ArgFieldTemplateProps) => {
+  const [isEditted, setIsEditted] = useState(false);
   const { validateUserAddress, validateContractAddress, validateHexAddress } =
     useValidateAddress();
 
@@ -46,13 +45,13 @@ export const ArgFieldTemplate = ({
 
   const {
     field: { value, onChange, ...fieldProps },
-    fieldState: { isTouched },
+    fieldState: { isTouched, error },
   } = useController({
     name: `${index}`,
     control,
     rules,
   });
-  const isError = isTouched && !!error;
+  const isError = (isTouched || isEditted) && !!error;
 
   const size = "md";
   const isNull = value === null;
@@ -61,7 +60,8 @@ export const ArgFieldTemplate = ({
       <FormControl
         className={`${size}-form`}
         variant={
-          type === "0x1::string::String" && !isNull
+          (type === "0x1::string::String" || type.startsWith("vector")) &&
+          !isNull
             ? "fixed-floating"
             : "floating"
         }
@@ -70,14 +70,21 @@ export const ArgFieldTemplate = ({
         isDisabled={isNull}
         {...fieldProps}
       >
-        <ArgFieldWidget type={type} value={value} onChange={onChange} />
+        <ArgFieldWidget
+          type={type}
+          value={value}
+          onChange={(e) => {
+            setIsEditted(true);
+            onChange(e);
+          }}
+        />
         <FormLabel className={`${size}-label`} bgColor="background.main">
           {param}
         </FormLabel>
 
         {isError && (
           <FormErrorMessage className="error-text" mt={1}>
-            {error}
+            {error.message}
           </FormErrorMessage>
         )}
       </FormControl>
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
index bf8708fcb..ce74dac75 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -1,4 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+import big from "big.js";
 import { parseInt } from "lodash";
 import type { FieldValues, UseControllerProps } from "react-hook-form";
 
@@ -10,11 +11,14 @@ const validateNull = (v: Option<string>) =>
   v !== undefined ? undefined : "cannot be null";
 
 const validateUint = (uintType: string) => (v: string) => {
-  const value = parseInt(v);
-  const maxValue = 2 ** parseInt(uintType.slice(1)) - 1;
-  return value >= 0 && value <= maxValue
-    ? undefined
-    : `Input must be ‘${uintType}’`;
+  try {
+    const value = big(v);
+    const maxValue = big(2).pow(parseInt(uintType.slice(1)));
+    if (value.lt(0) || value.gte(maxValue)) throw new Error();
+    return undefined;
+  } catch {
+    return `Input must be ‘${uintType}’`;
+  }
 };
 const validateBool = (v: string) =>
   v.toLowerCase() === "true" || v.toLowerCase() === "false"
diff --git a/src/lib/components/abi/args-form/index.tsx b/src/lib/components/abi/args-form/index.tsx
index 17bd16b78..c504233fc 100644
--- a/src/lib/components/abi/args-form/index.tsx
+++ b/src/lib/components/abi/args-form/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading } from "@chakra-ui/react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
 import { useEffect } from "react";
 import type { FormState } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -32,10 +32,12 @@ export const ArgsForm = ({
     trigger,
     control,
     getValues,
+    clearErrors,
     formState: { errors },
   } = useForm<Record<string, Nullable<string>>>({
     defaultValues: initialData,
     mode: "all",
+    delayError: 500,
   });
 
   useEffect(() => {
@@ -53,20 +55,38 @@ export const ArgsForm = ({
       <Heading variant="h6" as="h6" color="text.main">
         args
       </Heading>
-      {params.map((param, index) => {
-        control.register(`${index}`, {
-          onChange: () => propsOnChange?.(getValues()),
-        });
-        return (
-          <ArgFieldTemplate
-            key={param + index.toString()}
-            index={index}
-            param={param}
-            control={control}
-            error={errors[`${index}`]?.message}
-          />
-        );
-      })}
+      {!params.length ? (
+        <Flex
+          direction="column"
+          alignItems="center"
+          gap={4}
+          p="24px 8px"
+          border="1px solid"
+          borderColor="gray.700"
+          borderRadius="8px"
+        >
+          <Text variant="body2" color="text.dark">
+            This function does not require any inputs.
+          </Text>
+        </Flex>
+      ) : (
+        params.map((param, index) => {
+          control.register(`${index}`, {
+            onChange: () => {
+              clearErrors(`${index}`);
+              propsOnChange?.(getValues());
+            },
+          });
+          return (
+            <ArgFieldTemplate
+              key={param + index.toString()}
+              index={index}
+              param={param}
+              control={control}
+            />
+          );
+        })
+      )}
     </Flex>
   );
 };
diff --git a/src/lib/components/abi/types-form/TypeFieldInput.tsx b/src/lib/components/abi/types-form/TypeFieldInput.tsx
index f9d8b21ca..a88c7b91b 100644
--- a/src/lib/components/abi/types-form/TypeFieldInput.tsx
+++ b/src/lib/components/abi/types-form/TypeFieldInput.tsx
@@ -1,44 +1,63 @@
-import { Flex, Input, Text } from "@chakra-ui/react";
+import { Flex, FormControl, Input, Text } from "@chakra-ui/react";
 import { capitalize } from "lodash";
+import { useState } from "react";
+import { useController, type Control } from "react-hook-form";
+
+import type { AbiFormData } from "lib/types";
 
 interface TypeFieldInputProps {
   index: number;
   constraints: string[];
-  value: string;
-  onChange: (value: string) => void;
+  control: Control<AbiFormData["typeArgs"]>;
 }
 
 export const TypeFieldInput = ({
   index,
-  value,
   constraints,
-  onChange,
+  control,
 }: TypeFieldInputProps) => {
+  const [isEditted, setIsEditted] = useState(false);
+
   const placeholder = constraints.length
     ? `Ability : ${constraints
         .map((constraint) => capitalize(constraint))
         .join(" + ")}`
     : "No ability";
 
+  const {
+    field: { value, onChange, ...fieldProps },
+    fieldState: { isTouched, error },
+  } = useController({
+    name: `${index}`,
+    control,
+    rules: {
+      required: true,
+    },
+  });
+  const isError = (isTouched || isEditted) && !!error;
+
   return (
-    <Flex
-      bgColor="gray.900"
-      borderRadius="8px"
-      p="8px 16px"
-      gap={2}
-      alignItems="center"
-    >
-      <Text variant="body1" fontWeight={700} w={7}>
-        {`T${index}:`}
-      </Text>
-      <Input
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => {
-          const newValue = e.target.value;
-          onChange(newValue);
-        }}
-      />
-    </Flex>
+    <FormControl isInvalid={isError} {...fieldProps}>
+      <Flex
+        bgColor="gray.900"
+        borderRadius="8px"
+        p="8px 16px"
+        gap={2}
+        alignItems="center"
+      >
+        <Text variant="body1" fontWeight={700} w={7}>
+          {`T${index}:`}
+        </Text>
+        <Input
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => {
+            const newValue = e.target.value;
+            setIsEditted(true);
+            onChange(newValue);
+          }}
+        />
+      </Flex>
+    </FormControl>
   );
 };
diff --git a/src/lib/components/abi/types-form/index.tsx b/src/lib/components/abi/types-form/index.tsx
index 558f401b6..4c7cc3675 100644
--- a/src/lib/components/abi/types-form/index.tsx
+++ b/src/lib/components/abi/types-form/index.tsx
@@ -16,32 +16,31 @@ export const TypesForm = ({
   initialData,
   propsOnChange,
 }: TypesFormProps) => {
-  const { setValue, getValues } = useForm<Record<string, string>>({
+  const { control, getValues } = useForm<Record<string, string>>({
     defaultValues: initialData,
     mode: "all",
   });
 
-  const handleOnChange = (index: number) => {
-    return (fieldInput: string) => {
-      setValue(`${index}`, fieldInput);
-      propsOnChange?.(getValues());
-    };
-  };
-
   return (
     <Flex direction="column" gap={4}>
       <Heading variant="h6" as="h6" color="text.main">
         type_args
       </Heading>
-      {genericTypeParams.map(({ constraints }, index) => (
-        <TypeFieldInput
-          key={constraints.join() + index.toString()}
-          index={index}
-          constraints={constraints}
-          value={initialData[index]}
-          onChange={handleOnChange(index)}
-        />
-      ))}
+      {genericTypeParams.map(({ constraints }, index) => {
+        control.register(`${index}`, {
+          onChange: () => {
+            propsOnChange?.(getValues());
+          },
+        });
+        return (
+          <TypeFieldInput
+            key={constraints.join() + index.toString()}
+            index={index}
+            constraints={constraints}
+            control={control}
+          />
+        );
+      })}
     </Flex>
   );
 };
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 1c0fdde38..31997ad18 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -47,7 +47,7 @@ export function DropZone({
 
   const { getRootProps, getInputProps, fileRejections } = useDropzone({
     onDrop,
-    maxFiles: 1,
+    multiple: false,
     accept: config.accept,
     maxSize,
   });
diff --git a/src/lib/pages/interact/component/FunctionSelectPanel.tsx b/src/lib/pages/interact/component/FunctionSelectPanel.tsx
index 60bd72b1c..2dd291867 100644
--- a/src/lib/pages/interact/component/FunctionSelectPanel.tsx
+++ b/src/lib/pages/interact/component/FunctionSelectPanel.tsx
@@ -38,10 +38,12 @@ const RenderFunctions = ({
   states,
   selectedFn,
   setSelectedFn,
+  tab,
 }: {
   states: FunctionStates;
   selectedFn: Option<ExposedFunction>;
   setSelectedFn: (fn: ExposedFunction) => void;
+  tab: InteractionTabs;
 }) => {
   if (!states.filteredFunctions)
     return (
@@ -61,15 +63,17 @@ const RenderFunctions = ({
         selectedFn={selectedFn}
         setSelectedFn={setSelectedFn}
       />
-      <FunctionAccordion
-        triggerText="Other functions"
-        isEmpty={states.noOtherFns}
-        filteredFns={states.filteredFunctions.filter(
-          (fn) => !checkAvailability(fn)
-        )}
-        selectedFn={selectedFn}
-        setSelectedFn={setSelectedFn}
-      />
+      {tab === InteractionTabs.EXECUTE_MODULE && (
+        <FunctionAccordion
+          triggerText="Other functions"
+          isEmpty={states.noOtherFns}
+          filteredFns={states.filteredFunctions.filter(
+            (fn) => !checkAvailability(fn)
+          )}
+          selectedFn={selectedFn}
+          setSelectedFn={setSelectedFn}
+        />
+      )}
     </Accordion>
   );
 };
@@ -128,6 +132,7 @@ export const FunctionSelectPanel = ({
           states={functionStates}
           selectedFn={selectedFn}
           setSelectedFn={setSelectedFn}
+          tab={tab}
         />
       </Flex>
     </div>
diff --git a/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx b/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx
index 1571f8143..180aa7d60 100644
--- a/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx
+++ b/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx
@@ -59,7 +59,7 @@ export const InteractionTypeSwitch = ({
           textAlign="center"
         >
           <Heading as="h6" variant="h6" fontSize="14px">
-            {tab} {counts[idx] && `(${counts[idx]})`}
+            {tab} {`(${counts[idx]})`}
           </Heading>
         </MotionBox>
       ))}
diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index f2e8dea8b..30f955bea 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -52,8 +52,11 @@ export const ExecuteArea = ({
   const [processing, setProcessing] = useState(false);
 
   const enableExecute = useMemo(
-    () => !abiErrors.length && Boolean(address),
-    [abiErrors.length, address]
+    () =>
+      Object.values(data.typeArgs).every((v) => v.length) &&
+      !abiErrors.length &&
+      Boolean(address),
+    [data.typeArgs, abiErrors.length, address]
   );
 
   const { isFetching } = useSimulateFeeQuery({
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 579100ba8..5d15814b4 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -61,7 +61,9 @@ export const ViewArea = ({
   };
 
   const isLoading = queryFetching || queryRefetching;
-  const isDisabled = Boolean(abiErrors.length);
+  const isDisabled = Boolean(
+    Object.values(abiData.typeArgs).some((v) => !v.length) || abiErrors.length
+  );
   return (
     <Grid templateColumns="1fr 1fr" gap={6}>
       <GridItem>
diff --git a/src/lib/pages/interact/index.tsx b/src/lib/pages/interact/index.tsx
index 66b41678e..f114c7a92 100644
--- a/src/lib/pages/interact/index.tsx
+++ b/src/lib/pages/interact/index.tsx
@@ -55,6 +55,8 @@ export const Interact = () => {
     (selectedModule: IndexedModule, fn?: ExposedFunction) => {
       setModule(selectedModule);
       setSelectedFn(fn);
+      handleSetSelectedType(fn?.is_view ?? true ? "view" : "execute");
+
       navigate({
         pathname: "/interact",
         query: {

From bde18db4eaca82b719cefb56d8ea605aa778e4d9 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:02:18 +0700
Subject: [PATCH 117/368] fix: fn count undefined

---
 .../pages/interact/component/common/InteractionTypeSwitch.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx b/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx
index 180aa7d60..e6361ba97 100644
--- a/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx
+++ b/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx
@@ -59,7 +59,7 @@ export const InteractionTypeSwitch = ({
           textAlign="center"
         >
           <Heading as="h6" variant="h6" fontSize="14px">
-            {tab} {`(${counts[idx]})`}
+            {tab} {counts[idx] !== undefined && `(${counts[idx]})`}
           </Heading>
         </MotionBox>
       ))}

From 3f628efd38480b883c01bc87e9c2127dc75a09f6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:00:52 +0700
Subject: [PATCH 118/368] feat: handle move tx flags

---
 src/lib/components/TxFilterSelection.tsx    | 37 +++++----
 src/lib/data/constant.ts                    | 32 ++++++--
 src/lib/gql/gql.ts                          |  6 +-
 src/lib/gql/graphql.ts                      | 90 +++++++++++++++++++++
 src/lib/query/tx.ts                         |  4 +
 src/lib/services/expression/txExpression.ts |  8 +-
 src/lib/services/txService.ts               |  8 +-
 src/lib/types/tx/transaction.ts             | 24 ++++--
 src/lib/utils/extractActionValue.ts         | 10 +--
 src/lib/utils/msgFurtherAction.ts           |  7 +-
 10 files changed, 175 insertions(+), 51 deletions(-)

diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 08b6831e6..53e5d7d64 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -18,6 +18,12 @@ import { useMemo, useState, useRef, forwardRef } from "react";
 
 import { useMoveConfig, useWasmConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import {
+  DEFAULT_BASE_TX_FILTERS,
+  DEFAULT_MOVE_TX_FILTERS,
+  DEFAULT_WASM_TX_FILTERS,
+} from "lib/data";
+import type { BaseTxFilters, MoveTxFilters, WasmTxFilters } from "lib/types";
 import { displayActionValue, mergeRefs } from "lib/utils";
 
 import { DropdownChevron } from "./DropdownChevron";
@@ -42,24 +48,17 @@ const listItemProps: CSSProperties = {
   cursor: "pointer",
 };
 
-const OPTIONS = ["isSend", "isIbc"];
-
-const WASM_OPTIONS = [
-  "isUpload",
-  "isInstantiate",
-  "isExecute",
-  "isMigrate",
-  "isClearAdmin",
-  "isUpdateAdmin",
-];
-
-const MOVE_OPTIONS = [
-  "isPublish",
-  "isExecute",
-  "isEntryExecute",
-  "isUpgrade",
-  "isScript",
-];
+const BASE_OPTIONS = Object.keys(
+  DEFAULT_BASE_TX_FILTERS
+) as (keyof BaseTxFilters)[];
+
+const WASM_OPTIONS = Object.keys(
+  DEFAULT_WASM_TX_FILTERS
+) as (keyof WasmTxFilters)[];
+
+const MOVE_OPTIONS = Object.keys(
+  DEFAULT_MOVE_TX_FILTERS
+) as (keyof MoveTxFilters)[];
 
 // TODO - Refactor this along with TagSelection
 export const TxFilterSelection = forwardRef<
@@ -92,7 +91,7 @@ export const TxFilterSelection = forwardRef<
 
     const options = useMemo(
       () => [
-        ...OPTIONS,
+        ...BASE_OPTIONS,
         ...(wasm.enabled ? WASM_OPTIONS : []),
         ...(move.enabled ? MOVE_OPTIONS : []),
       ],
diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
index 9a5face13..09be0c986 100644
--- a/src/lib/data/constant.ts
+++ b/src/lib/data/constant.ts
@@ -1,4 +1,10 @@
-import type { LVPair } from "lib/types";
+import type {
+  BaseTxFilters,
+  LVPair,
+  MoveTxFilters,
+  TxFilters,
+  WasmTxFilters,
+} from "lib/types";
 import { MsgType } from "lib/types";
 /**
  * @todos Revisit utils import later
@@ -32,19 +38,31 @@ export const typeUrlDict = {
 
 export const DEFAULT_RPC_ERROR = "Invalid format, or Something went wrong";
 
-export const DEFAULT_TX_FILTERS = {
+export const DEFAULT_BASE_TX_FILTERS: BaseTxFilters = {
   isSend: false,
   isIbc: false,
-  isExecute: false,
+};
+
+export const DEFAULT_WASM_TX_FILTERS: WasmTxFilters = {
   isInstantiate: false,
   isUpload: false,
+  isExecute: false,
   isMigrate: false,
   isUpdateAdmin: false,
   isClearAdmin: false,
-  isPublish: false,
-  isEntryExecute: false,
-  isUpgrade: false,
-  isScript: false,
+};
+
+export const DEFAULT_MOVE_TX_FILTERS: MoveTxFilters = {
+  isMovePublish: false,
+  isMoveUpgrade: false,
+  isMoveExecute: false,
+  isMoveScript: false,
+};
+
+export const DEFAULT_TX_FILTERS: TxFilters = {
+  ...DEFAULT_BASE_TX_FILTERS,
+  ...DEFAULT_WASM_TX_FILTERS,
+  ...DEFAULT_MOVE_TX_FILTERS,
 };
 
 export const UPPERBOUND_COUNT = 10000;
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index a1252a06c..941af7314 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -81,7 +81,7 @@ const documents = {
     types.GetProposalListCountDocument,
   "\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n":
     types.GetProposalTypesDocument,
-  "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n      }\n      is_signer\n    }\n  }\n":
+  "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n":
     types.GetTxsByAddressPaginationDocument,
   "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByAddressDocument,
@@ -219,8 +219,8 @@ export function graphql(
   source: "\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n"
 ): typeof documents["\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n      }\n      is_signer\n    }\n  }\n"
-): typeof documents["\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n      }\n      is_signer\n    }\n  }\n"];
+  source: "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n"
+): typeof documents["\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 810940397..52251ba46 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -10554,6 +10554,11 @@ export type Transactions = {
   is_ibc: Scalars["Boolean"];
   is_instantiate: Scalars["Boolean"];
   is_migrate: Scalars["Boolean"];
+  is_move_execute: Scalars["Boolean"];
+  is_move_execute_event: Scalars["Boolean"];
+  is_move_publish: Scalars["Boolean"];
+  is_move_script: Scalars["Boolean"];
+  is_move_upgrade: Scalars["Boolean"];
   is_send: Scalars["Boolean"];
   is_store_code: Scalars["Boolean"];
   is_update_admin: Scalars["Boolean"];
@@ -10830,6 +10835,11 @@ export type Transactions_Bool_Exp = {
   is_ibc?: InputMaybe<Boolean_Comparison_Exp>;
   is_instantiate?: InputMaybe<Boolean_Comparison_Exp>;
   is_migrate?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_execute?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_execute_event?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_publish?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_script?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_upgrade?: InputMaybe<Boolean_Comparison_Exp>;
   is_send?: InputMaybe<Boolean_Comparison_Exp>;
   is_store_code?: InputMaybe<Boolean_Comparison_Exp>;
   is_update_admin?: InputMaybe<Boolean_Comparison_Exp>;
@@ -10882,6 +10892,11 @@ export type Transactions_Insert_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
@@ -10987,6 +11002,11 @@ export type Transactions_Order_By = {
   is_ibc?: InputMaybe<Order_By>;
   is_instantiate?: InputMaybe<Order_By>;
   is_migrate?: InputMaybe<Order_By>;
+  is_move_execute?: InputMaybe<Order_By>;
+  is_move_execute_event?: InputMaybe<Order_By>;
+  is_move_publish?: InputMaybe<Order_By>;
+  is_move_script?: InputMaybe<Order_By>;
+  is_move_upgrade?: InputMaybe<Order_By>;
   is_send?: InputMaybe<Order_By>;
   is_store_code?: InputMaybe<Order_By>;
   is_update_admin?: InputMaybe<Order_By>;
@@ -11032,6 +11052,16 @@ export enum Transactions_Select_Column {
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11060,6 +11090,16 @@ export enum Transactions_Select_Column_Transactions_Aggregate_Bool_Exp_Bool_And_
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11082,6 +11122,16 @@ export enum Transactions_Select_Column_Transactions_Aggregate_Bool_Exp_Bool_Or_A
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11105,6 +11155,11 @@ export type Transactions_Set_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
@@ -11193,6 +11248,11 @@ export type Transactions_Stream_Cursor_Value_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
@@ -11248,6 +11308,16 @@ export enum Transactions_Update_Column {
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -12580,6 +12650,10 @@ export type GetTxsByAddressPaginationQuery = {
       is_send: boolean;
       is_store_code: boolean;
       is_update_admin: boolean;
+      is_move_publish: boolean;
+      is_move_upgrade: boolean;
+      is_move_execute: boolean;
+      is_move_script: boolean;
       account: { __typename?: "accounts"; address: string };
     };
   }>;
@@ -17792,6 +17866,22 @@ export const GetTxsByAddressPaginationDocument = {
                         kind: "Field",
                         name: { kind: "Name", value: "is_update_admin" },
                       },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_publish" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_upgrade" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_execute" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_script" },
+                      },
                     ],
                   },
                 },
diff --git a/src/lib/query/tx.ts b/src/lib/query/tx.ts
index a9cc006c0..2bd575aed 100644
--- a/src/lib/query/tx.ts
+++ b/src/lib/query/tx.ts
@@ -31,6 +31,10 @@ export const getTxsByAddressPagination = graphql(`
         is_send
         is_store_code
         is_update_admin
+        is_move_publish
+        is_move_upgrade
+        is_move_execute
+        is_move_script
       }
       is_signer
     }
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index 8b4361c11..c9e6c9c99 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -12,10 +12,10 @@ const actions = {
   isMigrate: "is_migrate",
   isUpdateAdmin: "is_update_admin",
   isClearAdmin: "is_clear_admin",
-  isPublish: "is_publish",
-  isEntryExecute: "is_entry_execute",
-  isUpgrade: "is_upgrade",
-  isScript: "is_script",
+  isMovePublish: "is_move_publish",
+  isMoveUpgrade: "is_move_upgrade",
+  isMoveExecute: "is_move_execute",
+  isMoveScript: "is_move_script",
 };
 
 const generateActionsFilter = (filters: TxFilters) =>
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index f27bfb5df..17b2f9623 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -130,10 +130,10 @@ export const useTxsByAddressPagination = (
               isUpdateAdmin: transaction.transaction.is_update_admin,
               isClearAdmin: transaction.transaction.is_clear_admin,
               isIbc: transaction.transaction.is_ibc,
-              isPublish: false,
-              isEntryExecute: false,
-              isUpgrade: false,
-              isScript: false,
+              isMovePublish: transaction.transaction.is_move_publish,
+              isMoveUpgrade: transaction.transaction.is_move_upgrade,
+              isMoveExecute: transaction.transaction.is_move_execute,
+              isMoveScript: transaction.transaction.is_move_script,
             },
             transaction.transaction.success,
             transaction.is_signer
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index 634560ae5..8dafe0b80 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -39,21 +39,31 @@ export interface Transaction {
   isInstantiate: boolean;
 }
 
-export interface TxFilters {
+export interface BaseTxFilters {
   isSend: boolean;
   isIbc: boolean;
-  isExecute: boolean;
-  isInstantiate: boolean;
+}
+export interface WasmTxFilters {
   isUpload: boolean;
+  isInstantiate: boolean;
+  isExecute: boolean;
   isMigrate: boolean;
   isUpdateAdmin: boolean;
   isClearAdmin: boolean;
-  isPublish: boolean;
-  isEntryExecute: boolean;
-  isUpgrade: boolean;
-  isScript: boolean;
 }
 
+export interface MoveTxFilters {
+  isMovePublish: boolean;
+  isMoveUpgrade: boolean;
+  isMoveExecute: boolean;
+  isMoveScript: boolean;
+}
+
+export interface TxFilters
+  extends BaseTxFilters,
+    WasmTxFilters,
+    MoveTxFilters {}
+
 export type PoolTxFilter =
   | "is_all"
   | "is_swap"
diff --git a/src/lib/utils/extractActionValue.ts b/src/lib/utils/extractActionValue.ts
index 0c191b41f..f38a1222d 100644
--- a/src/lib/utils/extractActionValue.ts
+++ b/src/lib/utils/extractActionValue.ts
@@ -16,13 +16,13 @@ export const displayActionValue = (isActionName: string) => {
       return "Clear Admin";
     case "isUpdateAdmin":
       return "Update Admin";
-    case "isPublish":
+    case "isMovePublish":
       return "Publish Module";
-    case "isEntryExecute":
-      return "Execute Function";
-    case "isUpgrade":
+    case "isMoveUpgrade":
       return "Upgrade Module";
-    case "isScript":
+    case "isMoveExecute":
+      return "Execute Function";
+    case "isMoveScript":
       return "Run Script";
     default:
       return "";
diff --git a/src/lib/utils/msgFurtherAction.ts b/src/lib/utils/msgFurtherAction.ts
index dc923aa45..4cb063e66 100644
--- a/src/lib/utils/msgFurtherAction.ts
+++ b/src/lib/utils/msgFurtherAction.ts
@@ -11,7 +11,7 @@ export const getMsgFurtherAction = (
   if (
     isSigner &&
     length === 1 &&
-    (filters.isExecute || filters.isInstantiate)
+    (filters.isExecute || filters.isInstantiate || filters.isMoveExecute)
   ) {
     return MsgFurtherAction.REDO;
   }
@@ -24,7 +24,10 @@ export const getMsgFurtherAction = (
     !filters.isClearAdmin &&
     !filters.isMigrate &&
     !filters.isUpdateAdmin &&
-    (filters.isExecute || filters.isInstantiate || filters.isSend) &&
+    (filters.isSend ||
+      filters.isExecute ||
+      filters.isInstantiate ||
+      filters.isMoveExecute) &&
     isSuccess
   ) {
     return MsgFurtherAction.RESEND;

From 80b803a4f6a7d1f443147f03d7346dd27c8ca8c2 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:02:21 +0700
Subject: [PATCH 119/368] fix: remove unused import

---
 src/lib/components/TxFilterSelection.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 53e5d7d64..644cf75e9 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -23,7 +23,6 @@ import {
   DEFAULT_MOVE_TX_FILTERS,
   DEFAULT_WASM_TX_FILTERS,
 } from "lib/data";
-import type { BaseTxFilters, MoveTxFilters, WasmTxFilters } from "lib/types";
 import { displayActionValue, mergeRefs } from "lib/utils";
 
 import { DropdownChevron } from "./DropdownChevron";
@@ -48,17 +47,9 @@ const listItemProps: CSSProperties = {
   cursor: "pointer",
 };
 
-const BASE_OPTIONS = Object.keys(
-  DEFAULT_BASE_TX_FILTERS
-) as (keyof BaseTxFilters)[];
-
-const WASM_OPTIONS = Object.keys(
-  DEFAULT_WASM_TX_FILTERS
-) as (keyof WasmTxFilters)[];
-
-const MOVE_OPTIONS = Object.keys(
-  DEFAULT_MOVE_TX_FILTERS
-) as (keyof MoveTxFilters)[];
+const BASE_OPTIONS = Object.keys(DEFAULT_BASE_TX_FILTERS);
+const WASM_OPTIONS = Object.keys(DEFAULT_WASM_TX_FILTERS);
+const MOVE_OPTIONS = Object.keys(DEFAULT_MOVE_TX_FILTERS);
 
 // TODO - Refactor this along with TagSelection
 export const TxFilterSelection = forwardRef<

From 4c5abcdbc9e1d357f09baefec4cf831caf533330 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 29 Sep 2023 16:09:37 +0700
Subject: [PATCH 120/368] feat: wire up contract state

---
 package.json                                  |   2 +
 src/lib/app-provider/env.ts                   |   1 +
 .../contract-state/ContractStates.tsx         |  70 ---------
 .../components/contract-state/StateCard.tsx   |  46 ++++--
 .../components/contract-state/StateList.tsx   |  84 +++++++++++
 .../components/contract-state/StateLoader.tsx |  31 +++-
 .../components/contract-state/index.tsx       | 136 ++++++++++++++++++
 src/lib/pages/contract-details/index.tsx      |  63 +-------
 src/lib/services/contractState.ts             |  32 +++++
 src/lib/services/contractStateService.ts      |  26 ++++
 src/lib/styles/theme/components/button.ts     |  11 ++
 src/lib/types/contractState.ts                |  33 +++++
 src/lib/types/index.ts                        |  25 ++--
 src/lib/utils/contractState.test.ts           |  60 ++++++++
 src/lib/utils/contractState.ts                |  84 +++++++++++
 src/lib/utils/index.ts                        |  49 +++----
 yarn.lock                                     |  10 ++
 17 files changed, 582 insertions(+), 181 deletions(-)
 delete mode 100644 src/lib/pages/contract-details/components/contract-state/ContractStates.tsx
 create mode 100644 src/lib/pages/contract-details/components/contract-state/StateList.tsx
 create mode 100644 src/lib/pages/contract-details/components/contract-state/index.tsx
 create mode 100644 src/lib/services/contractState.ts
 create mode 100644 src/lib/services/contractStateService.ts
 create mode 100644 src/lib/types/contractState.ts
 create mode 100644 src/lib/utils/contractState.test.ts
 create mode 100644 src/lib/utils/contractState.ts

diff --git a/package.json b/package.json
index 063a62df2..60ef27168 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "chakra-react-select": "^4.7.0",
     "cosmjs-types": "^0.7.2",
     "dayjs": "^1.11.6",
+    "file-saver": "^2.0.5",
     "framer-motion": "^7.6.12",
     "graphql": "^16.6.0",
     "graphql-request": "^5.0.0",
@@ -91,6 +92,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.1.0",
     "@commitlint/cz-commitlint": "^17.1.2",
+    "@types/file-saver": "^2.0.5",
     "@types/jest": "^29.4.0",
     "@types/node-gzip": "^1.1.0",
     "@types/react": "^18.0.21",
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index fb00400ca..96a712baf 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -12,6 +12,7 @@ export enum CELATONE_QUERY_KEYS {
   CONTRACT_INFO = "CELATONE_QUERY_CONTRACT_INFO",
   CONTRACT_QUERY_CMDS = "CELATONE_QUERY_CONTRACT_QUERY_CMDS",
   CONTRACT_QUERY = "CELATONE_QUERY_CONTRACT_QUERY",
+  CONTRACT_STATE = "CELATONE_QUERY_CONTRACT_STATE",
   // ACCOUNT
   ACCOUNT_BALANCES_INFO = "CELATONE_QUERY_ACCOUNT_BALANCES_INFO",
   ACCOUNT_ID = "CELATONE_QUERY_ACCOUNT_ID",
diff --git a/src/lib/pages/contract-details/components/contract-state/ContractStates.tsx b/src/lib/pages/contract-details/components/contract-state/ContractStates.tsx
deleted file mode 100644
index ca7dba7aa..000000000
--- a/src/lib/pages/contract-details/components/contract-state/ContractStates.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Button, ButtonGroup, Flex, Heading } from "@chakra-ui/react";
-
-import { StateCard } from "./StateCard";
-import { StateLoader } from "./StateLoader";
-
-const namespaces = [
-  "test1",
-  "test2",
-  "test3",
-  "test4",
-  "test5",
-  "test6",
-  "test7",
-  "test8",
-  "test9",
-  "test10",
-  "test11",
-  "test12",
-  "test13",
-  "test14",
-  "test15",
-  "test16",
-  "test17",
-  "test18",
-  "test19",
-  "test20",
-];
-export const ContractStates = () => {
-  return (
-    <Flex direction="column" gap={8}>
-      <Flex direction="column" gap={6}>
-        <Heading as="h6" variant="h6">
-          Contract States
-        </Heading>
-        <StateLoader isLoading isCompleted={false} />
-        <StateLoader isLoading={false} isCompleted={false} />
-        <StateLoader isLoading={false} isCompleted />
-      </Flex>
-      {/* Namespace filter */}
-      <ButtonGroup
-        flexWrap="wrap"
-        rowGap={2}
-        sx={{
-          "> button": {
-            marginInlineStart: "0 !important",
-            marginInlineEnd: "1",
-          },
-        }}
-      >
-        {namespaces.map((item) => (
-          <Button
-            variant="command-button"
-            fontSize="14px"
-            height="28px"
-            borderRadius="16px"
-            fontWeight={400}
-          >
-            {item}
-          </Button>
-        ))}
-      </ButtonGroup>
-      {/* Searchbar */}
-      search in put here
-      {/* States */}
-      <Flex direction="column" gap={4}>
-        <StateCard /> <StateCard /> <StateCard /> <StateCard />
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/contract-details/components/contract-state/StateCard.tsx b/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
index 6fd68da3a..c3fd64d46 100644
--- a/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
@@ -1,18 +1,42 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Text, Box, Flex } from "@chakra-ui/react";
+import { useMemo } from "react";
+
+import { DotSeparator } from "lib/components/DotSeparator";
+import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import type { ContractState } from "lib/types";
+
+interface StateCardProps {
+  state: ContractState;
+}
+
+export const StateCard = ({ state }: StateCardProps) => {
+  const [firstKey, remainingKeys] = useMemo(() => {
+    if (state.key.type === "singleton") return [state.key.value, []];
+
+    return [state.key.values[0], state.key.values.slice(1)];
+  }, [state.key]);
 
-export const StateCard = () => {
   return (
-    <Flex borderRadius={8} bgColor="gray.900" p={3}>
-      <Flex w="15%">
+    <Box borderRadius={8} bgColor="gray.900" py={2} px={4}>
+      <Flex mb={3} alignItems="center" gap={2}>
         <Text variant="body2" color="text.main">
-          lorem
-        </Text>
-      </Flex>
-      <Flex w="85%">
-        <Text variant="body2" color="text.dark">
-          lorem
+          {firstKey}
         </Text>
+        {remainingKeys.map((each) => (
+          <Flex alignItems="center" gap={2}>
+            <DotSeparator />
+            <Text variant="body2" color="text.main">
+              {each}
+            </Text>
+          </Flex>
+        ))}
       </Flex>
-    </Flex>
+      <JsonReadOnly
+        text={JSON.stringify(state.value, null, 2)}
+        canCopy
+        fullWidth
+        isExpandable
+      />
+    </Box>
   );
 };
diff --git a/src/lib/pages/contract-details/components/contract-state/StateList.tsx b/src/lib/pages/contract-details/components/contract-state/StateList.tsx
new file mode 100644
index 000000000..32a7ad963
--- /dev/null
+++ b/src/lib/pages/contract-details/components/contract-state/StateList.tsx
@@ -0,0 +1,84 @@
+import { Flex } from "@chakra-ui/react";
+import { useMemo, type ChangeEvent, useEffect } from "react";
+
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import type { ContractState } from "lib/types";
+
+import { StateCard } from "./StateCard";
+
+interface StateListProps {
+  totalData: number;
+  states: ContractState[];
+  isLoading: boolean;
+  isSearching: boolean;
+}
+
+export const StateList = ({
+  totalData,
+  states,
+  isLoading,
+  isSearching,
+}: StateListProps) => {
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: totalData,
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  const displayStates = useMemo(() => {
+    return states.slice(offset, offset + pageSize);
+  }, [offset, pageSize, states]);
+
+  // reset page when states change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [setCurrentPage, states]);
+
+  if (states.length === 0 && isSearching) {
+    return (
+      <EmptyState
+        imageVariant="not-found"
+        message="No contract states match your search keyword within all loaded states."
+      />
+    );
+  }
+
+  return (
+    <>
+      <Flex direction="column" gap={4} flexWrap="wrap">
+        {displayStates.map((state) => (
+          <StateCard key={state.rawKey} state={state} />
+        ))}
+      </Flex>
+      {!isLoading && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={totalData}
+          pageSize={pageSize}
+          onPageChange={setCurrentPage}
+          onPageSizeChange={onPageSizeChange}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx b/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
index 02bb6542a..bc2b09118 100644
--- a/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
@@ -5,8 +5,17 @@ import { CustomIcon } from "lib/components/icon";
 interface StateLoaderProps {
   isLoading: boolean;
   isCompleted: boolean;
+  totalData: number;
+  onLoadMore: () => void;
+  onDownload: () => void;
 }
-export const StateLoader = ({ isLoading, isCompleted }: StateLoaderProps) => {
+export const StateLoader = ({
+  isLoading,
+  isCompleted,
+  totalData,
+  onLoadMore,
+  onDownload,
+}: StateLoaderProps) => {
   return (
     <Flex
       borderRadius={8}
@@ -19,7 +28,7 @@ export const StateLoader = ({ isLoading, isCompleted }: StateLoaderProps) => {
         <Flex gap={4} alignItems="center">
           <Spinner size="sm" />
           <Text variant="body2" fontWeight={600} color="text.dark">
-            Loading xx states...
+            Loading 100 states...
           </Text>
           <Button size="sm" variant="outline-primary" disabled>
             Load More
@@ -30,15 +39,25 @@ export const StateLoader = ({ isLoading, isCompleted }: StateLoaderProps) => {
           <CustomIcon name="check" color="success.main" />
           <Text variant="body2" fontWeight={600} color="text.dark">
             {isCompleted
-              ? "All States Loaded (XXX States)"
-              : "XXX States Loaded"}
+              ? `All States Loaded (${totalData} States)`
+              : `${totalData} States Loaded`}
           </Text>
-          <Button size="sm" variant="outline-primary" disabled={isCompleted}>
+          <Button
+            size="sm"
+            variant="outline-primary"
+            disabled={isCompleted}
+            onClick={onLoadMore}
+          >
             Load More
           </Button>
         </Flex>
       )}
-      <Button size="sm" variant="outline-primary" disabled={isLoading}>
+      <Button
+        size="sm"
+        variant="outline-primary"
+        disabled={isLoading}
+        onClick={onDownload}
+      >
         <CustomIcon name="download" />
         Download States
       </Button>
diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
new file mode 100644
index 000000000..a6d8d0571
--- /dev/null
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -0,0 +1,136 @@
+import { Button, ButtonGroup, Flex, Heading } from "@chakra-ui/react";
+import { saveAs } from "file-saver";
+import { useEffect, useMemo, useState } from "react";
+
+import InputWithIcon from "lib/components/InputWithIcon";
+import { useContractStates } from "lib/services/contractStateService";
+import type { ContractAddr } from "lib/types";
+import { groupByFirstIndex } from "lib/utils";
+
+import { StateList } from "./StateList";
+import { StateLoader } from "./StateLoader";
+
+interface ContractStatesProps {
+  contractAddress: ContractAddr;
+}
+export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
+  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
+    useContractStates(contractAddress);
+
+  const [selectedNamespace, setSelectedNamespace] = useState("");
+  const [keyword, setKeyword] = useState("");
+
+  const { namespaces, rawStates, states, totalData, totalDataByNamespace } =
+    useMemo(() => {
+      if (!data || data?.pages.length === 0)
+        return {
+          namespaces: [],
+          rawStates: [],
+          states: [],
+          totalData: 0,
+          totalDataByNamespace: 0,
+        };
+
+      const flattenRaw = data.pages.flatMap((page) => page.rawStates);
+      const flatten = data.pages.flatMap((page) => page.states);
+
+      const grouped = groupByFirstIndex(flatten);
+
+      const selected = grouped[selectedNamespace] ?? [];
+
+      const filtered = selected.filter((state) => {
+        if (state.key.type === "singleton")
+          return state.key.type.toLowerCase().includes(keyword.toLowerCase());
+
+        return state.key.values.some((value) =>
+          value.toLowerCase().includes(keyword.toLowerCase())
+        );
+      });
+
+      return {
+        namespaces: Object.keys(grouped),
+        rawStates: flattenRaw,
+        states: filtered,
+        totalData: flatten.length,
+        totalDataByNamespace: filtered.length,
+      };
+    }, [data, keyword, selectedNamespace]);
+
+  // Set current namespace to the first namespace when data is loaded
+  useEffect(() => {
+    setSelectedNamespace(namespaces[0]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [namespaces.length > 0]);
+
+  const handleDownload = () => {
+    const jsonString = JSON.stringify(rawStates, null, 2);
+
+    const blob = new Blob([jsonString], { type: "application/json" });
+
+    saveAs(blob, "state.json");
+  };
+
+  return (
+    <Flex direction="column" gap={8}>
+      <Flex direction="column" gap={6}>
+        <Heading as="h6" variant="h6">
+          Contract States
+        </Heading>
+        <StateLoader
+          isLoading={isFetching || isFetchingNextPage}
+          totalData={totalData}
+          isCompleted={!hasNextPage}
+          onLoadMore={fetchNextPage}
+          onDownload={handleDownload}
+        />
+      </Flex>
+      {/* Namespace filter */}
+      <ButtonGroup
+        flexWrap="wrap"
+        rowGap={2}
+        sx={{
+          "> button": {
+            marginInlineStart: "0 !important",
+            marginInlineEnd: "1",
+          },
+        }}
+      >
+        {namespaces.map((namespace) => (
+          <Button
+            key={namespace}
+            variant={
+              namespace === selectedNamespace
+                ? "accent-solid"
+                : "outline-accent"
+            }
+            fontSize="14px"
+            height="28px"
+            borderRadius="16px"
+            fontWeight={400}
+            onClick={() => setSelectedNamespace(namespace)}
+          >
+            {namespace}
+          </Button>
+        ))}
+      </ButtonGroup>
+
+      {/* Searchbar */}
+      <InputWithIcon
+        placeholder="Search by Key"
+        value={keyword}
+        onChange={(e) => {
+          const newVal = e.target.value;
+          setKeyword(newVal);
+        }}
+      />
+
+      {/* State List */}
+      <StateList
+        states={states}
+        totalData={totalDataByNamespace}
+        isLoading={isFetching}
+        isSearching={keyword.trim().length !== 0}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 1be152f82..d6fd20a4a 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -28,7 +28,7 @@ import { getFirstQueryParam, jsonPrettify } from "lib/utils";
 
 import { CommandSection } from "./components/CommandSection";
 import { ContractDesc } from "./components/contract-description";
-import { ContractStates } from "./components/contract-state/ContractStates";
+import { ContractStates } from "./components/contract-state";
 import { ContractTop } from "./components/ContractTop";
 import { InstantiateInfo } from "./components/InstantiateInfo";
 import { JsonInfo } from "./components/JsonInfo";
@@ -66,63 +66,9 @@ const ContractTxsTable = observer(
       refetchTransactions,
       refetchRelatedProposals,
     } = useContractDetailsTableCounts(contractAddress, contractAccountId);
-    const isMobile = useMobile();
     if (!contractData.contractDetail) return <InvalidContract />;
     return (
       <>
-        <ContractTop contractAddress={contractAddress} {...contractData} />
-        {/* Tokens Section */}
-        <Flex direction="column" mt={{ base: 8, md: 4 }}>
-          <TokenSection contractAddress={contractAddress} {...contractData} />
-        </Flex>
-        {/* Contract Description Section */}
-        <ContractDesc {...contractData} />
-        {/* Query/Execute commands section */}
-        <CommandSection
-          contractAddress={contractAddress}
-          codeHash={contractData.contractDetail.codeHash}
-          codeId={String(contractData.contractDetail.codeId)}
-        />
-
-        {/* Instantiate/Contract Info Section */}
-        <Flex
-          my={12}
-          justify="space-between"
-          direction={{ base: "column", md: "row" }}
-        >
-          {/* Instantiate Info */}
-          {isMobile && (
-            <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
-              Instantiate Info
-            </Heading>
-          )}
-          <InstantiateInfo
-            isLoading={
-              contractData.isContractDetailLoading ||
-              contractData.isContractCw2InfoLoading ||
-              contractData.isInstantiateDetailLoading
-            }
-            {...contractData}
-          />
-          {/* Contract Info (Expand) */}
-          <Flex direction="column" flex={0.8} gap={4} mt={{ base: 12, md: 0 }}>
-            <JsonInfo
-              header="Contract Info"
-              jsonString={jsonPrettify(
-                JSON.stringify(
-                  contractData.rawContractResponse?.contract_info ?? {}
-                )
-              )}
-              isLoading={contractData.isRawContractResponseLoading}
-            />
-            <JsonInfo
-              header="Instantiate Message"
-              jsonString={jsonPrettify(contractData.initMsg ?? "")}
-              isLoading={contractData.isInstantiateDetailLoading}
-              defaultExpand
-            />
-          </Flex>
-        </Flex>
         {/* History Table section */}
         <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
           Transaction & History
@@ -180,7 +126,6 @@ const ContractDetailsBody = observer(
   ({ contractAddress, contractData }: ContractDetailsBodyProps) => {
     const tableHeaderId = "contractDetailsTableHeader";
     const isMobile = useMobile();
-    if (!contractData.contractDetail) return <InvalidContract />;
     const router = useRouter();
     const tab = getFirstQueryParam(router.query.tab) as TabIndex;
     const navigate = useInternalNavigate();
@@ -216,10 +161,12 @@ const ContractDetailsBody = observer(
       }
     }, [router.isReady, tab, contractAddress, navigate]);
 
+    if (!contractData.contractDetail) return <InvalidContract />;
+
     return (
       <>
         <ContractTop contractAddress={contractAddress} {...contractData} />
-        <Tabs>
+        <Tabs isLazy>
           <TabList
             mt={6}
             mb={8}
@@ -326,7 +273,7 @@ const ContractDetailsBody = observer(
               />
             </TabPanel>
             <TabPanel p={0}>
-              <ContractStates />
+              <ContractStates contractAddress={contractAddress} />
             </TabPanel>
           </TabPanels>
         </Tabs>
diff --git a/src/lib/services/contractState.ts b/src/lib/services/contractState.ts
new file mode 100644
index 000000000..7471a54c4
--- /dev/null
+++ b/src/lib/services/contractState.ts
@@ -0,0 +1,32 @@
+import axios from "axios";
+
+import type {
+  ContractAddr,
+  ContractState,
+  ResponseContractStates,
+} from "lib/types";
+import { parseKey, parseValue } from "lib/utils";
+
+export const getContractStates = async (
+  baseEndpoint: string,
+  contractAddress: ContractAddr,
+  paginationKey: string | null
+) => {
+  const { data } = await axios.get<ResponseContractStates>(
+    `${baseEndpoint}/cosmwasm/wasm/v1/contract/${contractAddress}/state?pagination.limit=100${
+      paginationKey ? `&pagination.key=${paginationKey}` : ""
+    }`
+  );
+
+  const parsedStates = data.models.map<ContractState>((model) => ({
+    rawKey: model.key,
+    key: parseKey(model.key),
+    value: parseValue(model.value),
+  }));
+
+  return {
+    states: parsedStates,
+    rawStates: data.models,
+    nextKey: data.pagination.next_key,
+  };
+};
diff --git a/src/lib/services/contractStateService.ts b/src/lib/services/contractStateService.ts
new file mode 100644
index 000000000..e455db9aa
--- /dev/null
+++ b/src/lib/services/contractStateService.ts
@@ -0,0 +1,26 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
+import type { ContractAddr } from "lib/types";
+
+import { getContractStates } from "./contractState";
+
+export const useContractStates = (contractAddress: ContractAddr) => {
+  const baseEndpoint = useBaseApiRoute("rest");
+
+  return useInfiniteQuery(
+    [CELATONE_QUERY_KEYS.CONTRACT_STATE, baseEndpoint, contractAddress],
+    ({ pageParam }) =>
+      getContractStates(baseEndpoint, contractAddress, pageParam),
+    {
+      getNextPageParam: (lastPage) => {
+        if (lastPage.nextKey) {
+          return lastPage.nextKey;
+        }
+
+        return false; // No more pages
+      },
+      refetchOnWindowFocus: false,
+    }
+  );
+};
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index f9a0e8e3a..f6f9b3ebb 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -12,7 +12,9 @@ const primaryDark = "primary.dark";
 const primaryBg = "primary.background";
 const accentBg = "accent.background";
 const accentMain = "accent.main";
+const accentDark = "accent.dark";
 const accentDarker = "accent.darker";
+const backgroundMain = "background.main";
 const borderDefault = "1px solid";
 const errorDark = "error.dark";
 const secondaryBg = "secondary.background";
@@ -216,6 +218,15 @@ export const Button: ComponentStyleConfig = {
       hoverBg: accentBg,
       activeBg: "transparent",
     }),
+    "accent-solid": generateStyle({
+      basic: {
+        background: accentDark,
+        color: backgroundMain,
+      },
+      disabled: {},
+      hoverBg: accentMain,
+      activeBg: accentDark,
+    }),
     "command-button": generateStyle({
       basic: {
         border: borderDefault,
diff --git a/src/lib/types/contractState.ts b/src/lib/types/contractState.ts
new file mode 100644
index 000000000..cf70f8d96
--- /dev/null
+++ b/src/lib/types/contractState.ts
@@ -0,0 +1,33 @@
+interface Singleton {
+  type: "singleton";
+  value: string;
+}
+
+interface Bucket {
+  type: "bucket";
+  values: string[];
+}
+
+export type DecodedKey = Singleton | Bucket;
+
+// TODO: Refactor later
+interface ResponseContractState {
+  key: string;
+  value: string;
+}
+
+interface Pagination {
+  next_key?: string;
+  total: number;
+}
+
+export interface ResponseContractStates {
+  models: ResponseContractState[];
+  pagination: Pagination;
+}
+
+export interface ContractState {
+  rawKey: string;
+  key: DecodedKey;
+  value: unknown;
+}
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index c9f53dc81..f5597cfbe 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -1,18 +1,19 @@
-export * from "./currency";
-export * from "./tx";
+export * from "./addrs";
+export * from "./asset";
+export * from "./block";
 export * from "./code";
 export * from "./common";
-export * from "./LVPair";
-export * from "./rpc";
-export * from "./wallet";
 export * from "./contract";
+export * from "./contractState";
+export * from "./converter";
+export * from "./currency";
+export * from "./json";
+export * from "./LVPair";
+export * from "./pool";
 export * from "./projects";
-export * from "./addrs";
 export * from "./proposal";
-export * from "./pool";
-export * from "./validator";
+export * from "./rpc";
+export * from "./tx";
 export * from "./upload";
-export * from "./block";
-export * from "./asset";
-export * from "./converter";
-export * from "./json";
+export * from "./validator";
+export * from "./wallet";
diff --git a/src/lib/utils/contractState.test.ts b/src/lib/utils/contractState.test.ts
new file mode 100644
index 000000000..73d2829d0
--- /dev/null
+++ b/src/lib/utils/contractState.test.ts
@@ -0,0 +1,60 @@
+import { hexToString, parseKey, parseValue } from "./contractState";
+
+describe("hexToString", () => {
+  it("should convert hex to string", () => {
+    expect(hexToString("68656c6c6f20776f726c64")).toEqual("hello world");
+  });
+});
+
+describe("parseValue", () => {
+  it("should parse base64 encoded JSON", () => {
+    const value = "eyJmb28iOiJiYXIifQ=="; // {"foo":"bar"}
+    expect(parseValue(value)).toEqual({ foo: "bar" });
+  });
+
+  it("should return the original value if it's not JSON", () => {
+    const value = "not json";
+    expect(parseValue(value)).toEqual(value);
+  });
+});
+
+describe("parseKey", () => {
+  it("should parse a singleton key", () => {
+    const key = "68656c6c6f"; // "hello"
+    expect(parseKey(key)).toEqual({ type: "singleton", value: "hello" });
+  });
+
+  it("should parse a bucket key with multiple values", () => {
+    const key = "000568656c6c6f0005776f726c64666f6f626172";
+    expect(parseKey(key)).toEqual({
+      type: "bucket",
+      values: ["hello", "world", "foobar"],
+    });
+  });
+
+  it("should parse a bucket key with un-decodable value", () => {
+    const key =
+      "0005766F7465730008000000000000001C6F736D6F313866736563706D713574757135396B33657A6B72726474366779767233306C78637430616564";
+    expect(parseKey(key)).toEqual({
+      type: "bucket",
+      values: [
+        "votes",
+        "000000000000001C",
+        "osmo18fsecpmq5tuq59k3ezkrrdt6gyvr30lxct0aed",
+      ],
+    });
+  });
+
+  it("should parse a bucket key with hex ending", () => {
+    const key = "000970726F706F73616C730000000000000031";
+    expect(parseKey(key)).toEqual({
+      type: "bucket",
+      values: ["proposals", "0000000000000031"],
+    });
+  });
+
+  it("should return a singleton key if parsing fails", () => {
+    const key = "not hex";
+    expect(parseKey(key)).toEqual({ type: "singleton", value: key });
+  });
+});
diff --git a/src/lib/utils/contractState.ts b/src/lib/utils/contractState.ts
new file mode 100644
index 000000000..a298296e9
--- /dev/null
+++ b/src/lib/utils/contractState.ts
@@ -0,0 +1,84 @@
+import type { ContractState, DecodedKey } from "lib/types";
+
+const nameRegex = /^[a-zA-Z0-9_]+$/;
+
+export const hexToString = (hex: string) =>
+  Buffer.from(hex, "hex").toString("utf-8");
+
+export const parseKey = (key: string): DecodedKey => {
+  try {
+    const decodedStr = hexToString(key);
+    if (decodedStr === "") throw new Error("Invalid hex string for decoding");
+    if (nameRegex.test(decodedStr)) {
+      return {
+        type: "singleton",
+        value: decodedStr,
+      };
+    }
+
+    const values: string[] = [];
+    let currentIndex = 0;
+    while (currentIndex < key.length) {
+      const lengthHex = key.slice(currentIndex, currentIndex + 4);
+      const length = parseInt(lengthHex, 16) * 2;
+
+      // We've assumed that the length of the key is less than 256
+      // This should be the last part of key
+      if (length > 256 || lengthHex === "0000") {
+        const valueHex = key.slice(currentIndex);
+        const decodedValue = hexToString(valueHex);
+        values.push(nameRegex.test(decodedValue) ? decodedValue : valueHex);
+
+        // length of hex string
+        currentIndex += valueHex.length;
+        break;
+      }
+
+      currentIndex += 4;
+
+      if (currentIndex + length > key.length) {
+        throw new Error("Invalid hex string for Bucket decoding");
+      }
+
+      const hexSegment = key.slice(currentIndex, currentIndex + length);
+      const decodedSegement = hexToString(hexSegment);
+      currentIndex += length;
+
+      values.push(
+        nameRegex.test(decodedSegement) ? decodedSegement : hexSegment
+      );
+    }
+
+    return {
+      type: "bucket",
+      values,
+    };
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+
+  return {
+    type: "singleton",
+    value: key,
+  };
+};
+
+export const parseValue = (value: string) => {
+  try {
+    return JSON.parse(Buffer.from(value, "base64").toString());
+  } catch (error) {
+    return value;
+  }
+};
+
+export const groupByFirstIndex = (states: ContractState[]) =>
+  states.reduce((acc, state) => {
+    if (state.key.type === "bucket") {
+      const firstIndexValue = state.key.values[0];
+      acc[firstIndexValue] = acc[firstIndexValue]?.concat(state) ?? [state];
+    } else {
+      acc.others = acc.others?.concat(state) ?? [state];
+    }
+    return acc;
+  }, {} as { [key: string]: ContractState[] });
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index a9ba93cfc..6574e9b9d 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1,34 +1,35 @@
 export * from "./address";
-export * from "./formatter";
-export * from "./tx";
+export * from "./assetValue";
 export * from "./base64";
-export * from "./format";
-export * from "./json";
-export * from "./router";
-export * from "./truncate";
-export * from "./extractMsgType";
-export * from "./scroll";
+export * from "./bech32";
+export * from "./codeHash";
+export * from "./codePermission";
+export * from "./contractState";
+export * from "./countMessages";
+export * from "./cw2";
 export * from "./date";
-export * from "./validate";
-export * from "./txHash";
-export * from "./option";
 export * from "./descriptionAndName";
-export * from "./tags";
-export * from "./countMessages";
-export * from "./msgFurtherAction";
+export * from "./executeTags";
 export * from "./extractActionValue";
-export * from "./mergeRefs";
+export * from "./extractMsgType";
+export * from "./format";
+export * from "./formatter";
 export * from "./funds";
-export * from "./assetValue";
-export * from "./codePermission";
-export * from "./executeTags";
-export * from "./cw2";
-export * from "./bech32";
-export * from "./proposal";
-export * from "./codeHash";
 export * from "./icon";
-export * from "./window";
-export * from "./number";
+export * from "./json";
 export * from "./math";
+export * from "./mergeRefs";
+export * from "./msgFurtherAction";
+export * from "./number";
+export * from "./option";
+export * from "./proposal";
+export * from "./router";
+export * from "./scroll";
 export * from "./sha256";
 export * from "./storage";
+export * from "./tags";
+export * from "./truncate";
+export * from "./tx";
+export * from "./txHash";
+export * from "./validate";
+export * from "./window";
diff --git a/yarn.lock b/yarn.lock
index 93d57569f..6d247da97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4709,6 +4709,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
   integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
 
+"@types/file-saver@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.5.tgz#9ee342a5d1314bb0928375424a2f162f97c310c7"
+  integrity sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==
+
 "@types/graceful-fs@^4.1.3":
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
@@ -7940,6 +7945,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 file-selector@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz"

From bd181cddef25a2375f2478fd450d5579a8d85d7b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 29 Sep 2023 16:17:24 +0700
Subject: [PATCH 121/368] fix: support plural

---
 .../components/contract-state/StateLoader.tsx              | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx b/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
index bc2b09118..d551cc9f8 100644
--- a/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
@@ -1,4 +1,5 @@
 import { Button, Flex, Spinner, Text } from "@chakra-ui/react";
+import plur from "plur";
 
 import { CustomIcon } from "lib/components/icon";
 
@@ -16,6 +17,8 @@ export const StateLoader = ({
   onLoadMore,
   onDownload,
 }: StateLoaderProps) => {
+  const stateAmountText = `${totalData} ${plur("State", totalData)}`;
+
   return (
     <Flex
       borderRadius={8}
@@ -39,8 +42,8 @@ export const StateLoader = ({
           <CustomIcon name="check" color="success.main" />
           <Text variant="body2" fontWeight={600} color="text.dark">
             {isCompleted
-              ? `All States Loaded (${totalData} States)`
-              : `${totalData} States Loaded`}
+              ? `All States Loaded (${stateAmountText})`
+              : `${stateAmountText} Loaded`}
           </Text>
           <Button
             size="sm"

From 57c59b4c41f9f4942e50e8b274046d76166042d3 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 29 Sep 2023 16:23:02 +0700
Subject: [PATCH 122/368] fix: invalid search

---
 .../pages/contract-details/components/contract-state/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index a6d8d0571..684a970e7 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -40,7 +40,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
 
       const filtered = selected.filter((state) => {
         if (state.key.type === "singleton")
-          return state.key.type.toLowerCase().includes(keyword.toLowerCase());
+          return state.key.value.toLowerCase().includes(keyword.toLowerCase());
 
         return state.key.values.some((value) =>
           value.toLowerCase().includes(keyword.toLowerCase())

From 94a2e98f1cf19d1f82e8050e9608d42304bfc525 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 29 Sep 2023 17:07:11 +0700
Subject: [PATCH 123/368] fix: long key name

---
 src/lib/components/DotSeparator.tsx              | 16 +++++++++++++---
 .../components/contract-state/StateCard.tsx      | 14 +++++++-------
 .../components/contract-state/index.tsx          | 13 +++++++++++--
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/DotSeparator.tsx b/src/lib/components/DotSeparator.tsx
index 0ffeb9d48..85e8bb4eb 100644
--- a/src/lib/components/DotSeparator.tsx
+++ b/src/lib/components/DotSeparator.tsx
@@ -1,5 +1,15 @@
-import { Box } from "@chakra-ui/react";
+import { Box, type BoxProps } from "@chakra-ui/react";
 
-export const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w={1} h={1} />
+export const DotSeparator = (props: BoxProps) => (
+  <Box
+    bg="secondary.darker"
+    borderRadius="50%"
+    w={1}
+    h={1}
+    maxW={1}
+    minW={1}
+    minH={1}
+    maxH={1}
+    {...props}
+  />
 );
diff --git a/src/lib/pages/contract-details/components/contract-state/StateCard.tsx b/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
index c3fd64d46..0e3f3913d 100644
--- a/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
@@ -17,20 +17,20 @@ export const StateCard = ({ state }: StateCardProps) => {
   }, [state.key]);
 
   return (
-    <Box borderRadius={8} bgColor="gray.900" py={2} px={4}>
-      <Flex mb={3} alignItems="center" gap={2}>
-        <Text variant="body2" color="text.main">
+    <Box borderRadius={8} bgColor="gray.900" py={2} px={4} maxWidth="100%">
+      <Box mb={3}>
+        <Text variant="body2" color="text.main" wordBreak="break-word">
           {firstKey}
         </Text>
         {remainingKeys.map((each) => (
-          <Flex alignItems="center" gap={2}>
-            <DotSeparator />
-            <Text variant="body2" color="text.main">
+          <Flex key={each} gap={2}>
+            <DotSeparator mt={2} />
+            <Text variant="body2" color="text.main" wordBreak="break-word">
               {each}
             </Text>
           </Flex>
         ))}
-      </Flex>
+      </Box>
       <JsonReadOnly
         text={JSON.stringify(state.value, null, 2)}
         canCopy
diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index 684a970e7..abaef6aa7 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -3,6 +3,7 @@ import { saveAs } from "file-saver";
 import { useEffect, useMemo, useState } from "react";
 
 import InputWithIcon from "lib/components/InputWithIcon";
+import { ErrorFetching } from "lib/pages/account-details/components/ErrorFetching";
 import { useContractStates } from "lib/services/contractStateService";
 import type { ContractAddr } from "lib/types";
 import { groupByFirstIndex } from "lib/utils";
@@ -14,8 +15,14 @@ interface ContractStatesProps {
   contractAddress: ContractAddr;
 }
 export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
-  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
-    useContractStates(contractAddress);
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+  } = useContractStates(contractAddress);
 
   const [selectedNamespace, setSelectedNamespace] = useState("");
   const [keyword, setKeyword] = useState("");
@@ -70,6 +77,8 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
     saveAs(blob, "state.json");
   };
 
+  if (error) return <ErrorFetching />;
+
   return (
     <Flex direction="column" gap={8}>
       <Flex direction="column" gap={6}>

From 830848780ddbe5affb0b9d7dc0e7eb06f1103767 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 17:09:03 +0700
Subject: [PATCH 124/368] feat: cmd button

---
 CHANGELOG.md                                  |  2 ++
 src/lib/app-provider/hooks/index.ts           |  1 +
 src/lib/app-provider/hooks/usePlatform.ts     | 15 +++++++++++++
 .../pages/execute/components/JsonExecute.tsx  | 10 ++++++---
 .../interact/component/form/ExecuteArea.tsx   | 21 ++++++++++++++++--
 .../interact/component/form/ViewArea.tsx      | 22 +++++++++++++++----
 src/lib/pages/query/components/JsonQuery.tsx  | 10 ++++++---
 7 files changed, 69 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/app-provider/hooks/usePlatform.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8872fbaa..0f33bc8d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#553](https://github.com/alleslabs/celatone-frontend/pull/553) Use Cmd on Mac OS while Ctrl on others
+- [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
 - [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index 1c16c0e72..adec0f195 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -14,3 +14,4 @@ export * from "./useConfig";
 export * from "./useCurrentChain";
 export * from "./useConvertHexAddress";
 export * from "./usePreviousPathname";
+export * from "./usePlatform";
diff --git a/src/lib/app-provider/hooks/usePlatform.ts b/src/lib/app-provider/hooks/usePlatform.ts
new file mode 100644
index 000000000..a60bc5514
--- /dev/null
+++ b/src/lib/app-provider/hooks/usePlatform.ts
@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+
+export const usePlatform = () => {
+  return useMemo(() => {
+    if (navigator.userAgent.indexOf("Mac OS X") !== -1) {
+      return "Mac";
+    }
+    return "Windows";
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigator]);
+};
+
+export const useIsMac = () => {
+  return usePlatform() === "Mac";
+};
diff --git a/src/lib/pages/execute/components/JsonExecute.tsx b/src/lib/pages/execute/components/JsonExecute.tsx
index febcb971a..cdae57f55 100644
--- a/src/lib/pages/execute/components/JsonExecute.tsx
+++ b/src/lib/pages/execute/components/JsonExecute.tsx
@@ -10,6 +10,7 @@ import {
   useExecuteContractTx,
   useCurrentChain,
   useMobile,
+  useIsMac,
 } from "lib/app-provider";
 import { useAttachFunds } from "lib/app-provider/hooks/useAttachFunds";
 import { useSimulateFeeQuery } from "lib/app-provider/queries";
@@ -63,6 +64,7 @@ export const JsonExecute = ({
   // --------------DEPENDENCIES----------------//
   // ------------------------------------------//
   const isMobile = useMobile();
+  const isMac = useIsMac();
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const executeTx = useExecuteContractTx();
@@ -237,10 +239,12 @@ export const JsonExecute = ({
     assetsSelect,
   ]);
 
+  const isButtonDisabled = !enableExecute || !fee || isFetching;
   useEffect(() => {
     const keydownHandler = (e: KeyboardEvent) => {
       // TODO: problem with safari if focusing in the textarea
-      if (e.ctrlKey && e.key === "Enter") {
+      const specialKey = isMac ? e.metaKey : e.ctrlKey;
+      if (!isButtonDisabled && specialKey && e.key === "Enter") {
         proceed();
       }
     };
@@ -294,12 +298,12 @@ export const JsonExecute = ({
             fontSize="14px"
             p="6px 16px"
             onClick={proceed}
-            isDisabled={!enableExecute || !fee || isFetching}
+            isDisabled={isButtonDisabled}
             leftIcon={<CustomIcon name="execute" />}
             isLoading={processing}
             sx={{ pointerEvents: processing && "none" }}
           >
-            Execute {!isMobile && "(Ctrl + Enter)"}
+            Execute {!isMobile && ` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
           </Button>
         </Flex>
       </Flex>
diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index f2e8dea8b..56578142f 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -9,6 +9,7 @@ import {
   useSimulateFeeQuery,
   useExecuteModuleTx,
   useCurrentChain,
+  useIsMac,
 } from "lib/app-provider";
 import { AbiForm } from "lib/components/abi";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -35,6 +36,7 @@ export const ExecuteArea = ({
       ? fn.params.slice(1)
       : fn.params;
 
+  const isMac = useIsMac();
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const executeModuleTx = useExecuteModuleTx();
@@ -119,6 +121,21 @@ export const ExecuteArea = ({
     return () => {};
   }, [address, data, enableExecute, executeFn, moduleAddress, moduleName]);
 
+  const isButtonDisabled = !enableExecute || !fee || isFetching;
+  useEffect(() => {
+    const keydownHandler = (e: KeyboardEvent) => {
+      // TODO: problem with safari if focusing in the textarea
+      const specialKey = isMac ? e.metaKey : e.ctrlKey;
+      if (!isButtonDisabled && specialKey && e.key === "Enter") {
+        proceed();
+      }
+    };
+    document.addEventListener("keydown", keydownHandler);
+    return () => {
+      document.removeEventListener("keydown", keydownHandler);
+    };
+  });
+
   return (
     <Flex direction="column">
       {fn.is_entry ? (
@@ -166,12 +183,12 @@ export const ExecuteArea = ({
             fontSize="14px"
             p="6px 16px"
             onClick={proceed}
-            isDisabled={!enableExecute || !fee || isFetching}
+            isDisabled={isButtonDisabled}
             leftIcon={<CustomIcon name="execute" />}
             isLoading={processing}
             sx={{ pointerEvents: processing && "none" }}
           >
-            Execute
+            Execute{` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
           </Button>
         </Flex>
       </Flex>
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 579100ba8..7f3cbf693 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -9,8 +9,9 @@ import {
   Spinner,
   Text,
 } from "@chakra-ui/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
+import { useIsMac } from "lib/app-provider";
 import { AbiForm } from "lib/components/abi";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
@@ -34,6 +35,7 @@ export const ViewArea = ({
   moduleName: string;
   fn: ExposedFunction;
 }) => {
+  const isMac = useIsMac();
   const [abiData, setAbiData] = useState<AbiFormData>({
     typeArgs: getAbiInitialData(fn.generic_type_params.length),
     args: getAbiInitialData(fn.params.length),
@@ -61,7 +63,19 @@ export const ViewArea = ({
   };
 
   const isLoading = queryFetching || queryRefetching;
-  const isDisabled = Boolean(abiErrors.length);
+  const isButtonDisabled = Boolean(abiErrors.length);
+  useEffect(() => {
+    const keydownHandler = (e: KeyboardEvent) => {
+      // TODO: problem with safari if focusing in the textarea
+      const specialKey = isMac ? e.metaKey : e.ctrlKey;
+      if (!isButtonDisabled && specialKey && e.key === "Enter") handleQuery();
+    };
+    document.addEventListener("keydown", keydownHandler);
+    return () => {
+      document.removeEventListener("keydown", keydownHandler);
+    };
+  });
+
   return (
     <Grid templateColumns="1fr 1fr" gap={6}>
       <GridItem>
@@ -79,11 +93,11 @@ export const ViewArea = ({
             p="6px 16px"
             size={{ base: "sm", md: "md" }}
             onClick={handleQuery}
-            isDisabled={isDisabled}
+            isDisabled={isButtonDisabled}
             isLoading={isLoading}
             leftIcon={<CustomIcon name="query" />}
           >
-            View
+            View{` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
           </Button>
         </Flex>
       </GridItem>
diff --git a/src/lib/pages/query/components/JsonQuery.tsx b/src/lib/pages/query/components/JsonQuery.tsx
index b6857989a..399a0430d 100644
--- a/src/lib/pages/query/components/JsonQuery.tsx
+++ b/src/lib/pages/query/components/JsonQuery.tsx
@@ -9,6 +9,7 @@ import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
   useCurrentChain,
+  useIsMac,
   useMobile,
 } from "lib/app-provider";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
@@ -42,6 +43,7 @@ interface JsonQueryProps {
 export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
   const { track, trackAction } = useTrack();
   const isMobile = useMobile();
+  const isMac = useIsMac();
   const { isFetching: cmdsFetching, queryCmds } = useQueryCmds(contractAddress);
   const lcdEndpoint = useBaseApiRoute("rest");
   const { addActivity } = useContractStore();
@@ -88,10 +90,12 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
     refetch();
   };
 
+  const isButtonDisabled = jsonValidate(msg) !== null;
   useEffect(() => {
     const keydownHandler = (e: KeyboardEvent) => {
       // TODO: problem with safari if focusing in the textarea
-      if (e.ctrlKey && e.key === "Enter") handleQuery();
+      const specialKey = isMac ? e.metaKey : e.ctrlKey;
+      if (!isButtonDisabled && specialKey && e.key === "Enter") handleQuery();
     };
     document.addEventListener("keydown", keydownHandler);
     return () => {
@@ -161,11 +165,11 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
               p="6px 16px"
               size={{ base: "sm", md: "md" }}
               onClick={handleQuery}
-              isDisabled={jsonValidate(msg) !== null}
+              isDisabled={isButtonDisabled}
               isLoading={queryFetching || queryRefetching}
               leftIcon={<CustomIcon name="query" />}
             >
-              Query {!isMobile && "(Ctrl + Enter)"}
+              Query{!isMobile && ` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
             </Button>
           </Flex>
         </Box>

From 00a4f476d83ca0f0b06a885d9442d194828ee948 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 17:11:28 +0700
Subject: [PATCH 125/368] fix: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8872fbaa..112893b15 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -118,6 +118,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#551](https://github.com/alleslabs/celatone-frontend/pull/551) Fix various bugs on the interaction page
 - [#547](https://github.com/alleslabs/celatone-frontend/pull/547) Fix form null and sort modules when submit an address
 - [#543](https://github.com/alleslabs/celatone-frontend/pull/543) Fix Initia testnet chain config
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text

From d8b523fcb70f67cb20aaea2880b9c79d9c6619a1 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 29 Sep 2023 17:18:24 +0700
Subject: [PATCH 126/368] fix: add all, format namespace

---
 .../components/contract-state/index.tsx       | 27 ++++++++++++-------
 src/lib/utils/contractState.ts                |  4 +++
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index abaef6aa7..1082f4d96 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -1,6 +1,6 @@
 import { Button, ButtonGroup, Flex, Heading } from "@chakra-ui/react";
 import { saveAs } from "file-saver";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import InputWithIcon from "lib/components/InputWithIcon";
 import { ErrorFetching } from "lib/pages/account-details/components/ErrorFetching";
@@ -11,9 +11,17 @@ import { groupByFirstIndex } from "lib/utils";
 import { StateList } from "./StateList";
 import { StateLoader } from "./StateLoader";
 
+const getDisplayName = (namespace: string) => {
+  if (namespace === "all") return "All Contract States";
+  if (namespace === "others") return "Others";
+
+  return namespace;
+};
+
 interface ContractStatesProps {
   contractAddress: ContractAddr;
 }
+
 export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
   const {
     data,
@@ -24,7 +32,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
     isFetchingNextPage,
   } = useContractStates(contractAddress);
 
-  const [selectedNamespace, setSelectedNamespace] = useState("");
+  const [selectedNamespace, setSelectedNamespace] = useState("all");
   const [keyword, setKeyword] = useState("");
 
   const { namespaces, rawStates, states, totalData, totalDataByNamespace } =
@@ -63,12 +71,6 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
       };
     }, [data, keyword, selectedNamespace]);
 
-  // Set current namespace to the first namespace when data is loaded
-  useEffect(() => {
-    setSelectedNamespace(namespaces[0]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [namespaces.length > 0]);
-
   const handleDownload = () => {
     const jsonString = JSON.stringify(rawStates, null, 2);
 
@@ -77,7 +79,12 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
     saveAs(blob, "state.json");
   };
 
-  if (error) return <ErrorFetching />;
+  if (error)
+    return (
+      <Flex>
+        <ErrorFetching />
+      </Flex>
+    );
 
   return (
     <Flex direction="column" gap={8}>
@@ -118,7 +125,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
             fontWeight={400}
             onClick={() => setSelectedNamespace(namespace)}
           >
-            {namespace}
+            {getDisplayName(namespace)}
           </Button>
         ))}
       </ButtonGroup>
diff --git a/src/lib/utils/contractState.ts b/src/lib/utils/contractState.ts
index a298296e9..b0212c199 100644
--- a/src/lib/utils/contractState.ts
+++ b/src/lib/utils/contractState.ts
@@ -74,11 +74,15 @@ export const parseValue = (value: string) => {
 
 export const groupByFirstIndex = (states: ContractState[]) =>
   states.reduce((acc, state) => {
+    // save all states
+    acc.all = acc.all?.concat(state) ?? [state];
+
     if (state.key.type === "bucket") {
       const firstIndexValue = state.key.values[0];
       acc[firstIndexValue] = acc[firstIndexValue]?.concat(state) ?? [state];
     } else {
       acc.others = acc.others?.concat(state) ?? [state];
     }
+
     return acc;
   }, {} as { [key: string]: ContractState[] });

From faab0235925d3fcc229c680fe389a6d8b2060e7f Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 29 Sep 2023 17:19:51 +0700
Subject: [PATCH 127/368] fix: changelog

---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f33bc8d0..917350389 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -78,7 +78,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [#553](https://github.com/alleslabs/celatone-frontend/pull/553) Use Cmd on Mac OS while Ctrl on others
 - [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
-- [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure

From 858dc8e441c0d3a80ff12d5ae865f8fa88ca565a Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 2 Oct 2023 17:09:39 +0700
Subject: [PATCH 128/368] fix: fix and improve ui alignment, cta, and publish
 error

---
 CHANGELOG.md                                  |   1 +
 src/lib/components/upload/UploadCard.tsx      |  18 +-
 src/lib/hooks/useOpenTab.ts                   |  24 ++
 src/lib/pages/publish-module/completed.tsx    |  96 +++----
 .../publish-module/components/Footer.tsx      |  31 ++-
 .../components/ModulePublishCard.tsx          |   8 +-
 .../components/UploadModuleCard.tsx           |   2 +-
 src/lib/pages/publish-module/index.tsx        |  29 ++-
 src/lib/pages/publish-module/publish.tsx      | 235 +++++++++---------
 src/lib/pages/publish-module/utils.ts         |  40 +--
 10 files changed, 269 insertions(+), 215 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8872fbaa..283dd5997 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -118,6 +118,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#554](https://github.com/alleslabs/celatone-frontend/pull/554) Fix and improve ui alignment, cta, and publish error
 - [#547](https://github.com/alleslabs/celatone-frontend/pull/547) Fix form null and sort modules when submit an address
 - [#543](https://github.com/alleslabs/celatone-frontend/pull/543) Fix Initia testnet chain config
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx
index 1d59c26bb..684c2be97 100644
--- a/src/lib/components/upload/UploadCard.tsx
+++ b/src/lib/components/upload/UploadCard.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Button, Flex, Text } from "@chakra-ui/react";
 import big from "big.js";
 
 import { CustomIcon, UploadIcon } from "lib/components/icon";
@@ -22,14 +22,14 @@ const getTheme = (theme: CardTheme) => {
       return {
         bgColor: "gray.800",
         border: "1px solid var(--chakra-colors-gray-700)",
-        iconColor: "gray.600",
+        buttonVariant: "outline-gray",
       };
     case "primary":
     default:
       return {
         bgColor: "gray.900",
         border: "none",
-        iconColor: "text.dark",
+        buttonVariant: "outline-primary",
       };
   }
 };
@@ -80,12 +80,14 @@ export const UploadCard = ({
           </Flex>
         </Flex>
         <Flex align="center" gap={4}>
-          <CustomIcon
-            name="delete"
-            color={themeConfig.iconColor}
+          <Button
+            leftIcon={<CustomIcon name="swap" boxSize={3} />}
+            size="sm"
+            variant={themeConfig.buttonVariant}
             onClick={deleteFile}
-            cursor="pointer"
-          />
+          >
+            Change file
+          </Button>
           {status === "error" && (
             <CustomIcon
               name="alert-triangle-solid"
diff --git a/src/lib/hooks/useOpenTab.ts b/src/lib/hooks/useOpenTab.ts
index d2800e147..01716ef26 100644
--- a/src/lib/hooks/useOpenTab.ts
+++ b/src/lib/hooks/useOpenTab.ts
@@ -27,3 +27,27 @@ export const useOpenAssetTab = () => {
     [balancesApiRoute]
   );
 };
+
+export const useOpenTab = () => {
+  const { currentChainId } = useCelatoneApp();
+
+  return useCallback(
+    ({
+      pathname,
+      query,
+    }: {
+      pathname: string;
+      query: Record<string, Option<string>>;
+    }) => {
+      const queryString = Object.entries(query).reduce(
+        (acc, [key, value], idx) =>
+          acc.concat(
+            `${key}=${value}${idx !== Object.keys(query).length - 1 ? "&" : ""}`
+          ),
+        ""
+      );
+      openNewTab(`/${currentChainId}${pathname}?${queryString}`);
+    },
+    [currentChainId]
+  );
+};
diff --git a/src/lib/pages/publish-module/completed.tsx b/src/lib/pages/publish-module/completed.tsx
index 25abab185..88df71b42 100644
--- a/src/lib/pages/publish-module/completed.tsx
+++ b/src/lib/pages/publish-module/completed.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
+import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 import { capitalize } from "lodash";
 import plur from "plur";
 
@@ -10,47 +10,57 @@ import WasmPageContainer from "lib/components/WasmPageContainer";
 import type { PublishCompleteState } from ".";
 import { ModulePublishCard } from "./components/ModulePublishCard";
 
+interface PublishCompletedProps {
+  publishTxInfo: PublishCompleteState;
+  resetState: () => void;
+}
+
 export const PublishCompleted = ({
-  txHash,
-  formattedFee,
-  upgradePolicy,
-  modules,
-}: PublishCompleteState) => {
-  return (
-    <WasmPageContainer>
-      <CustomIcon boxSize={8} color="success.main" name="check-circle-solid" />
-      <Heading as="h4" variant="h4" mt={4} mb={2}>
-        {modules.length} {plur("module", modules.length)} published!
+  publishTxInfo: { txHash, formattedFee, upgradePolicy, modules },
+  resetState,
+}: PublishCompletedProps) => (
+  <WasmPageContainer>
+    <CustomIcon boxSize={8} color="success.main" name="check-circle-solid" />
+    <Heading as="h4" variant="h4" mt={4} mb={2}>
+      {modules.length} {plur("module", modules.length)} published!
+    </Heading>
+    <Text variant="body2" color="text.dark">
+      Your .mv files are uploaded and published as modules.
+    </Text>
+    <TxReceiptRender
+      receipts={[
+        {
+          title: "Tx Hash",
+          html: <ExplorerLink type="tx_hash" value={txHash} />,
+        },
+        {
+          title: "Tx Fee",
+          value: formattedFee,
+        },
+        {
+          title: "Upgrade Policy",
+          value: capitalize(upgradePolicy),
+        },
+      ]}
+      variant="full"
+      my={12}
+    />
+    <Flex direction="column" gap={6} w="full">
+      <Heading as="h6" variant="h6">
+        Published {modules.length} {plur("module", modules.length)}
       </Heading>
-      <Text variant="body2" color="text.dark">
-        Your .mv files are uploaded and published as modules.
-      </Text>
-      <TxReceiptRender
-        receipts={[
-          {
-            title: "Tx Hash",
-            html: <ExplorerLink type="tx_hash" value={txHash} />,
-          },
-          {
-            title: "Tx Fee",
-            value: formattedFee,
-          },
-          {
-            title: "Upgrade Policy",
-            value: capitalize(upgradePolicy),
-          },
-        ]}
-        variant="full"
-        my={12}
-      />
-      <Flex direction="column" gap={6} w="full">
-        <Heading as="h6" variant="h6">
-          Published {modules.length} {plur("module", modules.length)}
-        </Heading>
-        {modules.map((module) => (
-          <ModulePublishCard key={module.id} module={module} />
-        ))}
-      </Flex>
-    </WasmPageContainer>
-  );
-};
+      {modules.map((module) => (
+        <ModulePublishCard key={module.id} module={module} />
+      ))}
+    </Flex>
+    <Button
+      variant="outline-primary"
+      mt={6}
+      rightIcon={<CustomIcon name="chevron-right" boxSize={3} />}
+      w="full"
+      onClick={resetState}
+    >
+      Publish more modules
+    </Button>
+  </WasmPageContainer>
+);
diff --git a/src/lib/pages/publish-module/components/Footer.tsx b/src/lib/pages/publish-module/components/Footer.tsx
index 79a2a9022..3983c1430 100644
--- a/src/lib/pages/publish-module/components/Footer.tsx
+++ b/src/lib/pages/publish-module/components/Footer.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Grid, GridItem, Spinner } from "@chakra-ui/react";
+import { Box, Button, Flex, Grid, Spinner } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
 interface FooterProps {
@@ -18,20 +18,17 @@ export const Footer = ({
   const publishText =
     fieldAmount > 1 ? `Publish ${fieldAmount} Modules` : "Publish Module";
   return (
-    <Grid
-      w="full"
-      px={12}
-      bg="gray.900"
-      h="70px"
-      bottom={0}
-      position="sticky"
-      zIndex={2}
-      templateAreas={`"prespace main accordion postspace"`}
-      templateColumns="1fr 6fr 4fr 1fr"
-      columnGap={4}
-    >
-      <GridItem area="main">
-        <Flex align="center" justify="space-between" h="full">
+    <Box bg="gray.900" h="70px" bottom={0} position="sticky" zIndex={2}>
+      <Grid
+        px={{ base: "16px", md: "48px" }}
+        templateAreas={`"prespace main accordion postspace"`}
+        templateColumns="1fr 6fr 4fr 1fr"
+        columnGap={4}
+        maxW="1440px"
+        mx="auto"
+        h="full"
+      >
+        <Flex align="center" justify="space-between" gridArea="main">
           <Button variant="outline-primary" onClick={router.back}>
             Cancel
           </Button>
@@ -43,7 +40,7 @@ export const Footer = ({
             {isLoading ? <Spinner size="md" variant="light" /> : publishText}
           </Button>
         </Flex>
-      </GridItem>
-    </Grid>
+      </Grid>
+    </Box>
   );
 };
diff --git a/src/lib/pages/publish-module/components/ModulePublishCard.tsx b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
index 05abdf3fe..8e1f4ad99 100644
--- a/src/lib/pages/publish-module/components/ModulePublishCard.tsx
+++ b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
@@ -1,17 +1,17 @@
 import { Button, Flex, Grid, Heading, Text } from "@chakra-ui/react";
 
 import type { FileField } from "../formConstants";
-import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { CountBadge } from "lib/components/module";
+import { useOpenTab } from "lib/hooks";
 
 interface ModulePublishCardProps {
   module: FileField;
 }
 
 export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
-  const navigate = useInternalNavigate();
+  const openTab = useOpenTab();
   const { file, decodeRes } = module;
   return (
     <Flex
@@ -88,7 +88,7 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
           leftIcon={<CustomIcon name="query" boxSize={3} color="text.main" />}
           variant="outline-white"
           onClick={() =>
-            navigate({
+            openTab({
               pathname: "/interact",
               query: {
                 address: decodeRes?.abi.address,
@@ -104,7 +104,7 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
           leftIcon={<CustomIcon name="execute" boxSize={3} color="text.main" />}
           variant="outline-white"
           onClick={() =>
-            navigate({
+            openTab({
               pathname: "/interact",
               query: {
                 address: decodeRes?.abi.address,
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 68614927a..9ddbf3fc4 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -110,7 +110,7 @@ export const UploadModuleCard = ({
           aria-label="remove"
           variant="ghost"
           size="sm"
-          disabled={fields.length <= 1}
+          visibility={fields.length > 1 ? "visible" : "hidden"}
         >
           <CustomIcon name="close" color="gray.600" />
         </IconButton>
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 686a85b74..084a60b0f 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -1,28 +1,41 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import type { PublishTxInternalResult } from "lib/app-provider/tx/publish";
 import { UpgradePolicy } from "lib/types";
+import { scrollToTop } from "lib/utils";
 
 import { PublishCompleted } from "./completed";
 import type { FileArrayFields } from "./formConstants";
 import { PublishModule } from "./publish";
 
+const DEFAULT_STATE: PublishCompleteState = {
+  txHash: "",
+  formattedFee: "",
+  upgradePolicy: UpgradePolicy.ARBITRARY,
+  modules: [],
+};
 export interface PublishCompleteState extends PublishTxInternalResult {
   upgradePolicy: UpgradePolicy;
   modules: FileArrayFields;
 }
 
 export const PublishIndex = () => {
-  const [publishTxInfo, setPublishTxInfo] = useState<PublishCompleteState>({
-    txHash: "",
-    formattedFee: "",
-    upgradePolicy: UpgradePolicy.ARBITRARY,
-    modules: [],
-  });
+  const [publishTxInfo, setPublishTxInfo] =
+    useState<PublishCompleteState>(DEFAULT_STATE);
   const [completed, setCompleted] = useState(false);
 
+  useEffect(() => {
+    scrollToTop();
+  }, [completed]);
+
   return completed ? (
-    <PublishCompleted {...publishTxInfo} />
+    <PublishCompleted
+      publishTxInfo={publishTxInfo}
+      resetState={() => {
+        setPublishTxInfo(DEFAULT_STATE);
+        setCompleted(false);
+      }}
+    />
   ) : (
     <PublishModule
       setCompleted={setCompleted}
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 435b86001..28fd1d681 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -162,7 +162,12 @@ export const PublishModule = ({
   // ---------------SIDE EFFECTS---------------//
   // ------------------------------------------//
   useEffect(() => {
-    if (!fields.every((field) => field.base64EncodedFile)) {
+    if (
+      !fields.every(
+        (field) =>
+          field.base64EncodedFile && field.publishStatus.status !== "error"
+      )
+    ) {
       setEstimatedFee(undefined);
     }
   }, [fields]);
@@ -180,121 +185,123 @@ export const PublishModule = ({
 
   return (
     <>
-      <PageContainer display="unset" p={0}>
-        <Grid
-          templateColumns="1fr 6fr 4fr 1fr"
-          columnGap="16px"
-          rowGap="48px"
-          p={{ base: "16px", md: "48px" }}
-        >
-          <Box gridArea="1 / 2">
-            <Heading as="h5" variant="h5" textAlign="center">
-              {publishModuleText.header}
-            </Heading>
-            <Text color="text.dark" pt={4} textAlign="center">
-              {publishModuleText.description}
-            </Text>
-            <ConnectWalletAlert
-              subtitle={publishModuleText.connectWallet}
-              mt={12}
-            />
-          </Box>
-          {/* Upload File Section */}
-          <Box gridArea="2 / 2">
-            <Heading as="h6" variant="h6" fontWeight={600}>
-              Upload .mv file(s)
-            </Heading>
-            <Flex gap={6} flexDirection="column" my={6}>
-              {fields.map((field, idx) => (
-                <UploadModuleCard
-                  key={field.id}
-                  index={idx}
-                  fields={fields}
-                  fileState={field}
-                  policy={upgradePolicy}
-                  setFile={setFileValue(idx)}
-                  removeFile={() => {
-                    update(idx, emptyModule);
-                  }}
-                  removeEntry={() => remove(idx)}
-                />
-              ))}
-            </Flex>
-            <Button
-              onClick={() => append(emptyModule)}
-              leftIcon={<CustomIcon name="add-new" />}
-              variant="ghost-primary"
-              p="0 4px"
-            >
-              Publish More Modules
-            </Button>
-          </Box>
-          {/* Upgrade Policy Section */}
-          <Box gridArea="3 / 2">
-            <Heading as="h6" variant="h6" fontWeight={600}>
-              Upgrade Policy
-            </Heading>
-            <Text color="text.dark" variant="body2" mt={2}>
-              Specify how publishing modules will be able to republish.
-            </Text>
-            <Flex direction="column" gap={2} my={4}>
-              {POLICIES.map((item) => (
-                <PolicyCard
-                  key={item.value}
-                  value={item.value}
-                  selected={upgradePolicy}
-                  onSelect={() => {
-                    setValue("upgradePolicy", item.value);
-                    fields.forEach((field, index) =>
-                      update(index, {
-                        ...field,
-                        publishStatus: statusResolver({
-                          data: field.decodeRes,
-                          fields,
-                          index,
-                          policy: item.value,
-                        }),
-                      })
-                    );
-                  }}
-                  description={item.description}
-                  hasCondition={item.condition}
-                />
-              ))}
-            </Flex>
-            <Text color="text.dark" variant="body3">
-              ** Upgrade policy can be changed later, but will not able to
-              change to the more lenient policy.
-            </Text>
-            <Flex
-              mt={12}
-              fontSize="14px"
-              color="text.dark"
-              alignSelf="flex-start"
-              alignItems="center"
-              gap={1}
-            >
-              <p>Transaction Fee:</p>
-              <EstimatedFeeRender
-                estimatedFee={estimatedFee}
-                loading={isSimulating}
+      <PageContainer display="inline" p={0}>
+        <Box minH="inherit" maxW="1440px" mx="auto">
+          <Grid
+            templateColumns="1fr 6fr 4fr 1fr"
+            columnGap="16px"
+            rowGap="48px"
+            p={{ base: "16px", md: "48px" }}
+          >
+            <Box gridArea="1 / 2">
+              <Heading as="h5" variant="h5" textAlign="center">
+                {publishModuleText.header}
+              </Heading>
+              <Text color="text.dark" pt={4} textAlign="center">
+                {publishModuleText.description}
+              </Text>
+              <ConnectWalletAlert
+                subtitle={publishModuleText.connectWallet}
+                mt={12}
               />
-            </Flex>
-            {simulateError && (
-              <ErrorMessageRender
-                error={simulateError}
-                mt={2}
+            </Box>
+            {/* Upload File Section */}
+            <Box gridArea="2 / 2">
+              <Heading as="h6" variant="h6" fontWeight={600}>
+                Upload .mv file(s)
+              </Heading>
+              <Flex gap={6} flexDirection="column" my={6}>
+                {fields.map((field, idx) => (
+                  <UploadModuleCard
+                    key={field.id}
+                    index={idx}
+                    fields={fields}
+                    fileState={field}
+                    policy={upgradePolicy}
+                    setFile={setFileValue(idx)}
+                    removeFile={() => {
+                      update(idx, emptyModule);
+                    }}
+                    removeEntry={() => remove(idx)}
+                  />
+                ))}
+              </Flex>
+              <Button
+                onClick={() => append(emptyModule)}
+                leftIcon={<CustomIcon name="add-new" />}
+                variant="ghost-primary"
+                p="0 4px"
+              >
+                Publish More Modules
+              </Button>
+            </Box>
+            {/* Upgrade Policy Section */}
+            <Box gridArea="3 / 2">
+              <Heading as="h6" variant="h6" fontWeight={600}>
+                Upgrade Policy
+              </Heading>
+              <Text color="text.dark" variant="body2" mt={2}>
+                Specify how publishing modules will be able to republish.
+              </Text>
+              <Flex direction="column" gap={2} my={4}>
+                {POLICIES.map((item) => (
+                  <PolicyCard
+                    key={item.value}
+                    value={item.value}
+                    selected={upgradePolicy}
+                    onSelect={() => {
+                      setValue("upgradePolicy", item.value);
+                      fields.forEach((field, index) =>
+                        update(index, {
+                          ...field,
+                          publishStatus: statusResolver({
+                            data: field.decodeRes,
+                            fields,
+                            index,
+                            policy: item.value,
+                          }),
+                        })
+                      );
+                    }}
+                    description={item.description}
+                    hasCondition={item.condition}
+                  />
+                ))}
+              </Flex>
+              <Text color="text.dark" variant="body3">
+                ** Upgrade policy can be changed later, but will not able to
+                change to the more lenient policy.
+              </Text>
+              <Flex
+                mt={12}
+                fontSize="14px"
+                color="text.dark"
                 alignSelf="flex-start"
-              />
-            )}
-          </Box>
-          <Box gridArea="2 / 3" pl="32px">
-            <UploadAccordion />
-          </Box>
-          <Box gridArea="3 / 3" pl="32px">
-            <PolicyAccordion chainName={chainPrettyName} />
-          </Box>
-        </Grid>
+                alignItems="center"
+                gap={1}
+              >
+                <p>Transaction Fee:</p>
+                <EstimatedFeeRender
+                  estimatedFee={estimatedFee}
+                  loading={isSimulating}
+                />
+              </Flex>
+              {simulateError && (
+                <ErrorMessageRender
+                  error={simulateError}
+                  mt={2}
+                  alignSelf="flex-start"
+                />
+              )}
+            </Box>
+            <Box gridArea="2 / 3" pl="32px">
+              <UploadAccordion />
+            </Box>
+            <Box gridArea="3 / 3" pl="32px">
+              <PolicyAccordion chainName={chainPrettyName} />
+            </Box>
+          </Grid>
+        </Box>
       </PageContainer>
       <Footer
         publishModule={proceed}
diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
index 6ef6da893..7471df958 100644
--- a/src/lib/pages/publish-module/utils.ts
+++ b/src/lib/pages/publish-module/utils.ts
@@ -38,37 +38,37 @@ export const statusResolver = ({
       status: "error",
       text: `This .mv file can be published by ${truncate(abi.address)} only.`,
     };
-  // Condition check for existing module
-  if (currentPolicy) {
-    // Policy check
-    // IMMUTABLE -> cannot be republished
-    // COMPATIBLE -> can be republished as COMPATIBLE and IMMUTABLE only
-    // ARBITRARY -> can be freely republished
-    if (currentPolicy === UpgradePolicy.IMMUTABLE)
+  // Condition check for existing module, break switch case for non-existing
+  switch (currentPolicy) {
+    case UpgradePolicy.IMMUTABLE:
       return {
         status: "error",
         text: `“${abi.name}” is published with “Immutable” policy, which cannot be republished.`,
       };
-    if (currentPolicy === policy)
+    case policy:
       return {
         status: "info",
         text: `The file will be uploaded to republish module “${abi.name}” in your address.`,
       };
-    return resolvePolicyPriority(policy, currentPolicy)
-      ? {
-          status: "info",
-          text: `The file will be uploaded to republish module “${
-            abi.name
-          }” in your address. ${
-            currentPolicy === policy ? "" : policyUpdateText
-          }`,
-        }
-      : {
+    case undefined:
+      break;
+    default: {
+      if (policy === UpgradePolicy.IMMUTABLE && priorUpload)
+        return {
           status: "error",
-          text: `“${abi.name}” is published with “${currentPolicy}” policy, which cannot be republished to “${policy}”`,
+          text: `“${abi.name}” is published with “Immutable” policy, which cannot be republished.`,
         };
+      return resolvePolicyPriority(policy, currentPolicy)
+        ? {
+            status: "info",
+            text: `The file will be uploaded to republish module “${abi.name}” in your address. ${policyUpdateText}`,
+          }
+        : {
+            status: "error",
+            text: `“${abi.name}” is published with “${currentPolicy}” policy, which cannot be republished to “${policy}”`,
+          };
+    }
   }
-  // Condition check for non-existing module with identical module file uploaded
   if (priorUpload) {
     if (policy === UpgradePolicy.IMMUTABLE)
       return {

From 7c8054eba5d249058e4f521e8eb4501a388e270a Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 2 Oct 2023 17:14:18 +0700
Subject: [PATCH 129/368] fix: add comments

---
 src/lib/pages/publish-module/utils.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
index 7471df958..3fc6a8e72 100644
--- a/src/lib/pages/publish-module/utils.ts
+++ b/src/lib/pages/publish-module/utils.ts
@@ -40,6 +40,10 @@ export const statusResolver = ({
     };
   // Condition check for existing module, break switch case for non-existing
   switch (currentPolicy) {
+    // Policy check
+    // IMMUTABLE -> cannot be republished
+    // COMPATIBLE -> can be republished as COMPATIBLE and IMMUTABLE only
+    // ARBITRARY -> can be freely republished
     case UpgradePolicy.IMMUTABLE:
       return {
         status: "error",
@@ -69,6 +73,7 @@ export const statusResolver = ({
           };
     }
   }
+  // Condition check for non-existing module with identical module file uploaded
   if (priorUpload) {
     if (policy === UpgradePolicy.IMMUTABLE)
       return {

From 4435577362edd7b931f1d8278371fbfe9ecb544b Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 3 Oct 2023 12:12:14 +0700
Subject: [PATCH 130/368] fix: rewrite publish status resolver into an effect

---
 CHANGELOG.md                                  |  1 +
 src/lib/pages/publish-module/completed.tsx    |  7 ++-
 .../components/ModulePublishCard.tsx          |  4 +-
 .../components/UploadModuleCard.tsx           | 20 ++++---
 src/lib/pages/publish-module/formConstants.ts |  9 +--
 src/lib/pages/publish-module/index.tsx        |  4 +-
 src/lib/pages/publish-module/publish.tsx      | 58 ++++++++++---------
 src/lib/pages/publish-module/utils.ts         | 22 ++++---
 src/lib/services/moduleService.ts             | 16 +----
 9 files changed, 70 insertions(+), 71 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 283dd5997..43e48707c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -118,6 +118,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#555](https://github.com/alleslabs/celatone-frontend/pull/555) Rewrite publish status resolver into an effect
 - [#554](https://github.com/alleslabs/celatone-frontend/pull/554) Fix and improve ui alignment, cta, and publish error
 - [#547](https://github.com/alleslabs/celatone-frontend/pull/547) Fix form null and sort modules when submit an address
 - [#543](https://github.com/alleslabs/celatone-frontend/pull/543) Fix Initia testnet chain config
diff --git a/src/lib/pages/publish-module/completed.tsx b/src/lib/pages/publish-module/completed.tsx
index 88df71b42..752951529 100644
--- a/src/lib/pages/publish-module/completed.tsx
+++ b/src/lib/pages/publish-module/completed.tsx
@@ -49,8 +49,11 @@ export const PublishCompleted = ({
       <Heading as="h6" variant="h6">
         Published {modules.length} {plur("module", modules.length)}
       </Heading>
-      {modules.map((module) => (
-        <ModulePublishCard key={module.id} module={module} />
+      {modules.map((module, idx) => (
+        <ModulePublishCard
+          key={`${module.base64EncodedFile}-${idx.toString()}`}
+          module={module}
+        />
       ))}
     </Flex>
     <Button
diff --git a/src/lib/pages/publish-module/components/ModulePublishCard.tsx b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
index 8e1f4ad99..d40d7bc1b 100644
--- a/src/lib/pages/publish-module/components/ModulePublishCard.tsx
+++ b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
@@ -1,13 +1,13 @@
 import { Button, Flex, Grid, Heading, Text } from "@chakra-ui/react";
 
-import type { FileField } from "../formConstants";
+import type { Module } from "../formConstants";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { CountBadge } from "lib/components/module";
 import { useOpenTab } from "lib/hooks";
 
 interface ModulePublishCardProps {
-  module: FileField;
+  module: Module;
 }
 
 export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 9ddbf3fc4..0e4d1f6a0 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -1,11 +1,7 @@
 import { Flex, Heading, IconButton, Spinner, Text } from "@chakra-ui/react";
 import { type PropsWithChildren, useCallback, useState } from "react";
 
-import type {
-  FileArrayFields,
-  FileField,
-  PublishStatus,
-} from "../formConstants";
+import type { Module, PublishStatus } from "../formConstants";
 import { statusResolver } from "../utils";
 import { useCurrentChain } from "lib/app-provider";
 import { DropZone } from "lib/components/dropzone";
@@ -15,12 +11,12 @@ import {
   type DecodeModuleQueryResponse,
   useDecodeModule,
 } from "lib/services/moduleService";
-import type { HumanAddr, UpgradePolicy, Option } from "lib/types";
+import type { HumanAddr, Option, UpgradePolicy } from "lib/types";
 
 interface UploadModuleCardProps {
   index: number;
-  fileState: FileField;
-  fields: FileArrayFields;
+  fileState: Module;
+  fields: Module[];
   policy: UpgradePolicy;
   setFile: (
     file: Option<File>,
@@ -74,7 +70,13 @@ export const UploadModuleCard = ({
           tempFile.file,
           tempFile.base64,
           data,
-          statusResolver({ data, fields, index, policy })
+          statusResolver({
+            data,
+            fields,
+            index,
+            policy,
+            address: address as Option<HumanAddr>,
+          })
         ),
     },
   });
diff --git a/src/lib/pages/publish-module/formConstants.ts b/src/lib/pages/publish-module/formConstants.ts
index 6b5abd3f1..94764d0a0 100644
--- a/src/lib/pages/publish-module/formConstants.ts
+++ b/src/lib/pages/publish-module/formConstants.ts
@@ -1,5 +1,3 @@
-import type { FieldArrayWithId } from "react-hook-form";
-
 import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
 import type { Option } from "lib/types";
 import { UpgradePolicy } from "lib/types";
@@ -11,7 +9,7 @@ export interface PublishStatus {
   text: string;
 }
 
-interface Module {
+export interface Module {
   file: Option<File>;
   base64EncodedFile: string;
   decodeRes: Option<DecodeModuleQueryResponse>;
@@ -23,10 +21,7 @@ export interface PublishModuleState {
   upgradePolicy: UpgradePolicy;
 }
 
-export type FileField = FieldArrayWithId<PublishModuleState, "modules", "id">;
-export type FileArrayFields = FileField[];
-
-export const publishStatusDefault: { status: Status; text: string } = {
+export const publishStatusDefault: PublishStatus = {
   status: "init",
   text: "",
 };
diff --git a/src/lib/pages/publish-module/index.tsx b/src/lib/pages/publish-module/index.tsx
index 084a60b0f..b583d4526 100644
--- a/src/lib/pages/publish-module/index.tsx
+++ b/src/lib/pages/publish-module/index.tsx
@@ -5,7 +5,7 @@ import { UpgradePolicy } from "lib/types";
 import { scrollToTop } from "lib/utils";
 
 import { PublishCompleted } from "./completed";
-import type { FileArrayFields } from "./formConstants";
+import type { Module } from "./formConstants";
 import { PublishModule } from "./publish";
 
 const DEFAULT_STATE: PublishCompleteState = {
@@ -16,7 +16,7 @@ const DEFAULT_STATE: PublishCompleteState = {
 };
 export interface PublishCompleteState extends PublishTxInternalResult {
   upgradePolicy: UpgradePolicy;
-  modules: FileArrayFields;
+  modules: Module[];
 }
 
 export const PublishIndex = () => {
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 28fd1d681..12e205dcf 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -69,9 +69,9 @@ export const PublishModule = ({
     defaultValues,
   });
 
-  const { upgradePolicy } = watch();
+  const { upgradePolicy, modules } = watch();
 
-  const { fields, append, remove, update } = useFieldArray({
+  const { append, remove, update } = useFieldArray({
     control,
     name: "modules",
   });
@@ -101,19 +101,19 @@ export const PublishModule = ({
     () =>
       Boolean(
         address &&
-          fields.every(
+          modules.every(
             (field) =>
               field.base64EncodedFile && field.publishStatus.status !== "error"
           )
       ),
-    [address, fields]
+    [address, modules]
   );
 
   const { isFetching: isSimulating } = useSimulateFeeQuery({
     enabled: enablePublish,
     messages: composePublishMsg(
       address as HumanAddr,
-      fields.map((file) => file.base64EncodedFile),
+      modules.map((file) => file.base64EncodedFile),
       upgradePolicy
     ),
     onSuccess: (gasRes) => {
@@ -131,7 +131,7 @@ export const PublishModule = ({
   const proceed = useCallback(async () => {
     const stream = await postPublishTx({
       onTxSucceed: (txResult) => {
-        setPublishTxInfo({ ...txResult, upgradePolicy, modules: fields });
+        setPublishTxInfo({ ...txResult, upgradePolicy, modules });
         setProcessing(false);
         setCompleted(true);
       },
@@ -139,7 +139,7 @@ export const PublishModule = ({
       estimatedFee,
       messages: composePublishMsg(
         address as HumanAddr,
-        fields.map((file) => file.base64EncodedFile),
+        modules.map((file) => file.base64EncodedFile),
         upgradePolicy
       ),
     });
@@ -150,7 +150,7 @@ export const PublishModule = ({
   }, [
     address,
     estimatedFee,
-    fields,
+    modules,
     upgradePolicy,
     broadcast,
     postPublishTx,
@@ -163,14 +163,29 @@ export const PublishModule = ({
   // ------------------------------------------//
   useEffect(() => {
     if (
-      !fields.every(
+      !modules.every(
         (field) =>
           field.base64EncodedFile && field.publishStatus.status !== "error"
       )
     ) {
       setEstimatedFee(undefined);
     }
-  }, [fields]);
+  }, [modules]);
+
+  useEffect(() => {
+    modules.forEach((field, index) => {
+      setValue(
+        `modules.${index}.publishStatus`,
+        statusResolver({
+          data: field.decodeRes,
+          fields: modules,
+          index,
+          policy: upgradePolicy,
+          address: address as Option<HumanAddr>,
+        })
+      );
+    });
+  }, [address, upgradePolicy, modules, setValue]);
 
   const publishModuleText = useMemo(
     () => ({
@@ -211,11 +226,11 @@ export const PublishModule = ({
                 Upload .mv file(s)
               </Heading>
               <Flex gap={6} flexDirection="column" my={6}>
-                {fields.map((field, idx) => (
+                {modules.map((field, idx) => (
                   <UploadModuleCard
-                    key={field.id}
+                    key={`${field.base64EncodedFile}-${idx.toString()}`}
                     index={idx}
-                    fields={fields}
+                    fields={modules}
                     fileState={field}
                     policy={upgradePolicy}
                     setFile={setFileValue(idx)}
@@ -249,20 +264,7 @@ export const PublishModule = ({
                     key={item.value}
                     value={item.value}
                     selected={upgradePolicy}
-                    onSelect={() => {
-                      setValue("upgradePolicy", item.value);
-                      fields.forEach((field, index) =>
-                        update(index, {
-                          ...field,
-                          publishStatus: statusResolver({
-                            data: field.decodeRes,
-                            fields,
-                            index,
-                            policy: item.value,
-                          }),
-                        })
-                      );
-                    }}
+                    onSelect={() => setValue("upgradePolicy", item.value)}
                     description={item.description}
                     hasCondition={item.condition}
                   />
@@ -307,7 +309,7 @@ export const PublishModule = ({
         publishModule={proceed}
         isLoading={processing}
         disabled={!enablePublish || Boolean(simulateError) || isSimulating}
-        fieldAmount={fields.length}
+        fieldAmount={modules.length}
       />
     </>
   );
diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
index 3fc6a8e72..b0f66939c 100644
--- a/src/lib/pages/publish-module/utils.ts
+++ b/src/lib/pages/publish-module/utils.ts
@@ -1,9 +1,10 @@
 import type { DecodeModuleQueryResponse } from "lib/services/moduleService";
-import type { Option } from "lib/types";
+import type { HumanAddr, Option } from "lib/types";
 import { UpgradePolicy } from "lib/types";
-import { truncate } from "lib/utils";
+import { bech32AddressToHex, truncate, unpadHexAddress } from "lib/utils";
 
-import type { FileArrayFields, PublishStatus } from "./formConstants";
+import type { Module, PublishStatus } from "./formConstants";
+import { publishStatusDefault } from "./formConstants";
 
 const priority = Object.keys(UpgradePolicy);
 
@@ -17,15 +18,22 @@ export const statusResolver = ({
   fields,
   index,
   policy,
+  address,
 }: {
   data: Option<DecodeModuleQueryResponse>;
-  fields: FileArrayFields;
+  fields: Module[];
   index: number;
   policy: UpgradePolicy;
+  address: Option<HumanAddr>;
 }): PublishStatus => {
-  if (!data) return { status: "init", text: "" };
+  if (!data) return publishStatusDefault;
+
+  const { abi, currentPolicy, modulePath } = data;
+
+  const validPublisher = address
+    ? unpadHexAddress(bech32AddressToHex(address as HumanAddr)) === abi.address
+    : false;
 
-  const { abi, validPublisher, currentPolicy, modulePath } = data;
   const priorUpload = fields
     .slice(0, index)
     .findLast((field) => field.decodeRes?.modulePath === modulePath);
@@ -85,5 +93,5 @@ export const statusResolver = ({
       text: `The file will be uploaded to republish module “${abi.name}” in your address.`,
     };
   }
-  return { status: "init", text: "" };
+  return publishStatusDefault;
 };
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 1a6f7487c..1a0085085 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -23,13 +23,7 @@ import type {
   UpgradePolicy,
   HexAddr,
 } from "lib/types";
-import {
-  bech32AddressToHex,
-  parseJsonABI,
-  splitViewExecuteFunctions,
-  truncate,
-  unpadHexAddress,
-} from "lib/utils";
+import { parseJsonABI, splitViewExecuteFunctions, truncate } from "lib/utils";
 
 import {
   decodeModule,
@@ -165,7 +159,6 @@ export const useFunctionView = ({
 export interface DecodeModuleQueryResponse {
   abi: ResponseABI;
   modulePath: string;
-  validPublisher: boolean;
   currentPolicy: Option<UpgradePolicy>;
 }
 
@@ -186,11 +179,6 @@ export const useDecodeModule = ({
     const abi = await decodeModule(move.decodeApi, base64EncodedFile);
     const modulePath = `${truncate(abi.address)}::${abi.name}`;
 
-    const validPublisher = address
-      ? unpadHexAddress(bech32AddressToHex(address as HumanAddr)) ===
-        abi.address
-      : false;
-
     const currentPolicy = await getAccountModule(
       baseEndpoint,
       abi.address as HexAddr,
@@ -198,7 +186,7 @@ export const useDecodeModule = ({
     )
       .then((data) => data.upgradePolicy)
       .catch(() => undefined);
-    return { abi, modulePath, validPublisher, currentPolicy };
+    return { abi, modulePath, currentPolicy };
   };
 
   return useQuery(

From 22d8876ad20bf750a2d104706379ad208330ea79 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 3 Oct 2023 16:09:30 +0700
Subject: [PATCH 131/368] feat: add publish module entry position movement

---
 .../components/UploadModuleCard.tsx           | 46 ++++++++++++++++---
 src/lib/pages/publish-module/publish.tsx      |  3 +-
 src/lib/styles/theme/components/tooltip.ts    |  7 +++
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 0e4d1f6a0..84a5ea119 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -6,6 +6,7 @@ import { statusResolver } from "../utils";
 import { useCurrentChain } from "lib/app-provider";
 import { DropZone } from "lib/components/dropzone";
 import { CustomIcon } from "lib/components/icon";
+import { Tooltip } from "lib/components/Tooltip";
 import { UploadCard } from "lib/components/upload/UploadCard";
 import {
   type DecodeModuleQueryResponse,
@@ -26,6 +27,7 @@ interface UploadModuleCardProps {
   ) => void;
   removeFile: () => void;
   removeEntry: () => void;
+  moveEntry: (from: number, to: number) => void;
 }
 
 const ComponentLoader = ({
@@ -48,6 +50,7 @@ export const UploadModuleCard = ({
   setFile,
   removeFile,
   removeEntry,
+  moveEntry,
 }: UploadModuleCardProps) => {
   const [tempFile, setTempFile] = useState<{
     file: Option<File>;
@@ -107,15 +110,44 @@ export const UploadModuleCard = ({
         <Heading as="h6" variant="h6" color="text.dark" fontWeight={600}>
           Module {index + 1}
         </Heading>
-        <IconButton
-          onClick={removeEntry}
-          aria-label="remove"
-          variant="ghost"
-          size="sm"
+        <Flex
+          align="center"
+          gap={1}
           visibility={fields.length > 1 ? "visible" : "hidden"}
         >
-          <CustomIcon name="close" color="gray.600" />
-        </IconButton>
+          <Tooltip label="Move up" variant="primary-light">
+            <IconButton
+              onClick={() => moveEntry(index, index - 1)}
+              aria-label="move-up"
+              variant="ghost"
+              size="sm"
+              disabled={index === 0}
+            >
+              <CustomIcon name="arrow-up" color="gray.600" />
+            </IconButton>
+          </Tooltip>
+          <Tooltip label="Move down" variant="primary-light">
+            <IconButton
+              onClick={() => moveEntry(index, index + 1)}
+              aria-label="move-down"
+              variant="ghost"
+              size="sm"
+              disabled={index === fields.length - 1}
+            >
+              <CustomIcon name="arrow-down" color="gray.600" />
+            </IconButton>
+          </Tooltip>
+          <Tooltip label="Remove item" variant="primary-light">
+            <IconButton
+              onClick={removeEntry}
+              aria-label="remove"
+              variant="ghost"
+              size="sm"
+            >
+              <CustomIcon name="close" color="gray.600" />
+            </IconButton>
+          </Tooltip>
+        </Flex>
       </Flex>
       <Flex direction="column" w="full">
         <ComponentLoader isLoading={isFetching}>
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 12e205dcf..1c8a20f7c 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -71,7 +71,7 @@ export const PublishModule = ({
 
   const { upgradePolicy, modules } = watch();
 
-  const { append, remove, update } = useFieldArray({
+  const { append, remove, update, move } = useFieldArray({
     control,
     name: "modules",
   });
@@ -238,6 +238,7 @@ export const PublishModule = ({
                       update(idx, emptyModule);
                     }}
                     removeEntry={() => remove(idx)}
+                    moveEntry={move}
                   />
                 ))}
               </Flex>
diff --git a/src/lib/styles/theme/components/tooltip.ts b/src/lib/styles/theme/components/tooltip.ts
index 56185d993..09d17ced5 100644
--- a/src/lib/styles/theme/components/tooltip.ts
+++ b/src/lib/styles/theme/components/tooltip.ts
@@ -15,4 +15,11 @@ export const Tooltip: ComponentStyleConfig = {
     bg: "accent.darker",
     [$arrowBg.variable]: "colors.accent.darker",
   },
+  variants: {
+    "primary-light": {
+      color: "gray.900",
+      bg: "primary.light",
+      [$arrowBg.variable]: "colors.primary.light",
+    },
+  },
 };

From 9db731a0c0f588b92188a10110385b510716676f Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 3 Oct 2023 18:15:21 +0700
Subject: [PATCH 132/368] fix: remove address from query key

---
 src/lib/pages/publish-module/components/UploadModuleCard.tsx | 1 -
 src/lib/services/moduleService.ts                            | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 84a5ea119..4d7f0d538 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -63,7 +63,6 @@ export const UploadModuleCard = ({
 
   const { isFetching } = useDecodeModule({
     base64EncodedFile: tempFile.base64,
-    address: address as HumanAddr,
     options: {
       enabled: Boolean(tempFile.base64),
       retry: 0,
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 1a0085085..be444abf3 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -19,7 +19,6 @@ import type {
   Option,
   AbiFormData,
   RpcQueryError,
-  HumanAddr,
   UpgradePolicy,
   HexAddr,
 } from "lib/types";
@@ -164,11 +163,9 @@ export interface DecodeModuleQueryResponse {
 
 export const useDecodeModule = ({
   base64EncodedFile,
-  address,
   options,
 }: {
   base64EncodedFile: string;
-  address: Option<HumanAddr>;
   options?: Omit<UseQueryOptions<DecodeModuleQueryResponse>, "queryKey">;
 }) => {
   const baseEndpoint = useBaseApiRoute("rest");
@@ -194,7 +191,6 @@ export const useDecodeModule = ({
       CELATONE_QUERY_KEYS.MODULE_DECODE,
       baseEndpoint,
       move.enabled,
-      address,
       base64EncodedFile,
     ],
     queryFn,

From c1f64ddd53c48a3591fff1aa91b12714501dcf5d Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 4 Oct 2023 19:41:42 +0700
Subject: [PATCH 133/368] feat: fully functional deploy script page

---
 CHANGELOG.md                                  |   1 +
 src/lib/app-fns/tx/script.tsx                 |  77 +++++++
 src/lib/app-provider/env.ts                   |   1 +
 src/lib/app-provider/tx/script.tsx            |  50 +++++
 src/lib/components/ComponentLoader.tsx        |  10 +
 src/lib/components/abi/AbiForm.tsx            |   9 +-
 src/lib/components/upload/UploadCard.tsx      |  18 +-
 src/lib/layout/navbar/index.tsx               |   3 +-
 .../pages/deploy-script/components/Footer.tsx |  41 ++++
 .../deploy-script/components/ScriptInput.tsx  |  50 +++++
 .../components/UploadScriptCard.tsx           | 112 ++++++++++
 .../pages/deploy-script/components/index.ts   |   3 +
 src/lib/pages/deploy-script/index.tsx         | 211 +++++++++++++++++-
 .../components/UploadModuleCard.tsx           |  30 ++-
 src/lib/services/module.ts                    |  12 +-
 src/lib/services/moduleService.ts             |  36 ++-
 src/lib/utils/abi.ts                          |   9 +-
 src/lib/utils/tx/composeMsg.ts                |  18 +-
 18 files changed, 644 insertions(+), 47 deletions(-)
 create mode 100644 src/lib/app-fns/tx/script.tsx
 create mode 100644 src/lib/app-provider/tx/script.tsx
 create mode 100644 src/lib/components/ComponentLoader.tsx
 create mode 100644 src/lib/pages/deploy-script/components/Footer.tsx
 create mode 100644 src/lib/pages/deploy-script/components/ScriptInput.tsx
 create mode 100644 src/lib/pages/deploy-script/components/UploadScriptCard.tsx
 create mode 100644 src/lib/pages/deploy-script/components/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8872fbaa..947942ac3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#556](https://github.com/alleslabs/celatone-frontend/pull/556) Fully functional deploy script page
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Wireup publish module tx
 - [#544](https://github.com/alleslabs/celatone-frontend/pull/544) Show module source code if available
 - [#534](https://github.com/alleslabs/celatone-frontend/pull/534) Wire up initia execute function
diff --git a/src/lib/app-fns/tx/script.tsx b/src/lib/app-fns/tx/script.tsx
new file mode 100644
index 000000000..666ea1a7c
--- /dev/null
+++ b/src/lib/app-fns/tx/script.tsx
@@ -0,0 +1,77 @@
+import type { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { StdFee } from "@cosmjs/stargate";
+import { pipe } from "@rx-stream/pipe";
+import type { Observable } from "rxjs";
+
+import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import type { HumanAddr, TxResultRendering } from "lib/types";
+import { TxStreamPhase } from "lib/types";
+import { formatUFee } from "lib/utils";
+
+import { postTx, sendingTx } from "./common";
+
+interface DeployScriptTxParams {
+  address: HumanAddr;
+  client: SigningCosmWasmClient;
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+  catchTxError: CatchTxError;
+  fee: StdFee;
+  messages: EncodeObject[];
+}
+
+export const deployScriptTx = ({
+  address,
+  client,
+  catchTxError,
+  onTxSucceed,
+  onTxFailed,
+  fee,
+  messages,
+}: DeployScriptTxParams): Observable<TxResultRendering> => {
+  return pipe(
+    sendingTx(fee),
+    postTx({
+      postFn: () => client.signAndBroadcast(address, messages, fee),
+    }),
+    ({ value: txInfo }) => {
+      const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]
+        .value;
+      onTxSucceed?.();
+      return {
+        value: null,
+        phase: TxStreamPhase.SUCCEED,
+        receipts: [
+          {
+            title: "Tx Hash",
+            value: txInfo.transactionHash,
+            html: (
+              <ExplorerLink
+                type="tx_hash"
+                value={txInfo.transactionHash}
+                openNewTab
+              />
+            ),
+          },
+          {
+            title: "Tx Fee",
+            value: txFee ? formatUFee(txFee) : "N/A",
+          },
+        ],
+        receiptInfo: {
+          header: "Script Deployed!",
+          headerIcon: (
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize={5}
+            />
+          ),
+        },
+      } as TxResultRendering;
+    }
+  )().pipe(catchTxError(onTxFailed));
+};
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index cbd9fe8fe..a23916cd1 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -97,4 +97,5 @@ export enum CELATONE_QUERY_KEYS {
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
   FUNCTION_VIEW = "CELATONE_QUERY_FUNCTION_VIEW",
   MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
+  SCRIPT_DECODE = "CELATONE_QUERY_SCRIPT_DECODE",
 }
diff --git a/src/lib/app-provider/tx/script.tsx b/src/lib/app-provider/tx/script.tsx
new file mode 100644
index 000000000..d750a71be
--- /dev/null
+++ b/src/lib/app-provider/tx/script.tsx
@@ -0,0 +1,50 @@
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { StdFee } from "@cosmjs/stargate";
+import { useCallback } from "react";
+
+import { useCurrentChain } from "../hooks";
+import { useTrack } from "lib/amplitude";
+import { deployScriptTx } from "lib/app-fns/tx/script";
+import type { HumanAddr } from "lib/types";
+
+import { useCatchTxError } from "./catchTxError";
+
+export interface DeployScriptStreamParams {
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+  estimatedFee?: StdFee;
+  messages: EncodeObject[];
+}
+
+export const useDeployScriptTx = () => {
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
+  const { trackTxSucceed } = useTrack();
+  const catchTxError = useCatchTxError();
+
+  return useCallback(
+    async ({
+      onTxSucceed,
+      onTxFailed,
+      estimatedFee,
+      messages,
+    }: DeployScriptStreamParams) => {
+      const client = await getSigningCosmWasmClient();
+      if (!address || !client)
+        throw new Error("Please check your wallet connection.");
+      if (!estimatedFee) return null;
+      return deployScriptTx({
+        address: address as HumanAddr,
+        client,
+        onTxSucceed: () => {
+          trackTxSucceed();
+          onTxSucceed?.();
+        },
+        onTxFailed,
+        catchTxError,
+        fee: estimatedFee,
+        messages,
+      });
+    },
+    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+  );
+};
diff --git a/src/lib/components/ComponentLoader.tsx b/src/lib/components/ComponentLoader.tsx
new file mode 100644
index 000000000..abe08dc3c
--- /dev/null
+++ b/src/lib/components/ComponentLoader.tsx
@@ -0,0 +1,10 @@
+import { Spinner } from "@chakra-ui/react";
+import type { PropsWithChildren } from "react";
+
+export const ComponentLoader = ({
+  isLoading,
+  children,
+}: PropsWithChildren<{ isLoading: boolean }>) => {
+  if (isLoading) return <Spinner size="lg" mx="auto" />;
+  return <>{children}</>;
+};
diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
index cce57b23e..430d1e204 100644
--- a/src/lib/components/abi/AbiForm.tsx
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -1,4 +1,5 @@
 import { Flex } from "@chakra-ui/react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import type { AbiFormData, ExposedFunction } from "lib/types";
@@ -19,14 +20,18 @@ export const AbiForm = ({
   propsOnChange,
   propsOnErrors,
 }: AbiFormProps) => {
-  const { setValue, watch, getValues } = useForm<AbiFormData>({
+  const { setValue, watch, getValues, reset } = useForm<AbiFormData>({
     defaultValues: initialData,
     mode: "all",
   });
   const { typeArgs, args } = watch();
 
+  useEffect(() => {
+    reset(initialData);
+  }, [initialData, reset]);
+
   return (
-    <Flex direction="column" gap={4}>
+    <Flex direction="column" gap={4} w="full">
       {Object.keys(typeArgs).length > 0 && (
         <TypesForm
           genericTypeParams={fn.generic_type_params}
diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx
index 1d59c26bb..684c2be97 100644
--- a/src/lib/components/upload/UploadCard.tsx
+++ b/src/lib/components/upload/UploadCard.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Button, Flex, Text } from "@chakra-ui/react";
 import big from "big.js";
 
 import { CustomIcon, UploadIcon } from "lib/components/icon";
@@ -22,14 +22,14 @@ const getTheme = (theme: CardTheme) => {
       return {
         bgColor: "gray.800",
         border: "1px solid var(--chakra-colors-gray-700)",
-        iconColor: "gray.600",
+        buttonVariant: "outline-gray",
       };
     case "primary":
     default:
       return {
         bgColor: "gray.900",
         border: "none",
-        iconColor: "text.dark",
+        buttonVariant: "outline-primary",
       };
   }
 };
@@ -80,12 +80,14 @@ export const UploadCard = ({
           </Flex>
         </Flex>
         <Flex align="center" gap={4}>
-          <CustomIcon
-            name="delete"
-            color={themeConfig.iconColor}
+          <Button
+            leftIcon={<CustomIcon name="swap" boxSize={3} />}
+            size="sm"
+            variant={themeConfig.buttonVariant}
             onClick={deleteFile}
-            cursor="pointer"
-          />
+          >
+            Change file
+          </Button>
           {status === "error" && (
             <CustomIcon
               name="alert-triangle-solid"
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index a59649b38..424420acf 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -82,10 +82,9 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
               category: "Quick Actions",
               slug: "quick-actions",
               submenu: [
-                // TODO change path to /account/0x1
                 {
                   name: "0x1 Page",
-                  slug: "/deploy",
+                  slug: "/accounts/0x1",
                   icon: "home" as IconKeys,
                 },
                 {
diff --git a/src/lib/pages/deploy-script/components/Footer.tsx b/src/lib/pages/deploy-script/components/Footer.tsx
new file mode 100644
index 000000000..ac6635659
--- /dev/null
+++ b/src/lib/pages/deploy-script/components/Footer.tsx
@@ -0,0 +1,41 @@
+import { Button, Flex, Spinner } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+interface FooterProps {
+  disabled: boolean;
+  isLoading: boolean;
+  executeScript: () => void;
+}
+
+export const Footer = ({
+  isLoading = false,
+  disabled,
+  executeScript,
+}: FooterProps) => {
+  const router = useRouter();
+  return (
+    <Flex
+      w="full"
+      bg="gray.900"
+      h="70px"
+      bottom={0}
+      position="sticky"
+      zIndex={2}
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Flex justify="space-between" w="540px">
+        <Button variant="outline-primary" onClick={router.back}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          isDisabled={isLoading || disabled}
+          onClick={executeScript}
+        >
+          {isLoading ? <Spinner size="md" variant="light" /> : "Execute Script"}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/deploy-script/components/ScriptInput.tsx b/src/lib/pages/deploy-script/components/ScriptInput.tsx
new file mode 100644
index 000000000..c93d7e37e
--- /dev/null
+++ b/src/lib/pages/deploy-script/components/ScriptInput.tsx
@@ -0,0 +1,50 @@
+import { Flex, chakra } from "@chakra-ui/react";
+
+import { AbiForm } from "lib/components/abi";
+import type { AbiFormData, ExposedFunction, Option } from "lib/types";
+
+const MessageContainer = chakra(Flex, {
+  baseStyle: {
+    w: "full",
+    bg: "gray.900",
+    p: "24px 8px",
+    borderRadius: "8px",
+    fontSize: "14px",
+    color: "gray.400",
+    justifyContent: "center",
+  },
+});
+
+interface ScriptInputProps {
+  fn: Option<ExposedFunction>;
+  initialData: AbiFormData;
+  propsOnChange?: (data: AbiFormData) => void;
+  propsOnErrors?: (errors: [string, string][]) => void;
+}
+
+export const ScriptInput = ({
+  fn,
+  initialData,
+  propsOnChange,
+  propsOnErrors,
+}: ScriptInputProps) => {
+  if (!fn)
+    return (
+      <MessageContainer>
+        Your script input will display here after uploading .mv file.
+      </MessageContainer>
+    );
+
+  return fn.generic_type_params.length || fn.params.length ? (
+    <AbiForm
+      fn={fn}
+      initialData={initialData}
+      propsOnChange={propsOnChange}
+      propsOnErrors={propsOnErrors}
+    />
+  ) : (
+    <MessageContainer>
+      Your uploaded script file does not require any input.
+    </MessageContainer>
+  );
+};
diff --git a/src/lib/pages/deploy-script/components/UploadScriptCard.tsx b/src/lib/pages/deploy-script/components/UploadScriptCard.tsx
new file mode 100644
index 000000000..5b23c3bea
--- /dev/null
+++ b/src/lib/pages/deploy-script/components/UploadScriptCard.tsx
@@ -0,0 +1,112 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { useCallback, useState } from "react";
+
+import type { FileState } from "..";
+import { ComponentLoader } from "lib/components/ComponentLoader";
+import { DropZone } from "lib/components/dropzone";
+import { UploadCard } from "lib/components/upload/UploadCard";
+import { useDecodeScript } from "lib/services/moduleService";
+import type { ExposedFunction, Option } from "lib/types";
+
+const DEFAULT_TEMP_FILE = {
+  file: undefined,
+  base64: "",
+};
+
+interface UploadScriptCardProps {
+  fileState: FileState;
+  removeFile: () => void;
+  setFile: (
+    file: Option<File>,
+    base64File: string,
+    decodeRes: Option<ExposedFunction>,
+    decodeError: string
+  ) => void;
+}
+
+export const UploadScriptCard = ({
+  fileState: { file, decodeRes, decodeError },
+  removeFile,
+  setFile,
+}: UploadScriptCardProps) => {
+  const [tempFile, setTempFile] = useState<{
+    file: Option<File>;
+    base64: string;
+  }>(DEFAULT_TEMP_FILE);
+
+  const { isFetching } = useDecodeScript({
+    base64EncodedFile: tempFile.base64,
+    options: {
+      enabled: Boolean(tempFile.base64),
+      retry: 0,
+      refetchOnWindowFocus: false,
+      onSuccess: (data) => {
+        setFile(tempFile.file, tempFile.base64, data, "");
+        setTempFile(DEFAULT_TEMP_FILE);
+      },
+      onError: () => {
+        setFile(
+          tempFile.file,
+          tempFile.base64,
+          undefined,
+          "Failed to decode .mv script file"
+        );
+        setTempFile(DEFAULT_TEMP_FILE);
+      },
+    },
+  });
+
+  const handleFileDrop = useCallback(async (target: File) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const dataUrl = reader.result as string;
+      // strip "data:application/octet-stream;base64,oRzrCw..."
+      const base64String = dataUrl.replace(/^data:.*;base64,/, "");
+      setTempFile({ file: target, base64: base64String });
+    };
+    reader.readAsDataURL(target);
+  }, []);
+
+  return (
+    <Flex
+      bg="gray.900"
+      border="1px solid"
+      borderColor="gray.700"
+      borderRadius={8}
+      p={4}
+      gap={4}
+      flexDirection="column"
+      w="full"
+    >
+      <Flex direction="column">
+        <ComponentLoader isLoading={isFetching}>
+          {file ? (
+            <UploadCard
+              file={file}
+              deleteFile={removeFile}
+              theme="secondary"
+              status={decodeError ? "error" : "init"}
+              statusText={decodeError}
+            />
+          ) : (
+            <DropZone
+              setFile={handleFileDrop}
+              fileType="move"
+              bgColor="background.main"
+              _hover={undefined}
+            />
+          )}
+        </ComponentLoader>
+      </Flex>
+      <Flex justifyContent="space-between" w="full">
+        <Text variant="body2" color="text.dark" fontWeight={600}>
+          Function name
+        </Text>
+        <Text variant="body2" color="text.dark">
+          {decodeRes?.name ?? "-"}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/deploy-script/components/index.ts b/src/lib/pages/deploy-script/components/index.ts
new file mode 100644
index 000000000..a825d06ee
--- /dev/null
+++ b/src/lib/pages/deploy-script/components/index.ts
@@ -0,0 +1,3 @@
+export * from "./Footer";
+export * from "./ScriptInput";
+export * from "./UploadScriptCard";
diff --git a/src/lib/pages/deploy-script/index.tsx b/src/lib/pages/deploy-script/index.tsx
index 09fb47f3a..746917818 100644
--- a/src/lib/pages/deploy-script/index.tsx
+++ b/src/lib/pages/deploy-script/index.tsx
@@ -1,14 +1,207 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
+import type { StdFee } from "@cosmjs/stargate";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import {
+  useCurrentChain,
+  useFabricateFee,
+  useSimulateFeeQuery,
+} from "lib/app-provider";
+import { useDeployScriptTx } from "lib/app-provider/tx/script";
+import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
+import { ErrorMessageRender } from "lib/components/ErrorMessageRender";
+import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
+import WasmPageContainer from "lib/components/WasmPageContainer";
+import { useTxBroadcast } from "lib/providers/tx-broadcast";
+import type {
+  ExposedFunction,
+  HumanAddr,
+  Option,
+  AbiFormData,
+} from "lib/types";
+import { composeScriptMsg, getAbiInitialData } from "lib/utils";
+
+import { Footer } from "./components/Footer";
+import { ScriptInput } from "./components/ScriptInput";
+import { UploadScriptCard } from "./components/UploadScriptCard";
+
+export interface FileState {
+  file: Option<File>;
+  base64File: string;
+  decodeRes: Option<ExposedFunction>;
+  decodeError: string;
+}
+
+const DEFAULT_FILE_STATE: FileState = {
+  file: undefined,
+  base64File: "",
+  decodeRes: undefined,
+  decodeError: "",
+};
 
 export const DeployScript = () => {
+  const { address } = useCurrentChain();
+  const fabricateFee = useFabricateFee();
+  const deployScriptTx = useDeployScriptTx();
+  const { broadcast } = useTxBroadcast();
+
+  // File State
+  const [fileState, setFileState] = useState<FileState>(DEFAULT_FILE_STATE);
+  // TX State
+  const [estimatedFee, setEstimatedFee] = useState<StdFee>();
+  const [simulateError, setSimulateError] = useState("");
+  const [processing, setProcessing] = useState(false);
+  // Form State
+  const [inputData, setInputData] = useState<AbiFormData>({
+    typeArgs: {},
+    args: {},
+  });
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+
+  const enableDeploy = useMemo(
+    () =>
+      Boolean(
+        address &&
+          fileState.base64File &&
+          fileState.decodeRes &&
+          !abiErrors.length &&
+          Object.values(inputData.typeArgs).every((val) => val)
+      ),
+    [
+      address,
+      fileState.base64File,
+      fileState.decodeRes,
+      abiErrors,
+      inputData.typeArgs,
+    ]
+  );
+
+  const resetState = useCallback(() => {
+    setFileState(DEFAULT_FILE_STATE);
+    setEstimatedFee(undefined);
+    setSimulateError("");
+    setInputData({ typeArgs: {}, args: {} });
+    setAbiErrors([]);
+  }, []);
+
+  const { isFetching: isSimulating } = useSimulateFeeQuery({
+    enabled: enableDeploy,
+    messages: composeScriptMsg(
+      address as HumanAddr,
+      fileState.base64File,
+      fileState.decodeRes,
+      inputData
+    ),
+    onSuccess: (gasRes) => {
+      if (gasRes) {
+        setEstimatedFee(fabricateFee(gasRes));
+        setSimulateError("");
+      } else setEstimatedFee(undefined);
+    },
+    onError: (e) => {
+      setSimulateError(e.message);
+      setEstimatedFee(undefined);
+    },
+  });
+
+  const proceed = useCallback(async () => {
+    const stream = await deployScriptTx({
+      onTxSucceed: () => setProcessing(false),
+      onTxFailed: () => setProcessing(false),
+      estimatedFee,
+      messages: composeScriptMsg(
+        address as HumanAddr,
+        fileState.base64File,
+        fileState.decodeRes,
+        inputData
+      ),
+    });
+    if (stream) {
+      setProcessing(true);
+      broadcast(stream);
+    }
+  }, [
+    address,
+    broadcast,
+    deployScriptTx,
+    estimatedFee,
+    fileState.base64File,
+    fileState.decodeRes,
+    inputData,
+  ]);
+
+  useEffect(() => {
+    const script = fileState.decodeRes;
+    if (script) {
+      setInputData({
+        typeArgs: getAbiInitialData(script.generic_type_params.length),
+        args: getAbiInitialData(script.params.length),
+      });
+    }
+  }, [fileState.decodeRes]);
+
   return (
-    <Flex>
-      <Text>
-        DeployScript: Lorem ipsum dolor sit amet consectetur adipisicing elit.
-        Aliquam voluptas hic aperiam ad sint unde sapiente cupiditate! Quo et
-        cupiditate iure, sequi deserunt tempora corrupti eum. Error facere
-        placeat repellendus?
-      </Text>
-    </Flex>
+    <>
+      <WasmPageContainer>
+        <Heading as="h4" variant="h4">
+          Script
+        </Heading>
+        <Text fontWeight={600} variant="body2" color="text.dark" mt={2} mb={12}>
+          Upload .mv files to deploy one-time use Script which execute messages.
+        </Text>
+        <ConnectWalletAlert
+          subtitle="You need to connect your wallet to perform this action"
+          mb={12}
+        />
+        <Heading as="h6" variant="h6" mb={6} alignSelf="start">
+          Upload .mv file
+        </Heading>
+        <UploadScriptCard
+          fileState={fileState}
+          removeFile={resetState}
+          setFile={(
+            file: Option<File>,
+            base64File: string,
+            decodeRes: Option<ExposedFunction>,
+            decodeError: string
+          ) => setFileState({ file, base64File, decodeRes, decodeError })}
+        />
+        <Heading as="h6" variant="h6" mt={8} mb={4} alignSelf="start">
+          Script input
+        </Heading>
+        <ScriptInput
+          fn={fileState.decodeRes}
+          initialData={inputData}
+          propsOnChange={setInputData}
+          propsOnErrors={setAbiErrors}
+        />
+        <Flex
+          mt={8}
+          fontSize="14px"
+          color="text.dark"
+          alignSelf="flex-start"
+          alignItems="center"
+          gap={1}
+        >
+          <p>Transaction Fee:</p>
+          <EstimatedFeeRender
+            estimatedFee={estimatedFee}
+            loading={isSimulating}
+          />
+        </Flex>
+        {simulateError && (
+          <ErrorMessageRender
+            error={simulateError}
+            mt={2}
+            alignSelf="flex-start"
+          />
+        )}
+      </WasmPageContainer>
+      <Footer
+        isLoading={processing}
+        disabled={!enableDeploy || Boolean(simulateError) || isSimulating}
+        executeScript={proceed}
+      />
+    </>
   );
 };
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 68614927a..ec5d7f24c 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -1,5 +1,5 @@
-import { Flex, Heading, IconButton, Spinner, Text } from "@chakra-ui/react";
-import { type PropsWithChildren, useCallback, useState } from "react";
+import { Flex, Heading, IconButton, Text } from "@chakra-ui/react";
+import { useCallback, useState } from "react";
 
 import type {
   FileArrayFields,
@@ -8,6 +8,7 @@ import type {
 } from "../formConstants";
 import { statusResolver } from "../utils";
 import { useCurrentChain } from "lib/app-provider";
+import { ComponentLoader } from "lib/components/ComponentLoader";
 import { DropZone } from "lib/components/dropzone";
 import { CustomIcon } from "lib/components/icon";
 import { UploadCard } from "lib/components/upload/UploadCard";
@@ -17,6 +18,11 @@ import {
 } from "lib/services/moduleService";
 import type { HumanAddr, UpgradePolicy, Option } from "lib/types";
 
+const DEFAULT_TEMP_FILE = {
+  file: undefined,
+  base64: "",
+};
+
 interface UploadModuleCardProps {
   index: number;
   fileState: FileField;
@@ -32,14 +38,6 @@ interface UploadModuleCardProps {
   removeEntry: () => void;
 }
 
-const ComponentLoader = ({
-  isLoading,
-  children,
-}: PropsWithChildren<{ isLoading: boolean }>) => {
-  if (isLoading) return <Spinner size="lg" mx="auto" />;
-  return <>{children}</>;
-};
-
 export const UploadModuleCard = ({
   index,
   fileState: {
@@ -56,10 +54,7 @@ export const UploadModuleCard = ({
   const [tempFile, setTempFile] = useState<{
     file: Option<File>;
     base64: string;
-  }>({
-    file: undefined,
-    base64: "",
-  });
+  }>(DEFAULT_TEMP_FILE);
   const { address } = useCurrentChain();
 
   const { isFetching } = useDecodeModule({
@@ -69,13 +64,16 @@ export const UploadModuleCard = ({
       enabled: Boolean(tempFile.base64),
       retry: 0,
       refetchOnWindowFocus: false,
-      onSuccess: (data) =>
+      onSuccess: (data) => {
         setFile(
           tempFile.file,
           tempFile.base64,
           data,
           statusResolver({ data, fields, index, policy })
-        ),
+        );
+        setTempFile(DEFAULT_TEMP_FILE);
+      },
+      onError: () => setTempFile(DEFAULT_TEMP_FILE),
     },
   });
 
diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index a88a83870..9cac84384 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -115,4 +115,14 @@ export const decodeModule = async (
     .post<DecodeModuleReturn>(decodeAPI, {
       code_bytes: moduleEncode,
     })
-    .then(({ data }) => parseJsonABI(libDecode(data.abi)));
+    .then(({ data }) => parseJsonABI<ResponseABI>(libDecode(data.abi)));
+
+export const decodeScript = async (
+  decodeAPI: string,
+  scriptEncode: string
+): Promise<ExposedFunction> =>
+  axios
+    .post<DecodeModuleReturn>(decodeAPI, {
+      code_bytes: scriptEncode,
+    })
+    .then(({ data }) => parseJsonABI<ExposedFunction>(libDecode(data.abi)));
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 1a6f7487c..a78c7230f 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -9,6 +9,7 @@ import type { AxiosError } from "axios";
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
+  useCelatoneApp,
   useMoveConfig,
 } from "lib/app-provider";
 import type {
@@ -33,6 +34,7 @@ import {
 
 import {
   decodeModule,
+  decodeScript,
   getAccountModule,
   getAccountModules,
   getFunctionView,
@@ -51,7 +53,7 @@ const indexModuleResponse = (
   module: InternalModule,
   functionName?: string
 ): IndexedModule => {
-  const parsedAbi = parseJsonABI(module.abi);
+  const parsedAbi = parseJsonABI<ResponseABI>(module.abi);
   const { view, execute } = splitViewExecuteFunctions(
     parsedAbi.exposed_functions
   );
@@ -213,3 +215,35 @@ export const useDecodeModule = ({
     options
   );
 };
+
+export const useDecodeScript = ({
+  base64EncodedFile,
+  options,
+}: {
+  base64EncodedFile: string;
+  options?: Omit<UseQueryOptions<ExposedFunction>, "queryKey">;
+}): UseQueryResult<ExposedFunction> => {
+  const {
+    chainConfig: { lcd },
+  } = useCelatoneApp();
+
+  const queryFn = async (): Promise<ExposedFunction> => {
+    const fn = await decodeScript(
+      `${lcd}/initia/move/v1/script/abi`,
+      base64EncodedFile
+    );
+    return {
+      ...fn,
+      params:
+        fn.params[0] === "signer" || fn.params[0] === "&signer"
+          ? fn.params.slice(1)
+          : fn.params,
+    };
+  };
+
+  return useQuery(
+    [CELATONE_QUERY_KEYS.SCRIPT_DECODE, lcd, base64EncodedFile],
+    queryFn,
+    options
+  );
+};
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 02af6729b..fe0e48c08 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -1,16 +1,11 @@
 import { BCS } from "@initia/initia.js";
 
-import type {
-  AbiFormData,
-  ExposedFunction,
-  Nullable,
-  ResponseABI,
-} from "lib/types";
+import type { AbiFormData, ExposedFunction, Nullable } from "lib/types";
 
 export const checkAvailability = (fn: ExposedFunction) =>
   fn.is_view || fn.is_entry;
 
-export const parseJsonABI = (jsonString: string): ResponseABI => {
+export const parseJsonABI = <T>(jsonString: string): T => {
   try {
     return JSON.parse(jsonString);
   } catch {
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index 6b3a8fbf8..5d5a3b04f 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -1,10 +1,11 @@
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import type { Coin } from "@cosmjs/stargate";
-import { MsgPublish } from "@initia/initia.js";
+import { MsgPublish, MsgScript } from "@initia/initia.js";
 import type { Msg } from "@initia/initia.js";
 import { ParameterChangeProposal } from "cosmjs-types/cosmos/params/v1beta1/params";
 import { StoreCodeProposal } from "cosmjs-types/cosmwasm/wasm/v1/proposal";
 
+import { serializeAbiData } from "../abi";
 import { exponentify } from "../formatter";
 import { typeUrlDict } from "lib/data";
 import type {
@@ -15,6 +16,8 @@ import type {
   Token,
   HumanAddr,
   Option,
+  ExposedFunction,
+  AbiFormData,
 } from "lib/types";
 import { UpgradePolicy, MsgType } from "lib/types";
 
@@ -179,3 +182,16 @@ export const composePublishMsg = (
       Object.keys(UpgradePolicy).findIndex((policy) => policy === upgradePolicy)
     ),
   ]);
+
+export const composeScriptMsg = (
+  address: HumanAddr,
+  scriptBytes: string,
+  fn: Option<ExposedFunction>,
+  data: AbiFormData
+) => {
+  if (!fn) return [];
+  const { typeArgs, args } = serializeAbiData(fn, data);
+  return toEncodeObject([
+    new MsgScript(address as HumanAddr, scriptBytes, typeArgs, args),
+  ]);
+};

From f8ea4447c77283debb02de91d2b780f97627f415 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 9 Oct 2023 17:27:43 +0700
Subject: [PATCH 134/368] fix(components): fix policy modal and wireup see
 module btn

---
 CHANGELOG.md                                  |  1 +
 src/lib/pages/interact/index.tsx              | 13 +++++++---
 .../components/ModulePublishCard.tsx          | 12 ++++++---
 .../components/leaflet/index.tsx              | 25 +++++++++++--------
 yarn.lock                                     |  4 +--
 5 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8872fbaa..d8834fd0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -118,6 +118,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#557](https://github.com/alleslabs/celatone-frontend/pull/557) Fix see module ux writing and policy modal
 - [#547](https://github.com/alleslabs/celatone-frontend/pull/547) Fix form null and sort modules when submit an address
 - [#543](https://github.com/alleslabs/celatone-frontend/pull/543) Fix Initia testnet chain config
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
diff --git a/src/lib/pages/interact/index.tsx b/src/lib/pages/interact/index.tsx
index 66b41678e..b2248c327 100644
--- a/src/lib/pages/interact/index.tsx
+++ b/src/lib/pages/interact/index.tsx
@@ -23,7 +23,7 @@ import type {
   MoveAccountAddr,
   Option,
 } from "lib/types";
-import { getFirstQueryParam } from "lib/utils";
+import { getFirstQueryParam, openNewTab } from "lib/utils";
 
 import {
   ModuleSelectDrawerTrigger,
@@ -179,10 +179,15 @@ export const Interact = () => {
                   rightIcon={
                     <CustomIcon name="launch" boxSize={3} color="text.dark" />
                   }
-                  // TODO: Link to module section in account page
-                  onClick={() => {}}
+                  onClick={() => {
+                    openNewTab(
+                      `/modules/${module.address.toString()}/${
+                        module.moduleName
+                      }`
+                    );
+                  }}
                 >
-                  View Module
+                  See Module
                 </Button>
               </Flex>
             </>
diff --git a/src/lib/pages/publish-module/components/ModulePublishCard.tsx b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
index 05abdf3fe..f035a9161 100644
--- a/src/lib/pages/publish-module/components/ModulePublishCard.tsx
+++ b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
@@ -5,6 +5,7 @@ import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { CountBadge } from "lib/components/module";
+import { openNewTab } from "lib/utils";
 
 interface ModulePublishCardProps {
   module: FileField;
@@ -77,12 +78,15 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
       <Grid templateColumns="1fr 1fr 1fr" columnGap={4}>
         {/* TODO: add navigation */}
         <Button
-          rightIcon={
-            <CustomIcon name="chevron-right" boxSize={3} color="text.dark" />
-          }
+          rightIcon={<CustomIcon name="launch" boxSize={3} color="text.main" />}
           variant="outline-white"
+          onClick={() => {
+            openNewTab(
+              `/modules/${decodeRes?.abi.address}/${decodeRes?.abi.name}`
+            );
+          }}
         >
-          See Details
+          See Module
         </Button>
         <Button
           leftIcon={<CustomIcon name="query" boxSize={3} color="text.main" />}
diff --git a/src/lib/pages/publish-module/components/leaflet/index.tsx b/src/lib/pages/publish-module/components/leaflet/index.tsx
index e7a09a307..ea2191718 100644
--- a/src/lib/pages/publish-module/components/leaflet/index.tsx
+++ b/src/lib/pages/publish-module/components/leaflet/index.tsx
@@ -84,7 +84,7 @@ const centerRowMapper = (row: string[]) =>
   ));
 
 const StructContent = () => (
-  <GridTemplate mt={1}>
+  <GridTemplate mt="2px">
     <TitleContainer rowSpan={2}>fields</TitleContainer>
     <ContentContainer
       rowSpan={2}
@@ -95,7 +95,7 @@ const StructContent = () => (
 );
 
 const ExposedFnsContent = () => (
-  <Flex direction="column" rowGap={1} mt={1}>
+  <Flex direction="column" rowGap="2px" mt="2px">
     <GridTemplate>
       <TitleContainer rowSpan={3}>visibility</TitleContainer>
       {metadata.visibility.map(centerRowMapper)}
@@ -109,7 +109,7 @@ const ExposedFnsContent = () => (
       <ContentContainer colSpan={3}>{metadata.parameter}</ContentContainer>
     </GridTemplate>
     <GridTemplate>
-      <TitleContainer rowSpan={3}>generic_type_{"\n"}params</TitleContainer>
+      <TitleContainer>generic_type_{"\n"}params</TitleContainer>
       <GridItem
         colSpan={3}
         display="grid"
@@ -157,17 +157,20 @@ export const Leaflet = () => {
       <Modal isOpen={isOpen} onClose={onClose} size="6xl">
         <ModalOverlay />
         <ModalContent
-          maxH="90%"
+          maxH="80%"
           overflowY="scroll"
           sx={{ "& > *": { bg: "gray.800" } }}
         >
-          <ModalHeader position="sticky" top={0}>
-            <Flex align="center" gap={2}>
-              <CustomIcon name="info-circle" boxSize={4} color="gray.600" />
-              <Heading variant="h5" as="h5">
-                Compatible Upgrade Policy
-              </Heading>
-            </Flex>
+          <ModalHeader position="sticky" top={0} gap={2}>
+            <CustomIcon
+              name="info-circle"
+              boxSize={4}
+              color="gray.600"
+              alignSelf="center"
+            />
+            <Heading variant="h5" as="h5">
+              Compatible Upgrade Policy
+            </Heading>
             <ModalCloseButton color="gray.600" />
           </ModalHeader>
           <ModalBody>
diff --git a/yarn.lock b/yarn.lock
index c7c9a52ce..1c2e4b7a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3431,7 +3431,7 @@
   dependencies:
     browser-headers "^0.4.1"
 
-"@initia/initia.js@^0.1.8":
+"@initia/initia.js@0.1.8":
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.8.tgz#f1d1d12a37788054061b2e5f9db55c33dcc5f67c"
   integrity sha512-Q7GhXHgIZ3th6k2vou+e+CO4C5JA/JeA6w3oP/kb2cxbqOAOM1+ybN/8oMtHNApxh/gpmCWUXi7axHV5v/91UA==
@@ -3453,7 +3453,7 @@
     tmp "^0.2.1"
     ws "^7.5.9"
 
-"@initia/initia.proto@^0.1.11":
+"@initia/initia.proto@0.1.11", "@initia/initia.proto@^0.1.11":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.11.tgz#39016bbb4d15f06aaec17e56d6f431ddadc600ce"
   integrity sha512-G9HRTy5xfza6hTjYLuLgcmJWjSDsnLXnc2HvWceDcaSlHp212rMH07+gpazwY0L6aCm3uWyqLh4Yig60L3AaRA==

From 9e2baed60434416f5ce7382f52463a9d4f0bd711 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 9 Oct 2023 18:19:08 +0700
Subject: [PATCH 135/368] fix: as comments

---
 .../components/contract-state/StateLoader.tsx |  4 ++-
 .../components/contract-state/index.tsx       | 17 +++++-------
 src/lib/services/contractState.ts             |  3 ++-
 src/lib/services/contractStateService.ts      | 19 ++++++++++---
 src/lib/utils/base64.test.ts                  | 27 +++++++++++++++++++
 src/lib/utils/base64.ts                       |  2 ++
 src/lib/utils/contractState.ts                |  8 +++---
 7 files changed, 62 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/utils/base64.test.ts

diff --git a/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx b/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
index d551cc9f8..a87dd99ae 100644
--- a/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/StateLoader.tsx
@@ -4,6 +4,7 @@ import plur from "plur";
 import { CustomIcon } from "lib/components/icon";
 
 interface StateLoaderProps {
+  numStatesToLoad: number;
   isLoading: boolean;
   isCompleted: boolean;
   totalData: number;
@@ -11,6 +12,7 @@ interface StateLoaderProps {
   onDownload: () => void;
 }
 export const StateLoader = ({
+  numStatesToLoad,
   isLoading,
   isCompleted,
   totalData,
@@ -31,7 +33,7 @@ export const StateLoader = ({
         <Flex gap={4} alignItems="center">
           <Spinner size="sm" />
           <Text variant="body2" fontWeight={600} color="text.dark">
-            Loading 100 states...
+            Loading {numStatesToLoad} states...
           </Text>
           <Button size="sm" variant="outline-primary" disabled>
             Load More
diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index 1082f4d96..62c0e74e5 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -3,10 +3,9 @@ import { saveAs } from "file-saver";
 import { useMemo, useState } from "react";
 
 import InputWithIcon from "lib/components/InputWithIcon";
-import { ErrorFetching } from "lib/pages/account-details/components/ErrorFetching";
 import { useContractStates } from "lib/services/contractStateService";
 import type { ContractAddr } from "lib/types";
-import { groupByFirstIndex } from "lib/utils";
+import { groupContractStatesByFirstIndex } from "lib/utils";
 
 import { StateList } from "./StateList";
 import { StateLoader } from "./StateLoader";
@@ -23,6 +22,7 @@ interface ContractStatesProps {
 }
 
 export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
+  const numStatesToLoad = 100;
   const {
     data,
     error,
@@ -30,7 +30,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
     hasNextPage,
     isFetching,
     isFetchingNextPage,
-  } = useContractStates(contractAddress);
+  } = useContractStates(contractAddress, numStatesToLoad);
 
   const [selectedNamespace, setSelectedNamespace] = useState("all");
   const [keyword, setKeyword] = useState("");
@@ -49,7 +49,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
       const flattenRaw = data.pages.flatMap((page) => page.rawStates);
       const flatten = data.pages.flatMap((page) => page.states);
 
-      const grouped = groupByFirstIndex(flatten);
+      const grouped = groupContractStatesByFirstIndex(flatten);
 
       const selected = grouped[selectedNamespace] ?? [];
 
@@ -79,12 +79,8 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
     saveAs(blob, "state.json");
   };
 
-  if (error)
-    return (
-      <Flex>
-        <ErrorFetching />
-      </Flex>
-    );
+  // eslint-disable-next-line no-alert
+  if (error) window.alert(error);
 
   return (
     <Flex direction="column" gap={8}>
@@ -93,6 +89,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
           Contract States
         </Heading>
         <StateLoader
+          numStatesToLoad={numStatesToLoad}
           isLoading={isFetching || isFetchingNextPage}
           totalData={totalData}
           isCompleted={!hasNextPage}
diff --git a/src/lib/services/contractState.ts b/src/lib/services/contractState.ts
index 7471a54c4..0297efa39 100644
--- a/src/lib/services/contractState.ts
+++ b/src/lib/services/contractState.ts
@@ -10,10 +10,11 @@ import { parseKey, parseValue } from "lib/utils";
 export const getContractStates = async (
   baseEndpoint: string,
   contractAddress: ContractAddr,
+  numStatesToLoad: number,
   paginationKey: string | null
 ) => {
   const { data } = await axios.get<ResponseContractStates>(
-    `${baseEndpoint}/cosmwasm/wasm/v1/contract/${contractAddress}/state?pagination.limit=100${
+    `${baseEndpoint}/cosmwasm/wasm/v1/contract/${contractAddress}/state?pagination.limit=${numStatesToLoad}${
       paginationKey ? `&pagination.key=${paginationKey}` : ""
     }`
   );
diff --git a/src/lib/services/contractStateService.ts b/src/lib/services/contractStateService.ts
index e455db9aa..9b7acaec4 100644
--- a/src/lib/services/contractStateService.ts
+++ b/src/lib/services/contractStateService.ts
@@ -5,13 +5,26 @@ import type { ContractAddr } from "lib/types";
 
 import { getContractStates } from "./contractState";
 
-export const useContractStates = (contractAddress: ContractAddr) => {
+export const useContractStates = (
+  contractAddress: ContractAddr,
+  numStatesToLoad: number
+) => {
   const baseEndpoint = useBaseApiRoute("rest");
 
   return useInfiniteQuery(
-    [CELATONE_QUERY_KEYS.CONTRACT_STATE, baseEndpoint, contractAddress],
+    [
+      CELATONE_QUERY_KEYS.CONTRACT_STATE,
+      baseEndpoint,
+      contractAddress,
+      numStatesToLoad,
+    ],
     ({ pageParam }) =>
-      getContractStates(baseEndpoint, contractAddress, pageParam),
+      getContractStates(
+        baseEndpoint,
+        contractAddress,
+        numStatesToLoad,
+        pageParam
+      ),
     {
       getNextPageParam: (lastPage) => {
         if (lastPage.nextKey) {
diff --git a/src/lib/utils/base64.test.ts b/src/lib/utils/base64.test.ts
new file mode 100644
index 000000000..6658f2162
--- /dev/null
+++ b/src/lib/utils/base64.test.ts
@@ -0,0 +1,27 @@
+import { encode, decode, decodeToJSON, libEncode, libDecode } from "./base64";
+
+describe("base64 utility functions", () => {
+  const testString = "Hello, world!";
+
+  it("should encode a string to base64", () => {
+    const encoded = encode(testString);
+    expect(encoded).toEqual("SGVsbG8sIHdvcmxkIQ==");
+  });
+
+  it("should decode a base64 string to a string", () => {
+    const decoded = decode("SGVsbG8sIHdvcmxkIQ==");
+    expect(decoded).toEqual(testString);
+  });
+
+  it("should decode a base64 string to a JSON object", () => {
+    const encoded = libEncode(JSON.stringify({ message: testString }));
+    const decoded = decodeToJSON(encoded);
+    expect(decoded).toEqual({ message: testString });
+  });
+
+  it("should use js-base64 library for encoding and decoding", () => {
+    const encoded = libEncode(testString);
+    const decoded = libDecode(encoded);
+    expect(decoded).toEqual(testString);
+  });
+});
diff --git a/src/lib/utils/base64.ts b/src/lib/utils/base64.ts
index ef4d43978..acad13d9e 100644
--- a/src/lib/utils/base64.ts
+++ b/src/lib/utils/base64.ts
@@ -8,3 +8,5 @@ export const decode = (str: string): string =>
 
 export const encode = (str: string): string =>
   Buffer.from(str, "binary").toString("base64");
+
+export const decodeToJSON = (str: string) => JSON.parse(decode(str));
diff --git a/src/lib/utils/contractState.ts b/src/lib/utils/contractState.ts
index b0212c199..182e2a0d1 100644
--- a/src/lib/utils/contractState.ts
+++ b/src/lib/utils/contractState.ts
@@ -1,5 +1,7 @@
 import type { ContractState, DecodedKey } from "lib/types";
 
+import { decodeToJSON } from "./base64";
+
 const nameRegex = /^[a-zA-Z0-9_]+$/;
 
 export const hexToString = (hex: string) =>
@@ -24,7 +26,7 @@ export const parseKey = (key: string): DecodedKey => {
 
       // We've assumed that the length of the key is less than 256
       // This should be the last part of key
-      if (length > 256 || lengthHex === "0000") {
+      if (!(length > 0 && length <= 256)) {
         const valueHex = key.slice(currentIndex);
         const decodedValue = hexToString(valueHex);
         values.push(nameRegex.test(decodedValue) ? decodedValue : valueHex);
@@ -66,13 +68,13 @@ export const parseKey = (key: string): DecodedKey => {
 
 export const parseValue = (value: string) => {
   try {
-    return JSON.parse(Buffer.from(value, "base64").toString());
+    return decodeToJSON(value);
   } catch (error) {
     return value;
   }
 };
 
-export const groupByFirstIndex = (states: ContractState[]) =>
+export const groupContractStatesByFirstIndex = (states: ContractState[]) =>
   states.reduce((acc, state) => {
     // save all states
     acc.all = acc.all?.concat(state) ?? [state];

From 490ef12a6cabc7d587c79afff3954ac7c97fe84f Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 9 Oct 2023 18:24:23 +0700
Subject: [PATCH 136/368] chore: rename fn name

---
 src/lib/services/contractState.ts   |  6 +++---
 src/lib/utils/contractState.test.ts | 20 ++++++++++----------
 src/lib/utils/contractState.ts      |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/lib/services/contractState.ts b/src/lib/services/contractState.ts
index 0297efa39..54ba03467 100644
--- a/src/lib/services/contractState.ts
+++ b/src/lib/services/contractState.ts
@@ -5,7 +5,7 @@ import type {
   ContractState,
   ResponseContractStates,
 } from "lib/types";
-import { parseKey, parseValue } from "lib/utils";
+import { parseStateKey, parseStateValue } from "lib/utils";
 
 export const getContractStates = async (
   baseEndpoint: string,
@@ -21,8 +21,8 @@ export const getContractStates = async (
 
   const parsedStates = data.models.map<ContractState>((model) => ({
     rawKey: model.key,
-    key: parseKey(model.key),
-    value: parseValue(model.value),
+    key: parseStateKey(model.key),
+    value: parseStateValue(model.value),
   }));
 
   return {
diff --git a/src/lib/utils/contractState.test.ts b/src/lib/utils/contractState.test.ts
index 73d2829d0..c7bf14b98 100644
--- a/src/lib/utils/contractState.test.ts
+++ b/src/lib/utils/contractState.test.ts
@@ -1,4 +1,4 @@
-import { hexToString, parseKey, parseValue } from "./contractState";
+import { hexToString, parseStateKey, parseStateValue } from "./contractState";
 
 describe("hexToString", () => {
   it("should convert hex to string", () => {
@@ -6,27 +6,27 @@ describe("hexToString", () => {
   });
 });
 
-describe("parseValue", () => {
+describe("parseStateValue", () => {
   it("should parse base64 encoded JSON", () => {
     const value = "eyJmb28iOiJiYXIifQ=="; // {"foo":"bar"}
-    expect(parseValue(value)).toEqual({ foo: "bar" });
+    expect(parseStateValue(value)).toEqual({ foo: "bar" });
   });
 
   it("should return the original value if it's not JSON", () => {
     const value = "not json";
-    expect(parseValue(value)).toEqual(value);
+    expect(parseStateValue(value)).toEqual(value);
   });
 });
 
-describe("parseKey", () => {
+describe("parseStateKey", () => {
   it("should parse a singleton key", () => {
     const key = "68656c6c6f"; // "hello"
-    expect(parseKey(key)).toEqual({ type: "singleton", value: "hello" });
+    expect(parseStateKey(key)).toEqual({ type: "singleton", value: "hello" });
   });
 
   it("should parse a bucket key with multiple values", () => {
     const key = "000568656c6c6f0005776f726c64666f6f626172";
-    expect(parseKey(key)).toEqual({
+    expect(parseStateKey(key)).toEqual({
       type: "bucket",
       values: ["hello", "world", "foobar"],
     });
@@ -35,7 +35,7 @@ describe("parseKey", () => {
   it("should parse a bucket key with un-decodable value", () => {
     const key =
       "0005766F7465730008000000000000001C6F736D6F313866736563706D713574757135396B33657A6B72726474366779767233306C78637430616564";
-    expect(parseKey(key)).toEqual({
+    expect(parseStateKey(key)).toEqual({
       type: "bucket",
       values: [
         "votes",
@@ -47,7 +47,7 @@ describe("parseKey", () => {
 
   it("should parse a bucket key with hex ending", () => {
     const key = "000970726F706F73616C730000000000000031";
-    expect(parseKey(key)).toEqual({
+    expect(parseStateKey(key)).toEqual({
       type: "bucket",
       values: ["proposals", "0000000000000031"],
     });
@@ -55,6 +55,6 @@ describe("parseKey", () => {
 
   it("should return a singleton key if parsing fails", () => {
     const key = "not hex";
-    expect(parseKey(key)).toEqual({ type: "singleton", value: key });
+    expect(parseStateKey(key)).toEqual({ type: "singleton", value: key });
   });
 });
diff --git a/src/lib/utils/contractState.ts b/src/lib/utils/contractState.ts
index 182e2a0d1..b5dd81796 100644
--- a/src/lib/utils/contractState.ts
+++ b/src/lib/utils/contractState.ts
@@ -7,7 +7,7 @@ const nameRegex = /^[a-zA-Z0-9_]+$/;
 export const hexToString = (hex: string) =>
   Buffer.from(hex, "hex").toString("utf-8");
 
-export const parseKey = (key: string): DecodedKey => {
+export const parseStateKey = (key: string): DecodedKey => {
   try {
     const decodedStr = hexToString(key);
     if (decodedStr === "") throw new Error("Invalid hex string for decoding");
@@ -66,7 +66,7 @@ export const parseKey = (key: string): DecodedKey => {
   };
 };
 
-export const parseValue = (value: string) => {
+export const parseStateValue = (value: string) => {
   try {
     return decodeToJSON(value);
   } catch (error) {

From fc12762cec30bc101ac07176aba36ecad3f999f8 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 9 Oct 2023 18:42:09 +0700
Subject: [PATCH 137/368] feat: wireup module transaction history table

---
 CHANGELOG.md                                  |    1 +
 src/lib/app-provider/env.ts                   |    3 +
 src/lib/components/Breadcrumb.tsx             |    2 +-
 src/lib/gql/gql.ts                            |   15 +
 src/lib/gql/graphql.ts                        | 4304 +++++++++++++++--
 .../module-details/components/ModuleInfo.tsx  |  153 +-
 .../components/table/ModuleTxsTable.tsx       |  171 +
 src/lib/pages/module-details/index.tsx        |  176 +-
 src/lib/query/index.ts                        |    1 +
 src/lib/query/module.ts                       |   17 +
 src/lib/query/tx.ts                           |   59 +
 src/lib/services/moduleService.ts             |   32 +-
 src/lib/services/txService.ts                 |  138 +
 13 files changed, 4481 insertions(+), 591 deletions(-)
 create mode 100644 src/lib/pages/module-details/components/table/ModuleTxsTable.tsx
 create mode 100644 src/lib/query/module.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8872fbaa..87b6a2fa2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#558](https://github.com/alleslabs/celatone-frontend/pull/558) Wireup module transaction history table
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Wireup publish module tx
 - [#544](https://github.com/alleslabs/celatone-frontend/pull/544) Show module source code if available
 - [#534](https://github.com/alleslabs/celatone-frontend/pull/534) Wire up initia execute function
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index cbd9fe8fe..c0c036b64 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -97,4 +97,7 @@ export enum CELATONE_QUERY_KEYS {
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
   FUNCTION_VIEW = "CELATONE_QUERY_FUNCTION_VIEW",
   MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
+  MODULE_ID = "CELATONE_QUERY_MODULE_ID",
+  MODULE_TXS = "CELATONE_QUERY_MODULE_TXS",
+  MODULE_TXS_COUNT_BY_TYPE = "CELATONE_QUERY_MODULE_TXS_COUNT_BY_TYPE",
 }
diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
index 569fd1a62..db58c93af 100644
--- a/src/lib/components/Breadcrumb.tsx
+++ b/src/lib/components/Breadcrumb.tsx
@@ -42,7 +42,7 @@ export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
           </ChakraBreadcrumbItem>
         )
       ) : (
-        <ChakraBreadcrumbItem isCurrentPage key={`bc-${item.href}`}>
+        <ChakraBreadcrumbItem isCurrentPage key={`bc-${item.text}`}>
           <Text
             variant={{ base: "body3", md: "body2" }}
             className="ellipsis"
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index a1252a06c..943ce3ad2 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -55,6 +55,8 @@ const documents = {
     types.GetContractListByAdminPaginationDocument,
   "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetContractListCountByAdminDocument,
+  "\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n":
+    types.GetModuleIdByNameAndVmAddressQueryDocument,
   "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n":
     types.GetPoolListDocument,
   "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
@@ -97,6 +99,10 @@ const documents = {
     types.GetBlockTransactionsByHeightQueryDocument,
   "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetBlockTransactionCountByHeightQueryDocument,
+  "\n  query getModuleTransactionsQuery(\n    $filterExp: module_transactions_bool_exp\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: $filterExp\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n":
+    types.GetModuleTransactionsQueryDocument,
+  "\n  query getModuleTransactionsCountByTypeQuery(\n    $moduleId: Int!\n    $isUpgrade: Boolean!\n  ) {\n    module_transactions_aggregate(\n      where: {\n        module_id: { _eq: $moduleId }\n        transaction: { is_move_upgrade: { _eq: $isUpgrade } }\n      }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
+    types.GetModuleTransactionsCountByTypeQueryDocument,
   "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n":
     types.GetValidatorsDocument,
 };
@@ -179,6 +185,9 @@ export function graphql(
 export function graphql(
   source: "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"
+): typeof documents["\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
 ): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
@@ -242,6 +251,12 @@ export function graphql(
 export function graphql(
   source: "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getModuleTransactionsQuery(\n    $filterExp: module_transactions_bool_exp\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: $filterExp\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"
+): typeof documents["\n  query getModuleTransactionsQuery(\n    $filterExp: module_transactions_bool_exp\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: $filterExp\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getModuleTransactionsCountByTypeQuery(\n    $moduleId: Int!\n    $isUpgrade: Boolean!\n  ) {\n    module_transactions_aggregate(\n      where: {\n        module_id: { _eq: $moduleId }\n        transaction: { is_move_upgrade: { _eq: $isUpgrade } }\n      }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
+): typeof documents["\n  query getModuleTransactionsCountByTypeQuery(\n    $moduleId: Int!\n    $isUpgrade: Boolean!\n  ) {\n    module_transactions_aggregate(\n      where: {\n        module_id: { _eq: $moduleId }\n        transaction: { is_move_upgrade: { _eq: $isUpgrade } }\n      }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n"
 ): typeof documents["\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 810940397..c0dbc199e 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -20,11 +20,13 @@ export type Scalars = {
   Float: number;
   _varchar: any;
   accounttype: any;
+  bigint: any;
   bytea: any;
   json: any;
   pooltype: any;
   proposalstatus: any;
   timestamp: any;
+  upgradepolicy: any;
 };
 
 /** Boolean expression to compare columns of type "Boolean". All fields are combined with logical 'AND'. */
@@ -210,7 +212,7 @@ export type Account_Transactions_Bool_Exp = {
 
 /** unique or primary key constraints on table "account_transactions" */
 export enum Account_Transactions_Constraint {
-  /** unique or primary key constraint on columns "transaction_id", "account_id" */
+  /** unique or primary key constraint on columns "account_id", "transaction_id" */
   AccountTransactionsPkey = "account_transactions_pkey",
 }
 
@@ -508,10 +510,15 @@ export type Accounts = {
   /** An aggregate relationship */
   transactions_aggregate: Transactions_Aggregate;
   type?: Maybe<Scalars["accounttype"]>;
+  /** An object relationship */
+  validator?: Maybe<Validators>;
   /** An array relationship */
   validators: Array<Validators>;
   /** An aggregate relationship */
   validators_aggregate: Validators_Aggregate;
+  /** An object relationship */
+  vm_address: Vm_Addresses;
+  vm_address_id: Scalars["Int"];
 };
 
 /** columns and relationships of "accounts" */
@@ -683,6 +690,17 @@ export type Accounts_Aggregate = {
   nodes: Array<Accounts>;
 };
 
+export type Accounts_Aggregate_Bool_Exp = {
+  count?: InputMaybe<Accounts_Aggregate_Bool_Exp_Count>;
+};
+
+export type Accounts_Aggregate_Bool_Exp_Count = {
+  arguments?: InputMaybe<Array<Accounts_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+  filter?: InputMaybe<Accounts_Bool_Exp>;
+  predicate: Int_Comparison_Exp;
+};
+
 /** aggregate fields of "accounts" */
 export type Accounts_Aggregate_Fields = {
   __typename?: "accounts_aggregate_fields";
@@ -705,10 +723,39 @@ export type Accounts_Aggregate_FieldsCountArgs = {
   distinct?: InputMaybe<Scalars["Boolean"]>;
 };
 
+/** order by aggregate values of table "accounts" */
+export type Accounts_Aggregate_Order_By = {
+  avg?: InputMaybe<Accounts_Avg_Order_By>;
+  count?: InputMaybe<Order_By>;
+  max?: InputMaybe<Accounts_Max_Order_By>;
+  min?: InputMaybe<Accounts_Min_Order_By>;
+  stddev?: InputMaybe<Accounts_Stddev_Order_By>;
+  stddev_pop?: InputMaybe<Accounts_Stddev_Pop_Order_By>;
+  stddev_samp?: InputMaybe<Accounts_Stddev_Samp_Order_By>;
+  sum?: InputMaybe<Accounts_Sum_Order_By>;
+  var_pop?: InputMaybe<Accounts_Var_Pop_Order_By>;
+  var_samp?: InputMaybe<Accounts_Var_Samp_Order_By>;
+  variance?: InputMaybe<Accounts_Variance_Order_By>;
+};
+
+/** input type for inserting array relation for remote table "accounts" */
+export type Accounts_Arr_Rel_Insert_Input = {
+  data: Array<Accounts_Insert_Input>;
+  /** upsert condition */
+  on_conflict?: InputMaybe<Accounts_On_Conflict>;
+};
+
 /** aggregate avg on columns */
 export type Accounts_Avg_Fields = {
   __typename?: "accounts_avg_fields";
   id?: Maybe<Scalars["Float"]>;
+  vm_address_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by avg() on columns of table "accounts" */
+export type Accounts_Avg_Order_By = {
+  id?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** Boolean expression to filter rows from the table "accounts". All fields are combined with a logical 'AND'. */
@@ -736,8 +783,11 @@ export type Accounts_Bool_Exp = {
   transactions?: InputMaybe<Transactions_Bool_Exp>;
   transactions_aggregate?: InputMaybe<Transactions_Aggregate_Bool_Exp>;
   type?: InputMaybe<Accounttype_Comparison_Exp>;
+  validator?: InputMaybe<Validators_Bool_Exp>;
   validators?: InputMaybe<Validators_Bool_Exp>;
   validators_aggregate?: InputMaybe<Validators_Aggregate_Bool_Exp>;
+  vm_address?: InputMaybe<Vm_Addresses_Bool_Exp>;
+  vm_address_id?: InputMaybe<Int_Comparison_Exp>;
 };
 
 /** unique or primary key constraints on table "accounts" */
@@ -751,6 +801,7 @@ export enum Accounts_Constraint {
 /** input type for incrementing numeric columns in table "accounts" */
 export type Accounts_Inc_Input = {
   id?: InputMaybe<Scalars["Int"]>;
+  vm_address_id?: InputMaybe<Scalars["Int"]>;
 };
 
 /** input type for inserting data into table "accounts" */
@@ -767,7 +818,10 @@ export type Accounts_Insert_Input = {
   proposals?: InputMaybe<Proposals_Arr_Rel_Insert_Input>;
   transactions?: InputMaybe<Transactions_Arr_Rel_Insert_Input>;
   type?: InputMaybe<Scalars["accounttype"]>;
+  validator?: InputMaybe<Validators_Obj_Rel_Insert_Input>;
   validators?: InputMaybe<Validators_Arr_Rel_Insert_Input>;
+  vm_address?: InputMaybe<Vm_Addresses_Obj_Rel_Insert_Input>;
+  vm_address_id?: InputMaybe<Scalars["Int"]>;
 };
 
 /** aggregate max on columns */
@@ -777,6 +831,16 @@ export type Accounts_Max_Fields = {
   id?: Maybe<Scalars["Int"]>;
   name?: Maybe<Scalars["String"]>;
   type?: Maybe<Scalars["accounttype"]>;
+  vm_address_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by max() on columns of table "accounts" */
+export type Accounts_Max_Order_By = {
+  address?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  name?: InputMaybe<Order_By>;
+  type?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** aggregate min on columns */
@@ -786,6 +850,16 @@ export type Accounts_Min_Fields = {
   id?: Maybe<Scalars["Int"]>;
   name?: Maybe<Scalars["String"]>;
   type?: Maybe<Scalars["accounttype"]>;
+  vm_address_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by min() on columns of table "accounts" */
+export type Accounts_Min_Order_By = {
+  address?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  name?: InputMaybe<Order_By>;
+  type?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** response of any mutation on the table "accounts" */
@@ -825,7 +899,10 @@ export type Accounts_Order_By = {
   proposals_aggregate?: InputMaybe<Proposals_Aggregate_Order_By>;
   transactions_aggregate?: InputMaybe<Transactions_Aggregate_Order_By>;
   type?: InputMaybe<Order_By>;
+  validator?: InputMaybe<Validators_Order_By>;
   validators_aggregate?: InputMaybe<Validators_Aggregate_Order_By>;
+  vm_address?: InputMaybe<Vm_Addresses_Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** primary key columns input for table: accounts */
@@ -843,6 +920,8 @@ export enum Accounts_Select_Column {
   Name = "name",
   /** column name */
   Type = "type",
+  /** column name */
+  VmAddressId = "vm_address_id",
 }
 
 /** input type for updating data in table "accounts" */
@@ -851,24 +930,46 @@ export type Accounts_Set_Input = {
   id?: InputMaybe<Scalars["Int"]>;
   name?: InputMaybe<Scalars["String"]>;
   type?: InputMaybe<Scalars["accounttype"]>;
+  vm_address_id?: InputMaybe<Scalars["Int"]>;
 };
 
 /** aggregate stddev on columns */
 export type Accounts_Stddev_Fields = {
   __typename?: "accounts_stddev_fields";
   id?: Maybe<Scalars["Float"]>;
+  vm_address_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev() on columns of table "accounts" */
+export type Accounts_Stddev_Order_By = {
+  id?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** aggregate stddev_pop on columns */
 export type Accounts_Stddev_Pop_Fields = {
   __typename?: "accounts_stddev_pop_fields";
   id?: Maybe<Scalars["Float"]>;
+  vm_address_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_pop() on columns of table "accounts" */
+export type Accounts_Stddev_Pop_Order_By = {
+  id?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** aggregate stddev_samp on columns */
 export type Accounts_Stddev_Samp_Fields = {
   __typename?: "accounts_stddev_samp_fields";
   id?: Maybe<Scalars["Float"]>;
+  vm_address_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_samp() on columns of table "accounts" */
+export type Accounts_Stddev_Samp_Order_By = {
+  id?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** Streaming cursor of the table "accounts" */
@@ -885,12 +986,20 @@ export type Accounts_Stream_Cursor_Value_Input = {
   id?: InputMaybe<Scalars["Int"]>;
   name?: InputMaybe<Scalars["String"]>;
   type?: InputMaybe<Scalars["accounttype"]>;
+  vm_address_id?: InputMaybe<Scalars["Int"]>;
 };
 
 /** aggregate sum on columns */
 export type Accounts_Sum_Fields = {
   __typename?: "accounts_sum_fields";
   id?: Maybe<Scalars["Int"]>;
+  vm_address_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by sum() on columns of table "accounts" */
+export type Accounts_Sum_Order_By = {
+  id?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** update columns of table "accounts" */
@@ -903,6 +1012,8 @@ export enum Accounts_Update_Column {
   Name = "name",
   /** column name */
   Type = "type",
+  /** column name */
+  VmAddressId = "vm_address_id",
 }
 
 export type Accounts_Updates = {
@@ -918,18 +1029,39 @@ export type Accounts_Updates = {
 export type Accounts_Var_Pop_Fields = {
   __typename?: "accounts_var_pop_fields";
   id?: Maybe<Scalars["Float"]>;
+  vm_address_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_pop() on columns of table "accounts" */
+export type Accounts_Var_Pop_Order_By = {
+  id?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** aggregate var_samp on columns */
 export type Accounts_Var_Samp_Fields = {
   __typename?: "accounts_var_samp_fields";
   id?: Maybe<Scalars["Float"]>;
+  vm_address_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_samp() on columns of table "accounts" */
+export type Accounts_Var_Samp_Order_By = {
+  id?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** aggregate variance on columns */
 export type Accounts_Variance_Fields = {
   __typename?: "accounts_variance_fields";
   id?: Maybe<Scalars["Float"]>;
+  vm_address_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by variance() on columns of table "accounts" */
+export type Accounts_Variance_Order_By = {
+  id?: InputMaybe<Order_By>;
+  vm_address_id?: InputMaybe<Order_By>;
 };
 
 /** Boolean expression to compare columns of type "accounttype". All fields are combined with logical 'AND'. */
@@ -1204,6 +1336,19 @@ export type Begin_Block_Events_Variance_Order_By = {
   block_height?: InputMaybe<Order_By>;
 };
 
+/** Boolean expression to compare columns of type "bigint". All fields are combined with logical 'AND'. */
+export type Bigint_Comparison_Exp = {
+  _eq?: InputMaybe<Scalars["bigint"]>;
+  _gt?: InputMaybe<Scalars["bigint"]>;
+  _gte?: InputMaybe<Scalars["bigint"]>;
+  _in?: InputMaybe<Array<Scalars["bigint"]>>;
+  _is_null?: InputMaybe<Scalars["Boolean"]>;
+  _lt?: InputMaybe<Scalars["bigint"]>;
+  _lte?: InputMaybe<Scalars["bigint"]>;
+  _neq?: InputMaybe<Scalars["bigint"]>;
+  _nin?: InputMaybe<Array<Scalars["bigint"]>>;
+};
+
 /** columns and relationships of "blocks" */
 export type Blocks = {
   __typename?: "blocks";
@@ -1238,6 +1383,14 @@ export type Blocks = {
   /** An aggregate relationship */
   lcd_tx_results_aggregate: Lcd_Tx_Results_Aggregate;
   /** An array relationship */
+  module_histories: Array<Module_Histories>;
+  /** An aggregate relationship */
+  module_histories_aggregate: Module_Histories_Aggregate;
+  /** An array relationship */
+  module_transactions: Array<Module_Transactions>;
+  /** An aggregate relationship */
+  module_transactions_aggregate: Module_Transactions_Aggregate;
+  /** An array relationship */
   pool_transactions: Array<Pool_Transactions>;
   /** An aggregate relationship */
   pool_transactions_aggregate: Pool_Transactions_Aggregate;
@@ -1397,6 +1550,42 @@ export type BlocksLcd_Tx_Results_AggregateArgs = {
   where?: InputMaybe<Lcd_Tx_Results_Bool_Exp>;
 };
 
+/** columns and relationships of "blocks" */
+export type BlocksModule_HistoriesArgs = {
+  distinct_on?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Histories_Order_By>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+/** columns and relationships of "blocks" */
+export type BlocksModule_Histories_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Histories_Order_By>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+/** columns and relationships of "blocks" */
+export type BlocksModule_TransactionsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+/** columns and relationships of "blocks" */
+export type BlocksModule_Transactions_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
 /** columns and relationships of "blocks" */
 export type BlocksPool_TransactionsArgs = {
   distinct_on?: InputMaybe<Array<Pool_Transactions_Select_Column>>;
@@ -1617,6 +1806,10 @@ export type Blocks_Bool_Exp = {
   height?: InputMaybe<Int_Comparison_Exp>;
   lcd_tx_results?: InputMaybe<Lcd_Tx_Results_Bool_Exp>;
   lcd_tx_results_aggregate?: InputMaybe<Lcd_Tx_Results_Aggregate_Bool_Exp>;
+  module_histories?: InputMaybe<Module_Histories_Bool_Exp>;
+  module_histories_aggregate?: InputMaybe<Module_Histories_Aggregate_Bool_Exp>;
+  module_transactions?: InputMaybe<Module_Transactions_Bool_Exp>;
+  module_transactions_aggregate?: InputMaybe<Module_Transactions_Aggregate_Bool_Exp>;
   pool_transactions?: InputMaybe<Pool_Transactions_Bool_Exp>;
   pool_transactions_aggregate?: InputMaybe<Pool_Transactions_Aggregate_Bool_Exp>;
   profit_by_denoms?: InputMaybe<Profit_By_Denoms_Bool_Exp>;
@@ -1658,6 +1851,8 @@ export type Blocks_Insert_Input = {
   hash?: InputMaybe<Scalars["bytea"]>;
   height?: InputMaybe<Scalars["Int"]>;
   lcd_tx_results?: InputMaybe<Lcd_Tx_Results_Arr_Rel_Insert_Input>;
+  module_histories?: InputMaybe<Module_Histories_Arr_Rel_Insert_Input>;
+  module_transactions?: InputMaybe<Module_Transactions_Arr_Rel_Insert_Input>;
   pool_transactions?: InputMaybe<Pool_Transactions_Arr_Rel_Insert_Input>;
   profit_by_denoms?: InputMaybe<Profit_By_Denoms_Arr_Rel_Insert_Input>;
   profit_by_routes?: InputMaybe<Profit_By_Routes_Arr_Rel_Insert_Input>;
@@ -1734,6 +1929,8 @@ export type Blocks_Order_By = {
   hash?: InputMaybe<Order_By>;
   height?: InputMaybe<Order_By>;
   lcd_tx_results_aggregate?: InputMaybe<Lcd_Tx_Results_Aggregate_Order_By>;
+  module_histories_aggregate?: InputMaybe<Module_Histories_Aggregate_Order_By>;
+  module_transactions_aggregate?: InputMaybe<Module_Transactions_Aggregate_Order_By>;
   pool_transactions_aggregate?: InputMaybe<Pool_Transactions_Aggregate_Order_By>;
   profit_by_denoms_aggregate?: InputMaybe<Profit_By_Denoms_Aggregate_Order_By>;
   profit_by_routes_aggregate?: InputMaybe<Profit_By_Routes_Aggregate_Order_By>;
@@ -2234,7 +2431,6 @@ export type Codes = {
   contracts_aggregate: Contracts_Aggregate;
   cw2_contract?: Maybe<Scalars["String"]>;
   cw2_version?: Maybe<Scalars["String"]>;
-  hash: Scalars["bytea"];
   id: Scalars["Int"];
   /** An object relationship */
   transaction?: Maybe<Transactions>;
@@ -2397,7 +2593,6 @@ export type Codes_Bool_Exp = {
   contracts_aggregate?: InputMaybe<Contracts_Aggregate_Bool_Exp>;
   cw2_contract?: InputMaybe<String_Comparison_Exp>;
   cw2_version?: InputMaybe<String_Comparison_Exp>;
-  hash?: InputMaybe<Bytea_Comparison_Exp>;
   id?: InputMaybe<Int_Comparison_Exp>;
   transaction?: InputMaybe<Transactions_Bool_Exp>;
   transaction_id?: InputMaybe<Int_Comparison_Exp>;
@@ -2429,7 +2624,6 @@ export type Codes_Insert_Input = {
   contracts?: InputMaybe<Contracts_Arr_Rel_Insert_Input>;
   cw2_contract?: InputMaybe<Scalars["String"]>;
   cw2_version?: InputMaybe<Scalars["String"]>;
-  hash?: InputMaybe<Scalars["bytea"]>;
   id?: InputMaybe<Scalars["Int"]>;
   transaction?: InputMaybe<Transactions_Obj_Rel_Insert_Input>;
   transaction_id?: InputMaybe<Scalars["Int"]>;
@@ -2516,7 +2710,6 @@ export type Codes_Order_By = {
   contracts_aggregate?: InputMaybe<Contracts_Aggregate_Order_By>;
   cw2_contract?: InputMaybe<Order_By>;
   cw2_version?: InputMaybe<Order_By>;
-  hash?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
   transaction?: InputMaybe<Transactions_Order_By>;
   transaction_id?: InputMaybe<Order_By>;
@@ -2541,8 +2734,6 @@ export enum Codes_Select_Column {
   /** column name */
   Cw2Version = "cw2_version",
   /** column name */
-  Hash = "hash",
-  /** column name */
   Id = "id",
   /** column name */
   TransactionId = "transaction_id",
@@ -2557,7 +2748,6 @@ export type Codes_Set_Input = {
   contract_instantiated?: InputMaybe<Scalars["Int"]>;
   cw2_contract?: InputMaybe<Scalars["String"]>;
   cw2_version?: InputMaybe<Scalars["String"]>;
-  hash?: InputMaybe<Scalars["bytea"]>;
   id?: InputMaybe<Scalars["Int"]>;
   transaction_id?: InputMaybe<Scalars["Int"]>;
   uploader?: InputMaybe<Scalars["Int"]>;
@@ -2629,7 +2819,6 @@ export type Codes_Stream_Cursor_Value_Input = {
   contract_instantiated?: InputMaybe<Scalars["Int"]>;
   cw2_contract?: InputMaybe<Scalars["String"]>;
   cw2_version?: InputMaybe<Scalars["String"]>;
-  hash?: InputMaybe<Scalars["bytea"]>;
   id?: InputMaybe<Scalars["Int"]>;
   transaction_id?: InputMaybe<Scalars["Int"]>;
   uploader?: InputMaybe<Scalars["Int"]>;
@@ -2665,8 +2854,6 @@ export enum Codes_Update_Column {
   /** column name */
   Cw2Version = "cw2_version",
   /** column name */
-  Hash = "hash",
-  /** column name */
   Id = "id",
   /** column name */
   TransactionId = "transaction_id",
@@ -5116,170 +5303,1633 @@ export type Lcd_Tx_Results_Variance_Order_By = {
   transaction_id?: InputMaybe<Order_By>;
 };
 
-/** mutation root */
-export type Mutation_Root = {
-  __typename?: "mutation_root";
-  /** delete data from the table: "account_transactions" */
-  delete_account_transactions?: Maybe<Account_Transactions_Mutation_Response>;
-  /** delete single row from the table: "account_transactions" */
-  delete_account_transactions_by_pk?: Maybe<Account_Transactions>;
-  /** delete data from the table: "accounts" */
-  delete_accounts?: Maybe<Accounts_Mutation_Response>;
-  /** delete single row from the table: "accounts" */
-  delete_accounts_by_pk?: Maybe<Accounts>;
-  /** delete data from the table: "begin_block_events" */
-  delete_begin_block_events?: Maybe<Begin_Block_Events_Mutation_Response>;
-  /** delete data from the table: "blocks" */
-  delete_blocks?: Maybe<Blocks_Mutation_Response>;
-  /** delete single row from the table: "blocks" */
-  delete_blocks_by_pk?: Maybe<Blocks>;
-  /** delete data from the table: "code_proposals" */
-  delete_code_proposals?: Maybe<Code_Proposals_Mutation_Response>;
-  /** delete data from the table: "codes" */
-  delete_codes?: Maybe<Codes_Mutation_Response>;
-  /** delete single row from the table: "codes" */
-  delete_codes_by_pk?: Maybe<Codes>;
-  /** delete data from the table: "contract_histories" */
-  delete_contract_histories?: Maybe<Contract_Histories_Mutation_Response>;
-  /** delete data from the table: "contract_proposals" */
-  delete_contract_proposals?: Maybe<Contract_Proposals_Mutation_Response>;
-  /** delete data from the table: "contract_transactions" */
-  delete_contract_transactions?: Maybe<Contract_Transactions_Mutation_Response>;
-  /** delete data from the table: "contract_transactions_view" */
-  delete_contract_transactions_view?: Maybe<Contract_Transactions_View_Mutation_Response>;
-  /** delete data from the table: "contracts" */
-  delete_contracts?: Maybe<Contracts_Mutation_Response>;
-  /** delete single row from the table: "contracts" */
-  delete_contracts_by_pk?: Maybe<Contracts>;
-  /** delete data from the table: "end_block_events" */
-  delete_end_block_events?: Maybe<End_Block_Events_Mutation_Response>;
-  /** delete data from the table: "lcd_tx_results" */
-  delete_lcd_tx_results?: Maybe<Lcd_Tx_Results_Mutation_Response>;
-  /** delete data from the table: "pool_transactions" */
-  delete_pool_transactions?: Maybe<Pool_Transactions_Mutation_Response>;
-  /** delete data from the table: "pools" */
-  delete_pools?: Maybe<Pools_Mutation_Response>;
-  /** delete single row from the table: "pools" */
-  delete_pools_by_pk?: Maybe<Pools>;
-  /** delete data from the table: "profit_by_denoms" */
-  delete_profit_by_denoms?: Maybe<Profit_By_Denoms_Mutation_Response>;
-  /** delete data from the table: "profit_by_routes" */
-  delete_profit_by_routes?: Maybe<Profit_By_Routes_Mutation_Response>;
-  /** delete data from the table: "proposals" */
-  delete_proposals?: Maybe<Proposals_Mutation_Response>;
-  /** delete single row from the table: "proposals" */
-  delete_proposals_by_pk?: Maybe<Proposals>;
-  /** delete data from the table: "tracking" */
-  delete_tracking?: Maybe<Tracking_Mutation_Response>;
-  /** delete single row from the table: "tracking" */
-  delete_tracking_by_pk?: Maybe<Tracking>;
-  /** delete data from the table: "trade_by_routes" */
-  delete_trade_by_routes?: Maybe<Trade_By_Routes_Mutation_Response>;
-  /** delete data from the table: "trades" */
-  delete_trades?: Maybe<Trades_Mutation_Response>;
-  /** delete data from the table: "transactions" */
-  delete_transactions?: Maybe<Transactions_Mutation_Response>;
-  /** delete single row from the table: "transactions" */
-  delete_transactions_by_pk?: Maybe<Transactions>;
-  /** delete data from the table: "validators" */
-  delete_validators?: Maybe<Validators_Mutation_Response>;
-  /** delete single row from the table: "validators" */
-  delete_validators_by_pk?: Maybe<Validators>;
-  /** insert data into the table: "account_transactions" */
-  insert_account_transactions?: Maybe<Account_Transactions_Mutation_Response>;
-  /** insert a single row into the table: "account_transactions" */
-  insert_account_transactions_one?: Maybe<Account_Transactions>;
-  /** insert data into the table: "accounts" */
-  insert_accounts?: Maybe<Accounts_Mutation_Response>;
-  /** insert a single row into the table: "accounts" */
-  insert_accounts_one?: Maybe<Accounts>;
-  /** insert data into the table: "begin_block_events" */
-  insert_begin_block_events?: Maybe<Begin_Block_Events_Mutation_Response>;
-  /** insert a single row into the table: "begin_block_events" */
-  insert_begin_block_events_one?: Maybe<Begin_Block_Events>;
-  /** insert data into the table: "blocks" */
-  insert_blocks?: Maybe<Blocks_Mutation_Response>;
-  /** insert a single row into the table: "blocks" */
-  insert_blocks_one?: Maybe<Blocks>;
-  /** insert data into the table: "code_proposals" */
-  insert_code_proposals?: Maybe<Code_Proposals_Mutation_Response>;
-  /** insert a single row into the table: "code_proposals" */
-  insert_code_proposals_one?: Maybe<Code_Proposals>;
-  /** insert data into the table: "codes" */
-  insert_codes?: Maybe<Codes_Mutation_Response>;
-  /** insert a single row into the table: "codes" */
-  insert_codes_one?: Maybe<Codes>;
-  /** insert data into the table: "contract_histories" */
-  insert_contract_histories?: Maybe<Contract_Histories_Mutation_Response>;
-  /** insert a single row into the table: "contract_histories" */
-  insert_contract_histories_one?: Maybe<Contract_Histories>;
-  /** insert data into the table: "contract_proposals" */
-  insert_contract_proposals?: Maybe<Contract_Proposals_Mutation_Response>;
-  /** insert a single row into the table: "contract_proposals" */
-  insert_contract_proposals_one?: Maybe<Contract_Proposals>;
-  /** insert data into the table: "contract_transactions" */
-  insert_contract_transactions?: Maybe<Contract_Transactions_Mutation_Response>;
-  /** insert a single row into the table: "contract_transactions" */
-  insert_contract_transactions_one?: Maybe<Contract_Transactions>;
-  /** insert data into the table: "contract_transactions_view" */
-  insert_contract_transactions_view?: Maybe<Contract_Transactions_View_Mutation_Response>;
-  /** insert a single row into the table: "contract_transactions_view" */
-  insert_contract_transactions_view_one?: Maybe<Contract_Transactions_View>;
-  /** insert data into the table: "contracts" */
-  insert_contracts?: Maybe<Contracts_Mutation_Response>;
-  /** insert a single row into the table: "contracts" */
-  insert_contracts_one?: Maybe<Contracts>;
-  /** insert data into the table: "end_block_events" */
-  insert_end_block_events?: Maybe<End_Block_Events_Mutation_Response>;
-  /** insert a single row into the table: "end_block_events" */
-  insert_end_block_events_one?: Maybe<End_Block_Events>;
-  /** insert data into the table: "lcd_tx_results" */
-  insert_lcd_tx_results?: Maybe<Lcd_Tx_Results_Mutation_Response>;
-  /** insert a single row into the table: "lcd_tx_results" */
-  insert_lcd_tx_results_one?: Maybe<Lcd_Tx_Results>;
-  /** insert data into the table: "pool_transactions" */
-  insert_pool_transactions?: Maybe<Pool_Transactions_Mutation_Response>;
-  /** insert a single row into the table: "pool_transactions" */
-  insert_pool_transactions_one?: Maybe<Pool_Transactions>;
-  /** insert data into the table: "pools" */
-  insert_pools?: Maybe<Pools_Mutation_Response>;
-  /** insert a single row into the table: "pools" */
-  insert_pools_one?: Maybe<Pools>;
-  /** insert data into the table: "profit_by_denoms" */
-  insert_profit_by_denoms?: Maybe<Profit_By_Denoms_Mutation_Response>;
-  /** insert a single row into the table: "profit_by_denoms" */
-  insert_profit_by_denoms_one?: Maybe<Profit_By_Denoms>;
-  /** insert data into the table: "profit_by_routes" */
-  insert_profit_by_routes?: Maybe<Profit_By_Routes_Mutation_Response>;
-  /** insert a single row into the table: "profit_by_routes" */
-  insert_profit_by_routes_one?: Maybe<Profit_By_Routes>;
-  /** insert data into the table: "proposals" */
-  insert_proposals?: Maybe<Proposals_Mutation_Response>;
-  /** insert a single row into the table: "proposals" */
-  insert_proposals_one?: Maybe<Proposals>;
-  /** insert data into the table: "tracking" */
-  insert_tracking?: Maybe<Tracking_Mutation_Response>;
-  /** insert a single row into the table: "tracking" */
-  insert_tracking_one?: Maybe<Tracking>;
-  /** insert data into the table: "trade_by_routes" */
-  insert_trade_by_routes?: Maybe<Trade_By_Routes_Mutation_Response>;
-  /** insert a single row into the table: "trade_by_routes" */
-  insert_trade_by_routes_one?: Maybe<Trade_By_Routes>;
-  /** insert data into the table: "trades" */
-  insert_trades?: Maybe<Trades_Mutation_Response>;
-  /** insert a single row into the table: "trades" */
-  insert_trades_one?: Maybe<Trades>;
-  /** insert data into the table: "transactions" */
-  insert_transactions?: Maybe<Transactions_Mutation_Response>;
-  /** insert a single row into the table: "transactions" */
-  insert_transactions_one?: Maybe<Transactions>;
-  /** insert data into the table: "validators" */
-  insert_validators?: Maybe<Validators_Mutation_Response>;
-  /** insert a single row into the table: "validators" */
-  insert_validators_one?: Maybe<Validators>;
-  /** update data of the table: "account_transactions" */
-  update_account_transactions?: Maybe<Account_Transactions_Mutation_Response>;
-  /** update single row of the table: "account_transactions" */
+/** columns and relationships of "module_histories" */
+export type Module_Histories = {
+  __typename?: "module_histories";
+  /** An object relationship */
+  block: Blocks;
+  block_height: Scalars["Int"];
+  /** An object relationship */
+  module: Modules;
+  module_id: Scalars["Int"];
+  remark: Scalars["json"];
+  upgrade_policy: Scalars["upgradepolicy"];
+};
+
+/** columns and relationships of "module_histories" */
+export type Module_HistoriesRemarkArgs = {
+  path?: InputMaybe<Scalars["String"]>;
+};
+
+/** aggregated selection of "module_histories" */
+export type Module_Histories_Aggregate = {
+  __typename?: "module_histories_aggregate";
+  aggregate?: Maybe<Module_Histories_Aggregate_Fields>;
+  nodes: Array<Module_Histories>;
+};
+
+export type Module_Histories_Aggregate_Bool_Exp = {
+  count?: InputMaybe<Module_Histories_Aggregate_Bool_Exp_Count>;
+};
+
+export type Module_Histories_Aggregate_Bool_Exp_Count = {
+  arguments?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+  filter?: InputMaybe<Module_Histories_Bool_Exp>;
+  predicate: Int_Comparison_Exp;
+};
+
+/** aggregate fields of "module_histories" */
+export type Module_Histories_Aggregate_Fields = {
+  __typename?: "module_histories_aggregate_fields";
+  avg?: Maybe<Module_Histories_Avg_Fields>;
+  count: Scalars["Int"];
+  max?: Maybe<Module_Histories_Max_Fields>;
+  min?: Maybe<Module_Histories_Min_Fields>;
+  stddev?: Maybe<Module_Histories_Stddev_Fields>;
+  stddev_pop?: Maybe<Module_Histories_Stddev_Pop_Fields>;
+  stddev_samp?: Maybe<Module_Histories_Stddev_Samp_Fields>;
+  sum?: Maybe<Module_Histories_Sum_Fields>;
+  var_pop?: Maybe<Module_Histories_Var_Pop_Fields>;
+  var_samp?: Maybe<Module_Histories_Var_Samp_Fields>;
+  variance?: Maybe<Module_Histories_Variance_Fields>;
+};
+
+/** aggregate fields of "module_histories" */
+export type Module_Histories_Aggregate_FieldsCountArgs = {
+  columns?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+};
+
+/** order by aggregate values of table "module_histories" */
+export type Module_Histories_Aggregate_Order_By = {
+  avg?: InputMaybe<Module_Histories_Avg_Order_By>;
+  count?: InputMaybe<Order_By>;
+  max?: InputMaybe<Module_Histories_Max_Order_By>;
+  min?: InputMaybe<Module_Histories_Min_Order_By>;
+  stddev?: InputMaybe<Module_Histories_Stddev_Order_By>;
+  stddev_pop?: InputMaybe<Module_Histories_Stddev_Pop_Order_By>;
+  stddev_samp?: InputMaybe<Module_Histories_Stddev_Samp_Order_By>;
+  sum?: InputMaybe<Module_Histories_Sum_Order_By>;
+  var_pop?: InputMaybe<Module_Histories_Var_Pop_Order_By>;
+  var_samp?: InputMaybe<Module_Histories_Var_Samp_Order_By>;
+  variance?: InputMaybe<Module_Histories_Variance_Order_By>;
+};
+
+/** input type for inserting array relation for remote table "module_histories" */
+export type Module_Histories_Arr_Rel_Insert_Input = {
+  data: Array<Module_Histories_Insert_Input>;
+};
+
+/** aggregate avg on columns */
+export type Module_Histories_Avg_Fields = {
+  __typename?: "module_histories_avg_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by avg() on columns of table "module_histories" */
+export type Module_Histories_Avg_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+};
+
+/** Boolean expression to filter rows from the table "module_histories". All fields are combined with a logical 'AND'. */
+export type Module_Histories_Bool_Exp = {
+  _and?: InputMaybe<Array<Module_Histories_Bool_Exp>>;
+  _not?: InputMaybe<Module_Histories_Bool_Exp>;
+  _or?: InputMaybe<Array<Module_Histories_Bool_Exp>>;
+  block?: InputMaybe<Blocks_Bool_Exp>;
+  block_height?: InputMaybe<Int_Comparison_Exp>;
+  module?: InputMaybe<Modules_Bool_Exp>;
+  module_id?: InputMaybe<Int_Comparison_Exp>;
+  remark?: InputMaybe<Json_Comparison_Exp>;
+  upgrade_policy?: InputMaybe<Upgradepolicy_Comparison_Exp>;
+};
+
+/** input type for incrementing numeric columns in table "module_histories" */
+export type Module_Histories_Inc_Input = {
+  block_height?: InputMaybe<Scalars["Int"]>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** input type for inserting data into table "module_histories" */
+export type Module_Histories_Insert_Input = {
+  block?: InputMaybe<Blocks_Obj_Rel_Insert_Input>;
+  block_height?: InputMaybe<Scalars["Int"]>;
+  module?: InputMaybe<Modules_Obj_Rel_Insert_Input>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+  remark?: InputMaybe<Scalars["json"]>;
+  upgrade_policy?: InputMaybe<Scalars["upgradepolicy"]>;
+};
+
+/** aggregate max on columns */
+export type Module_Histories_Max_Fields = {
+  __typename?: "module_histories_max_fields";
+  block_height?: Maybe<Scalars["Int"]>;
+  module_id?: Maybe<Scalars["Int"]>;
+  upgrade_policy?: Maybe<Scalars["upgradepolicy"]>;
+};
+
+/** order by max() on columns of table "module_histories" */
+export type Module_Histories_Max_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  upgrade_policy?: InputMaybe<Order_By>;
+};
+
+/** aggregate min on columns */
+export type Module_Histories_Min_Fields = {
+  __typename?: "module_histories_min_fields";
+  block_height?: Maybe<Scalars["Int"]>;
+  module_id?: Maybe<Scalars["Int"]>;
+  upgrade_policy?: Maybe<Scalars["upgradepolicy"]>;
+};
+
+/** order by min() on columns of table "module_histories" */
+export type Module_Histories_Min_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  upgrade_policy?: InputMaybe<Order_By>;
+};
+
+/** response of any mutation on the table "module_histories" */
+export type Module_Histories_Mutation_Response = {
+  __typename?: "module_histories_mutation_response";
+  /** number of rows affected by the mutation */
+  affected_rows: Scalars["Int"];
+  /** data from the rows affected by the mutation */
+  returning: Array<Module_Histories>;
+};
+
+/** Ordering options when selecting data from "module_histories". */
+export type Module_Histories_Order_By = {
+  block?: InputMaybe<Blocks_Order_By>;
+  block_height?: InputMaybe<Order_By>;
+  module?: InputMaybe<Modules_Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  remark?: InputMaybe<Order_By>;
+  upgrade_policy?: InputMaybe<Order_By>;
+};
+
+/** select columns of table "module_histories" */
+export enum Module_Histories_Select_Column {
+  /** column name */
+  BlockHeight = "block_height",
+  /** column name */
+  ModuleId = "module_id",
+  /** column name */
+  Remark = "remark",
+  /** column name */
+  UpgradePolicy = "upgrade_policy",
+}
+
+/** input type for updating data in table "module_histories" */
+export type Module_Histories_Set_Input = {
+  block_height?: InputMaybe<Scalars["Int"]>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+  remark?: InputMaybe<Scalars["json"]>;
+  upgrade_policy?: InputMaybe<Scalars["upgradepolicy"]>;
+};
+
+/** aggregate stddev on columns */
+export type Module_Histories_Stddev_Fields = {
+  __typename?: "module_histories_stddev_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev() on columns of table "module_histories" */
+export type Module_Histories_Stddev_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_pop on columns */
+export type Module_Histories_Stddev_Pop_Fields = {
+  __typename?: "module_histories_stddev_pop_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_pop() on columns of table "module_histories" */
+export type Module_Histories_Stddev_Pop_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_samp on columns */
+export type Module_Histories_Stddev_Samp_Fields = {
+  __typename?: "module_histories_stddev_samp_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_samp() on columns of table "module_histories" */
+export type Module_Histories_Stddev_Samp_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+};
+
+/** Streaming cursor of the table "module_histories" */
+export type Module_Histories_Stream_Cursor_Input = {
+  /** Stream column input with initial value */
+  initial_value: Module_Histories_Stream_Cursor_Value_Input;
+  /** cursor ordering */
+  ordering?: InputMaybe<Cursor_Ordering>;
+};
+
+/** Initial value of the column from where the streaming should start */
+export type Module_Histories_Stream_Cursor_Value_Input = {
+  block_height?: InputMaybe<Scalars["Int"]>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+  remark?: InputMaybe<Scalars["json"]>;
+  upgrade_policy?: InputMaybe<Scalars["upgradepolicy"]>;
+};
+
+/** aggregate sum on columns */
+export type Module_Histories_Sum_Fields = {
+  __typename?: "module_histories_sum_fields";
+  block_height?: Maybe<Scalars["Int"]>;
+  module_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by sum() on columns of table "module_histories" */
+export type Module_Histories_Sum_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+};
+
+export type Module_Histories_Updates = {
+  /** increments the numeric columns with given value of the filtered values */
+  _inc?: InputMaybe<Module_Histories_Inc_Input>;
+  /** sets the columns of the filtered rows to the given values */
+  _set?: InputMaybe<Module_Histories_Set_Input>;
+  /** filter the rows which have to be updated */
+  where: Module_Histories_Bool_Exp;
+};
+
+/** aggregate var_pop on columns */
+export type Module_Histories_Var_Pop_Fields = {
+  __typename?: "module_histories_var_pop_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_pop() on columns of table "module_histories" */
+export type Module_Histories_Var_Pop_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate var_samp on columns */
+export type Module_Histories_Var_Samp_Fields = {
+  __typename?: "module_histories_var_samp_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_samp() on columns of table "module_histories" */
+export type Module_Histories_Var_Samp_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate variance on columns */
+export type Module_Histories_Variance_Fields = {
+  __typename?: "module_histories_variance_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by variance() on columns of table "module_histories" */
+export type Module_Histories_Variance_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+};
+
+/** columns and relationships of "module_proposals" */
+export type Module_Proposals = {
+  __typename?: "module_proposals";
+  /** An object relationship */
+  module: Modules;
+  module_id: Scalars["Int"];
+  /** An object relationship */
+  proposal: Proposals;
+  proposal_id: Scalars["Int"];
+};
+
+/** aggregated selection of "module_proposals" */
+export type Module_Proposals_Aggregate = {
+  __typename?: "module_proposals_aggregate";
+  aggregate?: Maybe<Module_Proposals_Aggregate_Fields>;
+  nodes: Array<Module_Proposals>;
+};
+
+export type Module_Proposals_Aggregate_Bool_Exp = {
+  count?: InputMaybe<Module_Proposals_Aggregate_Bool_Exp_Count>;
+};
+
+export type Module_Proposals_Aggregate_Bool_Exp_Count = {
+  arguments?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+  filter?: InputMaybe<Module_Proposals_Bool_Exp>;
+  predicate: Int_Comparison_Exp;
+};
+
+/** aggregate fields of "module_proposals" */
+export type Module_Proposals_Aggregate_Fields = {
+  __typename?: "module_proposals_aggregate_fields";
+  avg?: Maybe<Module_Proposals_Avg_Fields>;
+  count: Scalars["Int"];
+  max?: Maybe<Module_Proposals_Max_Fields>;
+  min?: Maybe<Module_Proposals_Min_Fields>;
+  stddev?: Maybe<Module_Proposals_Stddev_Fields>;
+  stddev_pop?: Maybe<Module_Proposals_Stddev_Pop_Fields>;
+  stddev_samp?: Maybe<Module_Proposals_Stddev_Samp_Fields>;
+  sum?: Maybe<Module_Proposals_Sum_Fields>;
+  var_pop?: Maybe<Module_Proposals_Var_Pop_Fields>;
+  var_samp?: Maybe<Module_Proposals_Var_Samp_Fields>;
+  variance?: Maybe<Module_Proposals_Variance_Fields>;
+};
+
+/** aggregate fields of "module_proposals" */
+export type Module_Proposals_Aggregate_FieldsCountArgs = {
+  columns?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+};
+
+/** order by aggregate values of table "module_proposals" */
+export type Module_Proposals_Aggregate_Order_By = {
+  avg?: InputMaybe<Module_Proposals_Avg_Order_By>;
+  count?: InputMaybe<Order_By>;
+  max?: InputMaybe<Module_Proposals_Max_Order_By>;
+  min?: InputMaybe<Module_Proposals_Min_Order_By>;
+  stddev?: InputMaybe<Module_Proposals_Stddev_Order_By>;
+  stddev_pop?: InputMaybe<Module_Proposals_Stddev_Pop_Order_By>;
+  stddev_samp?: InputMaybe<Module_Proposals_Stddev_Samp_Order_By>;
+  sum?: InputMaybe<Module_Proposals_Sum_Order_By>;
+  var_pop?: InputMaybe<Module_Proposals_Var_Pop_Order_By>;
+  var_samp?: InputMaybe<Module_Proposals_Var_Samp_Order_By>;
+  variance?: InputMaybe<Module_Proposals_Variance_Order_By>;
+};
+
+/** input type for inserting array relation for remote table "module_proposals" */
+export type Module_Proposals_Arr_Rel_Insert_Input = {
+  data: Array<Module_Proposals_Insert_Input>;
+};
+
+/** aggregate avg on columns */
+export type Module_Proposals_Avg_Fields = {
+  __typename?: "module_proposals_avg_fields";
+  module_id?: Maybe<Scalars["Float"]>;
+  proposal_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by avg() on columns of table "module_proposals" */
+export type Module_Proposals_Avg_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** Boolean expression to filter rows from the table "module_proposals". All fields are combined with a logical 'AND'. */
+export type Module_Proposals_Bool_Exp = {
+  _and?: InputMaybe<Array<Module_Proposals_Bool_Exp>>;
+  _not?: InputMaybe<Module_Proposals_Bool_Exp>;
+  _or?: InputMaybe<Array<Module_Proposals_Bool_Exp>>;
+  module?: InputMaybe<Modules_Bool_Exp>;
+  module_id?: InputMaybe<Int_Comparison_Exp>;
+  proposal?: InputMaybe<Proposals_Bool_Exp>;
+  proposal_id?: InputMaybe<Int_Comparison_Exp>;
+};
+
+/** input type for incrementing numeric columns in table "module_proposals" */
+export type Module_Proposals_Inc_Input = {
+  module_id?: InputMaybe<Scalars["Int"]>;
+  proposal_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** input type for inserting data into table "module_proposals" */
+export type Module_Proposals_Insert_Input = {
+  module?: InputMaybe<Modules_Obj_Rel_Insert_Input>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+  proposal?: InputMaybe<Proposals_Obj_Rel_Insert_Input>;
+  proposal_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** aggregate max on columns */
+export type Module_Proposals_Max_Fields = {
+  __typename?: "module_proposals_max_fields";
+  module_id?: Maybe<Scalars["Int"]>;
+  proposal_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by max() on columns of table "module_proposals" */
+export type Module_Proposals_Max_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate min on columns */
+export type Module_Proposals_Min_Fields = {
+  __typename?: "module_proposals_min_fields";
+  module_id?: Maybe<Scalars["Int"]>;
+  proposal_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by min() on columns of table "module_proposals" */
+export type Module_Proposals_Min_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** response of any mutation on the table "module_proposals" */
+export type Module_Proposals_Mutation_Response = {
+  __typename?: "module_proposals_mutation_response";
+  /** number of rows affected by the mutation */
+  affected_rows: Scalars["Int"];
+  /** data from the rows affected by the mutation */
+  returning: Array<Module_Proposals>;
+};
+
+/** Ordering options when selecting data from "module_proposals". */
+export type Module_Proposals_Order_By = {
+  module?: InputMaybe<Modules_Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  proposal?: InputMaybe<Proposals_Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** select columns of table "module_proposals" */
+export enum Module_Proposals_Select_Column {
+  /** column name */
+  ModuleId = "module_id",
+  /** column name */
+  ProposalId = "proposal_id",
+}
+
+/** input type for updating data in table "module_proposals" */
+export type Module_Proposals_Set_Input = {
+  module_id?: InputMaybe<Scalars["Int"]>;
+  proposal_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** aggregate stddev on columns */
+export type Module_Proposals_Stddev_Fields = {
+  __typename?: "module_proposals_stddev_fields";
+  module_id?: Maybe<Scalars["Float"]>;
+  proposal_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev() on columns of table "module_proposals" */
+export type Module_Proposals_Stddev_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_pop on columns */
+export type Module_Proposals_Stddev_Pop_Fields = {
+  __typename?: "module_proposals_stddev_pop_fields";
+  module_id?: Maybe<Scalars["Float"]>;
+  proposal_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_pop() on columns of table "module_proposals" */
+export type Module_Proposals_Stddev_Pop_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_samp on columns */
+export type Module_Proposals_Stddev_Samp_Fields = {
+  __typename?: "module_proposals_stddev_samp_fields";
+  module_id?: Maybe<Scalars["Float"]>;
+  proposal_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_samp() on columns of table "module_proposals" */
+export type Module_Proposals_Stddev_Samp_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** Streaming cursor of the table "module_proposals" */
+export type Module_Proposals_Stream_Cursor_Input = {
+  /** Stream column input with initial value */
+  initial_value: Module_Proposals_Stream_Cursor_Value_Input;
+  /** cursor ordering */
+  ordering?: InputMaybe<Cursor_Ordering>;
+};
+
+/** Initial value of the column from where the streaming should start */
+export type Module_Proposals_Stream_Cursor_Value_Input = {
+  module_id?: InputMaybe<Scalars["Int"]>;
+  proposal_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** aggregate sum on columns */
+export type Module_Proposals_Sum_Fields = {
+  __typename?: "module_proposals_sum_fields";
+  module_id?: Maybe<Scalars["Int"]>;
+  proposal_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by sum() on columns of table "module_proposals" */
+export type Module_Proposals_Sum_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+export type Module_Proposals_Updates = {
+  /** increments the numeric columns with given value of the filtered values */
+  _inc?: InputMaybe<Module_Proposals_Inc_Input>;
+  /** sets the columns of the filtered rows to the given values */
+  _set?: InputMaybe<Module_Proposals_Set_Input>;
+  /** filter the rows which have to be updated */
+  where: Module_Proposals_Bool_Exp;
+};
+
+/** aggregate var_pop on columns */
+export type Module_Proposals_Var_Pop_Fields = {
+  __typename?: "module_proposals_var_pop_fields";
+  module_id?: Maybe<Scalars["Float"]>;
+  proposal_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_pop() on columns of table "module_proposals" */
+export type Module_Proposals_Var_Pop_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate var_samp on columns */
+export type Module_Proposals_Var_Samp_Fields = {
+  __typename?: "module_proposals_var_samp_fields";
+  module_id?: Maybe<Scalars["Float"]>;
+  proposal_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_samp() on columns of table "module_proposals" */
+export type Module_Proposals_Var_Samp_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate variance on columns */
+export type Module_Proposals_Variance_Fields = {
+  __typename?: "module_proposals_variance_fields";
+  module_id?: Maybe<Scalars["Float"]>;
+  proposal_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by variance() on columns of table "module_proposals" */
+export type Module_Proposals_Variance_Order_By = {
+  module_id?: InputMaybe<Order_By>;
+  proposal_id?: InputMaybe<Order_By>;
+};
+
+/** columns and relationships of "module_transactions" */
+export type Module_Transactions = {
+  __typename?: "module_transactions";
+  /** An object relationship */
+  block: Blocks;
+  block_height: Scalars["Int"];
+  is_entry: Scalars["Boolean"];
+  /** An object relationship */
+  module: Modules;
+  module_id: Scalars["Int"];
+  /** An object relationship */
+  transaction: Transactions;
+  tx_id: Scalars["Int"];
+};
+
+/** aggregated selection of "module_transactions" */
+export type Module_Transactions_Aggregate = {
+  __typename?: "module_transactions_aggregate";
+  aggregate?: Maybe<Module_Transactions_Aggregate_Fields>;
+  nodes: Array<Module_Transactions>;
+};
+
+export type Module_Transactions_Aggregate_Bool_Exp = {
+  bool_and?: InputMaybe<Module_Transactions_Aggregate_Bool_Exp_Bool_And>;
+  bool_or?: InputMaybe<Module_Transactions_Aggregate_Bool_Exp_Bool_Or>;
+  count?: InputMaybe<Module_Transactions_Aggregate_Bool_Exp_Count>;
+};
+
+export type Module_Transactions_Aggregate_Bool_Exp_Bool_And = {
+  arguments: Module_Transactions_Select_Column_Module_Transactions_Aggregate_Bool_Exp_Bool_And_Arguments_Columns;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+  filter?: InputMaybe<Module_Transactions_Bool_Exp>;
+  predicate: Boolean_Comparison_Exp;
+};
+
+export type Module_Transactions_Aggregate_Bool_Exp_Bool_Or = {
+  arguments: Module_Transactions_Select_Column_Module_Transactions_Aggregate_Bool_Exp_Bool_Or_Arguments_Columns;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+  filter?: InputMaybe<Module_Transactions_Bool_Exp>;
+  predicate: Boolean_Comparison_Exp;
+};
+
+export type Module_Transactions_Aggregate_Bool_Exp_Count = {
+  arguments?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+  filter?: InputMaybe<Module_Transactions_Bool_Exp>;
+  predicate: Int_Comparison_Exp;
+};
+
+/** aggregate fields of "module_transactions" */
+export type Module_Transactions_Aggregate_Fields = {
+  __typename?: "module_transactions_aggregate_fields";
+  avg?: Maybe<Module_Transactions_Avg_Fields>;
+  count: Scalars["Int"];
+  max?: Maybe<Module_Transactions_Max_Fields>;
+  min?: Maybe<Module_Transactions_Min_Fields>;
+  stddev?: Maybe<Module_Transactions_Stddev_Fields>;
+  stddev_pop?: Maybe<Module_Transactions_Stddev_Pop_Fields>;
+  stddev_samp?: Maybe<Module_Transactions_Stddev_Samp_Fields>;
+  sum?: Maybe<Module_Transactions_Sum_Fields>;
+  var_pop?: Maybe<Module_Transactions_Var_Pop_Fields>;
+  var_samp?: Maybe<Module_Transactions_Var_Samp_Fields>;
+  variance?: Maybe<Module_Transactions_Variance_Fields>;
+};
+
+/** aggregate fields of "module_transactions" */
+export type Module_Transactions_Aggregate_FieldsCountArgs = {
+  columns?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+};
+
+/** order by aggregate values of table "module_transactions" */
+export type Module_Transactions_Aggregate_Order_By = {
+  avg?: InputMaybe<Module_Transactions_Avg_Order_By>;
+  count?: InputMaybe<Order_By>;
+  max?: InputMaybe<Module_Transactions_Max_Order_By>;
+  min?: InputMaybe<Module_Transactions_Min_Order_By>;
+  stddev?: InputMaybe<Module_Transactions_Stddev_Order_By>;
+  stddev_pop?: InputMaybe<Module_Transactions_Stddev_Pop_Order_By>;
+  stddev_samp?: InputMaybe<Module_Transactions_Stddev_Samp_Order_By>;
+  sum?: InputMaybe<Module_Transactions_Sum_Order_By>;
+  var_pop?: InputMaybe<Module_Transactions_Var_Pop_Order_By>;
+  var_samp?: InputMaybe<Module_Transactions_Var_Samp_Order_By>;
+  variance?: InputMaybe<Module_Transactions_Variance_Order_By>;
+};
+
+/** input type for inserting array relation for remote table "module_transactions" */
+export type Module_Transactions_Arr_Rel_Insert_Input = {
+  data: Array<Module_Transactions_Insert_Input>;
+};
+
+/** aggregate avg on columns */
+export type Module_Transactions_Avg_Fields = {
+  __typename?: "module_transactions_avg_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+  tx_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by avg() on columns of table "module_transactions" */
+export type Module_Transactions_Avg_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** Boolean expression to filter rows from the table "module_transactions". All fields are combined with a logical 'AND'. */
+export type Module_Transactions_Bool_Exp = {
+  _and?: InputMaybe<Array<Module_Transactions_Bool_Exp>>;
+  _not?: InputMaybe<Module_Transactions_Bool_Exp>;
+  _or?: InputMaybe<Array<Module_Transactions_Bool_Exp>>;
+  block?: InputMaybe<Blocks_Bool_Exp>;
+  block_height?: InputMaybe<Int_Comparison_Exp>;
+  is_entry?: InputMaybe<Boolean_Comparison_Exp>;
+  module?: InputMaybe<Modules_Bool_Exp>;
+  module_id?: InputMaybe<Int_Comparison_Exp>;
+  transaction?: InputMaybe<Transactions_Bool_Exp>;
+  tx_id?: InputMaybe<Int_Comparison_Exp>;
+};
+
+/** input type for incrementing numeric columns in table "module_transactions" */
+export type Module_Transactions_Inc_Input = {
+  block_height?: InputMaybe<Scalars["Int"]>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+  tx_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** input type for inserting data into table "module_transactions" */
+export type Module_Transactions_Insert_Input = {
+  block?: InputMaybe<Blocks_Obj_Rel_Insert_Input>;
+  block_height?: InputMaybe<Scalars["Int"]>;
+  is_entry?: InputMaybe<Scalars["Boolean"]>;
+  module?: InputMaybe<Modules_Obj_Rel_Insert_Input>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+  transaction?: InputMaybe<Transactions_Obj_Rel_Insert_Input>;
+  tx_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** aggregate max on columns */
+export type Module_Transactions_Max_Fields = {
+  __typename?: "module_transactions_max_fields";
+  block_height?: Maybe<Scalars["Int"]>;
+  module_id?: Maybe<Scalars["Int"]>;
+  tx_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by max() on columns of table "module_transactions" */
+export type Module_Transactions_Max_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate min on columns */
+export type Module_Transactions_Min_Fields = {
+  __typename?: "module_transactions_min_fields";
+  block_height?: Maybe<Scalars["Int"]>;
+  module_id?: Maybe<Scalars["Int"]>;
+  tx_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by min() on columns of table "module_transactions" */
+export type Module_Transactions_Min_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** response of any mutation on the table "module_transactions" */
+export type Module_Transactions_Mutation_Response = {
+  __typename?: "module_transactions_mutation_response";
+  /** number of rows affected by the mutation */
+  affected_rows: Scalars["Int"];
+  /** data from the rows affected by the mutation */
+  returning: Array<Module_Transactions>;
+};
+
+/** Ordering options when selecting data from "module_transactions". */
+export type Module_Transactions_Order_By = {
+  block?: InputMaybe<Blocks_Order_By>;
+  block_height?: InputMaybe<Order_By>;
+  is_entry?: InputMaybe<Order_By>;
+  module?: InputMaybe<Modules_Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  transaction?: InputMaybe<Transactions_Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** select columns of table "module_transactions" */
+export enum Module_Transactions_Select_Column {
+  /** column name */
+  BlockHeight = "block_height",
+  /** column name */
+  IsEntry = "is_entry",
+  /** column name */
+  ModuleId = "module_id",
+  /** column name */
+  TxId = "tx_id",
+}
+
+/** select "module_transactions_aggregate_bool_exp_bool_and_arguments_columns" columns of table "module_transactions" */
+export enum Module_Transactions_Select_Column_Module_Transactions_Aggregate_Bool_Exp_Bool_And_Arguments_Columns {
+  /** column name */
+  IsEntry = "is_entry",
+}
+
+/** select "module_transactions_aggregate_bool_exp_bool_or_arguments_columns" columns of table "module_transactions" */
+export enum Module_Transactions_Select_Column_Module_Transactions_Aggregate_Bool_Exp_Bool_Or_Arguments_Columns {
+  /** column name */
+  IsEntry = "is_entry",
+}
+
+/** input type for updating data in table "module_transactions" */
+export type Module_Transactions_Set_Input = {
+  block_height?: InputMaybe<Scalars["Int"]>;
+  is_entry?: InputMaybe<Scalars["Boolean"]>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+  tx_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** aggregate stddev on columns */
+export type Module_Transactions_Stddev_Fields = {
+  __typename?: "module_transactions_stddev_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+  tx_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev() on columns of table "module_transactions" */
+export type Module_Transactions_Stddev_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_pop on columns */
+export type Module_Transactions_Stddev_Pop_Fields = {
+  __typename?: "module_transactions_stddev_pop_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+  tx_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_pop() on columns of table "module_transactions" */
+export type Module_Transactions_Stddev_Pop_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_samp on columns */
+export type Module_Transactions_Stddev_Samp_Fields = {
+  __typename?: "module_transactions_stddev_samp_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+  tx_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_samp() on columns of table "module_transactions" */
+export type Module_Transactions_Stddev_Samp_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** Streaming cursor of the table "module_transactions" */
+export type Module_Transactions_Stream_Cursor_Input = {
+  /** Stream column input with initial value */
+  initial_value: Module_Transactions_Stream_Cursor_Value_Input;
+  /** cursor ordering */
+  ordering?: InputMaybe<Cursor_Ordering>;
+};
+
+/** Initial value of the column from where the streaming should start */
+export type Module_Transactions_Stream_Cursor_Value_Input = {
+  block_height?: InputMaybe<Scalars["Int"]>;
+  is_entry?: InputMaybe<Scalars["Boolean"]>;
+  module_id?: InputMaybe<Scalars["Int"]>;
+  tx_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** aggregate sum on columns */
+export type Module_Transactions_Sum_Fields = {
+  __typename?: "module_transactions_sum_fields";
+  block_height?: Maybe<Scalars["Int"]>;
+  module_id?: Maybe<Scalars["Int"]>;
+  tx_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by sum() on columns of table "module_transactions" */
+export type Module_Transactions_Sum_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+export type Module_Transactions_Updates = {
+  /** increments the numeric columns with given value of the filtered values */
+  _inc?: InputMaybe<Module_Transactions_Inc_Input>;
+  /** sets the columns of the filtered rows to the given values */
+  _set?: InputMaybe<Module_Transactions_Set_Input>;
+  /** filter the rows which have to be updated */
+  where: Module_Transactions_Bool_Exp;
+};
+
+/** aggregate var_pop on columns */
+export type Module_Transactions_Var_Pop_Fields = {
+  __typename?: "module_transactions_var_pop_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+  tx_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_pop() on columns of table "module_transactions" */
+export type Module_Transactions_Var_Pop_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate var_samp on columns */
+export type Module_Transactions_Var_Samp_Fields = {
+  __typename?: "module_transactions_var_samp_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+  tx_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_samp() on columns of table "module_transactions" */
+export type Module_Transactions_Var_Samp_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate variance on columns */
+export type Module_Transactions_Variance_Fields = {
+  __typename?: "module_transactions_variance_fields";
+  block_height?: Maybe<Scalars["Float"]>;
+  module_id?: Maybe<Scalars["Float"]>;
+  tx_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by variance() on columns of table "module_transactions" */
+export type Module_Transactions_Variance_Order_By = {
+  block_height?: InputMaybe<Order_By>;
+  module_id?: InputMaybe<Order_By>;
+  tx_id?: InputMaybe<Order_By>;
+};
+
+/** columns and relationships of "modules" */
+export type Modules = {
+  __typename?: "modules";
+  id: Scalars["Int"];
+  module_entry_executed: Scalars["Int"];
+  /** An array relationship */
+  module_histories: Array<Module_Histories>;
+  /** An aggregate relationship */
+  module_histories_aggregate: Module_Histories_Aggregate;
+  /** An array relationship */
+  module_proposals: Array<Module_Proposals>;
+  /** An aggregate relationship */
+  module_proposals_aggregate: Module_Proposals_Aggregate;
+  /** An array relationship */
+  module_transactions: Array<Module_Transactions>;
+  /** An aggregate relationship */
+  module_transactions_aggregate: Module_Transactions_Aggregate;
+  name: Scalars["String"];
+  publish_tx_id?: Maybe<Scalars["Int"]>;
+  publisher_id: Scalars["Int"];
+  /** An object relationship */
+  transaction?: Maybe<Transactions>;
+  upgrade_policy: Scalars["upgradepolicy"];
+  /** An object relationship */
+  vm_address: Vm_Addresses;
+};
+
+/** columns and relationships of "modules" */
+export type ModulesModule_HistoriesArgs = {
+  distinct_on?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Histories_Order_By>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+/** columns and relationships of "modules" */
+export type ModulesModule_Histories_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Histories_Order_By>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+/** columns and relationships of "modules" */
+export type ModulesModule_ProposalsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Proposals_Order_By>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+/** columns and relationships of "modules" */
+export type ModulesModule_Proposals_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Proposals_Order_By>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+/** columns and relationships of "modules" */
+export type ModulesModule_TransactionsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+/** columns and relationships of "modules" */
+export type ModulesModule_Transactions_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+/** aggregated selection of "modules" */
+export type Modules_Aggregate = {
+  __typename?: "modules_aggregate";
+  aggregate?: Maybe<Modules_Aggregate_Fields>;
+  nodes: Array<Modules>;
+};
+
+export type Modules_Aggregate_Bool_Exp = {
+  count?: InputMaybe<Modules_Aggregate_Bool_Exp_Count>;
+};
+
+export type Modules_Aggregate_Bool_Exp_Count = {
+  arguments?: InputMaybe<Array<Modules_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+  filter?: InputMaybe<Modules_Bool_Exp>;
+  predicate: Int_Comparison_Exp;
+};
+
+/** aggregate fields of "modules" */
+export type Modules_Aggregate_Fields = {
+  __typename?: "modules_aggregate_fields";
+  avg?: Maybe<Modules_Avg_Fields>;
+  count: Scalars["Int"];
+  max?: Maybe<Modules_Max_Fields>;
+  min?: Maybe<Modules_Min_Fields>;
+  stddev?: Maybe<Modules_Stddev_Fields>;
+  stddev_pop?: Maybe<Modules_Stddev_Pop_Fields>;
+  stddev_samp?: Maybe<Modules_Stddev_Samp_Fields>;
+  sum?: Maybe<Modules_Sum_Fields>;
+  var_pop?: Maybe<Modules_Var_Pop_Fields>;
+  var_samp?: Maybe<Modules_Var_Samp_Fields>;
+  variance?: Maybe<Modules_Variance_Fields>;
+};
+
+/** aggregate fields of "modules" */
+export type Modules_Aggregate_FieldsCountArgs = {
+  columns?: InputMaybe<Array<Modules_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+};
+
+/** order by aggregate values of table "modules" */
+export type Modules_Aggregate_Order_By = {
+  avg?: InputMaybe<Modules_Avg_Order_By>;
+  count?: InputMaybe<Order_By>;
+  max?: InputMaybe<Modules_Max_Order_By>;
+  min?: InputMaybe<Modules_Min_Order_By>;
+  stddev?: InputMaybe<Modules_Stddev_Order_By>;
+  stddev_pop?: InputMaybe<Modules_Stddev_Pop_Order_By>;
+  stddev_samp?: InputMaybe<Modules_Stddev_Samp_Order_By>;
+  sum?: InputMaybe<Modules_Sum_Order_By>;
+  var_pop?: InputMaybe<Modules_Var_Pop_Order_By>;
+  var_samp?: InputMaybe<Modules_Var_Samp_Order_By>;
+  variance?: InputMaybe<Modules_Variance_Order_By>;
+};
+
+/** input type for inserting array relation for remote table "modules" */
+export type Modules_Arr_Rel_Insert_Input = {
+  data: Array<Modules_Insert_Input>;
+  /** upsert condition */
+  on_conflict?: InputMaybe<Modules_On_Conflict>;
+};
+
+/** aggregate avg on columns */
+export type Modules_Avg_Fields = {
+  __typename?: "modules_avg_fields";
+  id?: Maybe<Scalars["Float"]>;
+  module_entry_executed?: Maybe<Scalars["Float"]>;
+  publish_tx_id?: Maybe<Scalars["Float"]>;
+  publisher_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by avg() on columns of table "modules" */
+export type Modules_Avg_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+};
+
+/** Boolean expression to filter rows from the table "modules". All fields are combined with a logical 'AND'. */
+export type Modules_Bool_Exp = {
+  _and?: InputMaybe<Array<Modules_Bool_Exp>>;
+  _not?: InputMaybe<Modules_Bool_Exp>;
+  _or?: InputMaybe<Array<Modules_Bool_Exp>>;
+  id?: InputMaybe<Int_Comparison_Exp>;
+  module_entry_executed?: InputMaybe<Int_Comparison_Exp>;
+  module_histories?: InputMaybe<Module_Histories_Bool_Exp>;
+  module_histories_aggregate?: InputMaybe<Module_Histories_Aggregate_Bool_Exp>;
+  module_proposals?: InputMaybe<Module_Proposals_Bool_Exp>;
+  module_proposals_aggregate?: InputMaybe<Module_Proposals_Aggregate_Bool_Exp>;
+  module_transactions?: InputMaybe<Module_Transactions_Bool_Exp>;
+  module_transactions_aggregate?: InputMaybe<Module_Transactions_Aggregate_Bool_Exp>;
+  name?: InputMaybe<String_Comparison_Exp>;
+  publish_tx_id?: InputMaybe<Int_Comparison_Exp>;
+  publisher_id?: InputMaybe<Int_Comparison_Exp>;
+  transaction?: InputMaybe<Transactions_Bool_Exp>;
+  upgrade_policy?: InputMaybe<Upgradepolicy_Comparison_Exp>;
+  vm_address?: InputMaybe<Vm_Addresses_Bool_Exp>;
+};
+
+/** unique or primary key constraints on table "modules" */
+export enum Modules_Constraint {
+  /** unique or primary key constraint on columns "id" */
+  ModulesIdKey = "modules_id_key",
+  /** unique or primary key constraint on columns "publisher_id", "name" */
+  ModulesPkey = "modules_pkey",
+}
+
+/** input type for incrementing numeric columns in table "modules" */
+export type Modules_Inc_Input = {
+  id?: InputMaybe<Scalars["Int"]>;
+  module_entry_executed?: InputMaybe<Scalars["Int"]>;
+  publish_tx_id?: InputMaybe<Scalars["Int"]>;
+  publisher_id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** input type for inserting data into table "modules" */
+export type Modules_Insert_Input = {
+  id?: InputMaybe<Scalars["Int"]>;
+  module_entry_executed?: InputMaybe<Scalars["Int"]>;
+  module_histories?: InputMaybe<Module_Histories_Arr_Rel_Insert_Input>;
+  module_proposals?: InputMaybe<Module_Proposals_Arr_Rel_Insert_Input>;
+  module_transactions?: InputMaybe<Module_Transactions_Arr_Rel_Insert_Input>;
+  name?: InputMaybe<Scalars["String"]>;
+  publish_tx_id?: InputMaybe<Scalars["Int"]>;
+  publisher_id?: InputMaybe<Scalars["Int"]>;
+  transaction?: InputMaybe<Transactions_Obj_Rel_Insert_Input>;
+  upgrade_policy?: InputMaybe<Scalars["upgradepolicy"]>;
+  vm_address?: InputMaybe<Vm_Addresses_Obj_Rel_Insert_Input>;
+};
+
+/** aggregate max on columns */
+export type Modules_Max_Fields = {
+  __typename?: "modules_max_fields";
+  id?: Maybe<Scalars["Int"]>;
+  module_entry_executed?: Maybe<Scalars["Int"]>;
+  name?: Maybe<Scalars["String"]>;
+  publish_tx_id?: Maybe<Scalars["Int"]>;
+  publisher_id?: Maybe<Scalars["Int"]>;
+  upgrade_policy?: Maybe<Scalars["upgradepolicy"]>;
+};
+
+/** order by max() on columns of table "modules" */
+export type Modules_Max_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  name?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+  upgrade_policy?: InputMaybe<Order_By>;
+};
+
+/** aggregate min on columns */
+export type Modules_Min_Fields = {
+  __typename?: "modules_min_fields";
+  id?: Maybe<Scalars["Int"]>;
+  module_entry_executed?: Maybe<Scalars["Int"]>;
+  name?: Maybe<Scalars["String"]>;
+  publish_tx_id?: Maybe<Scalars["Int"]>;
+  publisher_id?: Maybe<Scalars["Int"]>;
+  upgrade_policy?: Maybe<Scalars["upgradepolicy"]>;
+};
+
+/** order by min() on columns of table "modules" */
+export type Modules_Min_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  name?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+  upgrade_policy?: InputMaybe<Order_By>;
+};
+
+/** response of any mutation on the table "modules" */
+export type Modules_Mutation_Response = {
+  __typename?: "modules_mutation_response";
+  /** number of rows affected by the mutation */
+  affected_rows: Scalars["Int"];
+  /** data from the rows affected by the mutation */
+  returning: Array<Modules>;
+};
+
+/** input type for inserting object relation for remote table "modules" */
+export type Modules_Obj_Rel_Insert_Input = {
+  data: Modules_Insert_Input;
+  /** upsert condition */
+  on_conflict?: InputMaybe<Modules_On_Conflict>;
+};
+
+/** on_conflict condition type for table "modules" */
+export type Modules_On_Conflict = {
+  constraint: Modules_Constraint;
+  update_columns?: Array<Modules_Update_Column>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
+/** Ordering options when selecting data from "modules". */
+export type Modules_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  module_histories_aggregate?: InputMaybe<Module_Histories_Aggregate_Order_By>;
+  module_proposals_aggregate?: InputMaybe<Module_Proposals_Aggregate_Order_By>;
+  module_transactions_aggregate?: InputMaybe<Module_Transactions_Aggregate_Order_By>;
+  name?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+  transaction?: InputMaybe<Transactions_Order_By>;
+  upgrade_policy?: InputMaybe<Order_By>;
+  vm_address?: InputMaybe<Vm_Addresses_Order_By>;
+};
+
+/** primary key columns input for table: modules */
+export type Modules_Pk_Columns_Input = {
+  name: Scalars["String"];
+  publisher_id: Scalars["Int"];
+};
+
+/** select columns of table "modules" */
+export enum Modules_Select_Column {
+  /** column name */
+  Id = "id",
+  /** column name */
+  ModuleEntryExecuted = "module_entry_executed",
+  /** column name */
+  Name = "name",
+  /** column name */
+  PublishTxId = "publish_tx_id",
+  /** column name */
+  PublisherId = "publisher_id",
+  /** column name */
+  UpgradePolicy = "upgrade_policy",
+}
+
+/** input type for updating data in table "modules" */
+export type Modules_Set_Input = {
+  id?: InputMaybe<Scalars["Int"]>;
+  module_entry_executed?: InputMaybe<Scalars["Int"]>;
+  name?: InputMaybe<Scalars["String"]>;
+  publish_tx_id?: InputMaybe<Scalars["Int"]>;
+  publisher_id?: InputMaybe<Scalars["Int"]>;
+  upgrade_policy?: InputMaybe<Scalars["upgradepolicy"]>;
+};
+
+/** aggregate stddev on columns */
+export type Modules_Stddev_Fields = {
+  __typename?: "modules_stddev_fields";
+  id?: Maybe<Scalars["Float"]>;
+  module_entry_executed?: Maybe<Scalars["Float"]>;
+  publish_tx_id?: Maybe<Scalars["Float"]>;
+  publisher_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev() on columns of table "modules" */
+export type Modules_Stddev_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_pop on columns */
+export type Modules_Stddev_Pop_Fields = {
+  __typename?: "modules_stddev_pop_fields";
+  id?: Maybe<Scalars["Float"]>;
+  module_entry_executed?: Maybe<Scalars["Float"]>;
+  publish_tx_id?: Maybe<Scalars["Float"]>;
+  publisher_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_pop() on columns of table "modules" */
+export type Modules_Stddev_Pop_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_samp on columns */
+export type Modules_Stddev_Samp_Fields = {
+  __typename?: "modules_stddev_samp_fields";
+  id?: Maybe<Scalars["Float"]>;
+  module_entry_executed?: Maybe<Scalars["Float"]>;
+  publish_tx_id?: Maybe<Scalars["Float"]>;
+  publisher_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_samp() on columns of table "modules" */
+export type Modules_Stddev_Samp_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+};
+
+/** Streaming cursor of the table "modules" */
+export type Modules_Stream_Cursor_Input = {
+  /** Stream column input with initial value */
+  initial_value: Modules_Stream_Cursor_Value_Input;
+  /** cursor ordering */
+  ordering?: InputMaybe<Cursor_Ordering>;
+};
+
+/** Initial value of the column from where the streaming should start */
+export type Modules_Stream_Cursor_Value_Input = {
+  id?: InputMaybe<Scalars["Int"]>;
+  module_entry_executed?: InputMaybe<Scalars["Int"]>;
+  name?: InputMaybe<Scalars["String"]>;
+  publish_tx_id?: InputMaybe<Scalars["Int"]>;
+  publisher_id?: InputMaybe<Scalars["Int"]>;
+  upgrade_policy?: InputMaybe<Scalars["upgradepolicy"]>;
+};
+
+/** aggregate sum on columns */
+export type Modules_Sum_Fields = {
+  __typename?: "modules_sum_fields";
+  id?: Maybe<Scalars["Int"]>;
+  module_entry_executed?: Maybe<Scalars["Int"]>;
+  publish_tx_id?: Maybe<Scalars["Int"]>;
+  publisher_id?: Maybe<Scalars["Int"]>;
+};
+
+/** order by sum() on columns of table "modules" */
+export type Modules_Sum_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+};
+
+/** update columns of table "modules" */
+export enum Modules_Update_Column {
+  /** column name */
+  Id = "id",
+  /** column name */
+  ModuleEntryExecuted = "module_entry_executed",
+  /** column name */
+  Name = "name",
+  /** column name */
+  PublishTxId = "publish_tx_id",
+  /** column name */
+  PublisherId = "publisher_id",
+  /** column name */
+  UpgradePolicy = "upgrade_policy",
+}
+
+export type Modules_Updates = {
+  /** increments the numeric columns with given value of the filtered values */
+  _inc?: InputMaybe<Modules_Inc_Input>;
+  /** sets the columns of the filtered rows to the given values */
+  _set?: InputMaybe<Modules_Set_Input>;
+  /** filter the rows which have to be updated */
+  where: Modules_Bool_Exp;
+};
+
+/** aggregate var_pop on columns */
+export type Modules_Var_Pop_Fields = {
+  __typename?: "modules_var_pop_fields";
+  id?: Maybe<Scalars["Float"]>;
+  module_entry_executed?: Maybe<Scalars["Float"]>;
+  publish_tx_id?: Maybe<Scalars["Float"]>;
+  publisher_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_pop() on columns of table "modules" */
+export type Modules_Var_Pop_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate var_samp on columns */
+export type Modules_Var_Samp_Fields = {
+  __typename?: "modules_var_samp_fields";
+  id?: Maybe<Scalars["Float"]>;
+  module_entry_executed?: Maybe<Scalars["Float"]>;
+  publish_tx_id?: Maybe<Scalars["Float"]>;
+  publisher_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_samp() on columns of table "modules" */
+export type Modules_Var_Samp_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+};
+
+/** aggregate variance on columns */
+export type Modules_Variance_Fields = {
+  __typename?: "modules_variance_fields";
+  id?: Maybe<Scalars["Float"]>;
+  module_entry_executed?: Maybe<Scalars["Float"]>;
+  publish_tx_id?: Maybe<Scalars["Float"]>;
+  publisher_id?: Maybe<Scalars["Float"]>;
+};
+
+/** order by variance() on columns of table "modules" */
+export type Modules_Variance_Order_By = {
+  id?: InputMaybe<Order_By>;
+  module_entry_executed?: InputMaybe<Order_By>;
+  publish_tx_id?: InputMaybe<Order_By>;
+  publisher_id?: InputMaybe<Order_By>;
+};
+
+/** mutation root */
+export type Mutation_Root = {
+  __typename?: "mutation_root";
+  /** delete data from the table: "account_transactions" */
+  delete_account_transactions?: Maybe<Account_Transactions_Mutation_Response>;
+  /** delete single row from the table: "account_transactions" */
+  delete_account_transactions_by_pk?: Maybe<Account_Transactions>;
+  /** delete data from the table: "accounts" */
+  delete_accounts?: Maybe<Accounts_Mutation_Response>;
+  /** delete single row from the table: "accounts" */
+  delete_accounts_by_pk?: Maybe<Accounts>;
+  /** delete data from the table: "begin_block_events" */
+  delete_begin_block_events?: Maybe<Begin_Block_Events_Mutation_Response>;
+  /** delete data from the table: "blocks" */
+  delete_blocks?: Maybe<Blocks_Mutation_Response>;
+  /** delete single row from the table: "blocks" */
+  delete_blocks_by_pk?: Maybe<Blocks>;
+  /** delete data from the table: "code_proposals" */
+  delete_code_proposals?: Maybe<Code_Proposals_Mutation_Response>;
+  /** delete data from the table: "codes" */
+  delete_codes?: Maybe<Codes_Mutation_Response>;
+  /** delete single row from the table: "codes" */
+  delete_codes_by_pk?: Maybe<Codes>;
+  /** delete data from the table: "contract_histories" */
+  delete_contract_histories?: Maybe<Contract_Histories_Mutation_Response>;
+  /** delete data from the table: "contract_proposals" */
+  delete_contract_proposals?: Maybe<Contract_Proposals_Mutation_Response>;
+  /** delete data from the table: "contract_transactions" */
+  delete_contract_transactions?: Maybe<Contract_Transactions_Mutation_Response>;
+  /** delete data from the table: "contract_transactions_view" */
+  delete_contract_transactions_view?: Maybe<Contract_Transactions_View_Mutation_Response>;
+  /** delete data from the table: "contracts" */
+  delete_contracts?: Maybe<Contracts_Mutation_Response>;
+  /** delete single row from the table: "contracts" */
+  delete_contracts_by_pk?: Maybe<Contracts>;
+  /** delete data from the table: "end_block_events" */
+  delete_end_block_events?: Maybe<End_Block_Events_Mutation_Response>;
+  /** delete data from the table: "lcd_tx_results" */
+  delete_lcd_tx_results?: Maybe<Lcd_Tx_Results_Mutation_Response>;
+  /** delete data from the table: "module_histories" */
+  delete_module_histories?: Maybe<Module_Histories_Mutation_Response>;
+  /** delete data from the table: "module_proposals" */
+  delete_module_proposals?: Maybe<Module_Proposals_Mutation_Response>;
+  /** delete data from the table: "module_transactions" */
+  delete_module_transactions?: Maybe<Module_Transactions_Mutation_Response>;
+  /** delete data from the table: "modules" */
+  delete_modules?: Maybe<Modules_Mutation_Response>;
+  /** delete single row from the table: "modules" */
+  delete_modules_by_pk?: Maybe<Modules>;
+  /** delete data from the table: "pool_transactions" */
+  delete_pool_transactions?: Maybe<Pool_Transactions_Mutation_Response>;
+  /** delete data from the table: "pools" */
+  delete_pools?: Maybe<Pools_Mutation_Response>;
+  /** delete single row from the table: "pools" */
+  delete_pools_by_pk?: Maybe<Pools>;
+  /** delete data from the table: "profit_by_denoms" */
+  delete_profit_by_denoms?: Maybe<Profit_By_Denoms_Mutation_Response>;
+  /** delete data from the table: "profit_by_routes" */
+  delete_profit_by_routes?: Maybe<Profit_By_Routes_Mutation_Response>;
+  /** delete data from the table: "proposals" */
+  delete_proposals?: Maybe<Proposals_Mutation_Response>;
+  /** delete single row from the table: "proposals" */
+  delete_proposals_by_pk?: Maybe<Proposals>;
+  /** delete data from the table: "taker_fee" */
+  delete_taker_fee?: Maybe<Taker_Fee_Mutation_Response>;
+  /** delete single row from the table: "taker_fee" */
+  delete_taker_fee_by_pk?: Maybe<Taker_Fee>;
+  /** delete data from the table: "tracking" */
+  delete_tracking?: Maybe<Tracking_Mutation_Response>;
+  /** delete single row from the table: "tracking" */
+  delete_tracking_by_pk?: Maybe<Tracking>;
+  /** delete data from the table: "trade_by_routes" */
+  delete_trade_by_routes?: Maybe<Trade_By_Routes_Mutation_Response>;
+  /** delete data from the table: "trades" */
+  delete_trades?: Maybe<Trades_Mutation_Response>;
+  /** delete data from the table: "transactions" */
+  delete_transactions?: Maybe<Transactions_Mutation_Response>;
+  /** delete single row from the table: "transactions" */
+  delete_transactions_by_pk?: Maybe<Transactions>;
+  /** delete data from the table: "validators" */
+  delete_validators?: Maybe<Validators_Mutation_Response>;
+  /** delete single row from the table: "validators" */
+  delete_validators_by_pk?: Maybe<Validators>;
+  /** delete data from the table: "vm_addresses" */
+  delete_vm_addresses?: Maybe<Vm_Addresses_Mutation_Response>;
+  /** delete single row from the table: "vm_addresses" */
+  delete_vm_addresses_by_pk?: Maybe<Vm_Addresses>;
+  /** insert data into the table: "account_transactions" */
+  insert_account_transactions?: Maybe<Account_Transactions_Mutation_Response>;
+  /** insert a single row into the table: "account_transactions" */
+  insert_account_transactions_one?: Maybe<Account_Transactions>;
+  /** insert data into the table: "accounts" */
+  insert_accounts?: Maybe<Accounts_Mutation_Response>;
+  /** insert a single row into the table: "accounts" */
+  insert_accounts_one?: Maybe<Accounts>;
+  /** insert data into the table: "begin_block_events" */
+  insert_begin_block_events?: Maybe<Begin_Block_Events_Mutation_Response>;
+  /** insert a single row into the table: "begin_block_events" */
+  insert_begin_block_events_one?: Maybe<Begin_Block_Events>;
+  /** insert data into the table: "blocks" */
+  insert_blocks?: Maybe<Blocks_Mutation_Response>;
+  /** insert a single row into the table: "blocks" */
+  insert_blocks_one?: Maybe<Blocks>;
+  /** insert data into the table: "code_proposals" */
+  insert_code_proposals?: Maybe<Code_Proposals_Mutation_Response>;
+  /** insert a single row into the table: "code_proposals" */
+  insert_code_proposals_one?: Maybe<Code_Proposals>;
+  /** insert data into the table: "codes" */
+  insert_codes?: Maybe<Codes_Mutation_Response>;
+  /** insert a single row into the table: "codes" */
+  insert_codes_one?: Maybe<Codes>;
+  /** insert data into the table: "contract_histories" */
+  insert_contract_histories?: Maybe<Contract_Histories_Mutation_Response>;
+  /** insert a single row into the table: "contract_histories" */
+  insert_contract_histories_one?: Maybe<Contract_Histories>;
+  /** insert data into the table: "contract_proposals" */
+  insert_contract_proposals?: Maybe<Contract_Proposals_Mutation_Response>;
+  /** insert a single row into the table: "contract_proposals" */
+  insert_contract_proposals_one?: Maybe<Contract_Proposals>;
+  /** insert data into the table: "contract_transactions" */
+  insert_contract_transactions?: Maybe<Contract_Transactions_Mutation_Response>;
+  /** insert a single row into the table: "contract_transactions" */
+  insert_contract_transactions_one?: Maybe<Contract_Transactions>;
+  /** insert data into the table: "contract_transactions_view" */
+  insert_contract_transactions_view?: Maybe<Contract_Transactions_View_Mutation_Response>;
+  /** insert a single row into the table: "contract_transactions_view" */
+  insert_contract_transactions_view_one?: Maybe<Contract_Transactions_View>;
+  /** insert data into the table: "contracts" */
+  insert_contracts?: Maybe<Contracts_Mutation_Response>;
+  /** insert a single row into the table: "contracts" */
+  insert_contracts_one?: Maybe<Contracts>;
+  /** insert data into the table: "end_block_events" */
+  insert_end_block_events?: Maybe<End_Block_Events_Mutation_Response>;
+  /** insert a single row into the table: "end_block_events" */
+  insert_end_block_events_one?: Maybe<End_Block_Events>;
+  /** insert data into the table: "lcd_tx_results" */
+  insert_lcd_tx_results?: Maybe<Lcd_Tx_Results_Mutation_Response>;
+  /** insert a single row into the table: "lcd_tx_results" */
+  insert_lcd_tx_results_one?: Maybe<Lcd_Tx_Results>;
+  /** insert data into the table: "module_histories" */
+  insert_module_histories?: Maybe<Module_Histories_Mutation_Response>;
+  /** insert a single row into the table: "module_histories" */
+  insert_module_histories_one?: Maybe<Module_Histories>;
+  /** insert data into the table: "module_proposals" */
+  insert_module_proposals?: Maybe<Module_Proposals_Mutation_Response>;
+  /** insert a single row into the table: "module_proposals" */
+  insert_module_proposals_one?: Maybe<Module_Proposals>;
+  /** insert data into the table: "module_transactions" */
+  insert_module_transactions?: Maybe<Module_Transactions_Mutation_Response>;
+  /** insert a single row into the table: "module_transactions" */
+  insert_module_transactions_one?: Maybe<Module_Transactions>;
+  /** insert data into the table: "modules" */
+  insert_modules?: Maybe<Modules_Mutation_Response>;
+  /** insert a single row into the table: "modules" */
+  insert_modules_one?: Maybe<Modules>;
+  /** insert data into the table: "pool_transactions" */
+  insert_pool_transactions?: Maybe<Pool_Transactions_Mutation_Response>;
+  /** insert a single row into the table: "pool_transactions" */
+  insert_pool_transactions_one?: Maybe<Pool_Transactions>;
+  /** insert data into the table: "pools" */
+  insert_pools?: Maybe<Pools_Mutation_Response>;
+  /** insert a single row into the table: "pools" */
+  insert_pools_one?: Maybe<Pools>;
+  /** insert data into the table: "profit_by_denoms" */
+  insert_profit_by_denoms?: Maybe<Profit_By_Denoms_Mutation_Response>;
+  /** insert a single row into the table: "profit_by_denoms" */
+  insert_profit_by_denoms_one?: Maybe<Profit_By_Denoms>;
+  /** insert data into the table: "profit_by_routes" */
+  insert_profit_by_routes?: Maybe<Profit_By_Routes_Mutation_Response>;
+  /** insert a single row into the table: "profit_by_routes" */
+  insert_profit_by_routes_one?: Maybe<Profit_By_Routes>;
+  /** insert data into the table: "proposals" */
+  insert_proposals?: Maybe<Proposals_Mutation_Response>;
+  /** insert a single row into the table: "proposals" */
+  insert_proposals_one?: Maybe<Proposals>;
+  /** insert data into the table: "taker_fee" */
+  insert_taker_fee?: Maybe<Taker_Fee_Mutation_Response>;
+  /** insert a single row into the table: "taker_fee" */
+  insert_taker_fee_one?: Maybe<Taker_Fee>;
+  /** insert data into the table: "tracking" */
+  insert_tracking?: Maybe<Tracking_Mutation_Response>;
+  /** insert a single row into the table: "tracking" */
+  insert_tracking_one?: Maybe<Tracking>;
+  /** insert data into the table: "trade_by_routes" */
+  insert_trade_by_routes?: Maybe<Trade_By_Routes_Mutation_Response>;
+  /** insert a single row into the table: "trade_by_routes" */
+  insert_trade_by_routes_one?: Maybe<Trade_By_Routes>;
+  /** insert data into the table: "trades" */
+  insert_trades?: Maybe<Trades_Mutation_Response>;
+  /** insert a single row into the table: "trades" */
+  insert_trades_one?: Maybe<Trades>;
+  /** insert data into the table: "transactions" */
+  insert_transactions?: Maybe<Transactions_Mutation_Response>;
+  /** insert a single row into the table: "transactions" */
+  insert_transactions_one?: Maybe<Transactions>;
+  /** insert data into the table: "validators" */
+  insert_validators?: Maybe<Validators_Mutation_Response>;
+  /** insert a single row into the table: "validators" */
+  insert_validators_one?: Maybe<Validators>;
+  /** insert data into the table: "vm_addresses" */
+  insert_vm_addresses?: Maybe<Vm_Addresses_Mutation_Response>;
+  /** insert a single row into the table: "vm_addresses" */
+  insert_vm_addresses_one?: Maybe<Vm_Addresses>;
+  /** update data of the table: "account_transactions" */
+  update_account_transactions?: Maybe<Account_Transactions_Mutation_Response>;
+  /** update single row of the table: "account_transactions" */
   update_account_transactions_by_pk?: Maybe<Account_Transactions>;
   /** update multiples rows of table: "account_transactions" */
   update_account_transactions_many?: Maybe<
@@ -5357,6 +7007,30 @@ export type Mutation_Root = {
   update_lcd_tx_results_many?: Maybe<
     Array<Maybe<Lcd_Tx_Results_Mutation_Response>>
   >;
+  /** update data of the table: "module_histories" */
+  update_module_histories?: Maybe<Module_Histories_Mutation_Response>;
+  /** update multiples rows of table: "module_histories" */
+  update_module_histories_many?: Maybe<
+    Array<Maybe<Module_Histories_Mutation_Response>>
+  >;
+  /** update data of the table: "module_proposals" */
+  update_module_proposals?: Maybe<Module_Proposals_Mutation_Response>;
+  /** update multiples rows of table: "module_proposals" */
+  update_module_proposals_many?: Maybe<
+    Array<Maybe<Module_Proposals_Mutation_Response>>
+  >;
+  /** update data of the table: "module_transactions" */
+  update_module_transactions?: Maybe<Module_Transactions_Mutation_Response>;
+  /** update multiples rows of table: "module_transactions" */
+  update_module_transactions_many?: Maybe<
+    Array<Maybe<Module_Transactions_Mutation_Response>>
+  >;
+  /** update data of the table: "modules" */
+  update_modules?: Maybe<Modules_Mutation_Response>;
+  /** update single row of the table: "modules" */
+  update_modules_by_pk?: Maybe<Modules>;
+  /** update multiples rows of table: "modules" */
+  update_modules_many?: Maybe<Array<Maybe<Modules_Mutation_Response>>>;
   /** update data of the table: "pool_transactions" */
   update_pool_transactions?: Maybe<Pool_Transactions_Mutation_Response>;
   /** update multiples rows of table: "pool_transactions" */
@@ -5387,6 +7061,12 @@ export type Mutation_Root = {
   update_proposals_by_pk?: Maybe<Proposals>;
   /** update multiples rows of table: "proposals" */
   update_proposals_many?: Maybe<Array<Maybe<Proposals_Mutation_Response>>>;
+  /** update data of the table: "taker_fee" */
+  update_taker_fee?: Maybe<Taker_Fee_Mutation_Response>;
+  /** update single row of the table: "taker_fee" */
+  update_taker_fee_by_pk?: Maybe<Taker_Fee>;
+  /** update multiples rows of table: "taker_fee" */
+  update_taker_fee_many?: Maybe<Array<Maybe<Taker_Fee_Mutation_Response>>>;
   /** update data of the table: "tracking" */
   update_tracking?: Maybe<Tracking_Mutation_Response>;
   /** update single row of the table: "tracking" */
@@ -5417,6 +7097,14 @@ export type Mutation_Root = {
   update_validators_by_pk?: Maybe<Validators>;
   /** update multiples rows of table: "validators" */
   update_validators_many?: Maybe<Array<Maybe<Validators_Mutation_Response>>>;
+  /** update data of the table: "vm_addresses" */
+  update_vm_addresses?: Maybe<Vm_Addresses_Mutation_Response>;
+  /** update single row of the table: "vm_addresses" */
+  update_vm_addresses_by_pk?: Maybe<Vm_Addresses>;
+  /** update multiples rows of table: "vm_addresses" */
+  update_vm_addresses_many?: Maybe<
+    Array<Maybe<Vm_Addresses_Mutation_Response>>
+  >;
 };
 
 /** mutation root */
@@ -5510,6 +7198,32 @@ export type Mutation_RootDelete_Lcd_Tx_ResultsArgs = {
   where: Lcd_Tx_Results_Bool_Exp;
 };
 
+/** mutation root */
+export type Mutation_RootDelete_Module_HistoriesArgs = {
+  where: Module_Histories_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootDelete_Module_ProposalsArgs = {
+  where: Module_Proposals_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootDelete_Module_TransactionsArgs = {
+  where: Module_Transactions_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootDelete_ModulesArgs = {
+  where: Modules_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootDelete_Modules_By_PkArgs = {
+  name: Scalars["String"];
+  publisher_id: Scalars["Int"];
+};
+
 /** mutation root */
 export type Mutation_RootDelete_Pool_TransactionsArgs = {
   where: Pool_Transactions_Bool_Exp;
@@ -5545,6 +7259,17 @@ export type Mutation_RootDelete_Proposals_By_PkArgs = {
   id: Scalars["Int"];
 };
 
+/** mutation root */
+export type Mutation_RootDelete_Taker_FeeArgs = {
+  where: Taker_Fee_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootDelete_Taker_Fee_By_PkArgs = {
+  denom0: Scalars["String"];
+  denom1: Scalars["String"];
+};
+
 /** mutation root */
 export type Mutation_RootDelete_TrackingArgs = {
   where: Tracking_Bool_Exp;
@@ -5586,6 +7311,16 @@ export type Mutation_RootDelete_Validators_By_PkArgs = {
   operator_address: Scalars["String"];
 };
 
+/** mutation root */
+export type Mutation_RootDelete_Vm_AddressesArgs = {
+  where: Vm_Addresses_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootDelete_Vm_Addresses_By_PkArgs = {
+  id: Scalars["Int"];
+};
+
 /** mutation root */
 export type Mutation_RootInsert_Account_TransactionsArgs = {
   objects: Array<Account_Transactions_Insert_Input>;
@@ -5726,6 +7461,48 @@ export type Mutation_RootInsert_Lcd_Tx_Results_OneArgs = {
   object: Lcd_Tx_Results_Insert_Input;
 };
 
+/** mutation root */
+export type Mutation_RootInsert_Module_HistoriesArgs = {
+  objects: Array<Module_Histories_Insert_Input>;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Module_Histories_OneArgs = {
+  object: Module_Histories_Insert_Input;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Module_ProposalsArgs = {
+  objects: Array<Module_Proposals_Insert_Input>;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Module_Proposals_OneArgs = {
+  object: Module_Proposals_Insert_Input;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Module_TransactionsArgs = {
+  objects: Array<Module_Transactions_Insert_Input>;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Module_Transactions_OneArgs = {
+  object: Module_Transactions_Insert_Input;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_ModulesArgs = {
+  objects: Array<Modules_Insert_Input>;
+  on_conflict?: InputMaybe<Modules_On_Conflict>;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Modules_OneArgs = {
+  object: Modules_Insert_Input;
+  on_conflict?: InputMaybe<Modules_On_Conflict>;
+};
+
 /** mutation root */
 export type Mutation_RootInsert_Pool_TransactionsArgs = {
   objects: Array<Pool_Transactions_Insert_Input>;
@@ -5780,6 +7557,18 @@ export type Mutation_RootInsert_Proposals_OneArgs = {
   on_conflict?: InputMaybe<Proposals_On_Conflict>;
 };
 
+/** mutation root */
+export type Mutation_RootInsert_Taker_FeeArgs = {
+  objects: Array<Taker_Fee_Insert_Input>;
+  on_conflict?: InputMaybe<Taker_Fee_On_Conflict>;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Taker_Fee_OneArgs = {
+  object: Taker_Fee_Insert_Input;
+  on_conflict?: InputMaybe<Taker_Fee_On_Conflict>;
+};
+
 /** mutation root */
 export type Mutation_RootInsert_TrackingArgs = {
   objects: Array<Tracking_Insert_Input>;
@@ -5836,6 +7625,18 @@ export type Mutation_RootInsert_Validators_OneArgs = {
   on_conflict?: InputMaybe<Validators_On_Conflict>;
 };
 
+/** mutation root */
+export type Mutation_RootInsert_Vm_AddressesArgs = {
+  objects: Array<Vm_Addresses_Insert_Input>;
+  on_conflict?: InputMaybe<Vm_Addresses_On_Conflict>;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Vm_Addresses_OneArgs = {
+  object: Vm_Addresses_Insert_Input;
+  on_conflict?: InputMaybe<Vm_Addresses_On_Conflict>;
+};
+
 /** mutation root */
 export type Mutation_RootUpdate_Account_TransactionsArgs = {
   _inc?: InputMaybe<Account_Transactions_Inc_Input>;
@@ -6027,6 +7828,61 @@ export type Mutation_RootUpdate_Lcd_Tx_Results_ManyArgs = {
   updates: Array<Lcd_Tx_Results_Updates>;
 };
 
+/** mutation root */
+export type Mutation_RootUpdate_Module_HistoriesArgs = {
+  _inc?: InputMaybe<Module_Histories_Inc_Input>;
+  _set?: InputMaybe<Module_Histories_Set_Input>;
+  where: Module_Histories_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Module_Histories_ManyArgs = {
+  updates: Array<Module_Histories_Updates>;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Module_ProposalsArgs = {
+  _inc?: InputMaybe<Module_Proposals_Inc_Input>;
+  _set?: InputMaybe<Module_Proposals_Set_Input>;
+  where: Module_Proposals_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Module_Proposals_ManyArgs = {
+  updates: Array<Module_Proposals_Updates>;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Module_TransactionsArgs = {
+  _inc?: InputMaybe<Module_Transactions_Inc_Input>;
+  _set?: InputMaybe<Module_Transactions_Set_Input>;
+  where: Module_Transactions_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Module_Transactions_ManyArgs = {
+  updates: Array<Module_Transactions_Updates>;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_ModulesArgs = {
+  _inc?: InputMaybe<Modules_Inc_Input>;
+  _set?: InputMaybe<Modules_Set_Input>;
+  where: Modules_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Modules_By_PkArgs = {
+  _inc?: InputMaybe<Modules_Inc_Input>;
+  _set?: InputMaybe<Modules_Set_Input>;
+  pk_columns: Modules_Pk_Columns_Input;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Modules_ManyArgs = {
+  updates: Array<Modules_Updates>;
+};
+
 /** mutation root */
 export type Mutation_RootUpdate_Pool_TransactionsArgs = {
   _inc?: InputMaybe<Pool_Transactions_Inc_Input>;
@@ -6101,6 +7957,23 @@ export type Mutation_RootUpdate_Proposals_ManyArgs = {
   updates: Array<Proposals_Updates>;
 };
 
+/** mutation root */
+export type Mutation_RootUpdate_Taker_FeeArgs = {
+  _set?: InputMaybe<Taker_Fee_Set_Input>;
+  where: Taker_Fee_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Taker_Fee_By_PkArgs = {
+  _set?: InputMaybe<Taker_Fee_Set_Input>;
+  pk_columns: Taker_Fee_Pk_Columns_Input;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Taker_Fee_ManyArgs = {
+  updates: Array<Taker_Fee_Updates>;
+};
+
 /** mutation root */
 export type Mutation_RootUpdate_TrackingArgs = {
   _inc?: InputMaybe<Tracking_Inc_Input>;
@@ -6182,6 +8055,25 @@ export type Mutation_RootUpdate_Validators_ManyArgs = {
   updates: Array<Validators_Updates>;
 };
 
+/** mutation root */
+export type Mutation_RootUpdate_Vm_AddressesArgs = {
+  _inc?: InputMaybe<Vm_Addresses_Inc_Input>;
+  _set?: InputMaybe<Vm_Addresses_Set_Input>;
+  where: Vm_Addresses_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Vm_Addresses_By_PkArgs = {
+  _inc?: InputMaybe<Vm_Addresses_Inc_Input>;
+  _set?: InputMaybe<Vm_Addresses_Set_Input>;
+  pk_columns: Vm_Addresses_Pk_Columns_Input;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Vm_Addresses_ManyArgs = {
+  updates: Array<Vm_Addresses_Updates>;
+};
+
 /** column ordering options */
 export enum Order_By {
   /** in ascending order, nulls last */
@@ -6205,10 +8097,10 @@ export type Pool_Transactions = {
   block: Blocks;
   block_height: Scalars["Int"];
   is_bond: Scalars["Boolean"];
-  is_clp?: Maybe<Scalars["Boolean"]>;
-  is_collect?: Maybe<Scalars["Boolean"]>;
+  is_clp: Scalars["Boolean"];
+  is_collect: Scalars["Boolean"];
   is_lp: Scalars["Boolean"];
-  is_migrate?: Maybe<Scalars["Boolean"]>;
+  is_migrate: Scalars["Boolean"];
   is_superfluid: Scalars["Boolean"];
   is_swap: Scalars["Boolean"];
   /** An object relationship */
@@ -7831,6 +9723,7 @@ export type Profit_By_Routes_Variance_Order_By = {
 /** columns and relationships of "proposals" */
 export type Proposals = {
   __typename?: "proposals";
+  abstain: Scalars["bigint"];
   /** An object relationship */
   account?: Maybe<Accounts>;
   /** An object relationship */
@@ -7848,15 +9741,24 @@ export type Proposals = {
   description: Scalars["String"];
   id: Scalars["Int"];
   is_expedited: Scalars["Boolean"];
+  /** An array relationship */
+  module_proposals: Array<Module_Proposals>;
+  /** An aggregate relationship */
+  module_proposals_aggregate: Module_Proposals_Aggregate;
+  no: Scalars["bigint"];
+  no_with_veto: Scalars["bigint"];
   proposal_route: Scalars["String"];
   proposer_id?: Maybe<Scalars["Int"]>;
   resolved_height?: Maybe<Scalars["Int"]>;
   status: Scalars["proposalstatus"];
   submit_time: Scalars["timestamp"];
   title: Scalars["String"];
+  total_deposit: Scalars["json"];
   type: Scalars["String"];
-  voting_end_time: Scalars["timestamp"];
-  voting_time: Scalars["timestamp"];
+  version: Scalars["String"];
+  voting_end_time?: Maybe<Scalars["timestamp"]>;
+  voting_time?: Maybe<Scalars["timestamp"]>;
+  yes: Scalars["bigint"];
 };
 
 /** columns and relationships of "proposals" */
@@ -7900,6 +9802,29 @@ export type ProposalsContract_Proposals_AggregateArgs = {
   where?: InputMaybe<Contract_Proposals_Bool_Exp>;
 };
 
+/** columns and relationships of "proposals" */
+export type ProposalsModule_ProposalsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Proposals_Order_By>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+/** columns and relationships of "proposals" */
+export type ProposalsModule_Proposals_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Proposals_Order_By>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+/** columns and relationships of "proposals" */
+export type ProposalsTotal_DepositArgs = {
+  path?: InputMaybe<Scalars["String"]>;
+};
+
 /** aggregated selection of "proposals" */
 export type Proposals_Aggregate = {
   __typename?: "proposals_aggregate";
@@ -7981,16 +9906,24 @@ export type Proposals_Arr_Rel_Insert_Input = {
 /** aggregate avg on columns */
 export type Proposals_Avg_Fields = {
   __typename?: "proposals_avg_fields";
+  abstain?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  no?: Maybe<Scalars["Float"]>;
+  no_with_veto?: Maybe<Scalars["Float"]>;
   proposer_id?: Maybe<Scalars["Float"]>;
   resolved_height?: Maybe<Scalars["Float"]>;
+  yes?: Maybe<Scalars["Float"]>;
 };
 
 /** order by avg() on columns of table "proposals" */
 export type Proposals_Avg_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** Boolean expression to filter rows from the table "proposals". All fields are combined with a logical 'AND'. */
@@ -7998,6 +9931,7 @@ export type Proposals_Bool_Exp = {
   _and?: InputMaybe<Array<Proposals_Bool_Exp>>;
   _not?: InputMaybe<Proposals_Bool_Exp>;
   _or?: InputMaybe<Array<Proposals_Bool_Exp>>;
+  abstain?: InputMaybe<Bigint_Comparison_Exp>;
   account?: InputMaybe<Accounts_Bool_Exp>;
   block?: InputMaybe<Blocks_Bool_Exp>;
   code_proposals?: InputMaybe<Code_Proposals_Bool_Exp>;
@@ -8009,15 +9943,22 @@ export type Proposals_Bool_Exp = {
   description?: InputMaybe<String_Comparison_Exp>;
   id?: InputMaybe<Int_Comparison_Exp>;
   is_expedited?: InputMaybe<Boolean_Comparison_Exp>;
+  module_proposals?: InputMaybe<Module_Proposals_Bool_Exp>;
+  module_proposals_aggregate?: InputMaybe<Module_Proposals_Aggregate_Bool_Exp>;
+  no?: InputMaybe<Bigint_Comparison_Exp>;
+  no_with_veto?: InputMaybe<Bigint_Comparison_Exp>;
   proposal_route?: InputMaybe<String_Comparison_Exp>;
   proposer_id?: InputMaybe<Int_Comparison_Exp>;
   resolved_height?: InputMaybe<Int_Comparison_Exp>;
   status?: InputMaybe<Proposalstatus_Comparison_Exp>;
   submit_time?: InputMaybe<Timestamp_Comparison_Exp>;
   title?: InputMaybe<String_Comparison_Exp>;
+  total_deposit?: InputMaybe<Json_Comparison_Exp>;
   type?: InputMaybe<String_Comparison_Exp>;
+  version?: InputMaybe<String_Comparison_Exp>;
   voting_end_time?: InputMaybe<Timestamp_Comparison_Exp>;
   voting_time?: InputMaybe<Timestamp_Comparison_Exp>;
+  yes?: InputMaybe<Bigint_Comparison_Exp>;
 };
 
 /** unique or primary key constraints on table "proposals" */
@@ -8028,13 +9969,18 @@ export enum Proposals_Constraint {
 
 /** input type for incrementing numeric columns in table "proposals" */
 export type Proposals_Inc_Input = {
+  abstain?: InputMaybe<Scalars["bigint"]>;
   id?: InputMaybe<Scalars["Int"]>;
+  no?: InputMaybe<Scalars["bigint"]>;
+  no_with_veto?: InputMaybe<Scalars["bigint"]>;
   proposer_id?: InputMaybe<Scalars["Int"]>;
   resolved_height?: InputMaybe<Scalars["Int"]>;
+  yes?: InputMaybe<Scalars["bigint"]>;
 };
 
 /** input type for inserting data into table "proposals" */
 export type Proposals_Insert_Input = {
+  abstain?: InputMaybe<Scalars["bigint"]>;
   account?: InputMaybe<Accounts_Obj_Rel_Insert_Input>;
   block?: InputMaybe<Blocks_Obj_Rel_Insert_Input>;
   code_proposals?: InputMaybe<Code_Proposals_Arr_Rel_Insert_Input>;
@@ -8044,23 +9990,32 @@ export type Proposals_Insert_Input = {
   description?: InputMaybe<Scalars["String"]>;
   id?: InputMaybe<Scalars["Int"]>;
   is_expedited?: InputMaybe<Scalars["Boolean"]>;
+  module_proposals?: InputMaybe<Module_Proposals_Arr_Rel_Insert_Input>;
+  no?: InputMaybe<Scalars["bigint"]>;
+  no_with_veto?: InputMaybe<Scalars["bigint"]>;
   proposal_route?: InputMaybe<Scalars["String"]>;
   proposer_id?: InputMaybe<Scalars["Int"]>;
   resolved_height?: InputMaybe<Scalars["Int"]>;
   status?: InputMaybe<Scalars["proposalstatus"]>;
   submit_time?: InputMaybe<Scalars["timestamp"]>;
   title?: InputMaybe<Scalars["String"]>;
+  total_deposit?: InputMaybe<Scalars["json"]>;
   type?: InputMaybe<Scalars["String"]>;
+  version?: InputMaybe<Scalars["String"]>;
   voting_end_time?: InputMaybe<Scalars["timestamp"]>;
   voting_time?: InputMaybe<Scalars["timestamp"]>;
+  yes?: InputMaybe<Scalars["bigint"]>;
 };
 
 /** aggregate max on columns */
 export type Proposals_Max_Fields = {
   __typename?: "proposals_max_fields";
+  abstain?: Maybe<Scalars["bigint"]>;
   deposit_end_time?: Maybe<Scalars["timestamp"]>;
   description?: Maybe<Scalars["String"]>;
   id?: Maybe<Scalars["Int"]>;
+  no?: Maybe<Scalars["bigint"]>;
+  no_with_veto?: Maybe<Scalars["bigint"]>;
   proposal_route?: Maybe<Scalars["String"]>;
   proposer_id?: Maybe<Scalars["Int"]>;
   resolved_height?: Maybe<Scalars["Int"]>;
@@ -8068,15 +10023,20 @@ export type Proposals_Max_Fields = {
   submit_time?: Maybe<Scalars["timestamp"]>;
   title?: Maybe<Scalars["String"]>;
   type?: Maybe<Scalars["String"]>;
+  version?: Maybe<Scalars["String"]>;
   voting_end_time?: Maybe<Scalars["timestamp"]>;
   voting_time?: Maybe<Scalars["timestamp"]>;
+  yes?: Maybe<Scalars["bigint"]>;
 };
 
 /** order by max() on columns of table "proposals" */
 export type Proposals_Max_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   deposit_end_time?: InputMaybe<Order_By>;
   description?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposal_route?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
@@ -8084,16 +10044,21 @@ export type Proposals_Max_Order_By = {
   submit_time?: InputMaybe<Order_By>;
   title?: InputMaybe<Order_By>;
   type?: InputMaybe<Order_By>;
+  version?: InputMaybe<Order_By>;
   voting_end_time?: InputMaybe<Order_By>;
   voting_time?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** aggregate min on columns */
 export type Proposals_Min_Fields = {
   __typename?: "proposals_min_fields";
+  abstain?: Maybe<Scalars["bigint"]>;
   deposit_end_time?: Maybe<Scalars["timestamp"]>;
   description?: Maybe<Scalars["String"]>;
   id?: Maybe<Scalars["Int"]>;
+  no?: Maybe<Scalars["bigint"]>;
+  no_with_veto?: Maybe<Scalars["bigint"]>;
   proposal_route?: Maybe<Scalars["String"]>;
   proposer_id?: Maybe<Scalars["Int"]>;
   resolved_height?: Maybe<Scalars["Int"]>;
@@ -8101,15 +10066,20 @@ export type Proposals_Min_Fields = {
   submit_time?: Maybe<Scalars["timestamp"]>;
   title?: Maybe<Scalars["String"]>;
   type?: Maybe<Scalars["String"]>;
+  version?: Maybe<Scalars["String"]>;
   voting_end_time?: Maybe<Scalars["timestamp"]>;
   voting_time?: Maybe<Scalars["timestamp"]>;
+  yes?: Maybe<Scalars["bigint"]>;
 };
 
 /** order by min() on columns of table "proposals" */
 export type Proposals_Min_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   deposit_end_time?: InputMaybe<Order_By>;
   description?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposal_route?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
@@ -8117,8 +10087,10 @@ export type Proposals_Min_Order_By = {
   submit_time?: InputMaybe<Order_By>;
   title?: InputMaybe<Order_By>;
   type?: InputMaybe<Order_By>;
+  version?: InputMaybe<Order_By>;
   voting_end_time?: InputMaybe<Order_By>;
   voting_time?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** response of any mutation on the table "proposals" */
@@ -8146,6 +10118,7 @@ export type Proposals_On_Conflict = {
 
 /** Ordering options when selecting data from "proposals". */
 export type Proposals_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   account?: InputMaybe<Accounts_Order_By>;
   block?: InputMaybe<Blocks_Order_By>;
   code_proposals_aggregate?: InputMaybe<Code_Proposals_Aggregate_Order_By>;
@@ -8155,15 +10128,21 @@ export type Proposals_Order_By = {
   description?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
   is_expedited?: InputMaybe<Order_By>;
+  module_proposals_aggregate?: InputMaybe<Module_Proposals_Aggregate_Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposal_route?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
   status?: InputMaybe<Order_By>;
   submit_time?: InputMaybe<Order_By>;
   title?: InputMaybe<Order_By>;
+  total_deposit?: InputMaybe<Order_By>;
   type?: InputMaybe<Order_By>;
+  version?: InputMaybe<Order_By>;
   voting_end_time?: InputMaybe<Order_By>;
   voting_time?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** primary key columns input for table: proposals */
@@ -8173,6 +10152,8 @@ export type Proposals_Pk_Columns_Input = {
 
 /** select columns of table "proposals" */
 export enum Proposals_Select_Column {
+  /** column name */
+  Abstain = "abstain",
   /** column name */
   Content = "content",
   /** column name */
@@ -8184,6 +10165,10 @@ export enum Proposals_Select_Column {
   /** column name */
   IsExpedited = "is_expedited",
   /** column name */
+  No = "no",
+  /** column name */
+  NoWithVeto = "no_with_veto",
+  /** column name */
   ProposalRoute = "proposal_route",
   /** column name */
   ProposerId = "proposer_id",
@@ -8196,11 +10181,17 @@ export enum Proposals_Select_Column {
   /** column name */
   Title = "title",
   /** column name */
+  TotalDeposit = "total_deposit",
+  /** column name */
   Type = "type",
   /** column name */
+  Version = "version",
+  /** column name */
   VotingEndTime = "voting_end_time",
   /** column name */
   VotingTime = "voting_time",
+  /** column name */
+  Yes = "yes",
 }
 
 /** select "proposals_aggregate_bool_exp_bool_and_arguments_columns" columns of table "proposals" */
@@ -8217,65 +10208,95 @@ export enum Proposals_Select_Column_Proposals_Aggregate_Bool_Exp_Bool_Or_Argumen
 
 /** input type for updating data in table "proposals" */
 export type Proposals_Set_Input = {
+  abstain?: InputMaybe<Scalars["bigint"]>;
   content?: InputMaybe<Scalars["json"]>;
   deposit_end_time?: InputMaybe<Scalars["timestamp"]>;
   description?: InputMaybe<Scalars["String"]>;
   id?: InputMaybe<Scalars["Int"]>;
   is_expedited?: InputMaybe<Scalars["Boolean"]>;
+  no?: InputMaybe<Scalars["bigint"]>;
+  no_with_veto?: InputMaybe<Scalars["bigint"]>;
   proposal_route?: InputMaybe<Scalars["String"]>;
   proposer_id?: InputMaybe<Scalars["Int"]>;
   resolved_height?: InputMaybe<Scalars["Int"]>;
   status?: InputMaybe<Scalars["proposalstatus"]>;
   submit_time?: InputMaybe<Scalars["timestamp"]>;
   title?: InputMaybe<Scalars["String"]>;
+  total_deposit?: InputMaybe<Scalars["json"]>;
   type?: InputMaybe<Scalars["String"]>;
+  version?: InputMaybe<Scalars["String"]>;
   voting_end_time?: InputMaybe<Scalars["timestamp"]>;
   voting_time?: InputMaybe<Scalars["timestamp"]>;
+  yes?: InputMaybe<Scalars["bigint"]>;
 };
 
 /** aggregate stddev on columns */
 export type Proposals_Stddev_Fields = {
   __typename?: "proposals_stddev_fields";
+  abstain?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  no?: Maybe<Scalars["Float"]>;
+  no_with_veto?: Maybe<Scalars["Float"]>;
   proposer_id?: Maybe<Scalars["Float"]>;
   resolved_height?: Maybe<Scalars["Float"]>;
+  yes?: Maybe<Scalars["Float"]>;
 };
 
 /** order by stddev() on columns of table "proposals" */
 export type Proposals_Stddev_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** aggregate stddev_pop on columns */
 export type Proposals_Stddev_Pop_Fields = {
   __typename?: "proposals_stddev_pop_fields";
+  abstain?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  no?: Maybe<Scalars["Float"]>;
+  no_with_veto?: Maybe<Scalars["Float"]>;
   proposer_id?: Maybe<Scalars["Float"]>;
   resolved_height?: Maybe<Scalars["Float"]>;
+  yes?: Maybe<Scalars["Float"]>;
 };
 
 /** order by stddev_pop() on columns of table "proposals" */
 export type Proposals_Stddev_Pop_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** aggregate stddev_samp on columns */
 export type Proposals_Stddev_Samp_Fields = {
   __typename?: "proposals_stddev_samp_fields";
+  abstain?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  no?: Maybe<Scalars["Float"]>;
+  no_with_veto?: Maybe<Scalars["Float"]>;
   proposer_id?: Maybe<Scalars["Float"]>;
   resolved_height?: Maybe<Scalars["Float"]>;
+  yes?: Maybe<Scalars["Float"]>;
 };
 
 /** order by stddev_samp() on columns of table "proposals" */
 export type Proposals_Stddev_Samp_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** Streaming cursor of the table "proposals" */
@@ -8288,39 +10309,55 @@ export type Proposals_Stream_Cursor_Input = {
 
 /** Initial value of the column from where the streaming should start */
 export type Proposals_Stream_Cursor_Value_Input = {
+  abstain?: InputMaybe<Scalars["bigint"]>;
   content?: InputMaybe<Scalars["json"]>;
   deposit_end_time?: InputMaybe<Scalars["timestamp"]>;
   description?: InputMaybe<Scalars["String"]>;
   id?: InputMaybe<Scalars["Int"]>;
   is_expedited?: InputMaybe<Scalars["Boolean"]>;
+  no?: InputMaybe<Scalars["bigint"]>;
+  no_with_veto?: InputMaybe<Scalars["bigint"]>;
   proposal_route?: InputMaybe<Scalars["String"]>;
   proposer_id?: InputMaybe<Scalars["Int"]>;
   resolved_height?: InputMaybe<Scalars["Int"]>;
   status?: InputMaybe<Scalars["proposalstatus"]>;
   submit_time?: InputMaybe<Scalars["timestamp"]>;
   title?: InputMaybe<Scalars["String"]>;
+  total_deposit?: InputMaybe<Scalars["json"]>;
   type?: InputMaybe<Scalars["String"]>;
+  version?: InputMaybe<Scalars["String"]>;
   voting_end_time?: InputMaybe<Scalars["timestamp"]>;
   voting_time?: InputMaybe<Scalars["timestamp"]>;
+  yes?: InputMaybe<Scalars["bigint"]>;
 };
 
 /** aggregate sum on columns */
 export type Proposals_Sum_Fields = {
   __typename?: "proposals_sum_fields";
+  abstain?: Maybe<Scalars["bigint"]>;
   id?: Maybe<Scalars["Int"]>;
+  no?: Maybe<Scalars["bigint"]>;
+  no_with_veto?: Maybe<Scalars["bigint"]>;
   proposer_id?: Maybe<Scalars["Int"]>;
   resolved_height?: Maybe<Scalars["Int"]>;
+  yes?: Maybe<Scalars["bigint"]>;
 };
 
 /** order by sum() on columns of table "proposals" */
 export type Proposals_Sum_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** update columns of table "proposals" */
 export enum Proposals_Update_Column {
+  /** column name */
+  Abstain = "abstain",
   /** column name */
   Content = "content",
   /** column name */
@@ -8332,6 +10369,10 @@ export enum Proposals_Update_Column {
   /** column name */
   IsExpedited = "is_expedited",
   /** column name */
+  No = "no",
+  /** column name */
+  NoWithVeto = "no_with_veto",
+  /** column name */
   ProposalRoute = "proposal_route",
   /** column name */
   ProposerId = "proposer_id",
@@ -8344,11 +10385,17 @@ export enum Proposals_Update_Column {
   /** column name */
   Title = "title",
   /** column name */
+  TotalDeposit = "total_deposit",
+  /** column name */
   Type = "type",
   /** column name */
+  Version = "version",
+  /** column name */
   VotingEndTime = "voting_end_time",
   /** column name */
   VotingTime = "voting_time",
+  /** column name */
+  Yes = "yes",
 }
 
 export type Proposals_Updates = {
@@ -8363,46 +10410,70 @@ export type Proposals_Updates = {
 /** aggregate var_pop on columns */
 export type Proposals_Var_Pop_Fields = {
   __typename?: "proposals_var_pop_fields";
+  abstain?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  no?: Maybe<Scalars["Float"]>;
+  no_with_veto?: Maybe<Scalars["Float"]>;
   proposer_id?: Maybe<Scalars["Float"]>;
   resolved_height?: Maybe<Scalars["Float"]>;
+  yes?: Maybe<Scalars["Float"]>;
 };
 
 /** order by var_pop() on columns of table "proposals" */
 export type Proposals_Var_Pop_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** aggregate var_samp on columns */
 export type Proposals_Var_Samp_Fields = {
   __typename?: "proposals_var_samp_fields";
+  abstain?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  no?: Maybe<Scalars["Float"]>;
+  no_with_veto?: Maybe<Scalars["Float"]>;
   proposer_id?: Maybe<Scalars["Float"]>;
   resolved_height?: Maybe<Scalars["Float"]>;
+  yes?: Maybe<Scalars["Float"]>;
 };
 
 /** order by var_samp() on columns of table "proposals" */
 export type Proposals_Var_Samp_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** aggregate variance on columns */
 export type Proposals_Variance_Fields = {
   __typename?: "proposals_variance_fields";
+  abstain?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  no?: Maybe<Scalars["Float"]>;
+  no_with_veto?: Maybe<Scalars["Float"]>;
   proposer_id?: Maybe<Scalars["Float"]>;
   resolved_height?: Maybe<Scalars["Float"]>;
+  yes?: Maybe<Scalars["Float"]>;
 };
 
 /** order by variance() on columns of table "proposals" */
 export type Proposals_Variance_Order_By = {
+  abstain?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  no?: InputMaybe<Order_By>;
+  no_with_veto?: InputMaybe<Order_By>;
   proposer_id?: InputMaybe<Order_By>;
   resolved_height?: InputMaybe<Order_By>;
+  yes?: InputMaybe<Order_By>;
 };
 
 /** Boolean expression to compare columns of type "proposalstatus". All fields are combined with logical 'AND'. */
@@ -8426,9 +10497,9 @@ export type Query_Root = {
   account_transactions_aggregate: Account_Transactions_Aggregate;
   /** fetch data from the table: "account_transactions" using primary key columns */
   account_transactions_by_pk?: Maybe<Account_Transactions>;
-  /** fetch data from the table: "accounts" */
+  /** An array relationship */
   accounts: Array<Accounts>;
-  /** fetch aggregated fields from the table: "accounts" */
+  /** An aggregate relationship */
   accounts_aggregate: Accounts_Aggregate;
   /** fetch data from the table: "accounts" using primary key columns */
   accounts_by_pk?: Maybe<Accounts>;
@@ -8483,6 +10554,24 @@ export type Query_Root = {
   /** An aggregate relationship */
   lcd_tx_results_aggregate: Lcd_Tx_Results_Aggregate;
   /** An array relationship */
+  module_histories: Array<Module_Histories>;
+  /** An aggregate relationship */
+  module_histories_aggregate: Module_Histories_Aggregate;
+  /** An array relationship */
+  module_proposals: Array<Module_Proposals>;
+  /** An aggregate relationship */
+  module_proposals_aggregate: Module_Proposals_Aggregate;
+  /** An array relationship */
+  module_transactions: Array<Module_Transactions>;
+  /** An aggregate relationship */
+  module_transactions_aggregate: Module_Transactions_Aggregate;
+  /** An array relationship */
+  modules: Array<Modules>;
+  /** An aggregate relationship */
+  modules_aggregate: Modules_Aggregate;
+  /** fetch data from the table: "modules" using primary key columns */
+  modules_by_pk?: Maybe<Modules>;
+  /** An array relationship */
   pool_transactions: Array<Pool_Transactions>;
   /** An aggregate relationship */
   pool_transactions_aggregate: Pool_Transactions_Aggregate;
@@ -8510,6 +10599,12 @@ export type Query_Root = {
   search_pools_with_denoms: Array<Pools>;
   /** execute function "search_pools_with_denoms" and query aggregates on result of table type "pools" */
   search_pools_with_denoms_aggregate: Pools_Aggregate;
+  /** fetch data from the table: "taker_fee" */
+  taker_fee: Array<Taker_Fee>;
+  /** fetch aggregated fields from the table: "taker_fee" */
+  taker_fee_aggregate: Taker_Fee_Aggregate;
+  /** fetch data from the table: "taker_fee" using primary key columns */
+  taker_fee_by_pk?: Maybe<Taker_Fee>;
   /** fetch data from the table: "tracking" */
   tracking: Array<Tracking>;
   /** fetch aggregated fields from the table: "tracking" */
@@ -8536,6 +10631,12 @@ export type Query_Root = {
   validators_aggregate: Validators_Aggregate;
   /** fetch data from the table: "validators" using primary key columns */
   validators_by_pk?: Maybe<Validators>;
+  /** fetch data from the table: "vm_addresses" */
+  vm_addresses: Array<Vm_Addresses>;
+  /** fetch aggregated fields from the table: "vm_addresses" */
+  vm_addresses_aggregate: Vm_Addresses_Aggregate;
+  /** fetch data from the table: "vm_addresses" using primary key columns */
+  vm_addresses_by_pk?: Maybe<Vm_Addresses>;
 };
 
 export type Query_RootAccount_TransactionsArgs = {
@@ -8767,6 +10868,75 @@ export type Query_RootLcd_Tx_Results_AggregateArgs = {
   where?: InputMaybe<Lcd_Tx_Results_Bool_Exp>;
 };
 
+export type Query_RootModule_HistoriesArgs = {
+  distinct_on?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Histories_Order_By>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+export type Query_RootModule_Histories_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Histories_Order_By>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+export type Query_RootModule_ProposalsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Proposals_Order_By>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+export type Query_RootModule_Proposals_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Proposals_Order_By>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+export type Query_RootModule_TransactionsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+export type Query_RootModule_Transactions_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+export type Query_RootModulesArgs = {
+  distinct_on?: InputMaybe<Array<Modules_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Modules_Order_By>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
+export type Query_RootModules_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Modules_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Modules_Order_By>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
+export type Query_RootModules_By_PkArgs = {
+  name: Scalars["String"];
+  publisher_id: Scalars["Int"];
+};
+
 export type Query_RootPool_TransactionsArgs = {
   distinct_on?: InputMaybe<Array<Pool_Transactions_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -8873,6 +11043,27 @@ export type Query_RootSearch_Pools_With_Denoms_AggregateArgs = {
   where?: InputMaybe<Pools_Bool_Exp>;
 };
 
+export type Query_RootTaker_FeeArgs = {
+  distinct_on?: InputMaybe<Array<Taker_Fee_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Taker_Fee_Order_By>>;
+  where?: InputMaybe<Taker_Fee_Bool_Exp>;
+};
+
+export type Query_RootTaker_Fee_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Taker_Fee_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Taker_Fee_Order_By>>;
+  where?: InputMaybe<Taker_Fee_Bool_Exp>;
+};
+
+export type Query_RootTaker_Fee_By_PkArgs = {
+  denom0: Scalars["String"];
+  denom1: Scalars["String"];
+};
+
 export type Query_RootTrackingArgs = {
   distinct_on?: InputMaybe<Array<Tracking_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -8966,6 +11157,26 @@ export type Query_RootValidators_By_PkArgs = {
   operator_address: Scalars["String"];
 };
 
+export type Query_RootVm_AddressesArgs = {
+  distinct_on?: InputMaybe<Array<Vm_Addresses_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Vm_Addresses_Order_By>>;
+  where?: InputMaybe<Vm_Addresses_Bool_Exp>;
+};
+
+export type Query_RootVm_Addresses_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Vm_Addresses_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Vm_Addresses_Order_By>>;
+  where?: InputMaybe<Vm_Addresses_Bool_Exp>;
+};
+
+export type Query_RootVm_Addresses_By_PkArgs = {
+  id: Scalars["Int"];
+};
+
 export type Search_Pools_With_Denoms_Args = {
   denoms?: InputMaybe<Scalars["_varchar"]>;
 };
@@ -8980,9 +11191,9 @@ export type Subscription_Root = {
   account_transactions_by_pk?: Maybe<Account_Transactions>;
   /** fetch data from the table in a streaming manner: "account_transactions" */
   account_transactions_stream: Array<Account_Transactions>;
-  /** fetch data from the table: "accounts" */
+  /** An array relationship */
   accounts: Array<Accounts>;
-  /** fetch aggregated fields from the table: "accounts" */
+  /** An aggregate relationship */
   accounts_aggregate: Accounts_Aggregate;
   /** fetch data from the table: "accounts" using primary key columns */
   accounts_by_pk?: Maybe<Accounts>;
@@ -9061,6 +11272,32 @@ export type Subscription_Root = {
   /** fetch data from the table in a streaming manner: "lcd_tx_results" */
   lcd_tx_results_stream: Array<Lcd_Tx_Results>;
   /** An array relationship */
+  module_histories: Array<Module_Histories>;
+  /** An aggregate relationship */
+  module_histories_aggregate: Module_Histories_Aggregate;
+  /** fetch data from the table in a streaming manner: "module_histories" */
+  module_histories_stream: Array<Module_Histories>;
+  /** An array relationship */
+  module_proposals: Array<Module_Proposals>;
+  /** An aggregate relationship */
+  module_proposals_aggregate: Module_Proposals_Aggregate;
+  /** fetch data from the table in a streaming manner: "module_proposals" */
+  module_proposals_stream: Array<Module_Proposals>;
+  /** An array relationship */
+  module_transactions: Array<Module_Transactions>;
+  /** An aggregate relationship */
+  module_transactions_aggregate: Module_Transactions_Aggregate;
+  /** fetch data from the table in a streaming manner: "module_transactions" */
+  module_transactions_stream: Array<Module_Transactions>;
+  /** An array relationship */
+  modules: Array<Modules>;
+  /** An aggregate relationship */
+  modules_aggregate: Modules_Aggregate;
+  /** fetch data from the table: "modules" using primary key columns */
+  modules_by_pk?: Maybe<Modules>;
+  /** fetch data from the table in a streaming manner: "modules" */
+  modules_stream: Array<Modules>;
+  /** An array relationship */
   pool_transactions: Array<Pool_Transactions>;
   /** An aggregate relationship */
   pool_transactions_aggregate: Pool_Transactions_Aggregate;
@@ -9098,6 +11335,14 @@ export type Subscription_Root = {
   search_pools_with_denoms: Array<Pools>;
   /** execute function "search_pools_with_denoms" and query aggregates on result of table type "pools" */
   search_pools_with_denoms_aggregate: Pools_Aggregate;
+  /** fetch data from the table: "taker_fee" */
+  taker_fee: Array<Taker_Fee>;
+  /** fetch aggregated fields from the table: "taker_fee" */
+  taker_fee_aggregate: Taker_Fee_Aggregate;
+  /** fetch data from the table: "taker_fee" using primary key columns */
+  taker_fee_by_pk?: Maybe<Taker_Fee>;
+  /** fetch data from the table in a streaming manner: "taker_fee" */
+  taker_fee_stream: Array<Taker_Fee>;
   /** fetch data from the table: "tracking" */
   tracking: Array<Tracking>;
   /** fetch aggregated fields from the table: "tracking" */
@@ -9134,6 +11379,14 @@ export type Subscription_Root = {
   validators_by_pk?: Maybe<Validators>;
   /** fetch data from the table in a streaming manner: "validators" */
   validators_stream: Array<Validators>;
+  /** fetch data from the table: "vm_addresses" */
+  vm_addresses: Array<Vm_Addresses>;
+  /** fetch aggregated fields from the table: "vm_addresses" */
+  vm_addresses_aggregate: Vm_Addresses_Aggregate;
+  /** fetch data from the table: "vm_addresses" using primary key columns */
+  vm_addresses_by_pk?: Maybe<Vm_Addresses>;
+  /** fetch data from the table in a streaming manner: "vm_addresses" */
+  vm_addresses_stream: Array<Vm_Addresses>;
 };
 
 export type Subscription_RootAccount_TransactionsArgs = {
@@ -9443,6 +11696,99 @@ export type Subscription_RootLcd_Tx_Results_StreamArgs = {
   where?: InputMaybe<Lcd_Tx_Results_Bool_Exp>;
 };
 
+export type Subscription_RootModule_HistoriesArgs = {
+  distinct_on?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Histories_Order_By>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+export type Subscription_RootModule_Histories_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Histories_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Histories_Order_By>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+export type Subscription_RootModule_Histories_StreamArgs = {
+  batch_size: Scalars["Int"];
+  cursor: Array<InputMaybe<Module_Histories_Stream_Cursor_Input>>;
+  where?: InputMaybe<Module_Histories_Bool_Exp>;
+};
+
+export type Subscription_RootModule_ProposalsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Proposals_Order_By>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+export type Subscription_RootModule_Proposals_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Proposals_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Proposals_Order_By>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+export type Subscription_RootModule_Proposals_StreamArgs = {
+  batch_size: Scalars["Int"];
+  cursor: Array<InputMaybe<Module_Proposals_Stream_Cursor_Input>>;
+  where?: InputMaybe<Module_Proposals_Bool_Exp>;
+};
+
+export type Subscription_RootModule_TransactionsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+export type Subscription_RootModule_Transactions_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+export type Subscription_RootModule_Transactions_StreamArgs = {
+  batch_size: Scalars["Int"];
+  cursor: Array<InputMaybe<Module_Transactions_Stream_Cursor_Input>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+export type Subscription_RootModulesArgs = {
+  distinct_on?: InputMaybe<Array<Modules_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Modules_Order_By>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
+export type Subscription_RootModules_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Modules_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Modules_Order_By>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
+export type Subscription_RootModules_By_PkArgs = {
+  name: Scalars["String"];
+  publisher_id: Scalars["Int"];
+};
+
+export type Subscription_RootModules_StreamArgs = {
+  batch_size: Scalars["Int"];
+  cursor: Array<InputMaybe<Modules_Stream_Cursor_Input>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
 export type Subscription_RootPool_TransactionsArgs = {
   distinct_on?: InputMaybe<Array<Pool_Transactions_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -9579,6 +11925,33 @@ export type Subscription_RootSearch_Pools_With_Denoms_AggregateArgs = {
   where?: InputMaybe<Pools_Bool_Exp>;
 };
 
+export type Subscription_RootTaker_FeeArgs = {
+  distinct_on?: InputMaybe<Array<Taker_Fee_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Taker_Fee_Order_By>>;
+  where?: InputMaybe<Taker_Fee_Bool_Exp>;
+};
+
+export type Subscription_RootTaker_Fee_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Taker_Fee_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Taker_Fee_Order_By>>;
+  where?: InputMaybe<Taker_Fee_Bool_Exp>;
+};
+
+export type Subscription_RootTaker_Fee_By_PkArgs = {
+  denom0: Scalars["String"];
+  denom1: Scalars["String"];
+};
+
+export type Subscription_RootTaker_Fee_StreamArgs = {
+  batch_size: Scalars["Int"];
+  cursor: Array<InputMaybe<Taker_Fee_Stream_Cursor_Input>>;
+  where?: InputMaybe<Taker_Fee_Bool_Exp>;
+};
+
 export type Subscription_RootTrackingArgs = {
   distinct_on?: InputMaybe<Array<Tracking_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -9702,6 +12075,178 @@ export type Subscription_RootValidators_StreamArgs = {
   where?: InputMaybe<Validators_Bool_Exp>;
 };
 
+export type Subscription_RootVm_AddressesArgs = {
+  distinct_on?: InputMaybe<Array<Vm_Addresses_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Vm_Addresses_Order_By>>;
+  where?: InputMaybe<Vm_Addresses_Bool_Exp>;
+};
+
+export type Subscription_RootVm_Addresses_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Vm_Addresses_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Vm_Addresses_Order_By>>;
+  where?: InputMaybe<Vm_Addresses_Bool_Exp>;
+};
+
+export type Subscription_RootVm_Addresses_By_PkArgs = {
+  id: Scalars["Int"];
+};
+
+export type Subscription_RootVm_Addresses_StreamArgs = {
+  batch_size: Scalars["Int"];
+  cursor: Array<InputMaybe<Vm_Addresses_Stream_Cursor_Input>>;
+  where?: InputMaybe<Vm_Addresses_Bool_Exp>;
+};
+
+/** columns and relationships of "taker_fee" */
+export type Taker_Fee = {
+  __typename?: "taker_fee";
+  denom0: Scalars["String"];
+  denom1: Scalars["String"];
+  taker_fee: Scalars["String"];
+};
+
+/** aggregated selection of "taker_fee" */
+export type Taker_Fee_Aggregate = {
+  __typename?: "taker_fee_aggregate";
+  aggregate?: Maybe<Taker_Fee_Aggregate_Fields>;
+  nodes: Array<Taker_Fee>;
+};
+
+/** aggregate fields of "taker_fee" */
+export type Taker_Fee_Aggregate_Fields = {
+  __typename?: "taker_fee_aggregate_fields";
+  count: Scalars["Int"];
+  max?: Maybe<Taker_Fee_Max_Fields>;
+  min?: Maybe<Taker_Fee_Min_Fields>;
+};
+
+/** aggregate fields of "taker_fee" */
+export type Taker_Fee_Aggregate_FieldsCountArgs = {
+  columns?: InputMaybe<Array<Taker_Fee_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+};
+
+/** Boolean expression to filter rows from the table "taker_fee". All fields are combined with a logical 'AND'. */
+export type Taker_Fee_Bool_Exp = {
+  _and?: InputMaybe<Array<Taker_Fee_Bool_Exp>>;
+  _not?: InputMaybe<Taker_Fee_Bool_Exp>;
+  _or?: InputMaybe<Array<Taker_Fee_Bool_Exp>>;
+  denom0?: InputMaybe<String_Comparison_Exp>;
+  denom1?: InputMaybe<String_Comparison_Exp>;
+  taker_fee?: InputMaybe<String_Comparison_Exp>;
+};
+
+/** unique or primary key constraints on table "taker_fee" */
+export enum Taker_Fee_Constraint {
+  /** unique or primary key constraint on columns "denom0", "denom1" */
+  TakerFeePkey = "taker_fee_pkey",
+}
+
+/** input type for inserting data into table "taker_fee" */
+export type Taker_Fee_Insert_Input = {
+  denom0?: InputMaybe<Scalars["String"]>;
+  denom1?: InputMaybe<Scalars["String"]>;
+  taker_fee?: InputMaybe<Scalars["String"]>;
+};
+
+/** aggregate max on columns */
+export type Taker_Fee_Max_Fields = {
+  __typename?: "taker_fee_max_fields";
+  denom0?: Maybe<Scalars["String"]>;
+  denom1?: Maybe<Scalars["String"]>;
+  taker_fee?: Maybe<Scalars["String"]>;
+};
+
+/** aggregate min on columns */
+export type Taker_Fee_Min_Fields = {
+  __typename?: "taker_fee_min_fields";
+  denom0?: Maybe<Scalars["String"]>;
+  denom1?: Maybe<Scalars["String"]>;
+  taker_fee?: Maybe<Scalars["String"]>;
+};
+
+/** response of any mutation on the table "taker_fee" */
+export type Taker_Fee_Mutation_Response = {
+  __typename?: "taker_fee_mutation_response";
+  /** number of rows affected by the mutation */
+  affected_rows: Scalars["Int"];
+  /** data from the rows affected by the mutation */
+  returning: Array<Taker_Fee>;
+};
+
+/** on_conflict condition type for table "taker_fee" */
+export type Taker_Fee_On_Conflict = {
+  constraint: Taker_Fee_Constraint;
+  update_columns?: Array<Taker_Fee_Update_Column>;
+  where?: InputMaybe<Taker_Fee_Bool_Exp>;
+};
+
+/** Ordering options when selecting data from "taker_fee". */
+export type Taker_Fee_Order_By = {
+  denom0?: InputMaybe<Order_By>;
+  denom1?: InputMaybe<Order_By>;
+  taker_fee?: InputMaybe<Order_By>;
+};
+
+/** primary key columns input for table: taker_fee */
+export type Taker_Fee_Pk_Columns_Input = {
+  denom0: Scalars["String"];
+  denom1: Scalars["String"];
+};
+
+/** select columns of table "taker_fee" */
+export enum Taker_Fee_Select_Column {
+  /** column name */
+  Denom0 = "denom0",
+  /** column name */
+  Denom1 = "denom1",
+  /** column name */
+  TakerFee = "taker_fee",
+}
+
+/** input type for updating data in table "taker_fee" */
+export type Taker_Fee_Set_Input = {
+  denom0?: InputMaybe<Scalars["String"]>;
+  denom1?: InputMaybe<Scalars["String"]>;
+  taker_fee?: InputMaybe<Scalars["String"]>;
+};
+
+/** Streaming cursor of the table "taker_fee" */
+export type Taker_Fee_Stream_Cursor_Input = {
+  /** Stream column input with initial value */
+  initial_value: Taker_Fee_Stream_Cursor_Value_Input;
+  /** cursor ordering */
+  ordering?: InputMaybe<Cursor_Ordering>;
+};
+
+/** Initial value of the column from where the streaming should start */
+export type Taker_Fee_Stream_Cursor_Value_Input = {
+  denom0?: InputMaybe<Scalars["String"]>;
+  denom1?: InputMaybe<Scalars["String"]>;
+  taker_fee?: InputMaybe<Scalars["String"]>;
+};
+
+/** update columns of table "taker_fee" */
+export enum Taker_Fee_Update_Column {
+  /** column name */
+  Denom0 = "denom0",
+  /** column name */
+  Denom1 = "denom1",
+  /** column name */
+  TakerFee = "taker_fee",
+}
+
+export type Taker_Fee_Updates = {
+  /** sets the columns of the filtered rows to the given values */
+  _set?: InputMaybe<Taker_Fee_Set_Input>;
+  /** filter the rows which have to be updated */
+  where: Taker_Fee_Bool_Exp;
+};
+
 /** Boolean expression to compare columns of type "timestamp". All fields are combined with logical 'AND'. */
 export type Timestamp_Comparison_Exp = {
   _eq?: InputMaybe<Scalars["timestamp"]>;
@@ -10554,6 +13099,11 @@ export type Transactions = {
   is_ibc: Scalars["Boolean"];
   is_instantiate: Scalars["Boolean"];
   is_migrate: Scalars["Boolean"];
+  is_move_execute: Scalars["Boolean"];
+  is_move_execute_event: Scalars["Boolean"];
+  is_move_publish: Scalars["Boolean"];
+  is_move_script: Scalars["Boolean"];
+  is_move_upgrade: Scalars["Boolean"];
   is_send: Scalars["Boolean"];
   is_store_code: Scalars["Boolean"];
   is_update_admin: Scalars["Boolean"];
@@ -10564,6 +13114,14 @@ export type Transactions = {
   memo: Scalars["String"];
   messages: Scalars["json"];
   /** An array relationship */
+  module_transactions: Array<Module_Transactions>;
+  /** An aggregate relationship */
+  module_transactions_aggregate: Module_Transactions_Aggregate;
+  /** An array relationship */
+  modules: Array<Modules>;
+  /** An aggregate relationship */
+  modules_aggregate: Modules_Aggregate;
+  /** An array relationship */
   pool_transactions: Array<Pool_Transactions>;
   /** An aggregate relationship */
   pool_transactions_aggregate: Pool_Transactions_Aggregate;
@@ -10670,6 +13228,42 @@ export type TransactionsMessagesArgs = {
   path?: InputMaybe<Scalars["String"]>;
 };
 
+/** columns and relationships of "transactions" */
+export type TransactionsModule_TransactionsArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+/** columns and relationships of "transactions" */
+export type TransactionsModule_Transactions_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Module_Transactions_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Module_Transactions_Order_By>>;
+  where?: InputMaybe<Module_Transactions_Bool_Exp>;
+};
+
+/** columns and relationships of "transactions" */
+export type TransactionsModulesArgs = {
+  distinct_on?: InputMaybe<Array<Modules_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Modules_Order_By>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
+/** columns and relationships of "transactions" */
+export type TransactionsModules_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Modules_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Modules_Order_By>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
 /** columns and relationships of "transactions" */
 export type TransactionsPool_TransactionsArgs = {
   distinct_on?: InputMaybe<Array<Pool_Transactions_Select_Column>>;
@@ -10830,6 +13424,11 @@ export type Transactions_Bool_Exp = {
   is_ibc?: InputMaybe<Boolean_Comparison_Exp>;
   is_instantiate?: InputMaybe<Boolean_Comparison_Exp>;
   is_migrate?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_execute?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_execute_event?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_publish?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_script?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_upgrade?: InputMaybe<Boolean_Comparison_Exp>;
   is_send?: InputMaybe<Boolean_Comparison_Exp>;
   is_store_code?: InputMaybe<Boolean_Comparison_Exp>;
   is_update_admin?: InputMaybe<Boolean_Comparison_Exp>;
@@ -10837,6 +13436,10 @@ export type Transactions_Bool_Exp = {
   lcd_tx_results_aggregate?: InputMaybe<Lcd_Tx_Results_Aggregate_Bool_Exp>;
   memo?: InputMaybe<String_Comparison_Exp>;
   messages?: InputMaybe<Json_Comparison_Exp>;
+  module_transactions?: InputMaybe<Module_Transactions_Bool_Exp>;
+  module_transactions_aggregate?: InputMaybe<Module_Transactions_Aggregate_Bool_Exp>;
+  modules?: InputMaybe<Modules_Bool_Exp>;
+  modules_aggregate?: InputMaybe<Modules_Aggregate_Bool_Exp>;
   pool_transactions?: InputMaybe<Pool_Transactions_Bool_Exp>;
   pool_transactions_aggregate?: InputMaybe<Pool_Transactions_Aggregate_Bool_Exp>;
   pools?: InputMaybe<Pools_Bool_Exp>;
@@ -10882,12 +13485,19 @@ export type Transactions_Insert_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
   lcd_tx_results?: InputMaybe<Lcd_Tx_Results_Arr_Rel_Insert_Input>;
   memo?: InputMaybe<Scalars["String"]>;
   messages?: InputMaybe<Scalars["json"]>;
+  module_transactions?: InputMaybe<Module_Transactions_Arr_Rel_Insert_Input>;
+  modules?: InputMaybe<Modules_Arr_Rel_Insert_Input>;
   pool_transactions?: InputMaybe<Pool_Transactions_Arr_Rel_Insert_Input>;
   pools?: InputMaybe<Pools_Arr_Rel_Insert_Input>;
   sender?: InputMaybe<Scalars["Int"]>;
@@ -10987,12 +13597,19 @@ export type Transactions_Order_By = {
   is_ibc?: InputMaybe<Order_By>;
   is_instantiate?: InputMaybe<Order_By>;
   is_migrate?: InputMaybe<Order_By>;
+  is_move_execute?: InputMaybe<Order_By>;
+  is_move_execute_event?: InputMaybe<Order_By>;
+  is_move_publish?: InputMaybe<Order_By>;
+  is_move_script?: InputMaybe<Order_By>;
+  is_move_upgrade?: InputMaybe<Order_By>;
   is_send?: InputMaybe<Order_By>;
   is_store_code?: InputMaybe<Order_By>;
   is_update_admin?: InputMaybe<Order_By>;
   lcd_tx_results_aggregate?: InputMaybe<Lcd_Tx_Results_Aggregate_Order_By>;
   memo?: InputMaybe<Order_By>;
   messages?: InputMaybe<Order_By>;
+  module_transactions_aggregate?: InputMaybe<Module_Transactions_Aggregate_Order_By>;
+  modules_aggregate?: InputMaybe<Modules_Aggregate_Order_By>;
   pool_transactions_aggregate?: InputMaybe<Pool_Transactions_Aggregate_Order_By>;
   pools_aggregate?: InputMaybe<Pools_Aggregate_Order_By>;
   sender?: InputMaybe<Order_By>;
@@ -11032,6 +13649,16 @@ export enum Transactions_Select_Column {
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11060,6 +13687,16 @@ export enum Transactions_Select_Column_Transactions_Aggregate_Bool_Exp_Bool_And_
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11082,6 +13719,16 @@ export enum Transactions_Select_Column_Transactions_Aggregate_Bool_Exp_Bool_Or_A
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11105,6 +13752,11 @@ export type Transactions_Set_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
@@ -11193,6 +13845,11 @@ export type Transactions_Stream_Cursor_Value_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
@@ -11248,6 +13905,16 @@ export enum Transactions_Update_Column {
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11329,6 +13996,19 @@ export type Transactions_Variance_Order_By = {
   sender?: InputMaybe<Order_By>;
 };
 
+/** Boolean expression to compare columns of type "upgradepolicy". All fields are combined with logical 'AND'. */
+export type Upgradepolicy_Comparison_Exp = {
+  _eq?: InputMaybe<Scalars["upgradepolicy"]>;
+  _gt?: InputMaybe<Scalars["upgradepolicy"]>;
+  _gte?: InputMaybe<Scalars["upgradepolicy"]>;
+  _in?: InputMaybe<Array<Scalars["upgradepolicy"]>>;
+  _is_null?: InputMaybe<Scalars["Boolean"]>;
+  _lt?: InputMaybe<Scalars["upgradepolicy"]>;
+  _lte?: InputMaybe<Scalars["upgradepolicy"]>;
+  _neq?: InputMaybe<Scalars["upgradepolicy"]>;
+  _nin?: InputMaybe<Array<Scalars["upgradepolicy"]>>;
+};
+
 /** columns and relationships of "validators" */
 export type Validators = {
   __typename?: "validators";
@@ -11350,6 +14030,8 @@ export type Validators = {
   min_self_delegation: Scalars["String"];
   moniker: Scalars["String"];
   operator_address: Scalars["String"];
+  voting_power: Scalars["bigint"];
+  voting_powers: Scalars["json"];
   website: Scalars["String"];
 };
 
@@ -11371,6 +14053,11 @@ export type ValidatorsBlocks_AggregateArgs = {
   where?: InputMaybe<Blocks_Bool_Exp>;
 };
 
+/** columns and relationships of "validators" */
+export type ValidatorsVoting_PowersArgs = {
+  path?: InputMaybe<Scalars["String"]>;
+};
+
 /** aggregated selection of "validators" */
 export type Validators_Aggregate = {
   __typename?: "validators_aggregate";
@@ -11454,12 +14141,14 @@ export type Validators_Avg_Fields = {
   __typename?: "validators_avg_fields";
   account_id?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  voting_power?: Maybe<Scalars["Float"]>;
 };
 
 /** order by avg() on columns of table "validators" */
 export type Validators_Avg_Order_By = {
   account_id?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
 };
 
 /** Boolean expression to filter rows from the table "validators". All fields are combined with a logical 'AND'. */
@@ -11482,6 +14171,8 @@ export type Validators_Bool_Exp = {
   min_self_delegation?: InputMaybe<String_Comparison_Exp>;
   moniker?: InputMaybe<String_Comparison_Exp>;
   operator_address?: InputMaybe<String_Comparison_Exp>;
+  voting_power?: InputMaybe<Bigint_Comparison_Exp>;
+  voting_powers?: InputMaybe<Json_Comparison_Exp>;
   website?: InputMaybe<String_Comparison_Exp>;
 };
 
@@ -11499,6 +14190,7 @@ export enum Validators_Constraint {
 export type Validators_Inc_Input = {
   account_id?: InputMaybe<Scalars["Int"]>;
   id?: InputMaybe<Scalars["Int"]>;
+  voting_power?: InputMaybe<Scalars["bigint"]>;
 };
 
 /** input type for inserting data into table "validators" */
@@ -11517,6 +14209,8 @@ export type Validators_Insert_Input = {
   min_self_delegation?: InputMaybe<Scalars["String"]>;
   moniker?: InputMaybe<Scalars["String"]>;
   operator_address?: InputMaybe<Scalars["String"]>;
+  voting_power?: InputMaybe<Scalars["bigint"]>;
+  voting_powers?: InputMaybe<Scalars["json"]>;
   website?: InputMaybe<Scalars["String"]>;
 };
 
@@ -11534,6 +14228,7 @@ export type Validators_Max_Fields = {
   min_self_delegation?: Maybe<Scalars["String"]>;
   moniker?: Maybe<Scalars["String"]>;
   operator_address?: Maybe<Scalars["String"]>;
+  voting_power?: Maybe<Scalars["bigint"]>;
   website?: Maybe<Scalars["String"]>;
 };
 
@@ -11550,6 +14245,7 @@ export type Validators_Max_Order_By = {
   min_self_delegation?: InputMaybe<Order_By>;
   moniker?: InputMaybe<Order_By>;
   operator_address?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
   website?: InputMaybe<Order_By>;
 };
 
@@ -11567,6 +14263,7 @@ export type Validators_Min_Fields = {
   min_self_delegation?: Maybe<Scalars["String"]>;
   moniker?: Maybe<Scalars["String"]>;
   operator_address?: Maybe<Scalars["String"]>;
+  voting_power?: Maybe<Scalars["bigint"]>;
   website?: Maybe<Scalars["String"]>;
 };
 
@@ -11583,6 +14280,7 @@ export type Validators_Min_Order_By = {
   min_self_delegation?: InputMaybe<Order_By>;
   moniker?: InputMaybe<Order_By>;
   operator_address?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
   website?: InputMaybe<Order_By>;
 };
 
@@ -11625,6 +14323,8 @@ export type Validators_Order_By = {
   min_self_delegation?: InputMaybe<Order_By>;
   moniker?: InputMaybe<Order_By>;
   operator_address?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
+  voting_powers?: InputMaybe<Order_By>;
   website?: InputMaybe<Order_By>;
 };
 
@@ -11660,6 +14360,10 @@ export enum Validators_Select_Column {
   /** column name */
   OperatorAddress = "operator_address",
   /** column name */
+  VotingPower = "voting_power",
+  /** column name */
+  VotingPowers = "voting_powers",
+  /** column name */
   Website = "website",
 }
 
@@ -11672,181 +14376,460 @@ export enum Validators_Select_Column_Validators_Aggregate_Bool_Exp_Bool_And_Argu
 /** select "validators_aggregate_bool_exp_bool_or_arguments_columns" columns of table "validators" */
 export enum Validators_Select_Column_Validators_Aggregate_Bool_Exp_Bool_Or_Arguments_Columns {
   /** column name */
-  Jailed = "jailed",
+  Jailed = "jailed",
+}
+
+/** input type for updating data in table "validators" */
+export type Validators_Set_Input = {
+  account_id?: InputMaybe<Scalars["Int"]>;
+  commission_max_change?: InputMaybe<Scalars["String"]>;
+  commission_max_rate?: InputMaybe<Scalars["String"]>;
+  commission_rate?: InputMaybe<Scalars["String"]>;
+  consensus_address?: InputMaybe<Scalars["String"]>;
+  details?: InputMaybe<Scalars["String"]>;
+  id?: InputMaybe<Scalars["Int"]>;
+  identity?: InputMaybe<Scalars["String"]>;
+  jailed?: InputMaybe<Scalars["Boolean"]>;
+  min_self_delegation?: InputMaybe<Scalars["String"]>;
+  moniker?: InputMaybe<Scalars["String"]>;
+  operator_address?: InputMaybe<Scalars["String"]>;
+  voting_power?: InputMaybe<Scalars["bigint"]>;
+  voting_powers?: InputMaybe<Scalars["json"]>;
+  website?: InputMaybe<Scalars["String"]>;
+};
+
+/** aggregate stddev on columns */
+export type Validators_Stddev_Fields = {
+  __typename?: "validators_stddev_fields";
+  account_id?: Maybe<Scalars["Float"]>;
+  id?: Maybe<Scalars["Float"]>;
+  voting_power?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev() on columns of table "validators" */
+export type Validators_Stddev_Order_By = {
+  account_id?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_pop on columns */
+export type Validators_Stddev_Pop_Fields = {
+  __typename?: "validators_stddev_pop_fields";
+  account_id?: Maybe<Scalars["Float"]>;
+  id?: Maybe<Scalars["Float"]>;
+  voting_power?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_pop() on columns of table "validators" */
+export type Validators_Stddev_Pop_Order_By = {
+  account_id?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
+};
+
+/** aggregate stddev_samp on columns */
+export type Validators_Stddev_Samp_Fields = {
+  __typename?: "validators_stddev_samp_fields";
+  account_id?: Maybe<Scalars["Float"]>;
+  id?: Maybe<Scalars["Float"]>;
+  voting_power?: Maybe<Scalars["Float"]>;
+};
+
+/** order by stddev_samp() on columns of table "validators" */
+export type Validators_Stddev_Samp_Order_By = {
+  account_id?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
+};
+
+/** Streaming cursor of the table "validators" */
+export type Validators_Stream_Cursor_Input = {
+  /** Stream column input with initial value */
+  initial_value: Validators_Stream_Cursor_Value_Input;
+  /** cursor ordering */
+  ordering?: InputMaybe<Cursor_Ordering>;
+};
+
+/** Initial value of the column from where the streaming should start */
+export type Validators_Stream_Cursor_Value_Input = {
+  account_id?: InputMaybe<Scalars["Int"]>;
+  commission_max_change?: InputMaybe<Scalars["String"]>;
+  commission_max_rate?: InputMaybe<Scalars["String"]>;
+  commission_rate?: InputMaybe<Scalars["String"]>;
+  consensus_address?: InputMaybe<Scalars["String"]>;
+  details?: InputMaybe<Scalars["String"]>;
+  id?: InputMaybe<Scalars["Int"]>;
+  identity?: InputMaybe<Scalars["String"]>;
+  jailed?: InputMaybe<Scalars["Boolean"]>;
+  min_self_delegation?: InputMaybe<Scalars["String"]>;
+  moniker?: InputMaybe<Scalars["String"]>;
+  operator_address?: InputMaybe<Scalars["String"]>;
+  voting_power?: InputMaybe<Scalars["bigint"]>;
+  voting_powers?: InputMaybe<Scalars["json"]>;
+  website?: InputMaybe<Scalars["String"]>;
+};
+
+/** aggregate sum on columns */
+export type Validators_Sum_Fields = {
+  __typename?: "validators_sum_fields";
+  account_id?: Maybe<Scalars["Int"]>;
+  id?: Maybe<Scalars["Int"]>;
+  voting_power?: Maybe<Scalars["bigint"]>;
+};
+
+/** order by sum() on columns of table "validators" */
+export type Validators_Sum_Order_By = {
+  account_id?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
+};
+
+/** update columns of table "validators" */
+export enum Validators_Update_Column {
+  /** column name */
+  AccountId = "account_id",
+  /** column name */
+  CommissionMaxChange = "commission_max_change",
+  /** column name */
+  CommissionMaxRate = "commission_max_rate",
+  /** column name */
+  CommissionRate = "commission_rate",
+  /** column name */
+  ConsensusAddress = "consensus_address",
+  /** column name */
+  Details = "details",
+  /** column name */
+  Id = "id",
+  /** column name */
+  Identity = "identity",
+  /** column name */
+  Jailed = "jailed",
+  /** column name */
+  MinSelfDelegation = "min_self_delegation",
+  /** column name */
+  Moniker = "moniker",
+  /** column name */
+  OperatorAddress = "operator_address",
+  /** column name */
+  VotingPower = "voting_power",
+  /** column name */
+  VotingPowers = "voting_powers",
+  /** column name */
+  Website = "website",
+}
+
+export type Validators_Updates = {
+  /** increments the numeric columns with given value of the filtered values */
+  _inc?: InputMaybe<Validators_Inc_Input>;
+  /** sets the columns of the filtered rows to the given values */
+  _set?: InputMaybe<Validators_Set_Input>;
+  /** filter the rows which have to be updated */
+  where: Validators_Bool_Exp;
+};
+
+/** aggregate var_pop on columns */
+export type Validators_Var_Pop_Fields = {
+  __typename?: "validators_var_pop_fields";
+  account_id?: Maybe<Scalars["Float"]>;
+  id?: Maybe<Scalars["Float"]>;
+  voting_power?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_pop() on columns of table "validators" */
+export type Validators_Var_Pop_Order_By = {
+  account_id?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
+};
+
+/** aggregate var_samp on columns */
+export type Validators_Var_Samp_Fields = {
+  __typename?: "validators_var_samp_fields";
+  account_id?: Maybe<Scalars["Float"]>;
+  id?: Maybe<Scalars["Float"]>;
+  voting_power?: Maybe<Scalars["Float"]>;
+};
+
+/** order by var_samp() on columns of table "validators" */
+export type Validators_Var_Samp_Order_By = {
+  account_id?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
+};
+
+/** aggregate variance on columns */
+export type Validators_Variance_Fields = {
+  __typename?: "validators_variance_fields";
+  account_id?: Maybe<Scalars["Float"]>;
+  id?: Maybe<Scalars["Float"]>;
+  voting_power?: Maybe<Scalars["Float"]>;
+};
+
+/** order by variance() on columns of table "validators" */
+export type Validators_Variance_Order_By = {
+  account_id?: InputMaybe<Order_By>;
+  id?: InputMaybe<Order_By>;
+  voting_power?: InputMaybe<Order_By>;
+};
+
+/** columns and relationships of "vm_addresses" */
+export type Vm_Addresses = {
+  __typename?: "vm_addresses";
+  /** An array relationship */
+  accounts: Array<Accounts>;
+  /** An aggregate relationship */
+  accounts_aggregate: Accounts_Aggregate;
+  id: Scalars["Int"];
+  /** An array relationship */
+  modules: Array<Modules>;
+  /** An aggregate relationship */
+  modules_aggregate: Modules_Aggregate;
+  vm_address: Scalars["String"];
+};
+
+/** columns and relationships of "vm_addresses" */
+export type Vm_AddressesAccountsArgs = {
+  distinct_on?: InputMaybe<Array<Accounts_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Accounts_Order_By>>;
+  where?: InputMaybe<Accounts_Bool_Exp>;
+};
+
+/** columns and relationships of "vm_addresses" */
+export type Vm_AddressesAccounts_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Accounts_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Accounts_Order_By>>;
+  where?: InputMaybe<Accounts_Bool_Exp>;
+};
+
+/** columns and relationships of "vm_addresses" */
+export type Vm_AddressesModulesArgs = {
+  distinct_on?: InputMaybe<Array<Modules_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Modules_Order_By>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
+/** columns and relationships of "vm_addresses" */
+export type Vm_AddressesModules_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Modules_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Modules_Order_By>>;
+  where?: InputMaybe<Modules_Bool_Exp>;
+};
+
+/** aggregated selection of "vm_addresses" */
+export type Vm_Addresses_Aggregate = {
+  __typename?: "vm_addresses_aggregate";
+  aggregate?: Maybe<Vm_Addresses_Aggregate_Fields>;
+  nodes: Array<Vm_Addresses>;
+};
+
+/** aggregate fields of "vm_addresses" */
+export type Vm_Addresses_Aggregate_Fields = {
+  __typename?: "vm_addresses_aggregate_fields";
+  avg?: Maybe<Vm_Addresses_Avg_Fields>;
+  count: Scalars["Int"];
+  max?: Maybe<Vm_Addresses_Max_Fields>;
+  min?: Maybe<Vm_Addresses_Min_Fields>;
+  stddev?: Maybe<Vm_Addresses_Stddev_Fields>;
+  stddev_pop?: Maybe<Vm_Addresses_Stddev_Pop_Fields>;
+  stddev_samp?: Maybe<Vm_Addresses_Stddev_Samp_Fields>;
+  sum?: Maybe<Vm_Addresses_Sum_Fields>;
+  var_pop?: Maybe<Vm_Addresses_Var_Pop_Fields>;
+  var_samp?: Maybe<Vm_Addresses_Var_Samp_Fields>;
+  variance?: Maybe<Vm_Addresses_Variance_Fields>;
+};
+
+/** aggregate fields of "vm_addresses" */
+export type Vm_Addresses_Aggregate_FieldsCountArgs = {
+  columns?: InputMaybe<Array<Vm_Addresses_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+};
+
+/** aggregate avg on columns */
+export type Vm_Addresses_Avg_Fields = {
+  __typename?: "vm_addresses_avg_fields";
+  id?: Maybe<Scalars["Float"]>;
+};
+
+/** Boolean expression to filter rows from the table "vm_addresses". All fields are combined with a logical 'AND'. */
+export type Vm_Addresses_Bool_Exp = {
+  _and?: InputMaybe<Array<Vm_Addresses_Bool_Exp>>;
+  _not?: InputMaybe<Vm_Addresses_Bool_Exp>;
+  _or?: InputMaybe<Array<Vm_Addresses_Bool_Exp>>;
+  accounts?: InputMaybe<Accounts_Bool_Exp>;
+  accounts_aggregate?: InputMaybe<Accounts_Aggregate_Bool_Exp>;
+  id?: InputMaybe<Int_Comparison_Exp>;
+  modules?: InputMaybe<Modules_Bool_Exp>;
+  modules_aggregate?: InputMaybe<Modules_Aggregate_Bool_Exp>;
+  vm_address?: InputMaybe<String_Comparison_Exp>;
+};
+
+/** unique or primary key constraints on table "vm_addresses" */
+export enum Vm_Addresses_Constraint {
+  /** unique or primary key constraint on columns "id" */
+  VmAddressesPkey = "vm_addresses_pkey",
+  /** unique or primary key constraint on columns "vm_address" */
+  VmAddressesVmAddressKey = "vm_addresses_vm_address_key",
+}
+
+/** input type for incrementing numeric columns in table "vm_addresses" */
+export type Vm_Addresses_Inc_Input = {
+  id?: InputMaybe<Scalars["Int"]>;
+};
+
+/** input type for inserting data into table "vm_addresses" */
+export type Vm_Addresses_Insert_Input = {
+  accounts?: InputMaybe<Accounts_Arr_Rel_Insert_Input>;
+  id?: InputMaybe<Scalars["Int"]>;
+  modules?: InputMaybe<Modules_Arr_Rel_Insert_Input>;
+  vm_address?: InputMaybe<Scalars["String"]>;
+};
+
+/** aggregate max on columns */
+export type Vm_Addresses_Max_Fields = {
+  __typename?: "vm_addresses_max_fields";
+  id?: Maybe<Scalars["Int"]>;
+  vm_address?: Maybe<Scalars["String"]>;
+};
+
+/** aggregate min on columns */
+export type Vm_Addresses_Min_Fields = {
+  __typename?: "vm_addresses_min_fields";
+  id?: Maybe<Scalars["Int"]>;
+  vm_address?: Maybe<Scalars["String"]>;
+};
+
+/** response of any mutation on the table "vm_addresses" */
+export type Vm_Addresses_Mutation_Response = {
+  __typename?: "vm_addresses_mutation_response";
+  /** number of rows affected by the mutation */
+  affected_rows: Scalars["Int"];
+  /** data from the rows affected by the mutation */
+  returning: Array<Vm_Addresses>;
+};
+
+/** input type for inserting object relation for remote table "vm_addresses" */
+export type Vm_Addresses_Obj_Rel_Insert_Input = {
+  data: Vm_Addresses_Insert_Input;
+  /** upsert condition */
+  on_conflict?: InputMaybe<Vm_Addresses_On_Conflict>;
+};
+
+/** on_conflict condition type for table "vm_addresses" */
+export type Vm_Addresses_On_Conflict = {
+  constraint: Vm_Addresses_Constraint;
+  update_columns?: Array<Vm_Addresses_Update_Column>;
+  where?: InputMaybe<Vm_Addresses_Bool_Exp>;
+};
+
+/** Ordering options when selecting data from "vm_addresses". */
+export type Vm_Addresses_Order_By = {
+  accounts_aggregate?: InputMaybe<Accounts_Aggregate_Order_By>;
+  id?: InputMaybe<Order_By>;
+  modules_aggregate?: InputMaybe<Modules_Aggregate_Order_By>;
+  vm_address?: InputMaybe<Order_By>;
+};
+
+/** primary key columns input for table: vm_addresses */
+export type Vm_Addresses_Pk_Columns_Input = {
+  id: Scalars["Int"];
+};
+
+/** select columns of table "vm_addresses" */
+export enum Vm_Addresses_Select_Column {
+  /** column name */
+  Id = "id",
+  /** column name */
+  VmAddress = "vm_address",
 }
 
-/** input type for updating data in table "validators" */
-export type Validators_Set_Input = {
-  account_id?: InputMaybe<Scalars["Int"]>;
-  commission_max_change?: InputMaybe<Scalars["String"]>;
-  commission_max_rate?: InputMaybe<Scalars["String"]>;
-  commission_rate?: InputMaybe<Scalars["String"]>;
-  consensus_address?: InputMaybe<Scalars["String"]>;
-  details?: InputMaybe<Scalars["String"]>;
+/** input type for updating data in table "vm_addresses" */
+export type Vm_Addresses_Set_Input = {
   id?: InputMaybe<Scalars["Int"]>;
-  identity?: InputMaybe<Scalars["String"]>;
-  jailed?: InputMaybe<Scalars["Boolean"]>;
-  min_self_delegation?: InputMaybe<Scalars["String"]>;
-  moniker?: InputMaybe<Scalars["String"]>;
-  operator_address?: InputMaybe<Scalars["String"]>;
-  website?: InputMaybe<Scalars["String"]>;
+  vm_address?: InputMaybe<Scalars["String"]>;
 };
 
 /** aggregate stddev on columns */
-export type Validators_Stddev_Fields = {
-  __typename?: "validators_stddev_fields";
-  account_id?: Maybe<Scalars["Float"]>;
+export type Vm_Addresses_Stddev_Fields = {
+  __typename?: "vm_addresses_stddev_fields";
   id?: Maybe<Scalars["Float"]>;
 };
 
-/** order by stddev() on columns of table "validators" */
-export type Validators_Stddev_Order_By = {
-  account_id?: InputMaybe<Order_By>;
-  id?: InputMaybe<Order_By>;
-};
-
 /** aggregate stddev_pop on columns */
-export type Validators_Stddev_Pop_Fields = {
-  __typename?: "validators_stddev_pop_fields";
-  account_id?: Maybe<Scalars["Float"]>;
+export type Vm_Addresses_Stddev_Pop_Fields = {
+  __typename?: "vm_addresses_stddev_pop_fields";
   id?: Maybe<Scalars["Float"]>;
 };
 
-/** order by stddev_pop() on columns of table "validators" */
-export type Validators_Stddev_Pop_Order_By = {
-  account_id?: InputMaybe<Order_By>;
-  id?: InputMaybe<Order_By>;
-};
-
 /** aggregate stddev_samp on columns */
-export type Validators_Stddev_Samp_Fields = {
-  __typename?: "validators_stddev_samp_fields";
-  account_id?: Maybe<Scalars["Float"]>;
+export type Vm_Addresses_Stddev_Samp_Fields = {
+  __typename?: "vm_addresses_stddev_samp_fields";
   id?: Maybe<Scalars["Float"]>;
 };
 
-/** order by stddev_samp() on columns of table "validators" */
-export type Validators_Stddev_Samp_Order_By = {
-  account_id?: InputMaybe<Order_By>;
-  id?: InputMaybe<Order_By>;
-};
-
-/** Streaming cursor of the table "validators" */
-export type Validators_Stream_Cursor_Input = {
+/** Streaming cursor of the table "vm_addresses" */
+export type Vm_Addresses_Stream_Cursor_Input = {
   /** Stream column input with initial value */
-  initial_value: Validators_Stream_Cursor_Value_Input;
+  initial_value: Vm_Addresses_Stream_Cursor_Value_Input;
   /** cursor ordering */
   ordering?: InputMaybe<Cursor_Ordering>;
 };
 
 /** Initial value of the column from where the streaming should start */
-export type Validators_Stream_Cursor_Value_Input = {
-  account_id?: InputMaybe<Scalars["Int"]>;
-  commission_max_change?: InputMaybe<Scalars["String"]>;
-  commission_max_rate?: InputMaybe<Scalars["String"]>;
-  commission_rate?: InputMaybe<Scalars["String"]>;
-  consensus_address?: InputMaybe<Scalars["String"]>;
-  details?: InputMaybe<Scalars["String"]>;
+export type Vm_Addresses_Stream_Cursor_Value_Input = {
   id?: InputMaybe<Scalars["Int"]>;
-  identity?: InputMaybe<Scalars["String"]>;
-  jailed?: InputMaybe<Scalars["Boolean"]>;
-  min_self_delegation?: InputMaybe<Scalars["String"]>;
-  moniker?: InputMaybe<Scalars["String"]>;
-  operator_address?: InputMaybe<Scalars["String"]>;
-  website?: InputMaybe<Scalars["String"]>;
+  vm_address?: InputMaybe<Scalars["String"]>;
 };
 
 /** aggregate sum on columns */
-export type Validators_Sum_Fields = {
-  __typename?: "validators_sum_fields";
-  account_id?: Maybe<Scalars["Int"]>;
+export type Vm_Addresses_Sum_Fields = {
+  __typename?: "vm_addresses_sum_fields";
   id?: Maybe<Scalars["Int"]>;
 };
 
-/** order by sum() on columns of table "validators" */
-export type Validators_Sum_Order_By = {
-  account_id?: InputMaybe<Order_By>;
-  id?: InputMaybe<Order_By>;
-};
-
-/** update columns of table "validators" */
-export enum Validators_Update_Column {
-  /** column name */
-  AccountId = "account_id",
-  /** column name */
-  CommissionMaxChange = "commission_max_change",
-  /** column name */
-  CommissionMaxRate = "commission_max_rate",
-  /** column name */
-  CommissionRate = "commission_rate",
-  /** column name */
-  ConsensusAddress = "consensus_address",
-  /** column name */
-  Details = "details",
+/** update columns of table "vm_addresses" */
+export enum Vm_Addresses_Update_Column {
   /** column name */
   Id = "id",
   /** column name */
-  Identity = "identity",
-  /** column name */
-  Jailed = "jailed",
-  /** column name */
-  MinSelfDelegation = "min_self_delegation",
-  /** column name */
-  Moniker = "moniker",
-  /** column name */
-  OperatorAddress = "operator_address",
-  /** column name */
-  Website = "website",
+  VmAddress = "vm_address",
 }
 
-export type Validators_Updates = {
+export type Vm_Addresses_Updates = {
   /** increments the numeric columns with given value of the filtered values */
-  _inc?: InputMaybe<Validators_Inc_Input>;
+  _inc?: InputMaybe<Vm_Addresses_Inc_Input>;
   /** sets the columns of the filtered rows to the given values */
-  _set?: InputMaybe<Validators_Set_Input>;
+  _set?: InputMaybe<Vm_Addresses_Set_Input>;
   /** filter the rows which have to be updated */
-  where: Validators_Bool_Exp;
+  where: Vm_Addresses_Bool_Exp;
 };
 
 /** aggregate var_pop on columns */
-export type Validators_Var_Pop_Fields = {
-  __typename?: "validators_var_pop_fields";
-  account_id?: Maybe<Scalars["Float"]>;
+export type Vm_Addresses_Var_Pop_Fields = {
+  __typename?: "vm_addresses_var_pop_fields";
   id?: Maybe<Scalars["Float"]>;
 };
 
-/** order by var_pop() on columns of table "validators" */
-export type Validators_Var_Pop_Order_By = {
-  account_id?: InputMaybe<Order_By>;
-  id?: InputMaybe<Order_By>;
-};
-
 /** aggregate var_samp on columns */
-export type Validators_Var_Samp_Fields = {
-  __typename?: "validators_var_samp_fields";
-  account_id?: Maybe<Scalars["Float"]>;
+export type Vm_Addresses_Var_Samp_Fields = {
+  __typename?: "vm_addresses_var_samp_fields";
   id?: Maybe<Scalars["Float"]>;
 };
 
-/** order by var_samp() on columns of table "validators" */
-export type Validators_Var_Samp_Order_By = {
-  account_id?: InputMaybe<Order_By>;
-  id?: InputMaybe<Order_By>;
-};
-
 /** aggregate variance on columns */
-export type Validators_Variance_Fields = {
-  __typename?: "validators_variance_fields";
-  account_id?: Maybe<Scalars["Float"]>;
+export type Vm_Addresses_Variance_Fields = {
+  __typename?: "vm_addresses_variance_fields";
   id?: Maybe<Scalars["Float"]>;
 };
 
-/** order by variance() on columns of table "validators" */
-export type Validators_Variance_Order_By = {
-  account_id?: InputMaybe<Order_By>;
-  id?: InputMaybe<Order_By>;
-};
-
 export type GetAccountIdByAddressQueryDocumentQueryVariables = Exact<{
   address: Scalars["String"];
 }>;
@@ -12332,6 +15315,16 @@ export type GetContractListCountByAdminQuery = {
   };
 };
 
+export type GetModuleIdByNameAndVmAddressQueryQueryVariables = Exact<{
+  name: Scalars["String"];
+  vmAddress: Scalars["String"];
+}>;
+
+export type GetModuleIdByNameAndVmAddressQueryQuery = {
+  __typename?: "query_root";
+  modules: Array<{ __typename?: "modules"; id: number }>;
+};
+
 export type GetPoolListQueryVariables = Exact<{
   expression?: InputMaybe<Pools_Bool_Exp>;
   order?: InputMaybe<Order_By>;
@@ -12451,7 +15444,7 @@ export type GetRelatedProposalsByContractAddressPaginationQuery = {
       __typename?: "proposals";
       title: string;
       status: any;
-      voting_end_time: any;
+      voting_end_time?: any | null;
       deposit_end_time: any;
       type: string;
       is_expedited: boolean;
@@ -12487,7 +15480,7 @@ export type GetProposalsByWalletAddressPaginationQuery = {
     __typename?: "proposals";
     title: string;
     status: any;
-    voting_end_time: any;
+    voting_end_time?: any | null;
     deposit_end_time: any;
     type: string;
     id: number;
@@ -12524,7 +15517,7 @@ export type GetProposalListQuery = {
     type: string;
     id: number;
     title: string;
-    voting_end_time: any;
+    voting_end_time?: any | null;
     deposit_end_time: any;
     resolved_height?: number | null;
     status: any;
@@ -12710,6 +15703,56 @@ export type GetBlockTransactionCountByHeightQueryQuery = {
   };
 };
 
+export type GetModuleTransactionsQueryQueryVariables = Exact<{
+  filterExp?: InputMaybe<Module_Transactions_Bool_Exp>;
+  pageSize: Scalars["Int"];
+  offset: Scalars["Int"];
+}>;
+
+export type GetModuleTransactionsQueryQuery = {
+  __typename?: "query_root";
+  module_transactions: Array<{
+    __typename?: "module_transactions";
+    block: { __typename?: "blocks"; height: number; timestamp: any };
+    transaction: {
+      __typename?: "transactions";
+      hash: any;
+      success: boolean;
+      messages: any;
+      is_clear_admin: boolean;
+      is_execute: boolean;
+      is_ibc: boolean;
+      is_instantiate: boolean;
+      is_migrate: boolean;
+      is_send: boolean;
+      is_store_code: boolean;
+      is_update_admin: boolean;
+      is_move_execute: boolean;
+      is_move_execute_event: boolean;
+      is_move_publish: boolean;
+      is_move_script: boolean;
+      is_move_upgrade: boolean;
+      account: { __typename?: "accounts"; address: string };
+    };
+  }>;
+};
+
+export type GetModuleTransactionsCountByTypeQueryQueryVariables = Exact<{
+  moduleId: Scalars["Int"];
+  isUpgrade: Scalars["Boolean"];
+}>;
+
+export type GetModuleTransactionsCountByTypeQueryQuery = {
+  __typename?: "query_root";
+  module_transactions_aggregate: {
+    __typename?: "module_transactions_aggregate";
+    aggregate?: {
+      __typename?: "module_transactions_aggregate_fields";
+      count: number;
+    } | null;
+  };
+};
+
 export type GetValidatorsQueryVariables = Exact<{ [key: string]: never }>;
 
 export type GetValidatorsQuery = {
@@ -16147,19 +19190,123 @@ export const GetContractListByAdminPaginationDocument = {
   GetContractListByAdminPaginationQuery,
   GetContractListByAdminPaginationQueryVariables
 >;
-export const GetContractListCountByAdminDocument = {
+export const GetContractListCountByAdminDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getContractListCountByAdmin" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "walletAddress" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "String" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "contracts_aggregate" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "account" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "address" },
+                            value: {
+                              kind: "ObjectValue",
+                              fields: [
+                                {
+                                  kind: "ObjectField",
+                                  name: { kind: "Name", value: "_eq" },
+                                  value: {
+                                    kind: "Variable",
+                                    name: {
+                                      kind: "Name",
+                                      value: "walletAddress",
+                                    },
+                                  },
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "aggregate" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "count" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetContractListCountByAdminQuery,
+  GetContractListCountByAdminQueryVariables
+>;
+export const GetModuleIdByNameAndVmAddressQueryDocument = {
   kind: "Document",
   definitions: [
     {
       kind: "OperationDefinition",
       operation: "query",
-      name: { kind: "Name", value: "getContractListCountByAdmin" },
+      name: { kind: "Name", value: "getModuleIdByNameAndVmAddressQuery" },
       variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "name" } },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "String" },
+            },
+          },
+        },
         {
           kind: "VariableDefinition",
           variable: {
             kind: "Variable",
-            name: { kind: "Name", value: "walletAddress" },
+            name: { kind: "Name", value: "vmAddress" },
           },
           type: {
             kind: "NonNullType",
@@ -16175,7 +19322,7 @@ export const GetContractListCountByAdminDocument = {
         selections: [
           {
             kind: "Field",
-            name: { kind: "Name", value: "contracts_aggregate" },
+            name: { kind: "Name", value: "modules" },
             arguments: [
               {
                 kind: "Argument",
@@ -16185,13 +19332,30 @@ export const GetContractListCountByAdminDocument = {
                   fields: [
                     {
                       kind: "ObjectField",
-                      name: { kind: "Name", value: "account" },
+                      name: { kind: "Name", value: "name" },
                       value: {
                         kind: "ObjectValue",
                         fields: [
                           {
                             kind: "ObjectField",
-                            name: { kind: "Name", value: "address" },
+                            name: { kind: "Name", value: "_eq" },
+                            value: {
+                              kind: "Variable",
+                              name: { kind: "Name", value: "name" },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "vm_address" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "vm_address" },
                             value: {
                               kind: "ObjectValue",
                               fields: [
@@ -16200,10 +19364,7 @@ export const GetContractListCountByAdminDocument = {
                                   name: { kind: "Name", value: "_eq" },
                                   value: {
                                     kind: "Variable",
-                                    name: {
-                                      kind: "Name",
-                                      value: "walletAddress",
-                                    },
+                                    name: { kind: "Name", value: "vmAddress" },
                                   },
                                 },
                               ],
@@ -16219,16 +19380,7 @@ export const GetContractListCountByAdminDocument = {
             selectionSet: {
               kind: "SelectionSet",
               selections: [
-                {
-                  kind: "Field",
-                  name: { kind: "Name", value: "aggregate" },
-                  selectionSet: {
-                    kind: "SelectionSet",
-                    selections: [
-                      { kind: "Field", name: { kind: "Name", value: "count" } },
-                    ],
-                  },
-                },
+                { kind: "Field", name: { kind: "Name", value: "id" } },
               ],
             },
           },
@@ -16237,8 +19389,8 @@ export const GetContractListCountByAdminDocument = {
     },
   ],
 } as unknown as DocumentNode<
-  GetContractListCountByAdminQuery,
-  GetContractListCountByAdminQueryVariables
+  GetModuleIdByNameAndVmAddressQueryQuery,
+  GetModuleIdByNameAndVmAddressQueryQueryVariables
 >;
 export const GetPoolListDocument = {
   kind: "Document",
@@ -18218,36 +21370,275 @@ export const GetTxsDocument = {
       },
     },
   ],
-} as unknown as DocumentNode<GetTxsQuery, GetTxsQueryVariables>;
-export const GetTxsCountDocument = {
+} as unknown as DocumentNode<GetTxsQuery, GetTxsQueryVariables>;
+export const GetTxsCountDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getTxsCount" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "transactions" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: { kind: "IntValue", value: "1" },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "id" },
+                      value: { kind: "EnumValue", value: "desc" },
+                    },
+                  ],
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetTxsCountQuery, GetTxsCountQueryVariables>;
+export const GetBlockTransactionsByHeightQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getBlockTransactionsByHeightQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "limit" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "offset" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "height" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "transactions" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "limit" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "offset" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "offset" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "block_height" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "_eq" },
+                            value: {
+                              kind: "Variable",
+                              name: { kind: "Name", value: "height" },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "id" },
+                      value: { kind: "EnumValue", value: "asc" },
+                    },
+                  ],
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "block" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "height" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "timestamp" },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "account" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "address" },
+                      },
+                    ],
+                  },
+                },
+                { kind: "Field", name: { kind: "Name", value: "hash" } },
+                { kind: "Field", name: { kind: "Name", value: "success" } },
+                { kind: "Field", name: { kind: "Name", value: "messages" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_clear_admin" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "is_execute" } },
+                { kind: "Field", name: { kind: "Name", value: "is_ibc" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_instantiate" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "is_migrate" } },
+                { kind: "Field", name: { kind: "Name", value: "is_send" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_store_code" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_update_admin" },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetBlockTransactionsByHeightQueryQuery,
+  GetBlockTransactionsByHeightQueryQueryVariables
+>;
+export const GetBlockTransactionCountByHeightQueryDocument = {
   kind: "Document",
   definitions: [
     {
       kind: "OperationDefinition",
       operation: "query",
-      name: { kind: "Name", value: "getTxsCount" },
+      name: { kind: "Name", value: "getBlockTransactionCountByHeightQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "height" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
       selectionSet: {
         kind: "SelectionSet",
         selections: [
           {
             kind: "Field",
-            name: { kind: "Name", value: "transactions" },
+            name: { kind: "Name", value: "transactions_aggregate" },
             arguments: [
               {
                 kind: "Argument",
-                name: { kind: "Name", value: "limit" },
-                value: { kind: "IntValue", value: "1" },
-              },
-              {
-                kind: "Argument",
-                name: { kind: "Name", value: "order_by" },
+                name: { kind: "Name", value: "where" },
                 value: {
                   kind: "ObjectValue",
                   fields: [
                     {
                       kind: "ObjectField",
-                      name: { kind: "Name", value: "id" },
-                      value: { kind: "EnumValue", value: "desc" },
+                      name: { kind: "Name", value: "block_height" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "_eq" },
+                            value: {
+                              kind: "Variable",
+                              name: { kind: "Name", value: "height" },
+                            },
+                          },
+                        ],
+                      },
                     },
                   ],
                 },
@@ -18256,7 +21647,16 @@ export const GetTxsCountDocument = {
             selectionSet: {
               kind: "SelectionSet",
               selections: [
-                { kind: "Field", name: { kind: "Name", value: "id" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "aggregate" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "count" } },
+                    ],
+                  },
+                },
               ],
             },
           },
@@ -18264,31 +21664,34 @@ export const GetTxsCountDocument = {
       },
     },
   ],
-} as unknown as DocumentNode<GetTxsCountQuery, GetTxsCountQueryVariables>;
-export const GetBlockTransactionsByHeightQueryDocument = {
+} as unknown as DocumentNode<
+  GetBlockTransactionCountByHeightQueryQuery,
+  GetBlockTransactionCountByHeightQueryQueryVariables
+>;
+export const GetModuleTransactionsQueryDocument = {
   kind: "Document",
   definitions: [
     {
       kind: "OperationDefinition",
       operation: "query",
-      name: { kind: "Name", value: "getBlockTransactionsByHeightQuery" },
+      name: { kind: "Name", value: "getModuleTransactionsQuery" },
       variableDefinitions: [
         {
           kind: "VariableDefinition",
           variable: {
             kind: "Variable",
-            name: { kind: "Name", value: "limit" },
+            name: { kind: "Name", value: "filterExp" },
           },
           type: {
-            kind: "NonNullType",
-            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+            kind: "NamedType",
+            name: { kind: "Name", value: "module_transactions_bool_exp" },
           },
         },
         {
           kind: "VariableDefinition",
           variable: {
             kind: "Variable",
-            name: { kind: "Name", value: "offset" },
+            name: { kind: "Name", value: "pageSize" },
           },
           type: {
             kind: "NonNullType",
@@ -18299,7 +21702,7 @@ export const GetBlockTransactionsByHeightQueryDocument = {
           kind: "VariableDefinition",
           variable: {
             kind: "Variable",
-            name: { kind: "Name", value: "height" },
+            name: { kind: "Name", value: "offset" },
           },
           type: {
             kind: "NonNullType",
@@ -18312,48 +21715,30 @@ export const GetBlockTransactionsByHeightQueryDocument = {
         selections: [
           {
             kind: "Field",
-            name: { kind: "Name", value: "transactions" },
+            name: { kind: "Name", value: "module_transactions" },
             arguments: [
               {
                 kind: "Argument",
-                name: { kind: "Name", value: "limit" },
+                name: { kind: "Name", value: "where" },
                 value: {
                   kind: "Variable",
-                  name: { kind: "Name", value: "limit" },
+                  name: { kind: "Name", value: "filterExp" },
                 },
               },
               {
                 kind: "Argument",
-                name: { kind: "Name", value: "offset" },
+                name: { kind: "Name", value: "limit" },
                 value: {
                   kind: "Variable",
-                  name: { kind: "Name", value: "offset" },
+                  name: { kind: "Name", value: "pageSize" },
                 },
               },
               {
                 kind: "Argument",
-                name: { kind: "Name", value: "where" },
+                name: { kind: "Name", value: "offset" },
                 value: {
-                  kind: "ObjectValue",
-                  fields: [
-                    {
-                      kind: "ObjectField",
-                      name: { kind: "Name", value: "block_height" },
-                      value: {
-                        kind: "ObjectValue",
-                        fields: [
-                          {
-                            kind: "ObjectField",
-                            name: { kind: "Name", value: "_eq" },
-                            value: {
-                              kind: "Variable",
-                              name: { kind: "Name", value: "height" },
-                            },
-                          },
-                        ],
-                      },
-                    },
-                  ],
+                  kind: "Variable",
+                  name: { kind: "Name", value: "offset" },
                 },
               },
               {
@@ -18364,8 +21749,8 @@ export const GetBlockTransactionsByHeightQueryDocument = {
                   fields: [
                     {
                       kind: "ObjectField",
-                      name: { kind: "Name", value: "id" },
-                      value: { kind: "EnumValue", value: "asc" },
+                      name: { kind: "Name", value: "block_height" },
+                      value: { kind: "EnumValue", value: "desc" },
                     },
                   ],
                 },
@@ -18393,40 +21778,87 @@ export const GetBlockTransactionsByHeightQueryDocument = {
                 },
                 {
                   kind: "Field",
-                  name: { kind: "Name", value: "account" },
+                  name: { kind: "Name", value: "transaction" },
                   selectionSet: {
                     kind: "SelectionSet",
                     selections: [
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "address" },
+                        name: { kind: "Name", value: "account" },
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "address" },
+                            },
+                          ],
+                        },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "hash" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "success" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "messages" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_clear_admin" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_execute" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_ibc" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_instantiate" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_migrate" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_send" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_store_code" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_update_admin" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_execute" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_execute_event" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_publish" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_script" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_move_upgrade" },
                       },
                     ],
                   },
                 },
-                { kind: "Field", name: { kind: "Name", value: "hash" } },
-                { kind: "Field", name: { kind: "Name", value: "success" } },
-                { kind: "Field", name: { kind: "Name", value: "messages" } },
-                {
-                  kind: "Field",
-                  name: { kind: "Name", value: "is_clear_admin" },
-                },
-                { kind: "Field", name: { kind: "Name", value: "is_execute" } },
-                { kind: "Field", name: { kind: "Name", value: "is_ibc" } },
-                {
-                  kind: "Field",
-                  name: { kind: "Name", value: "is_instantiate" },
-                },
-                { kind: "Field", name: { kind: "Name", value: "is_migrate" } },
-                { kind: "Field", name: { kind: "Name", value: "is_send" } },
-                {
-                  kind: "Field",
-                  name: { kind: "Name", value: "is_store_code" },
-                },
-                {
-                  kind: "Field",
-                  name: { kind: "Name", value: "is_update_admin" },
-                },
               ],
             },
           },
@@ -18435,35 +21867,49 @@ export const GetBlockTransactionsByHeightQueryDocument = {
     },
   ],
 } as unknown as DocumentNode<
-  GetBlockTransactionsByHeightQueryQuery,
-  GetBlockTransactionsByHeightQueryQueryVariables
+  GetModuleTransactionsQueryQuery,
+  GetModuleTransactionsQueryQueryVariables
 >;
-export const GetBlockTransactionCountByHeightQueryDocument = {
+export const GetModuleTransactionsCountByTypeQueryDocument = {
   kind: "Document",
   definitions: [
     {
       kind: "OperationDefinition",
       operation: "query",
-      name: { kind: "Name", value: "getBlockTransactionCountByHeightQuery" },
+      name: { kind: "Name", value: "getModuleTransactionsCountByTypeQuery" },
       variableDefinitions: [
         {
           kind: "VariableDefinition",
           variable: {
             kind: "Variable",
-            name: { kind: "Name", value: "height" },
+            name: { kind: "Name", value: "moduleId" },
           },
           type: {
             kind: "NonNullType",
             type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
           },
         },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "isUpgrade" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "Boolean" },
+            },
+          },
+        },
       ],
       selectionSet: {
         kind: "SelectionSet",
         selections: [
           {
             kind: "Field",
-            name: { kind: "Name", value: "transactions_aggregate" },
+            name: { kind: "Name", value: "module_transactions_aggregate" },
             arguments: [
               {
                 kind: "Argument",
@@ -18473,7 +21919,7 @@ export const GetBlockTransactionCountByHeightQueryDocument = {
                   fields: [
                     {
                       kind: "ObjectField",
-                      name: { kind: "Name", value: "block_height" },
+                      name: { kind: "Name", value: "module_id" },
                       value: {
                         kind: "ObjectValue",
                         fields: [
@@ -18482,7 +21928,33 @@ export const GetBlockTransactionCountByHeightQueryDocument = {
                             name: { kind: "Name", value: "_eq" },
                             value: {
                               kind: "Variable",
-                              name: { kind: "Name", value: "height" },
+                              name: { kind: "Name", value: "moduleId" },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "transaction" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "is_move_upgrade" },
+                            value: {
+                              kind: "ObjectValue",
+                              fields: [
+                                {
+                                  kind: "ObjectField",
+                                  name: { kind: "Name", value: "_eq" },
+                                  value: {
+                                    kind: "Variable",
+                                    name: { kind: "Name", value: "isUpgrade" },
+                                  },
+                                },
+                              ],
                             },
                           },
                         ],
@@ -18513,8 +21985,8 @@ export const GetBlockTransactionCountByHeightQueryDocument = {
     },
   ],
 } as unknown as DocumentNode<
-  GetBlockTransactionCountByHeightQueryQuery,
-  GetBlockTransactionCountByHeightQueryQueryVariables
+  GetModuleTransactionsCountByTypeQueryQuery,
+  GetModuleTransactionsCountByTypeQueryQueryVariables
 >;
 export const GetValidatorsDocument = {
   kind: "Document",
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 2df1613b9..346a653b9 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -4,95 +4,86 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { ModuleSourceCode } from "lib/components/module";
-import {
-  useVerifyModule,
-  type IndexedModule,
-} from "lib/services/moduleService";
-import type { HexAddr } from "lib/types";
+import type { ModuleVerificationInternal } from "lib/services/module";
+import { type IndexedModule } from "lib/services/moduleService";
+import type { Nullable, Option } from "lib/types";
 
 interface ModuleInfoProps {
   address: IndexedModule["address"];
-  moduleName: IndexedModule["moduleName"];
   upgradePolicy: IndexedModule["upgradePolicy"];
+  verificationData: Option<Nullable<ModuleVerificationInternal>>;
 }
 
 export const ModuleInfo = ({
   address,
-  moduleName,
   upgradePolicy,
-}: ModuleInfoProps) => {
-  const { data: verificationData } = useVerifyModule({
-    address: address as HexAddr,
-    moduleName,
-  });
-
-  return (
-    <Flex flexDirection="column" gap={4}>
-      <Flex justifyContent="space-between" alignItems="center" w="full">
-        <Heading as="h6" variant="h6" fontWeight={600}>
-          Module Information
-        </Heading>
-        {verificationData?.source && (
-          <Flex alignItems="center" gap={1}>
-            <CustomIcon name="check-circle-solid" color="success.main" />
-            <Text variant="body2" color="text.dark">
-              This module&#39;s verification is supported by its provided source
-              code.
-            </Text>
-          </Flex>
-        )}
-      </Flex>
-      <Flex
-        p={4}
-        borderRadius={8}
-        border="1px solid"
-        borderColor="gray.700"
-        sx={{ "& > div": { flex: 1 } }}
+  verificationData,
+}: ModuleInfoProps) => (
+  <Flex flexDirection="column" gap={4}>
+    <Flex justifyContent="space-between" alignItems="center" w="full">
+      <Heading as="h6" variant="h6" fontWeight={600}>
+        Module Information
+      </Heading>
+      {verificationData?.source && (
+        <Flex alignItems="center" gap={1}>
+          <CustomIcon name="check-circle-solid" color="success.main" />
+          <Text variant="body2" color="text.dark">
+            This module&#39;s verification is supported by its provided source
+            code.
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+    <Flex
+      p={4}
+      borderRadius={8}
+      border="1px solid"
+      borderColor="gray.700"
+      sx={{ "& > div": { flex: 1 } }}
+    >
+      <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
+      {/* TODO get block height */}
+      <LabelText
+        label="Initial Published Block Height"
+        helperText1="formatUTC(createdTime)"
+        helperText2="dateFromNow(createdTime)"
+      >
+        <ExplorerLink
+          type="block_height"
+          value="1234567"
+          showCopyOnHover
+          fixedHeight
+        />
+      </LabelText>
+      <LabelText label="Initial Published by" helperText1="(Account Address)">
+        <ExplorerLink
+          type="user_address"
+          value={address}
+          showCopyOnHover
+          fixedHeight
+        />
+      </LabelText>
+      {/* TODO get  Transaction or proposal */}
+      <LabelText label="Initial Published Transaction">
+        <ExplorerLink
+          type="tx_hash"
+          value="7F8FD8...3A804"
+          showCopyOnHover
+          fixedHeight
+        />
+      </LabelText>
+      <LabelText
+        label="Initial Published Proposal ID"
+        helperText1="TODO Published DAO Module"
       >
-        <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
-        {/* TODO get block height */}
-        <LabelText
-          label="Initial Published Block Height"
-          helperText1="formatUTC(createdTime)"
-          helperText2="dateFromNow(createdTime)"
-        >
-          <ExplorerLink
-            type="block_height"
-            value="1234567"
-            showCopyOnHover
-            fixedHeight
-          />
-        </LabelText>
-        <LabelText label="Initial Published by" helperText1="(Account Address)">
-          <ExplorerLink
-            type="user_address"
-            value={address}
-            showCopyOnHover
-            fixedHeight
-          />
-        </LabelText>
-        {/* TODO get  Transaction or proposal */}
-        <LabelText label="Initial Published Transaction">
-          <ExplorerLink
-            type="tx_hash"
-            value="7F8FD8...3A804"
-            showCopyOnHover
-            fixedHeight
-          />
-        </LabelText>
-        <LabelText
-          label="Initial Published Proposal ID"
-          helperText1="TODO Published DAO Module"
-        >
-          <ExplorerLink
-            value="1234"
-            showCopyOnHover
-            fixedHeight
-            type="proposal_id"
-          />
-        </LabelText>
-      </Flex>
-      <ModuleSourceCode sourceCode={verificationData?.source} />
+        <ExplorerLink
+          value="1234"
+          showCopyOnHover
+          fixedHeight
+          type="proposal_id"
+        />
+      </LabelText>
     </Flex>
-  );
-};
+    <ModuleSourceCode sourceCode={verificationData?.source} />
+  </Flex>
+);
diff --git a/src/lib/pages/module-details/components/table/ModuleTxsTable.tsx b/src/lib/pages/module-details/components/table/ModuleTxsTable.tsx
new file mode 100644
index 000000000..5ef154b5f
--- /dev/null
+++ b/src/lib/pages/module-details/components/table/ModuleTxsTable.tsx
@@ -0,0 +1,171 @@
+import { Flex } from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+import { useEffect } from "react";
+
+import { useCelatoneApp, useMobile } from "lib/app-provider";
+import { TransactionCard } from "lib/components/card/TransactionCard";
+import { Loading } from "lib/components/Loading";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import { TransactionsTable, ViewMore } from "lib/components/table";
+import type { ModuleTxType } from "lib/services/txService";
+import { useModuleTxsByPagination } from "lib/services/txService";
+import type { Nullable, Option } from "lib/types";
+
+interface ModuleTxsTableProps {
+  moduleId: Option<Nullable<number>>;
+  txType: ModuleTxType;
+  txCount: Option<number>;
+  onViewMore?: () => void;
+  scrollComponentId?: string;
+  refetchCount: () => void;
+}
+
+export const ModuleTxsTable = ({
+  moduleId,
+  txType,
+  txCount,
+  onViewMore,
+  scrollComponentId,
+  refetchCount,
+}: ModuleTxsTableProps) => {
+  const { currentChainId } = useCelatoneApp();
+
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: txCount,
+    initialState: {
+      pageSize: onViewMore ? 5 : 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const {
+    data: moduleTxs,
+    isLoading,
+    error,
+  } = useModuleTxsByPagination({
+    moduleId,
+    txType,
+    pageSize,
+    offset,
+  });
+
+  const onPageChange = (nextPage: number) => {
+    refetchCount();
+    setCurrentPage(nextPage);
+  };
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    refetchCount();
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  const isMobile = useMobile();
+
+  useEffect(() => {
+    if (!onViewMore) setPageSize(10);
+    setCurrentPage(1);
+  }, [currentChainId, onViewMore, setCurrentPage, setPageSize]);
+  // TODO - Might consider adding this state in all transaction table
+  if (!moduleId || error)
+    return (
+      <EmptyState
+        withBorder
+        imageVariant="not-found"
+        message="There is an error during fetching transactions."
+      />
+    );
+  if (isMobile && isLoading)
+    return (
+      <>
+        <Loading />
+        {txCount && (
+          <Pagination
+            currentPage={currentPage}
+            pagesQuantity={pagesQuantity}
+            offset={offset}
+            totalData={txCount}
+            pageSize={pageSize}
+            onPageChange={onPageChange}
+            onPageSizeChange={onPageSizeChange}
+            scrollComponentId={scrollComponentId}
+          />
+        )}
+      </>
+    );
+  if (isMobile)
+    return (
+      <>
+        {moduleTxs ? (
+          <Flex direction="column" gap={4} w="full" mt={4}>
+            {moduleTxs?.map((transaction) => (
+              <TransactionCard
+                transaction={transaction}
+                key={transaction.hash}
+                showRelations={false}
+              />
+            ))}
+            {!onViewMore && txCount && txCount > 10 && (
+              <Pagination
+                currentPage={currentPage}
+                pagesQuantity={pagesQuantity}
+                offset={offset}
+                totalData={txCount}
+                pageSize={pageSize}
+                onPageChange={onPageChange}
+                onPageSizeChange={onPageSizeChange}
+                scrollComponentId={scrollComponentId}
+              />
+            )}
+          </Flex>
+        ) : (
+          <EmptyState
+            withBorder
+            imageVariant="empty"
+            message="There are no transactions in this network."
+          />
+        )}
+      </>
+    );
+  return (
+    <>
+      <TransactionsTable
+        transactions={moduleTxs}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            withBorder
+            imageVariant="empty"
+            message="There are no transactions on this network."
+          />
+        }
+        showAction={false}
+        showRelations={false}
+      />
+      {onViewMore && <ViewMore onClick={onViewMore} />}
+      {!onViewMore && txCount && txCount > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={txCount}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+          scrollComponentId={scrollComponentId}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index fe396d9e8..0a8715422 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -9,13 +9,8 @@ import {
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import type { MouseEventHandler } from "react";
-import { useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect } from "react";
 
-import {
-  MigrationTable,
-  RelatedProposalsTable,
-  TxsTable,
-} from "../contract-details/components/tables";
 import { useTrack } from "lib/amplitude";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
@@ -24,11 +19,14 @@ import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
-import { useContractDetailsTableCounts } from "lib/model/contract";
-import { useAccountId } from "lib/services/accountService";
 import type { IndexedModule } from "lib/services/moduleService";
-import { useAccountModules } from "lib/services/moduleService";
-import type { ContractAddr, MoveAccountAddr } from "lib/types";
+import {
+  useVerifyModule,
+  useModuleId,
+  useAccountModules,
+} from "lib/services/moduleService";
+import { useModuleTxsCountByType } from "lib/services/txService";
+import type { MoveAccountAddr, Option } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import { FunctionTypeTabs } from "./components/FunctionTypeSwitch";
@@ -36,12 +34,16 @@ import { ModuleFunction } from "./components/ModuleFunction";
 import { ModuleInfo } from "./components/ModuleInfo";
 import { ModuleStruct } from "./components/ModuleStruct";
 import { ModuleTop } from "./components/ModuleTop";
+import { ModuleTxsTable } from "./components/table/ModuleTxsTable";
+
+const mainTabHeaderId = "main-table-header";
+const overviewHistoryHeaderId = "overview-history-header";
+const historyTabHeaderId = "history-tab-header";
 
-const tableHeaderId = "moduleDetailsTab";
 export enum TabIndex {
   Overview = "overview",
   Function = "function",
-  Txs = "txs",
+  History = "history",
   Structs = "structs",
 }
 
@@ -49,13 +51,10 @@ interface ActionInfo {
   icon: IconKeys;
   iconColor: string;
   name: string;
-  count: number;
+  count: Option<number>;
   onClick: MouseEventHandler<HTMLDivElement>;
 }
 
-// TODO get module path
-const txTableHeaderId = "ModuleTxsTableHeader";
-
 interface ModuleDetailsBodyProps {
   moduleData: IndexedModule;
 }
@@ -68,6 +67,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
   const { trackUseTab } = useTrack();
 
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
+  const [historyTabIndex, setHistoryTabIndex] = useState(0);
 
   const handleTabChange = useCallback(
     (nextTab: TabIndex, fnType?: FunctionTypeTabs) => () => {
@@ -112,14 +112,18 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
     moduleData.moduleName,
   ]);
 
-  const contractAddress = "" as ContractAddr;
-  const { data: contractAccountId } = useAccountId(contractAddress);
-  const {
-    tableCounts,
-    refetchMigration,
-    refetchTransactions,
-    refetchRelatedProposals,
-  } = useContractDetailsTableCounts(contractAddress, contractAccountId);
+  const { data: moduleId } = useModuleId(
+    moduleData.moduleName,
+    moduleData.address
+  );
+
+  const { data: verificationData } = useVerifyModule({
+    address: moduleData.address,
+    moduleName: moduleData.moduleName,
+  });
+
+  const { data: moduleTxsCount, refetch: refetchTxsCount } =
+    useModuleTxsCountByType(moduleId);
 
   const actionList: ActionInfo[] = [
     {
@@ -137,17 +141,19 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
       onClick: handleTabChange(TabIndex.Function, FunctionTypeTabs.EXECUTE),
     },
     {
-      // TO DO get tx count
       icon: "list" as IconKeys,
       iconColor: "gray.600",
       name: "Transactions",
-      count: 0,
-      onClick: handleTabChange(TabIndex.Txs),
+      count: moduleTxsCount?.allTxsCount,
+      onClick: handleTabChange(TabIndex.History),
     },
   ];
   return (
     <>
-      <ModuleTop isVerified moduleData={moduleData} />
+      <ModuleTop
+        isVerified={Boolean(verificationData)}
+        moduleData={moduleData}
+      />
       <Tabs
         index={Object.values(TabIndex).indexOf(tab)}
         isLazy
@@ -158,7 +164,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
           borderBottom="1px solid"
           borderColor="gray.700"
           overflowX="scroll"
-          id={tableHeaderId}
+          id={mainTabHeaderId}
         >
           <CustomTab onClick={handleTabChange(TabIndex.Overview)}>
             Overview
@@ -170,8 +176,8 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
           >
             Function
           </CustomTab>
-          <CustomTab count={12} onClick={handleTabChange(TabIndex.Txs)}>
-            Transactions
+          <CustomTab onClick={handleTabChange(TabIndex.History)}>
+            History
           </CustomTab>
           <CustomTab
             count={moduleData.parsedAbi.structs.length}
@@ -187,6 +193,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
               <Flex justifyContent="space-between" gap={6} mb={6}>
                 {actionList.map((item) => (
                   <Flex
+                    key={item.name}
                     p={4}
                     bg="gray.800"
                     _hover={{ bg: "gray.700" }}
@@ -213,7 +220,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                           {item.name}
                         </Text>
                         <Heading as="h6" variant="h6" fontWeight={600}>
-                          {item.count}
+                          {!item.count ? "N/A" : item.count}
                         </Heading>
                       </Flex>
                     </Flex>
@@ -221,15 +228,14 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                   </Flex>
                 ))}
               </Flex>
-              <ModuleInfo {...moduleData} />
-              {/* TODO History */}
+              <ModuleInfo {...moduleData} verificationData={verificationData} />
               <Flex flexDirection="column" mt={6}>
                 <Heading
                   as="h6"
                   variant="h6"
                   mb={6}
                   fontWeight={600}
-                  id={tableHeaderId}
+                  id={overviewHistoryHeaderId}
                 >
                   History
                 </Heading>
@@ -239,42 +245,36 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                     borderColor="gray.700"
                     overflowX={{ base: "scroll", md: "auto" }}
                   >
-                    <CustomTab count={tableCounts.transactionsCount}>
+                    <CustomTab count={moduleTxsCount?.normalTxsCount}>
                       Transactions
                     </CustomTab>
-                    <CustomTab count={tableCounts.migrationCount}>
-                      Migrations
-                    </CustomTab>
-                    <CustomTab
-                      count={tableCounts.relatedProposalsCount}
-                      whiteSpace="nowrap"
-                    >
-                      Related Proposals
+                    <CustomTab count={moduleTxsCount?.upgradeTxsCount}>
+                      Upgrades
                     </CustomTab>
                   </TabList>
                   <TabPanels>
                     <TabPanel p={0}>
-                      <TxsTable
-                        contractAccountId={contractAccountId}
-                        scrollComponentId={txTableHeaderId}
-                        totalData={tableCounts.transactionsCount}
-                        refetchCount={refetchTransactions}
+                      <ModuleTxsTable
+                        moduleId={moduleId}
+                        txType="normal"
+                        txCount={moduleTxsCount?.normalTxsCount}
+                        refetchCount={refetchTxsCount}
+                        onViewMore={() => {
+                          handleTabChange(TabIndex.History)();
+                          setHistoryTabIndex(0);
+                        }}
                       />
                     </TabPanel>
                     <TabPanel p={0}>
-                      <MigrationTable
-                        contractAddress={contractAddress}
-                        scrollComponentId={txTableHeaderId}
-                        totalData={tableCounts.migrationCount}
-                        refetchCount={refetchMigration}
-                      />
-                    </TabPanel>
-                    <TabPanel p={0}>
-                      <RelatedProposalsTable
-                        contractAddress={contractAddress}
-                        scrollComponentId={txTableHeaderId}
-                        totalData={tableCounts.relatedProposalsCount}
-                        refetchCount={refetchRelatedProposals}
+                      <ModuleTxsTable
+                        moduleId={moduleId}
+                        txType="upgrade"
+                        txCount={moduleTxsCount?.upgradeTxsCount}
+                        refetchCount={refetchTxsCount}
+                        onViewMore={() => {
+                          handleTabChange(TabIndex.History)();
+                          setHistoryTabIndex(1);
+                        }}
                       />
                     </TabPanel>
                   </TabPanels>
@@ -291,7 +291,6 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
               executeFns={moduleData.executeFunctions}
             />
           </TabPanel>
-          {/* TODO TX History */}
           <TabPanel p={0}>
             <Flex flexDirection="column" mt={6}>
               <Heading
@@ -299,52 +298,45 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                 variant="h6"
                 mb={6}
                 fontWeight={600}
-                id={tableHeaderId}
+                id={historyTabHeaderId}
               >
                 History
               </Heading>
-              <Tabs isLazy lazyBehavior="keepMounted">
+              <Tabs
+                isLazy
+                lazyBehavior="keepMounted"
+                index={historyTabIndex}
+                onChange={(index) => setHistoryTabIndex(index)}
+              >
                 <TabList
                   borderBottom="1px solid"
                   borderColor="gray.700"
                   overflowX={{ base: "scroll", md: "auto" }}
                 >
-                  <CustomTab count={tableCounts.transactionsCount}>
+                  <CustomTab count={moduleTxsCount?.normalTxsCount}>
                     Transactions
                   </CustomTab>
-                  <CustomTab count={tableCounts.migrationCount}>
-                    Migrations
-                  </CustomTab>
-                  <CustomTab
-                    count={tableCounts.relatedProposalsCount}
-                    whiteSpace="nowrap"
-                  >
-                    Related Proposals
+                  <CustomTab count={moduleTxsCount?.upgradeTxsCount}>
+                    Upgrades
                   </CustomTab>
                 </TabList>
                 <TabPanels>
                   <TabPanel p={0}>
-                    <TxsTable
-                      contractAccountId={contractAccountId}
-                      scrollComponentId={txTableHeaderId}
-                      totalData={tableCounts.transactionsCount}
-                      refetchCount={refetchTransactions}
-                    />
-                  </TabPanel>
-                  <TabPanel p={0}>
-                    <MigrationTable
-                      contractAddress={contractAddress}
-                      scrollComponentId={txTableHeaderId}
-                      totalData={tableCounts.migrationCount}
-                      refetchCount={refetchMigration}
+                    <ModuleTxsTable
+                      moduleId={moduleId}
+                      txType="normal"
+                      txCount={moduleTxsCount?.normalTxsCount}
+                      refetchCount={refetchTxsCount}
+                      scrollComponentId={historyTabHeaderId}
                     />
                   </TabPanel>
                   <TabPanel p={0}>
-                    <RelatedProposalsTable
-                      contractAddress={contractAddress}
-                      scrollComponentId={txTableHeaderId}
-                      totalData={tableCounts.relatedProposalsCount}
-                      refetchCount={refetchRelatedProposals}
+                    <ModuleTxsTable
+                      moduleId={moduleId}
+                      txType="upgrade"
+                      txCount={moduleTxsCount?.upgradeTxsCount}
+                      refetchCount={refetchTxsCount}
+                      scrollComponentId={historyTabHeaderId}
                     />
                   </TabPanel>
                 </TabPanels>
diff --git a/src/lib/query/index.ts b/src/lib/query/index.ts
index 887469776..447979206 100644
--- a/src/lib/query/index.ts
+++ b/src/lib/query/index.ts
@@ -5,3 +5,4 @@ export * from "./pool";
 export * from "./proposal";
 export * from "./tx";
 export * from "./account";
+export * from "./module";
diff --git a/src/lib/query/module.ts b/src/lib/query/module.ts
new file mode 100644
index 000000000..6c8ba9ce5
--- /dev/null
+++ b/src/lib/query/module.ts
@@ -0,0 +1,17 @@
+import { graphql } from "lib/gql";
+
+export const getModuleIdByNameAndVmAddressQueryDocument = graphql(`
+  query getModuleIdByNameAndVmAddressQuery(
+    $name: String!
+    $vmAddress: String!
+  ) {
+    modules(
+      where: {
+        name: { _eq: $name }
+        vm_address: { vm_address: { _eq: $vmAddress } }
+      }
+    ) {
+      id
+    }
+  }
+`);
diff --git a/src/lib/query/tx.ts b/src/lib/query/tx.ts
index a9cc006c0..504153f89 100644
--- a/src/lib/query/tx.ts
+++ b/src/lib/query/tx.ts
@@ -166,3 +166,62 @@ export const getBlockTransactionCountByHeightQueryDocument = graphql(`
     }
   }
 `);
+
+export const getModuleTransactionsQueryDocument = graphql(`
+  query getModuleTransactionsQuery(
+    $filterExp: module_transactions_bool_exp
+    $pageSize: Int!
+    $offset: Int!
+  ) {
+    module_transactions(
+      where: $filterExp
+      limit: $pageSize
+      offset: $offset
+      order_by: { block_height: desc }
+    ) {
+      block {
+        height
+        timestamp
+      }
+      transaction {
+        account {
+          address
+        }
+        hash
+        success
+        messages
+        is_clear_admin
+        is_execute
+        is_ibc
+        is_instantiate
+        is_migrate
+        is_send
+        is_store_code
+        is_update_admin
+        is_move_execute
+        is_move_execute_event
+        is_move_publish
+        is_move_script
+        is_move_upgrade
+      }
+    }
+  }
+`);
+
+export const getModuleTransactionsCountByTypeQueryDocument = graphql(`
+  query getModuleTransactionsCountByTypeQuery(
+    $moduleId: Int!
+    $isUpgrade: Boolean!
+  ) {
+    module_transactions_aggregate(
+      where: {
+        module_id: { _eq: $moduleId }
+        transaction: { is_move_upgrade: { _eq: $isUpgrade } }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`);
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index b24635b85..4eebee7f6 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -9,8 +9,10 @@ import type { AxiosError } from "axios";
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
+  useCelatoneApp,
   useMoveConfig,
 } from "lib/app-provider";
+import { getModuleIdByNameAndVmAddressQueryDocument } from "lib/query";
 import type {
   MoveAccountAddr,
   ExposedFunction,
@@ -22,6 +24,7 @@ import type {
   HumanAddr,
   UpgradePolicy,
   HexAddr,
+  Nullable,
 } from "lib/types";
 import {
   bech32AddressToHex,
@@ -31,6 +34,7 @@ import {
   unpadHexAddress,
 } from "lib/utils";
 
+import type { ModuleVerificationInternal } from "./module";
 import {
   decodeModule,
   getAccountModule,
@@ -109,7 +113,7 @@ export const useVerifyModule = ({
 }: {
   address: Option<MoveAccountAddr>;
   moduleName: Option<string>;
-}) =>
+}): UseQueryResult<Nullable<ModuleVerificationInternal>> =>
   useQuery(
     [CELATONE_QUERY_KEYS.MODULE_VERIFICATION, address, moduleName],
     () => {
@@ -213,3 +217,29 @@ export const useDecodeModule = ({
     options
   );
 };
+
+export const useModuleId = (moduleName: string, vmAddress: HexAddr) => {
+  const { indexerGraphClient } = useCelatoneApp();
+  const queryFn = async () => {
+    if (!moduleName || !vmAddress)
+      throw new Error(
+        "Error fetching module id: failed to retrieve module name or vm address."
+      );
+    return indexerGraphClient
+      .request(getModuleIdByNameAndVmAddressQueryDocument, {
+        name: moduleName,
+        vmAddress,
+      })
+      .then<Nullable<number>>(({ modules }) => modules[0]?.id ?? null);
+  };
+
+  return useQuery(
+    [CELATONE_QUERY_KEYS.ACCOUNT_ID, indexerGraphClient, moduleName, vmAddress],
+    queryFn,
+    {
+      enabled: Boolean(moduleName && vmAddress),
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
+  );
+};
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index ec642cb7d..c0262b731 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -19,6 +19,8 @@ import {
   getTxsByPoolIdPagination,
   getBlockTransactionCountByHeightQueryDocument,
   getBlockTransactionsByHeightQueryDocument,
+  getModuleTransactionsQueryDocument,
+  getModuleTransactionsCountByTypeQueryDocument,
 } from "lib/query";
 import { createQueryFnWithTimeout } from "lib/query-utils";
 import type {
@@ -29,6 +31,7 @@ import type {
   Message,
   PoolTxFilter,
   Nullable,
+  HumanAddr,
 } from "lib/types";
 import { ActionMsgType, MsgFurtherAction } from "lib/types";
 import {
@@ -433,3 +436,138 @@ export const useTxsCountByBlockHeight = (
     }
   );
 };
+
+export type ModuleTxType = "all" | "normal" | "upgrade";
+
+const getFilterExp = (txType: ModuleTxType, moduleId: number) => {
+  const base = { module_id: { _eq: moduleId } };
+  switch (txType) {
+    case "normal":
+      return { ...base, transaction: { is_move_upgrade: { _eq: false } } };
+    case "upgrade":
+      return { ...base, transaction: { is_move_upgrade: { _eq: true } } };
+    case "all":
+    default:
+      return base;
+  }
+};
+
+export const useModuleTxsByPagination = ({
+  moduleId,
+  txType,
+  pageSize,
+  offset,
+}: {
+  moduleId: Option<Nullable<number>>;
+  txType: "all" | "normal" | "upgrade";
+  pageSize: number;
+  offset: number;
+}) => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = async () => {
+    if (!moduleId) return [];
+    return indexerGraphClient
+      .request(getModuleTransactionsQueryDocument, {
+        filterExp: getFilterExp(txType, moduleId),
+        pageSize,
+        offset,
+      })
+      .then<Transaction[]>(({ module_transactions }) =>
+        module_transactions.map<Transaction>((transaction) => ({
+          hash: parseTxHash(transaction.transaction.hash),
+          messages: snakeToCamel(transaction.transaction.messages),
+          sender: transaction.transaction.account.address as HumanAddr,
+          height: transaction.block.height,
+          created: parseDate(transaction.block.timestamp),
+          success: transaction.transaction.success,
+          actionMsgType: getActionMsgType([
+            transaction.transaction.is_execute,
+            transaction.transaction.is_instantiate,
+            transaction.transaction.is_send,
+            transaction.transaction.is_store_code,
+            transaction.transaction.is_migrate,
+            transaction.transaction.is_update_admin,
+            transaction.transaction.is_clear_admin,
+          ]),
+          furtherAction: getMsgFurtherAction(
+            transaction.transaction.messages.length,
+            {
+              isExecute: transaction.transaction.is_execute,
+              isInstantiate: transaction.transaction.is_instantiate,
+              isSend: transaction.transaction.is_send,
+              isUpload: transaction.transaction.is_store_code,
+              isMigrate: transaction.transaction.is_migrate,
+              isUpdateAdmin: transaction.transaction.is_update_admin,
+              isClearAdmin: transaction.transaction.is_clear_admin,
+              isIbc: transaction.transaction.is_ibc,
+            },
+            transaction.transaction.success,
+            false
+          ),
+          isSigner: false,
+          isIbc: transaction.transaction.is_ibc,
+          isInstantiate: transaction.transaction.is_instantiate,
+        }))
+      );
+  };
+
+  return useQuery(
+    [
+      CELATONE_QUERY_KEYS.MODULE_TXS,
+      indexerGraphClient,
+      moduleId,
+      txType,
+      pageSize,
+      offset,
+    ],
+    createQueryFnWithTimeout(queryFn),
+    {
+      enabled: Boolean(moduleId),
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
+  );
+};
+
+export const useModuleTxsCountByType = (moduleId: Option<Nullable<number>>) => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = async () => {
+    if (!moduleId) throw new Error("Module id not found");
+    const requestPromise = (isUpgrade: boolean) =>
+      indexerGraphClient
+        .request(getModuleTransactionsCountByTypeQueryDocument, {
+          moduleId,
+          isUpgrade,
+        })
+        .then(
+          ({ module_transactions_aggregate }) =>
+            module_transactions_aggregate.aggregate?.count
+        );
+
+    const [normalTxsCount, upgradeTxsCount] = await Promise.all([
+      requestPromise(false),
+      requestPromise(true),
+    ]);
+    return {
+      normalTxsCount,
+      upgradeTxsCount,
+      allTxsCount: Number(normalTxsCount) + Number(upgradeTxsCount),
+    };
+  };
+
+  return useQuery(
+    [
+      CELATONE_QUERY_KEYS.MODULE_TXS_COUNT_BY_TYPE,
+      indexerGraphClient,
+      moduleId,
+    ],
+    queryFn,
+    {
+      enabled: Boolean(moduleId),
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
+  );
+};

From 5f50013944517896889b1b4c31ea4d591958178d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:54:06 +0700
Subject: [PATCH 138/368] fix: comment

---
 src/lib/app-provider/hooks/usePlatform.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/app-provider/hooks/usePlatform.ts b/src/lib/app-provider/hooks/usePlatform.ts
index a60bc5514..c03f690f2 100644
--- a/src/lib/app-provider/hooks/usePlatform.ts
+++ b/src/lib/app-provider/hooks/usePlatform.ts
@@ -2,12 +2,13 @@ import { useMemo } from "react";
 
 export const usePlatform = () => {
   return useMemo(() => {
-    if (navigator.userAgent.indexOf("Mac OS X") !== -1) {
-      return "Mac";
+    if (typeof navigator === "undefined") {
+      return "Unknown";
     }
-    return "Windows";
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [navigator]);
+    const { userAgent } = navigator;
+    const isMac = /Mac OS X/.test(userAgent);
+    return isMac ? "Mac" : "Windows";
+  }, []);
 };
 
 export const useIsMac = () => {

From 1deb0734bf3706d9a5cd1e5f770764211ddfa976 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 10 Oct 2023 15:57:36 +0700
Subject: [PATCH 139/368] fix: as comments

---
 .../components/contract-state/index.tsx       | 26 ++++++++++++++-----
 .../query/components/SchemaQueryResponse.tsx  |  4 +--
 src/lib/services/contractState.ts             |  4 +--
 src/lib/utils/base64.test.ts                  |  8 +-----
 src/lib/utils/base64.ts                       |  2 --
 src/lib/utils/contractState.test.ts           | 14 +---------
 src/lib/utils/contractState.ts                | 10 -------
 src/lib/utils/json.test.ts                    | 19 +++++++++++++-
 src/lib/utils/json.ts                         |  6 ++---
 9 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index 62c0e74e5..a19d77912 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -1,4 +1,11 @@
-import { Button, ButtonGroup, Flex, Heading } from "@chakra-ui/react";
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  ButtonGroup,
+  Flex,
+  Heading,
+} from "@chakra-ui/react";
 import { saveAs } from "file-saver";
 import { useMemo, useState } from "react";
 
@@ -21,8 +28,9 @@ interface ContractStatesProps {
   contractAddress: ContractAddr;
 }
 
+const NUM_STATES_TO_LOAD = 100;
+
 export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
-  const numStatesToLoad = 100;
   const {
     data,
     error,
@@ -30,7 +38,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
     hasNextPage,
     isFetching,
     isFetchingNextPage,
-  } = useContractStates(contractAddress, numStatesToLoad);
+  } = useContractStates(contractAddress, NUM_STATES_TO_LOAD);
 
   const [selectedNamespace, setSelectedNamespace] = useState("all");
   const [keyword, setKeyword] = useState("");
@@ -79,9 +87,6 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
     saveAs(blob, "state.json");
   };
 
-  // eslint-disable-next-line no-alert
-  if (error) window.alert(error);
-
   return (
     <Flex direction="column" gap={8}>
       <Flex direction="column" gap={6}>
@@ -89,7 +94,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
           Contract States
         </Heading>
         <StateLoader
-          numStatesToLoad={numStatesToLoad}
+          numStatesToLoad={NUM_STATES_TO_LOAD}
           isLoading={isFetching || isFetchingNextPage}
           totalData={totalData}
           isCompleted={!hasNextPage}
@@ -97,6 +102,13 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
           onDownload={handleDownload}
         />
       </Flex>
+      {typeof error === "undefined" && (
+        <Alert variant="error" alignItems="center">
+          <AlertDescription wordBreak="break-word">
+            Error fetching
+          </AlertDescription>
+        </Alert>
+      )}
       {/* Namespace filter */}
       <ButtonGroup
         flexWrap="wrap"
diff --git a/src/lib/pages/query/components/SchemaQueryResponse.tsx b/src/lib/pages/query/components/SchemaQueryResponse.tsx
index fdb3e4d22..90ea98560 100644
--- a/src/lib/pages/query/components/SchemaQueryResponse.tsx
+++ b/src/lib/pages/query/components/SchemaQueryResponse.tsx
@@ -5,7 +5,7 @@ import { JsonSchemaForm, OutputMessageTabs } from "lib/components/json-schema";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import type { SchemaInfo } from "lib/stores/schema";
 import type { Option } from "lib/types";
-import { dateFromNow, parseSchemaInitialData } from "lib/utils";
+import { dateFromNow, parseJsonStr } from "lib/utils";
 
 interface SchemaQueryResponseProps {
   res: string;
@@ -84,7 +84,7 @@ export const SchemaQueryResponse = ({
               <JsonSchemaForm
                 formId={`response-${msgSchema.title}`}
                 schema={resSchema.schema}
-                initialFormData={parseSchemaInitialData(res)}
+                initialFormData={parseJsonStr(res)}
               />
             </Box>
           )}
diff --git a/src/lib/services/contractState.ts b/src/lib/services/contractState.ts
index 54ba03467..35325a421 100644
--- a/src/lib/services/contractState.ts
+++ b/src/lib/services/contractState.ts
@@ -5,7 +5,7 @@ import type {
   ContractState,
   ResponseContractStates,
 } from "lib/types";
-import { parseStateKey, parseStateValue } from "lib/utils";
+import { libDecode, parseJsonStr, parseStateKey } from "lib/utils";
 
 export const getContractStates = async (
   baseEndpoint: string,
@@ -22,7 +22,7 @@ export const getContractStates = async (
   const parsedStates = data.models.map<ContractState>((model) => ({
     rawKey: model.key,
     key: parseStateKey(model.key),
-    value: parseStateValue(model.value),
+    value: parseJsonStr(libDecode(model.value)),
   }));
 
   return {
diff --git a/src/lib/utils/base64.test.ts b/src/lib/utils/base64.test.ts
index 6658f2162..d72fec585 100644
--- a/src/lib/utils/base64.test.ts
+++ b/src/lib/utils/base64.test.ts
@@ -1,4 +1,4 @@
-import { encode, decode, decodeToJSON, libEncode, libDecode } from "./base64";
+import { encode, decode, libEncode, libDecode } from "./base64";
 
 describe("base64 utility functions", () => {
   const testString = "Hello, world!";
@@ -13,12 +13,6 @@ describe("base64 utility functions", () => {
     expect(decoded).toEqual(testString);
   });
 
-  it("should decode a base64 string to a JSON object", () => {
-    const encoded = libEncode(JSON.stringify({ message: testString }));
-    const decoded = decodeToJSON(encoded);
-    expect(decoded).toEqual({ message: testString });
-  });
-
   it("should use js-base64 library for encoding and decoding", () => {
     const encoded = libEncode(testString);
     const decoded = libDecode(encoded);
diff --git a/src/lib/utils/base64.ts b/src/lib/utils/base64.ts
index acad13d9e..ef4d43978 100644
--- a/src/lib/utils/base64.ts
+++ b/src/lib/utils/base64.ts
@@ -8,5 +8,3 @@ export const decode = (str: string): string =>
 
 export const encode = (str: string): string =>
   Buffer.from(str, "binary").toString("base64");
-
-export const decodeToJSON = (str: string) => JSON.parse(decode(str));
diff --git a/src/lib/utils/contractState.test.ts b/src/lib/utils/contractState.test.ts
index c7bf14b98..94d0ed1db 100644
--- a/src/lib/utils/contractState.test.ts
+++ b/src/lib/utils/contractState.test.ts
@@ -1,4 +1,4 @@
-import { hexToString, parseStateKey, parseStateValue } from "./contractState";
+import { hexToString, parseStateKey } from "./contractState";
 
 describe("hexToString", () => {
   it("should convert hex to string", () => {
@@ -6,18 +6,6 @@ describe("hexToString", () => {
   });
 });
 
-describe("parseStateValue", () => {
-  it("should parse base64 encoded JSON", () => {
-    const value = "eyJmb28iOiJiYXIifQ=="; // {"foo":"bar"}
-    expect(parseStateValue(value)).toEqual({ foo: "bar" });
-  });
-
-  it("should return the original value if it's not JSON", () => {
-    const value = "not json";
-    expect(parseStateValue(value)).toEqual(value);
-  });
-});
-
 describe("parseStateKey", () => {
   it("should parse a singleton key", () => {
     const key = "68656c6c6f"; // "hello"
diff --git a/src/lib/utils/contractState.ts b/src/lib/utils/contractState.ts
index b5dd81796..e74518f62 100644
--- a/src/lib/utils/contractState.ts
+++ b/src/lib/utils/contractState.ts
@@ -1,7 +1,5 @@
 import type { ContractState, DecodedKey } from "lib/types";
 
-import { decodeToJSON } from "./base64";
-
 const nameRegex = /^[a-zA-Z0-9_]+$/;
 
 export const hexToString = (hex: string) =>
@@ -66,14 +64,6 @@ export const parseStateKey = (key: string): DecodedKey => {
   };
 };
 
-export const parseStateValue = (value: string) => {
-  try {
-    return decodeToJSON(value);
-  } catch (error) {
-    return value;
-  }
-};
-
 export const groupContractStatesByFirstIndex = (states: ContractState[]) =>
   states.reduce((acc, state) => {
     // save all states
diff --git a/src/lib/utils/json.test.ts b/src/lib/utils/json.test.ts
index 0c0feb1ea..3220f8301 100644
--- a/src/lib/utils/json.test.ts
+++ b/src/lib/utils/json.test.ts
@@ -1,4 +1,9 @@
-import { jsonLineCount, jsonPrettify, jsonValidate } from "./json";
+import {
+  jsonLineCount,
+  jsonPrettify,
+  jsonValidate,
+  parseJsonStr,
+} from "./json";
 
 describe("jsonValidate", () => {
   test("empty string", () => {
@@ -47,3 +52,15 @@ describe("jsonLineCount", () => {
     expect(jsonLineCount('{"key": "value", \n "key": 1}')).toEqual(2);
   });
 });
+
+describe("parseJsonStr", () => {
+  it("should return the parsed JSON for valid input", () => {
+    const validJson = '{"name": "John", "age": 30}';
+    expect(parseJsonStr(validJson)).toEqual({ name: "John", age: 30 });
+  });
+
+  it("should return the fallback value for invalid input", () => {
+    const invalidJson = '{"name": "John", "age": 30,}';
+    expect(parseJsonStr(invalidJson, "fallback")).toEqual("fallback");
+  });
+});
diff --git a/src/lib/utils/json.ts b/src/lib/utils/json.ts
index f32df9c59..78b6ac573 100644
--- a/src/lib/utils/json.ts
+++ b/src/lib/utils/json.ts
@@ -24,11 +24,11 @@ export const jsonPrettify = (text: string) => {
 
 export const jsonLineCount = (text: string) => text.split(/\n/).length;
 
-export const parseSchemaInitialData = (json: string): JsonDataType => {
+export const parseJsonStr = (json: string, fallback = ""): JsonDataType => {
   try {
     return JSON.parse(json);
   } catch (_) {
-    return "";
+    return fallback;
   }
 };
 
@@ -59,7 +59,7 @@ export const resolveInitialMsg = (
   initialMsg: string,
   msgSchema: SchemaInfo
 ) => {
-  const parsed = parseSchemaInitialData(initialMsg);
+  const parsed = parseJsonStr(initialMsg);
   const { required, enum: enumOptions } = msgSchema.schema;
   if (
     typeof parsed === "object" &&

From 867b498a61d8eaf61f0e88560e945d693325b9bc Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 10 Oct 2023 15:58:22 +0700
Subject: [PATCH 140/368] fix: enable fee simulation bug and add feedback on
 decode error

---
 src/lib/components/dropzone/index.tsx         | 12 +++++---
 .../publish-module/components/PolicyCard.tsx  | 29 +++++++------------
 .../components/UploadModuleCard.tsx           | 13 +++++++--
 src/lib/pages/publish-module/publish.tsx      |  3 +-
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 1c0fdde38..9d349652c 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -13,11 +13,13 @@ import { DROPZONE_CONFIG } from "./config";
 interface DropZoneProps extends FlexProps {
   setFile: (file: File) => void;
   fileType: DropzoneFileType;
+  error?: string;
 }
 
 export function DropZone({
   setFile,
   fileType,
+  error,
   ...componentProps
 }: DropZoneProps) {
   const wasm = useWasmConfig({ shouldRedirect: false });
@@ -52,11 +54,13 @@ export function DropZone({
     maxSize,
   });
 
+  const isError = Boolean(error || fileRejections.length > 0);
+
   return (
     <Flex direction="column">
       <Flex
         border="1px dashed"
-        borderColor={fileRejections.length > 0 ? "error.main" : "gray.700"}
+        borderColor={isError ? "error.main" : "gray.700"}
         w="full"
         p="24px 16px"
         borderRadius="8px"
@@ -92,9 +96,9 @@ export function DropZone({
           )
         </Text>
       </Flex>
-      {fileRejections.length > 0 && (
-        <Text variant="body3" color="error.main" mt="2px">
-          {fileRejections[0].errors[0].message}
+      {isError && (
+        <Text variant="body3" color="error.main" mt={1}>
+          {fileRejections[0]?.errors[0]?.message ?? error}
         </Text>
       )}
     </Flex>
diff --git a/src/lib/pages/publish-module/components/PolicyCard.tsx b/src/lib/pages/publish-module/components/PolicyCard.tsx
index bba92f819..a5895c9f9 100644
--- a/src/lib/pages/publish-module/components/PolicyCard.tsx
+++ b/src/lib/pages/publish-module/components/PolicyCard.tsx
@@ -1,6 +1,7 @@
 import type { FlexProps } from "@chakra-ui/react";
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Grid, Flex, Text } from "@chakra-ui/react";
 import { capitalize } from "lodash";
+import { MdRadioButtonChecked, MdRadioButtonUnchecked } from "react-icons/md";
 
 import type { UpgradePolicy } from "lib/types";
 
@@ -11,10 +12,9 @@ interface RadioCardProps extends FlexProps {
 }
 
 const RadioCard = ({ checked, children, ...props }: RadioCardProps) => (
-  <Flex
-    w="full"
+  <Grid
+    templateColumns="32px 1fr"
     p="12px 16px"
-    gap={4}
     border="2px solid"
     borderRadius="12px"
     borderColor={checked ? "text.main" : "gray.700"}
@@ -23,22 +23,13 @@ const RadioCard = ({ checked, children, ...props }: RadioCardProps) => (
     cursor="pointer"
     {...props}
   >
-    <Flex
-      w="18px"
-      h="18px"
-      flexShrink={0}
-      borderRadius="50%"
-      border="2px solid"
-      borderColor={checked ? "text.main" : "text.dark"}
-      align="center"
-      justify="center"
-    >
-      {checked && (
-        <Box w="9px" h="9px" bgColor="text.main" borderRadius="50%" />
-      )}
-    </Flex>
+    {checked ? (
+      <MdRadioButtonChecked fontSize="20px" />
+    ) : (
+      <MdRadioButtonUnchecked fontSize="20px" />
+    )}
     {children}
-  </Flex>
+  </Grid>
 );
 
 interface PolicyCardProps {
diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index 4d7f0d538..4644b7023 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -59,6 +59,7 @@ export const UploadModuleCard = ({
     file: undefined,
     base64: "",
   });
+  const [decodeError, setDecodeError] = useState("");
   const { address } = useCurrentChain();
 
   const { isFetching } = useDecodeModule({
@@ -67,7 +68,7 @@ export const UploadModuleCard = ({
       enabled: Boolean(tempFile.base64),
       retry: 0,
       refetchOnWindowFocus: false,
-      onSuccess: (data) =>
+      onSuccess: (data) => {
         setFile(
           tempFile.file,
           tempFile.base64,
@@ -79,7 +80,14 @@ export const UploadModuleCard = ({
             policy,
             address: address as Option<HumanAddr>,
           })
-        ),
+        );
+        setDecodeError("");
+      },
+      onError: () => {
+        setDecodeError(
+          "Failed to decode .mv file. Please make sure the file is a module."
+        );
+      },
     },
   });
 
@@ -163,6 +171,7 @@ export const UploadModuleCard = ({
               setFile={handleFileDrop}
               fileType="move"
               bgColor="background.main"
+              error={decodeError}
               _hover={undefined}
             />
           )}
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 1c8a20f7c..8b6215cf5 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -106,7 +106,8 @@ export const PublishModule = ({
               field.base64EncodedFile && field.publishStatus.status !== "error"
           )
       ),
-    [address, modules]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [address, JSON.stringify(modules)]
   );
 
   const { isFetching: isSimulating } = useSimulateFeeQuery({

From 57ec067c151dd3c0d1dda320c51d47f0ff016c0a Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 10 Oct 2023 16:03:08 +0700
Subject: [PATCH 141/368] fix: alert fetching error

---
 .../contract-details/components/contract-state/index.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index a19d77912..d75fc456d 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -102,13 +102,13 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
           onDownload={handleDownload}
         />
       </Flex>
-      {typeof error === "undefined" && (
+      {error ? (
         <Alert variant="error" alignItems="center">
           <AlertDescription wordBreak="break-word">
             Error fetching
           </AlertDescription>
         </Alert>
-      )}
+      ) : null}
       {/* Namespace filter */}
       <ButtonGroup
         flexWrap="wrap"

From 4080817228e2f9e1f63c7be7cba7d6dd63fd32ea Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 10 Oct 2023 16:08:04 +0700
Subject: [PATCH 142/368] fix: use double bang

---
 .../contract-details/components/contract-state/index.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index d75fc456d..ed323e6a7 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -102,13 +102,13 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
           onDownload={handleDownload}
         />
       </Flex>
-      {error ? (
+      {!!error && (
         <Alert variant="error" alignItems="center">
           <AlertDescription wordBreak="break-word">
             Error fetching
           </AlertDescription>
         </Alert>
-      ) : null}
+      )}
       {/* Namespace filter */}
       <ButtonGroup
         flexWrap="wrap"

From 9e8aee54fc50bc01da2c02c1fdfd28480d209be5 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 10 Oct 2023 16:10:11 +0700
Subject: [PATCH 143/368] fix: rewrite decode error

---
 src/lib/components/dropzone/index.tsx         | 12 ++++++---
 .../components/UploadScriptCard.tsx           | 25 +++++++------------
 src/lib/pages/deploy-script/index.tsx         |  7 ++----
 3 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 1c0fdde38..9d349652c 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -13,11 +13,13 @@ import { DROPZONE_CONFIG } from "./config";
 interface DropZoneProps extends FlexProps {
   setFile: (file: File) => void;
   fileType: DropzoneFileType;
+  error?: string;
 }
 
 export function DropZone({
   setFile,
   fileType,
+  error,
   ...componentProps
 }: DropZoneProps) {
   const wasm = useWasmConfig({ shouldRedirect: false });
@@ -52,11 +54,13 @@ export function DropZone({
     maxSize,
   });
 
+  const isError = Boolean(error || fileRejections.length > 0);
+
   return (
     <Flex direction="column">
       <Flex
         border="1px dashed"
-        borderColor={fileRejections.length > 0 ? "error.main" : "gray.700"}
+        borderColor={isError ? "error.main" : "gray.700"}
         w="full"
         p="24px 16px"
         borderRadius="8px"
@@ -92,9 +96,9 @@ export function DropZone({
           )
         </Text>
       </Flex>
-      {fileRejections.length > 0 && (
-        <Text variant="body3" color="error.main" mt="2px">
-          {fileRejections[0].errors[0].message}
+      {isError && (
+        <Text variant="body3" color="error.main" mt={1}>
+          {fileRejections[0]?.errors[0]?.message ?? error}
         </Text>
       )}
     </Flex>
diff --git a/src/lib/pages/deploy-script/components/UploadScriptCard.tsx b/src/lib/pages/deploy-script/components/UploadScriptCard.tsx
index 5b23c3bea..540bc0aba 100644
--- a/src/lib/pages/deploy-script/components/UploadScriptCard.tsx
+++ b/src/lib/pages/deploy-script/components/UploadScriptCard.tsx
@@ -19,13 +19,12 @@ interface UploadScriptCardProps {
   setFile: (
     file: Option<File>,
     base64File: string,
-    decodeRes: Option<ExposedFunction>,
-    decodeError: string
+    decodeRes: Option<ExposedFunction>
   ) => void;
 }
 
 export const UploadScriptCard = ({
-  fileState: { file, decodeRes, decodeError },
+  fileState: { file, decodeRes },
   removeFile,
   setFile,
 }: UploadScriptCardProps) => {
@@ -33,6 +32,7 @@ export const UploadScriptCard = ({
     file: Option<File>;
     base64: string;
   }>(DEFAULT_TEMP_FILE);
+  const [decodeError, setDecodeError] = useState("");
 
   const { isFetching } = useDecodeScript({
     base64EncodedFile: tempFile.base64,
@@ -41,15 +41,13 @@ export const UploadScriptCard = ({
       retry: 0,
       refetchOnWindowFocus: false,
       onSuccess: (data) => {
-        setFile(tempFile.file, tempFile.base64, data, "");
+        setFile(tempFile.file, tempFile.base64, data);
         setTempFile(DEFAULT_TEMP_FILE);
+        setDecodeError("");
       },
       onError: () => {
-        setFile(
-          tempFile.file,
-          tempFile.base64,
-          undefined,
-          "Failed to decode .mv script file"
+        setDecodeError(
+          "Failed to decode .mv file. Please make sure the file is a script."
         );
         setTempFile(DEFAULT_TEMP_FILE);
       },
@@ -82,18 +80,13 @@ export const UploadScriptCard = ({
       <Flex direction="column">
         <ComponentLoader isLoading={isFetching}>
           {file ? (
-            <UploadCard
-              file={file}
-              deleteFile={removeFile}
-              theme="secondary"
-              status={decodeError ? "error" : "init"}
-              statusText={decodeError}
-            />
+            <UploadCard file={file} deleteFile={removeFile} theme="secondary" />
           ) : (
             <DropZone
               setFile={handleFileDrop}
               fileType="move"
               bgColor="background.main"
+              error={decodeError}
               _hover={undefined}
             />
           )}
diff --git a/src/lib/pages/deploy-script/index.tsx b/src/lib/pages/deploy-script/index.tsx
index 746917818..e2d13df11 100644
--- a/src/lib/pages/deploy-script/index.tsx
+++ b/src/lib/pages/deploy-script/index.tsx
@@ -29,14 +29,12 @@ export interface FileState {
   file: Option<File>;
   base64File: string;
   decodeRes: Option<ExposedFunction>;
-  decodeError: string;
 }
 
 const DEFAULT_FILE_STATE: FileState = {
   file: undefined,
   base64File: "",
   decodeRes: undefined,
-  decodeError: "",
 };
 
 export const DeployScript = () => {
@@ -162,9 +160,8 @@ export const DeployScript = () => {
           setFile={(
             file: Option<File>,
             base64File: string,
-            decodeRes: Option<ExposedFunction>,
-            decodeError: string
-          ) => setFileState({ file, base64File, decodeRes, decodeError })}
+            decodeRes: Option<ExposedFunction>
+          ) => setFileState({ file, base64File, decodeRes })}
         />
         <Heading as="h6" variant="h6" mt={8} mb={4} alignSelf="start">
           Script input

From 4ee822b43e0b8720617fdf299de0812b50f6d1d4 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 10 Oct 2023 17:57:23 +0700
Subject: [PATCH 144/368] fix: create constants.ts

---
 src/lib/components/EstimatedFeeRender.tsx          | 14 +++++++++-----
 .../abi/args-form/field/ArgFieldWidget.tsx         |  8 +++-----
 .../components/abi/args-form/field/constants.ts    |  3 +++
 src/lib/components/abi/args-form/field/index.tsx   |  4 ++--
 src/lib/components/abi/args-form/field/utils.ts    |  6 +++---
 5 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/abi/args-form/field/constants.ts

diff --git a/src/lib/components/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx
index 5628252ba..37c7a9168 100644
--- a/src/lib/components/EstimatedFeeRender.tsx
+++ b/src/lib/components/EstimatedFeeRender.tsx
@@ -1,6 +1,5 @@
 import { Spinner } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
-import { useState } from "react";
 
 import { useAssetInfos } from "lib/services/assetService";
 import { formatBalanceWithDenom } from "lib/utils";
@@ -12,10 +11,15 @@ export const EstimatedFeeRender = ({
   estimatedFee: StdFee | undefined;
   loading: boolean;
 }) => {
-  const [isUsed, setIsUsed] = useState(false);
-  const { assetInfos, isLoading } = useAssetInfos({ withPrices: false });
-  if (loading || (isUsed && isLoading)) {
-    if (!isUsed) setIsUsed(true);
+  const { assetInfos, isLoading: isAssetInfoLoading } = useAssetInfos({
+    withPrices: false,
+  });
+
+  if (isAssetInfoLoading) {
+    return <Spinner size="sm" mx={1} />;
+  }
+
+  if (loading) {
     return (
       <>
         <Spinner size="sm" mx={1} /> Estimating ...
diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index c5e64e8c6..8d01db13b 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -5,9 +5,7 @@ import type { ControllerRenderProps } from "react-hook-form";
 import { useExampleAddresses } from "lib/app-provider";
 import type { HumanAddr, Nullable } from "lib/types";
 
-import { UintTypes } from "./utils";
-
-const STRING_TYPE = "0x1::string::String";
+import { UINT_TYPES, STRING_TYPE } from "./constants";
 
 const getInputPlaceholder = (type: string, isNull: boolean) => {
   if (type === STRING_TYPE && !isNull)
@@ -23,7 +21,7 @@ const getVectorPlaceholder = (
   if (isNull) return " ";
   const [, elementType] = type.split(/<(.*)>/);
 
-  if (UintTypes.includes(elementType)) return "[1, 2, 3]";
+  if (UINT_TYPES.includes(elementType)) return "[1, 2, 3]";
   if (elementType === "address") return `[0x1, ${sampleAddresses}]`;
   if (elementType === STRING_TYPE)
     return "[some first string, some second string]";
@@ -49,7 +47,7 @@ export const ArgFieldWidget = ({
 }: ArgFieldWidgetProps) => {
   const { user: exampleAddress } = useExampleAddresses();
 
-  if (UintTypes.includes(type) || type === "address" || type === STRING_TYPE)
+  if (UINT_TYPES.includes(type) || type === "address" || type === STRING_TYPE)
     return (
       <Input
         size="md"
diff --git a/src/lib/components/abi/args-form/field/constants.ts b/src/lib/components/abi/args-form/field/constants.ts
new file mode 100644
index 000000000..28e1dd6e0
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/constants.ts
@@ -0,0 +1,3 @@
+export const UINT_TYPES = ["u8", "u16", "u32", "u64", "u128", "u256"];
+
+export const STRING_TYPE = "0x1::string::String";
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index fddb88e25..fb5188185 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -14,6 +14,7 @@ import { useValidateAddress } from "lib/app-provider";
 import type { AbiFormData } from "lib/types";
 
 import { ArgFieldWidget } from "./ArgFieldWidget";
+import { STRING_TYPE } from "./constants";
 import { getRules } from "./utils";
 
 interface ArgFieldTemplateProps {
@@ -60,8 +61,7 @@ export const ArgFieldTemplate = ({
       <FormControl
         className={`${size}-form`}
         variant={
-          (type === "0x1::string::String" || type.startsWith("vector")) &&
-          !isNull
+          (type === STRING_TYPE || type.startsWith("vector")) && !isNull
             ? "fixed-floating"
             : "floating"
         }
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
index ce74dac75..ae54b30ec 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -5,7 +5,7 @@ import type { FieldValues, UseControllerProps } from "react-hook-form";
 
 import type { Option } from "lib/types";
 
-export const UintTypes = ["u8", "u16", "u32", "u64", "u128", "u256"];
+import { UINT_TYPES } from "./constants";
 
 const validateNull = (v: Option<string>) =>
   v !== undefined ? undefined : "cannot be null";
@@ -42,7 +42,7 @@ const validateVector = (
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let validateElement = (_v: string): Option<string> => undefined;
-  if (UintTypes.includes(elementType))
+  if (UINT_TYPES.includes(elementType))
     validateElement = validateUint(elementType);
   if (elementType === "bool") validateElement = validateBool;
   if (elementType === "address")
@@ -73,7 +73,7 @@ export const getRules = <T extends FieldValues>(
       null: validateNull,
     };
   }
-  if (UintTypes.includes(type))
+  if (UINT_TYPES.includes(type))
     rules.validate = {
       ...rules.validate,
       [type]: (v: Option<string>) => {

From ab05e1376b9c4cf5ed48e836e16a83913540b01b Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 10 Oct 2023 20:36:45 +0700
Subject: [PATCH 145/368] fix: change gql query to module_histories and create
 module history table

---
 src/lib/app-provider/env.ts                   |   4 +-
 src/lib/gql/gql.ts                            |  24 +-
 src/lib/gql/graphql.ts                        | 343 +++++++++++++++---
 .../tables/history/ModuleHistoryHeader.tsx    |  17 +
 .../tables/history/ModuleHistoryRow.tsx       | 126 +++++++
 .../components/tables/history/index.tsx       | 148 ++++++++
 .../module-details/components/tables/index.ts |   2 +
 .../txs/index.tsx}                            |   8 +-
 src/lib/pages/module-details/index.tsx        | 117 +++---
 src/lib/query/module.ts                       |  32 ++
 src/lib/query/tx.ts                           |  18 +-
 src/lib/services/moduleService.ts             |  84 ++++-
 src/lib/services/txService.ts                 |  58 +--
 src/lib/types/contract.ts                     |   4 +-
 src/lib/types/index.ts                        |   1 +
 src/lib/types/module.ts                       |  14 +
 src/lib/types/tx/transaction.ts               |   2 +
 17 files changed, 823 insertions(+), 179 deletions(-)
 create mode 100644 src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
 create mode 100644 src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
 create mode 100644 src/lib/pages/module-details/components/tables/history/index.tsx
 create mode 100644 src/lib/pages/module-details/components/tables/index.ts
 rename src/lib/pages/module-details/components/{table/ModuleTxsTable.tsx => tables/txs/index.tsx} (95%)
 create mode 100644 src/lib/types/module.ts

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index c0c036b64..671ad1958 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -99,5 +99,7 @@ export enum CELATONE_QUERY_KEYS {
   MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
   MODULE_ID = "CELATONE_QUERY_MODULE_ID",
   MODULE_TXS = "CELATONE_QUERY_MODULE_TXS",
-  MODULE_TXS_COUNT_BY_TYPE = "CELATONE_QUERY_MODULE_TXS_COUNT_BY_TYPE",
+  MODULE_TXS_COUNT = "CELATONE_QUERY_MODULE_TXS_COUNT",
+  MODULE_HISTORIES = "CELATONE_QUERY_MODULE_HISTORIES",
+  MODULE_HISTORIES_COUNT = "CELATONE_QUERY_MODULE_HISTORIES_COUNT",
 }
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 943ce3ad2..3cd02f457 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -57,6 +57,10 @@ const documents = {
     types.GetContractListCountByAdminDocument,
   "\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n":
     types.GetModuleIdByNameAndVmAddressQueryDocument,
+  "\n  query getModuleHistoriesQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_histories(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block: { height: desc } }\n    ) {\n      remark\n      block {\n        height\n        timestamp\n      }\n      upgrade_policy\n    }\n  }\n":
+    types.GetModuleHistoriesQueryDocument,
+  "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
+    types.GetModuleHistoriesCountQueryDocument,
   "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n":
     types.GetPoolListDocument,
   "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
@@ -99,10 +103,10 @@ const documents = {
     types.GetBlockTransactionsByHeightQueryDocument,
   "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetBlockTransactionCountByHeightQueryDocument,
-  "\n  query getModuleTransactionsQuery(\n    $filterExp: module_transactions_bool_exp\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: $filterExp\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n":
+  "\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n":
     types.GetModuleTransactionsQueryDocument,
-  "\n  query getModuleTransactionsCountByTypeQuery(\n    $moduleId: Int!\n    $isUpgrade: Boolean!\n  ) {\n    module_transactions_aggregate(\n      where: {\n        module_id: { _eq: $moduleId }\n        transaction: { is_move_upgrade: { _eq: $isUpgrade } }\n      }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
-    types.GetModuleTransactionsCountByTypeQueryDocument,
+  "\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
+    types.GetModuleTransactionsCountQueryDocument,
   "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n":
     types.GetValidatorsDocument,
 };
@@ -188,6 +192,12 @@ export function graphql(
 export function graphql(
   source: "\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"
 ): typeof documents["\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getModuleHistoriesQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_histories(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block: { height: desc } }\n    ) {\n      remark\n      block {\n        height\n        timestamp\n      }\n      upgrade_policy\n    }\n  }\n"
+): typeof documents["\n  query getModuleHistoriesQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_histories(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block: { height: desc } }\n    ) {\n      remark\n      block {\n        height\n        timestamp\n      }\n      upgrade_policy\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
+): typeof documents["\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
 ): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
@@ -252,11 +262,11 @@ export function graphql(
   source: "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getModuleTransactionsQuery(\n    $filterExp: module_transactions_bool_exp\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: $filterExp\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"
-): typeof documents["\n  query getModuleTransactionsQuery(\n    $filterExp: module_transactions_bool_exp\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: $filterExp\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"];
+  source: "\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"
+): typeof documents["\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getModuleTransactionsCountByTypeQuery(\n    $moduleId: Int!\n    $isUpgrade: Boolean!\n  ) {\n    module_transactions_aggregate(\n      where: {\n        module_id: { _eq: $moduleId }\n        transaction: { is_move_upgrade: { _eq: $isUpgrade } }\n      }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getModuleTransactionsCountByTypeQuery(\n    $moduleId: Int!\n    $isUpgrade: Boolean!\n  ) {\n    module_transactions_aggregate(\n      where: {\n        module_id: { _eq: $moduleId }\n        transaction: { is_move_upgrade: { _eq: $isUpgrade } }\n      }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+  source: "\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
+): typeof documents["\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n"
 ): typeof documents["\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index c0dbc199e..5332df810 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -15325,6 +15325,37 @@ export type GetModuleIdByNameAndVmAddressQueryQuery = {
   modules: Array<{ __typename?: "modules"; id: number }>;
 };
 
+export type GetModuleHistoriesQueryQueryVariables = Exact<{
+  moduleId: Scalars["Int"];
+  pageSize: Scalars["Int"];
+  offset: Scalars["Int"];
+}>;
+
+export type GetModuleHistoriesQueryQuery = {
+  __typename?: "query_root";
+  module_histories: Array<{
+    __typename?: "module_histories";
+    remark: any;
+    upgrade_policy: any;
+    block: { __typename?: "blocks"; height: number; timestamp: any };
+  }>;
+};
+
+export type GetModuleHistoriesCountQueryQueryVariables = Exact<{
+  moduleId: Scalars["Int"];
+}>;
+
+export type GetModuleHistoriesCountQueryQuery = {
+  __typename?: "query_root";
+  module_histories_aggregate: {
+    __typename?: "module_histories_aggregate";
+    aggregate?: {
+      __typename?: "module_histories_aggregate_fields";
+      count: number;
+    } | null;
+  };
+};
+
 export type GetPoolListQueryVariables = Exact<{
   expression?: InputMaybe<Pools_Bool_Exp>;
   order?: InputMaybe<Order_By>;
@@ -15704,7 +15735,7 @@ export type GetBlockTransactionCountByHeightQueryQuery = {
 };
 
 export type GetModuleTransactionsQueryQueryVariables = Exact<{
-  filterExp?: InputMaybe<Module_Transactions_Bool_Exp>;
+  moduleId: Scalars["Int"];
   pageSize: Scalars["Int"];
   offset: Scalars["Int"];
 }>;
@@ -15737,12 +15768,11 @@ export type GetModuleTransactionsQueryQuery = {
   }>;
 };
 
-export type GetModuleTransactionsCountByTypeQueryQueryVariables = Exact<{
+export type GetModuleTransactionsCountQueryQueryVariables = Exact<{
   moduleId: Scalars["Int"];
-  isUpgrade: Scalars["Boolean"];
 }>;
 
-export type GetModuleTransactionsCountByTypeQueryQuery = {
+export type GetModuleTransactionsCountQueryQuery = {
   __typename?: "query_root";
   module_transactions_aggregate: {
     __typename?: "module_transactions_aggregate";
@@ -19392,6 +19422,235 @@ export const GetModuleIdByNameAndVmAddressQueryDocument = {
   GetModuleIdByNameAndVmAddressQueryQuery,
   GetModuleIdByNameAndVmAddressQueryQueryVariables
 >;
+export const GetModuleHistoriesQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getModuleHistoriesQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "moduleId" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "pageSize" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "offset" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "module_histories" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "module_id" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "_eq" },
+                            value: {
+                              kind: "Variable",
+                              name: { kind: "Name", value: "moduleId" },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "pageSize" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "offset" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "offset" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "block" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "height" },
+                            value: { kind: "EnumValue", value: "desc" },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "remark" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "block" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "height" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "timestamp" },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "upgrade_policy" },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetModuleHistoriesQueryQuery,
+  GetModuleHistoriesQueryQueryVariables
+>;
+export const GetModuleHistoriesCountQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getModuleHistoriesCountQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "moduleId" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "module_histories_aggregate" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "module_id" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "_eq" },
+                            value: {
+                              kind: "Variable",
+                              name: { kind: "Name", value: "moduleId" },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "aggregate" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "count" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetModuleHistoriesCountQueryQuery,
+  GetModuleHistoriesCountQueryQueryVariables
+>;
 export const GetPoolListDocument = {
   kind: "Document",
   definitions: [
@@ -21680,11 +21939,11 @@ export const GetModuleTransactionsQueryDocument = {
           kind: "VariableDefinition",
           variable: {
             kind: "Variable",
-            name: { kind: "Name", value: "filterExp" },
+            name: { kind: "Name", value: "moduleId" },
           },
           type: {
-            kind: "NamedType",
-            name: { kind: "Name", value: "module_transactions_bool_exp" },
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
           },
         },
         {
@@ -21721,8 +21980,26 @@ export const GetModuleTransactionsQueryDocument = {
                 kind: "Argument",
                 name: { kind: "Name", value: "where" },
                 value: {
-                  kind: "Variable",
-                  name: { kind: "Name", value: "filterExp" },
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "module_id" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "_eq" },
+                            value: {
+                              kind: "Variable",
+                              name: { kind: "Name", value: "moduleId" },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
                 },
               },
               {
@@ -21870,13 +22147,13 @@ export const GetModuleTransactionsQueryDocument = {
   GetModuleTransactionsQueryQuery,
   GetModuleTransactionsQueryQueryVariables
 >;
-export const GetModuleTransactionsCountByTypeQueryDocument = {
+export const GetModuleTransactionsCountQueryDocument = {
   kind: "Document",
   definitions: [
     {
       kind: "OperationDefinition",
       operation: "query",
-      name: { kind: "Name", value: "getModuleTransactionsCountByTypeQuery" },
+      name: { kind: "Name", value: "getModuleTransactionsCountQuery" },
       variableDefinitions: [
         {
           kind: "VariableDefinition",
@@ -21889,20 +22166,6 @@ export const GetModuleTransactionsCountByTypeQueryDocument = {
             type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
           },
         },
-        {
-          kind: "VariableDefinition",
-          variable: {
-            kind: "Variable",
-            name: { kind: "Name", value: "isUpgrade" },
-          },
-          type: {
-            kind: "NonNullType",
-            type: {
-              kind: "NamedType",
-              name: { kind: "Name", value: "Boolean" },
-            },
-          },
-        },
       ],
       selectionSet: {
         kind: "SelectionSet",
@@ -21934,32 +22197,6 @@ export const GetModuleTransactionsCountByTypeQueryDocument = {
                         ],
                       },
                     },
-                    {
-                      kind: "ObjectField",
-                      name: { kind: "Name", value: "transaction" },
-                      value: {
-                        kind: "ObjectValue",
-                        fields: [
-                          {
-                            kind: "ObjectField",
-                            name: { kind: "Name", value: "is_move_upgrade" },
-                            value: {
-                              kind: "ObjectValue",
-                              fields: [
-                                {
-                                  kind: "ObjectField",
-                                  name: { kind: "Name", value: "_eq" },
-                                  value: {
-                                    kind: "Variable",
-                                    name: { kind: "Name", value: "isUpgrade" },
-                                  },
-                                },
-                              ],
-                            },
-                          },
-                        ],
-                      },
-                    },
                   ],
                 },
               },
@@ -21985,8 +22222,8 @@ export const GetModuleTransactionsCountByTypeQueryDocument = {
     },
   ],
 } as unknown as DocumentNode<
-  GetModuleTransactionsCountByTypeQueryQuery,
-  GetModuleTransactionsCountByTypeQueryQueryVariables
+  GetModuleTransactionsCountQueryQuery,
+  GetModuleTransactionsCountQueryQueryVariables
 >;
 export const GetValidatorsDocument = {
   kind: "Document",
diff --git a/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx b/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
new file mode 100644
index 000000000..69f751179
--- /dev/null
+++ b/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
@@ -0,0 +1,17 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
+
+import { TableHeader } from "lib/components/table";
+
+export const ModuleHistoryHeader = ({
+  templateColumns,
+}: {
+  templateColumns: GridProps["templateColumns"];
+}) => (
+  <Grid templateColumns={templateColumns}>
+    <TableHeader>Remark</TableHeader>
+    <TableHeader>Upgrade Policy Changes</TableHeader>
+    <TableHeader>Block Height</TableHeader>
+    <TableHeader>Timestamp</TableHeader>
+  </Grid>
+);
diff --git a/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx b/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
new file mode 100644
index 000000000..b2ec2872f
--- /dev/null
+++ b/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
@@ -0,0 +1,126 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Flex, Grid, Text } from "@chakra-ui/react";
+import { capitalize } from "lodash";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { TableRow } from "lib/components/table";
+import type { ModuleHistory } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+interface ModuleHistoriesRowProps {
+  templateColumns: GridProps["templateColumns"];
+  history: ModuleHistory;
+}
+
+export const RemarkRender = ({
+  remark,
+}: {
+  remark: ModuleHistory["remark"];
+}) => {
+  const { type, value } = remark;
+  if (type === "genesis") return <Text variant="body2">Genesis</Text>;
+
+  const isGovernance = type === "governance";
+  const textFormat = isGovernance ? "normal" : "truncate";
+  return (
+    <Flex
+      direction="column"
+      sx={{
+        "& > p:first-of-type": {
+          color: "text.dark",
+          fontSize: "12px",
+        },
+      }}
+      mb={{ base: 0, md: "2px" }}
+    >
+      <p>{isGovernance ? "Through Proposal ID" : "Tx Hash"}</p>
+      <ExplorerLink
+        type={isGovernance ? "proposal_id" : "tx_hash"}
+        value={value.toString()}
+        showCopyOnHover
+        textFormat={textFormat}
+      />
+    </Flex>
+  );
+};
+
+export const PolicyChanges = ({ history }: { history: ModuleHistory }) => {
+  switch (history.previousPolicy) {
+    case undefined:
+      return (
+        <Text variant="body2" color="text.dark">
+          Set as{" "}
+          <Text as="span" fontWeight={700} color="text.main">
+            {capitalize(history.upgradePolicy)}
+          </Text>
+        </Text>
+      );
+    case history.upgradePolicy:
+      return (
+        <Text variant="body2" color="text.dark">
+          Remain as{" "}
+          <Text as="span" fontWeight={700}>
+            {capitalize(history.upgradePolicy)}
+          </Text>
+        </Text>
+      );
+    default:
+      return (
+        <Flex align="center" wrap="wrap">
+          <Text variant="body2" color="text.dark">
+            Changed from{" "}
+            <Text as="span" fontWeight={700}>
+              {capitalize(history.previousPolicy)}
+            </Text>
+          </Text>
+          <CustomIcon
+            name="arrow-right"
+            boxSize={3}
+            color="accent.main"
+            mx={2}
+          />
+          <Text variant="body2" fontWeight={700}>
+            {capitalize(history.upgradePolicy)}
+          </Text>
+        </Flex>
+      );
+  }
+};
+
+export const ModuleHistoryRow = ({
+  templateColumns,
+  history,
+}: ModuleHistoriesRowProps) => (
+  <Grid templateColumns={templateColumns}>
+    <TableRow>
+      <RemarkRender remark={history.remark} />
+    </TableRow>
+    <TableRow>
+      <PolicyChanges history={history} />
+    </TableRow>
+    <TableRow>
+      {history.height === 0 ? (
+        <Text variant="body2" color="text.dark">
+          Genesis
+        </Text>
+      ) : (
+        <ExplorerLink
+          value={history.height.toString()}
+          type="block_height"
+          showCopyOnHover
+        />
+      )}
+    </TableRow>
+    <TableRow>
+      <Flex direction="column">
+        <Text variant="body2" color="text.dark">
+          {formatUTC(history.timestamp)}
+        </Text>
+        <Text variant="body3" color="text.dark" mt="2px">
+          ({dateFromNow(history.timestamp)})
+        </Text>
+      </Flex>
+    </TableRow>
+  </Grid>
+);
diff --git a/src/lib/pages/module-details/components/tables/history/index.tsx b/src/lib/pages/module-details/components/tables/history/index.tsx
new file mode 100644
index 000000000..81d07b946
--- /dev/null
+++ b/src/lib/pages/module-details/components/tables/history/index.tsx
@@ -0,0 +1,148 @@
+import type { ChangeEvent } from "react";
+import { useEffect } from "react";
+
+import { useCelatoneApp, useMobile } from "lib/app-provider";
+import { Loading } from "lib/components/Loading";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import { TableContainer, ViewMore } from "lib/components/table";
+import { useModuleHistoriesByPagination } from "lib/services/moduleService";
+import type { Nullable, Option } from "lib/types";
+
+import { ModuleHistoryHeader } from "./ModuleHistoryHeader";
+import { ModuleHistoryRow } from "./ModuleHistoryRow";
+
+const TEMPLATE_COLUMNS = "180px minmax(300px, 1fr) 140px 260px";
+
+interface ModuleTxsTableProps {
+  moduleId: Option<Nullable<number>>;
+  historyCount: Option<number>;
+  scrollComponentId?: string;
+  onViewMore?: () => void;
+  refetchCount: () => void;
+}
+
+export const ModuleHistoryTable = ({
+  moduleId,
+  historyCount,
+  onViewMore,
+  scrollComponentId,
+  refetchCount,
+}: ModuleTxsTableProps) => {
+  const { currentChainId } = useCelatoneApp();
+
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: historyCount,
+    initialState: {
+      pageSize: onViewMore ? 5 : 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const {
+    data: moduleHistories,
+    isLoading,
+    error,
+  } = useModuleHistoriesByPagination({
+    moduleId,
+    pageSize,
+    offset,
+  });
+
+  const onPageChange = (nextPage: number) => {
+    refetchCount();
+    setCurrentPage(nextPage);
+  };
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    refetchCount();
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  const isMobile = useMobile();
+
+  useEffect(() => {
+    if (!onViewMore) setPageSize(10);
+    setCurrentPage(1);
+  }, [currentChainId, onViewMore, setCurrentPage, setPageSize]);
+  if (!moduleId || error)
+    return (
+      <EmptyState
+        withBorder
+        imageVariant="not-found"
+        message="There is an error fetching module published events history."
+      />
+    );
+  if (isLoading)
+    return isMobile ? (
+      <>
+        <Loading />
+        {historyCount && (
+          <Pagination
+            currentPage={currentPage}
+            pagesQuantity={pagesQuantity}
+            offset={offset}
+            totalData={historyCount}
+            pageSize={pageSize}
+            onPageChange={onPageChange}
+            onPageSizeChange={onPageSizeChange}
+            scrollComponentId={scrollComponentId}
+          />
+        )}
+      </>
+    ) : (
+      <Loading withBorder />
+    );
+
+  if (!moduleHistories?.length)
+    return (
+      <EmptyState
+        imageVariant="empty"
+        message="This module does not have any published events yet."
+        withBorder
+      />
+    );
+
+  // TODO: Mobile card version
+
+  return (
+    <>
+      <TableContainer>
+        <ModuleHistoryHeader templateColumns={TEMPLATE_COLUMNS} />
+        {moduleHistories.map((history) => (
+          <ModuleHistoryRow
+            key={JSON.stringify(history)}
+            templateColumns={TEMPLATE_COLUMNS}
+            history={history}
+          />
+        ))}
+      </TableContainer>
+      {onViewMore && Number(historyCount) > 5 && (
+        <ViewMore onClick={onViewMore} />
+      )}
+      {!onViewMore && historyCount !== undefined && historyCount > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={historyCount}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+          scrollComponentId={scrollComponentId}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/lib/pages/module-details/components/tables/index.ts b/src/lib/pages/module-details/components/tables/index.ts
new file mode 100644
index 000000000..8867dd4c9
--- /dev/null
+++ b/src/lib/pages/module-details/components/tables/index.ts
@@ -0,0 +1,2 @@
+export * from "./history";
+export * from "./txs";
diff --git a/src/lib/pages/module-details/components/table/ModuleTxsTable.tsx b/src/lib/pages/module-details/components/tables/txs/index.tsx
similarity index 95%
rename from src/lib/pages/module-details/components/table/ModuleTxsTable.tsx
rename to src/lib/pages/module-details/components/tables/txs/index.tsx
index 5ef154b5f..70af79072 100644
--- a/src/lib/pages/module-details/components/table/ModuleTxsTable.tsx
+++ b/src/lib/pages/module-details/components/tables/txs/index.tsx
@@ -9,13 +9,11 @@ import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
 import { TransactionsTable, ViewMore } from "lib/components/table";
-import type { ModuleTxType } from "lib/services/txService";
 import { useModuleTxsByPagination } from "lib/services/txService";
 import type { Nullable, Option } from "lib/types";
 
 interface ModuleTxsTableProps {
   moduleId: Option<Nullable<number>>;
-  txType: ModuleTxType;
   txCount: Option<number>;
   onViewMore?: () => void;
   scrollComponentId?: string;
@@ -24,7 +22,6 @@ interface ModuleTxsTableProps {
 
 export const ModuleTxsTable = ({
   moduleId,
-  txType,
   txCount,
   onViewMore,
   scrollComponentId,
@@ -54,7 +51,6 @@ export const ModuleTxsTable = ({
     error,
   } = useModuleTxsByPagination({
     moduleId,
-    txType,
     pageSize,
     offset,
   });
@@ -147,14 +143,14 @@ export const ModuleTxsTable = ({
           <EmptyState
             withBorder
             imageVariant="empty"
-            message="There are no transactions on this network."
+            message="There are no transactions on this module."
           />
         }
         showAction={false}
         showRelations={false}
       />
       {onViewMore && <ViewMore onClick={onViewMore} />}
-      {!onViewMore && txCount && txCount > 10 && (
+      {!onViewMore && txCount !== undefined && Number(txCount) > 10 && (
         <Pagination
           currentPage={currentPage}
           pagesQuantity={pagesQuantity}
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 0a8715422..bbda58937 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -24,9 +24,10 @@ import {
   useVerifyModule,
   useModuleId,
   useAccountModules,
+  useModuleHistoriesCount,
 } from "lib/services/moduleService";
-import { useModuleTxsCountByType } from "lib/services/txService";
-import type { MoveAccountAddr, Option } from "lib/types";
+import { useModuleTxsCount } from "lib/services/txService";
+import type { MoveAccountAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import { FunctionTypeTabs } from "./components/FunctionTypeSwitch";
@@ -34,7 +35,7 @@ import { ModuleFunction } from "./components/ModuleFunction";
 import { ModuleInfo } from "./components/ModuleInfo";
 import { ModuleStruct } from "./components/ModuleStruct";
 import { ModuleTop } from "./components/ModuleTop";
-import { ModuleTxsTable } from "./components/table/ModuleTxsTable";
+import { ModuleTxsTable, ModuleHistoryTable } from "./components/tables";
 
 const mainTabHeaderId = "main-table-header";
 const overviewHistoryHeaderId = "overview-history-header";
@@ -51,7 +52,7 @@ interface ActionInfo {
   icon: IconKeys;
   iconColor: string;
   name: string;
-  count: Option<number>;
+  count: number | string;
   onClick: MouseEventHandler<HTMLDivElement>;
 }
 
@@ -67,6 +68,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
   const { trackUseTab } = useTrack();
 
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
+  const [overviewHistoryTabIndex, setOverviewHistoryTabIndex] = useState(0);
   const [historyTabIndex, setHistoryTabIndex] = useState(0);
 
   const handleTabChange = useCallback(
@@ -89,29 +91,6 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
     [moduleData.address, moduleData.moduleName, navigate, tab, trackUseTab]
   );
 
-  useEffect(() => {
-    if (router.isReady && (!tab || !Object.values(TabIndex).includes(tab))) {
-      navigate({
-        replace: true,
-        pathname: "/modules/[address]/[moduleName]/[tab]",
-        query: {
-          address: moduleData.address,
-          moduleName: moduleData.moduleName,
-          tab: TabIndex.Overview,
-        },
-        options: {
-          shallow: true,
-        },
-      });
-    }
-  }, [
-    router.isReady,
-    tab,
-    navigate,
-    moduleData.address,
-    moduleData.moduleName,
-  ]);
-
   const { data: moduleId } = useModuleId(
     moduleData.moduleName,
     moduleData.address
@@ -123,7 +102,9 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
   });
 
   const { data: moduleTxsCount, refetch: refetchTxsCount } =
-    useModuleTxsCountByType(moduleId);
+    useModuleTxsCount(moduleId);
+  const { data: moduleHistoriesCount, refetch: refetchHistoriesCount } =
+    useModuleHistoriesCount(moduleId);
 
   const actionList: ActionInfo[] = [
     {
@@ -144,10 +125,41 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
       icon: "list" as IconKeys,
       iconColor: "gray.600",
       name: "Transactions",
-      count: moduleTxsCount?.allTxsCount,
+      count: Number(moduleTxsCount) + Number(moduleHistoriesCount) || "N/A",
       onClick: handleTabChange(TabIndex.History),
     },
   ];
+
+  useEffect(() => {
+    if (router.isReady && (!tab || !Object.values(TabIndex).includes(tab))) {
+      navigate({
+        replace: true,
+        pathname: "/modules/[address]/[moduleName]/[tab]",
+        query: {
+          address: moduleData.address,
+          moduleName: moduleData.moduleName,
+          tab: TabIndex.Overview,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    }
+  }, [
+    router.isReady,
+    tab,
+    navigate,
+    moduleData.address,
+    moduleData.moduleName,
+  ]);
+
+  useEffect(() => {
+    if (Number(moduleTxsCount) === 0) {
+      setOverviewHistoryTabIndex(1);
+      setHistoryTabIndex(1);
+    }
+  }, [moduleTxsCount]);
+
   return (
     <>
       <ModuleTop
@@ -239,25 +251,32 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                 >
                   History
                 </Heading>
-                <Tabs isLazy lazyBehavior="keepMounted">
+                <Tabs
+                  isLazy
+                  lazyBehavior="keepMounted"
+                  index={overviewHistoryTabIndex}
+                  onChange={setOverviewHistoryTabIndex}
+                >
                   <TabList
                     borderBottom="1px solid"
                     borderColor="gray.700"
                     overflowX={{ base: "scroll", md: "auto" }}
                   >
-                    <CustomTab count={moduleTxsCount?.normalTxsCount}>
+                    <CustomTab
+                      count={moduleTxsCount}
+                      isDisabled={Number(moduleTxsCount) === 0}
+                    >
                       Transactions
                     </CustomTab>
-                    <CustomTab count={moduleTxsCount?.upgradeTxsCount}>
-                      Upgrades
+                    <CustomTab count={moduleHistoriesCount}>
+                      Published Events
                     </CustomTab>
                   </TabList>
                   <TabPanels>
                     <TabPanel p={0}>
                       <ModuleTxsTable
                         moduleId={moduleId}
-                        txType="normal"
-                        txCount={moduleTxsCount?.normalTxsCount}
+                        txCount={moduleTxsCount}
                         refetchCount={refetchTxsCount}
                         onViewMore={() => {
                           handleTabChange(TabIndex.History)();
@@ -266,11 +285,10 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                       />
                     </TabPanel>
                     <TabPanel p={0}>
-                      <ModuleTxsTable
+                      <ModuleHistoryTable
                         moduleId={moduleId}
-                        txType="upgrade"
-                        txCount={moduleTxsCount?.upgradeTxsCount}
-                        refetchCount={refetchTxsCount}
+                        historyCount={moduleHistoriesCount}
+                        refetchCount={refetchHistoriesCount}
                         onViewMore={() => {
                           handleTabChange(TabIndex.History)();
                           setHistoryTabIndex(1);
@@ -306,36 +324,37 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                 isLazy
                 lazyBehavior="keepMounted"
                 index={historyTabIndex}
-                onChange={(index) => setHistoryTabIndex(index)}
+                onChange={setHistoryTabIndex}
               >
                 <TabList
                   borderBottom="1px solid"
                   borderColor="gray.700"
                   overflowX={{ base: "scroll", md: "auto" }}
                 >
-                  <CustomTab count={moduleTxsCount?.normalTxsCount}>
+                  <CustomTab
+                    count={moduleTxsCount}
+                    isDisabled={Number(moduleTxsCount) === 0}
+                  >
                     Transactions
                   </CustomTab>
-                  <CustomTab count={moduleTxsCount?.upgradeTxsCount}>
-                    Upgrades
+                  <CustomTab count={moduleHistoriesCount}>
+                    Published Events
                   </CustomTab>
                 </TabList>
                 <TabPanels>
                   <TabPanel p={0}>
                     <ModuleTxsTable
                       moduleId={moduleId}
-                      txType="normal"
-                      txCount={moduleTxsCount?.normalTxsCount}
+                      txCount={moduleTxsCount}
                       refetchCount={refetchTxsCount}
                       scrollComponentId={historyTabHeaderId}
                     />
                   </TabPanel>
                   <TabPanel p={0}>
-                    <ModuleTxsTable
+                    <ModuleHistoryTable
                       moduleId={moduleId}
-                      txType="upgrade"
-                      txCount={moduleTxsCount?.upgradeTxsCount}
-                      refetchCount={refetchTxsCount}
+                      historyCount={moduleHistoriesCount}
+                      refetchCount={refetchHistoriesCount}
                       scrollComponentId={historyTabHeaderId}
                     />
                   </TabPanel>
diff --git a/src/lib/query/module.ts b/src/lib/query/module.ts
index 6c8ba9ce5..a167a3e3d 100644
--- a/src/lib/query/module.ts
+++ b/src/lib/query/module.ts
@@ -15,3 +15,35 @@ export const getModuleIdByNameAndVmAddressQueryDocument = graphql(`
     }
   }
 `);
+
+export const getModuleHistoriesQueryDocument = graphql(`
+  query getModuleHistoriesQuery(
+    $moduleId: Int!
+    $pageSize: Int!
+    $offset: Int!
+  ) {
+    module_histories(
+      where: { module_id: { _eq: $moduleId } }
+      limit: $pageSize
+      offset: $offset
+      order_by: { block: { height: desc } }
+    ) {
+      remark
+      block {
+        height
+        timestamp
+      }
+      upgrade_policy
+    }
+  }
+`);
+
+export const getModuleHistoriesCountQueryDocument = graphql(`
+  query getModuleHistoriesCountQuery($moduleId: Int!) {
+    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {
+      aggregate {
+        count
+      }
+    }
+  }
+`);
diff --git a/src/lib/query/tx.ts b/src/lib/query/tx.ts
index 504153f89..351d73500 100644
--- a/src/lib/query/tx.ts
+++ b/src/lib/query/tx.ts
@@ -169,12 +169,12 @@ export const getBlockTransactionCountByHeightQueryDocument = graphql(`
 
 export const getModuleTransactionsQueryDocument = graphql(`
   query getModuleTransactionsQuery(
-    $filterExp: module_transactions_bool_exp
+    $moduleId: Int!
     $pageSize: Int!
     $offset: Int!
   ) {
     module_transactions(
-      where: $filterExp
+      where: { module_id: { _eq: $moduleId } }
       limit: $pageSize
       offset: $offset
       order_by: { block_height: desc }
@@ -208,17 +208,9 @@ export const getModuleTransactionsQueryDocument = graphql(`
   }
 `);
 
-export const getModuleTransactionsCountByTypeQueryDocument = graphql(`
-  query getModuleTransactionsCountByTypeQuery(
-    $moduleId: Int!
-    $isUpgrade: Boolean!
-  ) {
-    module_transactions_aggregate(
-      where: {
-        module_id: { _eq: $moduleId }
-        transaction: { is_move_upgrade: { _eq: $isUpgrade } }
-      }
-    ) {
+export const getModuleTransactionsCountQueryDocument = graphql(`
+  query getModuleTransactionsCountQuery($moduleId: Int!) {
+    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {
       aggregate {
         count
       }
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index 4eebee7f6..c7f06cfa4 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -12,7 +12,11 @@ import {
   useCelatoneApp,
   useMoveConfig,
 } from "lib/app-provider";
-import { getModuleIdByNameAndVmAddressQueryDocument } from "lib/query";
+import {
+  getModuleHistoriesCountQueryDocument,
+  getModuleHistoriesQueryDocument,
+  getModuleIdByNameAndVmAddressQueryDocument,
+} from "lib/query";
 import type {
   MoveAccountAddr,
   ExposedFunction,
@@ -26,8 +30,10 @@ import type {
   HexAddr,
   Nullable,
 } from "lib/types";
+import type { ModuleHistory } from "lib/types/module";
 import {
   bech32AddressToHex,
+  parseDate,
   parseJsonABI,
   splitViewExecuteFunctions,
   truncate,
@@ -243,3 +249,79 @@ export const useModuleId = (moduleName: string, vmAddress: HexAddr) => {
     }
   );
 };
+
+export const useModuleHistoriesByPagination = ({
+  moduleId,
+  pageSize,
+  offset,
+}: {
+  moduleId: Option<Nullable<number>>;
+  pageSize: number;
+  offset: number;
+}): UseQueryResult<ModuleHistory[]> => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = async () => {
+    if (!moduleId) return [];
+    return indexerGraphClient
+      .request(getModuleHistoriesQueryDocument, {
+        moduleId,
+        pageSize,
+        offset,
+      })
+      .then(({ module_histories }) =>
+        module_histories.map<ModuleHistory>((history, idx) => ({
+          remark: history.remark,
+          upgradePolicy: history.upgrade_policy,
+          height: history.block.height,
+          timestamp: parseDate(history.block.timestamp),
+          previousPolicy:
+            idx === module_histories.length - 1
+              ? undefined
+              : module_histories[idx + 1].upgrade_policy,
+        }))
+      );
+  };
+
+  return useQuery(
+    [
+      CELATONE_QUERY_KEYS.MODULE_HISTORIES,
+      indexerGraphClient,
+      moduleId,
+      pageSize,
+      offset,
+    ],
+    queryFn,
+    {
+      enabled: Boolean(moduleId),
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
+  );
+};
+
+export const useModuleHistoriesCount = (moduleId: Option<Nullable<number>>) => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = async () => {
+    if (!moduleId) throw new Error("Module id not found");
+    return indexerGraphClient
+      .request(getModuleHistoriesCountQueryDocument, {
+        moduleId,
+      })
+      .then(
+        ({ module_histories_aggregate }) =>
+          module_histories_aggregate.aggregate?.count
+      );
+  };
+
+  return useQuery(
+    [CELATONE_QUERY_KEYS.MODULE_HISTORIES_COUNT, indexerGraphClient, moduleId],
+    queryFn,
+    {
+      enabled: Boolean(moduleId),
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
+  );
+};
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index c0262b731..31e90e513 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -20,7 +20,7 @@ import {
   getBlockTransactionCountByHeightQueryDocument,
   getBlockTransactionsByHeightQueryDocument,
   getModuleTransactionsQueryDocument,
-  getModuleTransactionsCountByTypeQueryDocument,
+  getModuleTransactionsCountQueryDocument,
 } from "lib/query";
 import { createQueryFnWithTimeout } from "lib/query-utils";
 import type {
@@ -437,29 +437,12 @@ export const useTxsCountByBlockHeight = (
   );
 };
 
-export type ModuleTxType = "all" | "normal" | "upgrade";
-
-const getFilterExp = (txType: ModuleTxType, moduleId: number) => {
-  const base = { module_id: { _eq: moduleId } };
-  switch (txType) {
-    case "normal":
-      return { ...base, transaction: { is_move_upgrade: { _eq: false } } };
-    case "upgrade":
-      return { ...base, transaction: { is_move_upgrade: { _eq: true } } };
-    case "all":
-    default:
-      return base;
-  }
-};
-
 export const useModuleTxsByPagination = ({
   moduleId,
-  txType,
   pageSize,
   offset,
 }: {
   moduleId: Option<Nullable<number>>;
-  txType: "all" | "normal" | "upgrade";
   pageSize: number;
   offset: number;
 }) => {
@@ -469,7 +452,7 @@ export const useModuleTxsByPagination = ({
     if (!moduleId) return [];
     return indexerGraphClient
       .request(getModuleTransactionsQueryDocument, {
-        filterExp: getFilterExp(txType, moduleId),
+        moduleId,
         pageSize,
         offset,
       })
@@ -517,7 +500,6 @@ export const useModuleTxsByPagination = ({
       CELATONE_QUERY_KEYS.MODULE_TXS,
       indexerGraphClient,
       moduleId,
-      txType,
       pageSize,
       offset,
     ],
@@ -530,39 +512,23 @@ export const useModuleTxsByPagination = ({
   );
 };
 
-export const useModuleTxsCountByType = (moduleId: Option<Nullable<number>>) => {
+export const useModuleTxsCount = (moduleId: Option<Nullable<number>>) => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = async () => {
     if (!moduleId) throw new Error("Module id not found");
-    const requestPromise = (isUpgrade: boolean) =>
-      indexerGraphClient
-        .request(getModuleTransactionsCountByTypeQueryDocument, {
-          moduleId,
-          isUpgrade,
-        })
-        .then(
-          ({ module_transactions_aggregate }) =>
-            module_transactions_aggregate.aggregate?.count
-        );
-
-    const [normalTxsCount, upgradeTxsCount] = await Promise.all([
-      requestPromise(false),
-      requestPromise(true),
-    ]);
-    return {
-      normalTxsCount,
-      upgradeTxsCount,
-      allTxsCount: Number(normalTxsCount) + Number(upgradeTxsCount),
-    };
+    return indexerGraphClient
+      .request(getModuleTransactionsCountQueryDocument, {
+        moduleId,
+      })
+      .then(
+        ({ module_transactions_aggregate }) =>
+          module_transactions_aggregate.aggregate?.count
+      );
   };
 
   return useQuery(
-    [
-      CELATONE_QUERY_KEYS.MODULE_TXS_COUNT_BY_TYPE,
-      indexerGraphClient,
-      moduleId,
-    ],
+    [CELATONE_QUERY_KEYS.MODULE_TXS_COUNT, indexerGraphClient, moduleId],
     queryFn,
     {
       enabled: Boolean(moduleId),
diff --git a/src/lib/types/contract.ts b/src/lib/types/contract.ts
index dfdc41193..249be4e80 100644
--- a/src/lib/types/contract.ts
+++ b/src/lib/types/contract.ts
@@ -1,5 +1,5 @@
 import type { ContractLocalInfo } from "lib/stores/contract";
-import type { Addr, Nullable, Option } from "lib/types";
+import type { Addr, Nullable, Option, RemarkType } from "lib/types";
 
 export enum RemarkOperation {
   CONTRACT_CODE_HISTORY_OPERATION_TYPE_INIT = "CONTRACT_CODE_HISTORY_OPERATION_TYPE_INIT",
@@ -7,8 +7,6 @@ export enum RemarkOperation {
   CONTRACT_CODE_HISTORY_OPERATION_TYPE_GENESIS = "CONTRACT_CODE_HISTORY_OPERATION_TYPE_GENESIS",
 }
 
-type RemarkType = "genesis" | "governance" | "transaction";
-
 export interface ContractHistoryRemark {
   operation: RemarkOperation;
   type: RemarkType;
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 4fd34b3b3..1ba068e4d 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -17,3 +17,4 @@ export * from "./asset";
 export * from "./converter";
 export * from "./abi";
 export * from "./json";
+export * from "./module";
diff --git a/src/lib/types/module.ts b/src/lib/types/module.ts
new file mode 100644
index 000000000..14ea9225a
--- /dev/null
+++ b/src/lib/types/module.ts
@@ -0,0 +1,14 @@
+import type { Option, RemarkType, UpgradePolicy } from "lib/types";
+
+interface Remark {
+  type: RemarkType;
+  value: string;
+}
+
+export interface ModuleHistory {
+  remark: Remark;
+  upgradePolicy: UpgradePolicy;
+  height: number;
+  timestamp: Date;
+  previousPolicy: Option<UpgradePolicy>;
+}
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index cfcd465d2..1b796f3f0 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -59,3 +59,5 @@ export type PoolTxFilter =
   | "is_clp"
   | "is_collect"
   | "is_migrate";
+
+export type RemarkType = "genesis" | "governance" | "transaction";

From 1aa6fb3d39126a7711347162b981c3addb4c1964 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 01:43:18 +0700
Subject: [PATCH 146/368] fix: restucture mobile

---
 CHANGELOG.md                                  |   1 +
 src/lib/components/ValidatorBadge.tsx         |   2 +-
 src/lib/components/card/ContractCard.tsx      |  87 -----------
 src/lib/components/card/DefaultMobileCard.tsx |  43 -----
 .../components/table/MobileCardTemplate.tsx   |  41 +++++
 .../table}/MobileLabel.tsx                    |  22 ++-
 .../table}/MobileTitle.tsx                    |  28 ++--
 src/lib/components/table/codes/CodesTable.tsx |  17 +-
 .../codes/CodesTableMobileCard.tsx}           |  23 +--
 .../contracts/ContractInstantiatorCell.tsx    |  77 +++++++++
 .../table/contracts/ContractsTable.tsx        |  24 ++-
 .../contracts/ContractsTableMobileCard.tsx    |  83 ++++++++++
 .../table/contracts/ContractsTableRow.tsx     |  80 +---------
 src/lib/components/table/index.ts             |   3 +
 .../table/proposals/ProposalsTable.tsx        |  17 +-
 .../proposals/ProposalsTableMobileCard.tsx}   |  23 +--
 .../table/transactions/TransactionsTable.tsx  |  17 +-
 .../TransactionsTableMobileCard.tsx}          |  20 +--
 .../components/delegations/DelegationInfo.tsx | 147 ++++++++----------
 .../delegations/DelegationsBody.tsx           |  10 +-
 .../components/delegations/DelegationsTab.tsx |  99 ------------
 .../delegations/NonRedelegatableSection.tsx   |  11 +-
 .../delegations/NonRedelegatablesMobile.tsx   |  44 ------
 .../delegations/RedelegationsMobile.tsx       |  79 ----------
 .../delegations/RedelegationsSection.tsx      |  69 ++++----
 .../components/delegations/UnbondingTab.tsx   |  93 -----------
 .../components/delegations/index.tsx          |  23 ++-
 .../mobile/MobileDelegationTitle.tsx          |  30 ----
 .../components/tables/AdminContractsTable.tsx |  93 +++++------
 .../components/tables/ContractsBody.tsx       |  53 -------
 .../tables/InstantiatedContractsTable.tsx     |  93 +++++------
 .../{proposals => }/OpenedProposalsTable.tsx  |  93 +++++------
 .../tables/{codes => }/StoredCodesTable.tsx   |  95 +++++------
 .../tables/bonded/BondedTableMobileCard.tsx   |  57 +++++++
 .../tables/bonded/DelegationsTable.tsx        |  49 ++++--
 .../tables/bonded/UnbondingsTable.tsx         |  32 +++-
 .../bonded/{constant.ts => constants.ts}      |   0
 .../components/tables/bonded/types.ts         |   8 +
 .../tables/codes/StoredCodesBody.tsx          |  48 ------
 .../components/tables/codes/index.ts          |   2 -
 .../components/tables/index.ts                |   7 +-
 .../NonRedelegatableTableMobileCard.tsx       |  37 +++++
 .../tables/nonRedelegatable/index.tsx         |  40 +++--
 .../tables/proposals/OpenProposalsBody.tsx    |  41 -----
 .../components/tables/proposals/index.ts      |   1 -
 .../RedelegationTableMobileCard.tsx           |  64 ++++++++
 .../components/tables/redelegation/index.tsx  |  58 ++++---
 .../components/tables/txs/TxsBody.tsx         |  44 ------
 .../components/tables/txs/TxsTop.tsx          |  49 +++---
 .../components/tables/txs/index.ts            |   2 -
 .../tables/txs/{TxsTable.tsx => index.tsx}    | 111 ++++++-------
 .../components/BlockTxsTable.tsx              |  52 ++-----
 .../blocks/components/BlocksMobileCard.tsx}   |  15 +-
 .../pages/blocks/components/BlocksTable.tsx   |   4 +-
 .../code-info/table/CodeContractsTable.tsx    |  36 +----
 src/lib/pages/codes/index.tsx                 |  36 +----
 .../tables/RelatedProposalsTable.tsx          |  35 ++---
 .../components/tables/TxsTable.tsx            |  41 ++---
 .../tables/migration/MigrationMobileCard.tsx} |  14 +-
 .../components/tables/migration/index.tsx     |  12 +-
 src/lib/pages/contracts/index.tsx             |  57 ++-----
 .../PublicProjectAccountMobileCard.tsx}       |  14 +-
 .../account/PublicProjectAccountTable.tsx     |  16 +-
 .../code/PublicProjectCodeMobileCard.tsx      |  81 ++++++++++
 .../table/code/PublicProjectCodeTable.tsx     |   7 +-
 .../PublicProjectContractMobileCard.tsx}      |  39 ++---
 .../contract/PublicProjectContractTable.tsx   |  20 +--
 src/lib/pages/txs/components/TxsTable.tsx     |  57 +------
 68 files changed, 1215 insertions(+), 1611 deletions(-)
 delete mode 100644 src/lib/components/card/ContractCard.tsx
 delete mode 100644 src/lib/components/card/DefaultMobileCard.tsx
 create mode 100644 src/lib/components/table/MobileCardTemplate.tsx
 rename src/lib/{pages/account-details/components/mobile => components/table}/MobileLabel.tsx (51%)
 rename src/lib/{pages/account-details/components/mobile => components/table}/MobileTitle.tsx (54%)
 rename src/lib/components/{card/StoredCodeCard.tsx => table/codes/CodesTableMobileCard.tsx} (80%)
 create mode 100644 src/lib/components/table/contracts/ContractInstantiatorCell.tsx
 create mode 100644 src/lib/components/table/contracts/ContractsTableMobileCard.tsx
 rename src/lib/components/{card/ProposalCard.tsx => table/proposals/ProposalsTableMobileCard.tsx} (78%)
 rename src/lib/components/{card/TransactionCard.tsx => table/transactions/TransactionsTableMobileCard.tsx} (80%)
 delete mode 100644 src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
 delete mode 100644 src/lib/pages/account-details/components/delegations/NonRedelegatablesMobile.tsx
 delete mode 100644 src/lib/pages/account-details/components/delegations/RedelegationsMobile.tsx
 delete mode 100644 src/lib/pages/account-details/components/delegations/UnbondingTab.tsx
 delete mode 100644 src/lib/pages/account-details/components/mobile/MobileDelegationTitle.tsx
 delete mode 100644 src/lib/pages/account-details/components/tables/ContractsBody.tsx
 rename src/lib/pages/account-details/components/tables/{proposals => }/OpenedProposalsTable.tsx (61%)
 rename src/lib/pages/account-details/components/tables/{codes => }/StoredCodesTable.tsx (62%)
 create mode 100644 src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx
 rename src/lib/pages/account-details/components/tables/bonded/{constant.ts => constants.ts} (100%)
 create mode 100644 src/lib/pages/account-details/components/tables/bonded/types.ts
 delete mode 100644 src/lib/pages/account-details/components/tables/codes/StoredCodesBody.tsx
 delete mode 100644 src/lib/pages/account-details/components/tables/codes/index.ts
 create mode 100644 src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableMobileCard.tsx
 delete mode 100644 src/lib/pages/account-details/components/tables/proposals/OpenProposalsBody.tsx
 delete mode 100644 src/lib/pages/account-details/components/tables/proposals/index.ts
 create mode 100644 src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
 delete mode 100644 src/lib/pages/account-details/components/tables/txs/TxsBody.tsx
 delete mode 100644 src/lib/pages/account-details/components/tables/txs/index.ts
 rename src/lib/pages/account-details/components/tables/txs/{TxsTable.tsx => index.tsx} (69%)
 rename src/lib/{components/card/BlockCard.tsx => pages/blocks/components/BlocksMobileCard.tsx} (83%)
 rename src/lib/{components/card/MigrationCard.tsx => pages/contract-details/components/tables/migration/MigrationMobileCard.tsx} (89%)
 rename src/lib/{components/card/AccountCard.tsx => pages/public-project/components/table/account/PublicProjectAccountMobileCard.tsx} (81%)
 create mode 100644 src/lib/pages/public-project/components/table/code/PublicProjectCodeMobileCard.tsx
 rename src/lib/{components/card/PublicContractCard.tsx => pages/public-project/components/table/contract/PublicProjectContractMobileCard.tsx} (68%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05546d31d..d81583249 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#559](https://github.com/alleslabs/celatone-frontend/pull/559) Restructure and refactor responsive tables
 - [#549](https://github.com/alleslabs/celatone-frontend/pull/549) Add move tx filer options
 - [#553](https://github.com/alleslabs/celatone-frontend/pull/553) Use Cmd on Mac OS while Ctrl on others
 - [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx
index 9103fdc65..a120e6a73 100644
--- a/src/lib/components/ValidatorBadge.tsx
+++ b/src/lib/components/ValidatorBadge.tsx
@@ -4,7 +4,7 @@ import { Spinner, Flex, Image, Text } from "@chakra-ui/react";
 import validatorDefaultImg from "../../../public/validator.svg";
 import { useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import { MobileLabel } from "lib/components/table";
 import { useValidatorImage } from "lib/services/validatorService";
 import type { Nullable, ValidatorInfo } from "lib/types";
 
diff --git a/src/lib/components/card/ContractCard.tsx b/src/lib/components/card/ContractCard.tsx
deleted file mode 100644
index 21ea07baf..000000000
--- a/src/lib/components/card/ContractCard.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Flex, Text } from "@chakra-ui/react";
-
-import { ExplorerLink } from "../ExplorerLink";
-import { ContractNameCell } from "../table";
-import { InstantiatorRender } from "../table/contracts/ContractsTableRow";
-import { useInternalNavigate } from "lib/app-provider";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
-import type { ContractHistoryRemark, ContractInfo, Option } from "lib/types";
-import { RemarkOperation } from "lib/types";
-import { dateFromNow, formatUTC } from "lib/utils";
-
-import { DefaultMobileCard } from "./DefaultMobileCard";
-
-interface InstantiatedContractCardProps {
-  contractInfo: ContractInfo;
-}
-const instantiatorRemark = (remark: Option<ContractHistoryRemark>) => {
-  if (!remark) {
-    return <MobileLabel label="Instantiated by" />;
-  }
-  if (
-    remark.operation ===
-    RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_GENESIS
-  )
-    return <MobileLabel label="Genesis" />;
-  if (
-    remark.operation ===
-    RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_MIGRATE
-  )
-    return <MobileLabel label="Migrated by" />;
-
-  return <MobileLabel label="Instantiated by" />;
-};
-export const InstantiatedContractCard = ({
-  contractInfo,
-}: InstantiatedContractCardProps) => {
-  const navigate = useInternalNavigate();
-  return (
-    <DefaultMobileCard
-      onClick={() =>
-        navigate({
-          pathname: "/contracts/[contractAddr]",
-          query: { contractAddr: contractInfo.contractAddress },
-        })
-      }
-      topContent={
-        <Flex gap={2} align="center">
-          <MobileLabel variant="body2" label="Contract Address" />
-          <ExplorerLink
-            value={contractInfo.contractAddress}
-            type="contract_address"
-            showCopyOnHover
-          />
-        </Flex>
-      }
-      middleContent={
-        <Flex gap={3} direction="column">
-          <Flex direction="column">
-            <MobileLabel label="Contract Name" />
-            <ContractNameCell contractLocalInfo={contractInfo} isReadOnly />
-          </Flex>
-          <Flex direction="column">
-            {instantiatorRemark(contractInfo.remark)}
-            <InstantiatorRender
-              contractInfo={contractInfo}
-              isReadOnly={false}
-            />
-          </Flex>
-        </Flex>
-      }
-      bottomContent={
-        <>
-          {contractInfo.latestUpdated && (
-            <Flex direction="column">
-              <Text variant="body3">
-                {formatUTC(contractInfo.latestUpdated)}
-              </Text>
-              <Text variant="body3" color="text.dark">
-                {`(${dateFromNow(contractInfo.latestUpdated)})`}
-              </Text>
-            </Flex>
-          )}
-        </>
-      }
-    />
-  );
-};
diff --git a/src/lib/components/card/DefaultMobileCard.tsx b/src/lib/components/card/DefaultMobileCard.tsx
deleted file mode 100644
index c4cdb3bf7..000000000
--- a/src/lib/components/card/DefaultMobileCard.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Flex } from "@chakra-ui/react";
-import type { ReactNode } from "react";
-
-interface CardProps {
-  topContent: ReactNode;
-  middleContent: ReactNode;
-  bottomContent?: ReactNode;
-  onClick?: () => void;
-}
-export const DefaultMobileCard = ({
-  topContent,
-  middleContent,
-  bottomContent,
-  onClick,
-}: CardProps) => {
-  return (
-    <Flex
-      borderRadius="8px"
-      background="gray.900"
-      p={3}
-      cursor="pointer"
-      direction="column"
-      gap={3}
-      w="full"
-      onClick={onClick}
-    >
-      <Flex align="center" justify="space-between">
-        {topContent}
-      </Flex>
-      <Flex
-        borderTop="1px solid"
-        borderBottom={bottomContent ? "1px solid" : "0px"}
-        borderColor="gray.700"
-        pt={3}
-        pb={bottomContent ? 3 : 0}
-        direction="column"
-      >
-        {middleContent}
-      </Flex>
-      {bottomContent && <Flex>{bottomContent}</Flex>}
-    </Flex>
-  );
-};
diff --git a/src/lib/components/table/MobileCardTemplate.tsx b/src/lib/components/table/MobileCardTemplate.tsx
new file mode 100644
index 000000000..8a026f821
--- /dev/null
+++ b/src/lib/components/table/MobileCardTemplate.tsx
@@ -0,0 +1,41 @@
+import { Flex } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+interface MobileCardTemplateProps {
+  topContent: ReactNode;
+  middleContent: ReactNode;
+  bottomContent?: ReactNode;
+  onClick?: () => void;
+}
+export const MobileCardTemplate = ({
+  topContent,
+  middleContent,
+  bottomContent,
+  onClick,
+}: MobileCardTemplateProps) => (
+  <Flex
+    borderRadius="8px"
+    background="gray.900"
+    p={3}
+    cursor="pointer"
+    direction="column"
+    gap={3}
+    w="full"
+    onClick={onClick}
+  >
+    <Flex align="center" justify="space-between">
+      {topContent}
+    </Flex>
+    <Flex
+      borderTop="1px solid"
+      borderBottom={bottomContent ? "1px solid" : "0px"}
+      borderColor="gray.700"
+      pt={3}
+      pb={bottomContent ? 3 : 0}
+      direction="column"
+    >
+      {middleContent}
+    </Flex>
+    {bottomContent && <Flex>{bottomContent}</Flex>}
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/mobile/MobileLabel.tsx b/src/lib/components/table/MobileLabel.tsx
similarity index 51%
rename from src/lib/pages/account-details/components/mobile/MobileLabel.tsx
rename to src/lib/components/table/MobileLabel.tsx
index bf44613cc..38d9b942e 100644
--- a/src/lib/pages/account-details/components/mobile/MobileLabel.tsx
+++ b/src/lib/components/table/MobileLabel.tsx
@@ -10,15 +10,13 @@ export const MobileLabel = ({
   label,
   fontWeight = 600,
   variant = "body3",
-}: MobileLabelProps) => {
-  return (
-    <Text
-      color="text.dark"
-      variant={variant}
-      fontWeight={fontWeight}
-      textTransform="capitalize"
-    >
-      {label}
-    </Text>
-  );
-};
+}: MobileLabelProps) => (
+  <Text
+    color="text.dark"
+    variant={variant}
+    fontWeight={fontWeight}
+    textTransform="capitalize"
+  >
+    {label}
+  </Text>
+);
diff --git a/src/lib/pages/account-details/components/mobile/MobileTitle.tsx b/src/lib/components/table/MobileTitle.tsx
similarity index 54%
rename from src/lib/pages/account-details/components/mobile/MobileTitle.tsx
rename to src/lib/components/table/MobileTitle.tsx
index d2a3d373a..d1f441a36 100644
--- a/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
+++ b/src/lib/components/table/MobileTitle.tsx
@@ -1,9 +1,10 @@
 import { Flex } from "@chakra-ui/react";
 
 import { CustomIcon } from "lib/components/icon";
-import { TableTitle } from "lib/components/table";
 import type { Option } from "lib/types";
 
+import { TableTitle } from "./TableTitle";
+
 interface MobileTitleProps {
   title: string;
   count: Option<number>;
@@ -16,16 +17,15 @@ const cardProps = {
   padding: "16px",
   borderRadius: "8px",
 };
-export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => {
-  return (
-    <Flex
-      style={cardProps}
-      onClick={count === 0 ? undefined : onViewMore}
-      bg="gray.900"
-      opacity={count === 0 ? 0.5 : 1}
-    >
-      <TableTitle title={title} count={count} mb={0} />
-      <CustomIcon name="chevron-right" color="gray.600" />
-    </Flex>
-  );
-};
+
+export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => (
+  <Flex
+    style={cardProps}
+    onClick={count === 0 ? undefined : onViewMore}
+    bg="gray.900"
+    opacity={count === 0 ? 0.5 : 1}
+  >
+    <TableTitle title={title} count={count} mb={0} />
+    <CustomIcon name="chevron-right" color="gray.600" />
+  </Flex>
+);
diff --git a/src/lib/components/table/codes/CodesTable.tsx b/src/lib/components/table/codes/CodesTable.tsx
index 33a81221a..ca5e0a8d3 100644
--- a/src/lib/components/table/codes/CodesTable.tsx
+++ b/src/lib/components/table/codes/CodesTable.tsx
@@ -1,8 +1,12 @@
+import { Flex } from "@chakra-ui/react";
+
 import { TableContainer } from "../tableComponents";
+import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { CodeInfo, Option } from "lib/types";
 
 import { CodesTableHeader } from "./CodesTableHeader";
+import { CodesTableMobileCard } from "./CodesTableMobileCard";
 import { CodesTableRow } from "./CodesTableRow";
 
 interface CodesTableProps {
@@ -20,6 +24,8 @@ export const CodesTable = ({
   onRowSelect,
   isReadOnly = false,
 }: CodesTableProps) => {
+  const isMobile = useMobile();
+
   if (isLoading) return <Loading withBorder />;
   if (!codes?.length) return emptyState;
 
@@ -27,7 +33,16 @@ export const CodesTable = ({
     ? "max(100px) minmax(250px, 1fr) minmax(200px, 1fr) max(100px) max(160px) 150px"
     : "max(100px) minmax(250px, 1fr) minmax(200px, 1fr) max(100px) max(160px) 150px 180px";
 
-  return (
+  return isMobile ? (
+    <Flex direction="column" gap={4} w="full" mt={4}>
+      {codes.map((code) => (
+        <CodesTableMobileCard
+          key={code.id + code.uploader + code.name}
+          codeInfo={code}
+        />
+      ))}
+    </Flex>
+  ) : (
     <TableContainer pb={6}>
       <CodesTableHeader
         templateColumns={templateColumns}
diff --git a/src/lib/components/card/StoredCodeCard.tsx b/src/lib/components/table/codes/CodesTableMobileCard.tsx
similarity index 80%
rename from src/lib/components/card/StoredCodeCard.tsx
rename to src/lib/components/table/codes/CodesTableMobileCard.tsx
index af002173d..fa71a5312 100644
--- a/src/lib/components/card/StoredCodeCard.tsx
+++ b/src/lib/components/table/codes/CodesTableMobileCard.tsx
@@ -1,23 +1,26 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { ExplorerLink } from "../ExplorerLink";
-import { PermissionChip } from "../PermissionChip";
-import { CodeNameCell } from "../table";
+import { MobileCardTemplate } from "../MobileCardTemplate";
 import { useInternalNavigate } from "lib/app-provider";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
-import type { CodeInfo, PublicCode } from "lib/types";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { PermissionChip } from "lib/components/PermissionChip";
+import { MobileLabel } from "lib/components/table/MobileLabel";
+import type { CodeInfo } from "lib/types";
 import { getCw2Info } from "lib/utils";
 
-import { DefaultMobileCard } from "./DefaultMobileCard";
+import { CodeNameCell } from "./CodeNameCell";
 
-interface StoredCodeCardProps {
-  codeInfo: CodeInfo | PublicCode;
+interface CodesTableMobileCardProps {
+  codeInfo: CodeInfo;
 }
-export const StoredCodeCard = ({ codeInfo }: StoredCodeCardProps) => {
+export const CodesTableMobileCard = ({
+  codeInfo,
+}: CodesTableMobileCardProps) => {
   const cw2Info = getCw2Info(codeInfo.cw2Contract, codeInfo.cw2Version);
   const navigate = useInternalNavigate();
+
   return (
-    <DefaultMobileCard
+    <MobileCardTemplate
       onClick={() =>
         navigate({
           pathname: "/codes/[codeId]",
diff --git a/src/lib/components/table/contracts/ContractInstantiatorCell.tsx b/src/lib/components/table/contracts/ContractInstantiatorCell.tsx
new file mode 100644
index 000000000..f456fa7de
--- /dev/null
+++ b/src/lib/components/table/contracts/ContractInstantiatorCell.tsx
@@ -0,0 +1,77 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { useGetAddressType, useMobile } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { RemarkOperation, type ContractInfo } from "lib/types";
+
+interface ContractInstantiatorCellProps {
+  contractInfo: ContractInfo;
+  isReadOnly: boolean;
+}
+
+export const ContractInstantiatorCell = ({
+  contractInfo: { instantiator, remark, latestUpdater },
+  isReadOnly,
+}: ContractInstantiatorCellProps) => {
+  const isMobile = useMobile();
+  const getAddressType = useGetAddressType();
+
+  /**
+   * @remarks handle the case where the data is too old and cannot be found
+   */
+  if (!latestUpdater)
+    return instantiator ? (
+      <ExplorerLink
+        value={instantiator}
+        type={getAddressType(instantiator)}
+        showCopyOnHover
+        isReadOnly={isReadOnly}
+      />
+    ) : (
+      <Text variant="body2" color="text.dark">
+        N/A
+      </Text>
+    );
+
+  const updaterType = getAddressType(latestUpdater);
+
+  switch (remark?.operation) {
+    case RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_GENESIS:
+      return (
+        <Text variant="body2" color="text.dark" cursor="text">
+          Genesis
+        </Text>
+      );
+    case RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_MIGRATE:
+      return (
+        <Flex direction="column" onClick={(e) => e.stopPropagation()}>
+          {!isMobile && (
+            <Text variant="body3" color="text.dark">
+              Migrated by
+            </Text>
+          )}
+          <ExplorerLink
+            value={latestUpdater}
+            type={updaterType}
+            showCopyOnHover
+            isReadOnly={isReadOnly}
+          />
+        </Flex>
+      );
+    case RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_INIT:
+      return (
+        <ExplorerLink
+          value={latestUpdater}
+          type={updaterType}
+          showCopyOnHover
+          isReadOnly={isReadOnly}
+        />
+      );
+    default:
+      return (
+        <Text variant="body2" color="text.dark">
+          N/A
+        </Text>
+      );
+  }
+};
diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx
index 6805450f8..738d15f7e 100644
--- a/src/lib/components/table/contracts/ContractsTable.tsx
+++ b/src/lib/components/table/contracts/ContractsTable.tsx
@@ -1,8 +1,12 @@
+import { Flex } from "@chakra-ui/react";
+
 import { TableContainer } from "../tableComponents";
+import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { ContractAddr, ContractInfo, Option } from "lib/types";
 
 import { ContractsTableHeader } from "./ContractsTableHeader";
+import { ContractsTableMobileCard } from "./ContractsTableMobileCard";
 import { ContractsTableRow } from "./ContractsTableRow";
 import type { CTAInfo } from "./ContractsTableRowCTA";
 
@@ -25,6 +29,8 @@ export const ContractsTable = ({
   withCTA,
   withoutTag,
 }: ContractsTableProps) => {
+  const isMobile = useMobile();
+
   if (isLoading) return <Loading withBorder />;
   if (!contracts?.length) return emptyState;
 
@@ -38,7 +44,23 @@ export const ContractsTable = ({
     templateColumns =
       "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 260px 80px";
 
-  return (
+  return isMobile ? (
+    <Flex direction="column" gap={4} w="full" mt={4}>
+      {contracts.map((contractInfo) => (
+        <ContractsTableMobileCard
+          key={
+            contractInfo.name +
+            contractInfo.contractAddress +
+            contractInfo.description +
+            contractInfo.tags +
+            contractInfo.lists
+          }
+          contractInfo={contractInfo}
+          onRowSelect={onRowSelect}
+        />
+      ))}
+    </Flex>
+  ) : (
     <TableContainer pb={6}>
       <ContractsTableHeader
         templateColumns={templateColumns}
diff --git a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
new file mode 100644
index 000000000..9500f372d
--- /dev/null
+++ b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
@@ -0,0 +1,83 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { MobileCardTemplate } from "../MobileCardTemplate";
+import { MobileLabel } from "../MobileLabel";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type {
+  ContractAddr,
+  ContractHistoryRemark,
+  ContractInfo,
+  Option,
+} from "lib/types";
+import { RemarkOperation } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { ContractInstantiatorCell } from "./ContractInstantiatorCell";
+import { ContractNameCell } from "./ContractNameCell";
+
+interface ContractsTableMobileCardProps {
+  contractInfo: ContractInfo;
+  onRowSelect: (contract: ContractAddr) => void;
+}
+
+const instantiatorRemark = (remark: Option<ContractHistoryRemark>) => {
+  if (!remark) {
+    return <MobileLabel label="Instantiated by" />;
+  }
+  if (
+    remark.operation ===
+    RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_GENESIS
+  )
+    return <MobileLabel label="Genesis" />;
+  if (
+    remark.operation ===
+    RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_MIGRATE
+  )
+    return <MobileLabel label="Migrated by" />;
+
+  return <MobileLabel label="Instantiated by" />;
+};
+
+export const ContractsTableMobileCard = ({
+  contractInfo,
+  onRowSelect,
+}: ContractsTableMobileCardProps) => (
+  <MobileCardTemplate
+    onClick={() => onRowSelect(contractInfo.contractAddress)}
+    topContent={
+      <Flex gap={2} align="center">
+        <MobileLabel variant="body2" label="Contract Address" />
+        <ExplorerLink
+          value={contractInfo.contractAddress}
+          type="contract_address"
+          showCopyOnHover
+        />
+      </Flex>
+    }
+    middleContent={
+      <Flex gap={3} direction="column">
+        <Flex direction="column">
+          <MobileLabel label="Contract Name" />
+          <ContractNameCell contractLocalInfo={contractInfo} isReadOnly />
+        </Flex>
+        <Flex direction="column">
+          {instantiatorRemark(contractInfo.remark)}
+          <ContractInstantiatorCell
+            contractInfo={contractInfo}
+            isReadOnly={false}
+          />
+        </Flex>
+      </Flex>
+    }
+    bottomContent={
+      contractInfo.latestUpdated ? (
+        <Flex direction="column">
+          <Text variant="body3">{formatUTC(contractInfo.latestUpdated)}</Text>
+          <Text variant="body3" color="text.dark">
+            {`(${dateFromNow(contractInfo.latestUpdated)})`}
+          </Text>
+        </Flex>
+      ) : null
+    }
+  />
+);
diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
index dc0cd186c..787b5bc20 100644
--- a/src/lib/components/table/contracts/ContractsTableRow.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -1,11 +1,10 @@
-import { Flex, Text, Grid } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
 
 import { TableRow } from "../tableComponents";
-import { useGetAddressType, useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { ContractAddr, ContractInfo } from "lib/types";
-import { RemarkOperation } from "lib/types";
 
+import { ContractInstantiatorCell } from "./ContractInstantiatorCell";
 import { ContractNameCell } from "./ContractNameCell";
 import type { CTAInfo } from "./ContractsTableRowCTA";
 import { ContractsTableRowCTA } from "./ContractsTableRowCTA";
@@ -20,76 +19,6 @@ interface ContractsTableRowProps {
   withoutTag?: boolean;
 }
 
-export const InstantiatorRender = ({
-  contractInfo: { instantiator, remark, latestUpdater },
-  isReadOnly,
-}: {
-  contractInfo: ContractInfo;
-  isReadOnly: boolean;
-}) => {
-  const isMobile = useMobile();
-  const getAddressType = useGetAddressType();
-
-  /**
-   * @remarks handle the case where the data is too old and cannot be found
-   */
-  if (!latestUpdater)
-    return instantiator ? (
-      <ExplorerLink
-        value={instantiator}
-        type={getAddressType(instantiator)}
-        showCopyOnHover
-        isReadOnly={isReadOnly}
-      />
-    ) : (
-      <Text variant="body2" color="text.dark">
-        N/A
-      </Text>
-    );
-
-  const updaterType = getAddressType(latestUpdater);
-
-  switch (remark?.operation) {
-    case RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_GENESIS:
-      return (
-        <Text variant="body2" color="text.dark" cursor="text">
-          Genesis
-        </Text>
-      );
-    case RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_MIGRATE:
-      return (
-        <Flex direction="column" onClick={(e) => e.stopPropagation()}>
-          {!isMobile && (
-            <Text variant="body3" color="text.dark">
-              Migrated by
-            </Text>
-          )}
-          <ExplorerLink
-            value={latestUpdater}
-            type={updaterType}
-            showCopyOnHover
-            isReadOnly={isReadOnly}
-          />
-        </Flex>
-      );
-    case RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_INIT:
-      return (
-        <ExplorerLink
-          value={latestUpdater}
-          type={updaterType}
-          showCopyOnHover
-          isReadOnly={isReadOnly}
-        />
-      );
-    default:
-      return (
-        <Text variant="body2" color="text.dark">
-          N/A
-        </Text>
-      );
-  }
-};
-
 export const ContractsTableRow = ({
   contractInfo,
   templateColumns,
@@ -128,7 +57,10 @@ export const ContractsTableRow = ({
       </TableRow>
     )}
     <TableRow>
-      <InstantiatorRender contractInfo={contractInfo} isReadOnly={isReadOnly} />
+      <ContractInstantiatorCell
+        contractInfo={contractInfo}
+        isReadOnly={isReadOnly}
+      />
     </TableRow>
 
     {!isReadOnly && (
diff --git a/src/lib/components/table/index.ts b/src/lib/components/table/index.ts
index 98d807ef1..49837d97b 100644
--- a/src/lib/components/table/index.ts
+++ b/src/lib/components/table/index.ts
@@ -4,6 +4,9 @@ export * from "./contracts";
 export * from "./proposals";
 export * from "./transactions";
 export * from "./EditableCell";
+export * from "./MobileCardTemplate";
+export * from "./MobileLabel";
+export * from "./MobileTitle";
 export * from "./tableComponents";
 export * from "./TableTitle";
 export * from "./ViewMore";
diff --git a/src/lib/components/table/proposals/ProposalsTable.tsx b/src/lib/components/table/proposals/ProposalsTable.tsx
index f655a2c15..cdabbf330 100644
--- a/src/lib/components/table/proposals/ProposalsTable.tsx
+++ b/src/lib/components/table/proposals/ProposalsTable.tsx
@@ -1,8 +1,12 @@
+import { Flex } from "@chakra-ui/react";
+
 import { TableContainer } from "../tableComponents";
+import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { Option, Proposal } from "lib/types";
 
 import { ProposalsTableHeader } from "./ProposalsTableHeader";
+import { ProposalsTableMobileCard } from "./ProposalsTableMobileCard";
 import { ProposalsTableRow } from "./ProposalsTableRow";
 
 interface ProposalsTableProps {
@@ -16,6 +20,8 @@ export const ProposalsTable = ({
   isLoading,
   emptyState,
 }: ProposalsTableProps) => {
+  const isMobile = useMobile();
+
   if (isLoading) return <Loading withBorder />;
   if (!proposals?.length) return emptyState;
 
@@ -23,7 +29,16 @@ export const ProposalsTable = ({
     "100px minmax(360px, 2fr) minmax(150px, 1fr) 330px 180px 160px";
   const boxShadow = "16px 0 32px -10px";
 
-  return (
+  return isMobile ? (
+    <Flex direction="column" gap={4} w="full" mt={4}>
+      {proposals.map((proposal) => (
+        <ProposalsTableMobileCard
+          key={proposal.proposalId}
+          proposal={proposal}
+        />
+      ))}
+    </Flex>
+  ) : (
     <TableContainer>
       <ProposalsTableHeader
         templateColumns={templateColumns}
diff --git a/src/lib/components/card/ProposalCard.tsx b/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx
similarity index 78%
rename from src/lib/components/card/ProposalCard.tsx
rename to src/lib/components/table/proposals/ProposalsTableMobileCard.tsx
index 6d7074e39..0474bbea1 100644
--- a/src/lib/components/card/ProposalCard.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx
@@ -1,27 +1,30 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { ExplorerLink } from "../ExplorerLink";
-import { Proposer } from "../table/proposals/Proposer";
-import { ResolvedHeight } from "../table/proposals/ResolvedHeight";
-import { StatusChip } from "../table/proposals/StatusChip";
-import { VotingEndTime } from "../table/proposals/VotingEndTime";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import { ExplorerLink } from "../../ExplorerLink";
+import { MobileCardTemplate } from "../MobileCardTemplate";
+import { MobileLabel } from "lib/components/table/MobileLabel";
 import type { Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
 
-import { DefaultMobileCard } from "./DefaultMobileCard";
+import { Proposer } from "./Proposer";
+import { ResolvedHeight } from "./ResolvedHeight";
+import { StatusChip } from "./StatusChip";
+import { VotingEndTime } from "./VotingEndTime";
 
-export interface ProposalCardProps {
+export interface ProposalsTableMobileCardProps {
   proposal: Proposal;
 }
 
-export const ProposalCard = ({ proposal }: ProposalCardProps) => {
+export const ProposalsTableMobileCard = ({
+  proposal,
+}: ProposalsTableMobileCardProps) => {
   const isDepositFailed = proposal.status === ProposalStatus.DEPOSIT_FAILED;
   const isDepositOrVoting =
     proposal.status === ProposalStatus.DEPOSIT_PERIOD ||
     proposal.status === ProposalStatus.VOTING_PERIOD;
+
   return (
-    <DefaultMobileCard
+    <MobileCardTemplate
       topContent={
         <>
           <Flex gap={2} align="center">
diff --git a/src/lib/components/table/transactions/TransactionsTable.tsx b/src/lib/components/table/transactions/TransactionsTable.tsx
index a452f8bae..dd66a8e8a 100644
--- a/src/lib/components/table/transactions/TransactionsTable.tsx
+++ b/src/lib/components/table/transactions/TransactionsTable.tsx
@@ -1,8 +1,12 @@
+import { Flex } from "@chakra-ui/react";
+
 import { TableContainer } from "../tableComponents";
+import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { Option, Transaction } from "lib/types";
 
 import { TransactionsTableHeader } from "./TransactionsTableHeader";
+import { TransactionsTableMobileCard } from "./TransactionsTableMobileCard";
 import { TransactionsTableRow } from "./TransactionsTableRow";
 
 interface TransactionsTableProps {
@@ -22,6 +26,8 @@ export const TransactionsTable = ({
   showTimestamp = true,
   showAction = false,
 }: TransactionsTableProps) => {
+  const isMobile = useMobile();
+
   if (isLoading) return <Loading withBorder />;
   if (!transactions?.length) return emptyState;
 
@@ -31,7 +37,16 @@ export const TransactionsTable = ({
     showAction ? "100px " : ""
   }`;
 
-  return (
+  return isMobile ? (
+    <Flex direction="column" gap={4} w="full" mt={4}>
+      {transactions.map((transaction) => (
+        <TransactionsTableMobileCard
+          key={transaction.hash}
+          transaction={transaction}
+        />
+      ))}
+    </Flex>
+  ) : (
     <TableContainer>
       <TransactionsTableHeader
         templateColumns={templateColumns}
diff --git a/src/lib/components/card/TransactionCard.tsx b/src/lib/components/table/transactions/TransactionsTableMobileCard.tsx
similarity index 80%
rename from src/lib/components/card/TransactionCard.tsx
rename to src/lib/components/table/transactions/TransactionsTableMobileCard.tsx
index 2c358f2ce..2206fcfac 100644
--- a/src/lib/components/card/TransactionCard.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableMobileCard.tsx
@@ -1,29 +1,29 @@
 import { Flex, Tag, Text } from "@chakra-ui/react";
 
-import { RenderActionMessages } from "../action-msg/ActionMessages";
-import { ExplorerLink } from "../ExplorerLink";
-import { CustomIcon } from "../icon";
-import { RelationChip } from "../table/transactions/RelationChip";
+import { RenderActionMessages } from "../../action-msg/ActionMessages";
+import { ExplorerLink } from "../../ExplorerLink";
+import { CustomIcon } from "../../icon";
+import { MobileCardTemplate } from "../MobileCardTemplate";
 import { useInternalNavigate } from "lib/app-provider";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import { MobileLabel } from "lib/components/table/MobileLabel";
 import type { Transaction } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
-import { DefaultMobileCard } from "./DefaultMobileCard";
+import { RelationChip } from "./RelationChip";
 
-interface TransactionCardProps {
+interface TransactionsTableMobileCardProps {
   transaction: Transaction;
   showRelations?: boolean;
   showTimestamp?: boolean;
 }
-export const TransactionCard = ({
+export const TransactionsTableMobileCard = ({
   transaction,
   showRelations = true,
   showTimestamp = true,
-}: TransactionCardProps) => {
+}: TransactionsTableMobileCardProps) => {
   const navigate = useInternalNavigate();
   return (
-    <DefaultMobileCard
+    <MobileCardTemplate
       onClick={() =>
         navigate({
           pathname: "/txs/[txHash]",
diff --git a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
index 944ebd472..c6a100abb 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
@@ -1,110 +1,101 @@
 import { Button, Flex, Heading } from "@chakra-ui/react";
-import type { MouseEventHandler, ReactNode } from "react";
+import type { MouseEventHandler } from "react";
 
-import { MobileDelegationTitle } from "../mobile/MobileDelegationTitle";
 import { AmpEvent, useTrack } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 
 interface DelegationInfoProps {
-  onViewMore?: () => void;
-  infoCards: ReactNode;
+  totalBondedCard: JSX.Element;
+  otherInfoCards: JSX.Element;
   redelegationCount: number;
   onClickToggle?: MouseEventHandler<HTMLButtonElement> | undefined;
-  TotalBondedCard: JSX.Element;
-}
-const DelegationsTitle = ({
-  onViewMore,
-  TotalBondedCard,
-}: {
   onViewMore?: () => void;
-  TotalBondedCard: JSX.Element;
-}) => {
-  const isMobile = useMobile();
-  if (!isMobile && !onViewMore) return null;
-  if (isMobile && onViewMore)
-    return (
-      <MobileDelegationTitle onViewMore={onViewMore}>
-        {TotalBondedCard}
-      </MobileDelegationTitle>
-    );
-  return (
-    <Heading
-      variant="h6"
-      as="h6"
-      display="flex"
-      alignItems="center"
-      height={{ base: "29px", md: "auto" }}
-    >
-      Delegations
-    </Heading>
-  );
-};
+}
 
 export const DelegationInfo = ({
-  onViewMore,
-  onClickToggle,
+  totalBondedCard,
+  otherInfoCards,
   redelegationCount,
-  infoCards,
-  TotalBondedCard,
+  onClickToggle,
+  onViewMore,
 }: DelegationInfoProps) => {
   const { track } = useTrack();
   const isMobile = useMobile();
 
-  let isMobileDetail = null;
-  if (isMobile && onViewMore) {
-    isMobileDetail = false;
-  } else {
-    isMobileDetail = true;
-  }
-
+  const isMobileOverview = isMobile && !!onViewMore;
   return (
     <>
-      <DelegationsTitle
-        onViewMore={onViewMore}
-        TotalBondedCard={TotalBondedCard}
-      />
-      {isMobileDetail && (
+      {isMobileOverview ? (
         <Flex
-          direction={{ base: "column", md: "row" }}
-          alignItems={{ base: "start", md: "center" }}
           justify="space-between"
-          overflowX="scroll"
+          w="full"
+          bg="gray.900"
+          borderRadius="8px"
+          p={4}
+          onClick={onViewMore}
         >
-          <Flex gap={8} direction={{ base: "column", md: "row" }}>
-            {infoCards}
+          <Flex direction="column" gap={2}>
+            <Heading variant="h6" as="h6">
+              Delegations
+            </Heading>
+            {totalBondedCard}
           </Flex>
-          {onViewMore ? (
-            <Button
-              variant="ghost-gray"
-              minW="fit-content"
-              rightIcon={<CustomIcon name="chevron-right" />}
-              onClick={() => {
-                track(AmpEvent.USE_VIEW_MORE);
-                onViewMore();
-              }}
-            >
-              View Delegation Info
-            </Button>
-          ) : (
-            <Flex
-              w={{ base: "full", md: "auto" }}
-              justify={{ base: "center", md: "inherit" }}
-              mt={{ base: 6, md: 0 }}
-            >
+          <CustomIcon name="chevron-right" color="gray.600" />
+        </Flex>
+      ) : (
+        <>
+          <Heading
+            variant="h6"
+            as="h6"
+            display="flex"
+            alignItems="center"
+            height={{ base: "29px", md: "auto" }}
+          >
+            Delegations
+          </Heading>
+          <Flex
+            direction={{ base: "column", md: "row" }}
+            alignItems={{ base: "start", md: "center" }}
+            justify="space-between"
+            overflowX="scroll"
+          >
+            <Flex gap={8} direction={{ base: "column", md: "row" }}>
+              {totalBondedCard}
+              {otherInfoCards}
+            </Flex>
+            {onViewMore ? (
               <Button
                 variant="ghost-gray"
                 minW="fit-content"
-                leftIcon={<CustomIcon name="history" />}
                 rightIcon={<CustomIcon name="chevron-right" />}
-                isDisabled={!redelegationCount}
-                onClick={onClickToggle}
+                onClick={() => {
+                  track(AmpEvent.USE_VIEW_MORE);
+                  onViewMore();
+                }}
               >
-                See Active Redelegations ({redelegationCount})
+                View Delegation Info
               </Button>
-            </Flex>
-          )}
-        </Flex>
+            ) : (
+              <Flex
+                w={{ base: "full", md: "auto" }}
+                justify={{ base: "center", md: "inherit" }}
+                mt={{ base: 6, md: 0 }}
+              >
+                <Button
+                  variant="ghost-gray"
+                  minW="fit-content"
+                  leftIcon={<CustomIcon name="history" />}
+                  rightIcon={<CustomIcon name="chevron-right" />}
+                  isDisabled={!redelegationCount}
+                  onClick={onClickToggle}
+                >
+                  See Active Redelegations ({redelegationCount})
+                </Button>
+              </Flex>
+            )}
+          </Flex>
+        </>
       )}
     </>
   );
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index acca90752..68418f8c8 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -1,13 +1,12 @@
 import { Flex, RadioGroup, Stack } from "@chakra-ui/react";
 import { useState } from "react";
 
+import { DelegationsTable, UnbondingsTable } from "../tables";
 import { useTrack } from "lib/amplitude";
 import type { Delegation, Unbonding } from "lib/pages/account-details/data";
 import type { Option, TokenWithValue } from "lib/types";
 
-import { DelegationsTab } from "./DelegationsTab";
 import { RadioCard } from "./RadioCard";
-import { UnbondingTab } from "./UnbondingTab";
 
 interface DelegationsBodyProps {
   totalDelegations: Option<Record<string, TokenWithValue>>;
@@ -59,14 +58,17 @@ export const DelegationsBody = ({
         </Stack>
       </RadioGroup>
       {value === "Delegated" ? (
-        <DelegationsTab
+        <DelegationsTable
           delegations={delegations}
           rewards={rewards}
           defaultToken={defaultToken}
           isLoading={isLoadingDelegations}
         />
       ) : (
-        <UnbondingTab unbondings={unbondings} isLoading={isLoadingUnbondings} />
+        <UnbondingsTable
+          unbondings={unbondings}
+          isLoading={isLoadingUnbondings}
+        />
       )}
     </Flex>
   );
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx b/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
deleted file mode 100644
index db9d1a8c1..000000000
--- a/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Box, Flex } from "@chakra-ui/react";
-
-import type { Delegation } from "../../data";
-import { MobileLabel } from "../mobile/MobileLabel";
-import { DelegationsTable } from "../tables";
-import { TokenCell } from "../tables/TokenCell";
-import { useMobile } from "lib/app-provider";
-import { Loading } from "lib/components/Loading";
-import { EmptyState } from "lib/components/state";
-import { TableTitle } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { Option, TokenWithValue } from "lib/types";
-
-interface DelegationsTabProps {
-  delegations: Option<Delegation[]>;
-  rewards: Option<Record<string, TokenWithValue[]>>;
-  defaultToken: TokenWithValue;
-  isLoading: boolean;
-}
-export const DelegationsTab = ({
-  delegations,
-  rewards,
-  defaultToken,
-  isLoading,
-}: DelegationsTabProps) => {
-  const isMobile = useMobile();
-  if (isLoading) return <Loading />;
-  if (!delegations?.length)
-    return (
-      <Box>
-        <TableTitle title="Delegated to" count={delegations?.length ?? 0} />
-        <EmptyState
-          my={0}
-          message="This account did not delegate their assets to any validators."
-          withBorder
-        />
-      </Box>
-    );
-
-  return (
-    <Flex w="full">
-      {isMobile ? (
-        <Flex direction="column" gap={4} w="full">
-          <TableTitle
-            title="Delegated to"
-            count={delegations?.length ?? 0}
-            mb={2}
-          />
-          {delegations.map((delegation) => (
-            <Flex
-              key={
-                delegation.validator.validatorAddress +
-                delegation.token.amount +
-                delegation.token.denom
-              }
-              borderRadius="8px"
-              background="gray.900"
-              p={3}
-              direction="column"
-              gap={3}
-              w="full"
-            >
-              <ValidatorBadge validator={delegation.validator} />
-              <Flex
-                direction="column"
-                gap={3}
-                borderTop="1px solid"
-                borderTopColor="gray.700"
-                pt={3}
-              >
-                <Flex direction="column" gap={1}>
-                  <MobileLabel label="Amount" />
-                  <TokenCell token={delegation.token} />
-                </Flex>
-                <Flex direction="column" gap={1}>
-                  <MobileLabel label="Reward" />
-                  <TokenCell
-                    token={
-                      rewards?.[delegation.validator.validatorAddress]?.find(
-                        (token) => token.denom === defaultToken.denom
-                      ) ?? defaultToken
-                    }
-                  />
-                </Flex>
-              </Flex>
-            </Flex>
-          ))}
-        </Flex>
-      ) : (
-        <DelegationsTable
-          delegations={delegations}
-          rewards={rewards}
-          defaultToken={defaultToken}
-          isLoading={isLoading}
-        />
-      )}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
index 2f5d473de..8cdada541 100644
--- a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
@@ -1,12 +1,9 @@
 import { Box, Text } from "@chakra-ui/react";
 
 import { NonRedelegatablesTable } from "../tables";
-import { useMobile } from "lib/app-provider";
 import type { Redelegation } from "lib/pages/account-details/data";
 import type { NonRedelegatable } from "lib/pages/account-details/type";
 
-import { NonRedelegatablesMobile } from "./NonRedelegatablesMobile";
-
 interface NonRedelegatableSectionProps {
   redelegations: Redelegation[];
 }
@@ -30,7 +27,7 @@ export const NonRedelegatableSection = ({
       });
     }, [])
     .reverse();
-  const isMobile = useMobile();
+
   return (
     <Box
       px={{ base: 3, md: 6 }}
@@ -48,11 +45,7 @@ export const NonRedelegatableSection = ({
         </span>
         until their active redelegations have completed.
       </Text>
-      {isMobile ? (
-        <NonRedelegatablesMobile nonRedelegatables={nonRedelegatables} />
-      ) : (
-        <NonRedelegatablesTable nonRedelegatables={nonRedelegatables} />
-      )}
+      <NonRedelegatablesTable nonRedelegatables={nonRedelegatables} />
     </Box>
   );
 };
diff --git a/src/lib/pages/account-details/components/delegations/NonRedelegatablesMobile.tsx b/src/lib/pages/account-details/components/delegations/NonRedelegatablesMobile.tsx
deleted file mode 100644
index 9ee20675e..000000000
--- a/src/lib/pages/account-details/components/delegations/NonRedelegatablesMobile.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Flex, Text } from "@chakra-ui/react";
-
-import { MobileLabel } from "../mobile/MobileLabel";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { NonRedelegatable } from "lib/pages/account-details/type";
-import { dateFromNow, formatUTC } from "lib/utils";
-
-interface NonRedelegatablesMobileProps {
-  nonRedelegatables: NonRedelegatable[];
-}
-
-export const NonRedelegatablesMobile = ({
-  nonRedelegatables,
-}: NonRedelegatablesMobileProps) => (
-  <Flex>
-    {nonRedelegatables.map((nonRedelegatable) => (
-      <Flex
-        direction="column"
-        gap={2}
-        w="full"
-        borderTop="1px solid"
-        borderTopColor="gray.700"
-        pt={3}
-        my={3}
-        key={`nonredelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
-      >
-        <MobileLabel label="Cannot Redelegate From" />
-        <ValidatorBadge
-          badgeSize={{ sm: 8, md: 6 }}
-          validator={nonRedelegatable.dstValidator}
-        />
-        <MobileLabel label="Cannot Redelegate Until" />
-        <Flex direction="column">
-          <Text variant="body2">
-            {formatUTC(nonRedelegatable.completionTime)}
-          </Text>
-          <Text variant="body3" color="text.disabled">
-            {`(${dateFromNow(nonRedelegatable.completionTime)})`}
-          </Text>
-        </Flex>
-      </Flex>
-    ))}
-  </Flex>
-);
diff --git a/src/lib/pages/account-details/components/delegations/RedelegationsMobile.tsx b/src/lib/pages/account-details/components/delegations/RedelegationsMobile.tsx
deleted file mode 100644
index 9b93c8230..000000000
--- a/src/lib/pages/account-details/components/delegations/RedelegationsMobile.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Flex, Grid, Text } from "@chakra-ui/react";
-
-import { MobileLabel } from "../mobile/MobileLabel";
-import { TokenCell } from "../tables/TokenCell";
-import { CustomIcon } from "lib/components/icon";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { Redelegation } from "lib/pages/account-details/data";
-import { dateFromNow, formatUTC } from "lib/utils";
-
-interface RedelegationsMobileProps {
-  redelegations: Redelegation[];
-}
-
-export const RedelegationsMobile = ({
-  redelegations,
-}: RedelegationsMobileProps) => {
-  return (
-    <Flex w="full">
-      {redelegations.map((redelegation) => (
-        <Flex
-          key={
-            redelegation.srcValidator.validatorAddress +
-            redelegation.dstValidator.validatorAddress +
-            redelegation.token.amount +
-            redelegation.token.denom +
-            redelegation.completionTime
-          }
-          background="gray.900"
-          borderRadius="8px"
-          p={3}
-          direction="column"
-          gap={3}
-          w="full"
-        >
-          <Grid
-            borderBottom="1px solid"
-            pb={3}
-            borderBottomColor="gray.700"
-            templateColumns="1fr 32px 1fr"
-            alignItems="center"
-          >
-            <Flex direction="column" gap={1}>
-              <MobileLabel label="From validator" />
-              <ValidatorBadge
-                maxWidth="100px"
-                badgeSize={{ sm: 8, md: 6 }}
-                validator={redelegation.srcValidator}
-              />
-            </Flex>
-            <CustomIcon name="arrow-right" boxSize={3} color="gray.600" />
-            <Flex direction="column" gap={1}>
-              <MobileLabel label="To validator" />
-              <ValidatorBadge
-                maxWidth="100px"
-                badgeSize={{ sm: 8, md: 6 }}
-                validator={redelegation.dstValidator}
-              />
-            </Flex>
-          </Grid>
-          <Flex direction="column" gap={1}>
-            <MobileLabel label="Amount" />
-            <TokenCell token={redelegation.token} />
-          </Flex>
-          <Flex direction="column" gap={1}>
-            <MobileLabel label="Completed by" />
-            <Flex direction="column">
-              <Text variant="body2">
-                {formatUTC(redelegation.completionTime)}
-              </Text>
-              <Text variant="body3" color="text.disabled">
-                {`(${dateFromNow(redelegation.completionTime)})`}
-              </Text>
-            </Flex>
-          </Flex>
-        </Flex>
-      ))}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx b/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
index ebc43d5da..9a653cd31 100644
--- a/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
@@ -2,7 +2,6 @@ import type { FlexProps } from "@chakra-ui/react";
 import { Button, Flex } from "@chakra-ui/react";
 
 import { RedelegationsTable } from "../tables";
-import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { TableTitle } from "lib/components/table";
@@ -12,7 +11,6 @@ import type {
 } from "lib/pages/account-details/data";
 
 import { NonRedelegatableSection } from "./NonRedelegatableSection";
-import { RedelegationsMobile } from "./RedelegationsMobile";
 
 interface RedelegationsSectionProps extends FlexProps {
   stakingParams: StakingParams;
@@ -27,42 +25,35 @@ export const RedelegationsSection = ({
   isLoading,
   onBack,
   ...props
-}: RedelegationsSectionProps) => {
-  const isMobile = useMobile();
-  return (
-    <Flex direction="column" gap={4} {...props}>
-      <Flex
-        gap={3}
-        alignItems={{ base: "start", md: "center" }}
-        direction={{ base: "column", md: "row" }}
+}: RedelegationsSectionProps) => (
+  <Flex direction="column" gap={4} {...props}>
+    <Flex
+      gap={3}
+      alignItems={{ base: "start", md: "center" }}
+      direction={{ base: "column", md: "row" }}
+    >
+      <Button
+        variant="ghost-secondary"
+        size={{ base: "xs", md: "md" }}
+        p={0}
+        onClick={onBack}
       >
-        <Button
-          variant="ghost-secondary"
-          size={{ base: "xs", md: "md" }}
-          p={0}
-          onClick={onBack}
-        >
-          <CustomIcon name="chevron-left" boxSize={6} />
-        </Button>
-        <TableTitle
-          title="Active Redelegations"
-          count={redelegations.length}
-          helperText={`Each wallet can redelegate up to ${stakingParams.maxEntries} entries between same pair of validators within last ${stakingParams.unbondingTime} timeframe`}
-          mb={0}
-        />
-      </Flex>
-      {isLoading ? (
-        <Loading withBorder />
-      ) : (
-        <>
-          <NonRedelegatableSection redelegations={redelegations} />
-          {isMobile ? (
-            <RedelegationsMobile redelegations={redelegations} />
-          ) : (
-            <RedelegationsTable redelegations={redelegations} />
-          )}
-        </>
-      )}
+        <CustomIcon name="chevron-left" boxSize={6} />
+      </Button>
+      <TableTitle
+        title="Active Redelegations"
+        count={redelegations.length}
+        helperText={`Each wallet can redelegate up to ${stakingParams.maxEntries} entries between same pair of validators within last ${stakingParams.unbondingTime} timeframe`}
+        mb={0}
+      />
     </Flex>
-  );
-};
+    {isLoading ? (
+      <Loading withBorder />
+    ) : (
+      <>
+        <NonRedelegatableSection redelegations={redelegations} />
+        <RedelegationsTable redelegations={redelegations} />
+      </>
+    )}
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/delegations/UnbondingTab.tsx b/src/lib/pages/account-details/components/delegations/UnbondingTab.tsx
deleted file mode 100644
index fa55daba9..000000000
--- a/src/lib/pages/account-details/components/delegations/UnbondingTab.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
-
-import type { Unbonding } from "../../data";
-import { MobileLabel } from "../mobile/MobileLabel";
-import { UnbondingsTable } from "../tables";
-import { TokenCell } from "../tables/TokenCell";
-import { useMobile } from "lib/app-provider";
-import { Loading } from "lib/components/Loading";
-import { EmptyState } from "lib/components/state";
-import { TableTitle } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { Option } from "lib/types";
-import { dateFromNow, formatUTC } from "lib/utils";
-
-interface UnbondingTabProps {
-  unbondings: Option<Unbonding[]>;
-  isLoading: boolean;
-}
-export const UnbondingTab = ({
-  unbondings,
-
-  isLoading,
-}: UnbondingTabProps) => {
-  const isMobile = useMobile();
-  if (isLoading) return <Loading />;
-  if (!unbondings?.length)
-    return (
-      <Box>
-        <TableTitle title="Unbonding" count={unbondings?.length ?? 0} />
-        <EmptyState
-          my={0}
-          message="This account does not have any assets that is currently unbonding."
-          withBorder
-        />
-      </Box>
-    );
-
-  return (
-    <Flex w="full">
-      {isMobile ? (
-        <Flex direction="column" gap={4} w="full">
-          <TableTitle
-            title="Unbonding"
-            count={unbondings?.length ?? 0}
-            mb={2}
-          />
-          {unbondings.map((item) => (
-            <Flex
-              key={
-                item.validator.validatorAddress +
-                item.token.amount +
-                item.token.denom
-              }
-              borderRadius="8px"
-              background="gray.900"
-              p={3}
-              direction="column"
-              gap={3}
-              w="full"
-            >
-              <ValidatorBadge validator={item.validator} />
-              <Flex
-                direction="column"
-                gap={3}
-                borderTop="1px solid"
-                borderTopColor="gray.700"
-                pt={3}
-              >
-                <Flex direction="column" gap={1}>
-                  <MobileLabel label="Amount" />
-                  <TokenCell token={item.token} />
-                </Flex>
-                {item.completionTime && (
-                  <Flex direction="column">
-                    <MobileLabel label="Unbond Completed By" />
-                    <Text variant="body2" color="text.dark" mt={1}>
-                      {formatUTC(item.completionTime)}
-                    </Text>
-                    <Text variant="body3" color="text.disabled">
-                      {`(${dateFromNow(item.completionTime)})`}
-                    </Text>
-                  </Flex>
-                )}
-              </Flex>
-            </Flex>
-          ))}
-        </Flex>
-      ) : (
-        <UnbondingsTable unbondings={unbondings} isLoading={isLoading} />
-      )}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index a12187c78..f73f3e174 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -85,15 +85,6 @@ export const DelegationsSection = ({
 
   const redelegationCount = redelegations?.length ?? 0;
 
-  const TotalBondedCard = (
-    <TotalCard
-      title="Total Bonded"
-      message={`Total delegated and unbonding ${bondDenomLabel}, including those delegated through vesting`}
-      token={totalBondedBondDenom}
-      isLoading={isLoadingTotalBonded}
-    />
-  );
-
   return (
     <Flex
       mt={{ base: 4, md: 8 }}
@@ -112,10 +103,16 @@ export const DelegationsSection = ({
         transition="all 0.25s"
       >
         <DelegationInfo
-          TotalBondedCard={TotalBondedCard}
-          infoCards={
+          totalBondedCard={
+            <TotalCard
+              title="Total Bonded"
+              message={`Total delegated and unbonding ${bondDenomLabel}, including those delegated through vesting`}
+              token={totalBondedBondDenom}
+              isLoading={isLoadingTotalBonded}
+            />
+          }
+          otherInfoCards={
             <>
-              {TotalBondedCard}
               <TotalCard
                 title="Reward"
                 message={`Total rewards earned from delegated ${bondDenomLabel} across all validators`}
@@ -132,12 +129,12 @@ export const DelegationsSection = ({
               )}
             </>
           }
-          onViewMore={onViewMore}
           redelegationCount={redelegationCount}
           onClickToggle={() => {
             track(AmpEvent.USE_SEE_REDELEGATIONS);
             onToggle();
           }}
+          onViewMore={onViewMore}
         />
         {!onViewMore && (
           <DelegationsBody
diff --git a/src/lib/pages/account-details/components/mobile/MobileDelegationTitle.tsx b/src/lib/pages/account-details/components/mobile/MobileDelegationTitle.tsx
deleted file mode 100644
index 4eb8026a5..000000000
--- a/src/lib/pages/account-details/components/mobile/MobileDelegationTitle.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Flex, Heading } from "@chakra-ui/react";
-
-import { CustomIcon } from "lib/components/icon";
-
-export const MobileDelegationTitle = ({
-  onViewMore,
-  children,
-}: {
-  onViewMore: () => void;
-  children: JSX.Element;
-}) => {
-  return (
-    <Flex
-      justify="space-between"
-      w="full"
-      bg="gray.900"
-      borderRadius="8px"
-      p={4}
-      onClick={onViewMore}
-    >
-      <Flex direction="column" gap={2}>
-        <Heading variant="h6" as="h6">
-          Delegations
-        </Heading>
-        {children}
-      </Flex>
-      <CustomIcon name="chevron-right" color="gray.600" />
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
index aee28caf7..002615d7b 100644
--- a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
@@ -2,17 +2,19 @@ import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
-import { MobileTitle } from "../mobile/MobileTitle";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { TableTitle, ViewMore } from "lib/components/table";
+import {
+  ContractsTable,
+  MobileTitle,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
 import { useAccountAdminContracts } from "lib/pages/account-details/data";
 import type { ContractAddr, HumanAddr, Option } from "lib/types";
 
-import { ContractsBody } from "./ContractsBody";
-
 interface AdminContractsTableProps {
   walletAddress: HumanAddr;
   scrollComponentId: string;
@@ -21,31 +23,6 @@ interface AdminContractsTableProps {
   onViewMore?: () => void;
 }
 
-const AdminTitle = ({
-  onViewMore,
-  totalData,
-}: {
-  onViewMore: AdminContractsTableProps["onViewMore"];
-  totalData: Option<number>;
-}) => {
-  const isMobile = useMobile();
-  if (isMobile && onViewMore)
-    return (
-      <MobileTitle
-        title="Contract Admins"
-        count={totalData ?? 0}
-        onViewMore={onViewMore}
-      />
-    );
-  return (
-    <TableTitle
-      title="Contract Admins"
-      count={totalData ?? 0}
-      helperText="This account is the admin for following contracts"
-      mb={2}
-    />
-  );
-};
 export const AdminContractsTable = ({
   walletAddress,
   scrollComponentId,
@@ -53,6 +30,7 @@ export const AdminContractsTable = ({
   refetchCount,
   onViewMore,
 }: AdminContractsTableProps) => {
+  const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const onRowSelect = (contract: ContractAddr) =>
     navigate({
@@ -92,35 +70,42 @@ export const AdminContractsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-  const isMobile = useMobile();
-  let isMobileDetail = null;
-  if (isMobile && onViewMore) {
-    isMobileDetail = false;
-  } else {
-    isMobileDetail = true;
-  }
+
+  const isMobileOverview = isMobile && !!onViewMore;
   return (
     <Box mt={{ base: 4, md: 8 }}>
-      <AdminTitle totalData={totalData} onViewMore={onViewMore} />
-      {isMobileDetail && (
-        <ContractsBody
-          contracts={contracts}
-          isLoading={isLoading}
-          emptyState={
-            <EmptyState
-              message={
-                !contracts ? (
-                  <ErrorFetching />
-                ) : (
-                  "This account does not have any admin access for any contracts."
-                )
-              }
-              withBorder
-            />
-          }
-          onRowSelect={onRowSelect}
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Contract Admins"
+          count={totalData ?? 0}
           onViewMore={onViewMore}
         />
+      ) : (
+        <>
+          <TableTitle
+            title="Contract Admins"
+            count={totalData ?? 0}
+            helperText="This account is the admin for following contracts"
+            mb={2}
+          />
+          <ContractsTable
+            contracts={contracts}
+            isLoading={isLoading}
+            emptyState={
+              <EmptyState
+                message={
+                  !contracts ? (
+                    <ErrorFetching />
+                  ) : (
+                    "This account does not have any admin access for any contracts."
+                  )
+                }
+                withBorder
+              />
+            }
+            onRowSelect={onRowSelect}
+          />
+        </>
       )}
       {!!totalData &&
         (onViewMore
diff --git a/src/lib/pages/account-details/components/tables/ContractsBody.tsx b/src/lib/pages/account-details/components/tables/ContractsBody.tsx
deleted file mode 100644
index 2dd3c67bc..000000000
--- a/src/lib/pages/account-details/components/tables/ContractsBody.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Flex } from "@chakra-ui/react";
-
-import { useMobile } from "lib/app-provider";
-import { InstantiatedContractCard } from "lib/components/card/ContractCard";
-import { Loading } from "lib/components/Loading";
-import { ContractsTable } from "lib/components/table";
-import type { ContractAddr, Option, ContractInfo } from "lib/types";
-
-interface ContractsBodyProps {
-  contracts: Option<ContractInfo[]>;
-  isLoading: boolean;
-  emptyState: JSX.Element;
-  onRowSelect: (contract: ContractAddr) => void;
-  onViewMore?: () => void;
-}
-
-export const ContractsBody = ({
-  contracts,
-  isLoading,
-  emptyState,
-  onRowSelect,
-  onViewMore,
-}: ContractsBodyProps) => {
-  const isMobile = useMobile();
-  if (isLoading) return <Loading />;
-  if (!contracts?.length) return emptyState;
-  if (isMobile && !onViewMore)
-    return (
-      <Flex direction="column" gap={4} w="full" mt={4}>
-        {contracts.map((contractInfo) => (
-          <InstantiatedContractCard
-            contractInfo={contractInfo}
-            key={
-              contractInfo.name +
-              contractInfo.contractAddress +
-              contractInfo.description +
-              contractInfo.tags +
-              contractInfo.lists
-            }
-          />
-        ))}
-      </Flex>
-    );
-  if (isMobile && onViewMore) return null;
-  return (
-    <ContractsTable
-      contracts={contracts}
-      isLoading={isLoading}
-      emptyState={emptyState}
-      onRowSelect={onRowSelect}
-    />
-  );
-};
diff --git a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
index 7e2581906..c0ddc3cb7 100644
--- a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
@@ -2,17 +2,19 @@ import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
-import { MobileTitle } from "../mobile/MobileTitle";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { TableTitle, ViewMore } from "lib/components/table";
+import {
+  ContractsTable,
+  MobileTitle,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
 import { useAccountContracts } from "lib/pages/account-details/data";
 import type { ContractAddr, HumanAddr, Option } from "lib/types";
 
-import { ContractsBody } from "./ContractsBody";
-
 interface InstantiatedContractsTableProps {
   walletAddress: HumanAddr;
   scrollComponentId: string;
@@ -21,31 +23,6 @@ interface InstantiatedContractsTableProps {
   onViewMore?: () => void;
 }
 
-const ContractTitle = ({
-  onViewMore,
-  totalData,
-}: {
-  onViewMore: InstantiatedContractsTableProps["onViewMore"];
-  totalData: Option<number>;
-}) => {
-  const isMobile = useMobile();
-  if (isMobile && onViewMore)
-    return (
-      <MobileTitle
-        title="Contract Instances"
-        count={totalData ?? 0}
-        onViewMore={onViewMore}
-      />
-    );
-  return (
-    <TableTitle
-      title="Contract Instances"
-      count={totalData ?? 0}
-      helperText="This account instantiated the following contracts"
-      mb={2}
-    />
-  );
-};
 export const InstantiatedContractsTable = ({
   walletAddress,
   scrollComponentId,
@@ -53,6 +30,7 @@ export const InstantiatedContractsTable = ({
   refetchCount,
   onViewMore,
 }: InstantiatedContractsTableProps) => {
+  const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const onRowSelect = (contract: ContractAddr) =>
     navigate({
@@ -92,35 +70,42 @@ export const InstantiatedContractsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-  const isMobile = useMobile();
-  let isMobileDetail = null;
-  if (isMobile && onViewMore) {
-    isMobileDetail = false;
-  } else {
-    isMobileDetail = true;
-  }
+
+  const isMobileOverview = isMobile && !!onViewMore;
   return (
     <Box mt={{ base: 4, md: 8 }}>
-      <ContractTitle totalData={totalData} onViewMore={onViewMore} />
-      {isMobileDetail && (
-        <ContractsBody
-          contracts={contracts}
-          isLoading={isLoading}
-          emptyState={
-            <EmptyState
-              message={
-                !contracts ? (
-                  <ErrorFetching />
-                ) : (
-                  "This account did not instantiate any contracts before."
-                )
-              }
-              withBorder
-            />
-          }
-          onRowSelect={onRowSelect}
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Contract Instances"
+          count={totalData ?? 0}
           onViewMore={onViewMore}
         />
+      ) : (
+        <>
+          <TableTitle
+            title="Contract Instances"
+            count={totalData ?? 0}
+            helperText="This account instantiated the following contracts"
+            mb={2}
+          />
+          <ContractsTable
+            contracts={contracts}
+            isLoading={isLoading}
+            emptyState={
+              <EmptyState
+                message={
+                  !contracts ? (
+                    <ErrorFetching />
+                  ) : (
+                    "This account did not instantiate any contracts before."
+                  )
+                }
+                withBorder
+              />
+            }
+            onRowSelect={onRowSelect}
+          />
+        </>
       )}
       {!!totalData &&
         (onViewMore
diff --git a/src/lib/pages/account-details/components/tables/proposals/OpenedProposalsTable.tsx b/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx
similarity index 61%
rename from src/lib/pages/account-details/components/tables/proposals/OpenedProposalsTable.tsx
rename to src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx
index 8e639fdf4..be2edcf1b 100644
--- a/src/lib/pages/account-details/components/tables/proposals/OpenedProposalsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx
@@ -1,18 +1,20 @@
 import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { ErrorFetching } from "../../ErrorFetching";
-import { MobileTitle } from "../../mobile/MobileTitle";
+import { ErrorFetching } from "../ErrorFetching";
 import { useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { TableTitle, ViewMore } from "lib/components/table";
+import {
+  MobileTitle,
+  ProposalsTable,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
 import { useProposalsByWalletAddressPagination } from "lib/services/proposalService";
 import type { HumanAddr, Option } from "lib/types";
 
-import { OpenedProposalsBody } from "./OpenProposalsBody";
-
 interface OpenedProposalsTableProps {
   walletAddress: HumanAddr;
   scrollComponentId: string;
@@ -21,30 +23,6 @@ interface OpenedProposalsTableProps {
   onViewMore?: () => void;
 }
 
-const ProposalTitle = ({
-  onViewMore,
-  totalData,
-}: {
-  onViewMore: OpenedProposalsTableProps["onViewMore"];
-  totalData: Option<number>;
-}) => {
-  const isMobile = useMobile();
-  if (isMobile && onViewMore)
-    return (
-      <MobileTitle
-        title="Opened Proposals"
-        count={totalData ?? 0}
-        onViewMore={onViewMore}
-      />
-    );
-  return (
-    <TableTitle
-      title="Opened Proposals"
-      count={totalData ?? 0}
-      mb={{ base: 0, md: 2 }}
-    />
-  );
-};
 export const OpenedProposalsTable = ({
   walletAddress,
   scrollComponentId,
@@ -52,6 +30,8 @@ export const OpenedProposalsTable = ({
   refetchCount,
   onViewMore,
 }: OpenedProposalsTableProps) => {
+  const isMobile = useMobile();
+
   const {
     pagesQuantity,
     currentPage,
@@ -84,34 +64,41 @@ export const OpenedProposalsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-  const isMobile = useMobile();
-  let isMobileDetail = null;
-  if (isMobile && onViewMore) {
-    isMobileDetail = false;
-  } else {
-    isMobileDetail = true;
-  }
+
+  const isMobileOverview = isMobile && !!onViewMore;
   return (
     <Box mt={{ base: 4, md: 8 }}>
-      <ProposalTitle totalData={totalData} onViewMore={onViewMore} />
-      {isMobileDetail && (
-        <OpenedProposalsBody
-          proposals={proposals}
-          isLoading={isLoading}
-          emptyState={
-            <EmptyState
-              message={
-                !proposals ? (
-                  <ErrorFetching />
-                ) : (
-                  "This account did not open any proposals before."
-                )
-              }
-              withBorder
-            />
-          }
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Opened Proposals"
+          count={totalData ?? 0}
           onViewMore={onViewMore}
         />
+      ) : (
+        <>
+          {" "}
+          <TableTitle
+            title="Opened Proposals"
+            count={totalData ?? 0}
+            mb={{ base: 0, md: 2 }}
+          />
+          <ProposalsTable
+            proposals={proposals}
+            isLoading={isLoading}
+            emptyState={
+              <EmptyState
+                message={
+                  !proposals ? (
+                    <ErrorFetching />
+                  ) : (
+                    "This account did not open any proposals before."
+                  )
+                }
+                withBorder
+              />
+            }
+          />
+        </>
       )}
       {!!totalData &&
         (onViewMore
diff --git a/src/lib/pages/account-details/components/tables/codes/StoredCodesTable.tsx b/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx
similarity index 62%
rename from src/lib/pages/account-details/components/tables/codes/StoredCodesTable.tsx
rename to src/lib/pages/account-details/components/tables/StoredCodesTable.tsx
index b68643385..ec5383e42 100644
--- a/src/lib/pages/account-details/components/tables/codes/StoredCodesTable.tsx
+++ b/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx
@@ -1,18 +1,20 @@
 import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { ErrorFetching } from "../../ErrorFetching";
-import { MobileTitle } from "../../mobile/MobileTitle";
+import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { TableTitle, ViewMore } from "lib/components/table";
+import {
+  CodesTable,
+  MobileTitle,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
 import { useAccountCodes } from "lib/pages/account-details/data";
 import type { HumanAddr, Option } from "lib/types";
 
-import { StoredCodesBody } from "./StoredCodesBody";
-
 interface StoredCodesTableProps {
   walletAddress: HumanAddr;
   scrollComponentId: string;
@@ -21,31 +23,6 @@ interface StoredCodesTableProps {
   onViewMore?: () => void;
 }
 
-const CodeTitle = ({
-  onViewMore,
-  totalData,
-}: {
-  onViewMore: StoredCodesTableProps["onViewMore"];
-  totalData: Option<number>;
-}) => {
-  const isMobile = useMobile();
-  if (isMobile && onViewMore)
-    return (
-      <MobileTitle
-        title="Stored Codes"
-        count={totalData ?? 0}
-        onViewMore={onViewMore}
-      />
-    );
-  return (
-    <TableTitle
-      title="Stored Codes"
-      count={totalData ?? 0}
-      mb={2}
-      helperText="This account stored the following codes"
-    />
-  );
-};
 export const StoredCodesTable = ({
   walletAddress,
   scrollComponentId,
@@ -53,6 +30,7 @@ export const StoredCodesTable = ({
   refetchCount,
   onViewMore,
 }: StoredCodesTableProps) => {
+  const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
     navigate({
@@ -92,35 +70,42 @@ export const StoredCodesTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-  const isMobile = useMobile();
-  let isMobileDetail = null;
-  if (isMobile && onViewMore) {
-    isMobileDetail = false;
-  } else {
-    isMobileDetail = true;
-  }
+
+  const isMobileOverview = isMobile && !!onViewMore;
   return (
     <Box mt={{ base: 4, md: 8 }}>
-      <CodeTitle onViewMore={onViewMore} totalData={totalData} />
-      {isMobileDetail && (
-        <StoredCodesBody
-          codes={codes}
-          isLoading={isLoading}
-          emptyState={
-            <EmptyState
-              message={
-                !codes ? (
-                  <ErrorFetching />
-                ) : (
-                  "This account did not stored any codes before."
-                )
-              }
-              withBorder
-            />
-          }
-          onRowSelect={onRowSelect}
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Stored Codes"
+          count={totalData ?? 0}
           onViewMore={onViewMore}
         />
+      ) : (
+        <>
+          <TableTitle
+            title="Stored Codes"
+            count={totalData ?? 0}
+            mb={2}
+            helperText="This account stored the following codes"
+          />
+          <CodesTable
+            codes={codes}
+            isLoading={isLoading}
+            emptyState={
+              <EmptyState
+                message={
+                  !codes ? (
+                    <ErrorFetching />
+                  ) : (
+                    "This account did not stored any codes before."
+                  )
+                }
+                withBorder
+              />
+            }
+            onRowSelect={onRowSelect}
+          />
+        </>
       )}
       {!!totalData &&
         (onViewMore
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx
new file mode 100644
index 000000000..c48bc7eb9
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx
@@ -0,0 +1,57 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { TokenCell } from "../TokenCell";
+import { MobileLabel } from "lib/components/table";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import type { BondedInfo } from "./BondedTableRow";
+
+interface BondedTableMobileCardProps {
+  bondedInfo: BondedInfo;
+}
+
+export const BondedTableMobileCard = ({
+  bondedInfo,
+}: BondedTableMobileCardProps) => (
+  <Flex
+    borderRadius="8px"
+    background="gray.900"
+    p={3}
+    direction="column"
+    gap={3}
+    w="full"
+  >
+    <ValidatorBadge validator={bondedInfo.validator} />
+    <Flex
+      direction="column"
+      gap={3}
+      borderTop="1px solid"
+      borderTopColor="gray.700"
+      pt={3}
+    >
+      <Flex direction="column" gap={1}>
+        <MobileLabel label="Amount" />
+        <TokenCell token={bondedInfo.amount} />
+      </Flex>
+
+      {bondedInfo.reward && (
+        <Flex direction="column" gap={1}>
+          <MobileLabel label="Reward" />
+          <TokenCell token={bondedInfo.reward} />
+        </Flex>
+      )}
+      {bondedInfo.completionTime && (
+        <Flex direction="column">
+          <MobileLabel label="Unbond Completed By" />
+          <Text variant="body2" color="text.dark" mt={1}>
+            {formatUTC(bondedInfo.completionTime)}
+          </Text>
+          <Text variant="body3" color="text.disabled">
+            {`(${dateFromNow(bondedInfo.completionTime)})`}
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
index bdda70446..e425b154e 100644
--- a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
@@ -1,14 +1,16 @@
-import { Box, Flex, TableContainer } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
+import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
-import { TableTitle } from "lib/components/table";
+import { TableContainer, TableTitle } from "lib/components/table";
 import type { Delegation } from "lib/pages/account-details/data";
 import type { Option, TokenWithValue } from "lib/types";
 
 import { BondedTableHeader } from "./BondedTableHeader";
+import { BondedTableMobileCard } from "./BondedTableMobileCard";
 import { BondedTableRow } from "./BondedTableRow";
-import { TEMPLATE_COLUMNS } from "./constant";
+import { TEMPLATE_COLUMNS } from "./constants";
 
 interface DelegationsTableProps {
   delegations: Option<Delegation[]>;
@@ -23,24 +25,39 @@ const DelegationsTableBody = ({
   defaultToken,
   isLoading,
 }: DelegationsTableProps) => {
+  const isMobile = useMobile();
+
   if (isLoading) return <Loading withBorder />;
   if (!delegations?.length)
     return (
-      <Flex>
-        <TableTitle
-          title="Delegated to"
-          count={delegations?.length ?? 0}
-          mb={2}
-        />
-        <EmptyState
-          message="This account did not delegate their assets to any validators."
-          withBorder
-        />
-      </Flex>
+      <EmptyState
+        message="This account did not delegate their assets to any validators."
+        withBorder
+      />
     );
 
-  return (
-    <TableContainer width="100%">
+  return isMobile ? (
+    <Flex direction="column" gap={4} w="full">
+      {delegations.map((delegation) => (
+        <BondedTableMobileCard
+          key={
+            delegation.validator.validatorAddress +
+            delegation.token.amount +
+            delegation.token.denom
+          }
+          bondedInfo={{
+            validator: delegation.validator,
+            amount: delegation.token,
+            reward:
+              rewards?.[delegation.validator.validatorAddress]?.find(
+                (token) => token.denom === defaultToken.denom
+              ) ?? defaultToken,
+          }}
+        />
+      ))}
+    </Flex>
+  ) : (
+    <TableContainer>
       <BondedTableHeader templateColumns={TEMPLATE_COLUMNS} isDelegation />
       {delegations.map((delegation) => (
         <BondedTableRow
diff --git a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
index e9ebfc8cd..a9548dff6 100644
--- a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
@@ -1,14 +1,16 @@
-import { Box, TableContainer } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
+import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
-import { TableTitle } from "lib/components/table";
+import { TableContainer, TableTitle } from "lib/components/table";
 import type { Unbonding } from "lib/pages/account-details/data";
 import type { Option } from "lib/types";
 
 import { BondedTableHeader } from "./BondedTableHeader";
+import { BondedTableMobileCard } from "./BondedTableMobileCard";
 import { BondedTableRow } from "./BondedTableRow";
-import { TEMPLATE_COLUMNS } from "./constant";
+import { TEMPLATE_COLUMNS } from "./constants";
 
 interface UnbondingsTableProps {
   unbondings: Option<Unbonding[]>;
@@ -19,6 +21,8 @@ const UnbondingsTableBody = ({
   unbondings,
   isLoading,
 }: UnbondingsTableProps) => {
+  const isMobile = useMobile();
+
   if (isLoading) return <Loading withBorder />;
   if (!unbondings?.length)
     return (
@@ -28,8 +32,26 @@ const UnbondingsTableBody = ({
       />
     );
 
-  return (
-    <TableContainer width="100%">
+  return isMobile ? (
+    <Flex direction="column" gap={4} w="full">
+      {unbondings.map((unbonding) => (
+        <BondedTableMobileCard
+          key={
+            unbonding.validator.validatorAddress +
+            unbonding.token.amount +
+            unbonding.token.denom +
+            unbonding.completionTime
+          }
+          bondedInfo={{
+            validator: unbonding.validator,
+            amount: unbonding.token,
+            completionTime: unbonding.completionTime,
+          }}
+        />
+      ))}
+    </Flex>
+  ) : (
+    <TableContainer>
       <BondedTableHeader
         templateColumns={TEMPLATE_COLUMNS}
         isDelegation={false}
diff --git a/src/lib/pages/account-details/components/tables/bonded/constant.ts b/src/lib/pages/account-details/components/tables/bonded/constants.ts
similarity index 100%
rename from src/lib/pages/account-details/components/tables/bonded/constant.ts
rename to src/lib/pages/account-details/components/tables/bonded/constants.ts
diff --git a/src/lib/pages/account-details/components/tables/bonded/types.ts b/src/lib/pages/account-details/components/tables/bonded/types.ts
new file mode 100644
index 000000000..3c2d6a05e
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/bonded/types.ts
@@ -0,0 +1,8 @@
+import type { TokenWithValue, ValidatorInfo } from "lib/types";
+
+export interface BondedInfo {
+  validator: ValidatorInfo;
+  amount: TokenWithValue;
+  reward?: TokenWithValue;
+  completionTime?: Date;
+}
diff --git a/src/lib/pages/account-details/components/tables/codes/StoredCodesBody.tsx b/src/lib/pages/account-details/components/tables/codes/StoredCodesBody.tsx
deleted file mode 100644
index f74f970ea..000000000
--- a/src/lib/pages/account-details/components/tables/codes/StoredCodesBody.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Flex } from "@chakra-ui/react";
-
-import { useMobile } from "lib/app-provider";
-import { StoredCodeCard } from "lib/components/card/StoredCodeCard";
-import { Loading } from "lib/components/Loading";
-import { EmptyState } from "lib/components/state";
-import { CodesTable } from "lib/components/table";
-import type { CodeInfo, Option } from "lib/types";
-
-interface StoredCodesBodyProps {
-  codes: Option<CodeInfo[]>;
-  isLoading: boolean;
-  emptyState: JSX.Element;
-  onRowSelect: (codeId: number) => void;
-  onViewMore?: () => void;
-}
-
-export const StoredCodesBody = ({
-  codes,
-  isLoading,
-  emptyState,
-  onRowSelect,
-  onViewMore,
-}: StoredCodesBodyProps) => {
-  const isMobile = useMobile();
-  if (isLoading) return <Loading />;
-  if (!codes?.length) return emptyState;
-  if (isMobile && !onViewMore)
-    return (
-      <Flex direction="column" gap={4} w="full" mt={4}>
-        {codes.map((code) => (
-          <StoredCodeCard
-            key={code.id + code.uploader + code.name}
-            codeInfo={code}
-          />
-        ))}
-      </Flex>
-    );
-  if (isMobile && onViewMore) return null;
-  return (
-    <CodesTable
-      codes={codes}
-      isLoading={isLoading}
-      emptyState={<EmptyState message={emptyState} withBorder />}
-      onRowSelect={onRowSelect}
-    />
-  );
-};
diff --git a/src/lib/pages/account-details/components/tables/codes/index.ts b/src/lib/pages/account-details/components/tables/codes/index.ts
deleted file mode 100644
index 6367725dd..000000000
--- a/src/lib/pages/account-details/components/tables/codes/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./StoredCodesBody";
-export * from "./StoredCodesTable";
diff --git a/src/lib/pages/account-details/components/tables/index.ts b/src/lib/pages/account-details/components/tables/index.ts
index 00478cd5a..dfec3a4fb 100644
--- a/src/lib/pages/account-details/components/tables/index.ts
+++ b/src/lib/pages/account-details/components/tables/index.ts
@@ -2,8 +2,7 @@ export * from "./redelegation";
 export * from "./nonRedelegatable";
 export * from "./bonded";
 export * from "./txs";
-export * from "./codes";
-export * from "./InstantiatedContractsTable";
-export * from "./ContractsBody";
 export * from "./AdminContractsTable";
-export * from "./proposals";
+export * from "./InstantiatedContractsTable";
+export * from "./OpenedProposalsTable";
+export * from "./StoredCodesTable";
diff --git a/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableMobileCard.tsx
new file mode 100644
index 000000000..6ac129fd7
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableMobileCard.tsx
@@ -0,0 +1,37 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { MobileLabel } from "lib/components/table";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { NonRedelegatable } from "lib/pages/account-details/type";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+interface NonRedelegatablesTableMobileCardProps {
+  nonRedelegatable: NonRedelegatable;
+}
+
+export const NonRedelegatablesTableMobileCard = ({
+  nonRedelegatable,
+}: NonRedelegatablesTableMobileCardProps) => (
+  <Flex
+    direction="column"
+    gap={2}
+    w="full"
+    borderTop="1px solid"
+    borderTopColor="gray.700"
+    pt={3}
+    my={3}
+  >
+    <MobileLabel label="Cannot Redelegate From" />
+    <ValidatorBadge
+      badgeSize={{ sm: 8, md: 6 }}
+      validator={nonRedelegatable.dstValidator}
+    />
+    <MobileLabel label="Cannot Redelegate Until" />
+    <Flex direction="column">
+      <Text variant="body2">{formatUTC(nonRedelegatable.completionTime)}</Text>
+      <Text variant="body3" color="text.disabled">
+        {`(${dateFromNow(nonRedelegatable.completionTime)})`}
+      </Text>
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/tables/nonRedelegatable/index.tsx b/src/lib/pages/account-details/components/tables/nonRedelegatable/index.tsx
index b55293471..d16d208bc 100644
--- a/src/lib/pages/account-details/components/tables/nonRedelegatable/index.tsx
+++ b/src/lib/pages/account-details/components/tables/nonRedelegatable/index.tsx
@@ -1,8 +1,10 @@
-import { TableContainer } from "@chakra-ui/react";
+import { Flex, TableContainer } from "@chakra-ui/react";
 
+import { useMobile } from "lib/app-provider";
 import type { NonRedelegatable } from "lib/pages/account-details/type";
 
 import { NonRedelegatableTableHeader } from "./NonRedelegatableTableHeader";
+import { NonRedelegatablesTableMobileCard } from "./NonRedelegatableTableMobileCard";
 import { NonRedelegatableTableRow } from "./NonRedelegatableTableRow";
 
 const TEMPLATE_COLUMNS = "minmax(300px, 1fr) 2fr";
@@ -13,15 +15,27 @@ interface NonRedelegatablesTableProps {
 
 export const NonRedelegatablesTable = ({
   nonRedelegatables,
-}: NonRedelegatablesTableProps) => (
-  <TableContainer>
-    <NonRedelegatableTableHeader templateColumns={TEMPLATE_COLUMNS} />
-    {nonRedelegatables.map((nonRedelegatable) => (
-      <NonRedelegatableTableRow
-        key={`nonredelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
-        nonRedelegatable={nonRedelegatable}
-        templateColumns={TEMPLATE_COLUMNS}
-      />
-    ))}
-  </TableContainer>
-);
+}: NonRedelegatablesTableProps) => {
+  const isMobile = useMobile();
+  return isMobile ? (
+    <Flex>
+      {nonRedelegatables.map((nonRedelegatable) => (
+        <NonRedelegatablesTableMobileCard
+          key={`nonredelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
+          nonRedelegatable={nonRedelegatable}
+        />
+      ))}
+    </Flex>
+  ) : (
+    <TableContainer>
+      <NonRedelegatableTableHeader templateColumns={TEMPLATE_COLUMNS} />
+      {nonRedelegatables.map((nonRedelegatable) => (
+        <NonRedelegatableTableRow
+          key={`nonredelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
+          nonRedelegatable={nonRedelegatable}
+          templateColumns={TEMPLATE_COLUMNS}
+        />
+      ))}
+    </TableContainer>
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/proposals/OpenProposalsBody.tsx b/src/lib/pages/account-details/components/tables/proposals/OpenProposalsBody.tsx
deleted file mode 100644
index ab3cdfbdc..000000000
--- a/src/lib/pages/account-details/components/tables/proposals/OpenProposalsBody.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Flex } from "@chakra-ui/react";
-
-import { useMobile } from "lib/app-provider";
-import { ProposalCard } from "lib/components/card/ProposalCard";
-import { Loading } from "lib/components/Loading";
-import { ProposalsTable } from "lib/components/table";
-import type { Option, Proposal } from "lib/types";
-
-interface OpenedProposalsBodyProps {
-  proposals: Option<Proposal[]>;
-  isLoading: boolean;
-  emptyState: JSX.Element;
-  onViewMore?: () => void;
-}
-
-export const OpenedProposalsBody = ({
-  proposals,
-  isLoading,
-  emptyState,
-  onViewMore,
-}: OpenedProposalsBodyProps) => {
-  const isMobile = useMobile();
-  if (isLoading) return <Loading />;
-  if (!proposals?.length) return emptyState;
-  if (isMobile && !onViewMore)
-    return (
-      <Flex direction="column" gap={4} w="full" mt={4}>
-        {proposals.map((proposal) => (
-          <ProposalCard key={proposal.proposalId} proposal={proposal} />
-        ))}
-      </Flex>
-    );
-  if (isMobile && onViewMore) return null;
-  return (
-    <ProposalsTable
-      proposals={proposals}
-      isLoading={isLoading}
-      emptyState={emptyState}
-    />
-  );
-};
diff --git a/src/lib/pages/account-details/components/tables/proposals/index.ts b/src/lib/pages/account-details/components/tables/proposals/index.ts
deleted file mode 100644
index a3adf3e1e..000000000
--- a/src/lib/pages/account-details/components/tables/proposals/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./OpenedProposalsTable";
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
new file mode 100644
index 000000000..4e5969b86
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
@@ -0,0 +1,64 @@
+import { Flex, Grid, Text } from "@chakra-ui/react";
+
+import { TokenCell } from "../TokenCell";
+import { CustomIcon } from "lib/components/icon";
+import { MobileLabel } from "lib/components/table";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { Redelegation } from "lib/pages/account-details/data";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+interface RedelegationTableMobileCardProps {
+  redelegation: Redelegation;
+}
+
+export const RedelegationTableMobileCard = ({
+  redelegation,
+}: RedelegationTableMobileCardProps) => (
+  <Flex
+    background="gray.900"
+    borderRadius="8px"
+    p={3}
+    direction="column"
+    gap={3}
+    w="full"
+  >
+    <Grid
+      borderBottom="1px solid"
+      pb={3}
+      borderBottomColor="gray.700"
+      templateColumns="1fr 32px 1fr"
+      alignItems="center"
+    >
+      <Flex direction="column" gap={1}>
+        <MobileLabel label="From validator" />
+        <ValidatorBadge
+          maxWidth="100px"
+          badgeSize={{ sm: 8, md: 6 }}
+          validator={redelegation.srcValidator}
+        />
+      </Flex>
+      <CustomIcon name="arrow-right" boxSize={3} color="gray.600" />
+      <Flex direction="column" gap={1}>
+        <MobileLabel label="To validator" />
+        <ValidatorBadge
+          maxWidth="100px"
+          badgeSize={{ sm: 8, md: 6 }}
+          validator={redelegation.dstValidator}
+        />
+      </Flex>
+    </Grid>
+    <Flex direction="column" gap={1}>
+      <MobileLabel label="Amount" />
+      <TokenCell token={redelegation.token} />
+    </Flex>
+    <Flex direction="column" gap={1}>
+      <MobileLabel label="Completed by" />
+      <Flex direction="column">
+        <Text variant="body2">{formatUTC(redelegation.completionTime)}</Text>
+        <Text variant="body3" color="text.disabled">
+          {`(${dateFromNow(redelegation.completionTime)})`}
+        </Text>
+      </Flex>
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/tables/redelegation/index.tsx b/src/lib/pages/account-details/components/tables/redelegation/index.tsx
index beedd5eb2..de6a74e45 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/index.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/index.tsx
@@ -1,8 +1,10 @@
-import { TableContainer } from "@chakra-ui/react";
+import { Flex, TableContainer } from "@chakra-ui/react";
 
+import { useMobile } from "lib/app-provider";
 import type { Redelegation } from "lib/pages/account-details/data";
 
 import { RedelegationTableHeader } from "./RedelegationTableHeader";
+import { RedelegationTableMobileCard } from "./RedelegationTableMobileCard";
 import { RedelegationTableRow } from "./RedelegationTableRow";
 
 const TEMPLATE_COLUMNS =
@@ -14,21 +16,39 @@ interface RedelegationsTableProps {
 
 export const RedelegationsTable = ({
   redelegations,
-}: RedelegationsTableProps) => (
-  <TableContainer>
-    <RedelegationTableHeader templateColumns={TEMPLATE_COLUMNS} />
-    {redelegations.map((redelegation) => (
-      <RedelegationTableRow
-        key={
-          redelegation.srcValidator.validatorAddress +
-          redelegation.dstValidator.validatorAddress +
-          redelegation.token.amount +
-          redelegation.token.denom +
-          redelegation.completionTime
-        }
-        redelegation={redelegation}
-        templateColumns={TEMPLATE_COLUMNS}
-      />
-    ))}
-  </TableContainer>
-);
+}: RedelegationsTableProps) => {
+  const isMobile = useMobile();
+  return isMobile ? (
+    <Flex w="full">
+      {redelegations.map((redelegation) => (
+        <RedelegationTableMobileCard
+          key={
+            redelegation.srcValidator.validatorAddress +
+            redelegation.dstValidator.validatorAddress +
+            redelegation.token.amount +
+            redelegation.token.denom +
+            redelegation.completionTime
+          }
+          redelegation={redelegation}
+        />
+      ))}
+    </Flex>
+  ) : (
+    <TableContainer>
+      <RedelegationTableHeader templateColumns={TEMPLATE_COLUMNS} />
+      {redelegations.map((redelegation) => (
+        <RedelegationTableRow
+          key={
+            redelegation.srcValidator.validatorAddress +
+            redelegation.dstValidator.validatorAddress +
+            redelegation.token.amount +
+            redelegation.token.denom +
+            redelegation.completionTime
+          }
+          redelegation={redelegation}
+          templateColumns={TEMPLATE_COLUMNS}
+        />
+      ))}
+    </TableContainer>
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsBody.tsx b/src/lib/pages/account-details/components/tables/txs/TxsBody.tsx
deleted file mode 100644
index d2fa3097c..000000000
--- a/src/lib/pages/account-details/components/tables/txs/TxsBody.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Flex } from "@chakra-ui/react";
-
-import { useMobile } from "lib/app-provider";
-import { TransactionCard } from "lib/components/card/TransactionCard";
-import { Loading } from "lib/components/Loading";
-import { TransactionsTable } from "lib/components/table";
-import type { Option, Transaction } from "lib/types";
-
-interface TxsBodyProps {
-  transactions: Option<Transaction[]>;
-  isLoading: boolean;
-  emptyState: JSX.Element;
-  showRelations: boolean;
-  onViewMore?: () => void;
-}
-
-export const TxsBody = ({
-  transactions,
-  isLoading,
-  emptyState,
-  showRelations,
-  onViewMore,
-}: TxsBodyProps) => {
-  const isMobile = useMobile();
-  if (isLoading) return <Loading />;
-  if (!transactions?.length) return emptyState;
-  if (isMobile && !onViewMore)
-    return (
-      <Flex direction="column" gap={4} w="full" mt={4}>
-        {transactions.map((transaction) => (
-          <TransactionCard transaction={transaction} key={transaction.hash} />
-        ))}
-      </Flex>
-    );
-  if (isMobile && onViewMore) return null;
-  return (
-    <TransactionsTable
-      transactions={transactions}
-      isLoading={isLoading}
-      emptyState={emptyState}
-      showRelations={showRelations}
-    />
-  );
-};
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx b/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
index 7ce47dbad..e4d0788e6 100644
--- a/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
@@ -1,36 +1,37 @@
 import { Flex } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 
+import { TableTitle } from "lib/components/table";
+import type { Option } from "lib/types";
+
 interface TxsTopProps {
-  title: ReactNode;
+  txsCount: Option<number>;
   onViewMore?: () => void;
   relationSelection: ReactNode;
   txTypeSelection: ReactNode;
 }
 export const TxsTop = ({
-  title,
+  txsCount,
   onViewMore,
   relationSelection,
   txTypeSelection,
-}: TxsTopProps) => {
-  return (
-    <Flex
-      direction={{ base: "column", md: "row" }}
-      justify="space-between"
-      alignItems={{ base: "start", md: "center" }}
-    >
-      {title}
-      {!onViewMore && (
-        <Flex
-          gap={{ base: 6, md: 4 }}
-          mt={{ base: 4, md: 0 }}
-          w={{ base: "full", md: "auto" }}
-          direction={{ base: "column", md: "row" }}
-        >
-          {relationSelection}
-          {txTypeSelection}
-        </Flex>
-      )}
-    </Flex>
-  );
-};
+}: TxsTopProps) => (
+  <Flex
+    direction={{ base: "column", md: "row" }}
+    justify="space-between"
+    alignItems={{ base: "start", md: "center" }}
+  >
+    <TableTitle title="Transactions" count={txsCount} mb={0} />;
+    {!onViewMore && (
+      <Flex
+        gap={{ base: 6, md: 4 }}
+        mt={{ base: 4, md: 0 }}
+        w={{ base: "full", md: "auto" }}
+        direction={{ base: "column", md: "row" }}
+      >
+        {relationSelection}
+        {txTypeSelection}
+      </Flex>
+    )}
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/tables/txs/index.ts b/src/lib/pages/account-details/components/tables/txs/index.ts
deleted file mode 100644
index 64533f525..000000000
--- a/src/lib/pages/account-details/components/tables/txs/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./TxsBody";
-export * from "./TxsTable";
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx b/src/lib/pages/account-details/components/tables/txs/index.tsx
similarity index 69%
rename from src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
rename to src/lib/pages/account-details/components/tables/txs/index.tsx
index b518d7a20..2f6af0813 100644
--- a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/index.tsx
@@ -3,13 +3,12 @@ import type { ChangeEvent } from "react";
 import { useEffect, useState } from "react";
 
 import { ErrorFetching } from "../../ErrorFetching";
-import { MobileTitle } from "../../mobile/MobileTitle";
 import { useCurrentChain, useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import type { EmptyStateProps } from "lib/components/state";
 import { EmptyState } from "lib/components/state";
-import { TableTitle, ViewMore } from "lib/components/table";
+import { MobileTitle, TransactionsTable, ViewMore } from "lib/components/table";
 import { TxFilterSelection } from "lib/components/TxFilterSelection";
 import { TxRelationSelection } from "lib/components/TxRelationSelection";
 import { DEFAULT_TX_FILTERS } from "lib/data";
@@ -20,7 +19,6 @@ import {
 import type { Nullable, Option, Transaction, TxFilters } from "lib/types";
 
 import { TxsAlert } from "./TxsAlert";
-import { TxsBody } from "./TxsBody";
 import { TxsTop } from "./TxsTop";
 
 interface TxsTableProps {
@@ -46,25 +44,6 @@ const getEmptyStateProps = (
   };
 };
 
-const TxTitle = ({
-  onViewMore,
-  txsCount,
-}: {
-  onViewMore: TxsTableProps["onViewMore"];
-  txsCount: Option<number>;
-}) => {
-  const isMobile = useMobile();
-
-  if (isMobile && onViewMore)
-    return (
-      <MobileTitle
-        title="Transactions"
-        count={txsCount}
-        onViewMore={onViewMore}
-      />
-    );
-  return <TableTitle title="Transactions" count={txsCount} mb={0} />;
-};
 export const TxsTable = ({
   accountId,
   scrollComponentId,
@@ -149,48 +128,58 @@ export const TxsTable = ({
     setFilters(DEFAULT_TX_FILTERS);
   }, [chainId]);
 
+  const isMobileOverview = isMobile && !!onViewMore;
+  const showErrorAlert =
+    Boolean(failureReason) && Number(transactions?.length) > 0;
   return (
     <Box mt={{ base: 4, md: 8 }}>
-      <TxsTop
-        title={<TxTitle onViewMore={onViewMore} txsCount={txsCount} />}
-        onViewMore={onViewMore}
-        relationSelection={
-          <TxRelationSelection
-            value={isSigner}
-            setValue={(value: Option<boolean>) => {
-              resetPagination();
-              setIsSigner(value);
-            }}
-            w={{ base: "full", md: "200px" }}
-            size={{ base: "md", md: "lg" }}
-          />
-        }
-        txTypeSelection={
-          <TxFilterSelection
-            result={filterSelected}
-            setResult={handleSetFilters}
-            boxWidth={{ base: "full", md: "285px" }}
-            placeholder="All"
-            size={{ base: "md", md: "lg" }}
-            tagSize={{ base: "sm", md: "md" }}
-          />
-        }
-      />
-      {Boolean(failureReason) && Number(transactions?.length) > 0 && (
-        <TxsAlert />
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Transactions"
+          count={txsCount}
+          onViewMore={onViewMore}
+        />
+      ) : (
+        <TxsTop
+          txsCount={txsCount}
+          onViewMore={onViewMore}
+          relationSelection={
+            <TxRelationSelection
+              value={isSigner}
+              setValue={(value: Option<boolean>) => {
+                resetPagination();
+                setIsSigner(value);
+              }}
+              w={{ base: "full", md: "200px" }}
+              size={{ base: "md", md: "lg" }}
+            />
+          }
+          txTypeSelection={
+            <TxFilterSelection
+              result={filterSelected}
+              setResult={handleSetFilters}
+              boxWidth={{ base: "full", md: "285px" }}
+              placeholder="All"
+              size={{ base: "md", md: "lg" }}
+              tagSize={{ base: "sm", md: "md" }}
+            />
+          }
+        />
+      )}
+      {showErrorAlert && <TxsAlert />}
+      {isMobileOverview && (
+        <TransactionsTable
+          transactions={transactions}
+          isLoading={isLoading || txsCountLoading}
+          emptyState={
+            <EmptyState
+              withBorder
+              {...getEmptyStateProps(filterSelected, transactions)}
+            />
+          }
+          showRelations
+        />
       )}
-      <TxsBody
-        transactions={transactions}
-        isLoading={isLoading || txsCountLoading}
-        emptyState={
-          <EmptyState
-            withBorder
-            {...getEmptyStateProps(filterSelected, transactions)}
-          />
-        }
-        showRelations
-        onViewMore={onViewMore}
-      />
       {Boolean(transactions?.length) &&
         (onViewMore
           ? !txsCountLoading &&
diff --git a/src/lib/pages/block-details/components/BlockTxsTable.tsx b/src/lib/pages/block-details/components/BlockTxsTable.tsx
index 4fc662c4e..e30aa3f86 100644
--- a/src/lib/pages/block-details/components/BlockTxsTable.tsx
+++ b/src/lib/pages/block-details/components/BlockTxsTable.tsx
@@ -1,8 +1,5 @@
-import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { useMobile } from "lib/app-provider";
-import { TransactionCard } from "lib/components/card/TransactionCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -35,7 +32,7 @@ export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
       isDisabled: false,
     },
   });
-  const isMobile = useMobile();
+
   const { data: blockTxs, isLoading: isBlockTxsLoading } =
     useTxsByBlockHeightPagination(height, pageSize, offset);
 
@@ -48,41 +45,22 @@ export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
     setPageSize(size);
     setCurrentPage(1);
   };
-  if (!blockTxs?.length)
-    return (
-      <EmptyState
-        imageVariant="empty"
-        message="There are no submitted transactions in this block"
-        withBorder
-      />
-    );
+
   return (
     <>
-      {isMobile ? (
-        <Flex direction="column" gap={4} w="full" mt={4}>
-          {blockTxs.map((transaction) => (
-            <TransactionCard
-              transaction={transaction}
-              showRelations={false}
-              showTimestamp={false}
-            />
-          ))}
-        </Flex>
-      ) : (
-        <TransactionsTable
-          transactions={blockTxs}
-          isLoading={isBlockTxsLoading}
-          emptyState={
-            <EmptyState
-              imageVariant="empty"
-              message="There are no submitted transactions in this block"
-              withBorder
-            />
-          }
-          showRelations={false}
-          showTimestamp={false}
-        />
-      )}
+      <TransactionsTable
+        transactions={blockTxs}
+        isLoading={isBlockTxsLoading}
+        emptyState={
+          <EmptyState
+            imageVariant="empty"
+            message="There are no submitted transactions in this block"
+            withBorder
+          />
+        }
+        showRelations={false}
+        showTimestamp={false}
+      />
       {blockTxsCount > 10 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/lib/components/card/BlockCard.tsx b/src/lib/pages/blocks/components/BlocksMobileCard.tsx
similarity index 83%
rename from src/lib/components/card/BlockCard.tsx
rename to src/lib/pages/blocks/components/BlocksMobileCard.tsx
index 522114104..69c2f3b98 100644
--- a/src/lib/components/card/BlockCard.tsx
+++ b/src/lib/pages/blocks/components/BlocksMobileCard.tsx
@@ -1,21 +1,20 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { ExplorerLink } from "../ExplorerLink";
-import { ValidatorBadge } from "../ValidatorBadge";
+import { ExplorerLink } from "../../../components/ExplorerLink";
+import { MobileCardTemplate } from "../../../components/table/MobileCardTemplate";
+import { ValidatorBadge } from "../../../components/ValidatorBadge";
 import { useInternalNavigate } from "lib/app-provider";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import { MobileLabel } from "lib/components/table/MobileLabel";
 import type { BlockInfo } from "lib/types/block";
 import { dateFromNow, formatUTC, truncate } from "lib/utils";
 
-import { DefaultMobileCard } from "./DefaultMobileCard";
-
-interface BlockCardProps {
+interface BlocksMobileCardProps {
   blockData: BlockInfo;
 }
-export const BlockCard = ({ blockData }: BlockCardProps) => {
+export const BlocksMobileCard = ({ blockData }: BlocksMobileCardProps) => {
   const navigate = useInternalNavigate();
   return (
-    <DefaultMobileCard
+    <MobileCardTemplate
       onClick={() =>
         navigate({
           pathname: "/blocks/[blockHeight]",
diff --git a/src/lib/pages/blocks/components/BlocksTable.tsx b/src/lib/pages/blocks/components/BlocksTable.tsx
index 4f76853cc..ef9d57a59 100644
--- a/src/lib/pages/blocks/components/BlocksTable.tsx
+++ b/src/lib/pages/blocks/components/BlocksTable.tsx
@@ -2,7 +2,6 @@ import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { useMobile } from "lib/app-provider";
-import { BlockCard } from "lib/components/card/BlockCard";
 import { Loading } from "lib/components/Loading";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
@@ -14,6 +13,7 @@ import {
 } from "lib/services/blockService";
 
 import { BlocksHeader } from "./BlocksHeader";
+import { BlocksMobileCard } from "./BlocksMobileCard";
 import { BlocksRow } from "./BlocksRow";
 
 interface BlocksTableProps {
@@ -85,7 +85,7 @@ export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
       {isMobile ? (
         <Flex direction="column" gap={4} w="full" mt={4}>
           {blocksData.map((block) => (
-            <BlockCard blockData={block} />
+            <BlocksMobileCard key={block.hash} blockData={block} />
           ))}
         </Flex>
       ) : (
diff --git a/src/lib/pages/code-details/components/code-info/table/CodeContractsTable.tsx b/src/lib/pages/code-details/components/code-info/table/CodeContractsTable.tsx
index ac49e6c44..49177303d 100644
--- a/src/lib/pages/code-details/components/code-info/table/CodeContractsTable.tsx
+++ b/src/lib/pages/code-details/components/code-info/table/CodeContractsTable.tsx
@@ -1,10 +1,8 @@
-import { Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
-import { useInternalNavigate, useMobile } from "lib/app-provider";
-import { InstantiatedContractCard } from "lib/components/card/ContractCard";
+import { useInternalNavigate } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { ContractsTable, TableTitle } from "lib/components/table";
@@ -66,8 +64,7 @@ export const CodeContractsTable = observer(
     };
 
     const tableHeaderId = "contractTableHeader";
-    const isMobile = useMobile();
-    if (!contracts?.length) return <NoContracts />;
+
     return (
       <>
         <TableTitle
@@ -75,29 +72,12 @@ export const CodeContractsTable = observer(
           count={totalData ?? 0}
           id={tableHeaderId}
         />
-        {isMobile ? (
-          <Flex direction="column" gap={4} w="full" mt={4}>
-            {contracts.map((contractInfo) => (
-              <InstantiatedContractCard
-                contractInfo={contractInfo}
-                key={
-                  contractInfo.name +
-                  contractInfo.contractAddress +
-                  contractInfo.description +
-                  contractInfo.tags +
-                  contractInfo.lists
-                }
-              />
-            ))}
-          </Flex>
-        ) : (
-          <ContractsTable
-            contracts={contracts}
-            isLoading={isLoading}
-            emptyState={<NoContracts />}
-            onRowSelect={onRowSelect}
-          />
-        )}
+        <ContractsTable
+          contracts={contracts}
+          isLoading={isLoading}
+          emptyState={<NoContracts />}
+          onRowSelect={onRowSelect}
+        />
         {!!totalData && totalData > 10 && (
           <Pagination
             currentPage={currentPage}
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index b6cb79961..7a58105da 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -5,14 +5,8 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
-import {
-  useInternalNavigate,
-  useWasmConfig,
-  useMobile,
-} from "lib/app-provider";
-import { StoredCodeCard } from "lib/components/card/StoredCodeCard";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { FilterByPermission } from "lib/components/forms";
-import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
 import { CodesTable } from "lib/components/table";
@@ -59,18 +53,6 @@ const RecentCodes = observer(() => {
       withBorder
     />
   );
-  const isMobile = useMobile();
-  const MobileSection = () => {
-    if (isLoading) return <Loading />;
-    if (!recentCodes?.length) return emptyState;
-    return (
-      <Flex direction="column" gap={4} w="full" mt={4}>
-        {recentCodes.map((code) => (
-          <StoredCodeCard codeInfo={code} key={code.uploader + code.id} />
-        ))}
-      </Flex>
-    );
-  };
 
   return (
     <PageContainer>
@@ -96,16 +78,12 @@ const RecentCodes = observer(() => {
           />
         </Flex>
       </Box>
-      {isMobile ? (
-        <MobileSection />
-      ) : (
-        <CodesTable
-          codes={recentCodes}
-          isLoading={isLoading}
-          emptyState={emptyState}
-          onRowSelect={onRowSelect}
-        />
-      )}
+      <CodesTable
+        codes={recentCodes}
+        isLoading={isLoading}
+        emptyState={emptyState}
+        onRowSelect={onRowSelect}
+      />
     </PageContainer>
   );
 });
diff --git a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
index c27c9c29a..e0e79d3f6 100644
--- a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
+++ b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
@@ -1,8 +1,5 @@
-import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { useMobile } from "lib/app-provider";
-import { ProposalCard } from "lib/components/card/ProposalCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -57,29 +54,19 @@ export const RelatedProposalsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-  const isMobile = useMobile();
-  const emptyState = (
-    <EmptyState
-      imageVariant="empty"
-      message="This contract does not have related proposals yet."
-    />
-  );
-  if (!relatedProposals?.length) return emptyState;
+
   return (
     <>
-      {isMobile ? (
-        <Flex direction="column" gap={4} w="full" mt={4}>
-          {relatedProposals.map((proposal) => (
-            <ProposalCard key={proposal.proposalId} proposal={proposal} />
-          ))}
-        </Flex>
-      ) : (
-        <ProposalsTable
-          proposals={relatedProposals}
-          isLoading={isLoading}
-          emptyState={emptyState}
-        />
-      )}
+      <ProposalsTable
+        proposals={relatedProposals}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            imageVariant="empty"
+            message="This contract does not have related proposals yet."
+          />
+        }
+      />
       {!!totalData && totalData > 10 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/lib/pages/contract-details/components/tables/TxsTable.tsx b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
index 08285e1c2..b89840abb 100644
--- a/src/lib/pages/contract-details/components/tables/TxsTable.tsx
+++ b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
@@ -1,8 +1,5 @@
-import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { useMobile } from "lib/app-provider";
-import { TransactionCard } from "lib/components/card/TransactionCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -60,34 +57,20 @@ export const TxsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-  const isMobile = useMobile();
-  const emptyState = (
-    <EmptyState
-      imageVariant="empty"
-      message="This contract does not have any transactions"
-    />
-  );
-  if (!transactions?.length) return emptyState;
+
   return (
     <>
-      {isMobile ? (
-        <Flex direction="column" gap={4} w="full" mt={4}>
-          {transactions.map((transaction) => (
-            <TransactionCard
-              transaction={transaction}
-              key={`contract-detail-txs-${transaction.hash}`}
-              showRelations={false}
-            />
-          ))}
-        </Flex>
-      ) : (
-        <TransactionsTable
-          transactions={transactions}
-          isLoading={isLoading}
-          emptyState={emptyState}
-          showRelations={false}
-        />
-      )}
+      <TransactionsTable
+        transactions={transactions}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            imageVariant="empty"
+            message="This contract does not have any transactions"
+          />
+        }
+        showRelations={false}
+      />
       {!!totalData && totalData > 10 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/lib/components/card/MigrationCard.tsx b/src/lib/pages/contract-details/components/tables/migration/MigrationMobileCard.tsx
similarity index 89%
rename from src/lib/components/card/MigrationCard.tsx
rename to src/lib/pages/contract-details/components/tables/migration/MigrationMobileCard.tsx
index 2833d5e27..bea7dfaa4 100644
--- a/src/lib/components/card/MigrationCard.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/MigrationMobileCard.tsx
@@ -1,24 +1,22 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { ExplorerLink } from "../ExplorerLink";
-import { CodeNameCell } from "../table";
 import { useGetAddressType, useInternalNavigate } from "lib/app-provider";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CodeNameCell, MobileCardTemplate } from "lib/components/table";
+import { MobileLabel } from "lib/components/table/MobileLabel";
 import { RemarkRender } from "lib/pages/contract-details/components/tables/migration/MigrationRow";
 import type { ContractMigrationHistory } from "lib/types";
 import { dateFromNow, formatUTC, getCw2Info } from "lib/utils";
 
-import { DefaultMobileCard } from "./DefaultMobileCard";
-
-interface MigrationCardProps {
+interface MigrationMobileCardProps {
   history: ContractMigrationHistory;
 }
-export const MigrationCard = ({ history }: MigrationCardProps) => {
+export const MigrationMobileCard = ({ history }: MigrationMobileCardProps) => {
   const getAddressType = useGetAddressType();
   const cw2Info = getCw2Info(history.cw2Contract, history.cw2Version);
   const navigate = useInternalNavigate();
   return (
-    <DefaultMobileCard
+    <MobileCardTemplate
       onClick={() =>
         navigate({
           pathname: "/codes/[codeId]",
diff --git a/src/lib/pages/contract-details/components/tables/migration/index.tsx b/src/lib/pages/contract-details/components/tables/migration/index.tsx
index 6423cd3c7..d31ec1c6d 100644
--- a/src/lib/pages/contract-details/components/tables/migration/index.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/index.tsx
@@ -2,11 +2,11 @@ import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { useMobile } from "lib/app-provider";
-import { MigrationCard } from "lib/components/card/MigrationCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
 import { TableContainer } from "lib/components/table";
+import { MigrationMobileCard } from "lib/pages/contract-details/components/tables/migration/MigrationMobileCard";
 import { useMigrationHistories } from "lib/pages/contract-details/data";
 import type { ContractAddr, Option } from "lib/types";
 
@@ -26,6 +26,7 @@ export const MigrationTable = ({
   totalData,
   refetchCount,
 }: MigrationTableProps) => {
+  const isMobile = useMobile();
   const {
     pagesQuantity,
     currentPage,
@@ -42,6 +43,7 @@ export const MigrationTable = ({
     },
   });
 
+  // TODO: loading state
   const migrationHistories = useMigrationHistories(
     contractAddress,
     offset,
@@ -59,7 +61,7 @@ export const MigrationTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-  const isMobile = useMobile();
+
   if (!migrationHistories?.length)
     return (
       <EmptyState
@@ -77,14 +79,14 @@ export const MigrationTable = ({
       {isMobile ? (
         <Flex direction="column" gap={4} w="full" mt={4}>
           {migrationHistories.map((history, idx) => (
-            <MigrationCard
-              key={`mobile-${
+            <MigrationMobileCard
+              key={
                 history.codeId +
                 history.remark.operation +
                 history.remark.type +
                 history.remark.value +
                 idx.toString()
-              }`}
+              }
               history={history}
             />
           ))}
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 584e97bc3..c71088e19 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -1,16 +1,10 @@
-import { Heading, Box, Flex, Text } from "@chakra-ui/react";
+import { Heading, Box, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
-import {
-  useInternalNavigate,
-  useWasmConfig,
-  useMobile,
-} from "lib/app-provider";
-import { InstantiatedContractCard } from "lib/components/card/ContractCard";
-import { Loading } from "lib/components/Loading";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
 import { ContractsTable } from "lib/components/table";
@@ -23,7 +17,6 @@ const RecentContracts = observer(() => {
   const { track } = useTrack();
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const isMobile = useMobile();
   const onRowSelect = (contract: ContractAddr) =>
     navigate({
       pathname: "/contracts/[contract]",
@@ -36,28 +29,6 @@ const RecentContracts = observer(() => {
     if (router.isReady) track(AmpEvent.TO_RECENT_CONTRACT);
   }, [router.isReady, track]);
 
-  const emptyState = (
-    <EmptyState
-      imageVariant="empty"
-      message="Most recent 100 contracts will display here."
-      withBorder
-    />
-  );
-  const MobileSection = () => {
-    if (isLoading) return <Loading />;
-    if (!recentContracts?.length) return emptyState;
-    return (
-      <Flex direction="column" gap={4} w="full" mt={4}>
-        {recentContracts.map((contract) => (
-          <InstantiatedContractCard
-            contractInfo={contract}
-            key={contract.contractAddress}
-          />
-        ))}
-      </Flex>
-    );
-  };
-
   return (
     <PageContainer>
       <Box>
@@ -68,17 +39,19 @@ const RecentContracts = observer(() => {
           These contracts are the most recently instantiated on this network
         </Text>
       </Box>
-      {isMobile ? (
-        <MobileSection />
-      ) : (
-        <ContractsTable
-          contracts={recentContracts}
-          isLoading={isLoading}
-          emptyState={emptyState}
-          onRowSelect={onRowSelect}
-          withoutTag
-        />
-      )}
+      <ContractsTable
+        contracts={recentContracts}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            imageVariant="empty"
+            message="Most recent 100 contracts will display here."
+            withBorder
+          />
+        }
+        onRowSelect={onRowSelect}
+        withoutTag
+      />
     </PageContainer>
   );
 });
diff --git a/src/lib/components/card/AccountCard.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountMobileCard.tsx
similarity index 81%
rename from src/lib/components/card/AccountCard.tsx
rename to src/lib/pages/public-project/components/table/account/PublicProjectAccountMobileCard.tsx
index b0a9d53c3..d8cc7781d 100644
--- a/src/lib/components/card/AccountCard.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountMobileCard.tsx
@@ -1,24 +1,24 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { ExplorerLink } from "../ExplorerLink";
 import { useInternalNavigate } from "lib/app-provider";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
 import { getNavigationArgs } from "lib/pages/public-project/components/table/account/PublicProjectAccountRow";
 import type { Account } from "lib/types";
 
-import { DefaultMobileCard } from "./DefaultMobileCard";
-
-interface AccountCardProps {
+interface PublicProjectAccountMobileCardProps {
   accountInfo: Account;
 }
-export const AccountCard = ({ accountInfo }: AccountCardProps) => {
+export const PublicProjectAccountMobileCard = ({
+  accountInfo,
+}: PublicProjectAccountMobileCardProps) => {
   const navigate = useInternalNavigate();
   const goToDetail = () => {
     navigate(getNavigationArgs(accountInfo));
   };
 
   return (
-    <DefaultMobileCard
+    <MobileCardTemplate
       onClick={goToDetail}
       topContent={
         <Flex gap={2} align="center">
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
index 712afd779..5c7b22cca 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
@@ -1,14 +1,19 @@
-import { TableContainer, Grid, Box, Flex } from "@chakra-ui/react";
+import { Grid, Box, Flex } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { useMemo, useState } from "react";
 
 import { useMobile } from "lib/app-provider";
-import { AccountCard } from "lib/components/card/AccountCard";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
-import { TableHeader, TableTitle, ViewMore } from "lib/components/table";
+import {
+  TableContainer,
+  TableHeader,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
 import type { Account } from "lib/types";
 
+import { PublicProjectAccountMobileCard } from "./PublicProjectAccountMobileCard";
 import { PublicProjectAccountRow } from "./PublicProjectAccountRow";
 
 interface PublicProjectAccountTableProps {
@@ -36,7 +41,10 @@ const ContentRender = ({
   isMobile ? (
     <Flex direction="column" gap={4} w="full" mt={4}>
       {filteredAccounts.map((account) => (
-        <AccountCard key={account.address} accountInfo={account} />
+        <PublicProjectAccountMobileCard
+          key={account.address}
+          accountInfo={account}
+        />
       ))}
     </Flex>
   ) : (
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeMobileCard.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeMobileCard.tsx
new file mode 100644
index 000000000..bb243f403
--- /dev/null
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeMobileCard.tsx
@@ -0,0 +1,81 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { PermissionChip } from "lib/components/PermissionChip";
+import { MobileCardTemplate } from "lib/components/table";
+import { MobileLabel } from "lib/components/table/MobileLabel";
+import type { PublicCode } from "lib/types";
+import { getCw2Info } from "lib/utils";
+
+interface PublicProjectCodeMobileCardProps {
+  publicInfo: PublicCode;
+}
+export const PublicProjectCodeMobileCard = ({
+  publicInfo,
+}: PublicProjectCodeMobileCardProps) => {
+  const cw2Info = getCw2Info(publicInfo.cw2Contract, publicInfo.cw2Version);
+  const navigate = useInternalNavigate();
+
+  return (
+    <MobileCardTemplate
+      onClick={() =>
+        navigate({
+          pathname: "/codes/[codeId]",
+          query: { codeId: publicInfo.id.toString() },
+        })
+      }
+      topContent={
+        <Flex gap={2} align="center">
+          <MobileLabel variant="body2" label="Code ID" />
+          <ExplorerLink
+            type="code_id"
+            value={publicInfo.id.toString()}
+            showCopyOnHover
+          />
+        </Flex>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column">
+            <MobileLabel label="Code Name" />
+            <Text>{publicInfo.name}</Text>
+          </Flex>
+          <Flex direction="column">
+            <MobileLabel label="CW2 Info" />
+            <Text
+              color={cw2Info ? "text.main" : "text.disabled"}
+              wordBreak="break-all"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {cw2Info ?? "N/A"}
+            </Text>
+          </Flex>
+        </Flex>
+      }
+      bottomContent={
+        <Flex gap={3} w="full">
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Contracts" />
+            <Text
+              variant="body3"
+              onClick={(e) => e.stopPropagation()}
+              cursor="text"
+              color={publicInfo.contractCount ? "text.main" : "text.disabled"}
+            >
+              {publicInfo.contractCount ?? "N/A"}
+            </Text>
+          </Flex>
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Permission" />
+            <PermissionChip
+              instantiatePermission={publicInfo.instantiatePermission}
+              permissionAddresses={publicInfo.permissionAddresses}
+              tagSize="xs"
+            />
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
index 84df30ced..afa3d8a3e 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
@@ -4,13 +4,13 @@ import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
 
 import { useMobile } from "lib/app-provider";
-import { StoredCodeCard } from "lib/components/card/StoredCodeCard";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
 import { TableHeader, TableTitle, ViewMore } from "lib/components/table";
 import { useCodeStore } from "lib/providers/store";
 import type { Option, PublicCode, CodeInfo } from "lib/types";
 
+import { PublicProjectCodeMobileCard } from "./PublicProjectCodeMobileCard";
 import { PublicProjectCodeRow } from "./PublicProjectCodeRow";
 
 export interface PublicCodeInfo {
@@ -48,7 +48,10 @@ const ContentRender = ({
   isMobile ? (
     <Flex direction="column" gap={4} w="full" mt={4}>
       {publicCodes.map((code) => (
-        <StoredCodeCard key={code.publicInfo.id} codeInfo={code.publicInfo} />
+        <PublicProjectCodeMobileCard
+          key={code.publicInfo.id}
+          publicInfo={code.publicInfo}
+        />
       ))}
     </Flex>
   ) : (
diff --git a/src/lib/components/card/PublicContractCard.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractMobileCard.tsx
similarity index 68%
rename from src/lib/components/card/PublicContractCard.tsx
rename to src/lib/pages/public-project/components/table/contract/PublicProjectContractMobileCard.tsx
index 3dba99bc3..2b5c60b85 100644
--- a/src/lib/components/card/PublicContractCard.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractMobileCard.tsx
@@ -1,33 +1,34 @@
-import { Button, Flex, Text } from "@chakra-ui/react";
+import { Button, Text, Flex } from "@chakra-ui/react";
 
-import { AppLink } from "../AppLink";
-import { ExplorerLink } from "../ExplorerLink";
-import { ContractNameCell } from "../table";
 import {
-  useGetAddressTypeByLength,
   useInternalNavigate,
+  useGetAddressTypeByLength,
 } from "lib/app-provider";
-import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
-import type { PublicContract } from "lib/types";
+import { AppLink } from "lib/components/AppLink";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
 
-import { DefaultMobileCard } from "./DefaultMobileCard";
+import type { PublicContractInfo } from "./PublicProjectContractTable";
 
-interface PublicContractCardProps {
-  publicInfo: PublicContract;
+interface PublicProjectContractMobileCardProps {
+  publicContractInfo: PublicContractInfo;
 }
 
-export const PublicContractCard = ({ publicInfo }: PublicContractCardProps) => {
+export const PublicProjectContractMobileCard = ({
+  publicContractInfo: { publicInfo },
+}: PublicProjectContractMobileCardProps) => {
   const navigate = useInternalNavigate();
   const getAddressTypeByLength = useGetAddressTypeByLength();
 
+  const goToContractDetails = () => {
+    navigate({
+      pathname: `/contracts/${publicInfo.contractAddress}`,
+    });
+  };
+
   return (
-    <DefaultMobileCard
-      onClick={() =>
-        navigate({
-          pathname: "/contracts/[contractAddr]",
-          query: { contractAddr: publicInfo.contractAddress },
-        })
-      }
+    <MobileCardTemplate
+      onClick={goToContractDetails}
       topContent={
         <>
           <Flex align="start" direction="column">
@@ -57,7 +58,7 @@ export const PublicContractCard = ({ publicInfo }: PublicContractCardProps) => {
           <Flex flex="1" direction="column">
             <Flex direction="column">
               <MobileLabel label="Contract Name" />
-              <ContractNameCell contractLocalInfo={publicInfo} isReadOnly />
+              <Text>{publicInfo.name}</Text>
               <Text variant="body3" color="text.dark" pt={1}>
                 {publicInfo.description}
               </Text>
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
index 627cd55be..4f4f9491e 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
@@ -4,7 +4,6 @@ import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
 
 import { useMobile } from "lib/app-provider";
-import { PublicContractCard } from "lib/components/card/PublicContractCard";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
 import { TableHeader, TableTitle, ViewMore } from "lib/components/table";
@@ -12,6 +11,7 @@ import { useContractStore } from "lib/providers/store";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { PublicContract, Option, ContractAddr } from "lib/types";
 
+import { PublicProjectContractMobileCard } from "./PublicProjectContractMobileCard";
 import { PublicProjectContractRow } from "./PublicProjectContractRow";
 
 export interface PublicContractInfo {
@@ -36,17 +36,16 @@ const ContractTableHeader = () => (
 
 const ContentRender = ({
   publicContracts,
-  isMobile,
 }: {
   publicContracts: PublicContractInfo[];
-  isMobile: boolean;
-}) =>
-  isMobile ? (
+}) => {
+  const isMobile = useMobile();
+  return isMobile ? (
     <Flex direction="column" gap={4} w="full" mt={4}>
       {publicContracts.map((contract) => (
-        <PublicContractCard
-          publicInfo={contract.publicInfo}
+        <PublicProjectContractMobileCard
           key={contract.publicInfo.contractAddress}
+          publicContractInfo={contract}
         />
       ))}
     </Flex>
@@ -62,12 +61,12 @@ const ContentRender = ({
       ))}
     </TableContainer>
   );
+};
 
 export const PublicProjectContractTable = observer(
   ({ contracts = [], onViewMore }: PublicProjectContractTableProps) => {
     const [searchKeyword, setSearchKeyword] = useState("");
     const { getContractLocalInfo } = useContractStore();
-    const isMobile = useMobile();
 
     const filteredContracts = useMemo(() => {
       return onViewMore
@@ -105,10 +104,7 @@ export const PublicProjectContractTable = observer(
           />
         )}
         {publicContracts.length ? (
-          <ContentRender
-            publicContracts={publicContracts}
-            isMobile={isMobile}
-          />
+          <ContentRender publicContracts={publicContracts} />
         ) : (
           <EmptyState
             my={4}
diff --git a/src/lib/pages/txs/components/TxsTable.tsx b/src/lib/pages/txs/components/TxsTable.tsx
index bdeb8bcea..92eeb3c80 100644
--- a/src/lib/pages/txs/components/TxsTable.tsx
+++ b/src/lib/pages/txs/components/TxsTable.tsx
@@ -1,10 +1,7 @@
-import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
-import { useCelatoneApp, useMobile } from "lib/app-provider";
-import { TransactionCard } from "lib/components/card/TransactionCard";
-import { Loading } from "lib/components/Loading";
+import { useCelatoneApp } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -46,11 +43,12 @@ export const TxsTable = ({ isViewMore }: TxsTableProps) => {
     setPageSize(size);
     setCurrentPage(1);
   };
-  const isMobile = useMobile();
+
   useEffect(() => {
     if (!isViewMore) setPageSize(10);
     setCurrentPage(1);
   }, [currentChainId, isViewMore, setCurrentPage, setPageSize]);
+
   // TODO - Might consider adding this state in all transaction table
   if (error)
     return (
@@ -60,54 +58,7 @@ export const TxsTable = ({ isViewMore }: TxsTableProps) => {
         message="There is an error during fetching transactions."
       />
     );
-  if (isMobile && isLoading)
-    return (
-      <>
-        <Loading />
-        <Pagination
-          currentPage={currentPage}
-          pagesQuantity={pagesQuantity}
-          offset={offset}
-          totalData={countTxs}
-          pageSize={pageSize}
-          onPageChange={onPageChange}
-          onPageSizeChange={onPageSizeChange}
-        />
-      </>
-    );
-  if (isMobile)
-    return (
-      <>
-        {txs ? (
-          <Flex direction="column" gap={4} w="full" mt={4}>
-            {txs?.map((transaction) => (
-              <TransactionCard
-                transaction={transaction}
-                key={transaction.hash}
-                showRelations={false}
-              />
-            ))}
-            {!isViewMore && countTxs > 10 && (
-              <Pagination
-                currentPage={currentPage}
-                pagesQuantity={pagesQuantity}
-                offset={offset}
-                totalData={countTxs}
-                pageSize={pageSize}
-                onPageChange={onPageChange}
-                onPageSizeChange={onPageSizeChange}
-              />
-            )}
-          </Flex>
-        ) : (
-          <EmptyState
-            withBorder
-            imageVariant="empty"
-            message="There are no transactions in this network."
-          />
-        )}
-      </>
-    );
+
   return (
     <>
       <TransactionsTable

From 5f03792222bb9ac28356e76d9ec15e2ec54c6285 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 01:51:29 +0700
Subject: [PATCH 147/368] fix: renaming

---
 .../pages/blocks/components/BlocksHeader.tsx  | 28 ----------
 src/lib/pages/blocks/components/BlocksRow.tsx | 53 ------------------
 .../pages/blocks/components/BlocksTable.tsx   | 12 ++---
 .../blocks/components/BlocksTableHeader.tsx   | 26 +++++++++
 ...bileCard.tsx => BlocksTableMobileCard.tsx} |  6 ++-
 .../blocks/components/BlocksTableRow.tsx      | 54 +++++++++++++++++++
 6 files changed, 90 insertions(+), 89 deletions(-)
 delete mode 100644 src/lib/pages/blocks/components/BlocksHeader.tsx
 delete mode 100644 src/lib/pages/blocks/components/BlocksRow.tsx
 create mode 100644 src/lib/pages/blocks/components/BlocksTableHeader.tsx
 rename src/lib/pages/blocks/components/{BlocksMobileCard.tsx => BlocksTableMobileCard.tsx} (94%)
 create mode 100644 src/lib/pages/blocks/components/BlocksTableRow.tsx

diff --git a/src/lib/pages/blocks/components/BlocksHeader.tsx b/src/lib/pages/blocks/components/BlocksHeader.tsx
deleted file mode 100644
index 0e2aabcea..000000000
--- a/src/lib/pages/blocks/components/BlocksHeader.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Grid } from "@chakra-ui/react";
-
-import { TableHeader } from "lib/components/table";
-
-interface BlocksHeaderProps {
-  templateColumns: GridProps["templateColumns"];
-  scrollComponentId: string;
-}
-
-export const BlocksHeader = ({
-  templateColumns,
-  scrollComponentId,
-}: BlocksHeaderProps) => {
-  return (
-    <Grid
-      templateColumns={templateColumns}
-      id={scrollComponentId}
-      sx={{ "> div": { color: "text.dark" } }}
-    >
-      <TableHeader>Block Height</TableHeader>
-      <TableHeader>Block Hash</TableHeader>
-      <TableHeader>Proposed by</TableHeader>
-      <TableHeader textAlign="center">Transactions</TableHeader>
-      <TableHeader>Timestamp</TableHeader>
-    </Grid>
-  );
-};
diff --git a/src/lib/pages/blocks/components/BlocksRow.tsx b/src/lib/pages/blocks/components/BlocksRow.tsx
deleted file mode 100644
index db15b128d..000000000
--- a/src/lib/pages/blocks/components/BlocksRow.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Flex, Text, Grid } from "@chakra-ui/react";
-
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { TableRow } from "lib/components/table";
-import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { BlockInfo } from "lib/types/block";
-import { dateFromNow, formatUTC, truncate } from "lib/utils";
-
-interface BlocksRowProps {
-  templateColumns: GridProps["templateColumns"];
-  blockData: BlockInfo;
-}
-
-export const BlocksRow = ({ templateColumns, blockData }: BlocksRowProps) => {
-  return (
-    <Grid templateColumns={templateColumns}>
-      <TableRow>
-        <ExplorerLink
-          type="block_height"
-          value={blockData.height.toString()}
-          showCopyOnHover
-        >
-          {blockData.height}
-        </ExplorerLink>
-      </TableRow>
-      <TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
-      <TableRow>
-        <ValidatorBadge
-          validator={blockData.proposer}
-          badgeSize={7}
-          maxWidth="220px"
-        />
-      </TableRow>
-      <TableRow
-        justifyContent="center"
-        color={blockData.txCount === 0 ? "text.dark" : "text.main"}
-      >
-        {blockData.txCount}
-      </TableRow>
-      <TableRow>
-        <Flex direction="column">
-          <Text variant="body2" color="text.dark">
-            {formatUTC(blockData.timestamp)}
-          </Text>
-          <Text variant="body3" color="text.disabled">
-            ({dateFromNow(blockData.timestamp)})
-          </Text>
-        </Flex>
-      </TableRow>
-    </Grid>
-  );
-};
diff --git a/src/lib/pages/blocks/components/BlocksTable.tsx b/src/lib/pages/blocks/components/BlocksTable.tsx
index ef9d57a59..d7db0d3d1 100644
--- a/src/lib/pages/blocks/components/BlocksTable.tsx
+++ b/src/lib/pages/blocks/components/BlocksTable.tsx
@@ -12,9 +12,9 @@ import {
   useBlocklistQuery,
 } from "lib/services/blockService";
 
-import { BlocksHeader } from "./BlocksHeader";
-import { BlocksMobileCard } from "./BlocksMobileCard";
-import { BlocksRow } from "./BlocksRow";
+import { BlocksTableHeader } from "./BlocksTableHeader";
+import { BlocksTableMobileCard } from "./BlocksTableMobileCard";
+import { BlocksTableRow } from "./BlocksTableRow";
 
 interface BlocksTableProps {
   isViewMore?: boolean;
@@ -85,17 +85,17 @@ export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
       {isMobile ? (
         <Flex direction="column" gap={4} w="full" mt={4}>
           {blocksData.map((block) => (
-            <BlocksMobileCard key={block.hash} blockData={block} />
+            <BlocksTableMobileCard key={block.hash} blockData={block} />
           ))}
         </Flex>
       ) : (
         <TableContainer>
-          <BlocksHeader
+          <BlocksTableHeader
             templateColumns={TEMPLATE_COLUMNS}
             scrollComponentId={scrollComponentId}
           />
           {blocksData.map((block) => (
-            <BlocksRow
+            <BlocksTableRow
               key={block.hash}
               templateColumns={TEMPLATE_COLUMNS}
               blockData={block}
diff --git a/src/lib/pages/blocks/components/BlocksTableHeader.tsx b/src/lib/pages/blocks/components/BlocksTableHeader.tsx
new file mode 100644
index 000000000..5be719987
--- /dev/null
+++ b/src/lib/pages/blocks/components/BlocksTableHeader.tsx
@@ -0,0 +1,26 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
+
+import { TableHeader } from "lib/components/table";
+
+interface BlocksTableHeaderProps {
+  templateColumns: GridProps["templateColumns"];
+  scrollComponentId: string;
+}
+
+export const BlocksTableHeader = ({
+  templateColumns,
+  scrollComponentId,
+}: BlocksTableHeaderProps) => (
+  <Grid
+    templateColumns={templateColumns}
+    id={scrollComponentId}
+    sx={{ "> div": { color: "text.dark" } }}
+  >
+    <TableHeader>Block Height</TableHeader>
+    <TableHeader>Block Hash</TableHeader>
+    <TableHeader>Proposed by</TableHeader>
+    <TableHeader textAlign="center">Transactions</TableHeader>
+    <TableHeader>Timestamp</TableHeader>
+  </Grid>
+);
diff --git a/src/lib/pages/blocks/components/BlocksMobileCard.tsx b/src/lib/pages/blocks/components/BlocksTableMobileCard.tsx
similarity index 94%
rename from src/lib/pages/blocks/components/BlocksMobileCard.tsx
rename to src/lib/pages/blocks/components/BlocksTableMobileCard.tsx
index 69c2f3b98..d28b29ab1 100644
--- a/src/lib/pages/blocks/components/BlocksMobileCard.tsx
+++ b/src/lib/pages/blocks/components/BlocksTableMobileCard.tsx
@@ -8,10 +8,12 @@ import { MobileLabel } from "lib/components/table/MobileLabel";
 import type { BlockInfo } from "lib/types/block";
 import { dateFromNow, formatUTC, truncate } from "lib/utils";
 
-interface BlocksMobileCardProps {
+interface BlocksTableMobileCardProps {
   blockData: BlockInfo;
 }
-export const BlocksMobileCard = ({ blockData }: BlocksMobileCardProps) => {
+export const BlocksTableMobileCard = ({
+  blockData,
+}: BlocksTableMobileCardProps) => {
   const navigate = useInternalNavigate();
   return (
     <MobileCardTemplate
diff --git a/src/lib/pages/blocks/components/BlocksTableRow.tsx b/src/lib/pages/blocks/components/BlocksTableRow.tsx
new file mode 100644
index 000000000..4676724b9
--- /dev/null
+++ b/src/lib/pages/blocks/components/BlocksTableRow.tsx
@@ -0,0 +1,54 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Flex, Text, Grid } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { TableRow } from "lib/components/table";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { BlockInfo } from "lib/types/block";
+import { dateFromNow, formatUTC, truncate } from "lib/utils";
+
+interface BlocksTableRowProps {
+  templateColumns: GridProps["templateColumns"];
+  blockData: BlockInfo;
+}
+
+export const BlocksTableRow = ({
+  templateColumns,
+  blockData,
+}: BlocksTableRowProps) => (
+  <Grid templateColumns={templateColumns}>
+    <TableRow>
+      <ExplorerLink
+        type="block_height"
+        value={blockData.height.toString()}
+        showCopyOnHover
+      >
+        {blockData.height}
+      </ExplorerLink>
+    </TableRow>
+    <TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
+    <TableRow>
+      <ValidatorBadge
+        validator={blockData.proposer}
+        badgeSize={7}
+        maxWidth="220px"
+      />
+    </TableRow>
+    <TableRow
+      justifyContent="center"
+      color={blockData.txCount === 0 ? "text.dark" : "text.main"}
+    >
+      {blockData.txCount}
+    </TableRow>
+    <TableRow>
+      <Flex direction="column">
+        <Text variant="body2" color="text.dark">
+          {formatUTC(blockData.timestamp)}
+        </Text>
+        <Text variant="body3" color="text.disabled">
+          ({dateFromNow(blockData.timestamp)})
+        </Text>
+      </Flex>
+    </TableRow>
+  </Grid>
+);

From d692b038465e1109cec4242709f6e2ec27aa1f95 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 02:00:55 +0700
Subject: [PATCH 148/368] fix: naming

---
 .../account/PublicProjectAccountMobileCard.tsx            | 2 +-
 .../{table => tables}/account/PublicProjectAccountRow.tsx | 0
 .../account/index.tsx}                                    | 0
 .../code/PublicProjectCodeMobileCard.tsx                  | 0
 .../{table => tables}/code/PublicProjectCodeRow.tsx       | 2 +-
 .../PublicProjectCodeTable.tsx => tables/code/index.tsx}  | 0
 .../contract/PublicProjectContractMobileCard.tsx          | 2 +-
 .../contract/PublicProjectContractRow.tsx                 | 2 +-
 .../contract/index.tsx}                                   | 0
 src/lib/pages/public-project/components/tables/index.ts   | 3 +++
 src/lib/pages/public-project/slug.tsx                     | 8 +++++---
 11 files changed, 12 insertions(+), 7 deletions(-)
 rename src/lib/pages/public-project/components/{table => tables}/account/PublicProjectAccountMobileCard.tsx (97%)
 rename src/lib/pages/public-project/components/{table => tables}/account/PublicProjectAccountRow.tsx (100%)
 rename src/lib/pages/public-project/components/{table/account/PublicProjectAccountTable.tsx => tables/account/index.tsx} (100%)
 rename src/lib/pages/public-project/components/{table => tables}/code/PublicProjectCodeMobileCard.tsx (100%)
 rename src/lib/pages/public-project/components/{table => tables}/code/PublicProjectCodeRow.tsx (97%)
 rename src/lib/pages/public-project/components/{table/code/PublicProjectCodeTable.tsx => tables/code/index.tsx} (100%)
 rename src/lib/pages/public-project/components/{table => tables}/contract/PublicProjectContractMobileCard.tsx (97%)
 rename src/lib/pages/public-project/components/{table => tables}/contract/PublicProjectContractRow.tsx (98%)
 rename src/lib/pages/public-project/components/{table/contract/PublicProjectContractTable.tsx => tables/contract/index.tsx} (100%)
 create mode 100644 src/lib/pages/public-project/components/tables/index.ts

diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountMobileCard.tsx b/src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx
similarity index 97%
rename from src/lib/pages/public-project/components/table/account/PublicProjectAccountMobileCard.tsx
rename to src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx
index d8cc7781d..35a3d673d 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountMobileCard.tsx
+++ b/src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx
@@ -3,7 +3,7 @@ import { Flex, Text } from "@chakra-ui/react";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { MobileCardTemplate, MobileLabel } from "lib/components/table";
-import { getNavigationArgs } from "lib/pages/public-project/components/table/account/PublicProjectAccountRow";
+import { getNavigationArgs } from "lib/pages/public-project/components/tables/account/PublicProjectAccountRow";
 import type { Account } from "lib/types";
 
 interface PublicProjectAccountMobileCardProps {
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx b/src/lib/pages/public-project/components/tables/account/PublicProjectAccountRow.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
rename to src/lib/pages/public-project/components/tables/account/PublicProjectAccountRow.tsx
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx b/src/lib/pages/public-project/components/tables/account/index.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
rename to src/lib/pages/public-project/components/tables/account/index.tsx
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeMobileCard.tsx b/src/lib/pages/public-project/components/tables/code/PublicProjectCodeMobileCard.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/table/code/PublicProjectCodeMobileCard.tsx
rename to src/lib/pages/public-project/components/tables/code/PublicProjectCodeMobileCard.tsx
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx b/src/lib/pages/public-project/components/tables/code/PublicProjectCodeRow.tsx
similarity index 97%
rename from src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
rename to src/lib/pages/public-project/components/tables/code/PublicProjectCodeRow.tsx
index 05ba22d8d..4c61bdf9f 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
+++ b/src/lib/pages/public-project/components/tables/code/PublicProjectCodeRow.tsx
@@ -11,7 +11,7 @@ import { PermissionChip } from "lib/components/PermissionChip";
 import { TableRow } from "lib/components/table";
 import { getCw2Info } from "lib/utils";
 
-import type { PublicCodeInfo } from "./PublicProjectCodeTable";
+import type { PublicCodeInfo } from ".";
 
 interface CodeTableRowProps {
   publicCodeInfo: PublicCodeInfo;
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/tables/code/index.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
rename to src/lib/pages/public-project/components/tables/code/index.tsx
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractMobileCard.tsx b/src/lib/pages/public-project/components/tables/contract/PublicProjectContractMobileCard.tsx
similarity index 97%
rename from src/lib/pages/public-project/components/table/contract/PublicProjectContractMobileCard.tsx
rename to src/lib/pages/public-project/components/tables/contract/PublicProjectContractMobileCard.tsx
index 2b5c60b85..835c9465d 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractMobileCard.tsx
+++ b/src/lib/pages/public-project/components/tables/contract/PublicProjectContractMobileCard.tsx
@@ -8,7 +8,7 @@ import { AppLink } from "lib/components/AppLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { MobileCardTemplate, MobileLabel } from "lib/components/table";
 
-import type { PublicContractInfo } from "./PublicProjectContractTable";
+import type { PublicContractInfo } from ".";
 
 interface PublicProjectContractMobileCardProps {
   publicContractInfo: PublicContractInfo;
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx b/src/lib/pages/public-project/components/tables/contract/PublicProjectContractRow.tsx
similarity index 98%
rename from src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
rename to src/lib/pages/public-project/components/tables/contract/PublicProjectContractRow.tsx
index 5cc1b2e2f..1fad66ace 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
+++ b/src/lib/pages/public-project/components/tables/contract/PublicProjectContractRow.tsx
@@ -22,7 +22,7 @@ import {
 import { TableRow } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
 
-import type { PublicContractInfo } from "./PublicProjectContractTable";
+import type { PublicContractInfo } from ".";
 
 interface ContractTableRowProps {
   publicContractInfo: PublicContractInfo;
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/tables/contract/index.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
rename to src/lib/pages/public-project/components/tables/contract/index.tsx
diff --git a/src/lib/pages/public-project/components/tables/index.ts b/src/lib/pages/public-project/components/tables/index.ts
new file mode 100644
index 000000000..f56a06ea6
--- /dev/null
+++ b/src/lib/pages/public-project/components/tables/index.ts
@@ -0,0 +1,3 @@
+export * from "./account";
+export * from "./code";
+export * from "./contract";
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index b8cb5dbab..8409c6ddb 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -14,9 +14,11 @@ import PageContainer from "lib/components/PageContainer";
 import { getFirstQueryParam } from "lib/utils";
 
 import { DetailHeader } from "./components/DetailHeader";
-import { PublicProjectAccountTable } from "./components/table/account/PublicProjectAccountTable";
-import { PublicProjectCodeTable } from "./components/table/code/PublicProjectCodeTable";
-import { PublicProjectContractTable } from "./components/table/contract/PublicProjectContractTable";
+import {
+  PublicProjectAccountTable,
+  PublicProjectCodeTable,
+  PublicProjectContractTable,
+} from "./components/tables";
 import { usePublicData } from "./data";
 
 enum TabIndex {

From bad6f9df386e887a9ee2dc0045057aebee467e30 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 02:40:24 +0700
Subject: [PATCH 149/368] fix: import

---
 src/lib/components/filter/index.ts            |  4 ++
 .../table/codes/CodesTableMobileCard.tsx      |  2 +-
 .../proposals/ProposalsTableMobileCard.tsx    |  4 +-
 .../table/proposals/ProposalsTableRow.tsx     |  2 +-
 src/lib/components/table/proposals/index.ts   |  1 +
 .../TransactionsTableMobileCard.tsx           |  8 ++--
 .../components/BlocksTableMobileCard.tsx      |  9 ++---
 .../tables/migration/MigrationMobileCard.tsx  | 10 +++--
 .../tables/migration/MigrationRow.tsx         | 36 +-----------------
 .../tables/migration/RemarkRender.tsx         | 38 +++++++++++++++++++
 .../components/tables/migration/index.tsx     |  2 +-
 .../pool-assets/PoolAssetsTableHeader.tsx     |  2 +-
 .../tables/pool-assets/PoolAssetsTableRow.tsx |  2 +-
 .../pool-details/tables/pool-assets/index.tsx |  2 +-
 .../components/ProposalStatusFilter.tsx       | 12 +++---
 .../components/ProposalTypeFilter.tsx         | 10 +++--
 .../PublicProjectAccountMobileCard.tsx        |  3 +-
 .../account/PublicProjectAccountRow.tsx       | 22 +----------
 .../components/tables/account/utils.ts        | 21 ++++++++++
 .../code/PublicProjectCodeMobileCard.tsx      | 10 ++---
 .../components/tables/code/index.tsx          |  2 +-
 .../components/tables/contract/index.tsx      |  9 ++++-
 22 files changed, 119 insertions(+), 92 deletions(-)
 create mode 100644 src/lib/components/filter/index.ts
 create mode 100644 src/lib/pages/contract-details/components/tables/migration/RemarkRender.tsx
 create mode 100644 src/lib/pages/public-project/components/tables/account/utils.ts

diff --git a/src/lib/components/filter/index.ts b/src/lib/components/filter/index.ts
new file mode 100644
index 000000000..cf72631da
--- /dev/null
+++ b/src/lib/components/filter/index.ts
@@ -0,0 +1,4 @@
+export * from "./FilterChip";
+export * from "./FilterComponents";
+export * from "./FilterDropdownItem";
+export * from "./FilterInput";
diff --git a/src/lib/components/table/codes/CodesTableMobileCard.tsx b/src/lib/components/table/codes/CodesTableMobileCard.tsx
index fa71a5312..3c8205f5b 100644
--- a/src/lib/components/table/codes/CodesTableMobileCard.tsx
+++ b/src/lib/components/table/codes/CodesTableMobileCard.tsx
@@ -1,10 +1,10 @@
 import { Flex, Text } from "@chakra-ui/react";
 
 import { MobileCardTemplate } from "../MobileCardTemplate";
+import { MobileLabel } from "../MobileLabel";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { PermissionChip } from "lib/components/PermissionChip";
-import { MobileLabel } from "lib/components/table/MobileLabel";
 import type { CodeInfo } from "lib/types";
 import { getCw2Info } from "lib/utils";
 
diff --git a/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx b/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx
index 0474bbea1..2f02b17a2 100644
--- a/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableMobileCard.tsx
@@ -1,8 +1,8 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { ExplorerLink } from "../../ExplorerLink";
 import { MobileCardTemplate } from "../MobileCardTemplate";
-import { MobileLabel } from "lib/components/table/MobileLabel";
+import { MobileLabel } from "../MobileLabel";
+import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
 
diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index fd4d71829..f0c1110d1 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -6,12 +6,12 @@ import { useTrack } from "lib/amplitude";
 import { useBaseApiRoute, useCelatoneApp } from "lib/app-provider";
 import { ExplorerLink, getNavigationUrl } from "lib/components/ExplorerLink";
 import { StopPropagationBox } from "lib/components/StopPropagationBox";
-import { Proposer } from "lib/components/table/proposals/Proposer";
 import type { Option, Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
 import { openNewTab } from "lib/utils";
 
 import { ProposalTextCell } from "./ProposalTextCell";
+import { Proposer } from "./Proposer";
 import { ResolvedHeight } from "./ResolvedHeight";
 import { StatusChip } from "./StatusChip";
 import { VotingEndTime } from "./VotingEndTime";
diff --git a/src/lib/components/table/proposals/index.ts b/src/lib/components/table/proposals/index.ts
index 65dc025db..ff9cc1126 100644
--- a/src/lib/components/table/proposals/index.ts
+++ b/src/lib/components/table/proposals/index.ts
@@ -1 +1,2 @@
 export * from "./ProposalsTable";
+export * from "./StatusChip";
diff --git a/src/lib/components/table/transactions/TransactionsTableMobileCard.tsx b/src/lib/components/table/transactions/TransactionsTableMobileCard.tsx
index 2206fcfac..e2d310ef3 100644
--- a/src/lib/components/table/transactions/TransactionsTableMobileCard.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableMobileCard.tsx
@@ -1,11 +1,11 @@
 import { Flex, Tag, Text } from "@chakra-ui/react";
 
-import { RenderActionMessages } from "../../action-msg/ActionMessages";
-import { ExplorerLink } from "../../ExplorerLink";
-import { CustomIcon } from "../../icon";
 import { MobileCardTemplate } from "../MobileCardTemplate";
+import { MobileLabel } from "../MobileLabel";
 import { useInternalNavigate } from "lib/app-provider";
-import { MobileLabel } from "lib/components/table/MobileLabel";
+import { RenderActionMessages } from "lib/components/action-msg/ActionMessages";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
 import type { Transaction } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
diff --git a/src/lib/pages/blocks/components/BlocksTableMobileCard.tsx b/src/lib/pages/blocks/components/BlocksTableMobileCard.tsx
index d28b29ab1..c453e2eea 100644
--- a/src/lib/pages/blocks/components/BlocksTableMobileCard.tsx
+++ b/src/lib/pages/blocks/components/BlocksTableMobileCard.tsx
@@ -1,11 +1,10 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { ExplorerLink } from "../../../components/ExplorerLink";
-import { MobileCardTemplate } from "../../../components/table/MobileCardTemplate";
-import { ValidatorBadge } from "../../../components/ValidatorBadge";
 import { useInternalNavigate } from "lib/app-provider";
-import { MobileLabel } from "lib/components/table/MobileLabel";
-import type { BlockInfo } from "lib/types/block";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { BlockInfo } from "lib/types";
 import { dateFromNow, formatUTC, truncate } from "lib/utils";
 
 interface BlocksTableMobileCardProps {
diff --git a/src/lib/pages/contract-details/components/tables/migration/MigrationMobileCard.tsx b/src/lib/pages/contract-details/components/tables/migration/MigrationMobileCard.tsx
index bea7dfaa4..02e8b43d0 100644
--- a/src/lib/pages/contract-details/components/tables/migration/MigrationMobileCard.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/MigrationMobileCard.tsx
@@ -2,12 +2,16 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { useGetAddressType, useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
-import { CodeNameCell, MobileCardTemplate } from "lib/components/table";
-import { MobileLabel } from "lib/components/table/MobileLabel";
-import { RemarkRender } from "lib/pages/contract-details/components/tables/migration/MigrationRow";
+import {
+  CodeNameCell,
+  MobileCardTemplate,
+  MobileLabel,
+} from "lib/components/table";
 import type { ContractMigrationHistory } from "lib/types";
 import { dateFromNow, formatUTC, getCw2Info } from "lib/utils";
 
+import { RemarkRender } from "./RemarkRender";
+
 interface MigrationMobileCardProps {
   history: ContractMigrationHistory;
 }
diff --git a/src/lib/pages/contract-details/components/tables/migration/MigrationRow.tsx b/src/lib/pages/contract-details/components/tables/migration/MigrationRow.tsx
index 658a1fd80..ed4ae123b 100644
--- a/src/lib/pages/contract-details/components/tables/migration/MigrationRow.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/MigrationRow.tsx
@@ -1,6 +1,5 @@
 import type { GridProps } from "@chakra-ui/react";
 import { Flex, Grid, Text } from "@chakra-ui/react";
-import { capitalize } from "lodash";
 
 import { useGetAddressType } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -8,44 +7,13 @@ import { TableRow, CodeNameCell } from "lib/components/table";
 import type { ContractMigrationHistory } from "lib/types";
 import { dateFromNow, formatUTC, getCw2Info } from "lib/utils";
 
+import { RemarkRender } from "./RemarkRender";
+
 interface MigrationRowProps {
   templateColumns: GridProps["templateColumns"];
   history: ContractMigrationHistory;
 }
 
-export const RemarkRender = ({
-  remark,
-}: {
-  remark: ContractMigrationHistory["remark"];
-}) => {
-  const { operation, type, value } = remark;
-  if (type === "genesis") return <Text variant="body2">Genesis</Text>;
-
-  const isGovernance = type === "governance";
-  const prefix = capitalize(operation.split("_").pop());
-  const textFormat = isGovernance ? "normal" : "truncate";
-  return (
-    <Flex
-      direction="column"
-      sx={{
-        "& > p:first-of-type": {
-          color: "text.dark",
-          fontSize: "12px",
-        },
-      }}
-      mb={{ base: 0, md: "2px" }}
-    >
-      <p>{isGovernance ? `${prefix} Proposal ID` : `${prefix} Tx`}</p>
-      <ExplorerLink
-        type={isGovernance ? "proposal_id" : "tx_hash"}
-        value={value.toString()}
-        showCopyOnHover
-        textFormat={textFormat}
-      />
-    </Flex>
-  );
-};
-
 export const MigrationRow = ({
   templateColumns,
   history,
diff --git a/src/lib/pages/contract-details/components/tables/migration/RemarkRender.tsx b/src/lib/pages/contract-details/components/tables/migration/RemarkRender.tsx
new file mode 100644
index 000000000..ec09ae880
--- /dev/null
+++ b/src/lib/pages/contract-details/components/tables/migration/RemarkRender.tsx
@@ -0,0 +1,38 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { capitalize } from "lodash";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { ContractMigrationHistory } from "lib/types";
+
+export const RemarkRender = ({
+  remark,
+}: {
+  remark: ContractMigrationHistory["remark"];
+}) => {
+  const { operation, type, value } = remark;
+  if (type === "genesis") return <Text variant="body2">Genesis</Text>;
+
+  const isGovernance = type === "governance";
+  const prefix = capitalize(operation.split("_").pop());
+  const textFormat = isGovernance ? "normal" : "truncate";
+  return (
+    <Flex
+      direction="column"
+      sx={{
+        "& > p:first-of-type": {
+          color: "text.dark",
+          fontSize: "12px",
+        },
+      }}
+      mb={{ base: 0, md: "2px" }}
+    >
+      <p>{isGovernance ? `${prefix} Proposal ID` : `${prefix} Tx`}</p>
+      <ExplorerLink
+        type={isGovernance ? "proposal_id" : "tx_hash"}
+        value={value.toString()}
+        showCopyOnHover
+        textFormat={textFormat}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/contract-details/components/tables/migration/index.tsx b/src/lib/pages/contract-details/components/tables/migration/index.tsx
index d31ec1c6d..7bf96037e 100644
--- a/src/lib/pages/contract-details/components/tables/migration/index.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/index.tsx
@@ -6,11 +6,11 @@ import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
 import { TableContainer } from "lib/components/table";
-import { MigrationMobileCard } from "lib/pages/contract-details/components/tables/migration/MigrationMobileCard";
 import { useMigrationHistories } from "lib/pages/contract-details/data";
 import type { ContractAddr, Option } from "lib/types";
 
 import { MigrationHeader } from "./MigrationHeader";
+import { MigrationMobileCard } from "./MigrationMobileCard";
 import { MigrationRow } from "./MigrationRow";
 
 interface MigrationTableProps {
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
index a424e13f7..c9ed2b3a2 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
@@ -1,7 +1,7 @@
 import type { GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
-import { TableHeader } from "lib/components/table/tableComponents";
+import { TableHeader } from "lib/components/table";
 import type { PoolDetail } from "lib/types";
 import { PoolType } from "lib/types";
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index b77749128..f0ed874b9 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -3,7 +3,7 @@ import { Flex, Grid, Image, Text } from "@chakra-ui/react";
 import type { Big } from "big.js";
 
 import { Copier } from "lib/components/copy";
-import { TableRow } from "lib/components/table/tableComponents";
+import { TableRow } from "lib/components/table";
 import { TooltipInfo } from "lib/components/Tooltip";
 import { getUndefinedTokenIcon } from "lib/pages/pools/utils";
 import type { USD, PoolDetail, TokenWithValue, Ratio } from "lib/types";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/index.tsx
index 2ceda6217..882430ce0 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/index.tsx
@@ -1,6 +1,6 @@
 import type { Big } from "big.js";
 
-import { TableContainer } from "lib/components/table/tableComponents";
+import { TableContainer } from "lib/components/table";
 import type { PoolDetail, USD } from "lib/types";
 
 import { PoolAssetsTableHeader } from "./PoolAssetsTableHeader";
diff --git a/src/lib/pages/proposals/components/ProposalStatusFilter.tsx b/src/lib/pages/proposals/components/ProposalStatusFilter.tsx
index 98d1af948..cfb1bb795 100644
--- a/src/lib/pages/proposals/components/ProposalStatusFilter.tsx
+++ b/src/lib/pages/proposals/components/ProposalStatusFilter.tsx
@@ -5,11 +5,13 @@ import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState, useRef, forwardRef } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
-import { FilterChip } from "lib/components/filter/FilterChip";
-import { DropdownContainer } from "lib/components/filter/FilterComponents";
-import { FilterDropdownItem } from "lib/components/filter/FilterDropdownItem";
-import { FilterInput } from "lib/components/filter/FilterInput";
-import { StatusChip } from "lib/components/table/proposals/StatusChip";
+import {
+  FilterChip,
+  DropdownContainer,
+  FilterDropdownItem,
+  FilterInput,
+} from "lib/components/filter";
+import { StatusChip } from "lib/components/table";
 import { ProposalStatus } from "lib/types";
 
 export interface ProposalStatusFilterProps extends InputProps {
diff --git a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
index 0db61dcc4..523d47c3d 100644
--- a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
+++ b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
@@ -11,10 +11,12 @@ import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState, useRef, forwardRef } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
-import { FilterChip } from "lib/components/filter/FilterChip";
-import { DropdownContainer } from "lib/components/filter/FilterComponents";
-import { FilterDropdownItem } from "lib/components/filter/FilterDropdownItem";
-import { FilterInput } from "lib/components/filter/FilterInput";
+import {
+  FilterChip,
+  DropdownContainer,
+  FilterDropdownItem,
+  FilterInput,
+} from "lib/components/filter";
 import { CustomIcon } from "lib/components/icon";
 import { useProposalTypes } from "lib/services/proposalService";
 import type { ProposalType } from "lib/types";
diff --git a/src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx b/src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx
index 35a3d673d..601c53741 100644
--- a/src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx
+++ b/src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx
@@ -3,9 +3,10 @@ import { Flex, Text } from "@chakra-ui/react";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { MobileCardTemplate, MobileLabel } from "lib/components/table";
-import { getNavigationArgs } from "lib/pages/public-project/components/tables/account/PublicProjectAccountRow";
 import type { Account } from "lib/types";
 
+import { getNavigationArgs } from "./utils";
+
 interface PublicProjectAccountMobileCardProps {
   accountInfo: Account;
 }
diff --git a/src/lib/pages/public-project/components/tables/account/PublicProjectAccountRow.tsx b/src/lib/pages/public-project/components/tables/account/PublicProjectAccountRow.tsx
index 5105463b5..fe87cc8ea 100644
--- a/src/lib/pages/public-project/components/tables/account/PublicProjectAccountRow.tsx
+++ b/src/lib/pages/public-project/components/tables/account/PublicProjectAccountRow.tsx
@@ -1,35 +1,17 @@
 import { Grid, Text } from "@chakra-ui/react";
 
-import type { NavigationArgs } from "lib/app-provider";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TableRow } from "lib/components/table";
 import type { Account } from "lib/types";
 
+import { getNavigationArgs } from "./utils";
+
 interface AccountTableRowProps {
   accountInfo: Account;
   templateColumns: string;
 }
 
-export const getNavigationArgs = (accountInfo: Account): NavigationArgs => {
-  switch (accountInfo.type) {
-    case "account":
-      return {
-        pathname: "/accounts/[accountAddress]",
-        query: { accountAddress: accountInfo.address },
-      };
-    case "contract":
-      return {
-        pathname: "/contracts/[accountAddress]",
-        query: { accountAddress: accountInfo.address },
-      };
-    default:
-      return {
-        pathname: "",
-      };
-  }
-};
-
 export const PublicProjectAccountRow = ({
   accountInfo,
   templateColumns,
diff --git a/src/lib/pages/public-project/components/tables/account/utils.ts b/src/lib/pages/public-project/components/tables/account/utils.ts
new file mode 100644
index 000000000..9c29d530e
--- /dev/null
+++ b/src/lib/pages/public-project/components/tables/account/utils.ts
@@ -0,0 +1,21 @@
+import type { NavigationArgs } from "lib/app-provider";
+import type { Account } from "lib/types";
+
+export const getNavigationArgs = (accountInfo: Account): NavigationArgs => {
+  switch (accountInfo.type) {
+    case "account":
+      return {
+        pathname: "/accounts/[accountAddress]",
+        query: { accountAddress: accountInfo.address },
+      };
+    case "contract":
+      return {
+        pathname: "/contracts/[accountAddress]",
+        query: { accountAddress: accountInfo.address },
+      };
+    default:
+      return {
+        pathname: "",
+      };
+  }
+};
diff --git a/src/lib/pages/public-project/components/tables/code/PublicProjectCodeMobileCard.tsx b/src/lib/pages/public-project/components/tables/code/PublicProjectCodeMobileCard.tsx
index bb243f403..539071bc1 100644
--- a/src/lib/pages/public-project/components/tables/code/PublicProjectCodeMobileCard.tsx
+++ b/src/lib/pages/public-project/components/tables/code/PublicProjectCodeMobileCard.tsx
@@ -3,16 +3,16 @@ import { Flex, Text } from "@chakra-ui/react";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { PermissionChip } from "lib/components/PermissionChip";
-import { MobileCardTemplate } from "lib/components/table";
-import { MobileLabel } from "lib/components/table/MobileLabel";
-import type { PublicCode } from "lib/types";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
 import { getCw2Info } from "lib/utils";
 
+import type { PublicCodeInfo } from ".";
+
 interface PublicProjectCodeMobileCardProps {
-  publicInfo: PublicCode;
+  publicCodeInfo: PublicCodeInfo;
 }
 export const PublicProjectCodeMobileCard = ({
-  publicInfo,
+  publicCodeInfo: { publicInfo },
 }: PublicProjectCodeMobileCardProps) => {
   const cw2Info = getCw2Info(publicInfo.cw2Contract, publicInfo.cw2Version);
   const navigate = useInternalNavigate();
diff --git a/src/lib/pages/public-project/components/tables/code/index.tsx b/src/lib/pages/public-project/components/tables/code/index.tsx
index afa3d8a3e..c4ec80138 100644
--- a/src/lib/pages/public-project/components/tables/code/index.tsx
+++ b/src/lib/pages/public-project/components/tables/code/index.tsx
@@ -50,7 +50,7 @@ const ContentRender = ({
       {publicCodes.map((code) => (
         <PublicProjectCodeMobileCard
           key={code.publicInfo.id}
-          publicInfo={code.publicInfo}
+          publicCodeInfo={code}
         />
       ))}
     </Flex>
diff --git a/src/lib/pages/public-project/components/tables/contract/index.tsx b/src/lib/pages/public-project/components/tables/contract/index.tsx
index 4f4f9491e..a3b009c9a 100644
--- a/src/lib/pages/public-project/components/tables/contract/index.tsx
+++ b/src/lib/pages/public-project/components/tables/contract/index.tsx
@@ -1,4 +1,4 @@
-import { TableContainer, Grid, Box, Flex } from "@chakra-ui/react";
+import { Grid, Box, Flex } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
@@ -6,7 +6,12 @@ import { useMemo, useState } from "react";
 import { useMobile } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
-import { TableHeader, TableTitle, ViewMore } from "lib/components/table";
+import {
+  TableContainer,
+  TableHeader,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
 import { useContractStore } from "lib/providers/store";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { PublicContract, Option, ContractAddr } from "lib/types";

From 28eed2444b25d5088f1bc7541ed108a1255d367b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 11:00:58 +0700
Subject: [PATCH 150/368] fix: renaming folder

---
 .../PublicProjectAccountMobileCard.tsx                      | 0
 .../{account => accounts}/PublicProjectAccountRow.tsx       | 0
 .../components/tables/{account => accounts}/index.tsx       | 0
 .../components/tables/{account => accounts}/utils.ts        | 0
 .../tables/{code => codes}/PublicProjectCodeMobileCard.tsx  | 0
 .../tables/{code => codes}/PublicProjectCodeRow.tsx         | 0
 .../components/tables/{code => codes}/index.tsx             | 0
 .../PublicProjectContractMobileCard.tsx                     | 0
 .../{contract => contracts}/PublicProjectContractRow.tsx    | 0
 .../components/tables/{contract => contracts}/index.tsx     | 0
 src/lib/pages/public-project/components/tables/index.ts     | 6 +++---
 11 files changed, 3 insertions(+), 3 deletions(-)
 rename src/lib/pages/public-project/components/tables/{account => accounts}/PublicProjectAccountMobileCard.tsx (100%)
 rename src/lib/pages/public-project/components/tables/{account => accounts}/PublicProjectAccountRow.tsx (100%)
 rename src/lib/pages/public-project/components/tables/{account => accounts}/index.tsx (100%)
 rename src/lib/pages/public-project/components/tables/{account => accounts}/utils.ts (100%)
 rename src/lib/pages/public-project/components/tables/{code => codes}/PublicProjectCodeMobileCard.tsx (100%)
 rename src/lib/pages/public-project/components/tables/{code => codes}/PublicProjectCodeRow.tsx (100%)
 rename src/lib/pages/public-project/components/tables/{code => codes}/index.tsx (100%)
 rename src/lib/pages/public-project/components/tables/{contract => contracts}/PublicProjectContractMobileCard.tsx (100%)
 rename src/lib/pages/public-project/components/tables/{contract => contracts}/PublicProjectContractRow.tsx (100%)
 rename src/lib/pages/public-project/components/tables/{contract => contracts}/index.tsx (100%)

diff --git a/src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx b/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountMobileCard.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/account/PublicProjectAccountMobileCard.tsx
rename to src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountMobileCard.tsx
diff --git a/src/lib/pages/public-project/components/tables/account/PublicProjectAccountRow.tsx b/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountRow.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/account/PublicProjectAccountRow.tsx
rename to src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountRow.tsx
diff --git a/src/lib/pages/public-project/components/tables/account/index.tsx b/src/lib/pages/public-project/components/tables/accounts/index.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/account/index.tsx
rename to src/lib/pages/public-project/components/tables/accounts/index.tsx
diff --git a/src/lib/pages/public-project/components/tables/account/utils.ts b/src/lib/pages/public-project/components/tables/accounts/utils.ts
similarity index 100%
rename from src/lib/pages/public-project/components/tables/account/utils.ts
rename to src/lib/pages/public-project/components/tables/accounts/utils.ts
diff --git a/src/lib/pages/public-project/components/tables/code/PublicProjectCodeMobileCard.tsx b/src/lib/pages/public-project/components/tables/codes/PublicProjectCodeMobileCard.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/code/PublicProjectCodeMobileCard.tsx
rename to src/lib/pages/public-project/components/tables/codes/PublicProjectCodeMobileCard.tsx
diff --git a/src/lib/pages/public-project/components/tables/code/PublicProjectCodeRow.tsx b/src/lib/pages/public-project/components/tables/codes/PublicProjectCodeRow.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/code/PublicProjectCodeRow.tsx
rename to src/lib/pages/public-project/components/tables/codes/PublicProjectCodeRow.tsx
diff --git a/src/lib/pages/public-project/components/tables/code/index.tsx b/src/lib/pages/public-project/components/tables/codes/index.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/code/index.tsx
rename to src/lib/pages/public-project/components/tables/codes/index.tsx
diff --git a/src/lib/pages/public-project/components/tables/contract/PublicProjectContractMobileCard.tsx b/src/lib/pages/public-project/components/tables/contracts/PublicProjectContractMobileCard.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/contract/PublicProjectContractMobileCard.tsx
rename to src/lib/pages/public-project/components/tables/contracts/PublicProjectContractMobileCard.tsx
diff --git a/src/lib/pages/public-project/components/tables/contract/PublicProjectContractRow.tsx b/src/lib/pages/public-project/components/tables/contracts/PublicProjectContractRow.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/contract/PublicProjectContractRow.tsx
rename to src/lib/pages/public-project/components/tables/contracts/PublicProjectContractRow.tsx
diff --git a/src/lib/pages/public-project/components/tables/contract/index.tsx b/src/lib/pages/public-project/components/tables/contracts/index.tsx
similarity index 100%
rename from src/lib/pages/public-project/components/tables/contract/index.tsx
rename to src/lib/pages/public-project/components/tables/contracts/index.tsx
diff --git a/src/lib/pages/public-project/components/tables/index.ts b/src/lib/pages/public-project/components/tables/index.ts
index f56a06ea6..1c103833a 100644
--- a/src/lib/pages/public-project/components/tables/index.ts
+++ b/src/lib/pages/public-project/components/tables/index.ts
@@ -1,3 +1,3 @@
-export * from "./account";
-export * from "./code";
-export * from "./contract";
+export * from "./accounts";
+export * from "./codes";
+export * from "./contracts";

From 371ca120aad2f67f22d98139e319aa53883132db Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 11:14:55 +0700
Subject: [PATCH 151/368] fix: rename

---
 src/lib/components/EstimatedFeeRender.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx
index 37c7a9168..a37624669 100644
--- a/src/lib/components/EstimatedFeeRender.tsx
+++ b/src/lib/components/EstimatedFeeRender.tsx
@@ -15,23 +15,18 @@ export const EstimatedFeeRender = ({
     withPrices: false,
   });
 
-  if (isAssetInfoLoading) {
-    return <Spinner size="sm" mx={1} />;
-  }
-
-  if (loading) {
+  if (isAssetInfoLoading) return <Spinner size="sm" mx={1} />;
+  if (loading)
     return (
       <>
         <Spinner size="sm" mx={1} /> Estimating ...
       </>
     );
-  }
-  const coin = estimatedFee?.amount.at(0);
 
+  const coin = estimatedFee?.amount.at(0);
   if (!coin) return <>--</>;
 
   const chainAssetInfo = assetInfos?.[coin.denom];
-
   return (
     <>
       {formatBalanceWithDenom({

From 51518656ca5f67380b667ecc789da981b9e16cec Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 11 Oct 2023 11:20:49 +0700
Subject: [PATCH 152/368] fix: previous policy logic

---
 .../pages/module-details/components/tables/history/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/module-details/components/tables/history/index.tsx b/src/lib/pages/module-details/components/tables/history/index.tsx
index 81d07b946..6b95984eb 100644
--- a/src/lib/pages/module-details/components/tables/history/index.tsx
+++ b/src/lib/pages/module-details/components/tables/history/index.tsx
@@ -54,7 +54,7 @@ export const ModuleHistoryTable = ({
     error,
   } = useModuleHistoriesByPagination({
     moduleId,
-    pageSize,
+    pageSize: pageSize + 1,
     offset,
   });
 
@@ -76,6 +76,7 @@ export const ModuleHistoryTable = ({
     if (!onViewMore) setPageSize(10);
     setCurrentPage(1);
   }, [currentChainId, onViewMore, setCurrentPage, setPageSize]);
+
   if (!moduleId || error)
     return (
       <EmptyState
@@ -120,7 +121,7 @@ export const ModuleHistoryTable = ({
     <>
       <TableContainer>
         <ModuleHistoryHeader templateColumns={TEMPLATE_COLUMNS} />
-        {moduleHistories.map((history) => (
+        {moduleHistories.slice(0, pageSize).map((history) => (
           <ModuleHistoryRow
             key={JSON.stringify(history)}
             templateColumns={TEMPLATE_COLUMNS}

From 8259b30903ef2cf9bc426a134ecbf575110aa7f0 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 11 Oct 2023 11:23:39 +0700
Subject: [PATCH 153/368] fix(components): fix icon accordion

---
 .../components/resource/ResourceDetailCard.tsx  | 10 ++++++++--
 .../components/resources/ResourceSection.tsx    | 17 ++++++++---------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index d8180be7f..813e68ac1 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -1,5 +1,6 @@
 import {
   AccordionButton,
+  AccordionIcon,
   AccordionItem,
   AccordionPanel,
   Flex,
@@ -56,7 +57,12 @@ export const ResourceDetailCard = ({
           align="center"
           gap={8}
         >
-          <Text variant="body1" fontWeight={600} textAlign="left">
+          <Text
+            variant="body1"
+            fontWeight={600}
+            textAlign="left"
+            wordBreak="break-word"
+          >
             {resourceData.structTag}
           </Text>
           <Flex alignItems="center" gap={2} minW={36}>
@@ -67,7 +73,7 @@ export const ResourceDetailCard = ({
               size="xs"
               buttonText="Copy JSON"
             />
-            <CustomIcon name="chevron-down" color="gray.600" />
+            <AccordionIcon color="gray.600" />
           </Flex>
         </Flex>
       </AccordionButton>
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 8f582eb6c..bc49818f1 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -10,7 +10,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
@@ -64,6 +64,8 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
     address,
   });
 
+  useEffect(() => setExpandedIndexes([0]), [selectedNameParam]);
+
   if (isLoading) return <Loading />;
   if (!resources) return <ErrorFetching />;
   if (resources.length === 0)
@@ -99,19 +101,16 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
 
   const groupedResources = Object.values(sortedResource);
 
-  const selectedGroup =
-    groupedResources.find((item) => item.owner === selectedAccountParam) ??
-    groupedResources[0];
-  const selectedGroupArray = Object.values(selectedGroup.resources);
+  const selectedIndex = !selectedAccountParam
+    ? 0
+    : groupedResources.findIndex((item) => item.owner === selectedAccountParam);
+  const selectedGroup = groupedResources[selectedIndex];
 
+  const selectedGroupArray = Object.values(selectedGroup.resources);
   const selectedResources =
     selectedGroupArray.find((item) => item.group === selectedNameParam) ??
     selectedGroupArray[0];
 
-  const selectedIndex = !selectedAccountParam
-    ? 0
-    : groupedResources.findIndex((item) => item.owner === selectedAccountParam);
-
   const updateExpandedIndexes = (indexes: number[]) =>
     setExpandedIndexes(indexes);
 

From 1c14eeeb80a4acb2a7df2d4e30a89a4606435095 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 12:33:00 +0700
Subject: [PATCH 154/368] fix: comment

---
 src/lib/components/table/codes/CodesTable.tsx      |  8 +++-----
 .../components/table/contracts/ContractsTable.tsx  |  8 +++-----
 .../table/contracts/ContractsTableMobileCard.tsx   | 14 +++++++++-----
 .../components/table/proposals/ProposalsTable.tsx  |  8 +++-----
 src/lib/components/table/tableComponents.ts        | 12 +++++++++++-
 .../table/transactions/TransactionsTable.tsx       |  8 +++-----
 .../components/tables/OpenedProposalsTable.tsx     |  1 -
 .../components/tables/bonded/DelegationsTable.tsx  | 12 ++++++++----
 .../components/tables/bonded/UnbondingsTable.tsx   | 12 ++++++++----
 .../account-details/components/tables/index.ts     |  2 +-
 .../NonRedelegatableTableHeader.tsx                |  0
 .../NonRedelegatableTableMobileCard.tsx            |  0
 .../NonRedelegatableTableRow.tsx                   |  0
 .../index.tsx                                      | 11 +++++------
 .../components/tables/redelegation/index.tsx       |  7 ++++---
 src/lib/pages/blocks/components/BlocksTable.tsx    |  7 +++----
 .../components/tables/migration/index.tsx          |  7 +++----
 .../components/tables/accounts/index.tsx           |  7 ++++---
 .../components/tables/codes/index.tsx              | 13 +++++++++----
 .../components/tables/contracts/index.tsx          |  7 ++++---
 20 files changed, 81 insertions(+), 63 deletions(-)
 rename src/lib/pages/account-details/components/tables/{nonRedelegatable => non-redelegatable}/NonRedelegatableTableHeader.tsx (100%)
 rename src/lib/pages/account-details/components/tables/{nonRedelegatable => non-redelegatable}/NonRedelegatableTableMobileCard.tsx (100%)
 rename src/lib/pages/account-details/components/tables/{nonRedelegatable => non-redelegatable}/NonRedelegatableTableRow.tsx (100%)
 rename src/lib/pages/account-details/components/tables/{nonRedelegatable => non-redelegatable}/index.tsx (74%)

diff --git a/src/lib/components/table/codes/CodesTable.tsx b/src/lib/components/table/codes/CodesTable.tsx
index ca5e0a8d3..b04e47ee6 100644
--- a/src/lib/components/table/codes/CodesTable.tsx
+++ b/src/lib/components/table/codes/CodesTable.tsx
@@ -1,6 +1,4 @@
-import { Flex } from "@chakra-ui/react";
-
-import { TableContainer } from "../tableComponents";
+import { MobileTableContainer, TableContainer } from "../tableComponents";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { CodeInfo, Option } from "lib/types";
@@ -34,14 +32,14 @@ export const CodesTable = ({
     : "max(100px) minmax(250px, 1fr) minmax(200px, 1fr) max(100px) max(160px) 150px 180px";
 
   return isMobile ? (
-    <Flex direction="column" gap={4} w="full" mt={4}>
+    <MobileTableContainer>
       {codes.map((code) => (
         <CodesTableMobileCard
           key={code.id + code.uploader + code.name}
           codeInfo={code}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer pb={6}>
       <CodesTableHeader
diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx
index 738d15f7e..e9e134de3 100644
--- a/src/lib/components/table/contracts/ContractsTable.tsx
+++ b/src/lib/components/table/contracts/ContractsTable.tsx
@@ -1,6 +1,4 @@
-import { Flex } from "@chakra-ui/react";
-
-import { TableContainer } from "../tableComponents";
+import { MobileTableContainer, TableContainer } from "../tableComponents";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { ContractAddr, ContractInfo, Option } from "lib/types";
@@ -45,7 +43,7 @@ export const ContractsTable = ({
       "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 260px 80px";
 
   return isMobile ? (
-    <Flex direction="column" gap={4} w="full" mt={4}>
+    <MobileTableContainer>
       {contracts.map((contractInfo) => (
         <ContractsTableMobileCard
           key={
@@ -59,7 +57,7 @@ export const ContractsTable = ({
           onRowSelect={onRowSelect}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer pb={6}>
       <ContractsTableHeader
diff --git a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
index 9500f372d..0bfaa3bc9 100644
--- a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
+++ b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
@@ -20,15 +20,19 @@ interface ContractsTableMobileCardProps {
   onRowSelect: (contract: ContractAddr) => void;
 }
 
-const instantiatorRemark = (remark: Option<ContractHistoryRemark>) => {
-  if (!remark) {
-    return <MobileLabel label="Instantiated by" />;
-  }
+const InstantiatorRemark = ({
+  remark,
+}: {
+  remark: Option<ContractHistoryRemark>;
+}) => {
+  if (!remark) return <MobileLabel label="Instantiated by" />;
+
   if (
     remark.operation ===
     RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_GENESIS
   )
     return <MobileLabel label="Genesis" />;
+
   if (
     remark.operation ===
     RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_MIGRATE
@@ -61,7 +65,7 @@ export const ContractsTableMobileCard = ({
           <ContractNameCell contractLocalInfo={contractInfo} isReadOnly />
         </Flex>
         <Flex direction="column">
-          {instantiatorRemark(contractInfo.remark)}
+          <InstantiatorRemark remark={contractInfo.remark} />
           <ContractInstantiatorCell
             contractInfo={contractInfo}
             isReadOnly={false}
diff --git a/src/lib/components/table/proposals/ProposalsTable.tsx b/src/lib/components/table/proposals/ProposalsTable.tsx
index cdabbf330..5ba8d5087 100644
--- a/src/lib/components/table/proposals/ProposalsTable.tsx
+++ b/src/lib/components/table/proposals/ProposalsTable.tsx
@@ -1,6 +1,4 @@
-import { Flex } from "@chakra-ui/react";
-
-import { TableContainer } from "../tableComponents";
+import { MobileTableContainer, TableContainer } from "../tableComponents";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { Option, Proposal } from "lib/types";
@@ -30,14 +28,14 @@ export const ProposalsTable = ({
   const boxShadow = "16px 0 32px -10px";
 
   return isMobile ? (
-    <Flex direction="column" gap={4} w="full" mt={4}>
+    <MobileTableContainer>
       {proposals.map((proposal) => (
         <ProposalsTableMobileCard
           key={proposal.proposalId}
           proposal={proposal}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer>
       <ProposalsTableHeader
diff --git a/src/lib/components/table/tableComponents.ts b/src/lib/components/table/tableComponents.ts
index 176ab586e..9e5d405e3 100644
--- a/src/lib/components/table/tableComponents.ts
+++ b/src/lib/components/table/tableComponents.ts
@@ -1,4 +1,4 @@
-import { chakra, Flex, GridItem } from "@chakra-ui/react";
+import { chakra, Flex, GridItem, SimpleGrid } from "@chakra-ui/react";
 
 export const TableContainer = chakra(Flex, {
   baseStyle: {
@@ -66,3 +66,13 @@ export const TableRowFreeze = chakra(GridItem, {
     ...stickyBaseStyle,
   },
 });
+
+// Mobile
+export const MobileTableContainer = chakra(SimpleGrid, {
+  baseStyle: {
+    columns: 1,
+    gap: 4,
+    w: "full",
+    mt: 4,
+  },
+});
diff --git a/src/lib/components/table/transactions/TransactionsTable.tsx b/src/lib/components/table/transactions/TransactionsTable.tsx
index dd66a8e8a..fa6f26027 100644
--- a/src/lib/components/table/transactions/TransactionsTable.tsx
+++ b/src/lib/components/table/transactions/TransactionsTable.tsx
@@ -1,6 +1,4 @@
-import { Flex } from "@chakra-ui/react";
-
-import { TableContainer } from "../tableComponents";
+import { MobileTableContainer, TableContainer } from "../tableComponents";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { Option, Transaction } from "lib/types";
@@ -38,14 +36,14 @@ export const TransactionsTable = ({
   }`;
 
   return isMobile ? (
-    <Flex direction="column" gap={4} w="full" mt={4}>
+    <MobileTableContainer>
       {transactions.map((transaction) => (
         <TransactionsTableMobileCard
           key={transaction.hash}
           transaction={transaction}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer>
       <TransactionsTableHeader
diff --git a/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx b/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx
index be2edcf1b..c45276979 100644
--- a/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx
@@ -76,7 +76,6 @@ export const OpenedProposalsTable = ({
         />
       ) : (
         <>
-          {" "}
           <TableTitle
             title="Opened Proposals"
             count={totalData ?? 0}
diff --git a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
index e425b154e..6a86408d3 100644
--- a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
@@ -1,9 +1,13 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
-import { TableContainer, TableTitle } from "lib/components/table";
+import {
+  MobileTableContainer,
+  TableContainer,
+  TableTitle,
+} from "lib/components/table";
 import type { Delegation } from "lib/pages/account-details/data";
 import type { Option, TokenWithValue } from "lib/types";
 
@@ -37,7 +41,7 @@ const DelegationsTableBody = ({
     );
 
   return isMobile ? (
-    <Flex direction="column" gap={4} w="full">
+    <MobileTableContainer mt={0}>
       {delegations.map((delegation) => (
         <BondedTableMobileCard
           key={
@@ -55,7 +59,7 @@ const DelegationsTableBody = ({
           }}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer>
       <BondedTableHeader templateColumns={TEMPLATE_COLUMNS} isDelegation />
diff --git a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
index a9548dff6..a9c8a53c8 100644
--- a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
@@ -1,9 +1,13 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
-import { TableContainer, TableTitle } from "lib/components/table";
+import {
+  MobileTableContainer,
+  TableContainer,
+  TableTitle,
+} from "lib/components/table";
 import type { Unbonding } from "lib/pages/account-details/data";
 import type { Option } from "lib/types";
 
@@ -33,7 +37,7 @@ const UnbondingsTableBody = ({
     );
 
   return isMobile ? (
-    <Flex direction="column" gap={4} w="full">
+    <MobileTableContainer mt={0}>
       {unbondings.map((unbonding) => (
         <BondedTableMobileCard
           key={
@@ -49,7 +53,7 @@ const UnbondingsTableBody = ({
           }}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer>
       <BondedTableHeader
diff --git a/src/lib/pages/account-details/components/tables/index.ts b/src/lib/pages/account-details/components/tables/index.ts
index dfec3a4fb..3047fd851 100644
--- a/src/lib/pages/account-details/components/tables/index.ts
+++ b/src/lib/pages/account-details/components/tables/index.ts
@@ -1,5 +1,5 @@
 export * from "./redelegation";
-export * from "./nonRedelegatable";
+export * from "./non-redelegatable";
 export * from "./bonded";
 export * from "./txs";
 export * from "./AdminContractsTable";
diff --git a/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableHeader.tsx b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableHeader.tsx
similarity index 100%
rename from src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableHeader.tsx
rename to src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableHeader.tsx
diff --git a/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx
similarity index 100%
rename from src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableMobileCard.tsx
rename to src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx
diff --git a/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableRow.tsx
similarity index 100%
rename from src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx
rename to src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableRow.tsx
diff --git a/src/lib/pages/account-details/components/tables/nonRedelegatable/index.tsx b/src/lib/pages/account-details/components/tables/non-redelegatable/index.tsx
similarity index 74%
rename from src/lib/pages/account-details/components/tables/nonRedelegatable/index.tsx
rename to src/lib/pages/account-details/components/tables/non-redelegatable/index.tsx
index d16d208bc..7a8c14105 100644
--- a/src/lib/pages/account-details/components/tables/nonRedelegatable/index.tsx
+++ b/src/lib/pages/account-details/components/tables/non-redelegatable/index.tsx
@@ -1,6 +1,5 @@
-import { Flex, TableContainer } from "@chakra-ui/react";
-
 import { useMobile } from "lib/app-provider";
+import { MobileTableContainer, TableContainer } from "lib/components/table";
 import type { NonRedelegatable } from "lib/pages/account-details/type";
 
 import { NonRedelegatableTableHeader } from "./NonRedelegatableTableHeader";
@@ -18,20 +17,20 @@ export const NonRedelegatablesTable = ({
 }: NonRedelegatablesTableProps) => {
   const isMobile = useMobile();
   return isMobile ? (
-    <Flex>
+    <MobileTableContainer mt={0}>
       {nonRedelegatables.map((nonRedelegatable) => (
         <NonRedelegatablesTableMobileCard
-          key={`nonredelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
+          key={`non_redelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
           nonRedelegatable={nonRedelegatable}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer>
       <NonRedelegatableTableHeader templateColumns={TEMPLATE_COLUMNS} />
       {nonRedelegatables.map((nonRedelegatable) => (
         <NonRedelegatableTableRow
-          key={`nonredelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
+          key={`non_redelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
           nonRedelegatable={nonRedelegatable}
           templateColumns={TEMPLATE_COLUMNS}
         />
diff --git a/src/lib/pages/account-details/components/tables/redelegation/index.tsx b/src/lib/pages/account-details/components/tables/redelegation/index.tsx
index de6a74e45..ecafbac64 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/index.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/index.tsx
@@ -1,6 +1,7 @@
-import { Flex, TableContainer } from "@chakra-ui/react";
+import { TableContainer } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
+import { MobileTableContainer } from "lib/components/table";
 import type { Redelegation } from "lib/pages/account-details/data";
 
 import { RedelegationTableHeader } from "./RedelegationTableHeader";
@@ -19,7 +20,7 @@ export const RedelegationsTable = ({
 }: RedelegationsTableProps) => {
   const isMobile = useMobile();
   return isMobile ? (
-    <Flex w="full">
+    <MobileTableContainer mt={0}>
       {redelegations.map((redelegation) => (
         <RedelegationTableMobileCard
           key={
@@ -32,7 +33,7 @@ export const RedelegationsTable = ({
           redelegation={redelegation}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer>
       <RedelegationTableHeader templateColumns={TEMPLATE_COLUMNS} />
diff --git a/src/lib/pages/blocks/components/BlocksTable.tsx b/src/lib/pages/blocks/components/BlocksTable.tsx
index d7db0d3d1..41f44bcb8 100644
--- a/src/lib/pages/blocks/components/BlocksTable.tsx
+++ b/src/lib/pages/blocks/components/BlocksTable.tsx
@@ -1,4 +1,3 @@
-import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { useMobile } from "lib/app-provider";
@@ -6,7 +5,7 @@ import { Loading } from "lib/components/Loading";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { TableContainer } from "lib/components/table";
+import { MobileTableContainer, TableContainer } from "lib/components/table";
 import {
   useBlockCountQuery,
   useBlocklistQuery,
@@ -83,11 +82,11 @@ export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
   return (
     <>
       {isMobile ? (
-        <Flex direction="column" gap={4} w="full" mt={4}>
+        <MobileTableContainer>
           {blocksData.map((block) => (
             <BlocksTableMobileCard key={block.hash} blockData={block} />
           ))}
-        </Flex>
+        </MobileTableContainer>
       ) : (
         <TableContainer>
           <BlocksTableHeader
diff --git a/src/lib/pages/contract-details/components/tables/migration/index.tsx b/src/lib/pages/contract-details/components/tables/migration/index.tsx
index 7bf96037e..70d45e1bf 100644
--- a/src/lib/pages/contract-details/components/tables/migration/index.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/index.tsx
@@ -1,11 +1,10 @@
-import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { TableContainer } from "lib/components/table";
+import { MobileTableContainer, TableContainer } from "lib/components/table";
 import { useMigrationHistories } from "lib/pages/contract-details/data";
 import type { ContractAddr, Option } from "lib/types";
 
@@ -77,7 +76,7 @@ export const MigrationTable = ({
   return (
     <>
       {isMobile ? (
-        <Flex direction="column" gap={4} w="full" mt={4}>
+        <MobileTableContainer>
           {migrationHistories.map((history, idx) => (
             <MigrationMobileCard
               key={
@@ -90,7 +89,7 @@ export const MigrationTable = ({
               history={history}
             />
           ))}
-        </Flex>
+        </MobileTableContainer>
       ) : (
         <TableContainer>
           <MigrationHeader templateColumns={templateColumns} />
diff --git a/src/lib/pages/public-project/components/tables/accounts/index.tsx b/src/lib/pages/public-project/components/tables/accounts/index.tsx
index 5c7b22cca..9f7a996a9 100644
--- a/src/lib/pages/public-project/components/tables/accounts/index.tsx
+++ b/src/lib/pages/public-project/components/tables/accounts/index.tsx
@@ -1,4 +1,4 @@
-import { Grid, Box, Flex } from "@chakra-ui/react";
+import { Grid, Box } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { useMemo, useState } from "react";
 
@@ -6,6 +6,7 @@ import { useMobile } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
 import {
+  MobileTableContainer,
   TableContainer,
   TableHeader,
   TableTitle,
@@ -39,14 +40,14 @@ const ContentRender = ({
   isMobile: boolean;
 }) =>
   isMobile ? (
-    <Flex direction="column" gap={4} w="full" mt={4}>
+    <MobileTableContainer>
       {filteredAccounts.map((account) => (
         <PublicProjectAccountMobileCard
           key={account.address}
           accountInfo={account}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer mb={4}>
       <AccountTableHeader />
diff --git a/src/lib/pages/public-project/components/tables/codes/index.tsx b/src/lib/pages/public-project/components/tables/codes/index.tsx
index c4ec80138..9eeb137af 100644
--- a/src/lib/pages/public-project/components/tables/codes/index.tsx
+++ b/src/lib/pages/public-project/components/tables/codes/index.tsx
@@ -1,4 +1,4 @@
-import { TableContainer, Grid, Box, Flex } from "@chakra-ui/react";
+import { TableContainer, Grid, Box } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
@@ -6,7 +6,12 @@ import { useMemo, useState } from "react";
 import { useMobile } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
-import { TableHeader, TableTitle, ViewMore } from "lib/components/table";
+import {
+  MobileTableContainer,
+  TableHeader,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
 import { useCodeStore } from "lib/providers/store";
 import type { Option, PublicCode, CodeInfo } from "lib/types";
 
@@ -46,14 +51,14 @@ const ContentRender = ({
   isMobile: boolean;
 }) =>
   isMobile ? (
-    <Flex direction="column" gap={4} w="full" mt={4}>
+    <MobileTableContainer>
       {publicCodes.map((code) => (
         <PublicProjectCodeMobileCard
           key={code.publicInfo.id}
           publicCodeInfo={code}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer>
       <CodeTableHeader />
diff --git a/src/lib/pages/public-project/components/tables/contracts/index.tsx b/src/lib/pages/public-project/components/tables/contracts/index.tsx
index a3b009c9a..16cb015d8 100644
--- a/src/lib/pages/public-project/components/tables/contracts/index.tsx
+++ b/src/lib/pages/public-project/components/tables/contracts/index.tsx
@@ -1,4 +1,4 @@
-import { Grid, Box, Flex } from "@chakra-ui/react";
+import { Grid, Box } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
@@ -7,6 +7,7 @@ import { useMobile } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
 import {
+  MobileTableContainer,
   TableContainer,
   TableHeader,
   TableTitle,
@@ -46,14 +47,14 @@ const ContentRender = ({
 }) => {
   const isMobile = useMobile();
   return isMobile ? (
-    <Flex direction="column" gap={4} w="full" mt={4}>
+    <MobileTableContainer>
       {publicContracts.map((contract) => (
         <PublicProjectContractMobileCard
           key={contract.publicInfo.contractAddress}
           publicContractInfo={contract}
         />
       ))}
-    </Flex>
+    </MobileTableContainer>
   ) : (
     <TableContainer>
       <ContractTableHeader />

From 4d8be6a95441112b97e3126a5266287520dda113 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 12:34:09 +0700
Subject: [PATCH 155/368] fix: comment

---
 src/lib/pages/blocks/components/BlocksTableRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/blocks/components/BlocksTableRow.tsx b/src/lib/pages/blocks/components/BlocksTableRow.tsx
index 4676724b9..90b17897a 100644
--- a/src/lib/pages/blocks/components/BlocksTableRow.tsx
+++ b/src/lib/pages/blocks/components/BlocksTableRow.tsx
@@ -4,7 +4,7 @@ import { Flex, Text, Grid } from "@chakra-ui/react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TableRow } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { BlockInfo } from "lib/types/block";
+import type { BlockInfo } from "lib/types";
 import { dateFromNow, formatUTC, truncate } from "lib/utils";
 
 interface BlocksTableRowProps {

From 0b9e40755e204514915c8a25adfea0209bd9e9d5 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 11 Oct 2023 13:10:06 +0700
Subject: [PATCH 156/368] feat: correctly display function card count and minor
 ui tweak

---
 .../components/FunctionTypeSwitch.tsx         | 12 +++++++++--
 .../tables/history/ModuleHistoryHeader.tsx    |  1 +
 .../tables/history/ModuleHistoryRow.tsx       |  5 ++---
 .../components/tables/history/index.tsx       |  2 +-
 src/lib/pages/module-details/index.tsx        | 21 ++++++++++++++-----
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
index e9e6061ca..14455966e 100644
--- a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
+++ b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
@@ -44,7 +44,6 @@ export const FunctionTypeSwitch = ({
           key={tab}
           w="full"
           minW="128px"
-          cursor="pointer"
           p="2px 10px"
           variants={{
             active: { color: "var(--chakra-colors-text-main)" },
@@ -54,9 +53,18 @@ export const FunctionTypeSwitch = ({
           }}
           initial="inactive"
           animate={currentTab === tab ? "active" : "inactive"}
-          onClick={() => onTabChange(tab)}
           zIndex={1}
           textAlign="center"
+          {...(counts[idx] === 0
+            ? {
+                opacity: 0.3,
+                cursor: "not-allowed",
+                onClick: undefined,
+              }
+            : {
+                onClick: () => onTabChange(tab),
+                cursor: "pointer",
+              })}
         >
           <Heading as="h6" variant="h6" fontSize="14px">
             {tab} {`(${counts[idx]})`}
diff --git a/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx b/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
index 69f751179..79cd72574 100644
--- a/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
+++ b/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
@@ -9,6 +9,7 @@ export const ModuleHistoryHeader = ({
   templateColumns: GridProps["templateColumns"];
 }) => (
   <Grid templateColumns={templateColumns}>
+    <TableHeader />
     <TableHeader>Remark</TableHeader>
     <TableHeader>Upgrade Policy Changes</TableHeader>
     <TableHeader>Block Height</TableHeader>
diff --git a/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx b/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
index b2ec2872f..b9e26b450 100644
--- a/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
+++ b/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
@@ -93,6 +93,7 @@ export const ModuleHistoryRow = ({
   history,
 }: ModuleHistoriesRowProps) => (
   <Grid templateColumns={templateColumns}>
+    <TableRow />
     <TableRow>
       <RemarkRender remark={history.remark} />
     </TableRow>
@@ -114,9 +115,7 @@ export const ModuleHistoryRow = ({
     </TableRow>
     <TableRow>
       <Flex direction="column">
-        <Text variant="body2" color="text.dark">
-          {formatUTC(history.timestamp)}
-        </Text>
+        <Text variant="body3">{formatUTC(history.timestamp)}</Text>
         <Text variant="body3" color="text.dark" mt="2px">
           ({dateFromNow(history.timestamp)})
         </Text>
diff --git a/src/lib/pages/module-details/components/tables/history/index.tsx b/src/lib/pages/module-details/components/tables/history/index.tsx
index 6b95984eb..04bb82d8b 100644
--- a/src/lib/pages/module-details/components/tables/history/index.tsx
+++ b/src/lib/pages/module-details/components/tables/history/index.tsx
@@ -13,7 +13,7 @@ import type { Nullable, Option } from "lib/types";
 import { ModuleHistoryHeader } from "./ModuleHistoryHeader";
 import { ModuleHistoryRow } from "./ModuleHistoryRow";
 
-const TEMPLATE_COLUMNS = "180px minmax(300px, 1fr) 140px 260px";
+const TEMPLATE_COLUMNS = "40px 180px minmax(300px, 1fr) 140px 260px";
 
 interface ModuleTxsTableProps {
   moduleId: Option<Nullable<number>>;
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index bbda58937..990dc9f77 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -54,6 +54,7 @@ interface ActionInfo {
   name: string;
   count: number | string;
   onClick: MouseEventHandler<HTMLDivElement>;
+  disabled: boolean;
 }
 
 interface ModuleDetailsBodyProps {
@@ -113,6 +114,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
       name: "View Functions",
       count: moduleData.viewFunctions.length,
       onClick: handleTabChange(TabIndex.Function, FunctionTypeTabs.VIEW),
+      disabled: moduleData.viewFunctions.length === 0,
     },
     {
       icon: "execute" as IconKeys,
@@ -120,6 +122,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
       name: "Execute Functions",
       count: moduleData.executeFunctions.length,
       onClick: handleTabChange(TabIndex.Function, FunctionTypeTabs.EXECUTE),
+      disabled: moduleData.executeFunctions.length === 0,
     },
     {
       icon: "list" as IconKeys,
@@ -127,6 +130,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
       name: "Transactions",
       count: Number(moduleTxsCount) + Number(moduleHistoriesCount) || "N/A",
       onClick: handleTabChange(TabIndex.History),
+      disabled: Number(moduleTxsCount) + Number(moduleHistoriesCount) === 0,
     },
   ];
 
@@ -207,15 +211,22 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                   <Flex
                     key={item.name}
                     p={4}
-                    bg="gray.800"
-                    _hover={{ bg: "gray.700" }}
                     transition="all .25s ease-in-out"
                     borderRadius={8}
                     w="full"
                     alignItems="center"
                     justifyContent="space-between"
-                    cursor="pointer"
-                    onClick={item.onClick}
+                    {...(item.disabled
+                      ? {
+                          bg: "gray.900",
+                          cursor: "not-allowed",
+                        }
+                      : {
+                          bg: "gray.800",
+                          _hover: { bg: "gray.700" },
+                          cursor: "pointer",
+                          onClick: item.onClick,
+                        })}
                   >
                     <Flex gap={3} alignItems="center">
                       <CustomIcon
@@ -232,7 +243,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                           {item.name}
                         </Text>
                         <Heading as="h6" variant="h6" fontWeight={600}>
-                          {!item.count ? "N/A" : item.count}
+                          {item.count}
                         </Heading>
                       </Flex>
                     </Flex>

From 225823bb26caf3bceba974b8c664713a4f76a771 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 11 Oct 2023 13:44:54 +0700
Subject: [PATCH 157/368] fix(components): wire up module detail to interaction

---
 .../components/module/FunctionDetailCard.tsx  | 178 ++++++++++--------
 .../drawer/body/ModuleSelectMainBody.tsx      |   1 -
 .../components/ModuleFunction.tsx             |  50 +++--
 .../module-details/components/ModuleInfo.tsx  |  16 +-
 .../module-details/components/ModuleTop.tsx   |  35 +++-
 src/lib/pages/module-details/index.tsx        |  18 +-
 6 files changed, 179 insertions(+), 119 deletions(-)

diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index 616148f35..c5777749d 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -13,11 +13,15 @@ import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
 import { LabelText } from "../LabelText";
 import { Tooltip } from "../Tooltip";
+import { useInternalNavigate } from "lib/app-provider";
+import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction } from "lib/types";
 import { checkAvailability, getVisibilityIcon } from "lib/utils";
 
 interface FunctionDetailCardProps {
   exposedFn: ExposedFunction;
+  address: IndexedModule["address"];
+  moduleName: IndexedModule["moduleName"];
 }
 
 const StyledIconButton = chakra(IconButton, {
@@ -29,10 +33,93 @@ const StyledIconButton = chakra(IconButton, {
   },
 });
 
-export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
+const FunctionDetail = ({ exposedFn }: { exposedFn: ExposedFunction }) => {
+  return (
+    <AccordionPanel bg="gray.900" borderRadius={8} mt={4} py={3} px={4}>
+      <Flex gap={3} direction="column">
+        <Flex gap={8}>
+          <LabelText
+            isSmall
+            label="visibility"
+            labelWeight={700}
+            labelColor="text.disabled"
+          >
+            <Flex align="center">
+              <CustomIcon
+                name={getVisibilityIcon(exposedFn.visibility)}
+                boxSize={3}
+                ml={0}
+                color="gray.600"
+              />
+              <Text variant="body3" textTransform="capitalize">
+                {exposedFn.visibility}
+              </Text>
+            </Flex>
+          </LabelText>
+          <LabelText
+            isSmall
+            label="is_entry"
+            labelWeight={700}
+            labelColor="text.disabled"
+          >
+            <Flex align="center">
+              <CustomIcon
+                boxSize={3}
+                ml={0}
+                color={exposedFn.is_entry ? "success.main" : "gray.600"}
+                name={exposedFn.is_entry ? "check" : "close"}
+              />
+              <Text variant="body3">{String(exposedFn.is_entry)}</Text>
+            </Flex>
+          </LabelText>
+          <LabelText
+            isSmall
+            label="is_view"
+            labelWeight={700}
+            labelColor="text.disabled"
+          >
+            <Flex align="center">
+              <CustomIcon
+                boxSize={3}
+                ml={0}
+                color={exposedFn.is_view ? "success.main" : "gray.600"}
+                name={exposedFn.is_view ? "check" : "close"}
+              />
+              <Text variant="body3">{String(exposedFn.is_view)}</Text>
+            </Flex>
+          </LabelText>
+        </Flex>
+        <LabelText
+          isSmall
+          label="generic_type_params"
+          labelWeight={700}
+          labelColor="text.disabled"
+        >
+          <Text variant="body3">
+            {JSON.stringify(exposedFn.generic_type_params)}
+          </Text>
+        </LabelText>
+        <LabelText
+          isSmall
+          label="params"
+          labelWeight={700}
+          labelColor="text.disabled"
+        >
+          <Text variant="body3">{JSON.stringify(exposedFn.params)}</Text>
+        </LabelText>
+      </Flex>
+    </AccordionPanel>
+  );
+};
+
+export const FunctionDetailCard = ({
+  exposedFn,
+  address,
+  moduleName,
+}: FunctionDetailCardProps) => {
   const { is_view: isView, visibility, name } = exposedFn;
   const disabled = !checkAvailability(exposedFn);
-
+  const navigate = useInternalNavigate();
   const getFnColor = () => {
     switch (isView) {
       case false:
@@ -48,6 +135,7 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
     if (isView) return { variant: "outline-primary", color: "primary.dark" };
     return { variant: "outline-accent", color: "accent.dark" };
   };
+
   return (
     <AccordionItem
       bg="gray.800"
@@ -139,6 +227,17 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
                   isDisabled={disabled}
                   borderColor={getButtonStyle().color}
                   size="sm"
+                  onClick={() =>
+                    navigate({
+                      pathname: "/interact",
+                      query: {
+                        address,
+                        moduleName,
+                        functionType: isView ? "view" : "execute",
+                        functionName: exposedFn.name,
+                      },
+                    })
+                  }
                   leftIcon={
                     <CustomIcon
                       mx={0}
@@ -167,80 +266,7 @@ export const FunctionDetailCard = ({ exposedFn }: FunctionDetailCardProps) => {
               </Flex>
             </Flex>
           </AccordionButton>
-          <AccordionPanel bg="gray.900" borderRadius={8} mt={4} py={3} px={4}>
-            <Flex gap={3} direction="column">
-              <Flex gap={8}>
-                <LabelText
-                  isSmall
-                  label="visibility"
-                  labelWeight={700}
-                  labelColor="text.disabled"
-                >
-                  <Flex align="center">
-                    <CustomIcon
-                      name={getVisibilityIcon(exposedFn.visibility)}
-                      boxSize={3}
-                      ml={0}
-                      color="gray.600"
-                    />
-                    <Text variant="body3" textTransform="capitalize">
-                      {exposedFn.visibility}
-                    </Text>
-                  </Flex>
-                </LabelText>
-                <LabelText
-                  isSmall
-                  label="is_entry"
-                  labelWeight={700}
-                  labelColor="text.disabled"
-                >
-                  <Flex align="center">
-                    <CustomIcon
-                      boxSize={3}
-                      ml={0}
-                      color={exposedFn.is_entry ? "success.main" : "gray.600"}
-                      name={exposedFn.is_entry ? "check" : "close"}
-                    />
-                    <Text variant="body3">{String(exposedFn.is_entry)}</Text>
-                  </Flex>
-                </LabelText>
-                <LabelText
-                  isSmall
-                  label="is_view"
-                  labelWeight={700}
-                  labelColor="text.disabled"
-                >
-                  <Flex align="center">
-                    <CustomIcon
-                      boxSize={3}
-                      ml={0}
-                      color={exposedFn.is_view ? "success.main" : "gray.600"}
-                      name={exposedFn.is_view ? "check" : "close"}
-                    />
-                    <Text variant="body3">{String(exposedFn.is_view)}</Text>
-                  </Flex>
-                </LabelText>
-              </Flex>
-              <LabelText
-                isSmall
-                label="generic_type_params"
-                labelWeight={700}
-                labelColor="text.disabled"
-              >
-                <Text variant="body3">
-                  {JSON.stringify(exposedFn.generic_type_params)}
-                </Text>
-              </LabelText>
-              <LabelText
-                isSmall
-                label="params"
-                labelWeight={700}
-                labelColor="text.disabled"
-              >
-                <Text variant="body3">{JSON.stringify(exposedFn.params)}</Text>
-              </LabelText>
-            </Flex>
-          </AccordionPanel>
+          <FunctionDetail exposedFn={exposedFn} />
         </>
       )}
     </AccordionItem>
diff --git a/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
index e9548029a..1b9e044db 100644
--- a/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
+++ b/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
@@ -123,7 +123,6 @@ export const ModuleSelectMainBody = ({
           />
         </Flex>
       </GridItem>
-      {/* Left */}
       <ModuleFunctionBody
         area="main"
         module={selectedModule}
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index c2d962925..b6c10e924 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -6,6 +6,7 @@ import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { FunctionDetailCard } from "lib/components/module/FunctionDetailCard";
+import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
@@ -21,29 +22,45 @@ interface ModuleFunctionProps {
 }
 
 const FunctionAccordions = ({
+  address,
+  moduleName,
   type,
   fns,
   expandedIndexes,
   updateExpandedIndexes,
 }: {
+  address: IndexedModule["address"];
+  moduleName: IndexedModule["moduleName"];
   type: FunctionTypeTabs;
   fns: ExposedFunction[];
   expandedIndexes: number[];
   updateExpandedIndexes: (indexes: number[]) => void;
 }) => (
-  <Accordion
-    id={type}
-    display="none"
-    allowMultiple
-    index={expandedIndexes}
-    onChange={updateExpandedIndexes}
-  >
-    <Flex direction="column" gap={4}>
-      {fns.map((fn) => (
-        <FunctionDetailCard exposedFn={fn} key={fn.name} />
-      ))}
-    </Flex>
-  </Accordion>
+  <Flex id={type} display="none">
+    {fns.length ? (
+      <Accordion
+        allowMultiple
+        index={expandedIndexes}
+        onChange={updateExpandedIndexes}
+      >
+        <Flex direction="column" gap={4}>
+          {fns.map((fn) => (
+            <FunctionDetailCard
+              exposedFn={fn}
+              key={fn.name}
+              address={address}
+              moduleName={moduleName}
+            />
+          ))}
+        </Flex>
+      </Accordion>
+    ) : (
+      <EmptyState
+        imageVariant="empty"
+        message={"This module doesn't contain any execute functions."}
+      />
+    )}
+  </Flex>
 );
 
 export const ModuleFunction = ({
@@ -163,25 +180,30 @@ export const ModuleFunction = ({
           </Button>
         </Flex>
       </Flex>
-
       {/* rendering all tabs at once and use css selector to avoid lagginess when changing tab */}
       <FunctionAccordions
         type={FunctionTypeTabs.ALL}
         fns={filteredFns}
         expandedIndexes={expandedIndexes}
         updateExpandedIndexes={updateExpandedIndexes}
+        address={address}
+        moduleName={moduleName}
       />
       <FunctionAccordions
         type={FunctionTypeTabs.VIEW}
         fns={filteredViewFns}
         expandedIndexes={expandedIndexes}
         updateExpandedIndexes={updateExpandedIndexes}
+        address={address}
+        moduleName={moduleName}
       />
       <FunctionAccordions
         type={FunctionTypeTabs.EXECUTE}
         fns={filteredExecuteFns}
         expandedIndexes={expandedIndexes}
         updateExpandedIndexes={updateExpandedIndexes}
+        address={address}
+        moduleName={moduleName}
       />
     </Flex>
   );
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 2df1613b9..e96a7e670 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -4,28 +4,20 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { ModuleSourceCode } from "lib/components/module";
-import {
-  useVerifyModule,
-  type IndexedModule,
-} from "lib/services/moduleService";
-import type { HexAddr } from "lib/types";
+import type { ModuleVerificationInternal } from "lib/services/module";
+import { type IndexedModule } from "lib/services/moduleService";
 
 interface ModuleInfoProps {
   address: IndexedModule["address"];
-  moduleName: IndexedModule["moduleName"];
   upgradePolicy: IndexedModule["upgradePolicy"];
+  verificationData: ModuleVerificationInternal | null | undefined;
 }
 
 export const ModuleInfo = ({
   address,
-  moduleName,
   upgradePolicy,
+  verificationData,
 }: ModuleInfoProps) => {
-  const { data: verificationData } = useVerifyModule({
-    address: address as HexAddr,
-    moduleName,
-  });
-
   return (
     <Flex flexDirection="column" gap={4}>
       <Flex justifyContent="space-between" alignItems="center" w="full">
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index bdcac3872..9d95ca3b2 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -1,18 +1,19 @@
 import type { TextProps } from "@chakra-ui/react";
 import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 
-import { useMobile } from "lib/app-provider";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyButton } from "lib/components/copy";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { Tooltip } from "lib/components/Tooltip";
+import type { ModuleVerificationInternal } from "lib/services/module";
 import type { IndexedModule } from "lib/services/moduleService";
 
 interface ModuleTopProps {
-  isVerified?: boolean;
   moduleData: IndexedModule;
+  verificationData: ModuleVerificationInternal | null | undefined;
 }
 
 const baseTextStyle: TextProps = {
@@ -22,11 +23,9 @@ const baseTextStyle: TextProps = {
   whiteSpace: "nowrap",
 };
 
-export const ModuleTop = ({
-  moduleData,
-  isVerified = false,
-}: ModuleTopProps) => {
+export const ModuleTop = ({ moduleData, verificationData }: ModuleTopProps) => {
   const isMobile = useMobile();
+  const navigate = useInternalNavigate();
   if (!moduleData) return <Loading />;
 
   return (
@@ -72,7 +71,7 @@ export const ModuleTop = ({
             >
               {moduleData.moduleName}
             </Heading>
-            {isVerified && (
+            {verificationData && (
               <Tooltip label="This module's verification is supported by its provided source code.">
                 <Flex>
                   <CustomIcon
@@ -92,7 +91,6 @@ export const ModuleTop = ({
             <Text {...baseTextStyle} color="text.main">
               Module Path:
             </Text>
-            {/* TODO recheck module path */}
             <Text {...baseTextStyle}>
               {moduleData.parsedAbi.address}::
               {moduleData.parsedAbi.name}
@@ -106,7 +104,6 @@ export const ModuleTop = ({
             <Text {...baseTextStyle} color="text.main">
               Creator:
             </Text>
-            {/* TODO Creator */}
             <CopyLink
               value={moduleData.parsedAbi.address}
               amptrackSection="contract_top"
@@ -153,6 +150,16 @@ export const ModuleTop = ({
             w={{ base: "full", md: "auto" }}
             leftIcon={<CustomIcon name="query" />}
             size={{ base: "sm", md: "md" }}
+            onClick={() =>
+              navigate({
+                pathname: "/interact",
+                query: {
+                  address: moduleData.address,
+                  moduleName: moduleData.moduleName,
+                  functionType: "view",
+                },
+              })
+            }
           >
             View
           </Button>
@@ -161,6 +168,16 @@ export const ModuleTop = ({
             w={{ base: "full", md: "auto" }}
             leftIcon={<CustomIcon name="execute" />}
             size={{ base: "sm", md: "md" }}
+            onClick={() =>
+              navigate({
+                pathname: "/interact",
+                query: {
+                  address: moduleData.address,
+                  moduleName: moduleData.moduleName,
+                  functionType: "execute",
+                },
+              })
+            }
           >
             Execute
           </Button>
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index fe396d9e8..53e7b2d64 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -27,8 +27,8 @@ import { InvalidState } from "lib/components/state";
 import { useContractDetailsTableCounts } from "lib/model/contract";
 import { useAccountId } from "lib/services/accountService";
 import type { IndexedModule } from "lib/services/moduleService";
-import { useAccountModules } from "lib/services/moduleService";
-import type { ContractAddr, MoveAccountAddr } from "lib/types";
+import { useAccountModules, useVerifyModule } from "lib/services/moduleService";
+import type { ContractAddr, HexAddr, MoveAccountAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import { FunctionTypeTabs } from "./components/FunctionTypeSwitch";
@@ -53,7 +53,6 @@ interface ActionInfo {
   onClick: MouseEventHandler<HTMLDivElement>;
 }
 
-// TODO get module path
 const txTableHeaderId = "ModuleTxsTableHeader";
 
 interface ModuleDetailsBodyProps {
@@ -121,6 +120,10 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
     refetchRelatedProposals,
   } = useContractDetailsTableCounts(contractAddress, contractAccountId);
 
+  const { data: verificationData } = useVerifyModule({
+    address: moduleData.address as HexAddr,
+    moduleName: moduleData.moduleName,
+  });
   const actionList: ActionInfo[] = [
     {
       icon: "query" as IconKeys,
@@ -147,7 +150,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
   ];
   return (
     <>
-      <ModuleTop isVerified moduleData={moduleData} />
+      <ModuleTop verificationData={verificationData} moduleData={moduleData} />
       <Tabs
         index={Object.values(TabIndex).indexOf(tab)}
         isLazy
@@ -189,14 +192,15 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                   <Flex
                     p={4}
                     bg="gray.800"
+                    opacity={item.count < 1 ? 0.5 : 1}
                     _hover={{ bg: "gray.700" }}
                     transition="all .25s ease-in-out"
                     borderRadius={8}
                     w="full"
                     alignItems="center"
                     justifyContent="space-between"
-                    cursor="pointer"
-                    onClick={item.onClick}
+                    cursor={item.count < 1 ? "not-allowed" : "pointer"}
+                    onClick={item.count < 1 ? undefined : item.onClick}
                   >
                     <Flex gap={3} alignItems="center">
                       <CustomIcon
@@ -221,7 +225,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                   </Flex>
                 ))}
               </Flex>
-              <ModuleInfo {...moduleData} />
+              <ModuleInfo verificationData={verificationData} {...moduleData} />
               {/* TODO History */}
               <Flex flexDirection="column" mt={6}>
                 <Heading

From d92ef8141f9bd4aa4a874f4aeac3813ca09cecac Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 11 Oct 2023 14:02:36 +0700
Subject: [PATCH 158/368] fix(components): fix module and resource view more
 logic

---
 .../account-details/components/AccountHeader.tsx    |  3 ++-
 .../components/modules/ModuleLists.tsx              |  4 +++-
 .../components/resources/ResourceLists.tsx          | 13 +++++--------
 .../components/resources/ResourceSection.tsx        |  2 +-
 src/lib/pages/account-details/index.tsx             | 11 ++++-------
 5 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index a7bea31e2..7ffa260bb 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -6,6 +6,7 @@ import { CustomIcon } from "lib/components/icon";
 import { PrimaryNameMark } from "lib/components/PrimaryNameMark";
 import type { ICNSNamesResponse } from "lib/services/ns";
 import type { HumanAddr, Option, PublicDetail } from "lib/types";
+import { bech32AddressToHex } from "lib/utils";
 
 import { TotalAccountValue } from "./TotalAccountValue";
 
@@ -76,7 +77,7 @@ export const AccountHeader = ({
               </Text>
               {/* TODO: HEX */}
               <CopyLink
-                value={accountAddress}
+                value={bech32AddressToHex(accountAddress)}
                 amptrackSection="account_top"
                 type="user_address"
               />
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 115cb53c7..77afc1a93 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -115,7 +115,9 @@ export const ModuleLists = ({
           </SimpleGrid>
         )}
       </Flex>
-      {!isMobile && onViewMore && <ViewMore onClick={onViewMore} />}
+      {!isMobile && onViewMore && filteredModules.length > 9 && (
+        <ViewMore onClick={onViewMore} />
+      )}
     </Flex>
   );
 };
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index f0bca770a..78e1d478b 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -26,7 +26,6 @@ export interface ResourceGroupByAccount {
 
 interface ResourcesListsProps {
   onViewMore?: () => void;
-  totalAsset: number;
   address: HumanAddr;
 }
 
@@ -61,11 +60,7 @@ const ResourceTitle = ({
     />
   );
 };
-export const ResourceLists = ({
-  onViewMore,
-  totalAsset,
-  address,
-}: ResourcesListsProps) => {
+export const ResourceLists = ({ onViewMore, address }: ResourcesListsProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const { data: resources, isLoading } = useAccountResources({
@@ -122,7 +117,7 @@ export const ResourceLists = ({
       mb={{ base: 0, md: 8 }}
       width="full"
     >
-      <ResourceTitle onViewMore={onViewMore} totalAsset={totalAsset} />
+      <ResourceTitle onViewMore={onViewMore} totalAsset={resources.length} />
       {!isMobile && (
         <>
           <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
@@ -134,7 +129,9 @@ export const ResourceLists = ({
               />
             ))}
           </SimpleGrid>
-          {onViewMore && <ViewMore onClick={onViewMore} />}
+          {onViewMore && groupedResources.length > 8 && (
+            <ViewMore onClick={onViewMore} />
+          )}
         </>
       )}
     </Flex>
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index bc49818f1..6db7b596d 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -120,7 +120,7 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
         <TableTitle
           helperText="Resources stored in this account"
           title="Resources"
-          count={12}
+          count={resources.length}
         />
       </Flex>
       <Flex
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index bea02c4f9..a38d6763d 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -13,7 +13,6 @@ import { AmpEvent, useTrack } from "lib/amplitude";
 import {
   useInternalNavigate,
   useMoveConfig,
-  useNftConfig,
   useValidateAddress,
   useWasmConfig,
 } from "lib/app-provider";
@@ -56,7 +55,6 @@ enum TabIndex {
   Overview = "overview",
   Assets = "assets",
   Delegations = "delegations",
-  NFTs = "nfts",
   Txs = "txs",
   Codes = "codes",
   Contracts = "contracts",
@@ -75,7 +73,7 @@ const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
-  const nft = useNftConfig({ shouldRedirect: false });
+  // const nft = useNftConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
   const router = useRouter();
   const { trackUseTab } = useTrack();
@@ -214,14 +212,14 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           <CustomTab onClick={handleTabChange(TabIndex.Delegations)}>
             Delegations
           </CustomTab>
-          <CustomTab
+          {/* <CustomTab
             count={tableCounts.txsCount}
             isDisabled={txCountLoading || tableCounts.txsCount === 0}
             onClick={handleTabChange(TabIndex.NFTs)}
             hidden={!nft.enabled}
           >
             NFTs
-          </CustomTab>
+          </CustomTab> */}
           <CustomTab
             count={tableCounts.txsCount}
             isDisabled={txCountLoading || tableCounts.txsCount === 0}
@@ -328,7 +326,6 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               <>
                 <ResourceLists
                   address={accountAddress}
-                  totalAsset={0}
                   onViewMore={handleTabChange(TabIndex.Resource)}
                 />
                 {/* TODO remove type assertion */}
@@ -353,7 +350,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           <TabPanel p={0}>
             <DelegationsSection walletAddress={accountAddress} />
           </TabPanel>
-          <TabPanel p={0}>nft</TabPanel>
+          {/* <TabPanel p={0}>nft</TabPanel> */}
           <TabPanel p={0}>
             <TxsTable accountId={accountId} scrollComponentId={tableHeaderId} />
           </TabPanel>

From 1c0d42a0bbae30b89dac16127171dadd3ed1e7ab Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 11 Oct 2023 17:53:48 +0700
Subject: [PATCH 159/368] fix: refine logics

---
 src/lib/hooks/useOpenTab.ts                    | 18 ++++++++++--------
 .../components/ModulePublishCard.tsx           |  8 ++++----
 src/lib/pages/publish-module/publish.tsx       |  4 ++--
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/lib/hooks/useOpenTab.ts b/src/lib/hooks/useOpenTab.ts
index 01716ef26..ec8f6ab45 100644
--- a/src/lib/hooks/useOpenTab.ts
+++ b/src/lib/hooks/useOpenTab.ts
@@ -28,7 +28,7 @@ export const useOpenAssetTab = () => {
   );
 };
 
-export const useOpenTab = () => {
+export const useOpenNewTab = () => {
   const { currentChainId } = useCelatoneApp();
 
   return useCallback(
@@ -39,14 +39,16 @@ export const useOpenTab = () => {
       pathname: string;
       query: Record<string, Option<string>>;
     }) => {
-      const queryString = Object.entries(query).reduce(
-        (acc, [key, value], idx) =>
-          acc.concat(
-            `${key}=${value}${idx !== Object.keys(query).length - 1 ? "&" : ""}`
-          ),
-        ""
+      const queryString = Object.entries(query)
+        .reduce((acc, [key, value]) => {
+          if (value) acc.append(key, value);
+          return acc;
+        }, new URLSearchParams())
+        .toString();
+
+      openNewTab(
+        `/${currentChainId}${pathname}${queryString ? "?" : ""}${queryString}`
       );
-      openNewTab(`/${currentChainId}${pathname}?${queryString}`);
     },
     [currentChainId]
   );
diff --git a/src/lib/pages/publish-module/components/ModulePublishCard.tsx b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
index 8e1f4ad99..c3a30a465 100644
--- a/src/lib/pages/publish-module/components/ModulePublishCard.tsx
+++ b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
@@ -4,14 +4,14 @@ import type { FileField } from "../formConstants";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { CountBadge } from "lib/components/module";
-import { useOpenTab } from "lib/hooks";
+import { useOpenNewTab } from "lib/hooks";
 
 interface ModulePublishCardProps {
   module: FileField;
 }
 
 export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
-  const openTab = useOpenTab();
+  const openNewTab = useOpenNewTab();
   const { file, decodeRes } = module;
   return (
     <Flex
@@ -88,7 +88,7 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
           leftIcon={<CustomIcon name="query" boxSize={3} color="text.main" />}
           variant="outline-white"
           onClick={() =>
-            openTab({
+            openNewTab({
               pathname: "/interact",
               query: {
                 address: decodeRes?.abi.address,
@@ -104,7 +104,7 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
           leftIcon={<CustomIcon name="execute" boxSize={3} color="text.main" />}
           variant="outline-white"
           onClick={() =>
-            openTab({
+            openNewTab({
               pathname: "/interact",
               query: {
                 address: decodeRes?.abi.address,
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 28fd1d681..0becc4942 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -163,9 +163,9 @@ export const PublishModule = ({
   // ------------------------------------------//
   useEffect(() => {
     if (
-      !fields.every(
+      fields.some(
         (field) =>
-          field.base64EncodedFile && field.publishStatus.status !== "error"
+          !field.base64EncodedFile || field.publishStatus.status === "error"
       )
     ) {
       setEstimatedFee(undefined);

From c7633994542747fd5ab497557d34802e84047ed7 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 11 Oct 2023 17:59:40 +0700
Subject: [PATCH 160/368] fix(components): fix pool type alignment in pool card

---
 CHANGELOG.md                                  |  1 +
 src/lib/pages/pools/components/PoolHeader.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49ef8a243..cd9b17d38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -106,6 +106,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
 - [#526](https://github.com/alleslabs/celatone-frontend/pull/526) Fix missing Tx proposal type
diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 485536587..96c14cb9f 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react";
+import { Flex, Heading, Text, Image } from "@chakra-ui/react";
 
 import {
   BALANCER_ICON,
@@ -57,7 +57,7 @@ export const PoolHeader = ({
     <Flex justifyContent="space-between" w="full">
       <Flex alignItems="center" gap={4}>
         <PoolLogo tokens={poolLiquidity} />
-        <Box>
+        <Flex direction="column">
           <Flex gap={1} flexWrap="wrap">
             <Heading as="h6" fontWeight="600" variant="h6">
               {getTokenLabel(poolLiquidity[0].denom, poolLiquidity[0].symbol)}
@@ -99,20 +99,20 @@ export const PoolHeader = ({
               </Flex>
             )}
           </Flex>
-          <Flex alignItems="center" gap={2} mt={1}>
+          <Flex alignItems="center" columnGap={2} flexWrap="wrap" mt={1}>
             <Text variant="body2" color="secondary.main">
               #{poolId}
             </Text>
             {poolType && (
-              <Flex alignItems="center" gap={2}>
+              <Flex alignItems="center" gap={1}>
                 <Flex
                   backgroundColor="gray.600"
                   borderRadius="full"
                   w="6px"
                   h="6px"
                 />
-                <Flex alignItems="center" gap={1}>
-                  <Image boxSize={4} src={poolValue.icon} />
+                <Flex alignItems="center">
+                  <Image boxSize={4} src={poolValue.icon} mr={1} />
                   <Text variant="body2" color="text.dark">
                     {poolValue.text}
                   </Text>
@@ -136,7 +136,7 @@ export const PoolHeader = ({
               </Flex>
             )}
           </Flex>
-        </Box>
+        </Flex>
       </Flex>
     </Flex>
   );

From 321b77520375d4ac7939ce1a37dca3200be3a16b Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 11 Oct 2023 18:06:28 +0700
Subject: [PATCH 161/368] feat: handle hex address param, refactor overused
 query

---
 .../resource/ResourceDetailCard.tsx           |  2 +-
 .../components/AccountHeader.tsx              |  8 +-
 .../components/asset/index.tsx                |  2 +-
 .../components/modules/ModuleLists.tsx        | 72 +++++++++-------
 .../components/resources/ResourceSection.tsx  | 18 ++--
 .../components/resources/index.ts             |  2 +
 src/lib/pages/account-details/index.tsx       | 83 +++++++++++++------
 src/lib/services/move/resource.ts             |  4 +-
 src/lib/services/move/resourceService.ts      |  3 +-
 9 files changed, 119 insertions(+), 75 deletions(-)
 create mode 100644 src/lib/pages/account-details/components/resources/index.ts

diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 813e68ac1..d1df2df98 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -80,7 +80,7 @@ export const ResourceDetailCard = ({
       <AccordionPanel p={4} borderTop="1px solid" borderColor="gray.700">
         <Flex direction="column" gap={3}>
           {formattedArray.map((item) => (
-            <Flex gap={4}>
+            <Flex gap={4} key={item.key}>
               <Text variant="body2" color="text.dark" w={52}>
                 {item.key}
               </Text>
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index 7ffa260bb..f0fc553f6 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -5,8 +5,7 @@ import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { PrimaryNameMark } from "lib/components/PrimaryNameMark";
 import type { ICNSNamesResponse } from "lib/services/ns";
-import type { HumanAddr, Option, PublicDetail } from "lib/types";
-import { bech32AddressToHex } from "lib/utils";
+import type { HexAddr, HumanAddr, Option, PublicDetail } from "lib/types";
 
 import { TotalAccountValue } from "./TotalAccountValue";
 
@@ -15,6 +14,7 @@ interface AccounHeaderProps {
   publicDetail: Option<PublicDetail>;
   icnsName: Option<ICNSNamesResponse>;
   accountAddress: HumanAddr;
+  hexAddress: HexAddr;
 }
 
 export const AccountHeader = ({
@@ -22,6 +22,7 @@ export const AccountHeader = ({
   publicDetail,
   icnsName,
   accountAddress,
+  hexAddress,
 }: AccounHeaderProps) => {
   const displayName = icnsName?.primary_name || "Account Details";
   const move = useMoveConfig({ shouldRedirect: false });
@@ -75,9 +76,8 @@ export const AccountHeader = ({
               <Text fontWeight={500} color="text.dark" variant="body2">
                 HEX:
               </Text>
-              {/* TODO: HEX */}
               <CopyLink
-                value={bech32AddressToHex(accountAddress)}
+                value={hexAddress}
                 amptrackSection="account_top"
                 type="user_address"
               />
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index 3ae441814..8f2326e54 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -31,7 +31,7 @@ interface AssetCtaProps {
   walletAddress: HumanAddr;
   totalAsset: number;
 }
-const MaxAssetsShow = 12;
+const MaxAssetsShow = 8;
 
 const AssetTitle = ({
   onViewMore,
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 77afc1a93..1dbdc6cda 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -1,22 +1,23 @@
 import { Flex, SimpleGrid } from "@chakra-ui/react";
 import { useMemo, useState } from "react";
 
+import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { Loading } from "lib/components/Loading";
 import { ModuleCard } from "lib/components/module";
+import { EmptyState } from "lib/components/state";
 import { TableTitle, ViewMore } from "lib/components/table";
-import {
-  useAccountModules,
-  type IndexedModule,
-} from "lib/services/move/moduleService";
-import type { HumanAddr } from "lib/types";
+import { type IndexedModule } from "lib/services/move/moduleService";
+import type { HumanAddr, Option } from "lib/types";
 
 interface ModuleListsProps {
   onViewMore?: () => void;
-  totalCount: number;
+  totalCount: Option<number>;
   selectedAddress: HumanAddr;
+  modules: Option<IndexedModule[]>;
+  isLoading: boolean;
 }
 
 const ModuleTitle = ({
@@ -24,7 +25,7 @@ const ModuleTitle = ({
   totalCount,
 }: {
   onViewMore: ModuleListsProps["onViewMore"];
-  totalCount: number;
+  totalCount: ModuleListsProps["totalCount"];
 }) => {
   const isMobile = useMobile();
   if (isMobile && onViewMore)
@@ -53,19 +54,14 @@ export const ModuleLists = ({
   onViewMore,
   totalCount,
   selectedAddress,
+  modules,
+  isLoading,
 }: ModuleListsProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
-  // move
-  const { data = [] } = useAccountModules({
-    address: selectedAddress,
-    moduleName: undefined,
-    functionName: undefined,
-  });
-  // TODO: remove assertion later
-  const modules = data as IndexedModule[] | undefined;
 
   const [keyword, setKeyword] = useState("");
+
   const filteredModules = useMemo(() => {
     if (!keyword) return modules;
 
@@ -81,7 +77,10 @@ export const ModuleLists = ({
       },
     });
   };
-  if (!filteredModules) return <Loading />;
+
+  if (isLoading) return <Loading />;
+  if (!modules) return <ErrorFetching />;
+
   return (
     <Flex
       direction="column"
@@ -99,23 +98,32 @@ export const ModuleLists = ({
             action="execute-message-search"
           />
         )}
-        {!(isMobile && onViewMore) && (
-          <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
-            {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
-              (item) => (
-                <ModuleCard
-                  isLarge
-                  selectedAddress={selectedAddress}
-                  module={item}
-                  selectedModule={undefined}
-                  setSelectedModule={handleOnSelect}
-                />
-              )
-            )}
-          </SimpleGrid>
-        )}
+        {!(isMobile && onViewMore) &&
+          (filteredModules?.length ? (
+            <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
+              {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
+                (item) => (
+                  <ModuleCard
+                    key={item.moduleName}
+                    isLarge
+                    selectedAddress={selectedAddress}
+                    module={item}
+                    selectedModule={undefined}
+                    setSelectedModule={handleOnSelect}
+                  />
+                )
+              )}
+            </SimpleGrid>
+          ) : (
+            <EmptyState
+              imageVariant="not-found"
+              message="No matched modules found"
+              withBorder
+              my={0}
+            />
+          ))}
       </Flex>
-      {!isMobile && onViewMore && filteredModules.length > 9 && (
+      {!isMobile && onViewMore && Number(filteredModules?.length) > 9 && (
         <ViewMore onClick={onViewMore} />
       )}
     </Flex>
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 6db7b596d..adb6508db 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -20,16 +20,22 @@ import { ResourceCard } from "lib/components/resource/ResourceCard";
 import { ResourceDetailCard } from "lib/components/resource/ResourceDetailCard";
 import { EmptyState } from "lib/components/state";
 import { TableTitle } from "lib/components/table";
-import { useAccountResources } from "lib/services/move/resourceService";
-import type { HumanAddr } from "lib/types";
+import type { HumanAddr, InternalResource, Option } from "lib/types";
 import { getFirstQueryParam, truncate } from "lib/utils";
 
 import type { ResourceGroup, ResourceGroupByAccount } from "./ResourceLists";
 
 interface ResourceSectionProps {
   address: HumanAddr;
+  resources: Option<InternalResource[]>;
+  isLoading: boolean;
 }
-export const ResourceSection = ({ address }: ResourceSectionProps) => {
+
+export const ResourceSection = ({
+  address,
+  resources,
+  isLoading,
+}: ResourceSectionProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
@@ -60,10 +66,6 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
     [selectedNameParam, selectedAccountParam, address, navigate]
   );
 
-  const { data: resources, isLoading } = useAccountResources({
-    address,
-  });
-
   useEffect(() => setExpandedIndexes([0]), [selectedNameParam]);
 
   if (isLoading) return <Loading />;
@@ -104,8 +106,8 @@ export const ResourceSection = ({ address }: ResourceSectionProps) => {
   const selectedIndex = !selectedAccountParam
     ? 0
     : groupedResources.findIndex((item) => item.owner === selectedAccountParam);
-  const selectedGroup = groupedResources[selectedIndex];
 
+  const selectedGroup = groupedResources[selectedIndex];
   const selectedGroupArray = Object.values(selectedGroup.resources);
   const selectedResources =
     selectedGroupArray.find((item) => item.group === selectedNameParam) ??
diff --git a/src/lib/pages/account-details/components/resources/index.ts b/src/lib/pages/account-details/components/resources/index.ts
new file mode 100644
index 000000000..b85c1aeac
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/index.ts
@@ -0,0 +1,2 @@
+export * from "./ResourceLists";
+export * from "./ResourceSection";
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index a38d6763d..4748431d5 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -11,6 +11,7 @@ import { useCallback, useEffect } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
 import {
+  useConvertHexAddress,
   useInternalNavigate,
   useMoveConfig,
   useValidateAddress,
@@ -32,15 +33,20 @@ import {
   usePublicProjectByAccountAddress,
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
-import type { HumanAddr, InternalResource } from "lib/types";
-import { getFirstQueryParam, truncate } from "lib/utils";
+import type { HexAddr, HumanAddr, MoveAccountAddr, Option } from "lib/types";
+import {
+  bech32AddressToHex,
+  getFirstQueryParam,
+  isHexAddress,
+  truncate,
+  unpadHexAddress,
+} from "lib/utils";
 
 import { AccountHeader } from "./components/AccountHeader";
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
 import { ModuleLists } from "./components/modules/ModuleLists";
-import { ResourceLists } from "./components/resources/ResourceLists";
-import { ResourceSection } from "./components/resources/ResourceSection";
+import { ResourceLists, ResourceSection } from "./components/resources";
 import {
   AdminContractsTable,
   InstantiatedContractsTable,
@@ -65,12 +71,16 @@ enum TabIndex {
 }
 
 export interface AccountDetailsBodyProps {
+  hexAddress: HexAddr;
   accountAddress: HumanAddr;
 }
 
 const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 
-const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
+const AccountDetailsBody = ({
+  hexAddress,
+  accountAddress,
+}: AccountDetailsBodyProps) => {
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
   // const nft = useNftConfig({ shouldRedirect: false });
@@ -86,17 +96,19 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
 
   // TODO: combine with useAccountDetailsTableCounts and remove type assertion
   // move
-  const { data = [] } = useAccountModules({
-    address: accountAddress,
-    moduleName: undefined,
-    functionName: undefined,
-  });
-  const modulesData = data as IndexedModule[];
+  const { data: fetchedAccountModules, isFetching: isModulesLoading } =
+    useAccountModules({
+      address: accountAddress,
+      moduleName: undefined,
+      functionName: undefined,
+      options: { refetchOnWindowFocus: false, retry: 1 },
+    });
+  const modulesData = fetchedAccountModules as Option<IndexedModule[]>;
 
-  const { data: resourcesData = [] } = useAccountResources({
-    address: accountAddress,
-  });
-  const resources = resourcesData as InternalResource[];
+  const { data: resourcesData, isFetching: isResourceLoading } =
+    useAccountResources({
+      address: accountAddress,
+    });
 
   const publicDetail = publicInfoBySlug?.details;
   const {
@@ -163,6 +175,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           publicDetail={publicDetail}
           icnsName={icnsName}
           accountAddress={accountAddress}
+          hexAddress={hexAddress}
         />
       </Flex>
       {publicInfo?.description && (
@@ -252,16 +265,16 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             Admins
           </CustomTab>
           <CustomTab
-            count={resources.length}
-            isDisabled={!resources.length}
+            count={resourcesData?.length}
+            isDisabled={!resourcesData?.length}
             onClick={handleTabChange(TabIndex.Resource)}
             hidden={!move.enabled}
           >
             Resource
           </CustomTab>
           <CustomTab
-            count={modulesData.length}
-            isDisabled={!modulesData.length}
+            count={modulesData?.length}
+            isDisabled={!modulesData?.length}
             onClick={handleTabChange(TabIndex.Modules)}
             hidden={!move.enabled}
           >
@@ -328,10 +341,11 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
                   address={accountAddress}
                   onViewMore={handleTabChange(TabIndex.Resource)}
                 />
-                {/* TODO remove type assertion */}
                 <ModuleLists
                   selectedAddress={accountAddress}
-                  totalCount={modulesData.length}
+                  totalCount={modulesData?.length}
+                  modules={modulesData}
+                  isLoading={isModulesLoading}
                   onViewMore={handleTabChange(TabIndex.Modules)}
                 />
               </>
@@ -379,12 +393,18 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             />
           </TabPanel>
           <TabPanel p={0}>
-            <ResourceSection address={accountAddress} />
+            <ResourceSection
+              address={accountAddress}
+              resources={resourcesData}
+              isLoading={isResourceLoading}
+            />
           </TabPanel>
           <TabPanel p={0}>
             <ModuleLists
               selectedAddress={accountAddress}
-              totalCount={modulesData.length}
+              totalCount={modulesData?.length}
+              modules={modulesData}
+              isLoading={isModulesLoading}
             />
           </TabPanel>
           <TabPanel p={0}>
@@ -405,10 +425,20 @@ const AccountDetails = () => {
   const router = useRouter();
   const { track } = useTrack();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
+  const hexToBech32 = useConvertHexAddress();
   // TODO: change to `Addr` for correctness (i.e. interchain account)
   const accountAddressParam = getFirstQueryParam(
     router.query.accountAddress
-  ).toLowerCase() as HumanAddr;
+  ).toLowerCase() as MoveAccountAddr;
+  const [hexAddr, humanAddr] = isHexAddress(accountAddressParam)
+    ? [
+        unpadHexAddress(accountAddressParam as HexAddr),
+        hexToBech32(accountAddressParam as HexAddr),
+      ]
+    : [
+        unpadHexAddress(bech32AddressToHex(accountAddressParam as HumanAddr)),
+        accountAddressParam as HumanAddr,
+      ];
   // TODO: fix assertion later
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
 
@@ -420,11 +450,12 @@ const AccountDetails = () => {
 
   return (
     <PageContainer>
-      {validateUserAddress(accountAddressParam) &&
+      {!isHexAddress(accountAddressParam) &&
+      validateUserAddress(accountAddressParam) &&
       validateContractAddress(accountAddressParam) ? (
         <InvalidAccount />
       ) : (
-        <AccountDetailsBody accountAddress={accountAddressParam} />
+        <AccountDetailsBody hexAddress={hexAddr} accountAddress={humanAddr} />
       )}
     </PageContainer>
   );
diff --git a/src/lib/services/move/resource.ts b/src/lib/services/move/resource.ts
index 69ea2e0c4..86b9d1c1b 100644
--- a/src/lib/services/move/resource.ts
+++ b/src/lib/services/move/resource.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 
-import type { MoveAccountAddr } from "lib/types";
+import type { MoveAccountAddr, Nullable } from "lib/types";
 import type {
   InternalResource,
   ResponseResource,
@@ -14,7 +14,7 @@ export const getAccountResources = async (
 ): Promise<InternalResource[]> => {
   const result: ResponseResource[] = [];
 
-  const fetchFn = async (paginationKey: string | null) => {
+  const fetchFn = async (paginationKey: Nullable<string>) => {
     const { data } = await axios.get<ResponseResources>(
       `${baseEndpoint}/initia/move/v1/accounts/${address}/resources${
         paginationKey ? `?pagination.key=${paginationKey}` : ""
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index 37fcaa149..ee213788b 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -17,6 +17,7 @@ export const useAccountResources = ({
     getAccountResources(baseEndpoint, address);
   return useQuery(
     [CELATONE_QUERY_KEYS.ACCOUNT_RESOURCES, baseEndpoint, address],
-    queryFn
+    queryFn,
+    { enabled: Boolean(address), refetchOnWindowFocus: false, retry: 1 }
   );
 };

From fddeafcec3689915a988b0cdea10f4b7d933ffd8 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 11 Oct 2023 18:22:35 +0700
Subject: [PATCH 162/368] fix: apply openNewTab

---
 src/lib/pages/interact/index.tsx                    | 13 ++++++++-----
 .../publish-module/components/ModulePublishCard.tsx |  7 +++----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/pages/interact/index.tsx b/src/lib/pages/interact/index.tsx
index c2ee0df48..c04427ed7 100644
--- a/src/lib/pages/interact/index.tsx
+++ b/src/lib/pages/interact/index.tsx
@@ -15,6 +15,7 @@ import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { ModuleSourceCode } from "lib/components/module";
 import PageContainer from "lib/components/PageContainer";
+import { useOpenNewTab } from "lib/hooks";
 import type { IndexedModule } from "lib/services/moduleService";
 import { useAccountModules, useVerifyModule } from "lib/services/moduleService";
 import type {
@@ -23,7 +24,7 @@ import type {
   MoveAccountAddr,
   Option,
 } from "lib/types";
-import { getFirstQueryParam, openNewTab } from "lib/utils";
+import { getFirstQueryParam } from "lib/utils";
 
 import {
   ModuleSelectDrawerTrigger,
@@ -37,6 +38,7 @@ export const Interact = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const { isOpen, onClose, onOpen } = useDisclosure();
+  const openNewTab = useOpenNewTab();
 
   const [module, setModule] = useState<IndexedModule>();
   const [selectedType, setSelectedType] = useState<InteractionTabs>(
@@ -182,11 +184,12 @@ export const Interact = () => {
                     <CustomIcon name="launch" boxSize={3} color="text.dark" />
                   }
                   onClick={() => {
-                    openNewTab(
-                      `/modules/${module.address.toString()}/${
+                    openNewTab({
+                      pathname: `/modules/${module.address.toString()}/${
                         module.moduleName
-                      }`
-                    );
+                      }`,
+                      query: {},
+                    });
                   }}
                 >
                   See Module
diff --git a/src/lib/pages/publish-module/components/ModulePublishCard.tsx b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
index 513d4efd4..43baeaee7 100644
--- a/src/lib/pages/publish-module/components/ModulePublishCard.tsx
+++ b/src/lib/pages/publish-module/components/ModulePublishCard.tsx
@@ -75,16 +75,15 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
         ))}
       </Flex>
       <Grid templateColumns="1fr 1fr 1fr" columnGap={4}>
-        {/* TODO: add navigation */}
         <Button
           rightIcon={<CustomIcon name="launch" boxSize={3} color="text.main" />}
           variant="outline-white"
-          onClick={() => {
+          onClick={() =>
             openNewTab({
               pathname: `/modules/${decodeRes?.abi.address}/${decodeRes?.abi.name}`,
               query: {},
-            });
-          }}
+            })
+          }
         >
           See Module
         </Button>

From d88ee3eece994096e5b2dc3f455d1b4e0e211530 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 11 Oct 2023 18:52:40 +0700
Subject: [PATCH 163/368] fix: refine logic

---
 src/lib/components/resource/ResourceCard.tsx  |  43 ++++---
 .../resource/ResourceDetailCard.tsx           |   3 +-
 src/lib/components/resource/index.ts          |   2 +
 .../components/{modules => }/ModuleLists.tsx  | 110 ++++++++----------
 .../components/asset/index.tsx                |   7 +-
 .../components/resources/ResourceLists.tsx    |  72 ++++--------
 .../components/resources/ResourceSection.tsx  |   2 +-
 .../components/resources/types.ts             |  13 +++
 src/lib/pages/account-details/index.tsx       |   4 +-
 9 files changed, 120 insertions(+), 136 deletions(-)
 create mode 100644 src/lib/components/resource/index.ts
 rename src/lib/pages/account-details/components/{modules => }/ModuleLists.tsx (56%)
 create mode 100644 src/lib/pages/account-details/components/resources/types.ts

diff --git a/src/lib/components/resource/ResourceCard.tsx b/src/lib/components/resource/ResourceCard.tsx
index 12c7d597b..1a130cd40 100644
--- a/src/lib/components/resource/ResourceCard.tsx
+++ b/src/lib/components/resource/ResourceCard.tsx
@@ -7,31 +7,30 @@ interface ResourceCardProps {
   isSelected?: boolean;
   onClick: () => void;
 }
+
 export const ResourceCard = ({
   name,
   amount,
   hasBorder = false,
   isSelected = false,
   onClick,
-}: ResourceCardProps) => {
-  return (
-    <Flex
-      w="full"
-      border={hasBorder ? "1px solid" : "none"}
-      _hover={{ background: "gray.800" }}
-      transition="all .25s ease-in-out"
-      cursor="pointer"
-      borderColor="gray.700"
-      bgColor={isSelected ? "gray.800" : "gray.900"}
-      borderRadius={8}
-      p={3}
-      alignItems="center"
-      onClick={onClick}
-    >
-      <Text className="ellipsis">{name}</Text>
-      <Badge variant={isSelected ? "primary" : "gray"} ml={2}>
-        {amount}
-      </Badge>
-    </Flex>
-  );
-};
+}: ResourceCardProps) => (
+  <Flex
+    w="full"
+    border={hasBorder ? "1px solid" : "none"}
+    _hover={{ background: "gray.800" }}
+    transition="all .25s ease-in-out"
+    cursor="pointer"
+    borderColor="gray.700"
+    bgColor={isSelected ? "gray.800" : "gray.900"}
+    borderRadius={8}
+    p={3}
+    alignItems="center"
+    onClick={onClick}
+  >
+    <Text className="ellipsis">{name}</Text>
+    <Badge variant={isSelected ? "primary" : "gray"} ml={2}>
+      {amount}
+    </Badge>
+  </Flex>
+);
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index d1df2df98..378336f01 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -14,6 +14,7 @@ import type { InternalResource } from "lib/types";
 interface ResourceDetailCardProps {
   resourceData: InternalResource;
 }
+
 export const ResourceDetailCard = ({
   resourceData,
 }: ResourceDetailCardProps) => {
@@ -80,7 +81,7 @@ export const ResourceDetailCard = ({
       <AccordionPanel p={4} borderTop="1px solid" borderColor="gray.700">
         <Flex direction="column" gap={3}>
           {formattedArray.map((item) => (
-            <Flex gap={4} key={item.key}>
+            <Flex key={item.key} gap={4}>
               <Text variant="body2" color="text.dark" w={52}>
                 {item.key}
               </Text>
diff --git a/src/lib/components/resource/index.ts b/src/lib/components/resource/index.ts
new file mode 100644
index 000000000..37f6da5d8
--- /dev/null
+++ b/src/lib/components/resource/index.ts
@@ -0,0 +1,2 @@
+export * from "./ResourceCard";
+export * from "./ResourceDetailCard";
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/ModuleLists.tsx
similarity index 56%
rename from src/lib/pages/account-details/components/modules/ModuleLists.tsx
rename to src/lib/pages/account-details/components/ModuleLists.tsx
index 1dbdc6cda..780663431 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/ModuleLists.tsx
@@ -1,7 +1,6 @@
 import { Flex, SimpleGrid } from "@chakra-ui/react";
 import { useMemo, useState } from "react";
 
-import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
@@ -12,50 +11,22 @@ import { TableTitle, ViewMore } from "lib/components/table";
 import { type IndexedModule } from "lib/services/move/moduleService";
 import type { HumanAddr, Option } from "lib/types";
 
+import { ErrorFetching } from "./ErrorFetching";
+
 interface ModuleListsProps {
-  onViewMore?: () => void;
   totalCount: Option<number>;
   selectedAddress: HumanAddr;
   modules: Option<IndexedModule[]>;
   isLoading: boolean;
+  onViewMore?: () => void;
 }
 
-const ModuleTitle = ({
-  onViewMore,
-  totalCount,
-}: {
-  onViewMore: ModuleListsProps["onViewMore"];
-  totalCount: ModuleListsProps["totalCount"];
-}) => {
-  const isMobile = useMobile();
-  if (isMobile && onViewMore)
-    return (
-      <Flex
-        justify="space-between"
-        w="full"
-        bg="gray.900"
-        borderRadius="8px"
-        p={4}
-        onClick={onViewMore}
-      >
-        <TableTitle title="Modules" count={totalCount} mb={0} />
-        <CustomIcon name="chevron-right" color="gray.600" />
-      </Flex>
-    );
-  return (
-    <TableTitle
-      title="Module Instances"
-      helperText="Modules are ‘smart contracts’ deployed by this account"
-      count={totalCount}
-    />
-  );
-};
 export const ModuleLists = ({
-  onViewMore,
   totalCount,
   selectedAddress,
   modules,
   isLoading,
+  onViewMore,
 }: ModuleListsProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
@@ -81,6 +52,7 @@ export const ModuleLists = ({
   if (isLoading) return <Loading />;
   if (!modules) return <ErrorFetching />;
 
+  const isMobileOverview = isMobile && !!onViewMore;
   return (
     <Flex
       direction="column"
@@ -88,21 +60,40 @@ export const ModuleLists = ({
       mb={{ base: 0, md: 8 }}
       width="full"
     >
-      <ModuleTitle onViewMore={onViewMore} totalCount={totalCount} />
-      <Flex direction="column" gap={8}>
-        {!onViewMore && (
-          <InputWithIcon
-            placeholder="Search with Module Name..."
-            value={keyword}
-            onChange={(e) => setKeyword(e.target.value)}
-            action="execute-message-search"
+      {isMobileOverview ? (
+        <Flex
+          justify="space-between"
+          w="full"
+          bg="gray.900"
+          borderRadius="8px"
+          p={4}
+          onClick={onViewMore}
+        >
+          <TableTitle title="Modules" count={totalCount} mb={0} />
+          <CustomIcon name="chevron-right" color="gray.600" />
+        </Flex>
+      ) : (
+        <>
+          <TableTitle
+            title="Module Instances"
+            helperText="Modules are ‘smart contracts’ deployed by this account"
+            count={totalCount}
           />
-        )}
-        {!(isMobile && onViewMore) &&
-          (filteredModules?.length ? (
-            <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
-              {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
-                (item) => (
+          <Flex direction="column" gap={8}>
+            {!onViewMore && (
+              <InputWithIcon
+                placeholder="Search with Module Name..."
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+                action="execute-message-search"
+              />
+            )}
+            {filteredModules?.length ? (
+              <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
+                {(onViewMore
+                  ? filteredModules.slice(0, 9)
+                  : filteredModules
+                ).map((item) => (
                   <ModuleCard
                     key={item.moduleName}
                     isLarge
@@ -111,18 +102,19 @@ export const ModuleLists = ({
                     selectedModule={undefined}
                     setSelectedModule={handleOnSelect}
                   />
-                )
-              )}
-            </SimpleGrid>
-          ) : (
-            <EmptyState
-              imageVariant="not-found"
-              message="No matched modules found"
-              withBorder
-              my={0}
-            />
-          ))}
-      </Flex>
+                ))}
+              </SimpleGrid>
+            ) : (
+              <EmptyState
+                imageVariant="not-found"
+                message="No matched modules found"
+                withBorder
+                my={0}
+              />
+            )}
+          </Flex>
+        </>
+      )}
       {!isMobile && onViewMore && Number(filteredModules?.length) > 9 && (
         <ViewMore onClick={onViewMore} />
       )}
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index 8f2326e54..01a1670a5 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -31,7 +31,8 @@ interface AssetCtaProps {
   walletAddress: HumanAddr;
   totalAsset: number;
 }
-const MaxAssetsShow = 8;
+
+const MAX_ASSETS_SHOW = 8;
 
 const AssetTitle = ({
   onViewMore,
@@ -117,7 +118,7 @@ const AssetSectionContent = ({
       gridTemplateColumns={{ base: "1 fr", md: "repeat(4, 1fr)" }}
     >
       {supportedAssets
-        .slice(0, onViewMore ? MaxAssetsShow : undefined)
+        .slice(0, onViewMore ? MAX_ASSETS_SHOW : undefined)
         .map((asset) => (
           <TokenCard userBalance={asset} key={asset.balance.id} minW="full" />
         ))}
@@ -196,7 +197,7 @@ export const AssetsSection = ({
       {!isMobile &&
         supportedAssets &&
         onViewMore &&
-        supportedAssets.length > MaxAssetsShow && (
+        supportedAssets.length > MAX_ASSETS_SHOW && (
           <ViewMore onClick={onViewMore} />
         )}
     </Flex>
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index 78e1d478b..111202097 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -5,62 +5,21 @@ import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
-import { ResourceCard } from "lib/components/resource/ResourceCard";
+import { ResourceCard } from "lib/components/resource";
 import { EmptyState } from "lib/components/state";
 import { TableTitle, ViewMore } from "lib/components/table";
 import { useAccountResources } from "lib/services/move/resourceService";
-import type { HumanAddr, InternalResource } from "lib/types";
+import type { HumanAddr } from "lib/types";
 import { truncate } from "lib/utils";
 
-export interface ResourceGroup {
-  group: string;
-  account: string;
-  displayName: string;
-  items: InternalResource[];
-}
-
-export interface ResourceGroupByAccount {
-  owner: string;
-  resources: Record<string, ResourceGroup>;
-}
+import type { ResourceGroup } from "./types";
 
 interface ResourcesListsProps {
-  onViewMore?: () => void;
   address: HumanAddr;
+  onViewMore?: () => void;
 }
 
-const ResourceTitle = ({
-  onViewMore,
-  totalAsset,
-}: {
-  onViewMore: ResourcesListsProps["onViewMore"];
-  totalAsset: number;
-}) => {
-  const isMobile = useMobile();
-  if (!isMobile && !onViewMore) return null;
-  if (isMobile && onViewMore)
-    return (
-      <Flex
-        justify="space-between"
-        w="full"
-        bg="gray.900"
-        borderRadius="8px"
-        p={4}
-        onClick={onViewMore}
-      >
-        <TableTitle title="Resources" count={totalAsset} mb={0} />
-        <CustomIcon name="chevron-right" color="gray.600" />
-      </Flex>
-    );
-  return (
-    <TableTitle
-      helperText="Resources stored in this account"
-      title="Resources"
-      count={totalAsset}
-    />
-  );
-};
-export const ResourceLists = ({ onViewMore, address }: ResourcesListsProps) => {
+export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const { data: resources, isLoading } = useAccountResources({
@@ -110,6 +69,7 @@ export const ResourceLists = ({ onViewMore, address }: ResourcesListsProps) => {
   );
   const groupedResources = Object.values(restructuredResources);
 
+  const isMobileOverview = isMobile && !!onViewMore;
   return (
     <Flex
       direction="column"
@@ -117,9 +77,25 @@ export const ResourceLists = ({ onViewMore, address }: ResourcesListsProps) => {
       mb={{ base: 0, md: 8 }}
       width="full"
     >
-      <ResourceTitle onViewMore={onViewMore} totalAsset={resources.length} />
-      {!isMobile && (
+      {!isMobileOverview ? (
+        <Flex
+          justify="space-between"
+          w="full"
+          bg="gray.900"
+          borderRadius="8px"
+          p={4}
+          onClick={onViewMore}
+        >
+          <TableTitle title="Resources" count={resources.length} mb={0} />
+          <CustomIcon name="chevron-right" color="gray.600" />
+        </Flex>
+      ) : (
         <>
+          <TableTitle
+            helperText="Resources stored in this account"
+            title="Resources"
+            count={resources.length}
+          />
           <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
             {groupedResources.slice(0, 8).map((item) => (
               <ResourceCard
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index adb6508db..711dcf0e3 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -23,7 +23,7 @@ import { TableTitle } from "lib/components/table";
 import type { HumanAddr, InternalResource, Option } from "lib/types";
 import { getFirstQueryParam, truncate } from "lib/utils";
 
-import type { ResourceGroup, ResourceGroupByAccount } from "./ResourceLists";
+import type { ResourceGroup, ResourceGroupByAccount } from "./types";
 
 interface ResourceSectionProps {
   address: HumanAddr;
diff --git a/src/lib/pages/account-details/components/resources/types.ts b/src/lib/pages/account-details/components/resources/types.ts
new file mode 100644
index 000000000..84a5a8aae
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/types.ts
@@ -0,0 +1,13 @@
+import type { InternalResource } from "lib/types";
+
+export interface ResourceGroup {
+  group: string;
+  account: string;
+  displayName: string;
+  items: InternalResource[];
+}
+
+export interface ResourceGroupByAccount {
+  owner: string;
+  resources: Record<string, ResourceGroup>;
+}
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 4748431d5..5ceb6b3c1 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -45,7 +45,7 @@ import {
 import { AccountHeader } from "./components/AccountHeader";
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
-import { ModuleLists } from "./components/modules/ModuleLists";
+import { ModuleLists } from "./components/ModuleLists";
 import { ResourceLists, ResourceSection } from "./components/resources";
 import {
   AdminContractsTable,
@@ -270,7 +270,7 @@ const AccountDetailsBody = ({
             onClick={handleTabChange(TabIndex.Resource)}
             hidden={!move.enabled}
           >
-            Resource
+            Resources
           </CustomTab>
           <CustomTab
             count={modulesData?.length}

From e59c57975185f73fec0de58eb05085678c48b137 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 12 Oct 2023 02:30:43 +0700
Subject: [PATCH 164/368] fix: partial comment

---
 .../account-details/components/resources/ResourceLists.tsx  | 1 +
 .../components/resources/ResourceSection.tsx                | 4 ++--
 src/lib/pages/account-details/index.tsx                     | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index 111202097..8a3e6349d 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -99,6 +99,7 @@ export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
           <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
             {groupedResources.slice(0, 8).map((item) => (
               <ResourceCard
+                key={item.displayName}
                 name={item.displayName}
                 amount={item.items.length}
                 onClick={() => handleSelectResource(item)}
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 711dcf0e3..cc0c1cf14 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -146,14 +146,14 @@ export const ResourceSection = ({
                   <Flex direction="column" gap={3}>
                     {Object.values(item.resources).map((subitem) => (
                       <ResourceCard
-                        hasBorder
-                        name={subitem.group}
                         key={subitem.group}
+                        name={subitem.group}
                         amount={subitem.items.length}
                         isSelected={selectedResources.group === subitem.group}
                         onClick={() =>
                           handleSelectResource(item.owner, subitem.group)
                         }
+                        hasBorder
                       />
                     ))}
                   </Flex>
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 5ceb6b3c1..6b8c39333 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -65,7 +65,7 @@ enum TabIndex {
   Codes = "codes",
   Contracts = "contracts",
   Admins = "admins",
-  Resource = "resources",
+  Resources = "resources",
   Modules = "modules",
   Proposals = "proposals",
 }
@@ -267,7 +267,7 @@ const AccountDetailsBody = ({
           <CustomTab
             count={resourcesData?.length}
             isDisabled={!resourcesData?.length}
-            onClick={handleTabChange(TabIndex.Resource)}
+            onClick={handleTabChange(TabIndex.Resources)}
             hidden={!move.enabled}
           >
             Resources
@@ -339,7 +339,7 @@ const AccountDetailsBody = ({
               <>
                 <ResourceLists
                   address={accountAddress}
-                  onViewMore={handleTabChange(TabIndex.Resource)}
+                  onViewMore={handleTabChange(TabIndex.Resources)}
                 />
                 <ModuleLists
                   selectedAddress={accountAddress}

From 907a4b7b1f42025da25d1bc5a4fa8dbdc63ccade Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 12 Oct 2023 11:30:33 +0700
Subject: [PATCH 165/368] docs: update after cut release v1.2.0

---
 CHANGELOG.md | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49ef8a243..58bdffb55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Refactor contract detail page and add contract states
+[#524](https://github.com/alleslabs/celatone-frontend/pull/524) Ref
+actor contract detail page and add contract states
+
+### Improvements
+
+- [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
+
+### Bug fixes
+
+## v1.2.0
+
+### Features
+
 - [#487](https://github.com/alleslabs/celatone-frontend/pull/487) Support Station Extension
 - [#508](https://github.com/alleslabs/celatone-frontend/pull/508) Add auto focus, enter key listener on contract selection
 - [#492](https://github.com/alleslabs/celatone-frontend/pull/492) Add jsonschema actions on contract detail page
@@ -65,7 +77,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-- [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
 - [#538](https://github.com/alleslabs/celatone-frontend/pull/538) Add empty state in query and execute with json schema

From 76bb2bdd0bb5bd25f0633fa00866fad3fdbf016f Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 12 Oct 2023 11:34:28 +0700
Subject: [PATCH 166/368] fix: update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 60ef27168..6f19e8923 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "celatone",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Alles Labs",
   "scripts": {
     "dev": "next dev",

From 26f2d5db3d329500a239deba51603d12cae5abfe Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 12 Oct 2023 11:35:06 +0700
Subject: [PATCH 167/368] docs: fix

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58bdffb55..46970284b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,8 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-[#524](https://github.com/alleslabs/celatone-frontend/pull/524) Ref
-actor contract detail page and add contract states
+- [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Ref
+  actor contract detail page and add contract states
 
 ### Improvements
 

From 515582349d6cfa7f11f0d1ec46cbfb1bf6136292 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 12 Oct 2023 11:36:39 +0700
Subject: [PATCH 168/368] docs: fix line

---
 CHANGELOG.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46970284b..b9ab380d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,8 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Ref
-  actor contract detail page and add contract states
+- [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Refactor contract detail page and add contract states
 
 ### Improvements
 

From 5673f91114795670fad54964681e1f47a0460be6 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 12 Oct 2023 15:26:12 +0700
Subject: [PATCH 169/368] feat: support searching with hex addr and module path

---
 CHANGELOG.md                      |  1 +
 src/lib/layout/Searchbar.tsx      | 33 +++++++++++++++++++-------
 src/lib/services/searchService.ts | 39 ++++++++++++++++++++++++++++---
 src/lib/utils/modules.ts          |  4 ++--
 4 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eee359c9f..e9500746d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#562](https://github.com/alleslabs/celatone-frontend/pull/562) Support searching with hex address and module path
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Wireup publish module tx
 - [#544](https://github.com/alleslabs/celatone-frontend/pull/544) Show module source code if available
 - [#534](https://github.com/alleslabs/celatone-frontend/pull/534) Wire up initia execute function
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 5dd5249a1..2c1234831 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -35,7 +35,8 @@ import type {
   SearchResultType,
 } from "lib/services/searchService";
 import { useSearchHandler } from "lib/services/searchService";
-import type { Nullable, Option } from "lib/types";
+import type { MoveAccountAddr, Nullable, Option } from "lib/types";
+import { splitModule } from "lib/utils";
 
 const NOT_FOUND_MSG =
   "Matches not found. Please check your spelling or make sure you have selected the correct network.";
@@ -58,28 +59,38 @@ interface ResultItemProps {
   onClose?: () => void;
 }
 
+const generateQueryObject = (params: string[], value: string | string[]) =>
+  typeof value === "string"
+    ? { [params[0]]: value }
+    : params.reduce((acc, curr, idx) => ({ ...acc, [curr]: value[idx] }), {});
+
 const getRouteOptions = (
   type: Option<SearchResultType>
-): Nullable<{ pathname: string; query: string }> => {
+): Nullable<{ pathname: string; query: string[] }> => {
   switch (type) {
     case "Wallet Address":
       return {
         pathname: "/accounts/[accountAddress]",
-        query: "accountAddress",
+        query: ["accountAddress"],
       };
     case "Transaction Hash":
-      return { pathname: "/txs/[txHash]", query: "txHash" };
+      return { pathname: "/txs/[txHash]", query: ["txHash"] };
     case "Code ID":
-      return { pathname: "/codes/[codeId]", query: "codeId" };
+      return { pathname: "/codes/[codeId]", query: ["codeId"] };
     case "Contract Address":
       return {
         pathname: "/contracts/[contractAddress]",
-        query: "contractAddress",
+        query: ["contractAddress"],
       };
     case "Block":
-      return { pathname: "/blocks/[height]", query: "height" };
+      return { pathname: "/blocks/[height]", query: ["height"] };
     case "Pool ID":
-      return { pathname: "/pools/[poolId]", query: "poolId" };
+      return { pathname: "/pools/[poolId]", query: ["poolId"] };
+    case "Module Path":
+      return {
+        pathname: "/modules/[address]/[moduleName]",
+        query: ["address", "moduleName"],
+      };
     default:
       return null;
   }
@@ -259,9 +270,13 @@ const Searchbar = () => {
       trackUseMainSearch(isClick);
       const routeOptions = getRouteOptions(type);
       if (routeOptions) {
+        const queryValues =
+          type === "Module Path"
+            ? (splitModule(keyword) as [MoveAccountAddr, string])
+            : metadata.icns.address || keyword;
         navigate({
           pathname: routeOptions.pathname,
-          query: { [routeOptions.query]: metadata.icns.address || keyword },
+          query: generateQueryObject(routeOptions.query, queryValues),
         });
         setDisplayResults(false);
         setKeyword("");
diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index 01fb2ba90..b4ef2d09a 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -9,11 +9,12 @@ import {
   useGetAddressType,
 } from "lib/app-provider";
 import type { Addr, ContractAddr, Option } from "lib/types";
-import { isCodeId } from "lib/utils";
+import { isCodeId, isHexAddress, splitModule } from "lib/utils";
 
 import { useBlockInfoQuery } from "./blockService";
 import { useCodeDataByCodeId } from "./codeService";
 import { queryContract } from "./contract";
+import { useAccountModules } from "./moduleService";
 import { useAddressByICNSName, useICNSNamesByAddress } from "./nameService";
 import type { ICNSNamesResponse } from "./ns";
 import { usePoolByPoolId } from "./poolService";
@@ -26,7 +27,8 @@ export type SearchResultType =
   | "Transaction Hash"
   | "Proposal ID"
   | "Block"
-  | "Pool ID";
+  | "Pool ID"
+  | "Module Path";
 
 export interface ResultMetadata {
   icns: {
@@ -37,6 +39,7 @@ export interface ResultMetadata {
 }
 
 // TODO: Add Proposal ID
+// eslint-disable-next-line complexity
 export const useSearchHandler = (
   keyword: string,
   resetHandlerStates: () => void
@@ -52,6 +55,7 @@ export const useSearchHandler = (
       features: {
         wasm: { enabled: isWasm },
         pool: { enabled: isPool },
+        move: { enabled: isMove },
       },
     },
   } = useCelatoneApp();
@@ -86,8 +90,35 @@ export const useSearchHandler = (
   const { data: icnsAddressData, isFetching: icnsAddressFetching } =
     useAddressByICNSName(debouncedKeyword);
 
+  const [initiaAddr, moduleName, functionName] = splitModule(debouncedKeyword);
+
+  const enableModuleFetching = useMemo(
+    () =>
+      Boolean(
+        isMove &&
+          (getAddressType(initiaAddr) === "user_address" ||
+            isHexAddress(initiaAddr)) &&
+          moduleName &&
+          functionName === undefined
+      ),
+    [functionName, getAddressType, initiaAddr, isMove, moduleName]
+  );
+
+  const { data: moduleData, isFetching: moduleFetching } = useAccountModules({
+    address: initiaAddr,
+    moduleName,
+    functionName: undefined,
+    options: {
+      enabled: enableModuleFetching,
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  });
+
   const isAddr =
-    addressType === "user_address" || addressType === "contract_address";
+    addressType === "user_address" ||
+    addressType === "contract_address" ||
+    isHexAddress(debouncedKeyword);
 
   // provide ICNS metadata result
   const { data: icnsNames } = useICNSNamesByAddress(
@@ -117,12 +148,14 @@ export const useSearchHandler = (
   return {
     results: [
       addressResult,
+      enableModuleFetching && moduleData && "Module Path",
       txData && "Transaction Hash",
       codeData && "Code ID",
       blockData && "Block",
       poolData && "Pool ID",
     ].filter((res) => Boolean(res)) as SearchResultType[],
     isLoading:
+      moduleFetching ||
       txFetching ||
       codeFetching ||
       contractFetching ||
diff --git a/src/lib/utils/modules.ts b/src/lib/utils/modules.ts
index 611cc60fb..d744e8347 100644
--- a/src/lib/utils/modules.ts
+++ b/src/lib/utils/modules.ts
@@ -6,8 +6,8 @@ import type { MoveAccountAddr } from "lib/types";
  */
 
 type SplitReturn =
-  | [MoveAccountAddr, undefined, undefined]
-  | [MoveAccountAddr, string, undefined]
+  | [MoveAccountAddr]
+  | [MoveAccountAddr, string]
   | [MoveAccountAddr, string, string];
 
 export const splitModule = (path: string): SplitReturn => {

From a84d7bebd68c67519e3139c56af4d3a86056bed6 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 12 Oct 2023 16:21:11 +0700
Subject: [PATCH 170/368] fix: order by contract latest history timestamp in
 account contract instances

---
 CHANGELOG.md              |  2 +
 src/lib/gql/gql.ts        |  6 +--
 src/lib/gql/graphql.ts    | 79 +++++++++++++++++++++++++++++++++++++--
 src/lib/query/contract.ts |  4 +-
 4 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9ab380d4..3a46493a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -47,6 +47,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#563](https://github.com/alleslabs/celatone-frontend/pull/563) Order by contract latest history timestamp in account contract instances
+
 ## v1.2.0
 
 ### Features
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index a1252a06c..c6a7a8c52 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -49,7 +49,7 @@ const documents = {
     types.GetMigrationHistoriesByContractAddressDocument,
   "\n  query getMigrationHistoriesCountByContractAddress($contractAddress: String!) {\n    contract_histories_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetMigrationHistoriesCountByContractAddressDocument,
-  "\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n":
+  "\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: {\n        contract_histories_aggregate: { max: { block_height: desc } }\n      }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n":
     types.GetContractListByWalletAddressPaginationDocument,
   "\n  query getContractListByAdminPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n":
     types.GetContractListByAdminPaginationDocument,
@@ -171,8 +171,8 @@ export function graphql(
   source: "\n  query getMigrationHistoriesCountByContractAddress($contractAddress: String!) {\n    contract_histories_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getMigrationHistoriesCountByContractAddress($contractAddress: String!) {\n    contract_histories_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
+  source: "\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: {\n        contract_histories_aggregate: { max: { block_height: desc } }\n      }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
+): typeof documents["\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: {\n        contract_histories_aggregate: { max: { block_height: desc } }\n      }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getContractListByAdminPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getContractListByAdminPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 810940397..6973f0b6b 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -10554,6 +10554,11 @@ export type Transactions = {
   is_ibc: Scalars["Boolean"];
   is_instantiate: Scalars["Boolean"];
   is_migrate: Scalars["Boolean"];
+  is_move_execute: Scalars["Boolean"];
+  is_move_execute_event: Scalars["Boolean"];
+  is_move_publish: Scalars["Boolean"];
+  is_move_script: Scalars["Boolean"];
+  is_move_upgrade: Scalars["Boolean"];
   is_send: Scalars["Boolean"];
   is_store_code: Scalars["Boolean"];
   is_update_admin: Scalars["Boolean"];
@@ -10830,6 +10835,11 @@ export type Transactions_Bool_Exp = {
   is_ibc?: InputMaybe<Boolean_Comparison_Exp>;
   is_instantiate?: InputMaybe<Boolean_Comparison_Exp>;
   is_migrate?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_execute?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_execute_event?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_publish?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_script?: InputMaybe<Boolean_Comparison_Exp>;
+  is_move_upgrade?: InputMaybe<Boolean_Comparison_Exp>;
   is_send?: InputMaybe<Boolean_Comparison_Exp>;
   is_store_code?: InputMaybe<Boolean_Comparison_Exp>;
   is_update_admin?: InputMaybe<Boolean_Comparison_Exp>;
@@ -10882,6 +10892,11 @@ export type Transactions_Insert_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
@@ -10987,6 +11002,11 @@ export type Transactions_Order_By = {
   is_ibc?: InputMaybe<Order_By>;
   is_instantiate?: InputMaybe<Order_By>;
   is_migrate?: InputMaybe<Order_By>;
+  is_move_execute?: InputMaybe<Order_By>;
+  is_move_execute_event?: InputMaybe<Order_By>;
+  is_move_publish?: InputMaybe<Order_By>;
+  is_move_script?: InputMaybe<Order_By>;
+  is_move_upgrade?: InputMaybe<Order_By>;
   is_send?: InputMaybe<Order_By>;
   is_store_code?: InputMaybe<Order_By>;
   is_update_admin?: InputMaybe<Order_By>;
@@ -11032,6 +11052,16 @@ export enum Transactions_Select_Column {
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11060,6 +11090,16 @@ export enum Transactions_Select_Column_Transactions_Aggregate_Bool_Exp_Bool_And_
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11082,6 +11122,16 @@ export enum Transactions_Select_Column_Transactions_Aggregate_Bool_Exp_Bool_Or_A
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -11105,6 +11155,11 @@ export type Transactions_Set_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
@@ -11193,6 +11248,11 @@ export type Transactions_Stream_Cursor_Value_Input = {
   is_ibc?: InputMaybe<Scalars["Boolean"]>;
   is_instantiate?: InputMaybe<Scalars["Boolean"]>;
   is_migrate?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute?: InputMaybe<Scalars["Boolean"]>;
+  is_move_execute_event?: InputMaybe<Scalars["Boolean"]>;
+  is_move_publish?: InputMaybe<Scalars["Boolean"]>;
+  is_move_script?: InputMaybe<Scalars["Boolean"]>;
+  is_move_upgrade?: InputMaybe<Scalars["Boolean"]>;
   is_send?: InputMaybe<Scalars["Boolean"]>;
   is_store_code?: InputMaybe<Scalars["Boolean"]>;
   is_update_admin?: InputMaybe<Scalars["Boolean"]>;
@@ -11248,6 +11308,16 @@ export enum Transactions_Update_Column {
   /** column name */
   IsMigrate = "is_migrate",
   /** column name */
+  IsMoveExecute = "is_move_execute",
+  /** column name */
+  IsMoveExecuteEvent = "is_move_execute_event",
+  /** column name */
+  IsMovePublish = "is_move_publish",
+  /** column name */
+  IsMoveScript = "is_move_script",
+  /** column name */
+  IsMoveUpgrade = "is_move_upgrade",
+  /** column name */
   IsSend = "is_send",
   /** column name */
   IsStoreCode = "is_store_code",
@@ -15679,19 +15749,22 @@ export const GetContractListByWalletAddressPaginationDocument = {
                   fields: [
                     {
                       kind: "ObjectField",
-                      name: { kind: "Name", value: "transaction" },
+                      name: {
+                        kind: "Name",
+                        value: "contract_histories_aggregate",
+                      },
                       value: {
                         kind: "ObjectValue",
                         fields: [
                           {
                             kind: "ObjectField",
-                            name: { kind: "Name", value: "block" },
+                            name: { kind: "Name", value: "max" },
                             value: {
                               kind: "ObjectValue",
                               fields: [
                                 {
                                   kind: "ObjectField",
-                                  name: { kind: "Name", value: "timestamp" },
+                                  name: { kind: "Name", value: "block_height" },
                                   value: { kind: "EnumValue", value: "desc" },
                                 },
                               ],
diff --git a/src/lib/query/contract.ts b/src/lib/query/contract.ts
index b2a83e479..14e1c221d 100644
--- a/src/lib/query/contract.ts
+++ b/src/lib/query/contract.ts
@@ -235,7 +235,9 @@ export const getContractListByWalletAddressPagination = graphql(`
       where: { accountByInitBy: { address: { _eq: $walletAddress } } }
       limit: $pageSize
       offset: $offset
-      order_by: { transaction: { block: { timestamp: desc } } }
+      order_by: {
+        contract_histories_aggregate: { max: { block_height: desc } }
+      }
     ) {
       address
       label

From 2fb0bf86d7015b4a112535f5e8e33dd20d1a94bd Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 12 Oct 2023 16:35:20 +0700
Subject: [PATCH 171/368] fix(components): fix comments

---
 src/lib/components/copy/CopyButton.tsx        |  1 +
 src/lib/components/module/ModuleCard.tsx      |  4 +---
 .../resource/ResourceDetailCard.tsx           | 20 +++++++++----------
 .../components/ModuleLists.tsx                |  1 -
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index 473ae510a..81edaa4fe 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -46,6 +46,7 @@ export const CopyButton = ({
           }
           leftIcon={
             hasIcon ? (
+              // TODO config to style later
               <CustomIcon name="copy" boxSize={size === "xs" ? 3 : 4} />
             ) : undefined
           }
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index 7360868a0..3133cfbb4 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -12,7 +12,6 @@ interface ModuleCardProps {
   module: IndexedModule;
   selectedModule: Option<IndexedModule>;
   setSelectedModule: (module: IndexedModule) => void;
-  isLarge?: boolean;
 }
 
 export const ModuleCard = ({
@@ -20,7 +19,6 @@ export const ModuleCard = ({
   module,
   selectedModule,
   setSelectedModule,
-  isLarge = false,
 }: ModuleCardProps) => {
   const { data: isVerified } = useVerifyModule({
     address: selectedAddress,
@@ -35,7 +33,7 @@ export const ModuleCard = ({
           ? "gray.700"
           : "gray.800"
       }
-      p={isLarge ? 4 : 3}
+      p={4}
       alignItems="center"
       cursor="pointer"
       onClick={() => setSelectedModule(module)}
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 378336f01..0479db05a 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -10,6 +10,7 @@ import {
 import { CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
 import type { InternalResource } from "lib/types";
+import { parseJsonStr } from "lib/utils";
 
 interface ResourceDetailCardProps {
   resourceData: InternalResource;
@@ -18,8 +19,6 @@ interface ResourceDetailCardProps {
 export const ResourceDetailCard = ({
   resourceData,
 }: ResourceDetailCardProps) => {
-  const moveResourceObject = JSON.parse(resourceData.moveResource);
-
   if (resourceData.moveResource === '""')
     return (
       <Flex bg="gray.900" p={4} borderRadius={8} alignItems="center">
@@ -36,13 +35,13 @@ export const ResourceDetailCard = ({
       </Flex>
     );
 
-  const dataObject = moveResourceObject.data as {
-    key: string;
-    value: unknown;
-  }[];
+  const moveResourceObject = parseJsonStr(resourceData.moveResource) as {
+    type: string;
+    data: Record<string, unknown>;
+  };
 
   const formattedArray: { key: string; value: unknown }[] = Object.entries(
-    dataObject
+    moveResourceObject.data
   ).map(([key, value]) => ({
     key: key as string,
     value: value as unknown,
@@ -67,7 +66,6 @@ export const ResourceDetailCard = ({
             {resourceData.structTag}
           </Text>
           <Flex alignItems="center" gap={2} minW={36}>
-            {/* TODO  <button> cannot appear as a descendant of <button> */}
             <CopyButton
               value={resourceData.moveResource}
               variant="outline-primary"
@@ -82,15 +80,15 @@ export const ResourceDetailCard = ({
         <Flex direction="column" gap={3}>
           {formattedArray.map((item) => (
             <Flex key={item.key} gap={4}>
-              <Text variant="body2" color="text.dark" w={52}>
+              <Text variant="body2" color="text.dark" minW={40}>
                 {item.key}
               </Text>
               {typeof item.value === "object" ? (
-                <Text variant="body2" color="text.main">
+                <Text variant="body2" color="text.main" wordBreak="break-all">
                   {JSON.stringify(item.value)}
                 </Text>
               ) : (
-                <Text variant="body2" color="text.main">
+                <Text variant="body2" color="text.main" wordBreak="break-word">
                   {item.value?.toString()}
                 </Text>
               )}
diff --git a/src/lib/pages/account-details/components/ModuleLists.tsx b/src/lib/pages/account-details/components/ModuleLists.tsx
index 780663431..c5de952e6 100644
--- a/src/lib/pages/account-details/components/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/ModuleLists.tsx
@@ -96,7 +96,6 @@ export const ModuleLists = ({
                 ).map((item) => (
                   <ModuleCard
                     key={item.moduleName}
-                    isLarge
                     selectedAddress={selectedAddress}
                     module={item}
                     selectedModule={undefined}

From ba6eb9e48299393022205ad83cab93fb422a8098 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 12 Oct 2023 17:16:19 +0700
Subject: [PATCH 172/368] fix(components): fix search

---
 .../components/module/FunctionDetailCard.tsx  |  1 +
 src/lib/components/module/StructCard.tsx      |  1 +
 .../components/FunctionTypeSwitch.tsx         | 12 ++++-
 .../components/ModuleFunction.tsx             | 44 ++++++++-----------
 .../module-details/components/ModuleInfo.tsx  |  4 +-
 .../components/ModuleStruct.tsx               |  4 +-
 6 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index c5777749d..49a1853ce 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -151,6 +151,7 @@ export const FunctionDetailCard = ({
           <AccordionButton
             flexDirection="column"
             alignItems="flex-start"
+            _hover={{ bg: "transparent" }}
             onClick={() => ({
               action: !isExpanded ? "expand" : "collapse",
               component: "unsupported_pool",
diff --git a/src/lib/components/module/StructCard.tsx b/src/lib/components/module/StructCard.tsx
index 6a12dea3e..2e51065d0 100644
--- a/src/lib/components/module/StructCard.tsx
+++ b/src/lib/components/module/StructCard.tsx
@@ -43,6 +43,7 @@ export const StructCard = ({ struct }: StructCardProps) => {
           <AccordionButton
             flexDirection="column"
             alignItems="flex-start"
+            _hover={{ bg: "transparent" }}
             onClick={() => ({
               action: !isExpanded ? "expand" : "collapse",
               component: "unsupported_pool",
diff --git a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
index e9e6061ca..14455966e 100644
--- a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
+++ b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
@@ -44,7 +44,6 @@ export const FunctionTypeSwitch = ({
           key={tab}
           w="full"
           minW="128px"
-          cursor="pointer"
           p="2px 10px"
           variants={{
             active: { color: "var(--chakra-colors-text-main)" },
@@ -54,9 +53,18 @@ export const FunctionTypeSwitch = ({
           }}
           initial="inactive"
           animate={currentTab === tab ? "active" : "inactive"}
-          onClick={() => onTabChange(tab)}
           zIndex={1}
           textAlign="center"
+          {...(counts[idx] === 0
+            ? {
+                opacity: 0.3,
+                cursor: "not-allowed",
+                onClick: undefined,
+              }
+            : {
+                onClick: () => onTabChange(tab),
+                cursor: "pointer",
+              })}
         >
           <Heading as="h6" variant="h6" fontSize="14px">
             {tab} {`(${counts[idx]})`}
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index b6c10e924..8bc65d3bb 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -6,7 +6,6 @@ import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { FunctionDetailCard } from "lib/components/module/FunctionDetailCard";
-import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
@@ -36,31 +35,24 @@ const FunctionAccordions = ({
   expandedIndexes: number[];
   updateExpandedIndexes: (indexes: number[]) => void;
 }) => (
-  <Flex id={type} display="none">
-    {fns.length ? (
-      <Accordion
-        allowMultiple
-        index={expandedIndexes}
-        onChange={updateExpandedIndexes}
-      >
-        <Flex direction="column" gap={4}>
-          {fns.map((fn) => (
-            <FunctionDetailCard
-              exposedFn={fn}
-              key={fn.name}
-              address={address}
-              moduleName={moduleName}
-            />
-          ))}
-        </Flex>
-      </Accordion>
-    ) : (
-      <EmptyState
-        imageVariant="empty"
-        message={"This module doesn't contain any execute functions."}
-      />
-    )}
-  </Flex>
+  <Accordion
+    id={type}
+    display="none"
+    allowMultiple
+    index={expandedIndexes}
+    onChange={updateExpandedIndexes}
+  >
+    <Flex direction="column" gap={4}>
+      {fns.map((fn) => (
+        <FunctionDetailCard
+          exposedFn={fn}
+          key={fn.name}
+          address={address}
+          moduleName={moduleName}
+        />
+      ))}
+    </Flex>
+  </Accordion>
 );
 
 export const ModuleFunction = ({
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index e96a7e670..5b12b140d 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -72,7 +72,7 @@ export const ModuleInfo = ({
             fixedHeight
           />
         </LabelText>
-        <LabelText
+        {/* <LabelText
           label="Initial Published Proposal ID"
           helperText1="TODO Published DAO Module"
         >
@@ -82,7 +82,7 @@ export const ModuleInfo = ({
             fixedHeight
             type="proposal_id"
           />
-        </LabelText>
+        </LabelText> */}
       </Flex>
       <ModuleSourceCode sourceCode={verificationData?.source} />
     </Flex>
diff --git a/src/lib/pages/module-details/components/ModuleStruct.tsx b/src/lib/pages/module-details/components/ModuleStruct.tsx
index 7da60e1dc..20562f4bc 100644
--- a/src/lib/pages/module-details/components/ModuleStruct.tsx
+++ b/src/lib/pages/module-details/components/ModuleStruct.tsx
@@ -15,7 +15,9 @@ export const ModuleStruct = ({ structs }: ModuleStructProps) => {
 
   const filteredStructs = useMemo(() => {
     if (!keyword) return structs;
-    return structs.filter((struct) => struct.name.includes(keyword));
+    return structs.filter((struct) =>
+      struct.name.toLowerCase().includes(keyword.toLowerCase())
+    );
   }, [keyword, structs]);
 
   const updateExpandedIndexes = (indexes: number[]) =>

From 82e07f253c4b7cdcb8002de601032bf701dfde03 Mon Sep 17 00:00:00 2001
From: Kanisorn Peach <kanisorn.peach@gmail.com>
Date: Thu, 12 Oct 2023 17:24:22 +0700
Subject: [PATCH 173/368] Merge pull request #564 from
 alleslabs/update-cosmjs-version

update cosmjs version to latest and bump terra testnet gas price
---
 CHANGELOG.md                            |   1 +
 package.json                            |  10 +-
 src/lib/chain-registry/terra2testnet.ts |  10 +-
 yarn.lock                               | 182 ++++++++++--------------
 4 files changed, 84 insertions(+), 119 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9ab380d4..9ea249331 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#564](https://github.com/alleslabs/celatone-frontend/pull/564) Update cosmjs version to latest and bump terra testnet gas price
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
 - [#538](https://github.com/alleslabs/celatone-frontend/pull/538) Add empty state in query and execute with json schema
diff --git a/package.json b/package.json
index 6f19e8923..e2cce9c9d 100644
--- a/package.json
+++ b/package.json
@@ -27,11 +27,11 @@
     "@chakra-ui/icons": "^2.0.11",
     "@chakra-ui/react": "2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
-    "@cosmjs/cosmwasm-stargate": "^0.30.1",
-    "@cosmjs/crypto": "^0.30.1",
-    "@cosmjs/encoding": "^0.30.1",
-    "@cosmjs/proto-signing": "^0.30.1",
-    "@cosmjs/stargate": "^0.30.1",
+    "@cosmjs/cosmwasm-stargate": "^0.31.1",
+    "@cosmjs/crypto": "^0.31.1",
+    "@cosmjs/encoding": "^0.31.1",
+    "@cosmjs/proto-signing": "^0.31.1",
+    "@cosmjs/stargate": "^0.31.1",
     "@cosmos-kit/compass": "2.3.0",
     "@cosmos-kit/core": "2.5.0",
     "@cosmos-kit/keplr": "2.3.0",
diff --git a/src/lib/chain-registry/terra2testnet.ts b/src/lib/chain-registry/terra2testnet.ts
index 2ab63dbcf..47aea943c 100644
--- a/src/lib/chain-registry/terra2testnet.ts
+++ b/src/lib/chain-registry/terra2testnet.ts
@@ -6,7 +6,7 @@ export const terra2testnet: Chain = {
   status: "live",
   network_type: "testnet",
   website: "https://www.terra.money/",
-  pretty_name: "Terra 2.0",
+  pretty_name: "Terra 2.0 Testnet",
   chain_id: "pisco-1",
   daemon_name: "terrad",
   node_home: "$HOME/.terra",
@@ -16,10 +16,10 @@ export const terra2testnet: Chain = {
     fee_tokens: [
       {
         denom: "uluna",
-        fixed_min_gas_price: 0.0125,
-        low_gas_price: 0.0125,
-        average_gas_price: 0.015,
-        high_gas_price: 0.04,
+        fixed_min_gas_price: 0.125,
+        low_gas_price: 0.125,
+        average_gas_price: 0.15,
+        high_gas_price: 0.4,
       },
     ],
   },
diff --git a/yarn.lock b/yarn.lock
index 6d247da97..0cd3c39d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2133,17 +2133,7 @@
   resolved "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.29.tgz"
   integrity sha512-q/yVUnqckA8Do+EvAfpy7RLdumnBy9ZsducMUtZTvpdbJC7azEf1hGtnYYxm0QfphYxjwggv6XtH64prvS1W+A==
 
-"@cosmjs/amino@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.30.1.tgz#7c18c14627361ba6c88e3495700ceea1f76baace"
-  integrity sha512-yNHnzmvAlkETDYIpeCTdVqgvrdt1qgkOXwuRVi8s27UKI5hfqyE9fJ/fuunXE6ZZPnKkjIecDznmuUOMrMvw4w==
-  dependencies:
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-
-"@cosmjs/amino@^0.31.0":
+"@cosmjs/amino@^0.31.0", "@cosmjs/amino@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.31.1.tgz#e6b4adc3ebe19ddfd953c67ee04b1eae488238af"
   integrity sha512-kkB9IAkNEUFtjp/uwHv95TgM8VGJ4VWfZwrTyLNqBDD1EpSX2dsNrmUe7k8OMPzKlZUFcKmD4iA0qGvIwzjbGA==
@@ -2153,36 +2143,23 @@
     "@cosmjs/math" "^0.31.1"
     "@cosmjs/utils" "^0.31.1"
 
-"@cosmjs/cosmwasm-stargate@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.30.1.tgz#6f9ca310f75433a3e30d683bc6aa24eadb345d79"
-  integrity sha512-W/6SLUCJAJGBN+sJLXouLZikVgmqDd9LCdlMzQaxczcCHTWeJAmRvOiZGSZaSy3shw/JN1qc6g6PKpvTVgj10A==
-  dependencies:
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/proto-signing" "^0.30.1"
-    "@cosmjs/stargate" "^0.30.1"
-    "@cosmjs/tendermint-rpc" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+"@cosmjs/cosmwasm-stargate@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.31.1.tgz#36d4386238fd4310d144486a27585a4fec3f27cd"
+  integrity sha512-5hwv4oztFnpqnFaXhYxZc93na3qdxylT2kqms4pLzD8CWMEQmrwhdM4KpZimrsyZK55WiMQtTPsdSh7M8KLOow==
+  dependencies:
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/proto-signing" "^0.31.1"
+    "@cosmjs/stargate" "^0.31.1"
+    "@cosmjs/tendermint-rpc" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
     pako "^2.0.2"
 
-"@cosmjs/crypto@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.30.1.tgz#21e94d5ca8f8ded16eee1389d2639cb5c43c3eb5"
-  integrity sha512-rAljUlake3MSXs9xAm87mu34GfBLN0h/1uPPV6jEwClWjNkAMotzjC0ab9MARy5FFAvYHL3lWb57bhkbt2GtzQ==
-  dependencies:
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    "@noble/hashes" "^1"
-    bn.js "^5.2.0"
-    elliptic "^6.5.4"
-    libsodium-wrappers "^0.7.6"
-
 "@cosmjs/crypto@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.31.1.tgz#ce4917df0f7b38f0909a32020907ccff04acefe6"
@@ -2205,15 +2182,6 @@
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/encoding@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.30.1.tgz#b5c4e0ef7ceb1f2753688eb96400ed70f35c6058"
-  integrity sha512-rXmrTbgqwihORwJ3xYhIgQFfMSrwLu1s43RIK9I8EBudPx3KmnmyAKzMOVsRDo9edLFNuZ9GIvysUCwQfq3WlQ==
-  dependencies:
-    base64-js "^1.3.0"
-    bech32 "^1.1.4"
-    readonly-date "^1.0.0"
-
 "@cosmjs/encoding@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.31.1.tgz#0041b2650c443d883e22f27c7d3cd7b844c6d0ec"
@@ -2223,12 +2191,12 @@
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/json-rpc@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.30.1.tgz#16f21305fc167598c8a23a45549b85106b2372bc"
-  integrity sha512-pitfC/2YN9t+kXZCbNuyrZ6M8abnCC2n62m+JtU9vQUfaEtVsgy+1Fk4TRQ175+pIWSdBMFi2wT8FWVEE4RhxQ==
+"@cosmjs/json-rpc@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.31.1.tgz#54d1064adb3ebd0412b04f87a3c2029384e4cb5e"
+  integrity sha512-gIkCj2mUDHAxvmJnHtybXtMLZDeXrkDZlujjzhvJlWsIuj1kpZbKtYqh+eNlfwhMkMMAlQa/y4422jDmizW+ng==
   dependencies:
-    "@cosmjs/stream" "^0.30.1"
+    "@cosmjs/stream" "^0.31.1"
     xstream "^11.14.0"
 
 "@cosmjs/math@^0.20.0":
@@ -2238,13 +2206,6 @@
   dependencies:
     bn.js "^4.11.8"
 
-"@cosmjs/math@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.30.1.tgz#8b816ef4de5d3afa66cb9fdfb5df2357a7845b8a"
-  integrity sha512-yaoeI23pin9ZiPHIisa6qqLngfnBR/25tSaWpkTm8Cy10MX70UF5oN4+/t1heLaM6SSmRrhk3psRkV4+7mH51Q==
-  dependencies:
-    bn.js "^5.2.0"
-
 "@cosmjs/math@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.31.1.tgz#74c02cf237c2996b77661b636b014168b18d95e6"
@@ -2252,66 +2213,66 @@
   dependencies:
     bn.js "^5.2.0"
 
-"@cosmjs/proto-signing@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.30.1.tgz#f0dda372488df9cd2677150b89b3e9c72b3cb713"
-  integrity sha512-tXh8pPYXV4aiJVhTKHGyeZekjj+K9s2KKojMB93Gcob2DxUjfKapFYBMJSgfKPuWUPEmyr8Q9km2hplI38ILgQ==
-  dependencies:
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+"@cosmjs/proto-signing@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.31.1.tgz#3929d5bee3c88c42b3bc3c4b9db4ab3bddb684c4"
+  integrity sha512-hipbBVrssPu+jnmRzQRP5hhS/mbz2nU7RvxG/B1ZcdNhr1AtZC5DN09OTUoEpMSRgyQvScXmk/NTbyf+xmCgYg==
+  dependencies:
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
 
-"@cosmjs/socket@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/socket/-/socket-0.30.1.tgz#00b22f4b5e2ab01f4d82ccdb7b2e59536bfe5ce0"
-  integrity sha512-r6MpDL+9N+qOS/D5VaxnPaMJ3flwQ36G+vPvYJsXArj93BjgyFB7BwWwXCQDzZ+23cfChPUfhbINOenr8N2Kow==
+"@cosmjs/socket@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/socket/-/socket-0.31.1.tgz#887d4e9b6aad4b3d264d64a47bdb40bcfa9802ff"
+  integrity sha512-XTtEr+x3WGbqkzoGX0sCkwVqf5n+bBqDwqNgb+DWaBABQxHVRuuainrTVp0Yc91D3Iy2twLQzeBA9OrRxDSerw==
   dependencies:
-    "@cosmjs/stream" "^0.30.1"
+    "@cosmjs/stream" "^0.31.1"
     isomorphic-ws "^4.0.1"
     ws "^7"
     xstream "^11.14.0"
 
-"@cosmjs/stargate@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.30.1.tgz#e1b22e1226cffc6e93914a410755f1f61057ba04"
-  integrity sha512-RdbYKZCGOH8gWebO7r6WvNnQMxHrNXInY/gPHPzMjbQF6UatA6fNM2G2tdgS5j5u7FTqlCI10stNXrknaNdzog==
+"@cosmjs/stargate@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.31.1.tgz#7e2b0fd6f181250915b1d73ecf9dfbab6f3cdd0d"
+  integrity sha512-TqOJZYOH5W3sZIjR6949GfjhGXO3kSHQ3/KmE+SuKyMMmQ5fFZ45beawiRtVF0/CJg5RyPFyFGJKhb1Xxv3Lcg==
   dependencies:
     "@confio/ics23" "^0.6.8"
-    "@cosmjs/amino" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/proto-signing" "^0.30.1"
-    "@cosmjs/stream" "^0.30.1"
-    "@cosmjs/tendermint-rpc" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
-    cosmjs-types "^0.7.1"
+    "@cosmjs/amino" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/proto-signing" "^0.31.1"
+    "@cosmjs/stream" "^0.31.1"
+    "@cosmjs/tendermint-rpc" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
+    cosmjs-types "^0.8.0"
     long "^4.0.0"
     protobufjs "~6.11.3"
     xstream "^11.14.0"
 
-"@cosmjs/stream@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/stream/-/stream-0.30.1.tgz#ba038a2aaf41343696b1e6e759d8e03a9516ec1a"
-  integrity sha512-Fg0pWz1zXQdoxQZpdHRMGvUH5RqS6tPv+j9Eh7Q953UjMlrwZVo0YFLC8OTf/HKVf10E4i0u6aM8D69Q6cNkgQ==
+"@cosmjs/stream@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stream/-/stream-0.31.1.tgz#01bab56278bfe32cd601043949fcdc021a5f7ca7"
+  integrity sha512-xsIGD9bpBvYYZASajCyOevh1H5pDdbOWmvb4UwGZ78doGVz3IC3Kb9BZKJHIX2fjq9CMdGVJHmlM+Zp5aM8yZA==
   dependencies:
     xstream "^11.14.0"
 
-"@cosmjs/tendermint-rpc@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.30.1.tgz#c16378892ba1ac63f72803fdf7567eab9d4f0aa0"
-  integrity sha512-Z3nCwhXSbPZJ++v85zHObeUggrEHVfm1u18ZRwXxFE9ZMl5mXTybnwYhczuYOl7KRskgwlB+rID0WYACxj4wdQ==
-  dependencies:
-    "@cosmjs/crypto" "^0.30.1"
-    "@cosmjs/encoding" "^0.30.1"
-    "@cosmjs/json-rpc" "^0.30.1"
-    "@cosmjs/math" "^0.30.1"
-    "@cosmjs/socket" "^0.30.1"
-    "@cosmjs/stream" "^0.30.1"
-    "@cosmjs/utils" "^0.30.1"
+"@cosmjs/tendermint-rpc@^0.31.1":
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.31.1.tgz#0699c6046fc8afd1eee3c648cfb3b896119ce52e"
+  integrity sha512-KX+wwi725sSePqIxfMPPOqg+xTETV8BHGOBhRhCZXEl5Fq48UlXXq3/yG1sn7K67ADC0kqHqcCF41Wn1GxNNPA==
+  dependencies:
+    "@cosmjs/crypto" "^0.31.1"
+    "@cosmjs/encoding" "^0.31.1"
+    "@cosmjs/json-rpc" "^0.31.1"
+    "@cosmjs/math" "^0.31.1"
+    "@cosmjs/socket" "^0.31.1"
+    "@cosmjs/stream" "^0.31.1"
+    "@cosmjs/utils" "^0.31.1"
     axios "^0.21.2"
     readonly-date "^1.0.0"
     xstream "^11.14.0"
@@ -2321,11 +2282,6 @@
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.20.1.tgz#4d239b7d93c15523cdf109f225cbf61326fb69cd"
   integrity sha512-xl9YnIrAAaBd6nFffwFbyrnKjqjD9zKGP8OBKxzyglxamHfqAS+PcJPEiaEpt+oUt7HAIOyhL3KK75Dh52hGvA==
 
-"@cosmjs/utils@^0.30.1":
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.30.1.tgz#6d92582341be3c2ec8d82090253cfa4b7f959edb"
-  integrity sha512-KvvX58MGMWh7xA+N+deCfunkA/ZNDvFLw4YbOmX3f/XBIkqrVY7qlotfy2aNb1kgp6h4B6Yc8YawJPDTfvWX7g==
-
 "@cosmjs/utils@^0.31.1":
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.31.1.tgz#e6055cd7d722fa72df9cbd0d39cd1f7a9ac80483"
@@ -6900,7 +6856,7 @@ cosmiconfig@7.0.1, cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmjs-types@^0.7.1, cosmjs-types@^0.7.2:
+cosmjs-types@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.7.2.tgz#a757371abd340949c5bd5d49c6f8379ae1ffd7e2"
   integrity sha512-vf2uLyktjr/XVAgEq0DjMxeAWh1yYREe7AMHDKd7EiHVqxBPCaBS+qEEQUkXbR9ndnckqr1sUG8BQhazh4X5lA==
@@ -6908,6 +6864,14 @@ cosmjs-types@^0.7.1, cosmjs-types@^0.7.2:
     long "^4.0.0"
     protobufjs "~6.11.2"
 
+cosmjs-types@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.8.0.tgz#2ed78f3e990f770229726f95f3ef5bf9e2b6859b"
+  integrity sha512-Q2Mj95Fl0PYMWEhA2LuGEIhipF7mQwd9gTQ85DdP9jjjopeoGaDxvmPa5nakNzsq7FnO1DMTatXTAx6bxMH7Lg==
+  dependencies:
+    long "^4.0.0"
+    protobufjs "~6.11.2"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"

From 0b6c7bc422a9b4ad5c6f2894126e53d7f2ddc138 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 12 Oct 2023 17:32:47 +0700
Subject: [PATCH 174/368] fix(components): apply tolowercase to search function

---
 .../pages/interact/component/FunctionSelectPanel.tsx   |  2 +-
 .../component/drawer/body/ModuleFunctionBody.tsx       |  8 ++++++--
 .../pages/module-details/components/ModuleFunction.tsx | 10 +++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/lib/pages/interact/component/FunctionSelectPanel.tsx b/src/lib/pages/interact/component/FunctionSelectPanel.tsx
index 60bd72b1c..3e98669af 100644
--- a/src/lib/pages/interact/component/FunctionSelectPanel.tsx
+++ b/src/lib/pages/interact/component/FunctionSelectPanel.tsx
@@ -98,7 +98,7 @@ export const FunctionSelectPanel = ({
         : module?.executeFunctions;
     return {
       filteredFunctions: targetFunctions?.filter((fn) =>
-        fn.name.includes(keyword)
+        fn.name.toLowerCase().includes(keyword.toLowerCase())
       ),
       isEmpty: targetFunctions?.length === 0,
       noAvailableFns:
diff --git a/src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx
index 1e98d508e..17f7e8a40 100644
--- a/src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx
+++ b/src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx
@@ -60,8 +60,12 @@ export const ModuleFunctionBody = ({
   const [keyword, setKeyword] = useState("");
   const [filteredView, filteredExecute] = useMemo(
     () => [
-      module?.viewFunctions.filter((el) => el.name.includes(keyword)),
-      module?.executeFunctions.filter((el) => el.name.includes(keyword)),
+      module?.viewFunctions.filter((el) =>
+        el.name.toLowerCase().includes(keyword.toLowerCase())
+      ),
+      module?.executeFunctions.filter((el) =>
+        el.name.toLowerCase().includes(keyword.toLowerCase())
+      ),
     ],
     [module?.viewFunctions, module?.executeFunctions, keyword]
   );
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index 8bc65d3bb..d8920e490 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -72,9 +72,13 @@ export const ModuleFunction = ({
   const [filteredFns, filteredViewFns, filteredExecuteFns] = useMemo(() => {
     if (!keyword) return [fns, viewFns, executeFns];
     return [
-      fns.filter((fn) => fn.name.includes(keyword)),
-      viewFns.filter((fn) => fn.name.includes(keyword)),
-      executeFns.filter((fn) => fn.name.includes(keyword)),
+      fns.filter((fn) => fn.name.toLowerCase().includes(keyword.toLowerCase())),
+      viewFns.filter((fn) =>
+        fn.name.toLowerCase().includes(keyword.toLowerCase())
+      ),
+      executeFns.filter((fn) =>
+        fn.name.toLowerCase().includes(keyword.toLowerCase())
+      ),
     ];
   }, [executeFns, fns, keyword, viewFns]);
 

From 3654b0d38b205e47f25293dcf05c5015e701555b Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 12 Oct 2023 18:11:01 +0700
Subject: [PATCH 175/368] fix(components): apply tolowercase in search

---
 src/lib/pages/account-details/components/ModuleLists.tsx    | 4 +++-
 .../account-details/components/resources/ResourceLists.tsx  | 2 +-
 .../pages/account-details/components/tables/txs/TxsTop.tsx  | 2 +-
 .../pages/account-details/components/tables/txs/index.tsx   | 6 +++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/pages/account-details/components/ModuleLists.tsx b/src/lib/pages/account-details/components/ModuleLists.tsx
index c5de952e6..9707b8159 100644
--- a/src/lib/pages/account-details/components/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/ModuleLists.tsx
@@ -36,7 +36,9 @@ export const ModuleLists = ({
   const filteredModules = useMemo(() => {
     if (!keyword) return modules;
 
-    return modules?.filter((module) => module.moduleName?.includes(keyword));
+    return modules?.filter((module) =>
+      module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
+    );
   }, [keyword, modules]);
 
   const handleOnSelect = (module: IndexedModule) => {
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index 8a3e6349d..8f6ed00a8 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -77,7 +77,7 @@ export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
       mb={{ base: 0, md: 8 }}
       width="full"
     >
-      {!isMobileOverview ? (
+      {isMobileOverview ? (
         <Flex
           justify="space-between"
           w="full"
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx b/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
index e4d0788e6..4c15cd5dc 100644
--- a/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
@@ -21,7 +21,7 @@ export const TxsTop = ({
     justify="space-between"
     alignItems={{ base: "start", md: "center" }}
   >
-    <TableTitle title="Transactions" count={txsCount} mb={0} />;
+    <TableTitle title="Transactions" count={txsCount} mb={0} />
     {!onViewMore && (
       <Flex
         gap={{ base: 6, md: 4 }}
diff --git a/src/lib/pages/account-details/components/tables/txs/index.tsx b/src/lib/pages/account-details/components/tables/txs/index.tsx
index 2f6af0813..fea298db4 100644
--- a/src/lib/pages/account-details/components/tables/txs/index.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/index.tsx
@@ -151,7 +151,7 @@ export const TxsTable = ({
                 setIsSigner(value);
               }}
               w={{ base: "full", md: "200px" }}
-              size={{ base: "md", md: "lg" }}
+              size="lg"
             />
           }
           txTypeSelection={
@@ -160,14 +160,14 @@ export const TxsTable = ({
               setResult={handleSetFilters}
               boxWidth={{ base: "full", md: "285px" }}
               placeholder="All"
-              size={{ base: "md", md: "lg" }}
+              size="lg"
               tagSize={{ base: "sm", md: "md" }}
             />
           }
         />
       )}
       {showErrorAlert && <TxsAlert />}
-      {isMobileOverview && (
+      {!isMobileOverview && (
         <TransactionsTable
           transactions={transactions}
           isLoading={isLoading || txsCountLoading}

From 60c16dcf39121c11de442b7a10f2d04bc465d559 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 12 Oct 2023 21:07:44 +0700
Subject: [PATCH 176/368] feat: handle multi denom delegate data

---
 CHANGELOG.md                                  |   1 +
 src/lib/app-provider/hooks/useBaseApiRoute.ts |   3 +
 src/lib/components/CopyLink.tsx               |  11 +-
 src/lib/gql/gql.ts                            |   6 +-
 src/lib/gql/graphql.ts                        |   5 -
 .../delegations/DelegationsBody.tsx           |  18 +--
 .../delegations/NonRedelegatableSection.tsx   |   2 +-
 .../components/delegations/RadioCard.tsx      |  50 -------
 .../components/delegations/TotalCard.tsx      |  65 ---------
 .../components/delegations/index.tsx          |  70 ++++------
 .../radio-card/MultiBondsRadioCard.tsx        |  45 +++++++
 .../radio-card/SingleBondRadioCard.tsx        |  56 ++++++++
 .../delegations/radio-card/index.tsx          |  47 +++++++
 .../delegations/total-card/MultiBondsCard.tsx |  75 +++++++++++
 .../delegations/total-card/SingleBondCard.tsx |  50 +++++++
 .../total-card/SingleBondMultiAssetsCard.tsx  |  61 +++++++++
 .../delegations/total-card/TotalCardModal.tsx | 100 ++++++++++++++
 .../delegations/total-card/TotalCardTop.tsx   |  26 ++++
 .../delegations/total-card/index.tsx          |  66 ++++++++++
 .../tables/bonded/BondedTableMobileCard.tsx   |  16 ++-
 .../tables/bonded/BondedTableRow.tsx          |  21 ++-
 .../tables/bonded/DelegationsTable.tsx        |  39 +++---
 .../components/tables/bonded/TokensCell.tsx   |  32 +++++
 .../tables/bonded/UnbondingsTable.tsx         |  27 +++-
 .../NonRedelegatableTableMobileCard.tsx       |   2 +-
 .../NonRedelegatableTableRow.tsx              |   2 +-
 .../tables/non-redelegatable/index.tsx        |   2 +-
 .../RedelegationTableMobileCard.tsx           |   7 +-
 .../redelegation/RedelegationTableRow.tsx     |   7 +-
 .../components/tables/redelegation/index.tsx  |  12 +-
 src/lib/pages/account-details/data.ts         | 108 ++++++++-------
 .../account-details/{type.ts => types.ts}     |   7 +
 src/lib/query/validator.ts                    |   1 -
 src/lib/services/delegation.ts                | 124 ++++++------------
 src/lib/services/delegationService.ts         |   8 +-
 src/lib/services/validator.ts                 |  14 +-
 src/lib/services/validatorService.ts          |   4 +-
 src/lib/types/index.ts                        |   1 +
 src/lib/types/staking.ts                      |   5 +
 src/lib/utils/assetValue.ts                   |  24 +++-
 40 files changed, 854 insertions(+), 366 deletions(-)
 delete mode 100644 src/lib/pages/account-details/components/delegations/RadioCard.tsx
 delete mode 100644 src/lib/pages/account-details/components/delegations/TotalCard.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/radio-card/SingleBondRadioCard.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/radio-card/index.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/TotalCardTop.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/index.tsx
 create mode 100644 src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
 rename src/lib/pages/account-details/{type.ts => types.ts} (90%)
 create mode 100644 src/lib/types/staking.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eee359c9f..3f20933d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -77,6 +77,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#564](https://github.com/alleslabs/celatone-frontend/pull/564) Handle multi bond denoms data in the delegation section
 - [#559](https://github.com/alleslabs/celatone-frontend/pull/559) Restructure and refactor responsive tables
 - [#549](https://github.com/alleslabs/celatone-frontend/pull/549) Add move tx filer options
 - [#553](https://github.com/alleslabs/celatone-frontend/pull/553) Use Cmd on Mac OS while Ctrl on others
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index b9cf4862e..eadeba11b 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -15,6 +15,7 @@ export const useBaseApiRoute = (
     | "icns_address"
     | "native_tokens"
     | "cosmwasm"
+    | "staking"
 ): string => {
   const {
     chainConfig: { chain, api: configApi },
@@ -53,6 +54,8 @@ export const useBaseApiRoute = (
       return `${api}/native-assets/${chain}/${currentChainId}`;
     case "cosmwasm":
       return `${api}/cosmwasm/${chain}/${currentChainId}`;
+    case "staking":
+      return `${api}/${chain}/${currentChainId}/staking`;
     default:
       throw new Error(
         "Error retrieving chain, api, or currentChainId from chain config."
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index fce74d07a..8264f15d0 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -4,24 +4,27 @@ import { useEffect, useMemo, useState } from "react";
 
 import { useTrack } from "lib/amplitude";
 import { useCurrentChain } from "lib/app-provider";
+import { truncate } from "lib/utils";
 
 import { CustomIcon } from "./icon";
 import { Tooltip } from "./Tooltip";
 
 interface CopyLinkProps extends FlexProps {
   value: string;
-  amptrackSection?: string;
   type: string;
   withoutIcon?: boolean;
   showCopyOnHover?: boolean;
+  isTruncate?: boolean;
+  amptrackSection?: string;
 }
 
 export const CopyLink = ({
   value,
-  amptrackSection,
   type,
   withoutIcon,
   showCopyOnHover = false,
+  isTruncate = false,
+  amptrackSection,
   ...flexProps
 }: CopyLinkProps) => {
   const { address } = useCurrentChain();
@@ -44,6 +47,7 @@ export const CopyLink = ({
     setValue(value);
   }, [value, setValue]);
 
+  const textValue = isTruncate ? truncate(value) : value;
   return (
     <Tooltip
       isOpen={isHover || hasCopied}
@@ -51,6 +55,7 @@ export const CopyLink = ({
       closeOnClick={false}
     >
       <Flex
+        w="fit-content"
         align="center"
         display={{ base: "inline", md: "flex" }}
         onClick={() => {
@@ -74,7 +79,7 @@ export const CopyLink = ({
           transition="all .25s ease-in-out"
           display="inline"
         >
-          {value === address ? `${value} (Me)` : value}
+          {value === address ? `${textValue} (Me)` : textValue}
         </Text>
         {!withoutIcon && (
           <CustomIcon
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 941af7314..1dd053c9d 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -97,7 +97,7 @@ const documents = {
     types.GetBlockTransactionsByHeightQueryDocument,
   "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetBlockTransactionCountByHeightQueryDocument,
-  "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n":
+  "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      moniker\n      operator_address\n      website\n    }\n  }\n":
     types.GetValidatorsDocument,
 };
 
@@ -243,8 +243,8 @@ export function graphql(
   source: "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n"
-): typeof documents["\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n"];
+  source: "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      moniker\n      operator_address\n      website\n    }\n  }\n"
+): typeof documents["\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      moniker\n      operator_address\n      website\n    }\n  }\n"];
 
 export function graphql(source: string): unknown;
 export function graphql(source: string) {
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 52251ba46..624c699cf 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -12797,7 +12797,6 @@ export type GetValidatorsQuery = {
     details: string;
     identity: string;
     jailed: boolean;
-    min_self_delegation: string;
     moniker: string;
     operator_address: string;
     website: string;
@@ -18641,10 +18640,6 @@ export const GetValidatorsDocument = {
                 { kind: "Field", name: { kind: "Name", value: "details" } },
                 { kind: "Field", name: { kind: "Name", value: "identity" } },
                 { kind: "Field", name: { kind: "Name", value: "jailed" } },
-                {
-                  kind: "Field",
-                  name: { kind: "Name", value: "min_self_delegation" },
-                },
                 { kind: "Field", name: { kind: "Name", value: "moniker" } },
                 {
                   kind: "Field",
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index 68418f8c8..7f00fa1e8 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -1,12 +1,13 @@
 import { Flex, RadioGroup, Stack } from "@chakra-ui/react";
 import { useState } from "react";
 
+import type { DenomInfo } from "../../types";
 import { DelegationsTable, UnbondingsTable } from "../tables";
 import { useTrack } from "lib/amplitude";
 import type { Delegation, Unbonding } from "lib/pages/account-details/data";
 import type { Option, TokenWithValue } from "lib/types";
 
-import { RadioCard } from "./RadioCard";
+import { RadioCard } from "./radio-card";
 
 interface DelegationsBodyProps {
   totalDelegations: Option<Record<string, TokenWithValue>>;
@@ -16,7 +17,7 @@ interface DelegationsBodyProps {
   rewards: Option<Record<string, TokenWithValue[]>>;
   isLoadingDelegations: boolean;
   isLoadingUnbondings: boolean;
-  defaultToken: TokenWithValue;
+  bondDenoms: DenomInfo[];
 }
 
 export const DelegationsBody = ({
@@ -27,7 +28,7 @@ export const DelegationsBody = ({
   rewards,
   isLoadingDelegations,
   isLoadingUnbondings,
-  defaultToken,
+  bondDenoms,
 }: DelegationsBodyProps) => {
   // NOTE: set between "Delegated" and "Unbonding"
   const [value, setValue] = useState("Delegated");
@@ -45,15 +46,15 @@ export const DelegationsBody = ({
         <Stack direction={{ base: "column", md: "row" }}>
           <RadioCard
             value="Delegated"
-            total={totalDelegations}
-            defaultToken={defaultToken}
+            tokens={totalDelegations}
             isLoading={isLoadingDelegations}
+            bondDenoms={bondDenoms}
           />
           <RadioCard
             value="Unbonding"
-            total={totalUnbondings}
-            defaultToken={defaultToken}
+            tokens={totalUnbondings}
             isLoading={isLoadingUnbondings}
+            bondDenoms={bondDenoms}
           />
         </Stack>
       </RadioGroup>
@@ -61,13 +62,14 @@ export const DelegationsBody = ({
         <DelegationsTable
           delegations={delegations}
           rewards={rewards}
-          defaultToken={defaultToken}
           isLoading={isLoadingDelegations}
+          isSingleBondDenom={bondDenoms.length === 1}
         />
       ) : (
         <UnbondingsTable
           unbondings={unbondings}
           isLoading={isLoadingUnbondings}
+          isSingleBondDenom={bondDenoms.length === 1}
         />
       )}
     </Flex>
diff --git a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
index 8cdada541..88fd27169 100644
--- a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
@@ -2,7 +2,7 @@ import { Box, Text } from "@chakra-ui/react";
 
 import { NonRedelegatablesTable } from "../tables";
 import type { Redelegation } from "lib/pages/account-details/data";
-import type { NonRedelegatable } from "lib/pages/account-details/type";
+import type { NonRedelegatable } from "lib/pages/account-details/types";
 
 interface NonRedelegatableSectionProps {
   redelegations: Redelegation[];
diff --git a/src/lib/pages/account-details/components/delegations/RadioCard.tsx b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
deleted file mode 100644
index f7696795a..000000000
--- a/src/lib/pages/account-details/components/delegations/RadioCard.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Flex, Radio, Text, Heading, Spinner } from "@chakra-ui/react";
-
-import type { Option, TokenWithValue } from "lib/types";
-import {
-  formatPrice,
-  formatUTokenWithPrecision,
-  getTokenLabel,
-} from "lib/utils";
-
-interface RadioCardProps {
-  value: string;
-  total: Option<Record<string, TokenWithValue>>;
-  defaultToken: TokenWithValue;
-  isLoading: boolean;
-}
-
-export const RadioCard = ({
-  value,
-  total,
-  defaultToken,
-  isLoading,
-}: RadioCardProps) => {
-  const token = total?.[defaultToken.denom] ?? defaultToken;
-  return (
-    <Radio variant="card-primary" value={value} overflowX="hidden">
-      <Flex alignItems="center" gap={2} justifyContent="space-between">
-        <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="gray.400" fontWeight={500}>
-            {value}
-          </Text>
-          {isLoading ? (
-            <Spinner mt={2} alignSelf="center" size="xl" />
-          ) : (
-            <Flex alignItems="end" gap={1}>
-              <Heading variant="h6" as="h6">
-                {formatUTokenWithPrecision(token.amount, token.precision || 0)}
-              </Heading>
-              <Text variant="body2" textColor="text.main">
-                {getTokenLabel(token.denom, token.symbol)}
-              </Text>
-            </Flex>
-          )}
-        </Flex>
-        <Text variant="body2" textColor="text.dark">
-          ({token.value ? formatPrice(token.value) : "-"})
-        </Text>
-      </Flex>
-    </Radio>
-  );
-};
diff --git a/src/lib/pages/account-details/components/delegations/TotalCard.tsx b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
deleted file mode 100644
index e72c52ec3..000000000
--- a/src/lib/pages/account-details/components/delegations/TotalCard.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { InfoIcon } from "@chakra-ui/icons";
-import { Flex, Heading, Image, Spinner, Text } from "@chakra-ui/react";
-
-import { Tooltip } from "lib/components/Tooltip";
-import { NAToken } from "lib/icon";
-import type { Option, TokenWithValue } from "lib/types";
-import {
-  formatPrice,
-  formatUTokenWithPrecision,
-  getTokenLabel,
-} from "lib/utils";
-
-interface TotalCardProps {
-  title: string;
-  message: string;
-  token: Option<TokenWithValue>;
-  isLoading: boolean;
-}
-
-export const TotalCard = ({
-  title,
-  message,
-  token,
-  isLoading,
-}: TotalCardProps) => (
-  <Flex direction="column" minW="233px" gap={1}>
-    {isLoading ? (
-      <Spinner mt={2} alignSelf="center" size="xl" />
-    ) : (
-      <>
-        <Flex alignItems="center" gap={1}>
-          <Text variant="body2" fontWeight={500} textColor="text.dark">
-            {title}
-          </Text>
-          <Tooltip label={message}>
-            <InfoIcon color="gray.600" boxSize={3} cursor="pointer" />
-          </Tooltip>
-        </Flex>
-        {!token ? (
-          <Heading variant="h6" as="h6">
-            N/A
-          </Heading>
-        ) : (
-          <Flex alignItems="center" gap={1}>
-            <Heading variant="h6" as="h6">
-              {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
-            </Heading>
-            <Text variant="body1" textColor="text.main">
-              {getTokenLabel(token.denom, token.symbol)}
-            </Text>
-            <Image
-              boxSize={6}
-              src={token.logo}
-              alt={getTokenLabel(token.denom, token.symbol)}
-              fallback={<NAToken />}
-            />
-          </Flex>
-        )}
-        <Text variant="body2" textColor="text.dark">
-          ({token?.value ? formatPrice(token.value) : "-"})
-        </Text>
-      </>
-    )}
-  </Flex>
-);
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index f73f3e174..cc81db431 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -1,38 +1,22 @@
 import { Flex, useDisclosure } from "@chakra-ui/react";
-import type Big from "big.js";
-import big from "big.js";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { useUserDelegationInfos } from "lib/pages/account-details/data";
-import type {
-  HumanAddr,
-  Option,
-  Token,
-  TokenWithValue,
-  U,
-  USD,
-} from "lib/types";
+import type { HumanAddr } from "lib/types";
 import { getTokenLabel } from "lib/utils";
 
 import { DelegationInfo } from "./DelegationInfo";
 import { DelegationsBody } from "./DelegationsBody";
 import { RedelegationsSection } from "./RedelegationsSection";
-import { TotalCard } from "./TotalCard";
+import { TotalCard } from "./total-card";
 
 interface DelegationsSectionProps {
   walletAddress: HumanAddr;
   onViewMore?: () => void;
 }
 
-const getTotalBondDenom = (
-  totals: Option<Record<string, TokenWithValue>>[],
-  bondDenom: string,
-  defaultToken: TokenWithValue
-) =>
-  totals.map((total) => (total ? total[bondDenom] ?? defaultToken : undefined));
-
 export const DelegationsSection = ({
   walletAddress,
   onViewMore,
@@ -64,25 +48,6 @@ export const DelegationsSection = ({
   if (!stakingParams)
     return <EmptyState message="Error fetching delegation data" />;
 
-  // TODO: support more than one Asset?
-  const defaultToken: TokenWithValue = {
-    denom: stakingParams.bondDenom,
-    amount: big(0) as U<Token<Big>>,
-    symbol: stakingParams.symbol,
-    logo: stakingParams.logo,
-    precision: stakingParams.precision,
-    value: stakingParams.logo ? (big(0) as USD<Big>) : undefined,
-  };
-
-  const bondDenomLabel = getTokenLabel(defaultToken.denom, defaultToken.symbol);
-
-  const [totalBondedBondDenom, totalRewardBondDenom, totalCommissionBondDenom] =
-    getTotalBondDenom(
-      [totalBonded, totalRewards, totalCommission],
-      stakingParams.bondDenom,
-      defaultToken
-    );
-
   const redelegationCount = redelegations?.length ?? 0;
 
   return (
@@ -106,8 +71,17 @@ export const DelegationsSection = ({
           totalBondedCard={
             <TotalCard
               title="Total Bonded"
-              message={`Total delegated and unbonding ${bondDenomLabel}, including those delegated through vesting`}
-              token={totalBondedBondDenom}
+              message={`Total delegated and unbonding ${
+                stakingParams.bondDenoms.length === 1
+                  ? getTokenLabel(
+                      stakingParams.bondDenoms[0].denom,
+                      stakingParams.bondDenoms[0].symbol
+                    )
+                  : "tokens"
+              }, including those delegated through vesting`}
+              address={walletAddress}
+              bondDenoms={stakingParams.bondDenoms}
+              tokens={totalBonded}
               isLoading={isLoadingTotalBonded}
             />
           }
@@ -115,15 +89,23 @@ export const DelegationsSection = ({
             <>
               <TotalCard
                 title="Reward"
-                message={`Total rewards earned from delegated ${bondDenomLabel} across all validators`}
-                token={totalRewardBondDenom}
+                message={`Total rewards earned from delegated ${
+                  stakingParams.bondDenoms.length === 1
+                    ? stakingParams.bondDenoms[0]
+                    : "tokens"
+                } across all validators`}
+                address={walletAddress}
+                bondDenoms={stakingParams.bondDenoms}
+                tokens={totalRewards}
                 isLoading={isLoadingRewards}
               />
               {isValidator && (
                 <TotalCard
                   title="Commission"
                   message="Total commission reward earned by validator"
-                  token={totalCommissionBondDenom}
+                  address={walletAddress}
+                  bondDenoms={stakingParams.bondDenoms}
+                  tokens={totalCommission}
                   isLoading={isLoadingTotalCommission}
                 />
               )}
@@ -143,9 +125,9 @@ export const DelegationsSection = ({
             totalUnbondings={totalUnbondings}
             unbondings={unbondings}
             rewards={rewards}
-            isLoadingDelegations={isLoadingDelegations}
+            isLoadingDelegations={isLoadingDelegations || isLoadingRewards}
             isLoadingUnbondings={isLoadingUnbondings}
-            defaultToken={defaultToken}
+            bondDenoms={stakingParams.bondDenoms}
           />
         )}
       </Flex>
diff --git a/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx b/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
new file mode 100644
index 000000000..ad7f18efb
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
@@ -0,0 +1,45 @@
+import { Flex, Text, Heading, Spinner } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
+
+import type { Option, TokenWithValue, USD } from "lib/types";
+import { formatPrice, totalValueTokenWithValue } from "lib/utils";
+
+interface MultiBondsRadioCardProps {
+  value: string;
+  tokens: Option<Record<string, TokenWithValue>>;
+  isLoading: boolean;
+}
+
+const MultiBondsRadioCardBody = ({
+  tokens,
+  isLoading,
+}: Omit<MultiBondsRadioCardProps, "value">) => {
+  if (isLoading) return <Spinner mt={2} alignSelf="center" size="xl" />;
+  if (!tokens)
+    return (
+      <Heading variant="h6" as="h6">
+        N/A
+      </Heading>
+    );
+
+  return (
+    <Heading variant="h6" as="h6">
+      {formatPrice(totalValueTokenWithValue(tokens, big(0) as USD<Big>))}
+    </Heading>
+  );
+};
+
+// TODO: double check UI
+export const MultiBondsRadioCard = ({
+  value,
+  tokens,
+  isLoading,
+}: MultiBondsRadioCardProps) => (
+  <Flex direction="column" gap={1}>
+    <Text variant="body2" textColor="gray.400" fontWeight={500}>
+      {value}
+    </Text>
+    <MultiBondsRadioCardBody tokens={tokens} isLoading={isLoading} />
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/delegations/radio-card/SingleBondRadioCard.tsx b/src/lib/pages/account-details/components/delegations/radio-card/SingleBondRadioCard.tsx
new file mode 100644
index 000000000..7db2b85a1
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/radio-card/SingleBondRadioCard.tsx
@@ -0,0 +1,56 @@
+import { Flex, Text, Heading, Spinner } from "@chakra-ui/react";
+
+import type { Option, TokenWithValue } from "lib/types";
+import {
+  formatPrice,
+  formatUTokenWithPrecision,
+  getTokenLabel,
+} from "lib/utils";
+
+interface SingleBondRadioCardProps {
+  value: string;
+  token: Option<TokenWithValue>;
+  isLoading: boolean;
+}
+
+const SingleBondRadioCardBody = ({
+  token,
+  isLoading,
+}: Omit<SingleBondRadioCardProps, "value">) => {
+  if (isLoading) return <Spinner mt={2} alignSelf="center" size="xl" />;
+  if (!token)
+    return (
+      <Heading variant="h6" as="h6">
+        N/A
+      </Heading>
+    );
+
+  return (
+    <Flex alignItems="end" gap={1}>
+      <Heading variant="h6" as="h6">
+        {formatUTokenWithPrecision(token.amount, token.precision || 0)}
+      </Heading>
+      <Text variant="body2" textColor="text.main">
+        {getTokenLabel(token.denom, token.symbol)}
+      </Text>
+    </Flex>
+  );
+};
+
+export const SingleBondRadioCard = ({
+  value,
+  token,
+  isLoading,
+}: SingleBondRadioCardProps) => (
+  <Flex alignItems="center" gap={2} justifyContent="space-between">
+    <Flex direction="column" gap={1}>
+      <Text variant="body2" textColor="gray.400" fontWeight={500}>
+        {value}
+      </Text>
+      <SingleBondRadioCardBody token={token} isLoading={isLoading} />
+    </Flex>
+    <Text variant="body2" textColor="text.dark">
+      ({token?.value ? formatPrice(token.value) : "-"})
+    </Text>
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/delegations/radio-card/index.tsx b/src/lib/pages/account-details/components/delegations/radio-card/index.tsx
new file mode 100644
index 000000000..5bc123f03
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/radio-card/index.tsx
@@ -0,0 +1,47 @@
+import { Radio } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
+
+import type { DenomInfo } from "lib/pages/account-details/types";
+import type { Option, TokenWithValue, USD } from "lib/types";
+
+import { MultiBondsRadioCard } from "./MultiBondsRadioCard";
+import { SingleBondRadioCard } from "./SingleBondRadioCard";
+
+interface RadioCardProps {
+  value: string;
+  tokens: Option<Record<string, TokenWithValue>>;
+  isLoading: boolean;
+  bondDenoms: DenomInfo[];
+}
+
+export const RadioCard = ({
+  value,
+  tokens,
+  isLoading,
+  bondDenoms,
+}: RadioCardProps) => (
+  <Radio variant="card" value={value} overflowX="hidden">
+    {bondDenoms.length === 1 ? (
+      <SingleBondRadioCard
+        value={value}
+        token={
+          tokens
+            ? Object.values(tokens)[0] ?? {
+                ...bondDenoms[0],
+                amount: 0,
+                value: big(0) as USD<Big>,
+              }
+            : undefined
+        }
+        isLoading={isLoading}
+      />
+    ) : (
+      <MultiBondsRadioCard
+        value={value}
+        tokens={tokens}
+        isLoading={isLoading}
+      />
+    )}
+  </Radio>
+);
diff --git a/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
new file mode 100644
index 000000000..a1c960de4
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
@@ -0,0 +1,75 @@
+import { Flex, Heading, Text, useDisclosure } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
+import plur from "plur";
+
+import { CustomIcon } from "lib/components/icon";
+import type { Addr, Option, TokenWithValue, USD } from "lib/types";
+import { formatPrice, totalValueTokenWithValue } from "lib/utils";
+
+import { TotalCardModal } from "./TotalCardModal";
+import { TotalCardTop } from "./TotalCardTop";
+
+interface MultiBondsCardProps {
+  title: string;
+  message: string;
+  address: Addr;
+  tokens: Option<Record<string, TokenWithValue>>;
+}
+
+export const MultiBondsCard = ({
+  title,
+  message,
+  address,
+  tokens,
+}: MultiBondsCardProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const isDisabled = !tokens;
+  const numTokens = tokens ? Object.entries(tokens).length : 0;
+  return (
+    <Flex
+      aria-disabled={!isDisabled}
+      minW="233px"
+      bgColor="gray.900"
+      borderRadius="8px"
+      cursor="pointer"
+      _hover={{ bgColor: "gray.700" }}
+      transition="all .25s ease-in-out"
+      _disabled={{
+        bgColor: "gray.900",
+        cursor: "not-allowed",
+      }}
+      onClick={!isDisabled ? onOpen : undefined}
+    >
+      <Flex direction="column" gap={1}>
+        <TotalCardTop title={title} message={message} fontWeight={500} />
+        {!tokens ? (
+          <Heading variant="h6" as="h6">
+            N/A
+          </Heading>
+        ) : (
+          <>
+            <Heading variant="h6" as="h6">
+              {formatPrice(
+                totalValueTokenWithValue(tokens, big(0) as USD<Big>)
+              )}
+            </Heading>
+            <Text variant="body2" color="text.dark">
+              ({`${numTokens} ${plur("token", numTokens)}`})
+            </Text>
+            <TotalCardModal
+              title={title}
+              message={message}
+              address={address}
+              tokens={tokens}
+              isOpen={isOpen}
+              onClose={onClose}
+            />
+          </>
+        )}
+      </Flex>
+      <CustomIcon name="chevron-right" boxSize={5} color="secondary.main" />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
new file mode 100644
index 000000000..09b83577f
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
@@ -0,0 +1,50 @@
+import { Flex, Heading, Image, Text } from "@chakra-ui/react";
+
+import { NAToken } from "lib/icon";
+import type { Option, TokenWithValue } from "lib/types";
+import {
+  formatPrice,
+  formatUTokenWithPrecision,
+  getTokenLabel,
+} from "lib/utils";
+
+import { TotalCardTop } from "./TotalCardTop";
+
+interface SingleBondCardProps {
+  title: string;
+  message: string;
+  token: Option<TokenWithValue>;
+}
+
+export const SingleBondCard = ({
+  title,
+  message,
+  token,
+}: SingleBondCardProps) => (
+  <Flex direction="column" minW="233px" gap={1}>
+    <TotalCardTop title={title} message={message} fontWeight={500} />
+    {!token ? (
+      <Heading variant="h6" as="h6">
+        N/A
+      </Heading>
+    ) : (
+      <Flex alignItems="center" gap={1}>
+        <Heading variant="h6" as="h6">
+          {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
+        </Heading>
+        <Text variant="body1" textColor="text.main">
+          {getTokenLabel(token.denom, token.symbol)}
+        </Text>
+        <Image
+          boxSize={6}
+          src={token.logo}
+          alt={getTokenLabel(token.denom, token.symbol)}
+          fallback={<NAToken />}
+        />
+      </Flex>
+    )}
+    <Text variant="body2" textColor="text.dark">
+      ({token?.value ? formatPrice(token.value) : "-"})
+    </Text>
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx
new file mode 100644
index 000000000..ad7485b8c
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx
@@ -0,0 +1,61 @@
+import { Flex, Heading, Text, useDisclosure } from "@chakra-ui/react";
+import { Big } from "big.js";
+
+import { CustomIcon } from "lib/components/icon";
+import type { Addr, TokenWithValue, USD } from "lib/types";
+import { formatPrice, totalValueTokenWithValue } from "lib/utils";
+
+import { TotalCardModal } from "./TotalCardModal";
+import { TotalCardTop } from "./TotalCardTop";
+
+interface SingleBondMultiAssetsCardProps {
+  title: string;
+  message: string;
+  address: Addr;
+  tokens: Record<string, TokenWithValue>;
+}
+
+export const SingleBondMultiAssetsCard = ({
+  title,
+  message,
+  address,
+  tokens,
+}: SingleBondMultiAssetsCardProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <Flex direction="column" minW="233px" gap={1}>
+      <TotalCardTop title={title} message={message} fontWeight={500} />
+      <Heading variant="h6" as="h6">
+        {formatPrice(totalValueTokenWithValue(tokens, Big(0) as USD<Big>))}
+      </Heading>
+      <Flex
+        gap={1}
+        align="center"
+        cursor="pointer"
+        _hover={{
+          textDecoration: "underline",
+          textDecorationColor: "secondary.light",
+          "& > p": { color: "secondary.light" },
+        }}
+        onClick={onOpen}
+      >
+        <Text
+          variant="body2"
+          color="secondary.main"
+          transition="all .25s ease-in-out"
+        >
+          View earned tokens
+        </Text>
+        <CustomIcon name="chevron-right" boxSize={4} color="secondary.main" />
+      </Flex>
+      <TotalCardModal
+        title={title}
+        message={message}
+        address={address}
+        tokens={tokens}
+        isOpen={isOpen}
+        onClose={onClose}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx b/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
new file mode 100644
index 000000000..f3f0043af
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
@@ -0,0 +1,100 @@
+import {
+  Flex,
+  Grid,
+  GridItem,
+  Heading,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
+
+import { CopyLink } from "lib/components/CopyLink";
+import { CustomIcon } from "lib/components/icon";
+import type { Addr, TokenWithValue, USD } from "lib/types";
+import {
+  compareTokenWithValues,
+  formatPrice,
+  totalValueTokenWithValue,
+} from "lib/utils";
+
+import { TotalCardTop } from "./TotalCardTop";
+
+interface TotalCardModel {
+  title: string;
+  message: string;
+  address: Addr;
+  tokens: Record<string, TokenWithValue>;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const TotalCardModal = ({
+  title,
+  message,
+  tokens,
+  address,
+  isOpen,
+  onClose,
+}: TotalCardModel) => (
+  <Modal
+    isOpen={isOpen}
+    onClose={onClose}
+    isCentered
+    returnFocusOnClose={false}
+  >
+    <ModalOverlay />
+    <ModalContent w="640px">
+      <ModalHeader>
+        <Flex w="full" direction="row" alignItems="center" gap={3}>
+          <CustomIcon name="assets-solid" boxSize={5} m={1} color="gray.600" />
+          <Heading variant="h5" as="h5">
+            {title}
+          </Heading>
+        </Flex>
+      </ModalHeader>
+      <ModalCloseButton color="gray.600" />
+      <ModalBody maxH="400px" overflow="overlay">
+        <Flex direction="column" gap={4}>
+          <Grid templateColumns="1fr 1fr">
+            <GridItem>
+              <Flex direction="column" gap={1}>
+                <TotalCardTop
+                  title={title}
+                  message={message}
+                  fontWeight={600}
+                />
+                <Heading variant="h6" as="h6">
+                  {formatPrice(
+                    totalValueTokenWithValue(tokens, big(0) as USD<Big>)
+                  )}
+                </Heading>
+              </Flex>
+            </GridItem>
+            <GridItem>
+              <Flex direction="column" gap="2px">
+                <Text variant="body2" fontWeight={600} textColor="text.dark">
+                  Wallet Address
+                </Text>
+                <CopyLink value={address} type="user_address" isTruncate />
+              </Flex>
+            </GridItem>
+          </Grid>
+          <Flex gap={2} direction="column">
+            {/* TODO: fix */}
+            {Object.values(tokens)
+              .sort(compareTokenWithValues)
+              .map((token) => (
+                <Text>{`${token.amount}${token.denom}`}</Text>
+              ))}
+          </Flex>
+        </Flex>
+      </ModalBody>
+    </ModalContent>
+  </Modal>
+);
diff --git a/src/lib/pages/account-details/components/delegations/total-card/TotalCardTop.tsx b/src/lib/pages/account-details/components/delegations/total-card/TotalCardTop.tsx
new file mode 100644
index 000000000..00a5da749
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/TotalCardTop.tsx
@@ -0,0 +1,26 @@
+import { InfoIcon } from "@chakra-ui/icons";
+import type { TextProps } from "@chakra-ui/react";
+import { Flex, Text } from "@chakra-ui/react";
+
+import { Tooltip } from "lib/components/Tooltip";
+
+interface TotalCardTopProps {
+  title: string;
+  message: string;
+  fontWeight: TextProps["fontWeight"];
+}
+
+export const TotalCardTop = ({
+  title,
+  message,
+  fontWeight,
+}: TotalCardTopProps) => (
+  <Flex alignItems="center" gap={1}>
+    <Text variant="body2" fontWeight={fontWeight} textColor="text.dark">
+      {title}
+    </Text>
+    <Tooltip label={message}>
+      <InfoIcon color="gray.600" boxSize={3} cursor="pointer" />
+    </Tooltip>
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/delegations/total-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
new file mode 100644
index 000000000..44dda50fd
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
@@ -0,0 +1,66 @@
+import { Box, Spinner } from "@chakra-ui/react";
+
+import type { DenomInfo } from "lib/pages/account-details/types";
+import type { Addr, Option, TokenWithValue } from "lib/types";
+
+import { MultiBondsCard } from "./MultiBondsCard";
+import { SingleBondCard } from "./SingleBondCard";
+import { SingleBondMultiAssetsCard } from "./SingleBondMultiAssetsCard";
+
+interface TotalCardProps {
+  title: string;
+  message: string;
+  address: Addr;
+  bondDenoms: DenomInfo[];
+  tokens: Option<Record<string, TokenWithValue>>;
+  isLoading: boolean;
+}
+
+export const TotalCard = ({
+  title,
+  message,
+  address,
+  bondDenoms,
+  tokens = {},
+  isLoading,
+}: TotalCardProps) => {
+  if (isLoading)
+    return (
+      <Box minW="233px">
+        <Spinner mt={2} alignSelf="center" size="xl" />
+      </Box>
+    );
+
+  if (bondDenoms.length === 1) {
+    const denoms = Object.keys(tokens);
+    const bondDenom = bondDenoms[0].denom;
+    if (
+      denoms.length === 0 ||
+      (denoms.length === 1 && denoms.includes(bondDenom))
+    )
+      return (
+        <SingleBondCard
+          title={title}
+          message={message}
+          token={tokens[bondDenom]}
+        />
+      );
+    return (
+      <SingleBondMultiAssetsCard
+        title={title}
+        message={message}
+        address={address}
+        tokens={tokens}
+      />
+    );
+  }
+
+  return (
+    <MultiBondsCard
+      title={title}
+      message={message}
+      address={address}
+      tokens={tokens}
+    />
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx
index c48bc7eb9..346f9ffcb 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableMobileCard.tsx
@@ -1,18 +1,20 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { TokenCell } from "../TokenCell";
 import { MobileLabel } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import type { BondedInfo } from "./BondedTableRow";
+import { TokensCell } from "./TokensCell";
 
 interface BondedTableMobileCardProps {
   bondedInfo: BondedInfo;
+  isSingleBondDenom: boolean;
 }
 
 export const BondedTableMobileCard = ({
   bondedInfo,
+  isSingleBondDenom,
 }: BondedTableMobileCardProps) => (
   <Flex
     borderRadius="8px"
@@ -32,13 +34,19 @@ export const BondedTableMobileCard = ({
     >
       <Flex direction="column" gap={1}>
         <MobileLabel label="Amount" />
-        <TokenCell token={bondedInfo.amount} />
+        <TokensCell
+          tokens={bondedInfo.balances}
+          isSingleBondDenom={isSingleBondDenom}
+        />
       </Flex>
 
-      {bondedInfo.reward && (
+      {bondedInfo.rewards && (
         <Flex direction="column" gap={1}>
           <MobileLabel label="Reward" />
-          <TokenCell token={bondedInfo.reward} />
+          <TokensCell
+            tokens={bondedInfo.rewards}
+            isSingleBondDenom={isSingleBondDenom}
+          />
         </Flex>
       )}
       {bondedInfo.completionTime && (
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
index e033ebb65..82efa03c2 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
@@ -1,25 +1,28 @@
 import { Flex, Grid, Text } from "@chakra-ui/react";
 
-import { TokenCell } from "../TokenCell";
 import { TableRow } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
 import type { TokenWithValue, ValidatorInfo } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
+import { TokensCell } from "./TokensCell";
+
 export interface BondedInfo {
   validator: ValidatorInfo;
-  amount: TokenWithValue;
-  reward?: TokenWithValue;
+  balances: TokenWithValue[];
+  rewards?: TokenWithValue[];
   completionTime?: Date;
 }
 
 interface BondedTableRowProps {
   bondedInfo: BondedInfo;
+  isSingleBondDenom: boolean;
   templateColumns: string;
 }
 
 export const BondedTableRow = ({
   bondedInfo,
+  isSingleBondDenom,
   templateColumns,
 }: BondedTableRowProps) => (
   <Grid
@@ -32,12 +35,18 @@ export const BondedTableRow = ({
       <ValidatorBadge validator={bondedInfo.validator} />
     </TableRow>
     <TableRow>
-      <TokenCell token={bondedInfo.amount} />
+      <TokensCell
+        tokens={bondedInfo.balances}
+        isSingleBondDenom={isSingleBondDenom}
+      />
     </TableRow>
 
-    {bondedInfo.reward && (
+    {bondedInfo.rewards && (
       <TableRow>
-        <TokenCell token={bondedInfo.reward} />
+        <TokensCell
+          tokens={bondedInfo.rewards}
+          isSingleBondDenom={isSingleBondDenom}
+        />
       </TableRow>
     )}
     {bondedInfo.completionTime && (
diff --git a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
index 6a86408d3..8fb335d11 100644
--- a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
@@ -1,5 +1,6 @@
 import { Box } from "@chakra-ui/react";
 
+import { ErrorFetching } from "../../ErrorFetching";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
@@ -19,19 +20,21 @@ import { TEMPLATE_COLUMNS } from "./constants";
 interface DelegationsTableProps {
   delegations: Option<Delegation[]>;
   rewards: Option<Record<string, TokenWithValue[]>>;
-  defaultToken: TokenWithValue;
   isLoading: boolean;
+  isSingleBondDenom: boolean;
 }
 
 const DelegationsTableBody = ({
   delegations,
   rewards,
-  defaultToken,
   isLoading,
+  isSingleBondDenom,
 }: DelegationsTableProps) => {
   const isMobile = useMobile();
 
   if (isLoading) return <Loading withBorder />;
+  if (!delegations || !rewards)
+    return <EmptyState message={<ErrorFetching />} withBorder />;
   if (!delegations?.length)
     return (
       <EmptyState
@@ -46,17 +49,17 @@ const DelegationsTableBody = ({
         <BondedTableMobileCard
           key={
             delegation.validator.validatorAddress +
-            delegation.token.amount +
-            delegation.token.denom
+            delegation.balances.reduce(
+              (prev, balance) => prev + balance.amount + balance.denom,
+              ""
+            )
           }
           bondedInfo={{
             validator: delegation.validator,
-            amount: delegation.token,
-            reward:
-              rewards?.[delegation.validator.validatorAddress]?.find(
-                (token) => token.denom === defaultToken.denom
-              ) ?? defaultToken,
+            balances: delegation.balances,
+            rewards: rewards[delegation.validator.validatorAddress] ?? [],
           }}
+          isSingleBondDenom={isSingleBondDenom}
         />
       ))}
     </MobileTableContainer>
@@ -67,17 +70,17 @@ const DelegationsTableBody = ({
         <BondedTableRow
           key={
             delegation.validator.validatorAddress +
-            delegation.token.amount +
-            delegation.token.denom
+            delegation.balances.reduce(
+              (prev, balance) => prev + balance.amount + balance.denom,
+              ""
+            )
           }
           bondedInfo={{
             validator: delegation.validator,
-            amount: delegation.token,
-            reward:
-              rewards?.[delegation.validator.validatorAddress]?.find(
-                (token) => token.denom === defaultToken.denom
-              ) ?? defaultToken,
+            balances: delegation.balances,
+            rewards: rewards[delegation.validator.validatorAddress] ?? [],
           }}
+          isSingleBondDenom={isSingleBondDenom}
           templateColumns={TEMPLATE_COLUMNS}
         />
       ))}
@@ -88,16 +91,16 @@ const DelegationsTableBody = ({
 export const DelegationsTable = ({
   delegations,
   rewards,
-  defaultToken,
   isLoading,
+  isSingleBondDenom,
 }: DelegationsTableProps) => (
   <Box width="100%">
     <TableTitle title="Delegated to" count={delegations?.length ?? 0} mb={2} />
     <DelegationsTableBody
       delegations={delegations}
       rewards={rewards}
-      defaultToken={defaultToken}
       isLoading={isLoading}
+      isSingleBondDenom={isSingleBondDenom}
     />
   </Box>
 );
diff --git a/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx b/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
new file mode 100644
index 000000000..676598d59
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
@@ -0,0 +1,32 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { TokenCell } from "../TokenCell";
+import type { TokenWithValue } from "lib/types";
+
+interface TokensCellProps {
+  tokens: TokenWithValue[];
+  isSingleBondDenom: boolean;
+}
+
+const EmptyTokenCell = () => (
+  <Text variant="body2" textColor="text.dark" h="full">
+    -
+  </Text>
+);
+
+export const TokensCell = ({ tokens, isSingleBondDenom }: TokensCellProps) => {
+  if (isSingleBondDenom) {
+    if (!tokens.length) return <EmptyTokenCell />;
+    return <TokenCell token={tokens[0]} />;
+  }
+
+  return (
+    <Flex direction="column" p={3} bgColor="gray.800" borderRadius="8px">
+      {!tokens.length ? (
+        <EmptyTokenCell />
+      ) : (
+        tokens.map((token) => <TokenCell key={token.denom} token={token} />)
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
index a9c8a53c8..f560eadf7 100644
--- a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
@@ -19,11 +19,13 @@ import { TEMPLATE_COLUMNS } from "./constants";
 interface UnbondingsTableProps {
   unbondings: Option<Unbonding[]>;
   isLoading: boolean;
+  isSingleBondDenom: boolean;
 }
 
 const UnbondingsTableBody = ({
   unbondings,
   isLoading,
+  isSingleBondDenom,
 }: UnbondingsTableProps) => {
   const isMobile = useMobile();
 
@@ -42,15 +44,18 @@ const UnbondingsTableBody = ({
         <BondedTableMobileCard
           key={
             unbonding.validator.validatorAddress +
-            unbonding.token.amount +
-            unbonding.token.denom +
+            unbonding.balances.reduce(
+              (prev, balance) => prev + balance.amount + balance.denom,
+              ""
+            ) +
             unbonding.completionTime
           }
           bondedInfo={{
             validator: unbonding.validator,
-            amount: unbonding.token,
+            balances: unbonding.balances,
             completionTime: unbonding.completionTime,
           }}
+          isSingleBondDenom={isSingleBondDenom}
         />
       ))}
     </MobileTableContainer>
@@ -64,15 +69,18 @@ const UnbondingsTableBody = ({
         <BondedTableRow
           key={
             unbonding.validator.validatorAddress +
-            unbonding.token.amount +
-            unbonding.token.denom +
+            unbonding.balances.reduce(
+              (prev, balance) => prev + balance.amount + balance.denom,
+              ""
+            ) +
             unbonding.completionTime
           }
           bondedInfo={{
             validator: unbonding.validator,
-            amount: unbonding.token,
+            balances: unbonding.balances,
             completionTime: unbonding.completionTime,
           }}
+          isSingleBondDenom={isSingleBondDenom}
           templateColumns={TEMPLATE_COLUMNS}
         />
       ))}
@@ -83,9 +91,14 @@ const UnbondingsTableBody = ({
 export const UnbondingsTable = ({
   unbondings,
   isLoading,
+  isSingleBondDenom,
 }: UnbondingsTableProps) => (
   <Box width="100%">
     <TableTitle title="Unbonding" count={unbondings?.length ?? 0} mb={2} />
-    <UnbondingsTableBody unbondings={unbondings} isLoading={isLoading} />
+    <UnbondingsTableBody
+      unbondings={unbondings}
+      isLoading={isLoading}
+      isSingleBondDenom={isSingleBondDenom}
+    />
   </Box>
 );
diff --git a/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx
index 6ac129fd7..2dc705e7a 100644
--- a/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx
+++ b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx
@@ -2,7 +2,7 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { MobileLabel } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { NonRedelegatable } from "lib/pages/account-details/type";
+import type { NonRedelegatable } from "lib/pages/account-details/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface NonRedelegatablesTableMobileCardProps {
diff --git a/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableRow.tsx b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableRow.tsx
index d3a440f16..2eb3f98c2 100644
--- a/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableRow.tsx
@@ -2,7 +2,7 @@ import { Flex, Grid, Text } from "@chakra-ui/react";
 
 import { TableRow } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { NonRedelegatable } from "lib/pages/account-details/type";
+import type { NonRedelegatable } from "lib/pages/account-details/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface NonRedelegatableTableRowProps {
diff --git a/src/lib/pages/account-details/components/tables/non-redelegatable/index.tsx b/src/lib/pages/account-details/components/tables/non-redelegatable/index.tsx
index 7a8c14105..814cb3e91 100644
--- a/src/lib/pages/account-details/components/tables/non-redelegatable/index.tsx
+++ b/src/lib/pages/account-details/components/tables/non-redelegatable/index.tsx
@@ -1,6 +1,6 @@
 import { useMobile } from "lib/app-provider";
 import { MobileTableContainer, TableContainer } from "lib/components/table";
-import type { NonRedelegatable } from "lib/pages/account-details/type";
+import type { NonRedelegatable } from "lib/pages/account-details/types";
 
 import { NonRedelegatableTableHeader } from "./NonRedelegatableTableHeader";
 import { NonRedelegatablesTableMobileCard } from "./NonRedelegatableTableMobileCard";
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
index 4e5969b86..a963197e0 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
@@ -49,7 +49,12 @@ export const RedelegationTableMobileCard = ({
     </Grid>
     <Flex direction="column" gap={1}>
       <MobileLabel label="Amount" />
-      <TokenCell token={redelegation.token} />
+      {
+        /* TODO: double check with multi denom */
+        redelegation.balances.map((balance) => (
+          <TokenCell token={balance} />
+        ))
+      }
     </Flex>
     <Flex direction="column" gap={1}>
       <MobileLabel label="Completed by" />
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
index 695bc470c..5193f7dc3 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
@@ -32,7 +32,12 @@ export const RedelegationTableRow = ({
       <ValidatorBadge validator={redelegation.dstValidator} />
     </TableRow>
     <TableRow>
-      <TokenCell token={redelegation.token} />
+      {
+        /* TODO: double check with multi denom */
+        redelegation.balances.map((balance) => (
+          <TokenCell token={balance} />
+        ))
+      }
     </TableRow>
     <TableRow>
       <Flex direction="column">
diff --git a/src/lib/pages/account-details/components/tables/redelegation/index.tsx b/src/lib/pages/account-details/components/tables/redelegation/index.tsx
index ecafbac64..c25a1fda7 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/index.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/index.tsx
@@ -26,8 +26,10 @@ export const RedelegationsTable = ({
           key={
             redelegation.srcValidator.validatorAddress +
             redelegation.dstValidator.validatorAddress +
-            redelegation.token.amount +
-            redelegation.token.denom +
+            redelegation.balances.reduce(
+              (prev, balance) => prev + balance.amount + balance.denom,
+              ""
+            ) +
             redelegation.completionTime
           }
           redelegation={redelegation}
@@ -42,8 +44,10 @@ export const RedelegationsTable = ({
           key={
             redelegation.srcValidator.validatorAddress +
             redelegation.dstValidator.validatorAddress +
-            redelegation.token.amount +
-            redelegation.token.denom +
+            redelegation.balances.reduce(
+              (prev, balance) => prev + balance.amount + balance.denom,
+              ""
+            ) +
             redelegation.completionTime
           }
           redelegation={redelegation}
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index 9429001a5..2e56b52de 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -35,9 +35,11 @@ import {
   addrToValoper,
   addTokenWithValue,
   coinToTokenWithValue,
+  totalValueTokenWithValue,
+  compareTokenWithValues,
 } from "lib/utils";
 
-import type { UserDelegationsData } from "./type";
+import type { DenomInfo, UserDelegationsData } from "./types";
 
 interface AccountContracts {
   contracts: Option<ContractInfo[]>;
@@ -57,28 +59,26 @@ interface AccountAssetInfos {
   error: Error;
 }
 
-export interface StakingParams extends RawStakingParams {
-  symbol: Option<string>;
-  logo: Option<string>;
-  precision: Option<number>;
+export interface StakingParams extends Omit<RawStakingParams, "bondDenoms"> {
+  bondDenoms: DenomInfo[];
 }
 
 export interface Delegation {
   validator: ValidatorInfo;
-  token: TokenWithValue;
+  balances: TokenWithValue[];
 }
 
 export interface Unbonding {
   validator: ValidatorInfo;
   completionTime: Date;
-  token: TokenWithValue;
+  balances: TokenWithValue[];
 }
 
 export interface Redelegation {
   srcValidator: ValidatorInfo;
   dstValidator: ValidatorInfo;
   completionTime: Date;
-  token: TokenWithValue;
+  balances: TokenWithValue[];
 }
 
 export const useAccountContracts = (
@@ -262,13 +262,15 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
   };
 
   if (rawStakingParams && assetInfos && validators) {
-    const stakingParams = {
+    data.stakingParams = {
       ...rawStakingParams,
-      symbol: assetInfos[rawStakingParams.bondDenom]?.symbol,
-      logo: assetInfos[rawStakingParams.bondDenom]?.logo,
-      precision: assetInfos[rawStakingParams.bondDenom]?.precision,
+      bondDenoms: rawStakingParams.bondDenoms.map((denom) => ({
+        denom,
+        symbol: assetInfos[denom]?.symbol,
+        logo: assetInfos[denom]?.logo,
+        precision: assetInfos[denom]?.precision,
+      })),
     };
-    data.stakingParams = stakingParams;
 
     data.isValidator = Object.keys(validators).includes(
       addrToValoper(walletAddress)
@@ -278,20 +280,25 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       validator: {
         validatorAddress: raw.validatorAddress,
         moniker: validators[raw.validatorAddress]?.moniker,
-        identity: raw.identity,
+        identity: validators[raw.validatorAddress]?.identity,
       },
-      token: coinToTokenWithValue(raw.denom, raw.amount, assetInfos[raw.denom]),
+      balances: raw.balance
+        .map((coin) =>
+          coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+        )
+        .sort(compareTokenWithValues),
     }));
     data.totalDelegations = data.delegations?.reduce<
       Record<string, TokenWithValue>
     >(
-      (total, delegation) => ({
-        ...total,
-        [delegation.token.denom]: addTokenWithValue(
-          total[delegation.token.denom],
-          delegation.token
+      (total, delegation) =>
+        delegation.balances.reduce(
+          (acc, balance) => ({
+            ...acc,
+            [balance.denom]: addTokenWithValue(acc[balance.denom], balance),
+          }),
+          total
         ),
-      }),
       {}
     );
 
@@ -299,34 +306,41 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       validator: {
         validatorAddress: raw.validatorAddress,
         moniker: validators[raw.validatorAddress]?.moniker,
-        identity: raw.identity,
+        identity: validators[raw.validatorAddress]?.identity,
       },
       completionTime: raw.completionTime,
-      token: coinToTokenWithValue(
-        rawStakingParams.bondDenom,
-        raw.amount,
-        assetInfos[rawStakingParams.bondDenom]
-      ),
+      balances: raw.balance
+        .map((coin) =>
+          coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+        )
+        .sort(compareTokenWithValues),
     }));
     data.totalUnbondings = data.unbondings?.reduce<
       Record<string, TokenWithValue>
     >(
-      (total, unbonding) => ({
-        ...total,
-        [unbonding.token.denom]: addTokenWithValue(
-          total[unbonding.token.denom],
-          unbonding.token
+      (total, unbonding) =>
+        unbonding.balances.reduce(
+          (acc, balance) => ({
+            ...acc,
+            [balance.denom]: addTokenWithValue(acc[balance.denom], balance),
+          }),
+          total
         ),
-      }),
       {}
     );
 
     data.rewards = rawRewards?.rewards.reduce<Record<string, TokenWithValue[]>>(
       (prev, raw) => ({
         ...prev,
-        [raw.validatorAddress]: raw.reward.map<TokenWithValue>((coin) =>
-          coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
-        ),
+        [raw.validatorAddress]: raw.reward
+          .map<TokenWithValue>((coin) =>
+            coinToTokenWithValue(
+              coin.denom,
+              coin.amount,
+              assetInfos[coin.denom]
+            )
+          )
+          .sort(compareTokenWithValues),
       }),
       {}
     );
@@ -348,19 +362,19 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       srcValidator: {
         validatorAddress: raw.srcValidatorAddress,
         moniker: validators[raw.srcValidatorAddress]?.moniker,
-        identity: raw.srcIdentity,
+        identity: validators[raw.srcValidatorAddress]?.identity,
       },
       dstValidator: {
         validatorAddress: raw.dstValidatorAddress,
         moniker: validators[raw.dstValidatorAddress]?.moniker,
-        identity: raw.dstIdentity,
+        identity: validators[raw.dstValidatorAddress]?.identity,
       },
       completionTime: raw.completionTime,
-      token: coinToTokenWithValue(
-        stakingParams.bondDenom,
-        raw.amount,
-        assetInfos[stakingParams.bondDenom]
-      ),
+      balances: raw.balance
+        .map((coin) =>
+          coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+        )
+        .sort(compareTokenWithValues),
     }));
 
     data.totalCommission = rawCommission?.commission.reduce<
@@ -416,11 +430,9 @@ export const useAccountTotalValue = (walletAddress: HumanAddr) => {
     : defaultValue;
   return {
     totalAccountValue: totalAssetValue
-      .add(totalBonded[stakingParams.bondDenom]?.value ?? defaultValue)
-      .add(totalRewards[stakingParams.bondDenom]?.value ?? defaultValue)
-      .add(
-        totalCommission[stakingParams.bondDenom]?.value ?? defaultValue
-      ) as USD<Big>,
+      .add(totalValueTokenWithValue(totalBonded, defaultValue))
+      .add(totalValueTokenWithValue(totalRewards, defaultValue))
+      .add(totalValueTokenWithValue(totalCommission, defaultValue)) as USD<Big>,
     isLoading: false,
   };
 };
diff --git a/src/lib/pages/account-details/type.ts b/src/lib/pages/account-details/types.ts
similarity index 90%
rename from src/lib/pages/account-details/type.ts
rename to src/lib/pages/account-details/types.ts
index b6256a87f..a986ecf27 100644
--- a/src/lib/pages/account-details/type.ts
+++ b/src/lib/pages/account-details/types.ts
@@ -7,6 +7,13 @@ import type {
   Unbonding,
 } from "./data";
 
+export interface DenomInfo {
+  denom: string;
+  symbol?: string;
+  logo?: string;
+  precision?: number;
+}
+
 export interface NonRedelegatable {
   dstValidator: ValidatorInfo;
   completionTime: Date;
diff --git a/src/lib/query/validator.ts b/src/lib/query/validator.ts
index 32dee8613..8aebc5632 100644
--- a/src/lib/query/validator.ts
+++ b/src/lib/query/validator.ts
@@ -10,7 +10,6 @@ export const getValidators = graphql(`
       details
       identity
       jailed
-      min_self_delegation
       moniker
       operator_address
       website
diff --git a/src/lib/services/delegation.ts b/src/lib/services/delegation.ts
index 9e35ebafa..ac88aac0f 100644
--- a/src/lib/services/delegation.ts
+++ b/src/lib/services/delegation.ts
@@ -1,21 +1,19 @@
 import type { Coin } from "@cosmjs/stargate";
 import axios from "axios";
-import big from "big.js";
 
-import type { Addr, Token, U, ValidatorAddr } from "lib/types";
+import type { Addr, StakingShare, ValidatorAddr } from "lib/types";
 import { parseDate, formatSeconds } from "lib/utils";
 
-import { getValidator } from "./validator";
-
 interface StakingParamsResponse {
   params: {
     unbonding_time: string; // e.g. "1209600s"
     max_validators: number;
     max_entries: number;
     historical_entries: number;
-    bond_denom: string;
+    bond_denoms: string[];
     min_commission_rate: string;
-    min_self_delegation: string;
+    min_self_delegation?: string; // not in initia
+    min_voting_power?: string; // only in initia
   };
 }
 
@@ -24,9 +22,9 @@ interface DelegationResponse {
     delegation: {
       delegator_address: Addr;
       validator_address: ValidatorAddr;
-      shares: string;
+      shares: StakingShare[];
     };
-    balance: Coin;
+    balance: Coin[];
   }[];
 }
 
@@ -38,7 +36,7 @@ interface UnbondingResponse {
       creation_height: string;
       completion_time: string;
       initial_balance: string;
-      balance: U<Token>; // after slashed during unbonding
+      balance: Coin[]; // after slashed during unbonding
     }[];
   }[];
 }
@@ -62,10 +60,10 @@ interface RedelegationsResponse {
       redelegation_entry: {
         creation_height: number;
         completion_time: string;
-        initial_balance: string;
-        share_dst: string;
+        initial_balance: Coin[];
+        share_dst: StakingShare[];
       };
-      balance: U<Token>;
+      balance: Coin[];
     }[];
   }[];
 }
@@ -79,21 +77,18 @@ interface CommissionResponse {
 export interface RawStakingParams {
   unbondingTime: string; // e.g. "14 days"
   maxEntries: number;
-  bondDenom: string;
+  bondDenoms: string[];
 }
 
 export interface RawDelegation {
   validatorAddress: ValidatorAddr;
-  identity: string;
-  denom: string;
-  amount: string;
+  balance: Coin[];
 }
 
 export interface RawUnbonding {
   validatorAddress: ValidatorAddr;
-  identity: string;
   completionTime: Date;
-  amount: string;
+  balance: Coin[];
 }
 
 interface Reward {
@@ -108,11 +103,9 @@ export interface RawDelegationRewards {
 
 export interface RawRedelegation {
   srcValidatorAddress: ValidatorAddr;
-  srcIdentity: string;
   dstValidatorAddress: ValidatorAddr;
-  dstIdentity: string;
   completionTime: Date;
-  amount: string;
+  balance: Coin[];
 }
 
 export interface RawCommission {
@@ -122,13 +115,12 @@ export interface RawCommission {
 export const getStakingParams = async (
   endpoint: string
 ): Promise<RawStakingParams> => {
-  const { data } = await axios.get<StakingParamsResponse>(
-    `${endpoint}/cosmos/staking/v1beta1/params`
-  );
+  const { data } = await axios.get<StakingParamsResponse>(`${endpoint}/params`);
+
   return {
     unbondingTime: formatSeconds(data.params.unbonding_time),
     maxEntries: data.params.max_entries,
-    bondDenom: data.params.bond_denom,
+    bondDenoms: data.params.bond_denoms,
   };
 };
 
@@ -137,27 +129,12 @@ export const getDelegations = async (
   address: Addr
 ): Promise<RawDelegation[]> => {
   const { data } = await axios.get<DelegationResponse>(
-    `${endpoint}/cosmos/staking/v1beta1/delegations/${address}`
-  );
-  return Promise.all(
-    data.delegation_responses.map<Promise<RawDelegation>>(
-      async (delegation) => {
-        const valInfo = await getValidator(
-          endpoint,
-          delegation.delegation.validator_address
-        );
-        return {
-          validatorAddress: delegation.delegation
-            .validator_address as ValidatorAddr,
-          identity: valInfo.identity,
-          denom: delegation.balance.denom,
-          amount: delegation.balance.amount,
-        };
-      }
-    )
-  ).then((delegations) =>
-    delegations.sort((a, b) => big(b.amount).cmp(a.amount))
+    `${endpoint}/delegations/${address}`
   );
+  return data.delegation_responses.map<RawDelegation>((delegation) => ({
+    validatorAddress: delegation.delegation.validator_address as ValidatorAddr,
+    balance: delegation.balance,
+  }));
 };
 
 export const getUnbondings = async (
@@ -165,24 +142,18 @@ export const getUnbondings = async (
   address: Addr
 ): Promise<RawUnbonding[]> => {
   const { data } = await axios.get<UnbondingResponse>(
-    `${endpoint}/cosmos/staking/v1beta1/delegators/${address}/unbonding_delegations`
+    `${endpoint}/unbondings/${address}`
   );
-  return Promise.all(
-    data.unbonding_responses.map<Promise<RawUnbonding[]>>(async (validator) => {
-      const valInfo = await getValidator(endpoint, validator.validator_address);
-
-      return validator.entries.map<RawUnbonding>((entry) => ({
+  return data.unbonding_responses
+    .map<RawUnbonding[]>((validator) =>
+      validator.entries.map<RawUnbonding>((entry) => ({
         validatorAddress: validator.validator_address as ValidatorAddr,
-        identity: valInfo.identity,
         completionTime: parseDate(entry.completion_time),
-        amount: entry.balance,
-      }));
-    })
-  ).then((unbondings) =>
-    unbondings
-      .flat()
-      .sort((a, b) => a.completionTime.getTime() - b.completionTime.getTime())
-  );
+        balance: entry.balance,
+      }))
+    )
+    .flat()
+    .sort((a, b) => a.completionTime.getTime() - b.completionTime.getTime());
 };
 
 export const getDelegationRewards = async (
@@ -206,30 +177,19 @@ export const getRedelegations = async (
   address: Addr
 ): Promise<RawRedelegation[]> => {
   const { data } = await axios.get<RedelegationsResponse>(
-    `${endpoint}/cosmos/staking/v1beta1/delegators/${address}/redelegations`
+    `${endpoint}/redelegations/${address}`
   );
-  return Promise.all(
-    data.redelegation_responses.map<Promise<RawRedelegation[]>>(
-      async (redelegate) => {
-        const [srcValInfo, dstValInfo] = await Promise.all([
-          getValidator(endpoint, redelegate.redelegation.validator_src_address),
-          getValidator(endpoint, redelegate.redelegation.validator_dst_address),
-        ]);
-        return redelegate.entries.map((entry) => ({
-          srcValidatorAddress: redelegate.redelegation.validator_src_address,
-          srcIdentity: srcValInfo.identity,
-          dstValidatorAddress: redelegate.redelegation.validator_dst_address,
-          dstIdentity: dstValInfo.identity,
-          completionTime: parseDate(entry.redelegation_entry.completion_time),
-          amount: entry.balance,
-        }));
-      }
+  return data.redelegation_responses
+    .map<RawRedelegation[]>((redelegate) =>
+      redelegate.entries.map((entry) => ({
+        srcValidatorAddress: redelegate.redelegation.validator_src_address,
+        dstValidatorAddress: redelegate.redelegation.validator_dst_address,
+        completionTime: parseDate(entry.redelegation_entry.completion_time),
+        balance: entry.balance,
+      }))
     )
-  ).then((redelegations) =>
-    redelegations
-      .flat()
-      .sort((a, b) => a.completionTime.getTime() - b.completionTime.getTime())
-  );
+    .flat()
+    .sort((a, b) => a.completionTime.getTime() - b.completionTime.getTime());
 };
 
 export const getCommission = async (
diff --git a/src/lib/services/delegationService.ts b/src/lib/services/delegationService.ts
index 02d37d531..e5caae2c8 100644
--- a/src/lib/services/delegationService.ts
+++ b/src/lib/services/delegationService.ts
@@ -23,7 +23,7 @@ import {
 } from "./delegation";
 
 export const useStakingParams = (): UseQueryResult<RawStakingParams> => {
-  const lcdEndpoint = useBaseApiRoute("rest");
+  const lcdEndpoint = useBaseApiRoute("staking");
 
   const queryFn = useCallback(
     async () => getStakingParams(lcdEndpoint),
@@ -38,7 +38,7 @@ export const useStakingParams = (): UseQueryResult<RawStakingParams> => {
 export const useDelegations = (
   address: Addr
 ): UseQueryResult<RawDelegation[]> => {
-  const lcdEndpoint = useBaseApiRoute("rest");
+  const lcdEndpoint = useBaseApiRoute("staking");
 
   const queryFn = useCallback(
     async () => getDelegations(lcdEndpoint, address),
@@ -57,7 +57,7 @@ export const useDelegations = (
 export const useUnbondings = (
   address: Addr
 ): UseQueryResult<RawUnbonding[]> => {
-  const lcdEndpoint = useBaseApiRoute("rest");
+  const lcdEndpoint = useBaseApiRoute("staking");
 
   const queryFn = useCallback(
     async () => getUnbondings(lcdEndpoint, address),
@@ -95,7 +95,7 @@ export const useDelegationRewards = (
 export const useRedelegations = (
   address: Addr
 ): UseQueryResult<RawRedelegation[]> => {
-  const lcdEndpoint = useBaseApiRoute("rest");
+  const lcdEndpoint = useBaseApiRoute("staking");
 
   const queryFn = useCallback(
     async () => getRedelegations(lcdEndpoint, address),
diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts
index 7ae1a459a..83f761cf8 100644
--- a/src/lib/services/validator.ts
+++ b/src/lib/services/validator.ts
@@ -1,7 +1,13 @@
+import type { Coin } from "@cosmjs/stargate";
 import axios from "axios";
 
 import { CURR_THEME } from "env";
-import type { Validator, ValidatorAddr, ValidatorInfo } from "lib/types";
+import type {
+  StakingShare,
+  Validator,
+  ValidatorAddr,
+  ValidatorInfo,
+} from "lib/types";
 import { removeSpecialChars } from "lib/utils";
 
 interface ValidatorResponse {
@@ -12,8 +18,8 @@ interface ValidatorResponse {
   };
   jailed: boolean;
   status: string;
-  token: string;
-  delegator_shares: string;
+  tokens: Coin[];
+  delegator_shares: StakingShare[];
   description: {
     moniker: string;
     identity: string;
@@ -39,7 +45,7 @@ export const getValidator = async (
   validatorAddr: ValidatorAddr
 ): Promise<Validator> => {
   const { data } = await axios.get<{ validator: ValidatorResponse }>(
-    `${endpoint}/cosmos/staking/v1beta1/validators/${validatorAddr}`
+    `${endpoint}/validators/${validatorAddr}`
   );
   return {
     validatorAddress: data.validator.operator_address,
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index 9ceebc90a..2ce2ade80 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -8,8 +8,8 @@ import { useCallback } from "react";
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
-  useCurrentChain,
   useCelatoneApp,
+  useCurrentChain,
 } from "lib/app-provider";
 import { getValidators } from "lib/query/validator";
 import type {
@@ -25,7 +25,7 @@ export const useValidator = (
   validatorAddr: ValidatorAddr,
   enabled = true
 ): UseQueryResult<Validator> => {
-  const lcdEndpoint = useBaseApiRoute("rest");
+  const lcdEndpoint = useBaseApiRoute("staking");
   const queryFn = async ({ queryKey }: QueryFunctionContext<string[]>) =>
     getValidator(queryKey[1], queryKey[2] as ValidatorAddr);
 
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 81dad4780..a7d4b3be9 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -15,6 +15,7 @@ export * from "./projects";
 export * from "./proposal";
 export * from "./rpc";
 export * from "./tx";
+export * from "./staking";
 export * from "./upload";
 export * from "./validator";
 export * from "./wallet";
diff --git a/src/lib/types/staking.ts b/src/lib/types/staking.ts
new file mode 100644
index 000000000..b52a061c8
--- /dev/null
+++ b/src/lib/types/staking.ts
@@ -0,0 +1,5 @@
+export interface StakingShare {
+  // string of a decimal
+  amount: string;
+  denom: string;
+}
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 89566281b..3b684d9c7 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -1,5 +1,5 @@
-import type { BigSource, Big } from "big.js";
-import big from "big.js";
+import type { BigSource } from "big.js";
+import big, { Big } from "big.js";
 
 import type {
   AssetInfo,
@@ -81,3 +81,23 @@ export const addTokenWithValue = (
         value: big(0) as USD<Big>,
       };
 };
+
+export const totalValueTokenWithValue = (
+  tokens: Record<string, TokenWithValue>,
+  defaultValue: USD<Big>
+) =>
+  Object.values(tokens).reduce(
+    (acc, token) => acc.add(token.value ?? defaultValue),
+    Big(0)
+  ) as USD<Big>;
+
+export const compareTokenWithValues = (
+  token1: TokenWithValue,
+  token2: TokenWithValue
+) => {
+  if (token1.symbol && token2.symbol)
+    return token1.symbol.localeCompare(token2.symbol);
+  if (token1.symbol && !token2.symbol) return -1;
+  if (!token1.symbol && token2.symbol) return 1;
+  return token1.denom.localeCompare(token2.denom);
+};

From 0c3469ce93eddf49f24890a2511f08028f18d693 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 12 Oct 2023 21:45:21 +0700
Subject: [PATCH 177/368] fix: card

---
 .../components/delegations/total-card/MultiBondsCard.tsx   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
index a1c960de4..d21f84044 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
@@ -29,8 +29,11 @@ export const MultiBondsCard = ({
   const numTokens = tokens ? Object.entries(tokens).length : 0;
   return (
     <Flex
-      aria-disabled={!isDisabled}
+      aria-disabled={isDisabled}
       minW="233px"
+      p={4}
+      align="center"
+      justify="space-between"
       bgColor="gray.900"
       borderRadius="8px"
       cursor="pointer"
@@ -69,7 +72,7 @@ export const MultiBondsCard = ({
           </>
         )}
       </Flex>
-      <CustomIcon name="chevron-right" boxSize={5} color="secondary.main" />
+      <CustomIcon name="chevron-right" boxSize={4} color="secondary.main" />
     </Flex>
   );
 };

From fbab55d97ef117df285506ad34de27f3ccb77ae9 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 12 Oct 2023 21:57:52 +0700
Subject: [PATCH 178/368] fix: add attached funds to code snippet

---
 CHANGELOG.md                                  |  1 +
 .../pages/execute/components/JsonExecute.tsx  | 34 +++++++-----------
 .../components/schema-execute/ExecuteBox.tsx  | 36 +++++++------------
 3 files changed, 26 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ea249331..6b32b6581 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -117,6 +117,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#567](https://github.com/alleslabs/celatone-frontend/pull/567) Fix attached funds in code snippet
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
 - [#526](https://github.com/alleslabs/celatone-frontend/pull/526) Fix missing Tx proposal type
diff --git a/src/lib/pages/execute/components/JsonExecute.tsx b/src/lib/pages/execute/components/JsonExecute.tsx
index febcb971a..b565d1060 100644
--- a/src/lib/pages/execute/components/JsonExecute.tsx
+++ b/src/lib/pages/execute/components/JsonExecute.tsx
@@ -97,8 +97,6 @@ export const JsonExecute = ({
   const isValidAssetsJsonStr =
     !errors.assetsJsonStr && jsonValidate(assetsJsonStr) === null;
 
-  const assetsSelectString = JSON.stringify(assetsSelect);
-
   const enableExecute = useMemo(() => {
     const generalCheck = !!(
       msg.trim().length &&
@@ -123,6 +121,14 @@ export const JsonExecute = ({
     isValidAssetsJsonStr,
   ]);
 
+  const assetsSelectString = JSON.stringify(assetsSelect);
+
+  const funds = useMemo(
+    () => getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [assetsJsonStr, assetsSelectString, attachFundsOption, getAttachFunds]
+  );
+
   // ------------------------------------------//
   // -----------------REACT QUERY--------------//
   // ------------------------------------------//
@@ -148,11 +154,6 @@ export const JsonExecute = ({
   // ------------------------------------------//
 
   const proceed = useCallback(async () => {
-    const funds = getAttachFunds(
-      attachFundsOption,
-      assetsJsonStr,
-      assetsSelect
-    );
     trackActionWithFunds(
       AmpEvent.ACTION_EXECUTE,
       funds.length,
@@ -180,10 +181,8 @@ export const JsonExecute = ({
     fee,
     contractAddress,
     msg,
-    getAttachFunds,
+    funds,
     trackActionWithFunds,
-    assetsJsonStr,
-    assetsSelect,
     addActivity,
     broadcast,
   ]);
@@ -216,7 +215,7 @@ export const JsonExecute = ({
         sender: address as HumanAddr,
         contract: contractAddress as ContractAddr,
         msg: Buffer.from(msg),
-        funds: getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
+        funds,
       });
 
       const timeoutId = setTimeout(() => {
@@ -225,17 +224,7 @@ export const JsonExecute = ({
       return () => clearTimeout(timeoutId);
     }
     return () => {};
-  }, [
-    address,
-    contractAddress,
-    enableExecute,
-    msg,
-    assetsJsonStr,
-    assetsSelectString,
-    getAttachFunds,
-    attachFundsOption,
-    assetsSelect,
-  ]);
+  }, [address, contractAddress, enableExecute, funds, msg]);
 
   useEffect(() => {
     const keydownHandler = (e: KeyboardEvent) => {
@@ -282,6 +271,7 @@ export const JsonExecute = ({
             type="execute"
             contractAddress={contractAddress}
             message={msg}
+            funds={funds}
           />
         </Flex>
         <Flex direction="row" align="center" gap={2}>
diff --git a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
index ecb13ec62..60dc6ad50 100644
--- a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
+++ b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
@@ -121,8 +121,6 @@ export const ExecuteBox = ({
   const isValidAssetsJsonStr =
     !attachFundErrors.assetsJsonStr && jsonValidate(assetsJsonStr) === null;
 
-  const assetsSelectString = JSON.stringify(assetsSelect);
-
   const enableExecute = useMemo(() => {
     const generalCheck = Boolean(
       msg.trim().length &&
@@ -151,6 +149,14 @@ export const ExecuteBox = ({
     isValidAssetsJsonStr,
   ]);
 
+  const assetsSelectString = JSON.stringify(assetsSelect);
+
+  const funds = useMemo(
+    () => getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [assetsJsonStr, assetsSelectString, attachFundsOption, getAttachFunds]
+  );
+
   // ------------------------------------------//
   // -----------------REACT QUERY--------------//
   // ------------------------------------------//
@@ -184,11 +190,6 @@ export const ExecuteBox = ({
   );
 
   const proceed = useCallback(async () => {
-    const funds = getAttachFunds(
-      attachFundsOption,
-      assetsJsonStr,
-      assetsSelect
-    );
     trackActionWithFunds(
       AmpEvent.ACTION_EXECUTE,
       funds.length,
@@ -211,15 +212,13 @@ export const ExecuteBox = ({
       broadcast(stream);
     }
   }, [
-    attachFundsOption,
     executeTx,
     fee,
     contractAddress,
     msg,
-    getAttachFunds,
     trackActionWithFunds,
-    assetsJsonStr,
-    assetsSelect,
+    funds,
+    attachFundsOption,
     addActivity,
     broadcast,
   ]);
@@ -259,7 +258,7 @@ export const ExecuteBox = ({
         sender: address as HumanAddr,
         contract: contractAddress as ContractAddr,
         msg: Buffer.from(msg),
-        funds: getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
+        funds,
       });
 
       const timeoutId = setTimeout(() => {
@@ -273,17 +272,7 @@ export const ExecuteBox = ({
     setFee(undefined);
 
     return () => {};
-  }, [
-    address,
-    contractAddress,
-    enableExecute,
-    msg,
-    assetsJsonStr,
-    assetsSelectString,
-    getAttachFunds,
-    attachFundsOption,
-    assetsSelect,
-  ]);
+  }, [address, contractAddress, enableExecute, msg, funds]);
 
   return (
     <AccordionItem className={`execute_msg_${msgSchema.schema.required?.[0]}`}>
@@ -344,6 +333,7 @@ export const ExecuteBox = ({
                 type="execute"
                 contractAddress={contractAddress}
                 message={msg}
+                funds={funds}
               />
             </Flex>
           </GridItem>

From 1442d2c0529506abb263a93abf1bbe15019233d1 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 11 Oct 2023 17:59:40 +0700
Subject: [PATCH 179/368] fix(components): fix pool type alignment in pool card

---
 CHANGELOG.md                                  |  1 +
 src/lib/pages/pools/components/PoolHeader.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ea249331..c5473e017 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -117,6 +117,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
 - [#526](https://github.com/alleslabs/celatone-frontend/pull/526) Fix missing Tx proposal type
diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 485536587..96c14cb9f 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react";
+import { Flex, Heading, Text, Image } from "@chakra-ui/react";
 
 import {
   BALANCER_ICON,
@@ -57,7 +57,7 @@ export const PoolHeader = ({
     <Flex justifyContent="space-between" w="full">
       <Flex alignItems="center" gap={4}>
         <PoolLogo tokens={poolLiquidity} />
-        <Box>
+        <Flex direction="column">
           <Flex gap={1} flexWrap="wrap">
             <Heading as="h6" fontWeight="600" variant="h6">
               {getTokenLabel(poolLiquidity[0].denom, poolLiquidity[0].symbol)}
@@ -99,20 +99,20 @@ export const PoolHeader = ({
               </Flex>
             )}
           </Flex>
-          <Flex alignItems="center" gap={2} mt={1}>
+          <Flex alignItems="center" columnGap={2} flexWrap="wrap" mt={1}>
             <Text variant="body2" color="secondary.main">
               #{poolId}
             </Text>
             {poolType && (
-              <Flex alignItems="center" gap={2}>
+              <Flex alignItems="center" gap={1}>
                 <Flex
                   backgroundColor="gray.600"
                   borderRadius="full"
                   w="6px"
                   h="6px"
                 />
-                <Flex alignItems="center" gap={1}>
-                  <Image boxSize={4} src={poolValue.icon} />
+                <Flex alignItems="center">
+                  <Image boxSize={4} src={poolValue.icon} mr={1} />
                   <Text variant="body2" color="text.dark">
                     {poolValue.text}
                   </Text>
@@ -136,7 +136,7 @@ export const PoolHeader = ({
               </Flex>
             )}
           </Flex>
-        </Box>
+        </Flex>
       </Flex>
     </Flex>
   );

From a899bc53d8972728a068f67779a9809c0f43ae99 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 12 Oct 2023 16:39:30 +0700
Subject: [PATCH 180/368] fix(components): fix as comment

---
 src/lib/pages/pools/components/PoolHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 96c14cb9f..0c29cd17f 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -57,7 +57,7 @@ export const PoolHeader = ({
     <Flex justifyContent="space-between" w="full">
       <Flex alignItems="center" gap={4}>
         <PoolLogo tokens={poolLiquidity} />
-        <Flex direction="column">
+        <div>
           <Flex gap={1} flexWrap="wrap">
             <Heading as="h6" fontWeight="600" variant="h6">
               {getTokenLabel(poolLiquidity[0].denom, poolLiquidity[0].symbol)}
@@ -136,7 +136,7 @@ export const PoolHeader = ({
               </Flex>
             )}
           </Flex>
-        </Flex>
+        </div>
       </Flex>
     </Flex>
   );

From c1beca897d2dd1174f8e1157c4d12bc13290c1e0 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 12 Oct 2023 22:35:47 +0700
Subject: [PATCH 181/368] docs: edit changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c5473e017..4177351e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -47,6 +47,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
+
 ## v1.2.0
 
 ### Features
@@ -117,7 +119,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
 - [#526](https://github.com/alleslabs/celatone-frontend/pull/526) Fix missing Tx proposal type

From 34dc17e72c9456a56d7b0d715cedf11422952067 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 13 Oct 2023 01:55:40 +0700
Subject: [PATCH 182/368] fix(components): add move config to dev shortcuts

---
 CHANGELOG.md                                  |  1 +
 src/lib/pages/home/components/DevShortcut.tsx | 76 +++++++++++++------
 2 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eee359c9f..6d9dfd19f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -77,6 +77,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#569](https://github.com/alleslabs/celatone-frontend/pull/569) Add move config to dev shortcuts in homepage
 - [#559](https://github.com/alleslabs/celatone-frontend/pull/559) Restructure and refactor responsive tables
 - [#549](https://github.com/alleslabs/celatone-frontend/pull/549) Add move tx filer options
 - [#553](https://github.com/alleslabs/celatone-frontend/pull/553) Use Cmd on Mac OS while Ctrl on others
diff --git a/src/lib/pages/home/components/DevShortcut.tsx b/src/lib/pages/home/components/DevShortcut.tsx
index 9af690c72..8549a1d90 100644
--- a/src/lib/pages/home/components/DevShortcut.tsx
+++ b/src/lib/pages/home/components/DevShortcut.tsx
@@ -1,7 +1,8 @@
 import type { SystemStyleObject } from "@chakra-ui/react";
 import { Flex, Box, Text, SimpleGrid } from "@chakra-ui/react";
+import { useMemo } from "react";
 
-import { useMobile } from "lib/app-provider";
+import { useMobile, useMoveConfig, useWasmConfig } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
 import type { IconKeys } from "lib/components/icon";
@@ -25,29 +26,60 @@ interface ShortcutMetadata {
   icon: IconKeys;
 }
 
-const shortcutList: ShortcutMetadata[] = [
-  {
-    title: "Deploy",
-    subtitle: "Upload code or instantiate contract",
-    slug: "deploy",
-    icon: "add-new",
-  },
-  {
-    title: "Query",
-    subtitle: "Query and get contract state data",
-    slug: "query",
-    icon: "query",
-  },
-  {
-    title: "Execute",
-    subtitle: "Send transactions to contracts",
-    slug: "execute",
-    icon: "execute",
-  },
-];
-
 export const DevShortcut = () => {
   const isMobile = useMobile();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+  const move = useMoveConfig({ shouldRedirect: false });
+  const shortcutList: ShortcutMetadata[] = useMemo(
+    () => [
+      ...(wasm.enabled
+        ? [
+            {
+              title: "Deploy",
+              subtitle: "Upload code or instantiate contract",
+              slug: "deploy",
+              icon: "add-new" as IconKeys,
+            },
+            {
+              title: "Query",
+              subtitle: "Query and get contract state data",
+              slug: "query",
+              icon: "query" as IconKeys,
+            },
+            {
+              title: "Execute",
+              subtitle: "Send transactions to contracts",
+              slug: "execute",
+              icon: "execute" as IconKeys,
+            },
+          ]
+        : []),
+      ...(move.enabled
+        ? [
+            {
+              title: "Publish Module",
+              subtitle: "Upload .mv files to publish new module",
+              slug: "publish-module",
+              icon: "add-new" as IconKeys,
+            },
+            {
+              title: "View / Execute",
+              subtitle: "Interact with modules and functions",
+              slug: "interact",
+              icon: "execute" as IconKeys,
+            },
+            {
+              title: "Deploy Script",
+              subtitle: "Deploy one-time use Script",
+              slug: "deploy-script",
+              icon: "code" as IconKeys,
+            },
+          ]
+        : []),
+    ],
+    [wasm.enabled, move.enabled]
+  );
+
   return (
     <SimpleGrid columns={{ sm: 1, md: 3 }} spacing={4} w="full">
       {shortcutList.map((item) => (

From f65468de34f7c04b6de97954a10557a362d4b671 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 13 Oct 2023 02:08:21 +0700
Subject: [PATCH 183/368] fix(components): doc: add to do

---
 src/lib/components/resource/ResourceDetailCard.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 0479db05a..8e55253c0 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -19,6 +19,7 @@ interface ResourceDetailCardProps {
 export const ResourceDetailCard = ({
   resourceData,
 }: ResourceDetailCardProps) => {
+  // TODO Revisit later
   if (resourceData.moveResource === '""')
     return (
       <Flex bg="gray.900" p={4} borderRadius={8} alignItems="center">

From 4624d5e54a233c8901cb8c7bf0ab2f53db5286f1 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Sun, 15 Oct 2023 21:13:55 +0700
Subject: [PATCH 184/368] fix: use as const

---
 src/lib/pages/home/components/DevShortcut.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/pages/home/components/DevShortcut.tsx b/src/lib/pages/home/components/DevShortcut.tsx
index 8549a1d90..4669bdcb6 100644
--- a/src/lib/pages/home/components/DevShortcut.tsx
+++ b/src/lib/pages/home/components/DevShortcut.tsx
@@ -30,7 +30,7 @@ export const DevShortcut = () => {
   const isMobile = useMobile();
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
-  const shortcutList: ShortcutMetadata[] = useMemo(
+  const shortcutList = useMemo<ShortcutMetadata[]>(
     () => [
       ...(wasm.enabled
         ? [
@@ -38,19 +38,19 @@ export const DevShortcut = () => {
               title: "Deploy",
               subtitle: "Upload code or instantiate contract",
               slug: "deploy",
-              icon: "add-new" as IconKeys,
+              icon: "add-new" as const,
             },
             {
               title: "Query",
               subtitle: "Query and get contract state data",
               slug: "query",
-              icon: "query" as IconKeys,
+              icon: "query" as const,
             },
             {
               title: "Execute",
               subtitle: "Send transactions to contracts",
               slug: "execute",
-              icon: "execute" as IconKeys,
+              icon: "execute" as const,
             },
           ]
         : []),
@@ -60,19 +60,19 @@ export const DevShortcut = () => {
               title: "Publish Module",
               subtitle: "Upload .mv files to publish new module",
               slug: "publish-module",
-              icon: "add-new" as IconKeys,
+              icon: "add-new" as const,
             },
             {
               title: "View / Execute",
               subtitle: "Interact with modules and functions",
               slug: "interact",
-              icon: "execute" as IconKeys,
+              icon: "execute" as const,
             },
             {
               title: "Deploy Script",
               subtitle: "Deploy one-time use Script",
               slug: "deploy-script",
-              icon: "code" as IconKeys,
+              icon: "code" as const,
             },
           ]
         : []),

From 5ba57b4df914cdaf268d96e8b665ccb2b5c9f02b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 16 Oct 2023 10:12:54 +0700
Subject: [PATCH 185/368] chore: improve resource detail card

---
 src/lib/components/resource/ResourceDetailCard.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 8e55253c0..656f730ed 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -19,8 +19,11 @@ interface ResourceDetailCardProps {
 export const ResourceDetailCard = ({
   resourceData,
 }: ResourceDetailCardProps) => {
-  // TODO Revisit later
-  if (resourceData.moveResource === '""')
+  const parsedMoveResource = parseJsonStr(resourceData.moveResource);
+
+  // Handle fallback case where the move resource is invalid
+  // TODO: revisit later
+  if (parsedMoveResource === "")
     return (
       <Flex bg="gray.900" p={4} borderRadius={8} alignItems="center">
         <CustomIcon
@@ -36,7 +39,7 @@ export const ResourceDetailCard = ({
       </Flex>
     );
 
-  const moveResourceObject = parseJsonStr(resourceData.moveResource) as {
+  const moveResourceObject = parsedMoveResource as {
     type: string;
     data: Record<string, unknown>;
   };

From de1d63751a188a333eda09e8d16b8e7b50d61443 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 16 Oct 2023 10:42:56 +0700
Subject: [PATCH 186/368] fix(components): fix typo

---
 src/lib/components/resource/ResourceDetailCard.tsx | 7 ++++++-
 src/lib/pages/home/components/DevShortcut.tsx      | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 656f730ed..c728c64f8 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -80,7 +80,12 @@ export const ResourceDetailCard = ({
           </Flex>
         </Flex>
       </AccordionButton>
-      <AccordionPanel p={4} borderTop="1px solid" borderColor="gray.700">
+      <AccordionPanel
+        p={4}
+        borderTop="1px solid"
+        borderColor="gray.700"
+        borderTopRadius={0}
+      >
         <Flex direction="column" gap={3}>
           {formattedArray.map((item) => (
             <Flex key={item.key} gap={4}>
diff --git a/src/lib/pages/home/components/DevShortcut.tsx b/src/lib/pages/home/components/DevShortcut.tsx
index 4669bdcb6..81df8b285 100644
--- a/src/lib/pages/home/components/DevShortcut.tsx
+++ b/src/lib/pages/home/components/DevShortcut.tsx
@@ -64,7 +64,7 @@ export const DevShortcut = () => {
             },
             {
               title: "View / Execute",
-              subtitle: "Interact with modules and functions",
+              subtitle: "Interact with module's functions",
               slug: "interact",
               icon: "execute" as const,
             },

From 321545c67bb28e1132f7fb6391ec1fe7c2728e61 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 16 Oct 2023 10:49:58 +0700
Subject: [PATCH 187/368] fix(components): change module serivce dir

---
 src/lib/components/module/FunctionDetailCard.tsx           | 2 +-
 src/lib/pages/module-details/components/ModuleFunction.tsx | 2 +-
 src/lib/pages/module-details/components/ModuleInfo.tsx     | 4 ++--
 src/lib/pages/module-details/components/ModuleStruct.tsx   | 2 +-
 src/lib/pages/module-details/components/ModuleTop.tsx      | 4 ++--
 src/lib/pages/module-details/index.tsx                     | 7 +++++--
 6 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index 49a1853ce..8ac72ec23 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -14,7 +14,7 @@ import { CustomIcon } from "../icon";
 import { LabelText } from "../LabelText";
 import { Tooltip } from "../Tooltip";
 import { useInternalNavigate } from "lib/app-provider";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 import type { ExposedFunction } from "lib/types";
 import { checkAvailability, getVisibilityIcon } from "lib/utils";
 
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index d8920e490..c9aa2ec28 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -6,7 +6,7 @@ import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { FunctionDetailCard } from "lib/components/module/FunctionDetailCard";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 import type { ExposedFunction } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 5b12b140d..880df7a8f 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -4,8 +4,8 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { ModuleSourceCode } from "lib/components/module";
-import type { ModuleVerificationInternal } from "lib/services/module";
-import { type IndexedModule } from "lib/services/moduleService";
+import type { ModuleVerificationInternal } from "lib/services/move/module";
+import { type IndexedModule } from "lib/services/move/moduleService";
 
 interface ModuleInfoProps {
   address: IndexedModule["address"];
diff --git a/src/lib/pages/module-details/components/ModuleStruct.tsx b/src/lib/pages/module-details/components/ModuleStruct.tsx
index 20562f4bc..585f401ee 100644
--- a/src/lib/pages/module-details/components/ModuleStruct.tsx
+++ b/src/lib/pages/module-details/components/ModuleStruct.tsx
@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { StructCard } from "lib/components/module/StructCard";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
 
 interface ModuleStructProps {
   structs: IndexedModule["parsedAbi"]["structs"];
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 9d95ca3b2..1baf643d1 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -8,8 +8,8 @@ import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { Tooltip } from "lib/components/Tooltip";
-import type { ModuleVerificationInternal } from "lib/services/module";
-import type { IndexedModule } from "lib/services/moduleService";
+import type { ModuleVerificationInternal } from "lib/services/move/module";
+import type { IndexedModule } from "lib/services/move/moduleService";
 
 interface ModuleTopProps {
   moduleData: IndexedModule;
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 53e7b2d64..25df3b349 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -26,8 +26,11 @@ import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
 import { useContractDetailsTableCounts } from "lib/model/contract";
 import { useAccountId } from "lib/services/accountService";
-import type { IndexedModule } from "lib/services/moduleService";
-import { useAccountModules, useVerifyModule } from "lib/services/moduleService";
+import type { IndexedModule } from "lib/services/move/moduleService";
+import {
+  useAccountModules,
+  useVerifyModule,
+} from "lib/services/move/moduleService";
 import type { ContractAddr, HexAddr, MoveAccountAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 

From 4c99cdab77dc61ce167b31cff9f9b7c58584b26a Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 16 Oct 2023 10:55:28 +0700
Subject: [PATCH 188/368] fix(components): add 0x1 link

---
 src/lib/layout/navbar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index a59649b38..a1f6ae584 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -85,7 +85,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
                 // TODO change path to /account/0x1
                 {
                   name: "0x1 Page",
-                  slug: "/deploy",
+                  slug: "/account/0x1",
                   icon: "home" as IconKeys,
                 },
                 {

From a8f1b2771683e94eb8371d7f131955934bc1735c Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 16 Oct 2023 15:24:13 +0700
Subject: [PATCH 189/368] fix: use native tokens in select funds

---
 CHANGELOG.md                                  |  1 +
 src/lib/app-provider/hooks/useBaseApiRoute.ts |  3 ---
 src/lib/components/fund/selectFund.tsx        |  2 +-
 src/lib/services/assetService.ts              | 24 +++++++++----------
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e07e4530..0a09badc3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -120,6 +120,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#570](https://github.com/alleslabs/celatone-frontend/pull/570) Use native tokens in attached funds
 - [#567](https://github.com/alleslabs/celatone-frontend/pull/567) Fix attached funds in code snippet
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index b9cf4862e..d0f1454e1 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -13,7 +13,6 @@ export const useBaseApiRoute = (
     | "rest"
     | "icns_names"
     | "icns_address"
-    | "native_tokens"
     | "cosmwasm"
 ): string => {
   const {
@@ -49,8 +48,6 @@ export const useBaseApiRoute = (
       return `${api}/icns/names`;
     case "icns_address":
       return `${api}/icns/address`;
-    case "native_tokens":
-      return `${api}/native-assets/${chain}/${currentChainId}`;
     case "cosmwasm":
       return `${api}/cosmwasm/${chain}/${currentChainId}`;
     default:
diff --git a/src/lib/components/fund/selectFund.tsx b/src/lib/components/fund/selectFund.tsx
index 71297fb45..aea438691 100644
--- a/src/lib/components/fund/selectFund.tsx
+++ b/src/lib/components/fund/selectFund.tsx
@@ -26,7 +26,7 @@ export const SelectFund = ({
   assetsSelect,
   labelBgColor,
 }: SelectFundProps) => {
-  const { data: assetInfos = [] } = useAssetInfoList();
+  const { data: assetInfos = [] } = useAssetInfoList({ assetType: "native" });
   const { fields, append, remove } = useFieldArray({
     control,
     name: ASSETS_SELECT,
diff --git a/src/lib/services/assetService.ts b/src/lib/services/assetService.ts
index 7e031a115..60e9f7994 100644
--- a/src/lib/services/assetService.ts
+++ b/src/lib/services/assetService.ts
@@ -34,23 +34,21 @@ export const useAssetInfos = ({
   };
 };
 
-export const useAssetInfoList = () => {
-  const assetsApiRoute = useBaseApiRoute("assets");
-  return useQuery(
-    [CELATONE_QUERY_KEYS.ASSET_INFO_LIST, assetsApiRoute],
-    async () => getAssetInfosWithoutPricesPath(assetsApiRoute),
-    { enabled: Boolean(assetsApiRoute), retry: 1, refetchOnWindowFocus: false }
+export const useAssetInfoList = ({
+  assetType,
+}: {
+  assetType: "all" | "native" | "cw20";
+}) => {
+  const assetsApiRoute = useBaseApiRoute("assets").concat(
+    assetType !== "all" ? `/type/${assetType}` : ""
   );
-};
-
-export const useNativeTokensInfo = () => {
-  const nativeTokensApiRoute = useBaseApiRoute("native_tokens");
 
   return useQuery(
-    [CELATONE_QUERY_KEYS.NATIVE_TOKENS_INFO, nativeTokensApiRoute],
-    async () => getAssetInfosWithoutPricesPath(nativeTokensApiRoute),
+    [CELATONE_QUERY_KEYS.ASSET_INFO_LIST, assetsApiRoute],
+    async () => getAssetInfosWithoutPricesPath(assetsApiRoute),
     {
-      enabled: Boolean(nativeTokensApiRoute),
+      enabled: Boolean(assetsApiRoute),
+      retry: 1,
       refetchOnWindowFocus: false,
     }
   );

From e602d86017053539b824ca00e7381fe7833cca48 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 16 Oct 2023 15:24:54 +0700
Subject: [PATCH 190/368] docs: edit changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a09badc3..01cb96ff5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -47,6 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#570](https://github.com/alleslabs/celatone-frontend/pull/570) Use native tokens in attached funds
 - [#563](https://github.com/alleslabs/celatone-frontend/pull/563) Order by contract latest history timestamp in account contract instances
 - [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
 
@@ -120,7 +121,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#570](https://github.com/alleslabs/celatone-frontend/pull/570) Use native tokens in attached funds
 - [#567](https://github.com/alleslabs/celatone-frontend/pull/567) Fix attached funds in code snippet
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link

From 7c3b0e5e61e8760370ce8d64e6253c133c054d81 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 16 Oct 2023 15:29:23 +0700
Subject: [PATCH 191/368] chore: remove from env

---
 src/lib/app-provider/env.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 96a712baf..6121dc26f 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -19,7 +19,6 @@ export enum CELATONE_QUERY_KEYS {
   // ASSET
   ASSET_INFOS = "CELATONE_QUERY_ASSET_INFOS",
   ASSET_INFO_LIST = "CELATONE_QUERY_ASSET_INFO_LIST",
-  NATIVE_TOKENS_INFO = "CELATONE_QUERY_NATIVE_TOKENS_INFO",
   // BLOCK
   BLOCKS = "CELATONE_QUERY_BLOCKS",
   BLOCK_COUNT = "CELATONE_QUERY_BLOCK_COUNT",

From bafbb36d72eb988b6f6cb4ae16d685aaadb15d68 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 16 Oct 2023 15:31:53 +0700
Subject: [PATCH 192/368] docs: move to v1.2.0

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01cb96ff5..0a09badc3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -47,7 +47,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#570](https://github.com/alleslabs/celatone-frontend/pull/570) Use native tokens in attached funds
 - [#563](https://github.com/alleslabs/celatone-frontend/pull/563) Order by contract latest history timestamp in account contract instances
 - [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
 
@@ -121,6 +120,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#570](https://github.com/alleslabs/celatone-frontend/pull/570) Use native tokens in attached funds
 - [#567](https://github.com/alleslabs/celatone-frontend/pull/567) Fix attached funds in code snippet
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link

From 96fe848d28fbc92d9daf7a0cfd2a74732884137c Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 16 Oct 2023 15:51:08 +0700
Subject: [PATCH 193/368] feat: wireup module publish details

---
 CHANGELOG.md                                  |   1 +
 src/lib/app-provider/env.ts                   |   1 +
 src/lib/components/Loading.tsx                |   6 +-
 src/lib/gql/gql.ts                            |   5 +
 src/lib/gql/graphql.ts                        | 252 ++++++++++++++++++
 .../module-details/components/ModuleInfo.tsx  | 198 ++++++++++----
 src/lib/pages/module-details/index.tsx        |  11 +-
 src/lib/query/module.ts                       |  37 +++
 src/lib/services/moduleService.ts             |  47 ++++
 9 files changed, 498 insertions(+), 60 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 87b6a2fa2..827c7d7c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#572](https://github.com/alleslabs/celatone-frontend/pull/572) Wireup module publish details
 - [#558](https://github.com/alleslabs/celatone-frontend/pull/558) Wireup module transaction history table
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Wireup publish module tx
 - [#544](https://github.com/alleslabs/celatone-frontend/pull/544) Show module source code if available
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 671ad1958..ed0769007 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -102,4 +102,5 @@ export enum CELATONE_QUERY_KEYS {
   MODULE_TXS_COUNT = "CELATONE_QUERY_MODULE_TXS_COUNT",
   MODULE_HISTORIES = "CELATONE_QUERY_MODULE_HISTORIES",
   MODULE_HISTORIES_COUNT = "CELATONE_QUERY_MODULE_HISTORIES_COUNT",
+  MODULE_DETAILS = "CELATONE_QUERY_MODULE_DETAILS",
 }
diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
index b86708504..7599cb79c 100644
--- a/src/lib/components/Loading.tsx
+++ b/src/lib/components/Loading.tsx
@@ -1,10 +1,11 @@
+import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Spinner, Text } from "@chakra-ui/react";
 
-interface LoadingProps {
+interface LoadingProps extends FlexProps {
   withBorder?: boolean;
 }
 
-export const Loading = ({ withBorder = false }: LoadingProps) => (
+export const Loading = ({ withBorder = false, ...flexProps }: LoadingProps) => (
   <Flex
     borderY={withBorder ? "1px solid" : undefined}
     borderColor="gray.700"
@@ -13,6 +14,7 @@ export const Loading = ({ withBorder = false }: LoadingProps) => (
     my={12}
     flexDirection="column"
     alignItems="center"
+    {...flexProps}
   >
     <Spinner size="xl" />
     <Text mt={5}>Loading ...</Text>
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 3cd02f457..6adde8ab4 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -61,6 +61,8 @@ const documents = {
     types.GetModuleHistoriesQueryDocument,
   "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetModuleHistoriesCountQueryDocument,
+  '\n  query getModuleDetailsQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "/initia.move.v1.MsgGovPublish"\n                "/initia.move.v1.MsgGovExecute"\n                "/initia.move.v1.MsgGovScript"\n              ]\n            }\n          }\n        }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n':
+    types.GetModuleDetailsQueryDocument,
   "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n":
     types.GetPoolListDocument,
   "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
@@ -198,6 +200,9 @@ export function graphql(
 export function graphql(
   source: "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query getModuleDetailsQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "/initia.move.v1.MsgGovPublish"\n                "/initia.move.v1.MsgGovExecute"\n                "/initia.move.v1.MsgGovScript"\n              ]\n            }\n          }\n        }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
+): typeof documents['\n  query getModuleDetailsQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "/initia.move.v1.MsgGovPublish"\n                "/initia.move.v1.MsgGovExecute"\n                "/initia.move.v1.MsgGovScript"\n              ]\n            }\n          }\n        }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
 export function graphql(
   source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
 ): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 5332df810..3e8f42262 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -15356,6 +15356,27 @@ export type GetModuleHistoriesCountQueryQuery = {
   };
 };
 
+export type GetModuleDetailsQueryQueryVariables = Exact<{
+  moduleId: Scalars["Int"];
+}>;
+
+export type GetModuleDetailsQueryQuery = {
+  __typename?: "query_root";
+  modules: Array<{
+    __typename?: "modules";
+    publisher_vm_address: { __typename?: "vm_addresses"; vm_address: string };
+    publish_transaction?: { __typename?: "transactions"; hash: any } | null;
+    module_proposals: Array<{
+      __typename?: "module_proposals";
+      proposal: { __typename?: "proposals"; id: number; title: string };
+    }>;
+    module_histories: Array<{
+      __typename?: "module_histories";
+      block: { __typename?: "blocks"; height: number; timestamp: any };
+    }>;
+  }>;
+};
+
 export type GetPoolListQueryVariables = Exact<{
   expression?: InputMaybe<Pools_Bool_Exp>;
   order?: InputMaybe<Order_By>;
@@ -19651,6 +19672,237 @@ export const GetModuleHistoriesCountQueryDocument = {
   GetModuleHistoriesCountQueryQuery,
   GetModuleHistoriesCountQueryQueryVariables
 >;
+export const GetModuleDetailsQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getModuleDetailsQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "moduleId" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "modules" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "id" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "_eq" },
+                            value: {
+                              kind: "Variable",
+                              name: { kind: "Name", value: "moduleId" },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  alias: { kind: "Name", value: "publisher_vm_address" },
+                  name: { kind: "Name", value: "vm_address" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "vm_address" },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  alias: { kind: "Name", value: "publish_transaction" },
+                  name: { kind: "Name", value: "transaction" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "hash" } },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "module_proposals" },
+                  arguments: [
+                    {
+                      kind: "Argument",
+                      name: { kind: "Name", value: "where" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "proposal" },
+                            value: {
+                              kind: "ObjectValue",
+                              fields: [
+                                {
+                                  kind: "ObjectField",
+                                  name: { kind: "Name", value: "type" },
+                                  value: {
+                                    kind: "ObjectValue",
+                                    fields: [
+                                      {
+                                        kind: "ObjectField",
+                                        name: { kind: "Name", value: "_in" },
+                                        value: {
+                                          kind: "ListValue",
+                                          values: [
+                                            {
+                                              kind: "StringValue",
+                                              value:
+                                                "/initia.move.v1.MsgGovPublish",
+                                              block: false,
+                                            },
+                                            {
+                                              kind: "StringValue",
+                                              value:
+                                                "/initia.move.v1.MsgGovExecute",
+                                              block: false,
+                                            },
+                                            {
+                                              kind: "StringValue",
+                                              value:
+                                                "/initia.move.v1.MsgGovScript",
+                                              block: false,
+                                            },
+                                          ],
+                                        },
+                                      },
+                                    ],
+                                  },
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "proposal" },
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "id" },
+                            },
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "title" },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "module_histories" },
+                  arguments: [
+                    {
+                      kind: "Argument",
+                      name: { kind: "Name", value: "order_by" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "block" },
+                            value: {
+                              kind: "ObjectValue",
+                              fields: [
+                                {
+                                  kind: "ObjectField",
+                                  name: { kind: "Name", value: "timestamp" },
+                                  value: { kind: "EnumValue", value: "asc" },
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      kind: "Argument",
+                      name: { kind: "Name", value: "limit" },
+                      value: { kind: "IntValue", value: "1" },
+                    },
+                  ],
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "block" },
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "height" },
+                            },
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "timestamp" },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetModuleDetailsQueryQuery,
+  GetModuleDetailsQueryQueryVariables
+>;
 export const GetPoolListDocument = {
   kind: "Document",
   definitions: [
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 346a653b9..b4b10febc 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -1,89 +1,173 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
+import { chakra, Flex, Heading, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
+import { Loading } from "lib/components/Loading";
 import { ModuleSourceCode } from "lib/components/module";
 import type { ModuleVerificationInternal } from "lib/services/module";
+import type { ModuleDetailsQueryResponse } from "lib/services/moduleService";
 import { type IndexedModule } from "lib/services/moduleService";
 import type { Nullable, Option } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+const DetailsContainer = chakra(Flex, {
+  baseStyle: {
+    p: 4,
+    borderRadius: "8px",
+    border: "1px solid",
+    borderColor: "gray.700",
+    columnGap: 6,
+    "& > div": { flex: 1 },
+  },
+});
 
 interface ModuleInfoProps {
-  address: IndexedModule["address"];
+  moduleDetails: Option<ModuleDetailsQueryResponse>;
   upgradePolicy: IndexedModule["upgradePolicy"];
   verificationData: Option<Nullable<ModuleVerificationInternal>>;
+  isLoading: boolean;
 }
 
-export const ModuleInfo = ({
-  address,
-  upgradePolicy,
-  verificationData,
-}: ModuleInfoProps) => (
-  <Flex flexDirection="column" gap={4}>
-    <Flex justifyContent="space-between" alignItems="center" w="full">
-      <Heading as="h6" variant="h6" fontWeight={600}>
-        Module Information
-      </Heading>
-      {verificationData?.source && (
-        <Flex alignItems="center" gap={1}>
-          <CustomIcon name="check-circle-solid" color="success.main" />
-          <Text variant="body2" color="text.dark">
-            This module&#39;s verification is supported by its provided source
-            code.
-          </Text>
-        </Flex>
-      )}
-    </Flex>
-    <Flex
-      p={4}
-      borderRadius={8}
-      border="1px solid"
-      borderColor="gray.700"
-      sx={{ "& > div": { flex: 1 } }}
-    >
-      <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
-      {/* TODO get block height */}
-      <LabelText
-        label="Initial Published Block Height"
-        helperText1="formatUTC(createdTime)"
-        helperText2="dateFromNow(createdTime)"
-      >
-        <ExplorerLink
-          type="block_height"
-          value="1234567"
-          showCopyOnHover
-          fixedHeight
-        />
-      </LabelText>
-      <LabelText label="Initial Published by" helperText1="(Account Address)">
+const InitRender = ({
+  initTxHash,
+  initProposalTitle,
+  initProposalId,
+  createdHeight,
+}: {
+  initTxHash: ModuleDetailsQueryResponse["initTxHash"];
+  initProposalTitle: ModuleDetailsQueryResponse["initProposalTitle"];
+  initProposalId: ModuleDetailsQueryResponse["initProposalId"];
+  createdHeight: Option<number>;
+}) => {
+  if (initTxHash) {
+    return (
+      <LabelText label="Initial Published Transaction">
         <ExplorerLink
-          type="user_address"
-          value={address}
+          type="tx_hash"
+          value={initTxHash.toUpperCase()}
           showCopyOnHover
           fixedHeight
         />
       </LabelText>
-      {/* TODO get  Transaction or proposal */}
-      <LabelText label="Initial Published Transaction">
+    );
+  }
+
+  if (initProposalTitle && initProposalId) {
+    return (
+      <LabelText
+        label="Initial Published Proposal ID"
+        helperText1={initProposalTitle}
+      >
         <ExplorerLink
-          type="tx_hash"
-          value="7F8FD8...3A804"
+          type="proposal_id"
+          value={initProposalId.toString()}
           showCopyOnHover
           fixedHeight
         />
       </LabelText>
+    );
+  }
+
+  return createdHeight === 0 ? (
+    <LabelText label="Created by">
+      <Text variant="body2">Genesis</Text>
+    </LabelText>
+  ) : (
+    <LabelText label="Instantiate Transaction">
+      <Text variant="body2">N/A</Text>
+    </LabelText>
+  );
+};
+
+const ModuleDetailsBody = ({
+  moduleDetails,
+  isLoading,
+  upgradePolicy,
+}: Omit<ModuleInfoProps, "verificationData">) => {
+  if (isLoading)
+    return (
+      <DetailsContainer>
+        <Loading my={0} />
+      </DetailsContainer>
+    );
+  if (!moduleDetails)
+    return (
+      <DetailsContainer>
+        <Text variant="body2" color="text.dark" mx="auto">
+          Error fetching data
+        </Text>
+      </DetailsContainer>
+    );
+
+  const {
+    createdHeight,
+    createdTime,
+    publisherVmAddress,
+    initProposalId,
+    initProposalTitle,
+    initTxHash,
+  } = moduleDetails;
+
+  return (
+    <DetailsContainer>
+      <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
       <LabelText
-        label="Initial Published Proposal ID"
-        helperText1="TODO Published DAO Module"
+        label="Initial Published Block Height"
+        helperText1={createdTime ? formatUTC(createdTime) : undefined}
+        helperText2={createdTime ? dateFromNow(createdTime) : undefined}
       >
+        {createdHeight !== undefined ? (
+          <ExplorerLink
+            type="block_height"
+            value={createdHeight.toString()}
+            showCopyOnHover
+            fixedHeight
+          />
+        ) : (
+          "N/A"
+        )}
+      </LabelText>
+      <LabelText label="Initial Published by" helperText1="(VM Address)">
         <ExplorerLink
-          value="1234"
+          type="user_address"
+          value={publisherVmAddress}
           showCopyOnHover
           fixedHeight
-          type="proposal_id"
         />
       </LabelText>
+      <InitRender
+        initProposalId={initProposalId}
+        initProposalTitle={initProposalTitle}
+        initTxHash={initTxHash}
+        createdHeight={createdHeight}
+      />
+    </DetailsContainer>
+  );
+};
+
+export const ModuleInfo = ({
+  verificationData,
+  ...details
+}: ModuleInfoProps) => {
+  return (
+    <Flex flexDirection="column" gap={4}>
+      <Flex justifyContent="space-between" alignItems="center" w="full">
+        <Heading as="h6" variant="h6" fontWeight={600}>
+          Module Information
+        </Heading>
+        {verificationData?.source && (
+          <Flex alignItems="center" gap={1}>
+            <CustomIcon name="check-circle-solid" color="success.main" />
+            <Text variant="body2" color="text.dark">
+              This module&#39;s verification is supported by its provided source
+              code.
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+      <ModuleDetailsBody {...details} />
+      <ModuleSourceCode sourceCode={verificationData?.source} />
     </Flex>
-    <ModuleSourceCode sourceCode={verificationData?.source} />
-  </Flex>
-);
+  );
+};
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 990dc9f77..c06291102 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -25,6 +25,7 @@ import {
   useModuleId,
   useAccountModules,
   useModuleHistoriesCount,
+  useModuleDetailsQuery,
 } from "lib/services/moduleService";
 import { useModuleTxsCount } from "lib/services/txService";
 import type { MoveAccountAddr } from "lib/types";
@@ -97,6 +98,9 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
     moduleData.address
   );
 
+  const { data: moduleDetails, isLoading: moduleDetailsLoading } =
+    useModuleDetailsQuery(moduleId);
+
   const { data: verificationData } = useVerifyModule({
     address: moduleData.address,
     moduleName: moduleData.moduleName,
@@ -251,7 +255,12 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
                   </Flex>
                 ))}
               </Flex>
-              <ModuleInfo {...moduleData} verificationData={verificationData} />
+              <ModuleInfo
+                upgradePolicy={moduleData.upgradePolicy}
+                moduleDetails={moduleDetails}
+                verificationData={verificationData}
+                isLoading={moduleDetailsLoading}
+              />
               <Flex flexDirection="column" mt={6}>
                 <Heading
                   as="h6"
diff --git a/src/lib/query/module.ts b/src/lib/query/module.ts
index a167a3e3d..1aa1ef10b 100644
--- a/src/lib/query/module.ts
+++ b/src/lib/query/module.ts
@@ -47,3 +47,40 @@ export const getModuleHistoriesCountQueryDocument = graphql(`
     }
   }
 `);
+
+export const getModuleDetailsQueryDocument = graphql(`
+  query getModuleDetailsQuery($moduleId: Int!) {
+    modules(where: { id: { _eq: $moduleId } }) {
+      publisher_vm_address: vm_address {
+        vm_address
+      }
+      publish_transaction: transaction {
+        hash
+      }
+      module_proposals(
+        where: {
+          proposal: {
+            type: {
+              _in: [
+                "/initia.move.v1.MsgGovPublish"
+                "/initia.move.v1.MsgGovExecute"
+                "/initia.move.v1.MsgGovScript"
+              ]
+            }
+          }
+        }
+      ) {
+        proposal {
+          id
+          title
+        }
+      }
+      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {
+        block {
+          height
+          timestamp
+        }
+      }
+    }
+  }
+`);
diff --git a/src/lib/services/moduleService.ts b/src/lib/services/moduleService.ts
index c7f06cfa4..6bd5c80f4 100644
--- a/src/lib/services/moduleService.ts
+++ b/src/lib/services/moduleService.ts
@@ -13,6 +13,7 @@ import {
   useMoveConfig,
 } from "lib/app-provider";
 import {
+  getModuleDetailsQueryDocument,
   getModuleHistoriesCountQueryDocument,
   getModuleHistoriesQueryDocument,
   getModuleIdByNameAndVmAddressQueryDocument,
@@ -34,7 +35,9 @@ import type { ModuleHistory } from "lib/types/module";
 import {
   bech32AddressToHex,
   parseDate,
+  parseDateOpt,
   parseJsonABI,
+  parseTxHashOpt,
   splitViewExecuteFunctions,
   truncate,
   unpadHexAddress,
@@ -325,3 +328,47 @@ export const useModuleHistoriesCount = (moduleId: Option<Nullable<number>>) => {
     }
   );
 };
+
+export interface ModuleDetailsQueryResponse {
+  publisherVmAddress: HexAddr;
+  createdHeight: Option<number>;
+  createdTime: Option<Date>;
+  initTxHash: Option<string>;
+  initProposalId: Option<number>;
+  initProposalTitle: Option<string>;
+}
+
+export const useModuleDetailsQuery = (
+  moduleId: Option<Nullable<number>>
+): UseQueryResult<ModuleDetailsQueryResponse> => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = async () => {
+    if (!moduleId) throw new Error("Module id not found");
+    return indexerGraphClient
+      .request(getModuleDetailsQueryDocument, { moduleId })
+      .then<ModuleDetailsQueryResponse>(({ modules }) => {
+        const target = modules[0];
+        return {
+          publisherVmAddress: target?.publisher_vm_address
+            .vm_address as HexAddr,
+          createdHeight: target?.module_histories?.at(0)?.block.height,
+          createdTime: parseDateOpt(
+            target?.module_histories?.at(0)?.block.timestamp
+          ),
+          initTxHash: parseTxHashOpt(target?.publish_transaction?.hash),
+          initProposalId: target?.module_proposals.at(0)?.proposal.id,
+          initProposalTitle: target?.module_proposals.at(0)?.proposal.title,
+        };
+      });
+  };
+
+  return useQuery(
+    [CELATONE_QUERY_KEYS.MODULE_DETAILS, indexerGraphClient, moduleId],
+    queryFn,
+    {
+      enabled: Boolean(moduleId),
+      refetchOnWindowFocus: false,
+    }
+  );
+};

From 63c9cfdc4c840db0158eb0e0bdbe66d3dc6e7096 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 16 Oct 2023 16:02:12 +0700
Subject: [PATCH 194/368] chore: remove type assertion and change var name

---
 src/lib/services/module.ts     | 4 ++--
 src/lib/utils/tx/composeMsg.ts | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/lib/services/module.ts b/src/lib/services/module.ts
index 9cac84384..5e755715c 100644
--- a/src/lib/services/module.ts
+++ b/src/lib/services/module.ts
@@ -119,10 +119,10 @@ export const decodeModule = async (
 
 export const decodeScript = async (
   decodeAPI: string,
-  scriptEncode: string
+  scriptBytes: string
 ): Promise<ExposedFunction> =>
   axios
     .post<DecodeModuleReturn>(decodeAPI, {
-      code_bytes: scriptEncode,
+      code_bytes: scriptBytes,
     })
     .then(({ data }) => parseJsonABI<ExposedFunction>(libDecode(data.abi)));
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index 5d5a3b04f..8427f251f 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -191,7 +191,5 @@ export const composeScriptMsg = (
 ) => {
   if (!fn) return [];
   const { typeArgs, args } = serializeAbiData(fn, data);
-  return toEncodeObject([
-    new MsgScript(address as HumanAddr, scriptBytes, typeArgs, args),
-  ]);
+  return toEncodeObject([new MsgScript(address, scriptBytes, typeArgs, args)]);
 };

From 6cfa6eb52b2037dc47dd12e1977471ba07799acb Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 16 Oct 2023 16:27:15 +0700
Subject: [PATCH 195/368] fix(components): adjust mobile guard

---
 src/lib/components/MobileGuard.tsx            |   6 +-
 .../resource/ResourceDetailCard.tsx           |   5 +-
 src/lib/layout/mobile/NavDrawer.tsx           | 135 +++++++++++-------
 3 files changed, 90 insertions(+), 56 deletions(-)

diff --git a/src/lib/components/MobileGuard.tsx b/src/lib/components/MobileGuard.tsx
index 9c71cbb52..dfd1cf591 100644
--- a/src/lib/components/MobileGuard.tsx
+++ b/src/lib/components/MobileGuard.tsx
@@ -17,14 +17,18 @@ export const MobileGuard = ({ children }: MobileGuardProps) => {
     pathName.includes(`account`) ||
     pathName.includes(`/txs`) ||
     pathName.includes(`/blocks`) ||
-    pathName.includes(`/contracts/`) ||
     pathName.includes(`/projects`) ||
     pathName.includes(`/code`) ||
     pathName.includes(`/query`) ||
     pathName.includes(`/network-overview`) ||
     pathName.includes(`/dev-home`) ||
     pathName.includes(`/404`) ||
+    // wasm
+    pathName.includes(`/contracts/`) ||
     pathName === `/${currentChainId}/contracts` ||
+    // move
+    pathName.includes(`/modules/`) ||
+    pathName === `/${currentChainId}/modules` ||
     pathName === `/${currentChainId}`;
 
   if (isResponsive && isMobile) return <>{children}</>;
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index c728c64f8..62677f639 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -59,7 +59,7 @@ export const ResourceDetailCard = ({
           justifyContent="space-between"
           w="full"
           align="center"
-          gap={8}
+          gap={{ base: 4, md: 8 }}
         >
           <Text
             variant="body1"
@@ -69,12 +69,13 @@ export const ResourceDetailCard = ({
           >
             {resourceData.structTag}
           </Text>
-          <Flex alignItems="center" gap={2} minW={36}>
+          <Flex alignItems="center" gap={2} minW={{ base: 8, md: 36 }}>
             <CopyButton
               value={resourceData.moveResource}
               variant="outline-primary"
               size="xs"
               buttonText="Copy JSON"
+              display={{ base: "none", md: "flex" }}
             />
             <AccordionIcon color="gray.600" />
           </Flex>
diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index cf0142f90..97bd1f611 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -16,16 +16,20 @@ import {
   MenuItem,
   IconButton,
 } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 import type { MenuInfo } from "../navbar/type";
 import { CHAIN_CONFIGS } from "config/chain";
 import { AmpEvent, useTrack } from "lib/amplitude";
 import {
   useCelatoneApp,
+  useMoveConfig,
   usePublicProjectConfig,
   useSelectChain,
+  useWasmConfig,
 } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
+import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
 import { useIsCurrentPage } from "lib/hooks";
 import { usePublicProjectStore } from "lib/providers/store";
@@ -36,61 +40,86 @@ export const NavDrawer = () => {
   const { currentChainId, availableChainIds } = useCelatoneApp();
   const isCurrentPage = useIsCurrentPage();
   const { getSavedPublicProjects } = usePublicProjectStore();
-  const publicProject = usePublicProjectConfig({ shouldRedirect: false });
   const selectChain = useSelectChain();
-  const mobileMenu: MenuInfo[] = [
-    {
-      category: "Overview",
-      slug: "overview",
-      submenu: [
-        { name: "Overview", slug: "/", icon: "home" },
-        {
-          name: "Transactions",
-          slug: "/txs",
-          icon: "file",
-        },
-        {
-          name: "Blocks",
-          slug: "/blocks",
-          icon: "block",
-        },
-        {
-          name: "Recent Codes",
-          slug: "/codes",
-          icon: "code",
-        },
-        {
-          name: "Recent Contracts",
-          slug: "/contracts",
-          icon: "contract-address",
-        },
-        {
-          name: "Query",
-          slug: "/query",
-          icon: "query",
-        },
-      ],
-    },
-  ];
+  const wasm = useWasmConfig({ shouldRedirect: false });
+  const move = useMoveConfig({ shouldRedirect: false });
+  const publicProject = usePublicProjectConfig({ shouldRedirect: false });
+
+  const mobileMenu = useMemo(() => {
+    const menu: MenuInfo[] = [
+      {
+        category: "Overview",
+        slug: "overview",
+        submenu: [
+          { name: "Overview", slug: "/", icon: "home" as IconKeys },
+          {
+            name: "Transactions",
+            slug: "/txs",
+            icon: "file" as IconKeys,
+          },
+          {
+            name: "Blocks",
+            slug: "/blocks",
+            icon: "block" as IconKeys,
+          },
+          ...(wasm.enabled
+            ? [
+                {
+                  name: "Recent Codes",
+                  slug: "/codes",
+                  icon: "code" as IconKeys,
+                },
+                {
+                  name: "Recent Contracts",
+                  slug: "/contracts",
+                  icon: "contract-address" as IconKeys,
+                },
+                {
+                  name: "Query",
+                  slug: "/query",
+                  icon: "query" as IconKeys,
+                },
+              ]
+            : []),
+          ...(move.enabled
+            ? [
+                {
+                  name: "0x1 Page",
+                  slug: "/account/0x1",
+                  icon: "home" as IconKeys,
+                },
+              ]
+            : []),
+        ],
+      },
+    ];
+
+    if (publicProject.enabled) {
+      menu.push({
+        category: "Public Projects",
+        slug: "public-projects",
+        submenu: [
+          ...getSavedPublicProjects().map((list) => ({
+            name: list.name,
+            slug: `/projects/${list.slug}`,
+            logo: list.logo,
+          })),
+          {
+            name: "View All Projects",
+            slug: "/projects",
+            icon: "public-project" as IconKeys,
+          },
+        ],
+      });
+    }
 
-  if (publicProject.enabled) {
-    mobileMenu.push({
-      category: "Public Projects",
-      slug: "public-projects",
-      submenu: [
-        ...getSavedPublicProjects().map((list) => ({
-          name: list.name,
-          slug: `/projects/${list.slug}`,
-          logo: list.logo,
-        })),
-        {
-          name: "View All Projects",
-          slug: "/projects",
-          icon: "public-project",
-        },
-      ],
-    });
-  }
+    return menu;
+  }, [
+    getSavedPublicProjects,
+    publicProject.enabled,
+    wasm.enabled,
+    move.enabled,
+  ]);
 
   return (
     <>

From abdb9691e49154663090670122a67fe22f4d29e9 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 16 Oct 2023 17:13:26 +0700
Subject: [PATCH 196/368] fix: prevent querying with block height with hex

---
 src/lib/services/blockService.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/lib/services/blockService.ts b/src/lib/services/blockService.ts
index 4660ec79e..db1748c34 100644
--- a/src/lib/services/blockService.ts
+++ b/src/lib/services/blockService.ts
@@ -17,7 +17,13 @@ import type {
   Nullable,
   ValidatorAddr,
 } from "lib/types";
-import { isBlock, parseDate, parseDateOpt, parseTxHash } from "lib/utils";
+import {
+  isBlock,
+  isHexAddress,
+  parseDate,
+  parseDateOpt,
+  parseTxHash,
+} from "lib/utils";
 
 export const useBlocklistQuery = (
   limit: number,
@@ -120,7 +126,7 @@ export const useBlockInfoQuery = (
     [CELATONE_QUERY_KEYS.BLOCK_INFO, indexerGraphClient, height],
     queryFn,
     {
-      enabled: isBlock(height),
+      enabled: isBlock(height) && !isHexAddress(height),
       retry: false,
       refetchOnWindowFocus: false,
     }

From 89cb61f3f3c7b85c39010b181b1ce1170c0e19c7 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 16 Oct 2023 17:17:43 +0700
Subject: [PATCH 197/368] fix(components): add responsive style to module
 detail

---
 src/lib/components/MobileGuard.tsx            |   6 +-
 .../components/module/FunctionDetailCard.tsx  | 152 +++++++++---------
 src/lib/components/module/StructCard.tsx      |  13 +-
 .../components/resources/ResourceSection.tsx  |   2 +-
 .../components/FunctionTypeSwitch.tsx         |   7 +-
 .../components/ModuleFunction.tsx             |  21 ++-
 .../module-details/components/ModuleInfo.tsx  |   2 +
 .../components/ModuleStruct.tsx               |  16 +-
 .../module-details/components/ModuleTop.tsx   |  94 +++++------
 src/lib/pages/module-details/index.tsx        |   7 +-
 10 files changed, 186 insertions(+), 134 deletions(-)

diff --git a/src/lib/components/MobileGuard.tsx b/src/lib/components/MobileGuard.tsx
index 9c71cbb52..dfd1cf591 100644
--- a/src/lib/components/MobileGuard.tsx
+++ b/src/lib/components/MobileGuard.tsx
@@ -17,14 +17,18 @@ export const MobileGuard = ({ children }: MobileGuardProps) => {
     pathName.includes(`account`) ||
     pathName.includes(`/txs`) ||
     pathName.includes(`/blocks`) ||
-    pathName.includes(`/contracts/`) ||
     pathName.includes(`/projects`) ||
     pathName.includes(`/code`) ||
     pathName.includes(`/query`) ||
     pathName.includes(`/network-overview`) ||
     pathName.includes(`/dev-home`) ||
     pathName.includes(`/404`) ||
+    // wasm
+    pathName.includes(`/contracts/`) ||
     pathName === `/${currentChainId}/contracts` ||
+    // move
+    pathName.includes(`/modules/`) ||
+    pathName === `/${currentChainId}/modules` ||
     pathName === `/${currentChainId}`;
 
   if (isResponsive && isMobile) return <>{children}</>;
diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index 8ac72ec23..3c66d0296 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -13,7 +13,7 @@ import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
 import { LabelText } from "../LabelText";
 import { Tooltip } from "../Tooltip";
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import type { ExposedFunction } from "lib/types";
 import { checkAvailability, getVisibilityIcon } from "lib/utils";
@@ -120,6 +120,7 @@ export const FunctionDetailCard = ({
   const { is_view: isView, visibility, name } = exposedFn;
   const disabled = !checkAvailability(exposedFn);
   const navigate = useInternalNavigate();
+  const isMobile = useMobile();
   const getFnColor = () => {
     switch (isView) {
       case false:
@@ -141,7 +142,7 @@ export const FunctionDetailCard = ({
       bg="gray.800"
       _hover={{ bg: "gray.700" }}
       borderRadius={8}
-      p={4}
+      p={{ base: 3, md: 4 }}
       transition="all .25s ease-in-out"
       flexDirection="column"
       gap={1}
@@ -177,81 +178,86 @@ export const FunctionDetailCard = ({
                   {name}
                 </Text>
               </Flex>
-              <Flex alignItems="center" gap={4}>
-                <Flex alignItems="center" gap={2}>
-                  <Tooltip
-                    bg="primary.dark"
-                    label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
-                  >
-                    <Flex
-                      pointerEvents="auto"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Flex gap={1} alignItems="center">
-                        {disabled ? (
-                          <CustomIcon
-                            name="close"
-                            color="gray.600"
-                            boxSize={3}
-                          />
-                        ) : (
-                          <CustomIcon
-                            name="check"
-                            color="success.main"
-                            boxSize={3}
-                          />
-                        )}
-                        <Text variant="body3" color="text.dark">
-                          is_entry
+              <Flex alignItems="center" gap={{ base: 0, md: 4 }}>
+                {!isMobile && (
+                  <>
+                    {" "}
+                    <Flex alignItems="center" gap={2}>
+                      <Tooltip
+                        bg="primary.dark"
+                        label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+                      >
+                        <Flex
+                          pointerEvents="auto"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Flex gap={1} alignItems="center">
+                            {disabled ? (
+                              <CustomIcon
+                                name="close"
+                                color="gray.600"
+                                boxSize={3}
+                              />
+                            ) : (
+                              <CustomIcon
+                                name="check"
+                                color="success.main"
+                                boxSize={3}
+                              />
+                            )}
+                            <Text variant="body3" color="text.dark">
+                              is_entry
+                            </Text>
+                          </Flex>
+                        </Flex>
+                      </Tooltip>
+                      <DotSeparator bg="gray.600" />
+                      <Flex alignItems="center" gap={1}>
+                        <CustomIcon
+                          name={getVisibilityIcon(visibility)}
+                          color="gray.600"
+                          boxSize={3}
+                        />
+                        <Text
+                          variant="body3"
+                          color="text.dark"
+                          textTransform="capitalize"
+                        >
+                          {visibility}
                         </Text>
                       </Flex>
                     </Flex>
-                  </Tooltip>
-                  <DotSeparator bg="gray.600" />
-                  <Flex alignItems="center" gap={1}>
-                    <CustomIcon
-                      name={getVisibilityIcon(visibility)}
-                      color="gray.600"
-                      boxSize={3}
-                    />
-                    <Text
-                      variant="body3"
-                      color="text.dark"
-                      textTransform="capitalize"
+                    <Button
+                      variant={getButtonStyle().variant}
+                      isDisabled={disabled}
+                      borderColor={getButtonStyle().color}
+                      size="sm"
+                      onClick={() =>
+                        navigate({
+                          pathname: "/interact",
+                          query: {
+                            address,
+                            moduleName,
+                            functionType: isView ? "view" : "execute",
+                            functionName: exposedFn.name,
+                          },
+                        })
+                      }
+                      leftIcon={
+                        <CustomIcon
+                          mx={0}
+                          name={isView ? "query" : "execute"}
+                          color={getButtonStyle().color}
+                          boxSize={3}
+                        />
+                      }
                     >
-                      {visibility}
-                    </Text>
-                  </Flex>
-                </Flex>
-                <Button
-                  variant={getButtonStyle().variant}
-                  isDisabled={disabled}
-                  borderColor={getButtonStyle().color}
-                  size="sm"
-                  onClick={() =>
-                    navigate({
-                      pathname: "/interact",
-                      query: {
-                        address,
-                        moduleName,
-                        functionType: isView ? "view" : "execute",
-                        functionName: exposedFn.name,
-                      },
-                    })
-                  }
-                  leftIcon={
-                    <CustomIcon
-                      mx={0}
-                      name={isView ? "query" : "execute"}
-                      color={getButtonStyle().color}
-                      boxSize={3}
-                    />
-                  }
-                >
-                  <Text color={getButtonStyle().color} mt="2px">
-                    {isView ? "View" : "Execute"}
-                  </Text>
-                </Button>
+                      <Text color={getButtonStyle().color} mt="2px">
+                        {isView ? "View" : "Execute"}
+                      </Text>
+                    </Button>
+                  </>
+                )}
                 <StyledIconButton
                   variant="none"
                   aria-label="external"
diff --git a/src/lib/components/module/StructCard.tsx b/src/lib/components/module/StructCard.tsx
index 2e51065d0..ab1ae2b9d 100644
--- a/src/lib/components/module/StructCard.tsx
+++ b/src/lib/components/module/StructCard.tsx
@@ -50,9 +50,18 @@ export const StructCard = ({ struct }: StructCardProps) => {
               section: "pool-list-page",
             })}
           >
-            <Flex justifyContent="space-between" w="full" alignItems="center">
+            <Flex
+              justifyContent="space-between"
+              w="full"
+              alignItems={{ base: "flex-start", md: "center" }}
+              direction={{ base: "column", md: "row" }}
+            >
               <Text variant="body2">{struct.name}</Text>
-              <Flex align="center">
+              <Flex
+                align="center"
+                justifyContent="space-between"
+                w={{ base: "full", md: "auto" }}
+              >
                 <Flex gap={1}>
                   {structAbilities.map((item) => (
                     <Tag
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index cc0c1cf14..52364185f 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -143,7 +143,7 @@ export const ResourceSection = ({
                   </Flex>
                 </AccordionButton>
                 <AccordionPanel>
-                  <Flex direction="column" gap={3}>
+                  <Flex direction="column" gap={3} maxW={80}>
                     {Object.values(item.resources).map((subitem) => (
                       <ResourceCard
                         key={subitem.group}
diff --git a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
index 14455966e..af463b3d2 100644
--- a/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
+++ b/src/lib/pages/module-details/components/FunctionTypeSwitch.tsx
@@ -36,6 +36,7 @@ export const FunctionTypeSwitch = ({
       direction="row"
       align="center"
       position="relative"
+      w={{ base: "full", md: "auto" }}
       sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
       {...flexProps}
     >
@@ -43,7 +44,7 @@ export const FunctionTypeSwitch = ({
         <MotionBox
           key={tab}
           w="full"
-          minW="128px"
+          minW={{ base: "33%", md: "128px" }}
           p="2px 10px"
           variants={{
             active: { color: "var(--chakra-colors-text-main)" },
@@ -66,14 +67,14 @@ export const FunctionTypeSwitch = ({
                 cursor: "pointer",
               })}
         >
-          <Heading as="h6" variant="h6" fontSize="14px">
+          <Heading as="h6" variant="h6" fontSize={{ base: "12px", md: "14px" }}>
             {tab} {`(${counts[idx]})`}
           </Heading>
         </MotionBox>
       ))}
       <MotionBox
         h="calc(100% - 8px)"
-        w="128px"
+        w={{ base: "33%", md: "128px" }}
         position="absolute"
         borderRadius="2px"
         backgroundColor="primary.dark"
diff --git a/src/lib/pages/module-details/components/ModuleFunction.tsx b/src/lib/pages/module-details/components/ModuleFunction.tsx
index c9aa2ec28..5db800758 100644
--- a/src/lib/pages/module-details/components/ModuleFunction.tsx
+++ b/src/lib/pages/module-details/components/ModuleFunction.tsx
@@ -42,7 +42,7 @@ const FunctionAccordions = ({
     index={expandedIndexes}
     onChange={updateExpandedIndexes}
   >
-    <Flex direction="column" gap={4}>
+    <Flex direction="column" gap={{ base: 2, md: 4 }}>
       {fns.map((fn) => (
         <FunctionDetailCard
           exposedFn={fn}
@@ -107,7 +107,7 @@ export const ModuleFunction = ({
   return (
     <Flex
       direction="column"
-      gap={8}
+      gap={{ base: 4, md: 8 }}
       sx={{ [`& #${tab}`]: { display: "block" } }}
     >
       <Heading as="h6" variant="h6" fontWeight={600} minH="24px">
@@ -119,7 +119,11 @@ export const ModuleFunction = ({
         onChange={(e) => setKeyword(e.target.value)}
         action="exposed-function-search"
       />
-      <Flex justifyContent="space-between" alignItems="center">
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        direction={{ base: "column", md: "row" }}
+      >
         <FunctionTypeSwitch
           currentTab={tab}
           onTabChange={handleTabChange}
@@ -130,9 +134,15 @@ export const ModuleFunction = ({
             filteredExecuteFns.length,
           ]}
         />
-        <Flex gap={4} alignItems="center">
+        <Flex
+          gap={{ base: 2, md: 4 }}
+          my={{ base: 1, md: 0 }}
+          alignItems="center"
+          w={{ base: "full", md: "auto" }}
+        >
           <Button
             variant="outline-primary"
+            w={{ base: "full", md: "auto" }}
             size="sm"
             rightIcon={
               <CustomIcon
@@ -150,8 +160,9 @@ export const ModuleFunction = ({
           </Button>
           <Button
             variant="outline-primary"
+            w={{ base: "full", md: "auto" }}
             size="sm"
-            rightIcon={<CustomIcon name="launch" />}
+            rightIcon={<CustomIcon name="launch" boxSize={3} />}
             onClick={() => {
               const jsonString = JSON.stringify(fns, null, 2);
               const jsonWindow = window.open();
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 880df7a8f..5bd7c0d22 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -40,6 +40,8 @@ export const ModuleInfo = ({
         border="1px solid"
         borderColor="gray.700"
         sx={{ "& > div": { flex: 1 } }}
+        gap={{ base: 4, md: 0 }}
+        direction={{ base: "column", md: "row" }}
       >
         <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
         {/* TODO get block height */}
diff --git a/src/lib/pages/module-details/components/ModuleStruct.tsx b/src/lib/pages/module-details/components/ModuleStruct.tsx
index 585f401ee..a2600500d 100644
--- a/src/lib/pages/module-details/components/ModuleStruct.tsx
+++ b/src/lib/pages/module-details/components/ModuleStruct.tsx
@@ -25,13 +25,24 @@ export const ModuleStruct = ({ structs }: ModuleStructProps) => {
 
   return (
     <Flex direction="column" gap={8}>
-      <Flex maxH="24px" justifyContent="space-between" alignItems="center">
+      <Flex
+        maxH={{ md: "24px" }}
+        justifyContent="space-between"
+        alignItems={{ base: "flex-start", md: "center" }}
+        direction={{ base: "column", md: "row" }}
+        gap={{ base: 4, md: 0 }}
+      >
         <Heading as="h6" variant="h6" fontWeight={600}>
           Structs
         </Heading>
-        <Flex gap={4} alignItems="center">
+        <Flex
+          gap={{ base: 2, md: 4 }}
+          alignItems="center"
+          w={{ base: "full", md: "auto" }}
+        >
           <Button
             variant="outline-primary"
+            w="full"
             size="sm"
             rightIcon={
               <CustomIcon
@@ -49,6 +60,7 @@ export const ModuleStruct = ({ structs }: ModuleStructProps) => {
           </Button>
           <Button
             variant="outline-primary"
+            w="full"
             size="sm"
             rightIcon={<CustomIcon name="launch" />}
             onClick={() => {
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 1baf643d1..a6b280c06 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -140,54 +140,56 @@ export const ModuleTop = ({ moduleData, verificationData }: ModuleTopProps) => {
             </Flex>
           </Flex>
         </Flex>
-        <Flex
-          gap={{ base: 2, md: 4 }}
-          mt={{ base: 8, md: 0 }}
-          w={{ base: "full", md: "auto" }}
-        >
-          <Button
-            variant="outline-primary"
-            w={{ base: "full", md: "auto" }}
-            leftIcon={<CustomIcon name="query" />}
-            size={{ base: "sm", md: "md" }}
-            onClick={() =>
-              navigate({
-                pathname: "/interact",
-                query: {
-                  address: moduleData.address,
-                  moduleName: moduleData.moduleName,
-                  functionType: "view",
-                },
-              })
-            }
-          >
-            View
-          </Button>
-          <Button
-            variant="outline-primary"
+        {!isMobile && (
+          <Flex
+            gap={{ base: 2, md: 4 }}
+            mt={{ base: 8, md: 0 }}
             w={{ base: "full", md: "auto" }}
-            leftIcon={<CustomIcon name="execute" />}
-            size={{ base: "sm", md: "md" }}
-            onClick={() =>
-              navigate({
-                pathname: "/interact",
-                query: {
-                  address: moduleData.address,
-                  moduleName: moduleData.moduleName,
-                  functionType: "execute",
-                },
-              })
-            }
           >
-            Execute
-          </Button>
-          <CopyButton
-            value={moduleData.abi}
-            variant="outline-primary"
-            size={{ base: "sm", md: "md" }}
-            buttonText="Copy ABI"
-          />
-        </Flex>
+            <Button
+              variant="outline-primary"
+              w={{ base: "full", md: "auto" }}
+              leftIcon={<CustomIcon name="query" />}
+              size={{ base: "sm", md: "md" }}
+              onClick={() =>
+                navigate({
+                  pathname: "/interact",
+                  query: {
+                    address: moduleData.address,
+                    moduleName: moduleData.moduleName,
+                    functionType: "view",
+                  },
+                })
+              }
+            >
+              View
+            </Button>
+            <Button
+              variant="outline-primary"
+              w={{ base: "full", md: "auto" }}
+              leftIcon={<CustomIcon name="execute" />}
+              size={{ base: "sm", md: "md" }}
+              onClick={() =>
+                navigate({
+                  pathname: "/interact",
+                  query: {
+                    address: moduleData.address,
+                    moduleName: moduleData.moduleName,
+                    functionType: "execute",
+                  },
+                })
+              }
+            >
+              Execute
+            </Button>
+            <CopyButton
+              value={moduleData.abi}
+              variant="outline-primary"
+              size={{ base: "sm", md: "md" }}
+              buttonText="Copy ABI"
+            />
+          </Flex>
+        )}
       </Flex>
     </Flex>
   );
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 25df3b349..e85828d94 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -190,7 +190,12 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
         <TabPanels>
           <TabPanel p={0}>
             <Flex gap={6} flexDirection="column">
-              <Flex justifyContent="space-between" gap={6} mb={6}>
+              <Flex
+                justifyContent="space-between"
+                direction={{ base: "column", md: "row" }}
+                gap={{ base: 2, md: 6 }}
+                mb={{ base: 2, md: 6 }}
+              >
                 {actionList.map((item) => (
                   <Flex
                     p={4}

From db5316c9ee79949a0244df984494b2fd02ee3fb0 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 16 Oct 2023 17:40:03 +0700
Subject: [PATCH 198/368] chore: change var name

---
 .../publish-module/components/UploadModuleCard.tsx   | 10 +++++-----
 src/lib/pages/publish-module/formConstants.ts        |  4 ++--
 src/lib/pages/publish-module/publish.tsx             |  4 ++--
 src/lib/pages/publish-module/utils.ts                | 12 ++++++------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/lib/pages/publish-module/components/UploadModuleCard.tsx b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
index c0a14e326..faa9200b1 100644
--- a/src/lib/pages/publish-module/components/UploadModuleCard.tsx
+++ b/src/lib/pages/publish-module/components/UploadModuleCard.tsx
@@ -17,7 +17,7 @@ import type { HumanAddr, Option, UpgradePolicy } from "lib/types";
 interface UploadModuleCardProps {
   index: number;
   fileState: Module;
-  fields: Module[];
+  modules: Module[];
   policy: UpgradePolicy;
   setFile: (
     file: Option<File>,
@@ -45,7 +45,7 @@ export const UploadModuleCard = ({
     decodeRes,
     publishStatus: { status, text },
   },
-  fields,
+  modules,
   policy,
   setFile,
   removeFile,
@@ -75,7 +75,7 @@ export const UploadModuleCard = ({
           data,
           statusResolver({
             data,
-            fields,
+            modules,
             index,
             policy,
             address: address as Option<HumanAddr>,
@@ -120,7 +120,7 @@ export const UploadModuleCard = ({
         <Flex
           align="center"
           gap={1}
-          visibility={fields.length > 1 ? "visible" : "hidden"}
+          visibility={modules.length > 1 ? "visible" : "hidden"}
         >
           <Tooltip label="Move up" variant="primary-light">
             <IconButton
@@ -139,7 +139,7 @@ export const UploadModuleCard = ({
               aria-label="move-down"
               variant="ghost"
               size="sm"
-              disabled={index === fields.length - 1}
+              disabled={index === modules.length - 1}
             >
               <CustomIcon name="arrow-down" color="gray.600" />
             </IconButton>
diff --git a/src/lib/pages/publish-module/formConstants.ts b/src/lib/pages/publish-module/formConstants.ts
index a37d4d2d5..ff1a7d6bd 100644
--- a/src/lib/pages/publish-module/formConstants.ts
+++ b/src/lib/pages/publish-module/formConstants.ts
@@ -21,7 +21,7 @@ export interface PublishModuleState {
   upgradePolicy: UpgradePolicy;
 }
 
-export const publishStatusDefault: PublishStatus = {
+export const PUBLISH_STATUS_DEFAULT: PublishStatus = {
   status: "init",
   text: "",
 };
@@ -29,7 +29,7 @@ export const publishStatusDefault: PublishStatus = {
 export const emptyModule: Module = {
   base64EncodedFile: "",
   decodeRes: undefined,
-  publishStatus: publishStatusDefault,
+  publishStatus: PUBLISH_STATUS_DEFAULT,
   file: undefined,
 };
 
diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 0bac99ead..88c9865c7 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -179,7 +179,7 @@ export const PublishModule = ({
         `modules.${index}.publishStatus`,
         statusResolver({
           data: field.decodeRes,
-          fields: modules,
+          modules,
           index,
           policy: upgradePolicy,
           address: address as Option<HumanAddr>,
@@ -231,7 +231,7 @@ export const PublishModule = ({
                   <UploadModuleCard
                     key={`${field.base64EncodedFile}-${idx.toString()}`}
                     index={idx}
-                    fields={modules}
+                    modules={modules}
                     fileState={field}
                     policy={upgradePolicy}
                     setFile={setFileValue(idx)}
diff --git a/src/lib/pages/publish-module/utils.ts b/src/lib/pages/publish-module/utils.ts
index 5069209e0..a16d372f5 100644
--- a/src/lib/pages/publish-module/utils.ts
+++ b/src/lib/pages/publish-module/utils.ts
@@ -4,7 +4,7 @@ import { UpgradePolicy } from "lib/types";
 import { bech32AddressToHex, truncate, unpadHexAddress } from "lib/utils";
 
 import type { Module, PublishStatus } from "./formConstants";
-import { publishStatusDefault } from "./formConstants";
+import { PUBLISH_STATUS_DEFAULT } from "./formConstants";
 
 const priority = Object.keys(UpgradePolicy);
 
@@ -15,18 +15,18 @@ const resolvePolicyPriority = (
 
 export const statusResolver = ({
   data,
-  fields,
+  modules,
   index,
   policy,
   address,
 }: {
   data: Option<DecodeModuleQueryResponse>;
-  fields: Module[];
+  modules: Module[];
   index: number;
   policy: UpgradePolicy;
   address: Option<HumanAddr>;
 }): PublishStatus => {
-  if (!data) return publishStatusDefault;
+  if (!data) return PUBLISH_STATUS_DEFAULT;
 
   const { abi, currentPolicy, modulePath } = data;
 
@@ -34,7 +34,7 @@ export const statusResolver = ({
     ? unpadHexAddress(bech32AddressToHex(address as HumanAddr)) === abi.address
     : false;
 
-  const priorUpload = fields
+  const priorUpload = modules
     .slice(0, index)
     .findLast((field) => field.decodeRes?.modulePath === modulePath);
 
@@ -93,5 +93,5 @@ export const statusResolver = ({
       text: `The file will be uploaded to republish module “${abi.name}” in your address.`,
     };
   }
-  return publishStatusDefault;
+  return PUBLISH_STATUS_DEFAULT;
 };

From d9c8d16dca34f4b858cd0cd1010773337c5f5263 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 16 Oct 2023 17:52:19 +0700
Subject: [PATCH 199/368] fix: comments

---
 src/lib/components/abi/AbiForm.tsx     | 3 ++-
 src/lib/pages/deploy-script/index.tsx  | 2 +-
 src/lib/services/move/moduleService.ts | 6 ++----
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
index 3cfd5c5e3..81110d0cd 100644
--- a/src/lib/components/abi/AbiForm.tsx
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -28,7 +28,8 @@ export const AbiForm = ({
 
   useEffect(() => {
     reset(initialData);
-  }, [initialData, reset]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(initialData), reset]);
 
   return (
     <Flex direction="column" gap={4} w="full">
diff --git a/src/lib/pages/deploy-script/index.tsx b/src/lib/pages/deploy-script/index.tsx
index e2d13df11..20eac8f47 100644
--- a/src/lib/pages/deploy-script/index.tsx
+++ b/src/lib/pages/deploy-script/index.tsx
@@ -63,7 +63,7 @@ export const DeployScript = () => {
           fileState.base64File &&
           fileState.decodeRes &&
           !abiErrors.length &&
-          Object.values(inputData.typeArgs).every((val) => val)
+          Object.values(inputData.typeArgs).every((val) => val.trim())
       ),
     [
       address,
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index a78c7230f..e2cb972fc 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -9,7 +9,7 @@ import type { AxiosError } from "axios";
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
-  useCelatoneApp,
+  useLCDEndpoint,
   useMoveConfig,
 } from "lib/app-provider";
 import type {
@@ -223,9 +223,7 @@ export const useDecodeScript = ({
   base64EncodedFile: string;
   options?: Omit<UseQueryOptions<ExposedFunction>, "queryKey">;
 }): UseQueryResult<ExposedFunction> => {
-  const {
-    chainConfig: { lcd },
-  } = useCelatoneApp();
+  const lcd = useLCDEndpoint();
 
   const queryFn = async (): Promise<ExposedFunction> => {
     const fn = await decodeScript(

From 774360b3c4e767685536d68230cc786c5ef8bee0 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 17 Oct 2023 11:22:55 +0700
Subject: [PATCH 200/368] fix(components): fix as comment

---
 .../components/module/FunctionDetailCard.tsx  | 147 ++++++++----------
 src/lib/components/module/StructCard.tsx      |   1 +
 src/lib/pages/module-details/index.tsx        |   1 +
 3 files changed, 69 insertions(+), 80 deletions(-)

diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index 3c66d0296..1c8b9d6eb 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -33,84 +33,82 @@ const StyledIconButton = chakra(IconButton, {
   },
 });
 
-const FunctionDetail = ({ exposedFn }: { exposedFn: ExposedFunction }) => {
-  return (
-    <AccordionPanel bg="gray.900" borderRadius={8} mt={4} py={3} px={4}>
-      <Flex gap={3} direction="column">
-        <Flex gap={8}>
-          <LabelText
-            isSmall
-            label="visibility"
-            labelWeight={700}
-            labelColor="text.disabled"
-          >
-            <Flex align="center">
-              <CustomIcon
-                name={getVisibilityIcon(exposedFn.visibility)}
-                boxSize={3}
-                ml={0}
-                color="gray.600"
-              />
-              <Text variant="body3" textTransform="capitalize">
-                {exposedFn.visibility}
-              </Text>
-            </Flex>
-          </LabelText>
-          <LabelText
-            isSmall
-            label="is_entry"
-            labelWeight={700}
-            labelColor="text.disabled"
-          >
-            <Flex align="center">
-              <CustomIcon
-                boxSize={3}
-                ml={0}
-                color={exposedFn.is_entry ? "success.main" : "gray.600"}
-                name={exposedFn.is_entry ? "check" : "close"}
-              />
-              <Text variant="body3">{String(exposedFn.is_entry)}</Text>
-            </Flex>
-          </LabelText>
-          <LabelText
-            isSmall
-            label="is_view"
-            labelWeight={700}
-            labelColor="text.disabled"
-          >
-            <Flex align="center">
-              <CustomIcon
-                boxSize={3}
-                ml={0}
-                color={exposedFn.is_view ? "success.main" : "gray.600"}
-                name={exposedFn.is_view ? "check" : "close"}
-              />
-              <Text variant="body3">{String(exposedFn.is_view)}</Text>
-            </Flex>
-          </LabelText>
-        </Flex>
+const FunctionDetail = ({ exposedFn }: { exposedFn: ExposedFunction }) => (
+  <AccordionPanel bg="gray.900" borderRadius={8} mt={4} py={3} px={4}>
+    <Flex gap={3} direction="column">
+      <Flex gap={8}>
+        <LabelText
+          isSmall
+          label="visibility"
+          labelWeight={700}
+          labelColor="text.disabled"
+        >
+          <Flex align="center">
+            <CustomIcon
+              name={getVisibilityIcon(exposedFn.visibility)}
+              boxSize={3}
+              ml={0}
+              color="gray.600"
+            />
+            <Text variant="body3" textTransform="capitalize">
+              {exposedFn.visibility}
+            </Text>
+          </Flex>
+        </LabelText>
         <LabelText
           isSmall
-          label="generic_type_params"
+          label="is_entry"
           labelWeight={700}
           labelColor="text.disabled"
         >
-          <Text variant="body3">
-            {JSON.stringify(exposedFn.generic_type_params)}
-          </Text>
+          <Flex align="center">
+            <CustomIcon
+              boxSize={3}
+              ml={0}
+              color={exposedFn.is_entry ? "success.main" : "gray.600"}
+              name={exposedFn.is_entry ? "check" : "close"}
+            />
+            <Text variant="body3">{String(exposedFn.is_entry)}</Text>
+          </Flex>
         </LabelText>
         <LabelText
           isSmall
-          label="params"
+          label="is_view"
           labelWeight={700}
           labelColor="text.disabled"
         >
-          <Text variant="body3">{JSON.stringify(exposedFn.params)}</Text>
+          <Flex align="center">
+            <CustomIcon
+              boxSize={3}
+              ml={0}
+              color={exposedFn.is_view ? "success.main" : "gray.600"}
+              name={exposedFn.is_view ? "check" : "close"}
+            />
+            <Text variant="body3">{String(exposedFn.is_view)}</Text>
+          </Flex>
         </LabelText>
       </Flex>
-    </AccordionPanel>
-  );
-};
+      <LabelText
+        isSmall
+        label="generic_type_params"
+        labelWeight={700}
+        labelColor="text.disabled"
+      >
+        <Text variant="body3">
+          {JSON.stringify(exposedFn.generic_type_params)}
+        </Text>
+      </LabelText>
+      <LabelText
+        isSmall
+        label="params"
+        labelWeight={700}
+        labelColor="text.disabled"
+      >
+        <Text variant="body3">{JSON.stringify(exposedFn.params)}</Text>
+      </LabelText>
+    </Flex>
+  </AccordionPanel>
+);
 
 export const FunctionDetailCard = ({
   exposedFn,
@@ -121,15 +119,7 @@ export const FunctionDetailCard = ({
   const disabled = !checkAvailability(exposedFn);
   const navigate = useInternalNavigate();
   const isMobile = useMobile();
-  const getFnColor = () => {
-    switch (isView) {
-      case false:
-        return "accent.main";
-      case true:
-      default:
-        return "primary.main";
-    }
-  };
+  const fnColor = isView ? "primary.main" : "accent.main";
 
   const getButtonStyle = () => {
     if (disabled) return { variant: "outline-gray", color: "gray.500" };
@@ -164,17 +154,14 @@ export const FunctionDetailCard = ({
                 <Flex gap={1} alignItems="center">
                   <CustomIcon
                     name={isView ? "query" : "execute"}
-                    color={getFnColor()}
+                    color={fnColor}
                     boxSize={3}
                   />
-                  <Text variant="body3" color={getFnColor()}>
+                  <Text variant="body3" color={fnColor}>
                     {isView ? "View" : "Execute"}
                   </Text>
                 </Flex>
-                <Text
-                  variant="body2"
-                  color={disabled ? "text.disabled" : "text.main"}
-                >
+                <Text variant="body2" color="text.main">
                   {name}
                 </Text>
               </Flex>
diff --git a/src/lib/components/module/StructCard.tsx b/src/lib/components/module/StructCard.tsx
index ab1ae2b9d..903edb426 100644
--- a/src/lib/components/module/StructCard.tsx
+++ b/src/lib/components/module/StructCard.tsx
@@ -65,6 +65,7 @@ export const StructCard = ({ struct }: StructCardProps) => {
                 <Flex gap={1}>
                   {structAbilities.map((item) => (
                     <Tag
+                      key={item}
                       size="sm"
                       variant="gray"
                       opacity={struct.abilities.includes(item) ? 1 : 0.3}
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index e85828d94..7552b3767 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -198,6 +198,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
               >
                 {actionList.map((item) => (
                   <Flex
+                    key={item.name}
                     p={4}
                     bg="gray.800"
                     opacity={item.count < 1 ? 0.5 : 1}

From 98d10b719c78969c0020be9bf4688a2d90a7b2a1 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 17 Oct 2023 11:52:34 +0700
Subject: [PATCH 201/368] fix(components): add 0x1 icon

---
 src/lib/components/icon/CustomIcon.tsx | 28 +++++++++++++++++++++++++-
 src/lib/layout/navbar/index.tsx        |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index 3f1ef1be5..dcb21d71e 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -937,6 +937,33 @@ export const ICONS = {
     ),
     viewBox: viewboxDefault,
   },
+  hex: {
+    svg: (
+      <>
+        <path
+          d="M16 15C16 16.1046 15.1046 17 14 17H4C2.89543 17 2 16.1046 2 15V13.5H4V15H14V13.5H16V15Z"
+          fill="currentColor"
+        />
+        <path
+          d="M2 2C2 0.89543 2.89543 0 4 0L14 0C15.1046 0 16 0.89543 16 2V3.5L14 3.5V2L4 2V3.5L2 3.5V2Z"
+          fill="currentColor"
+        />
+        <path
+          d="M13.3514 6.63485C13.2409 6.63485 13.1514 6.54531 13.1514 6.43485V5.34088C13.1514 5.23043 13.2409 5.14088 13.3514 5.14088H15.7999C15.9104 5.14088 15.9999 5.23043 15.9999 5.34088V10.5C15.9999 10.6105 16.0894 10.7 16.1999 10.7H16.8C16.9105 10.7 17 10.7895 17 10.9V11.8C17 11.9104 16.9105 12 16.8 12H15.9999H14.1694H13.3514C13.2409 12 13.1514 11.9104 13.1514 11.8V10.9C13.1514 10.7895 13.2409 10.7 13.3514 10.7H13.9694C14.0799 10.7 14.1694 10.6105 14.1694 10.5V6.83485C14.1694 6.72439 14.0799 6.63485 13.9694 6.63485H13.3514Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.6669 12C10.6042 12 10.5451 11.9706 10.5073 11.9206L9.64079 10.7737C9.55667 10.6623 9.38726 10.6692 9.31242 10.7869L8.60044 11.9073C8.56374 11.9651 8.50007 12 8.43164 12H7.02527C6.86307 12 6.76833 11.8171 6.86193 11.6846L8.44676 9.44171C8.49706 9.37054 8.49547 9.27498 8.44283 9.20552L6.8307 7.07785C6.7309 6.94613 6.82485 6.75706 6.99011 6.75706H8.46291C8.52539 6.75706 8.58428 6.78627 8.62211 6.836L9.48905 7.97607C9.57321 8.08674 9.74182 8.0799 9.81673 7.96278L10.5289 6.8493C10.5657 6.79183 10.6292 6.75706 10.6974 6.75706H12.0973C12.2608 6.75706 12.3552 6.94263 12.2589 7.07481L10.6549 9.27717C10.6029 9.34851 10.6039 9.44548 10.6572 9.51579L12.2984 11.6792C12.3983 11.8109 12.3043 12 12.139 12H10.6669Z"
+          fill="currentColor"
+        />
+        <path
+          d="M0 8.47653C0 7.39912 0.226237 6.55034 0.678711 5.93021C1.13804 5.31007 1.87502 5 2.88966 5C3.9043 5 4.63786 5.31007 5.09033 5.93021C5.54966 6.55034 5.77933 7.39912 5.77933 8.47653C5.77933 9.56646 5.54966 10.4215 5.09033 11.0416C4.63786 11.6618 3.9043 11.9718 2.88966 11.9718C1.87502 11.9718 1.13804 11.6618 0.678711 11.0416C0.226237 10.4215 0 9.56646 0 8.47653ZM4.0517 8.47653C4.0517 7.84386 3.97629 7.3584 3.82546 7.02014C3.67464 6.67562 3.3627 6.50336 2.88966 6.50336C2.41662 6.50336 2.10469 6.67562 1.95387 7.02014C1.80304 7.3584 1.72763 7.84386 1.72763 8.47653C1.72763 8.90248 1.75505 9.2564 1.8099 9.53828C1.86474 9.81389 1.97443 10.0394 2.13897 10.2148C2.31036 10.3839 2.56059 10.4685 2.88966 10.4685C3.21874 10.4685 3.46554 10.3839 3.63008 10.2148C3.80147 10.0394 3.91459 9.81389 3.96943 9.53828C4.02428 9.2564 4.0517 8.90248 4.0517 8.47653Z"
+          fill="currentColor"
+        />
+      </>
+    ),
+    viewBox: "0 0 17 17",
+  },
   home: {
     svg: (
       <path
@@ -1203,7 +1230,6 @@ export const ICONS = {
     ),
     viewBox: viewboxDefault,
   },
-
   redo: {
     svg: (
       <path
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 424420acf..1ce78b751 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -85,7 +85,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
                 {
                   name: "0x1 Page",
                   slug: "/accounts/0x1",
-                  icon: "home" as IconKeys,
+                  icon: "hex" as IconKeys,
                 },
                 {
                   name: "Publish Module",

From 2bdc409127912c654f4c68048b2bdcd9516c3735 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 17 Oct 2023 11:57:46 +0700
Subject: [PATCH 202/368] fix: add min height to wasm page container to
 properly align footer

---
 CHANGELOG.md                             | 1 +
 src/lib/components/WasmPageContainer.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05cb500c4..4031cbc86 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -79,6 +79,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#574](https://github.com/alleslabs/celatone-frontend/pull/574) Add min height to wasm page container to properly align footer
 - [#569](https://github.com/alleslabs/celatone-frontend/pull/569) Add move config to dev shortcuts in homepage
 - [#559](https://github.com/alleslabs/celatone-frontend/pull/559) Restructure and refactor responsive tables
 - [#549](https://github.com/alleslabs/celatone-frontend/pull/549) Add move tx filer options
diff --git a/src/lib/components/WasmPageContainer.tsx b/src/lib/components/WasmPageContainer.tsx
index 7abf4316a..e2dcf3478 100644
--- a/src/lib/components/WasmPageContainer.tsx
+++ b/src/lib/components/WasmPageContainer.tsx
@@ -17,6 +17,7 @@ const WasmPageContainer = ({
     mx="auto"
     py={12}
     direction="column"
+    minH="inherit"
   >
     {children}
   </Flex>

From f91f1fbfff053dd97e3919383eb7c3ffb4e3a574 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 17 Oct 2023 14:50:31 +0700
Subject: [PATCH 203/368] feat: support contract from Sylvia

---
 CHANGELOG.md                                  |   1 +
 src/lib/hooks/useExecuteCmds.ts               |  13 +-
 src/lib/hooks/useQueryCmds.ts                 |  18 ++-
 .../components/CommandSection.tsx             | 116 ++++++++++--------
 4 files changed, 94 insertions(+), 54 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a09badc3..e4c487af7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -79,6 +79,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#575](https://github.com/alleslabs/celatone-frontend/pull/575) Support message suggestion for contract from Sylvia framework
 - [#564](https://github.com/alleslabs/celatone-frontend/pull/564) Update cosmjs version to latest and bump terra testnet gas price
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
diff --git a/src/lib/hooks/useExecuteCmds.ts b/src/lib/hooks/useExecuteCmds.ts
index 4ca91b76e..33633c742 100644
--- a/src/lib/hooks/useExecuteCmds.ts
+++ b/src/lib/hooks/useExecuteCmds.ts
@@ -26,10 +26,17 @@ export const useExecuteCmds = (contractAddress: ContractAddr) => {
     ],
     retry: false,
     onError: (e) => {
-      if (e.message.includes("contract: ")) {
-        setExecCmds([]);
+      // Check if Sylvia framework
+      const sylviaRegex =
+        /Messages supported by this contract: (.*?): execute wasm contract failed: invalid request/;
+      const contentMatch = e.message?.match(sylviaRegex);
+      const executeCmds: string[] = [];
+
+      if (contentMatch && contentMatch[1]) {
+        const content = contentMatch[1].split(",");
+        content.forEach((each) => executeCmds.push(each.trim()));
+        setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
       } else if (e.message.includes("Error parsing into type")) {
-        const executeCmds: string[] = [];
         Array.from(e.message?.matchAll(/`(.*?)`/g) || [])
           .slice(1)
           .forEach((match) => executeCmds.push(match[1]));
diff --git a/src/lib/hooks/useQueryCmds.ts b/src/lib/hooks/useQueryCmds.ts
index dc46d26a7..4e7425b8c 100644
--- a/src/lib/hooks/useQueryCmds.ts
+++ b/src/lib/hooks/useQueryCmds.ts
@@ -32,9 +32,21 @@ export const useQueryCmds = (contractAddress: ContractAddr) => {
       refetchOnWindowFocus: false,
       onError: (e: AxiosError<RpcQueryError>) => {
         const cmds: string[] = [];
-        Array.from(e.response?.data.message?.matchAll(/`(.*?)`/g) || [])
-          .slice(1)
-          .forEach((match) => cmds.push(match[1]));
+        const resMsg = e.response?.data.message;
+
+        // Check if Sylvia framework
+        const sylviaRegex =
+          /Messages supported by this contract: (.*?): query wasm contract failed: invalid request/;
+        const contentMatch = resMsg?.match(sylviaRegex);
+
+        if (contentMatch && contentMatch[1]) {
+          const content = contentMatch[1].split(",");
+          content.forEach((each) => cmds.push(each.trim()));
+        } else {
+          Array.from(resMsg?.matchAll(/`(.*?)`/g) || [])
+            .slice(1)
+            .forEach((match) => cmds.push(match[1]));
+        }
         setQueryCmds(cmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
       },
     }
diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index b9772c00d..5bd901be3 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -24,15 +24,70 @@ import { useSchemaStore } from "lib/providers/store";
 import type { ContractAddr } from "lib/types";
 import { encode, jsonPrettify } from "lib/utils";
 
+interface RenderCmdsProps {
+  isFetching: boolean;
+  cmds: [string, string][];
+  contractAddress: ContractAddr;
+  type: string;
+}
+
 interface CommandSectionProps {
   contractAddress: ContractAddr;
   codeHash: string;
   codeId: string;
 }
 
+const RenderCmds = ({
+  isFetching,
+  cmds,
+  contractAddress,
+  type,
+}: RenderCmdsProps) => {
+  const navigate = useInternalNavigate();
+
+  if (isFetching) {
+    return <Spinner size="md" mx={1} />;
+  }
+  if (cmds.length) {
+    return (
+      <ButtonGroup
+        width="90%"
+        flexWrap="wrap"
+        rowGap={2}
+        sx={{
+          "> button": {
+            marginInlineStart: "0 !important",
+            marginInlineEnd: "1",
+          },
+        }}
+      >
+        {cmds.sort().map(([cmd, msg]) => (
+          <ContractCmdButton
+            key={`${type}-cmd-${cmd}`}
+            cmd={cmd}
+            onClickCmd={() => {
+              navigate({
+                pathname: `/${type}`,
+                query: {
+                  contract: contractAddress,
+                  msg: encode(jsonPrettify(msg)),
+                },
+              });
+            }}
+          />
+        ))}
+      </ButtonGroup>
+    );
+  }
+  return (
+    <Text variant="body2" color="text.dark">
+      No messages available
+    </Text>
+  );
+};
+
 export const CommandSection = observer(
   ({ contractAddress, codeHash, codeId }: CommandSectionProps) => {
-    const navigate = useInternalNavigate();
     const { isOpen, onClose, onOpen } = useDisclosure();
 
     const { getSchemaByCodeHash } = useSchemaStore();
@@ -43,51 +98,6 @@ export const CommandSection = observer(
       useQueryCmds(contractAddress);
     const { isFetching: isExecuteCmdsFetching, execCmds } =
       useExecuteCmds(contractAddress);
-    const renderCmds = (
-      isFetching: boolean,
-      cmds: [string, string][],
-      type: string
-    ) => {
-      if (isFetching) {
-        return <Spinner size="md" mx={1} />;
-      }
-      if (cmds.length) {
-        return (
-          <ButtonGroup
-            width="90%"
-            flexWrap="wrap"
-            rowGap={2}
-            sx={{
-              "> button": {
-                marginInlineStart: "0 !important",
-                marginInlineEnd: "1",
-              },
-            }}
-          >
-            {cmds.sort().map(([cmd, msg]) => (
-              <ContractCmdButton
-                key={`${type}-cmd-${cmd}`}
-                cmd={cmd}
-                onClickCmd={() => {
-                  navigate({
-                    pathname: `/${type}`,
-                    query: {
-                      contract: contractAddress,
-                      msg: encode(jsonPrettify(msg)),
-                    },
-                  });
-                }}
-              />
-            ))}
-          </ButtonGroup>
-        );
-      }
-      return (
-        <Text variant="body2" color="text.dark">
-          No messages available
-        </Text>
-      );
-    };
 
     return (
       <Flex
@@ -151,7 +161,12 @@ export const CommandSection = observer(
             <Text color="text.dark" variant="body2" fontWeight={500} mb={2}>
               Query Shortcuts
             </Text>
-            {renderCmds(isQueryCmdsFetching, queryCmds, "query")}
+            <RenderCmds
+              isFetching={isQueryCmdsFetching}
+              cmds={queryCmds}
+              contractAddress={contractAddress}
+              type="query"
+            />
           </Flex>
           <Flex
             direction="column"
@@ -163,7 +178,12 @@ export const CommandSection = observer(
             <Text color="text.dark" variant="body2" fontWeight={500} mb={2}>
               Execute Shortcuts
             </Text>
-            {renderCmds(isExecuteCmdsFetching, execCmds, "execute")}
+            <RenderCmds
+              isFetching={isExecuteCmdsFetching}
+              cmds={execCmds}
+              contractAddress={contractAddress}
+              type="execute"
+            />
           </Flex>
         </Flex>
         <JsonSchemaModal

From 0f5de7c4c8b9f392d4cc204485b94e1e5317d4f2 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 17 Oct 2023 15:11:14 +0700
Subject: [PATCH 204/368] chore: refactor for readiness

---
 src/lib/hooks/useExecuteCmds.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/hooks/useExecuteCmds.ts b/src/lib/hooks/useExecuteCmds.ts
index 33633c742..2ce3ed65a 100644
--- a/src/lib/hooks/useExecuteCmds.ts
+++ b/src/lib/hooks/useExecuteCmds.ts
@@ -26,23 +26,26 @@ export const useExecuteCmds = (contractAddress: ContractAddr) => {
     ],
     retry: false,
     onError: (e) => {
+      const executeCmds: string[] = [];
+
       // Check if Sylvia framework
       const sylviaRegex =
         /Messages supported by this contract: (.*?): execute wasm contract failed: invalid request/;
       const contentMatch = e.message?.match(sylviaRegex);
-      const executeCmds: string[] = [];
 
       if (contentMatch && contentMatch[1]) {
         const content = contentMatch[1].split(",");
         content.forEach((each) => executeCmds.push(each.trim()));
-        setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
       } else if (e.message.includes("Error parsing into type")) {
         Array.from(e.message?.matchAll(/`(.*?)`/g) || [])
           .slice(1)
           .forEach((match) => executeCmds.push(match[1]));
-        setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
-      } else {
+      }
+
+      if (executeCmds.length === 0) {
         setExecCmds([["", "{}"]]);
+      } else {
+        setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
       }
     },
   });

From c1e428af0b8121436033a4e4a9ea7a41c139b0d8 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 17 Oct 2023 15:15:11 +0700
Subject: [PATCH 205/368] fix: change every to some for reset esimated fee
 logic

---
 src/lib/pages/publish-module/publish.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/publish-module/publish.tsx b/src/lib/pages/publish-module/publish.tsx
index 88c9865c7..fb99eeac6 100644
--- a/src/lib/pages/publish-module/publish.tsx
+++ b/src/lib/pages/publish-module/publish.tsx
@@ -164,7 +164,7 @@ export const PublishModule = ({
   // ------------------------------------------//
   useEffect(() => {
     if (
-      !modules.every(
+      modules.some(
         (field) =>
           !field.base64EncodedFile || field.publishStatus.status === "error"
       )

From 2810943dfa14b1e87c0c309e2b1da7ff5ecdaa10 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 17 Oct 2023 15:36:35 +0700
Subject: [PATCH 206/368] fix: remove memorization when getting data mobX

---
 src/lib/layout/navbar/index.tsx | 237 +++++++++++++++-----------------
 1 file changed, 113 insertions(+), 124 deletions(-)

diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index c9ad548a2..4a3dd4630 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
-import { useMemo, type Dispatch, type SetStateAction } from "react";
+import { type Dispatch, type SetStateAction } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
 import {
@@ -32,133 +32,122 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
 
   const { address } = useCurrentChain();
 
-  const navMenu: MenuInfo[] = useMemo(
-    () => [
-      {
-        category: "Your Account",
-        slug: "your-account",
-        submenu: [
+  const navMenu: MenuInfo[] = [
+    {
+      category: "Your Account",
+      slug: "your-account",
+      submenu: [
+        {
+          name: "Past Transactions",
+          slug: "/past-txs",
+          icon: "history" as IconKeys,
+        },
+        {
+          name: "Your Account Details",
+          slug: `/accounts/${address}`,
+          icon: "admin" as IconKeys,
+          isDisable: !address,
+          tooltipText:
+            "You need to connect wallet to view your account details.",
+          trackEvent: () => track(AmpEvent.USE_TO_YOUR_ACCOUNT),
+        },
+      ],
+    },
+    ...(publicProject.enabled
+      ? [
           {
-            name: "Past Transactions",
-            slug: "/past-txs",
-            icon: "history" as IconKeys,
+            category: "Public Projects",
+            slug: StorageKeys.ProjectSidebar,
+            submenu: [
+              ...getSavedPublicProjects().map((list) => ({
+                name: list.name,
+                slug: `/projects/${list.slug}`,
+                logo: list.logo as IconKeys,
+              })),
+              {
+                name: "View All Projects",
+                slug: "/projects",
+                icon: "public-project" as IconKeys,
+              },
+            ],
           },
+        ]
+      : []),
+    ...(wasm.enabled
+      ? [
           {
-            name: "Your Account Details",
-            slug: `/accounts/${address}`,
-            icon: "admin" as IconKeys,
-            isDisable: !address,
-            tooltipText:
-              "You need to connect wallet to view your account details.",
-            trackEvent: () => track(AmpEvent.USE_TO_YOUR_ACCOUNT),
+            category: "Developer Tools",
+            slug: StorageKeys.DevSidebar,
+            submenu: [
+              {
+                name: "Deploy Contract",
+                slug: "/deploy",
+                icon: "add-new" as IconKeys,
+              },
+              {
+                name: "Query",
+                slug: "/query",
+                icon: "query" as IconKeys,
+              },
+              {
+                name: "Execute",
+                slug: "/execute",
+                icon: "execute" as IconKeys,
+              },
+              {
+                name: "Migrate",
+                slug: "/migrate",
+                icon: "migrate" as IconKeys,
+              },
+              // {
+              //   name: "Recent Activities",
+              //   slug: "/",
+              //   icon: "list" as IconKeys,
+              // },
+            ],
+            subSection: [
+              {
+                category: "This Wallet",
+                submenu: [
+                  {
+                    name: "My Stored Codes",
+                    slug: "/stored-codes",
+                    icon: "code" as IconKeys,
+                  },
+                  {
+                    name: INSTANTIATED_LIST_NAME,
+                    slug: `/contract-lists/${formatSlugName(
+                      INSTANTIATED_LIST_NAME
+                    )}`,
+                    icon: getListIcon(INSTANTIATED_LIST_NAME),
+                  },
+                ],
+              },
+              {
+                category: "This Device",
+                submenu: [
+                  {
+                    name: "Saved Codes",
+                    slug: "/saved-codes",
+                    icon: "code" as IconKeys,
+                  },
+                  {
+                    name: SAVED_LIST_NAME,
+                    slug: `/contract-lists/${formatSlugName(SAVED_LIST_NAME)}`,
+                    icon: "contract-address" as IconKeys,
+                  },
+                  {
+                    name: "View All Contract List",
+                    slug: "/contract-lists",
+                    icon: "more" as IconKeys,
+                  },
+                ],
+              },
+            ],
           },
-        ],
-      },
-      ...(publicProject.enabled
-        ? [
-            {
-              category: "Public Projects",
-              slug: StorageKeys.ProjectSidebar,
-              submenu: [
-                ...getSavedPublicProjects().map((list) => ({
-                  name: list.name,
-                  slug: `/projects/${list.slug}`,
-                  logo: list.logo as IconKeys,
-                })),
-                {
-                  name: "View All Projects",
-                  slug: "/projects",
-                  icon: "public-project" as IconKeys,
-                },
-              ],
-            },
-          ]
-        : []),
-      ...(wasm.enabled
-        ? [
-            {
-              category: "Developer Tools",
-              slug: StorageKeys.DevSidebar,
-              submenu: [
-                {
-                  name: "Deploy Contract",
-                  slug: "/deploy",
-                  icon: "add-new" as IconKeys,
-                },
-                {
-                  name: "Query",
-                  slug: "/query",
-                  icon: "query" as IconKeys,
-                },
-                {
-                  name: "Execute",
-                  slug: "/execute",
-                  icon: "execute" as IconKeys,
-                },
-                {
-                  name: "Migrate",
-                  slug: "/migrate",
-                  icon: "migrate" as IconKeys,
-                },
-                // {
-                //   name: "Recent Activities",
-                //   slug: "/",
-                //   icon: "list" as IconKeys,
-                // },
-              ],
-              subSection: [
-                {
-                  category: "This Wallet",
-                  submenu: [
-                    {
-                      name: "My Stored Codes",
-                      slug: "/stored-codes",
-                      icon: "code" as IconKeys,
-                    },
-                    {
-                      name: INSTANTIATED_LIST_NAME,
-                      slug: `/contract-lists/${formatSlugName(
-                        INSTANTIATED_LIST_NAME
-                      )}`,
-                      icon: getListIcon(INSTANTIATED_LIST_NAME),
-                    },
-                  ],
-                },
-                {
-                  category: "This Device",
-                  submenu: [
-                    {
-                      name: "Saved Codes",
-                      slug: "/saved-codes",
-                      icon: "code" as IconKeys,
-                    },
-                    {
-                      name: SAVED_LIST_NAME,
-                      slug: `/contract-lists/${formatSlugName(
-                        SAVED_LIST_NAME
-                      )}`,
-                      icon: "contract-address" as IconKeys,
-                    },
-                    {
-                      name: "View All Contract List",
-                      slug: "/contract-lists",
-                      icon: "more" as IconKeys,
-                    },
-                  ],
-                },
-              ],
-            },
-          ]
-        : []),
-    ],
-    [
-      address,
-      getSavedPublicProjects,
-      publicProject.enabled,
-      track,
-      wasm.enabled,
-    ]
-  );
+        ]
+      : []),
+  ];
 
   return (
     <Flex direction="column" h="full" overflow="hidden" position="relative">

From 54044d9e9620afc85b9f0e2c033f0c9d8fb9fcb9 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 17 Oct 2023 17:14:01 +0700
Subject: [PATCH 207/368] fix: refactor

---
 .../components/module/FunctionDetailCard.tsx  |   1 -
 src/lib/components/module/StructCard.tsx      | 182 +++++++++---------
 .../module-details/components/ModuleTop.tsx   |   6 +-
 3 files changed, 91 insertions(+), 98 deletions(-)

diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index 1c8b9d6eb..2fa00ae31 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -168,7 +168,6 @@ export const FunctionDetailCard = ({
               <Flex alignItems="center" gap={{ base: 0, md: 4 }}>
                 {!isMobile && (
                   <>
-                    {" "}
                     <Flex alignItems="center" gap={2}>
                       <Tooltip
                         bg="primary.dark"
diff --git a/src/lib/components/module/StructCard.tsx b/src/lib/components/module/StructCard.tsx
index 903edb426..caf2933e0 100644
--- a/src/lib/components/module/StructCard.tsx
+++ b/src/lib/components/module/StructCard.tsx
@@ -25,114 +25,112 @@ const StyledIconButton = chakra(IconButton, {
     color: "gray.600",
   },
 });
-export const StructCard = ({ struct }: StructCardProps) => {
-  const structAbilities = ["copy", "drop", "key", "store"];
-  return (
-    <AccordionItem
-      bg="gray.800"
-      _hover={{ bg: "gray.700" }}
-      borderRadius={8}
-      px={4}
-      py={3}
-      transition="all .25s ease-in-out"
-      flexDirection="column"
-      gap={1}
-    >
-      {({ isExpanded }) => (
-        <>
-          <AccordionButton
-            flexDirection="column"
-            alignItems="flex-start"
-            _hover={{ bg: "transparent" }}
-            onClick={() => ({
-              action: !isExpanded ? "expand" : "collapse",
-              component: "unsupported_pool",
-              section: "pool-list-page",
-            })}
+
+const STRUCT_ABILITIES = ["copy", "drop", "key", "store"];
+
+export const StructCard = ({ struct }: StructCardProps) => (
+  <AccordionItem
+    bg="gray.800"
+    _hover={{ bg: "gray.700" }}
+    borderRadius={8}
+    px={4}
+    py={3}
+    transition="all .25s ease-in-out"
+    flexDirection="column"
+    gap={1}
+  >
+    {({ isExpanded }) => (
+      <>
+        <AccordionButton
+          flexDirection="column"
+          alignItems="flex-start"
+          _hover={{ bg: "transparent" }}
+          onClick={() => ({
+            action: !isExpanded ? "expand" : "collapse",
+            component: "unsupported_pool",
+            section: "pool-list-page",
+          })}
+        >
+          <Flex
+            justifyContent="space-between"
+            w="full"
+            alignItems={{ base: "flex-start", md: "center" }}
+            direction={{ base: "column", md: "row" }}
           >
+            <Text variant="body2">{struct.name}</Text>
             <Flex
+              align="center"
               justifyContent="space-between"
-              w="full"
-              alignItems={{ base: "flex-start", md: "center" }}
-              direction={{ base: "column", md: "row" }}
+              w={{ base: "full", md: "auto" }}
             >
-              <Text variant="body2">{struct.name}</Text>
-              <Flex
-                align="center"
-                justifyContent="space-between"
-                w={{ base: "full", md: "auto" }}
-              >
-                <Flex gap={1}>
-                  {structAbilities.map((item) => (
-                    <Tag
-                      key={item}
-                      size="sm"
-                      variant="gray"
-                      opacity={struct.abilities.includes(item) ? 1 : 0.3}
-                    >
-                      {item}
-                    </Tag>
-                  ))}
-                </Flex>
-                <StyledIconButton
-                  variant="none"
-                  aria-label="external"
-                  _hover={{ backgroundColor: "gray.700" }}
-                  icon={
-                    <CustomIcon
-                      name="chevron-down"
-                      transform={isExpanded ? "rotate(180deg)" : "rotate(0)"}
-                      transition="all .25s ease-in-out"
-                    />
-                  }
-                />
+              <Flex gap={1}>
+                {STRUCT_ABILITIES.map((item) => (
+                  <Tag
+                    key={item}
+                    size="sm"
+                    variant="gray"
+                    opacity={struct.abilities.includes(item) ? 1 : 0.3}
+                  >
+                    {item}
+                  </Tag>
+                ))}
               </Flex>
+              <StyledIconButton
+                variant="none"
+                aria-label="external"
+                _hover={{ backgroundColor: "gray.700" }}
+                icon={
+                  <CustomIcon
+                    name="chevron-down"
+                    transform={isExpanded ? "rotate(180deg)" : "rotate(0)"}
+                    transition="all .25s ease-in-out"
+                  />
+                }
+              />
             </Flex>
-          </AccordionButton>
-          <AccordionPanel bg="gray.900" borderRadius={8} mt={2} py={3} px={4}>
-            <Flex gap={3} direction="column">
-              <Flex gap={8}>
-                <LabelText
-                  isSmall
-                  label="is_native"
-                  labelWeight={700}
-                  labelColor="text.disabled"
-                >
-                  <Text variant="body3">{String(struct.is_native)}</Text>
-                </LabelText>
-                <LabelText
-                  isSmall
-                  label="abilities"
-                  labelWeight={700}
-                  labelColor="text.disabled"
-                >
-                  <Text variant="body3">
-                    {JSON.stringify(struct.abilities)}
-                  </Text>
-                </LabelText>
-              </Flex>
+          </Flex>
+        </AccordionButton>
+        <AccordionPanel bg="gray.900" borderRadius={8} mt={2} py={3} px={4}>
+          <Flex gap={3} direction="column">
+            <Flex gap={8}>
               <LabelText
                 isSmall
-                label="generic_type_params"
+                label="is_native"
                 labelWeight={700}
                 labelColor="text.disabled"
               >
-                <Text variant="body3">
-                  {JSON.stringify(struct.generic_type_params)}
-                </Text>
+                <Text variant="body3">{String(struct.is_native)}</Text>
               </LabelText>
               <LabelText
                 isSmall
-                label="fields"
+                label="abilities"
                 labelWeight={700}
                 labelColor="text.disabled"
               >
-                <Text variant="body3">{JSON.stringify(struct.fields)}</Text>
+                <Text variant="body3">{JSON.stringify(struct.abilities)}</Text>
               </LabelText>
             </Flex>
-          </AccordionPanel>
-        </>
-      )}
-    </AccordionItem>
-  );
-};
+            <LabelText
+              isSmall
+              label="generic_type_params"
+              labelWeight={700}
+              labelColor="text.disabled"
+            >
+              <Text variant="body3">
+                {JSON.stringify(struct.generic_type_params)}
+              </Text>
+            </LabelText>
+            <LabelText
+              isSmall
+              label="fields"
+              labelWeight={700}
+              labelColor="text.disabled"
+            >
+              <Text variant="body3">{JSON.stringify(struct.fields)}</Text>
+            </LabelText>
+          </Flex>
+        </AccordionPanel>
+      </>
+    )}
+  </AccordionItem>
+);
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index a6b280c06..ab381379d 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -6,7 +6,6 @@ import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyButton } from "lib/components/copy";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
 import { Tooltip } from "lib/components/Tooltip";
 import type { ModuleVerificationInternal } from "lib/services/move/module";
 import type { IndexedModule } from "lib/services/move/moduleService";
@@ -26,13 +25,11 @@ const baseTextStyle: TextProps = {
 export const ModuleTop = ({ moduleData, verificationData }: ModuleTopProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
-  if (!moduleData) return <Loading />;
 
   return (
     <Flex direction="column">
       <Breadcrumb
         items={[
-          // TODO recheck how to get account
           {
             text: moduleData.parsedAbi.address,
             href: `/accounts/${moduleData.parsedAbi.address}`,
@@ -92,8 +89,7 @@ export const ModuleTop = ({ moduleData, verificationData }: ModuleTopProps) => {
               Module Path:
             </Text>
             <Text {...baseTextStyle}>
-              {moduleData.parsedAbi.address}::
-              {moduleData.parsedAbi.name}
+              {moduleData.parsedAbi.address}::{moduleData.parsedAbi.name}
             </Text>
           </Flex>
           <Flex

From e53212b7319045c0dcba0b80c254dd84d6edd924 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 17 Oct 2023 17:28:27 +0700
Subject: [PATCH 208/368] fix: remove memorization on navbar mobile

---
 src/lib/layout/mobile/NavDrawer.tsx | 140 +++++++++++++---------------
 1 file changed, 65 insertions(+), 75 deletions(-)

diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index 97bd1f611..d5b92e47a 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -16,7 +16,6 @@ import {
   MenuItem,
   IconButton,
 } from "@chakra-ui/react";
-import { useMemo } from "react";
 
 import type { MenuInfo } from "../navbar/type";
 import { CHAIN_CONFIGS } from "config/chain";
@@ -45,81 +44,72 @@ export const NavDrawer = () => {
   const move = useMoveConfig({ shouldRedirect: false });
   const publicProject = usePublicProjectConfig({ shouldRedirect: false });
 
-  const mobileMenu = useMemo(() => {
-    const menu: MenuInfo[] = [
-      {
-        category: "Overview",
-        slug: "overview",
-        submenu: [
-          { name: "Overview", slug: "/", icon: "home" as IconKeys },
-          {
-            name: "Transactions",
-            slug: "/txs",
-            icon: "file" as IconKeys,
-          },
-          {
-            name: "Blocks",
-            slug: "/blocks",
-            icon: "block" as IconKeys,
-          },
-          ...(wasm.enabled
-            ? [
-                {
-                  name: "Recent Codes",
-                  slug: "/codes",
-                  icon: "code" as IconKeys,
-                },
-                {
-                  name: "Recent Contracts",
-                  slug: "/contracts",
-                  icon: "contract-address" as IconKeys,
-                },
-                {
-                  name: "Query",
-                  slug: "/query",
-                  icon: "query" as IconKeys,
-                },
-              ]
-            : []),
-          ...(move.enabled
-            ? [
-                {
-                  name: "0x1 Page",
-                  slug: "/account/0x1",
-                  icon: "home" as IconKeys,
-                },
-              ]
-            : []),
-        ],
-      },
-    ];
+  const mobileMenu: MenuInfo[] = [
+    {
+      category: "Overview",
+      slug: "overview",
+      submenu: [
+        { name: "Overview", slug: "/", icon: "home" },
+        {
+          name: "Transactions",
+          slug: "/txs",
+          icon: "file",
+        },
+        {
+          name: "Blocks",
+          slug: "/blocks",
+          icon: "block",
+        },
+        ...(wasm.enabled
+          ? [
+              {
+                name: "Recent Codes",
+                slug: "/codes",
+                icon: "code" as IconKeys,
+              },
+              {
+                name: "Recent Contracts",
+                slug: "/contracts",
+                icon: "contract-address" as IconKeys,
+              },
+              {
+                name: "Query",
+                slug: "/query",
+                icon: "query" as IconKeys,
+              },
+            ]
+          : []),
+        ...(move.enabled
+          ? [
+              {
+                name: "0x1 Page",
+                slug: "/account/0x1",
+                icon: "home" as IconKeys,
+              },
+            ]
+          : []),
+      ],
+    },
+  ];
 
-    if (publicProject.enabled) {
-      menu.push({
-        category: "Public Projects",
-        slug: "public-projects",
-        submenu: [
-          ...getSavedPublicProjects().map((list) => ({
-            name: list.name,
-            slug: `/projects/${list.slug}`,
-            logo: list.logo,
-          })),
-          {
-            name: "View All Projects",
-            slug: "/projects",
-            icon: "public-project" as IconKeys,
-          },
-        ],
-      });
-    }
-
-    return menu;
-  }, [
-    getSavedPublicProjects,
-    publicProject.enabled,
-    wasm.enabled,
-    move.enabled,
-  ]);
+  if (publicProject.enabled) {
+    mobileMenu.push({
+      category: "Public Projects",
+      slug: "public-projects",
+      submenu: [
+        ...getSavedPublicProjects().map((list) => ({
+          name: list.name,
+          slug: `/projects/${list.slug}`,
+          logo: list.logo,
+        })),
+        {
+          name: "View All Projects",
+          slug: "/projects",
+          icon: "public-project" as IconKeys,
+        },
+      ],
+    });
+  }
 
   return (
     <>

From 9e44981dff8857bfcfdb637bc117413e8e3dee35 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 18 Oct 2023 11:10:01 +0700
Subject: [PATCH 209/368] fix(components): fix minor styling

---
 src/lib/components/copy/CopyButton.tsx              |  9 +++------
 src/lib/components/module/FunctionDetailCard.tsx    |  7 ++++---
 src/lib/components/resource/ResourceDetailCard.tsx  |  4 +++-
 .../components/resources/ResourceSection.tsx        | 13 ++++++++++---
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index 81edaa4fe..3f6de91f3 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -44,15 +44,12 @@ export const CopyButton = ({
           onClick={() =>
             track(AmpEvent.USE_COPY_BUTTON, { section: amptrackSection })
           }
-          leftIcon={
-            hasIcon ? (
-              // TODO config to style later
-              <CustomIcon name="copy" boxSize={size === "xs" ? 3 : 4} />
-            ) : undefined
-          }
           {...buttonProps}
           borderRadius={size === "xs" ? 6 : 8}
         >
+          {hasIcon && (
+            <CustomIcon name="copy" boxSize={size === "xs" ? 3 : 4} />
+          )}
           {buttonText}
         </Button>
       }
diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index 2fa00ae31..67f0072d4 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -218,7 +218,7 @@ export const FunctionDetailCard = ({
                       isDisabled={disabled}
                       borderColor={getButtonStyle().color}
                       size="sm"
-                      onClick={() =>
+                      onClick={(e) => {
                         navigate({
                           pathname: "/interact",
                           query: {
@@ -227,8 +227,9 @@ export const FunctionDetailCard = ({
                             functionType: isView ? "view" : "execute",
                             functionName: exposedFn.name,
                           },
-                        })
-                      }
+                        });
+                        e.stopPropagation();
+                      }}
                       leftIcon={
                         <CustomIcon
                           mx={0}
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 62677f639..4c6cba888 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -72,8 +72,10 @@ export const ResourceDetailCard = ({
           <Flex alignItems="center" gap={2} minW={{ base: 8, md: 36 }}>
             <CopyButton
               value={resourceData.moveResource}
-              variant="outline-primary"
+              variant="outline-gray"
               size="xs"
+              gap={1}
+              px={2}
               buttonText="Copy JSON"
               display={{ base: "none", md: "flex" }}
             />
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 52364185f..4a74e1261 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -1,6 +1,7 @@
 import {
   Accordion,
   AccordionButton,
+  AccordionIcon,
   AccordionItem,
   AccordionPanel,
   Badge,
@@ -139,7 +140,7 @@ export const ResourceSection = ({
                     <Text variant="body1" fontWeight={600}>
                       {truncate(item.owner)}
                     </Text>
-                    <CustomIcon name="chevron-down" color="gray.600" />
+                    <AccordionIcon color="gray.600" />
                   </Flex>
                 </AccordionButton>
                 <AccordionPanel>
@@ -163,9 +164,14 @@ export const ResourceSection = ({
           </Accordion>
         </Flex>
         <Flex direction="column" w="full">
-          <Flex justifyContent="space-between" alignItems="center" pb={6}>
+          <Flex
+            justifyContent="space-between"
+            alignItems="center"
+            pb={6}
+            gap={12}
+          >
             <Flex alignItems="center">
-              <Heading as="h6" variant="h6">
+              <Heading as="h6" variant="h6" wordBreak="break-word">
                 {selectedGroup.owner}::{selectedResources.group}
               </Heading>
               <Badge variant="primary" ml={2}>
@@ -174,6 +180,7 @@ export const ResourceSection = ({
             </Flex>
             <Button
               variant="outline-primary"
+              minW={28}
               size="sm"
               rightIcon={
                 <CustomIcon

From b58281fa3140a6275e83fd6e439e78ac6ee43797 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 18 Oct 2023 16:36:31 +0700
Subject: [PATCH 210/368] fix(components): revise resource structure

---
 src/lib/layout/SubHeader.tsx                  | 20 ++----
 src/lib/layout/index.tsx                      |  6 +-
 .../components/resources/ResourceLists.tsx    | 53 ++++++--------
 .../components/resources/ResourceSection.tsx  | 60 ++++++----------
 .../components/resources/types.ts             | 13 ----
 src/lib/pages/account-details/index.tsx       |  6 +-
 src/lib/services/move/resourceService.ts      | 72 +++++++++++++++++--
 src/lib/types/move/resource.ts                | 12 ++++
 8 files changed, 136 insertions(+), 106 deletions(-)
 delete mode 100644 src/lib/pages/account-details/components/resources/types.ts

diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index d7554c9d7..e9ae36df4 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -2,12 +2,7 @@ import { Flex, Text } from "@chakra-ui/react";
 import { useCallback } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
-import {
-  usePoolConfig,
-  useGovConfig,
-  useWasmConfig,
-  useMoveConfig,
-} from "lib/app-provider";
+import { usePoolConfig, useGovConfig, useWasmConfig } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
@@ -21,7 +16,6 @@ interface SubHeaderMenuInfo {
 
 const SubHeader = () => {
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
-  const moveConfig = useMoveConfig({ shouldRedirect: false });
   const poolConfig = usePoolConfig({ shouldRedirect: false });
   const govConfig = useGovConfig({ shouldRedirect: false });
   const { track } = useTrack();
@@ -32,12 +26,12 @@ const SubHeader = () => {
     { name: "Blocks", slug: "/blocks", icon: "block" },
   ];
 
-  if (moveConfig.enabled)
-    subHeaderMenu.push({
-      name: "Modules",
-      slug: "/modules",
-      icon: "contract-address",
-    });
+  // if (moveConfig.enabled)
+  //   subHeaderMenu.push({
+  //     name: "Modules",
+  //     slug: "/modules",
+  //     icon: "contract-address",
+  //   });
 
   if (wasmConfig.enabled)
     subHeaderMenu.push(
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 14a58b36c..5066eb63a 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -42,8 +42,10 @@ const Layout = ({ children }: LayoutProps) => {
   }, [isExpand, isMobile]);
 
   useEffect(() => {
-    scrollToTop();
-  }, [router.asPath]);
+    if (!(router.query.tab === "resources")) {
+      scrollToTop();
+    }
+  }, [router.asPath, router.query.tab]);
 
   return (
     <Grid
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index 8f6ed00a8..0702a9bd6 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -9,10 +9,8 @@ import { ResourceCard } from "lib/components/resource";
 import { EmptyState } from "lib/components/state";
 import { TableTitle, ViewMore } from "lib/components/table";
 import { useAccountResources } from "lib/services/move/resourceService";
-import type { HumanAddr } from "lib/types";
-import { truncate } from "lib/utils";
-
-import type { ResourceGroup } from "./types";
+import type { HumanAddr, ResourceGroup } from "lib/types";
+import { scrollToTop } from "lib/utils";
 
 interface ResourcesListsProps {
   address: HumanAddr;
@@ -22,7 +20,7 @@ interface ResourcesListsProps {
 export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
-  const { data: resources, isLoading } = useAccountResources({
+  const { data: resourcesData, isLoading } = useAccountResources({
     address,
   });
 
@@ -44,31 +42,11 @@ export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
     [address, navigate]
   );
   if (isLoading) return <Loading />;
-  if (!resources) return <ErrorFetching />;
-  if (resources.length === 0)
+  if (!resourcesData) return <ErrorFetching />;
+  if (resourcesData.totalCount === 0)
     return <EmptyState imageVariant="empty" message="No resources found." />;
 
-  const restructuredResources = resources.reduce<Record<string, ResourceGroup>>(
-    (acc, resource) => {
-      const [accountName, groupName] = resource.structTag.split("::");
-      const groupResources = acc[groupName] ?? {};
-      const items = groupResources?.items ?? [];
-      items.push(resource);
-
-      return {
-        ...acc,
-        [groupName]: {
-          displayName: `${truncate(accountName)}::${groupName}`,
-          account: accountName,
-          group: groupName,
-          items,
-        },
-      };
-    },
-    {} as Record<string, ResourceGroup>
-  );
-  const groupedResources = Object.values(restructuredResources);
-
+  const resources = resourcesData.groupedByName;
   const isMobileOverview = isMobile && !!onViewMore;
   return (
     <Flex
@@ -86,7 +64,11 @@ export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
           p={4}
           onClick={onViewMore}
         >
-          <TableTitle title="Resources" count={resources.length} mb={0} />
+          <TableTitle
+            title="Resources"
+            count={resourcesData.totalCount}
+            mb={0}
+          />
           <CustomIcon name="chevron-right" color="gray.600" />
         </Flex>
       ) : (
@@ -94,10 +76,10 @@ export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
           <TableTitle
             helperText="Resources stored in this account"
             title="Resources"
-            count={resources.length}
+            count={resourcesData.totalCount}
           />
           <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
-            {groupedResources.slice(0, 8).map((item) => (
+            {resources.slice(0, 8).map((item) => (
               <ResourceCard
                 key={item.displayName}
                 name={item.displayName}
@@ -106,8 +88,13 @@ export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
               />
             ))}
           </SimpleGrid>
-          {onViewMore && groupedResources.length > 8 && (
-            <ViewMore onClick={onViewMore} />
+          {onViewMore && resources.length > 8 && (
+            <ViewMore
+              onClick={() => {
+                onViewMore();
+                scrollToTop();
+              }}
+            />
           )}
         </>
       )}
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 4a74e1261..4c287eecb 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -21,14 +21,17 @@ import { ResourceCard } from "lib/components/resource/ResourceCard";
 import { ResourceDetailCard } from "lib/components/resource/ResourceDetailCard";
 import { EmptyState } from "lib/components/state";
 import { TableTitle } from "lib/components/table";
-import type { HumanAddr, InternalResource, Option } from "lib/types";
+import type {
+  HumanAddr,
+  ResourceGroupByAccount,
+  ResourceGroup,
+  Option,
+} from "lib/types";
 import { getFirstQueryParam, truncate } from "lib/utils";
 
-import type { ResourceGroup, ResourceGroupByAccount } from "./types";
-
 interface ResourceSectionProps {
   address: HumanAddr;
-  resources: Option<InternalResource[]>;
+  resources: Option<ResourceGroupByAccount[]>;
   isLoading: boolean;
 }
 
@@ -59,6 +62,7 @@ export const ResourceSection = ({
           account,
           selected: resource,
         },
+        replace: true,
         options: {
           shallow: true,
         },
@@ -67,48 +71,28 @@ export const ResourceSection = ({
     [selectedNameParam, selectedAccountParam, address, navigate]
   );
 
-  useEffect(() => setExpandedIndexes([0]), [selectedNameParam]);
+  useEffect(() => {
+    const resourcesLength = resources?.find(
+      (resource) => resource.owner === selectedAccountParam
+    )?.resources?.[selectedNameParam].items.length;
+
+    if (resourcesLength === 1) {
+      setExpandedIndexes([0]);
+    } else {
+      setExpandedIndexes([]);
+    }
+  }, [resources, selectedNameParam, selectedAccountParam]);
 
   if (isLoading) return <Loading />;
   if (!resources) return <ErrorFetching />;
   if (resources.length === 0)
     return <EmptyState imageVariant="empty" message="No resources found." />;
 
-  const sortedResource = resources.reduce<
-    Record<string, ResourceGroupByAccount>
-  >((acc, resource) => {
-    const [ownerName, groupName] = resource.structTag.split("::");
-
-    const ownerResources = acc[ownerName]?.resources ?? {};
-    const groupResources = ownerResources[groupName] ?? {};
-    const items = groupResources?.items ?? [];
-
-    items.push(resource);
-
-    return {
-      ...acc,
-      [ownerName]: {
-        owner: ownerName,
-        resources: {
-          ...ownerResources,
-          [groupName]: {
-            group: groupName,
-            account: ownerName,
-            displayName: `${truncate(ownerName)}::${groupName}`,
-            items,
-          },
-        },
-      },
-    };
-  }, {} as Record<string, ResourceGroupByAccount>);
-
-  const groupedResources = Object.values(sortedResource);
-
   const selectedIndex = !selectedAccountParam
     ? 0
-    : groupedResources.findIndex((item) => item.owner === selectedAccountParam);
+    : resources.findIndex((item) => item.owner === selectedAccountParam);
 
-  const selectedGroup = groupedResources[selectedIndex];
+  const selectedGroup = resources[selectedIndex];
   const selectedGroupArray = Object.values(selectedGroup.resources);
   const selectedResources =
     selectedGroupArray.find((item) => item.group === selectedNameParam) ??
@@ -133,7 +117,7 @@ export const ResourceSection = ({
       >
         <Flex minW={{ base: "full", md: 80 }}>
           <Accordion allowMultiple defaultIndex={[selectedIndex]} width="full">
-            {groupedResources.map((item) => (
+            {resources.map((item) => (
               <AccordionItem mb={4} key={item.owner}>
                 <AccordionButton>
                   <Flex p={4} justifyContent="space-between" w="full">
diff --git a/src/lib/pages/account-details/components/resources/types.ts b/src/lib/pages/account-details/components/resources/types.ts
deleted file mode 100644
index 84a5a8aae..000000000
--- a/src/lib/pages/account-details/components/resources/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { InternalResource } from "lib/types";
-
-export interface ResourceGroup {
-  group: string;
-  account: string;
-  displayName: string;
-  items: InternalResource[];
-}
-
-export interface ResourceGroupByAccount {
-  owner: string;
-  resources: Record<string, ResourceGroup>;
-}
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 6b8c39333..3b16820b5 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -265,8 +265,8 @@ const AccountDetailsBody = ({
             Admins
           </CustomTab>
           <CustomTab
-            count={resourcesData?.length}
-            isDisabled={!resourcesData?.length}
+            count={resourcesData?.totalCount}
+            isDisabled={!resourcesData?.totalCount}
             onClick={handleTabChange(TabIndex.Resources)}
             hidden={!move.enabled}
           >
@@ -395,7 +395,7 @@ const AccountDetailsBody = ({
           <TabPanel p={0}>
             <ResourceSection
               address={accountAddress}
-              resources={resourcesData}
+              resources={resourcesData?.groupedByOwner}
               isLoading={isResourceLoading}
             />
           </TabPanel>
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index ee213788b..24931756a 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -3,18 +3,82 @@ import { useQuery } from "@tanstack/react-query";
 
 import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
 import type { MoveAccountAddr } from "lib/types";
-import type { InternalResource } from "lib/types/move/resource";
+import type {
+  ResourceGroup,
+  ResourceGroupByAccount,
+} from "lib/types/move/resource";
+import { truncate } from "lib/utils";
 
 import { getAccountResources } from "./resource";
 
+export interface AccountResourcesReturn {
+  groupedByOwner: ResourceGroupByAccount[];
+  groupedByName: ResourceGroup[];
+  totalCount: number;
+}
+
 export const useAccountResources = ({
   address,
 }: {
   address: MoveAccountAddr;
-}): UseQueryResult<InternalResource[]> => {
+}): UseQueryResult<AccountResourcesReturn> => {
   const baseEndpoint = useBaseApiRoute("rest");
-  const queryFn: QueryFunction<InternalResource[]> = () =>
-    getAccountResources(baseEndpoint, address);
+  const queryFn: QueryFunction<AccountResourcesReturn> = () =>
+    getAccountResources(baseEndpoint, address).then((resources) => {
+      const groupedByOwner = resources.reduce<
+        Record<string, ResourceGroupByAccount>
+      >((acc, resource) => {
+        const [ownerName, groupName] = resource.structTag.split("::");
+
+        const ownerResources = acc[ownerName]?.resources ?? {};
+        const groupResources = ownerResources[groupName] ?? {};
+        const items = groupResources?.items ?? [];
+
+        items.push(resource);
+
+        return {
+          ...acc,
+          [ownerName]: {
+            owner: ownerName,
+            resources: {
+              ...ownerResources,
+              [groupName]: {
+                group: groupName,
+                account: ownerName,
+                displayName: `${truncate(ownerName)}::${groupName}`,
+                items,
+              },
+            },
+          },
+        };
+      }, {} as Record<string, ResourceGroupByAccount>);
+
+      const groupedByName = resources.reduce<Record<string, ResourceGroup>>(
+        (acc, resource) => {
+          const [accountName, groupName] = resource.structTag.split("::");
+          const groupResources = acc[groupName] ?? {};
+          const items = groupResources?.items ?? [];
+          items.push(resource);
+
+          return {
+            ...acc,
+            [groupName]: {
+              displayName: `${truncate(accountName)}::${groupName}`,
+              account: accountName,
+              group: groupName,
+              items,
+            },
+          };
+        },
+        {} as Record<string, ResourceGroup>
+      );
+
+      return {
+        totalCount: resources.length,
+        groupedByOwner: Object.values(groupedByOwner),
+        groupedByName: Object.values(groupedByName),
+      };
+    });
   return useQuery(
     [CELATONE_QUERY_KEYS.ACCOUNT_RESOURCES, baseEndpoint, address],
     queryFn,
diff --git a/src/lib/types/move/resource.ts b/src/lib/types/move/resource.ts
index c41e38ece..98d0cb2bb 100644
--- a/src/lib/types/move/resource.ts
+++ b/src/lib/types/move/resource.ts
@@ -14,3 +14,15 @@ export interface ResponseResources {
 }
 
 export type InternalResource = SnakeToCamelCaseNested<ResponseResource>;
+
+export interface ResourceGroup {
+  group: string;
+  account: string;
+  displayName: string;
+  items: InternalResource[];
+}
+
+export interface ResourceGroupByAccount {
+  owner: string;
+  resources: Record<string, ResourceGroup>;
+}

From 0ae9fb335c9cb41fd0d03f393704f7412569ffd9 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 18 Oct 2023 18:01:54 +0700
Subject: [PATCH 211/368] fix: comments

---
 .../module-details/components/ModuleTop.tsx   |  1 -
 .../components/tables/txs/index.tsx           | 36 -------------------
 src/lib/services/move/moduleService.ts        |  6 +---
 src/lib/services/txService.ts                 | 10 +-----
 4 files changed, 2 insertions(+), 51 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index b21ec2ba7..0bc18def0 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -8,7 +8,6 @@ import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { Tooltip } from "lib/components/Tooltip";
-import type {} from "lib/services/move/module";
 import type { IndexedModule } from "lib/services/move/moduleService";
 
 interface ModuleTopProps {
diff --git a/src/lib/pages/module-details/components/tables/txs/index.tsx b/src/lib/pages/module-details/components/tables/txs/index.tsx
index 9e90b5064..0b05b0351 100644
--- a/src/lib/pages/module-details/components/tables/txs/index.tsx
+++ b/src/lib/pages/module-details/components/tables/txs/index.tsx
@@ -1,4 +1,3 @@
-// import { TransactionCard } from "lib/components/card/TransactionCard";
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
@@ -100,41 +99,6 @@ export const ModuleTxsTable = ({
       </>
     );
 
-  // TODO: Handle Mobile
-  // if (isMobile)
-  //   return (
-  //     <>
-  //       {moduleTxs ? (
-  //         <Flex direction="column" gap={4} w="full" mt={4}>
-  //           {moduleTxs?.map((transaction) => (
-  //             <TransactionCard
-  //               transaction={transaction}
-  //               key={transaction.hash}
-  //               showRelations={false}
-  //             />
-  //           ))}
-  //           {!onViewMore && txCount && txCount > 10 && (
-  //             <Pagination
-  //               currentPage={currentPage}
-  //               pagesQuantity={pagesQuantity}
-  //               offset={offset}
-  //               totalData={txCount}
-  //               pageSize={pageSize}
-  //               onPageChange={onPageChange}
-  //               onPageSizeChange={onPageSizeChange}
-  //               scrollComponentId={scrollComponentId}
-  //             />
-  //           )}
-  //         </Flex>
-  //       ) : (
-  //         <EmptyState
-  //           withBorder
-  //           imageVariant="empty"
-  //           message="There are no transactions in this network."
-  //         />
-  //       )}
-  //     </>
-  //   );
   return (
     <>
       <TransactionsTable
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index a20fa50bb..9f0c0a5dd 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -227,10 +227,6 @@ export const useDecodeModule = ({
 export const useModuleId = (moduleName: string, vmAddress: HexAddr) => {
   const { indexerGraphClient } = useCelatoneApp();
   const queryFn = async () => {
-    if (!moduleName || !vmAddress)
-      throw new Error(
-        "Error fetching module id: failed to retrieve module name or vm address."
-      );
     return indexerGraphClient
       .request(getModuleIdByNameAndVmAddressQueryDocument, {
         name: moduleName,
@@ -240,7 +236,7 @@ export const useModuleId = (moduleName: string, vmAddress: HexAddr) => {
   };
 
   return useQuery(
-    [CELATONE_QUERY_KEYS.ACCOUNT_ID, indexerGraphClient, moduleName, vmAddress],
+    [CELATONE_QUERY_KEYS.MODULE_ID, indexerGraphClient, moduleName, vmAddress],
     queryFn,
     {
       enabled: Boolean(moduleName && vmAddress),
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index aa0867171..66307153c 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -469,15 +469,7 @@ export const useModuleTxsByPagination = ({
           height: transaction.block.height,
           created: parseDate(transaction.block.timestamp),
           success: transaction.transaction.success,
-          actionMsgType: getActionMsgType([
-            transaction.transaction.is_execute,
-            transaction.transaction.is_instantiate,
-            transaction.transaction.is_send,
-            transaction.transaction.is_store_code,
-            transaction.transaction.is_migrate,
-            transaction.transaction.is_update_admin,
-            transaction.transaction.is_clear_admin,
-          ]),
+          actionMsgType: getActionMsgType([]),
           furtherAction: getMsgFurtherAction(
             transaction.transaction.messages.length,
             {

From 657bb9257ab38d353665c6c1fc30ce3d6c4ed0ca Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 19 Oct 2023 11:25:20 +0700
Subject: [PATCH 212/368] feat: verified source code

---
 package.json                                  |   2 +
 .../components/module/ModuleSourceCode.tsx    |  38 ++-
 src/lib/components/module/moveSyntax.ts       | 267 ++++++++++++++++++
 src/lib/services/move/module.ts               |   2 +-
 yarn.lock                                     |  24 ++
 5 files changed, 311 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/module/moveSyntax.ts

diff --git a/package.json b/package.json
index 33279688e..8663b9cff 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@graphql-codegen/client-preset": "^1.1.4",
     "@initia/initia.js": "0.1.8",
     "@initia/initia.proto": "0.1.11",
+    "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
     "@rjsf/utils": "v5.0.0-beta.10",
@@ -74,6 +75,7 @@
     "mobx": "^6.6.2",
     "mobx-persist-store": "^1.1.2",
     "mobx-react-lite": "^3.4.0",
+    "monaco-editor": "^0.44.0",
     "next": "^13.0.0",
     "next-seo": "^5.8.0",
     "node-gzip": "^1.1.2",
diff --git a/src/lib/components/module/ModuleSourceCode.tsx b/src/lib/components/module/ModuleSourceCode.tsx
index 718d1cf09..f15f77268 100644
--- a/src/lib/components/module/ModuleSourceCode.tsx
+++ b/src/lib/components/module/ModuleSourceCode.tsx
@@ -8,15 +8,21 @@ import {
   Flex,
   Text,
 } from "@chakra-ui/react";
-import dynamic from "next/dynamic";
+import type { Monaco } from "@monaco-editor/react";
+import MonacoEditor from "@monaco-editor/react";
 
 import { CopyButton } from "../copy";
-import { CURR_THEME } from "env";
 import type { Option } from "lib/types";
 
-const AceEditor = dynamic(() => import("react-ace"), {
-  ssr: false,
-});
+import { moveLanguageConfig, moveTokenProvider } from "./moveSyntax";
+
+const loadMoveSyntax = (monaco: Monaco) => {
+  monaco.languages.register({ id: "move" });
+  monaco.languages.onLanguage("move", () => {
+    monaco.languages.setMonarchTokensProvider("move", moveTokenProvider);
+    monaco.languages.setLanguageConfiguration("move", moveLanguageConfig);
+  });
+};
 
 interface ModuleSourceCodeProps {
   sourceCode: Option<string>;
@@ -54,23 +60,13 @@ export const ModuleSourceCode = ({ sourceCode }: ModuleSourceCodeProps) => {
             borderColor="gray.700"
             borderRadius="8px"
           >
-            <AceEditor
-              readOnly
-              mode="rust"
-              theme={CURR_THEME.jsonTheme}
-              fontSize="14px"
-              style={{
-                color: CURR_THEME.colors.text.main,
-                width: "100%",
-                background: "transparent",
-              }}
+            <MonacoEditor
+              height={400}
+              language="move"
+              theme="vs-dark"
+              beforeMount={loadMoveSyntax}
               value={sourceCode}
-              setOptions={{
-                showGutter: false,
-                useWorker: false,
-                printMargin: false,
-                wrap: true,
-              }}
+              options={{ readOnly: true, scrollBeyondLastLine: false }}
             />
           </Box>
         </AccordionPanel>
diff --git a/src/lib/components/module/moveSyntax.ts b/src/lib/components/module/moveSyntax.ts
new file mode 100644
index 000000000..c1b6a0c80
--- /dev/null
+++ b/src/lib/components/module/moveSyntax.ts
@@ -0,0 +1,267 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable no-useless-escape */
+import type { languages } from "monaco-editor";
+
+export const moveLanguageConfig: languages.LanguageConfiguration = {
+  comments: {
+    lineComment: "//",
+    blockComment: ["/*", "*/"],
+  },
+  brackets: [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"],
+  ],
+  autoClosingPairs: [
+    { open: "[", close: "]" },
+    { open: "{", close: "}" },
+    { open: "(", close: ")" },
+    { open: '"', close: '"', notIn: ["string"] },
+  ],
+  surroundingPairs: [
+    { open: "{", close: "}" },
+    { open: "[", close: "]" },
+    { open: "(", close: ")" },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+  folding: {
+    markers: {
+      start: /^\s*#pragma\s+region\b/,
+      end: /^\s*#pragma\s+endregion\b/,
+    },
+  },
+};
+export const moveTokenProvider: languages.IMonarchLanguage = {
+  // Set defaultToken to invalid to see what you do not tokenize yet
+  // defaultToken: 'invalid',
+  keywords: [
+    "as",
+    "break",
+    "const",
+    "crate",
+    "enum",
+    "extern",
+    "false",
+    "fun",
+    "script",
+    "in",
+    "let",
+    "module",
+    "move",
+    "mut",
+    "pub",
+    "ref",
+    "return",
+    "self",
+    "Self",
+    "static",
+    "struct",
+    "super",
+    "trait",
+    "true",
+    "type",
+    "unsafe",
+    "use",
+    "where",
+    "use",
+    "macro_rules",
+  ],
+
+  controlFlowKeywords: [
+    "continue",
+    "else",
+    "for",
+    "if",
+    "while",
+    "loop",
+    "match",
+  ],
+
+  typeKeywords: [
+    "Self",
+    "m32",
+    "m64",
+    "m128",
+    "f80",
+    "f16",
+    "f128",
+    "int",
+    "uint",
+    "float",
+    "char",
+    "bool",
+    "u8",
+    "u16",
+    "u32",
+    "u64",
+    "f32",
+    "f64",
+    "i8",
+    "i16",
+    "i32",
+    "i64",
+    "str",
+    "Option",
+    "Either",
+    "c_float",
+    "c_double",
+    "c_void",
+    "FILE",
+    "fpos_t",
+    "DIR",
+    "dirent",
+    "c_char",
+    "c_schar",
+    "c_uchar",
+    "c_short",
+    "c_ushort",
+    "c_int",
+    "c_uint",
+    "c_long",
+    "c_ulong",
+    "size_t",
+    "ptrdiff_t",
+    "clock_t",
+    "time_t",
+    "c_longlong",
+    "c_ulonglong",
+    "intptr_t",
+    "uintptr_t",
+    "off_t",
+    "dev_t",
+    "ino_t",
+    "pid_t",
+    "mode_t",
+    "ssize_t",
+  ],
+
+  operators: [
+    "=",
+    ">",
+    "<",
+    "!",
+    "~",
+    "?",
+    ":",
+    "==",
+    "<=",
+    ">=",
+    "!=",
+    "&&",
+    "||",
+    "++",
+    "--",
+    "+",
+    "-",
+    "*",
+    "/",
+    "&",
+    "|",
+    "^",
+    "%",
+    "<<",
+    ">>",
+    ">>>",
+    "+=",
+    "-=",
+    "*=",
+    "/=",
+    "&=",
+    "|=",
+    "^=",
+    "%=",
+    "<<=",
+    ">>=",
+    ">>>=",
+  ],
+
+  // we include these common regular expressions
+  symbols: /[=><!~?:&|+\-*\/\^%]+/,
+
+  // C# style strings
+  escapes:
+    /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+
+  // The main tokenizer for languages
+  tokenizer: {
+    root: [
+      // identifiers and keywords
+      [
+        /[a-z_$][\w$]*/,
+        {
+          cases: {
+            "@typeKeywords": "type.identifier",
+            "@keywords": {
+              cases: {
+                fun: { token: "keyword", next: "@func_decl" },
+                let: { token: "keyword", next: "@func_decl" },
+                if: { token: "keyword", next: "@func_decl" },
+                use: { token: "keyword", next: "@func_decl" },
+                "@default": "keyword",
+              },
+            },
+            "@controlFlowKeywords": "keyword.control",
+            "@default": "variable",
+          },
+        },
+      ],
+      [/[A-Z][\w\$]*/, "type.identifier"], // to show class names nicely
+
+      // whitespace
+      { include: "@whitespace" },
+
+      // delimiters and operators
+      [/[{}()\[\]]/, "@brackets"],
+      [/[<>](?!@symbols)/, "@brackets"],
+      [/@symbols/, { cases: { "@operators": "operator", "@default": "" } }],
+
+      // @ annotations.
+      // As an example, we emit a debugging log message on these tokens.
+      // Note: message are supressed during the first load -- change some lines to see them.
+      [
+        /@\s*[a-zA-Z_\$][\w\$]*/,
+        { token: "annotation", log: "annotation token: $0" },
+      ],
+
+      // numbers
+      [/\d*\.\d+([eE][\-+]?\d+)?/, "number.float"],
+      [/0[xX][0-9a-fA-F]+/, "number.hex"],
+      [/\d+/, "number"],
+
+      // delimiter: after number because of .\d floats
+      [/[;,.]/, "delimiter"],
+
+      // strings
+      [/"([^"\\]|\\.)*$/, "string.invalid"], // non-teminated string
+      [/"/, { token: "string.quote", bracket: "@open", next: "@string" }],
+
+      // characters
+      [/'[^\\']'/, "string"],
+      [/(')(@escapes)(')/, ["string", "string.escape", "string"]],
+      [/'/, "string.invalid"],
+    ],
+
+    comment: [
+      [/[^\/*]+/, "comment"],
+      [/\/\*/, "comment", "@push"], // nested comment
+      ["\\*/", "comment", "@pop"],
+      [/[\/*]/, "comment"],
+    ],
+
+    string: [
+      [/[^\\"]+/, "string"],
+      [/@escapes/, "string.escape"],
+      [/\\./, "string.escape.invalid"],
+      [/"/, { token: "string.quote", bracket: "@close", next: "@pop" }],
+    ],
+
+    whitespace: [
+      [/[ \t\r\n]+/, "white"],
+      [/\/\*/, "comment", "@comment"],
+      [/\/\/.*$/, "comment"],
+    ],
+
+    func_decl: [[/[a-z_$][\w$]*/, "support.function", "@pop"]],
+  },
+};
diff --git a/src/lib/services/move/module.ts b/src/lib/services/move/module.ts
index 0396597b3..182c18427 100644
--- a/src/lib/services/move/module.ts
+++ b/src/lib/services/move/module.ts
@@ -82,7 +82,7 @@ export const getModuleVerificationStatus = async (
   // TODO: move url to base api route? wait for celatone api implementation?
   axios
     .get<ModuleVerificationReturn>(
-      `https://stone-compiler.initia.tech/contracts/${address}/${moduleName}`
+      `https://stone-compiler.initia.tech/contracts/verify/${address}/${moduleName}`
     )
     .then(({ data }) => ({
       ...snakeToCamel(data),
diff --git a/yarn.lock b/yarn.lock
index 5ef740ff6..8300a9ae6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3984,6 +3984,20 @@
   resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-6.10.1.tgz#5bd16082261d7364eabb511c788f00937dac588d"
   integrity sha512-z+ILK8Q3y+nfUl43ctCPuR4Y2bIxk/ooCQFwZxhtci1EhAtMDzMAx2W25qx8G1PPL9UUOdnUax19+F0OjXoj4w==
 
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
+  dependencies:
+    "@monaco-editor/loader" "^1.4.0"
+
 "@motionone/animation@^10.15.1":
   version "10.15.1"
   resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807"
@@ -10380,6 +10394,11 @@ modify-values@^1.0.0:
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
+monaco-editor@^0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.44.0.tgz#3c0fe3655923bbf7dd647057302070b5095b6c59"
+  integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==
+
 motion@^10.16.2:
   version "10.16.2"
   resolved "https://registry.yarnpkg.com/motion/-/motion-10.16.2.tgz#7dc173c6ad62210a7e9916caeeaf22c51e598d21"
@@ -12045,6 +12064,11 @@ standard-version@^9.5.0:
     stringify-package "^1.0.1"
     yargs "^16.0.0"
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 stream-shift@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"

From 0be41276cf8a328283d7e267fc8bb4a1ed045be6 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 19 Oct 2023 14:53:50 +0700
Subject: [PATCH 213/368] chore: refine

---
 .../module-details/components/ModuleInfo.tsx  | 55 ++++++++++---------
 src/lib/query/module.ts                       |  1 +
 src/lib/services/move/moduleService.ts        | 14 ++---
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index abd81e9cf..8c81cbe74 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -40,7 +40,7 @@ const InitRender = ({
   initTxHash: ModuleDetailsQueryResponse["initTxHash"];
   initProposalTitle: ModuleDetailsQueryResponse["initProposalTitle"];
   initProposalId: ModuleDetailsQueryResponse["initProposalId"];
-  createdHeight: Option<number>;
+  createdHeight: ModuleDetailsQueryResponse["createdHeight"];
 }) => {
   if (initTxHash) {
     return (
@@ -71,11 +71,14 @@ const InitRender = ({
     );
   }
 
-  return createdHeight === 0 ? (
-    <LabelText label="Created by">
-      <Text variant="body2">Genesis</Text>
-    </LabelText>
-  ) : (
+  if (createdHeight === 0)
+    return (
+      <LabelText label="Created by">
+        <Text variant="body2">Genesis</Text>
+      </LabelText>
+    );
+
+  return (
     <LabelText label="Instantiate Transaction">
       <Text variant="body2">N/A</Text>
     </LabelText>
@@ -151,25 +154,23 @@ const ModuleDetailsBody = ({
 export const ModuleInfo = ({
   verificationData,
   ...details
-}: ModuleInfoProps) => {
-  return (
-    <Flex flexDirection="column" gap={4}>
-      <Flex justifyContent="space-between" alignItems="center" w="full">
-        <Heading as="h6" variant="h6" fontWeight={600}>
-          Module Information
-        </Heading>
-        {verificationData?.source && (
-          <Flex alignItems="center" gap={1}>
-            <CustomIcon name="check-circle-solid" color="success.main" />
-            <Text variant="body2" color="text.dark">
-              This module&#39;s verification is supported by its provided source
-              code.
-            </Text>
-          </Flex>
-        )}
-      </Flex>
-      <ModuleDetailsBody {...details} />
-      <ModuleSourceCode sourceCode={verificationData?.source} />
+}: ModuleInfoProps) => (
+  <Flex flexDirection="column" gap={4}>
+    <Flex justifyContent="space-between" alignItems="center" w="full">
+      <Heading as="h6" variant="h6" fontWeight={600}>
+        Module Information
+      </Heading>
+      {verificationData?.source && (
+        <Flex alignItems="center" gap={1}>
+          <CustomIcon name="check-circle-solid" color="success.main" />
+          <Text variant="body2" color="text.dark">
+            This module&#39;s verification is supported by its provided source
+            code.
+          </Text>
+        </Flex>
+      )}
     </Flex>
-  );
-};
+    <ModuleDetailsBody {...details} />
+    <ModuleSourceCode sourceCode={verificationData?.source} />
+  </Flex>
+);
diff --git a/src/lib/query/module.ts b/src/lib/query/module.ts
index 1aa1ef10b..3b99ffc1c 100644
--- a/src/lib/query/module.ts
+++ b/src/lib/query/module.ts
@@ -48,6 +48,7 @@ export const getModuleHistoriesCountQueryDocument = graphql(`
   }
 `);
 
+// TODO: recheck proposal type
 export const getModuleDetailsQueryDocument = graphql(`
   query getModuleDetailsQuery($moduleId: Int!) {
     modules(where: { id: { _eq: $moduleId } }) {
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index b67e4634c..c5c6e916c 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -335,16 +335,16 @@ export const useModuleDetailsQuery = (
       .request(getModuleDetailsQueryDocument, { moduleId })
       .then<ModuleDetailsQueryResponse>(({ modules }) => {
         const target = modules[0];
+        if (!target) throw new Error(`Cannot find module with id ${moduleId}`);
         return {
-          publisherVmAddress: target?.publisher_vm_address
-            .vm_address as HexAddr,
-          createdHeight: target?.module_histories?.at(0)?.block.height,
+          publisherVmAddress: target.publisher_vm_address.vm_address as HexAddr,
+          createdHeight: target.module_histories?.at(0)?.block.height,
           createdTime: parseDateOpt(
-            target?.module_histories?.at(0)?.block.timestamp
+            target.module_histories?.at(0)?.block.timestamp
           ),
-          initTxHash: parseTxHashOpt(target?.publish_transaction?.hash),
-          initProposalId: target?.module_proposals.at(0)?.proposal.id,
-          initProposalTitle: target?.module_proposals.at(0)?.proposal.title,
+          initTxHash: parseTxHashOpt(target.publish_transaction?.hash),
+          initProposalId: target.module_proposals.at(0)?.proposal.id,
+          initProposalTitle: target.module_proposals.at(0)?.proposal.title,
         };
       });
   };

From 7dba4b35c0ce34d401cfeab57653e05aa4096d60 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 19 Oct 2023 18:26:58 +0700
Subject: [PATCH 214/368] fix: module initial publish info

---
 codegen.ts                                    |  2 +-
 hasura-schema.yaml                            | 50 +++++++++++++++++++
 src/lib/gql/gql.ts                            |  8 +--
 src/lib/gql/graphql.ts                        | 43 ++++++++--------
 .../module-details/components/ModuleInfo.tsx  | 12 ++---
 src/lib/query/module.ts                       | 16 ++----
 src/lib/services/expression/txExpression.ts   | 44 ++++++++++++----
 src/lib/services/move/moduleService.ts        | 13 +++--
 8 files changed, 124 insertions(+), 64 deletions(-)
 create mode 100644 hasura-schema.yaml

diff --git a/codegen.ts b/codegen.ts
index e700ca716..5b5c17703 100644
--- a/codegen.ts
+++ b/codegen.ts
@@ -4,7 +4,7 @@ import type { CodegenConfig } from "@graphql-codegen/cli";
  * @remarks Update schema when it is needed
  */
 const config: CodegenConfig = {
-  schema: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
+  schema: "http://localhost:8080/v1/graphql",
   documents: ["src/**/*.tsx", "src/**/*.ts"],
   ignoreNoDocuments: true, // for better experience with the watcher
   generates: {
diff --git a/hasura-schema.yaml b/hasura-schema.yaml
new file mode 100644
index 000000000..2554d50c1
--- /dev/null
+++ b/hasura-schema.yaml
@@ -0,0 +1,50 @@
+version: "3.6"
+services:
+  postgres:
+    image: postgres:15
+    restart: always
+    volumes:
+      - db_data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: postgrespassword
+  graphql-engine:
+    image: hasura/graphql-engine:v2.33.0
+    ports:
+      - "8080:8080"
+    restart: always
+    environment:
+      ## postgres database to store Hasura metadata
+      HASURA_GRAPHQL_METADATA_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      ## this env var can be used to add the above postgres database to Hasura as a data source. this can be removed/updated based on your needs
+      PG_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      ## enable the console served by server
+      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
+      ## enable debugging mode. It is recommended to disable this in production
+      HASURA_GRAPHQL_DEV_MODE: "true"
+      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
+      ## uncomment next line to run console offline (i.e load console assets from server instead of CDN)
+      # HASURA_GRAPHQL_CONSOLE_ASSETS_DIR: /srv/console-assets
+      ## uncomment next line to set an admin secret
+      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
+      HASURA_GRAPHQL_METADATA_DEFAULTS: '{"backend_configs":{"dataconnector":{"athena":{"uri":"http://data-connector-agent:8081/api/v1/athena"},"mariadb":{"uri":"http://data-connector-agent:8081/api/v1/mariadb"},"mysql8":{"uri":"http://data-connector-agent:8081/api/v1/mysql"},"oracle":{"uri":"http://data-connector-agent:8081/api/v1/oracle"},"snowflake":{"uri":"http://data-connector-agent:8081/api/v1/snowflake"}}}}'
+    depends_on:
+      data-connector-agent:
+        condition: service_healthy
+  data-connector-agent:
+    image: hasura/graphql-data-connector:v2.33.0
+    restart: always
+    ports:
+      - 8081:8081
+    environment:
+      QUARKUS_LOG_LEVEL: ERROR # FATAL, ERROR, WARN, INFO, DEBUG, TRACE
+      ## https://quarkus.io/guides/opentelemetry#configuration-reference
+      QUARKUS_OPENTELEMETRY_ENABLED: "false"
+      ## QUARKUS_OPENTELEMETRY_TRACER_EXPORTER_OTLP_ENDPOINT: http://jaeger:4317
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8081/api/v1/athena/health"]
+      interval: 5s
+      timeout: 10s
+      retries: 5
+      start_period: 5s
+volumes:
+  db_data:
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index ae6446a74..e21b22c22 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -61,8 +61,8 @@ const documents = {
     types.GetModuleHistoriesQueryDocument,
   "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetModuleHistoriesCountQueryDocument,
-  '\n  query getModuleDetailsQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "/initia.move.v1.MsgGovPublish"\n                "/initia.move.v1.MsgGovExecute"\n                "/initia.move.v1.MsgGovScript"\n              ]\n            }\n          }\n        }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n':
-    types.GetModuleDetailsQueryDocument,
+  '\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n':
+    types.GetModuleInitialPublishInfoQueryDocument,
   "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n":
     types.GetPoolListDocument,
   "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
@@ -201,8 +201,8 @@ export function graphql(
   source: "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: '\n  query getModuleDetailsQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "/initia.move.v1.MsgGovPublish"\n                "/initia.move.v1.MsgGovExecute"\n                "/initia.move.v1.MsgGovScript"\n              ]\n            }\n          }\n        }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
-): typeof documents['\n  query getModuleDetailsQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "/initia.move.v1.MsgGovPublish"\n                "/initia.move.v1.MsgGovExecute"\n                "/initia.move.v1.MsgGovScript"\n              ]\n            }\n          }\n        }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
+  source: '\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
+): typeof documents['\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
 export function graphql(
   source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
 ): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 6d1865b15..afa9823a1 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -510,8 +510,6 @@ export type Accounts = {
   /** An aggregate relationship */
   transactions_aggregate: Transactions_Aggregate;
   type?: Maybe<Scalars["accounttype"]>;
-  /** An object relationship */
-  validator?: Maybe<Validators>;
   /** An array relationship */
   validators: Array<Validators>;
   /** An aggregate relationship */
@@ -783,7 +781,6 @@ export type Accounts_Bool_Exp = {
   transactions?: InputMaybe<Transactions_Bool_Exp>;
   transactions_aggregate?: InputMaybe<Transactions_Aggregate_Bool_Exp>;
   type?: InputMaybe<Accounttype_Comparison_Exp>;
-  validator?: InputMaybe<Validators_Bool_Exp>;
   validators?: InputMaybe<Validators_Bool_Exp>;
   validators_aggregate?: InputMaybe<Validators_Aggregate_Bool_Exp>;
   vm_address?: InputMaybe<Vm_Addresses_Bool_Exp>;
@@ -818,7 +815,6 @@ export type Accounts_Insert_Input = {
   proposals?: InputMaybe<Proposals_Arr_Rel_Insert_Input>;
   transactions?: InputMaybe<Transactions_Arr_Rel_Insert_Input>;
   type?: InputMaybe<Scalars["accounttype"]>;
-  validator?: InputMaybe<Validators_Obj_Rel_Insert_Input>;
   validators?: InputMaybe<Validators_Arr_Rel_Insert_Input>;
   vm_address?: InputMaybe<Vm_Addresses_Obj_Rel_Insert_Input>;
   vm_address_id?: InputMaybe<Scalars["Int"]>;
@@ -899,7 +895,6 @@ export type Accounts_Order_By = {
   proposals_aggregate?: InputMaybe<Proposals_Aggregate_Order_By>;
   transactions_aggregate?: InputMaybe<Transactions_Aggregate_Order_By>;
   type?: InputMaybe<Order_By>;
-  validator?: InputMaybe<Validators_Order_By>;
   validators_aggregate?: InputMaybe<Validators_Aggregate_Order_By>;
   vm_address?: InputMaybe<Vm_Addresses_Order_By>;
   vm_address_id?: InputMaybe<Order_By>;
@@ -15356,11 +15351,11 @@ export type GetModuleHistoriesCountQueryQuery = {
   };
 };
 
-export type GetModuleDetailsQueryQueryVariables = Exact<{
+export type GetModuleInitialPublishInfoQueryQueryVariables = Exact<{
   moduleId: Scalars["Int"];
 }>;
 
-export type GetModuleDetailsQueryQuery = {
+export type GetModuleInitialPublishInfoQueryQuery = {
   __typename?: "query_root";
   modules: Array<{
     __typename?: "modules";
@@ -19676,13 +19671,13 @@ export const GetModuleHistoriesCountQueryDocument = {
   GetModuleHistoriesCountQueryQuery,
   GetModuleHistoriesCountQueryQueryVariables
 >;
-export const GetModuleDetailsQueryDocument = {
+export const GetModuleInitialPublishInfoQueryDocument = {
   kind: "Document",
   definitions: [
     {
       kind: "OperationDefinition",
       operation: "query",
-      name: { kind: "Name", value: "getModuleDetailsQuery" },
+      name: { kind: "Name", value: "getModuleInitialPublishInfoQuery" },
       variableDefinitions: [
         {
           kind: "VariableDefinition",
@@ -19792,18 +19787,6 @@ export const GetModuleDetailsQueryDocument = {
                                                 "/initia.move.v1.MsgGovPublish",
                                               block: false,
                                             },
-                                            {
-                                              kind: "StringValue",
-                                              value:
-                                                "/initia.move.v1.MsgGovExecute",
-                                              block: false,
-                                            },
-                                            {
-                                              kind: "StringValue",
-                                              value:
-                                                "/initia.move.v1.MsgGovScript",
-                                              block: false,
-                                            },
                                           ],
                                         },
                                       },
@@ -19816,6 +19799,20 @@ export const GetModuleDetailsQueryDocument = {
                         ],
                       },
                     },
+                    {
+                      kind: "Argument",
+                      name: { kind: "Name", value: "order_by" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "proposal_id" },
+                            value: { kind: "EnumValue", value: "asc" },
+                          },
+                        ],
+                      },
+                    },
                   ],
                   selectionSet: {
                     kind: "SelectionSet",
@@ -19904,8 +19901,8 @@ export const GetModuleDetailsQueryDocument = {
     },
   ],
 } as unknown as DocumentNode<
-  GetModuleDetailsQueryQuery,
-  GetModuleDetailsQueryQueryVariables
+  GetModuleInitialPublishInfoQueryQuery,
+  GetModuleInitialPublishInfoQueryQueryVariables
 >;
 export const GetPoolListDocument = {
   kind: "Document",
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 8c81cbe74..ec6be60c3 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -8,7 +8,7 @@ import { ModuleSourceCode } from "lib/components/module";
 import type { ModuleVerificationInternal } from "lib/services/move/module";
 import type {
   IndexedModule,
-  ModuleDetailsQueryResponse,
+  ModuleInitialPublishInfo,
 } from "lib/services/move/moduleService";
 import type { Nullable, Option } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
@@ -25,7 +25,7 @@ const DetailsContainer = chakra(Flex, {
 });
 
 interface ModuleInfoProps {
-  moduleDetails: Option<ModuleDetailsQueryResponse>;
+  moduleDetails: Option<ModuleInitialPublishInfo>;
   upgradePolicy: IndexedModule["upgradePolicy"];
   verificationData: Option<Nullable<ModuleVerificationInternal>>;
   isLoading: boolean;
@@ -37,10 +37,10 @@ const InitRender = ({
   initProposalId,
   createdHeight,
 }: {
-  initTxHash: ModuleDetailsQueryResponse["initTxHash"];
-  initProposalTitle: ModuleDetailsQueryResponse["initProposalTitle"];
-  initProposalId: ModuleDetailsQueryResponse["initProposalId"];
-  createdHeight: ModuleDetailsQueryResponse["createdHeight"];
+  initTxHash: ModuleInitialPublishInfo["initTxHash"];
+  initProposalTitle: ModuleInitialPublishInfo["initProposalTitle"];
+  initProposalId: ModuleInitialPublishInfo["initProposalId"];
+  createdHeight: ModuleInitialPublishInfo["createdHeight"];
 }) => {
   if (initTxHash) {
     return (
diff --git a/src/lib/query/module.ts b/src/lib/query/module.ts
index 3b99ffc1c..dd386666e 100644
--- a/src/lib/query/module.ts
+++ b/src/lib/query/module.ts
@@ -48,9 +48,8 @@ export const getModuleHistoriesCountQueryDocument = graphql(`
   }
 `);
 
-// TODO: recheck proposal type
-export const getModuleDetailsQueryDocument = graphql(`
-  query getModuleDetailsQuery($moduleId: Int!) {
+export const getModuleInitialPublishInfoQueryDocument = graphql(`
+  query getModuleInitialPublishInfoQuery($moduleId: Int!) {
     modules(where: { id: { _eq: $moduleId } }) {
       publisher_vm_address: vm_address {
         vm_address
@@ -60,16 +59,9 @@ export const getModuleDetailsQueryDocument = graphql(`
       }
       module_proposals(
         where: {
-          proposal: {
-            type: {
-              _in: [
-                "/initia.move.v1.MsgGovPublish"
-                "/initia.move.v1.MsgGovExecute"
-                "/initia.move.v1.MsgGovScript"
-              ]
-            }
-          }
+          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }
         }
+        order_by: { proposal_id: asc }
       ) {
         proposal {
           id
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index c9e6c9c99..903d9e15d 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 
+import { useWasmConfig } from "lib/app-provider";
 import type { Nullable, Option, PoolTxFilter, TxFilters } from "lib/types";
 import { isTxHash } from "lib/utils";
 
@@ -30,13 +31,26 @@ const generateActionsFilter = (filters: TxFilters) =>
     {}
   );
 
-const generateSearch = (search: string) =>
-  search
-    ? [
-        { hash: { _eq: isTxHash(search) ? `\\x${search}` : "" } },
-        { contract_transactions: { contract: { address: { _eq: search } } } },
-      ]
-    : [{}];
+const generateSearch = ({
+  search,
+  wasmEnable,
+}: {
+  search: string;
+  wasmEnable: boolean;
+}) => {
+  const searchExp = [];
+
+  if (search) {
+    searchExp.push({ hash: { _eq: isTxHash(search) ? `\\x${search}` : "" } });
+
+    if (wasmEnable)
+      searchExp.push({
+        contract_transactions: { contract: { address: { _eq: search } } },
+      });
+  }
+
+  return searchExp;
+};
 
 export const useTxExpression = ({
   accountId,
@@ -48,8 +62,10 @@ export const useTxExpression = ({
   search: string;
   filters: TxFilters;
   isSigner: Option<boolean>;
-}) =>
-  useMemo(() => {
+}) => {
+  const wasmConfig = useWasmConfig({ shouldRedirect: false });
+
+  return useMemo(() => {
     const hasFilter = Object.values(filters).some((filter: boolean) => filter);
     const accountExp = accountId ? { account_id: { _eq: accountId } } : {};
     const isSignerExp =
@@ -60,7 +76,12 @@ export const useTxExpression = ({
             transaction: {
               ...(hasFilter ? generateActionsFilter(filters) : {}),
               ...(search
-                ? { _or: generateSearch(search.toLocaleLowerCase()) }
+                ? {
+                    _or: generateSearch({
+                      search: search.toLocaleLowerCase(),
+                      wasmEnable: wasmConfig.enabled,
+                    }),
+                  }
                 : {}),
             },
           }
@@ -70,7 +91,8 @@ export const useTxExpression = ({
       ...isSignerExp,
       ...filterExp,
     };
-  }, [accountId, filters, isSigner, search]);
+  }, [accountId, filters, isSigner, search, wasmConfig.enabled]);
+};
 
 export const usePoolTxExpression = (
   poolId: Option<number>,
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index c5c6e916c..335269824 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -10,11 +10,10 @@ import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
   useCelatoneApp,
-  useLCDEndpoint,
   useMoveConfig,
 } from "lib/app-provider";
 import {
-  getModuleDetailsQueryDocument,
+  getModuleInitialPublishInfoQueryDocument,
   getModuleHistoriesCountQueryDocument,
   getModuleHistoriesQueryDocument,
   getModuleIdByNameAndVmAddressQueryDocument,
@@ -315,7 +314,7 @@ export const useModuleHistoriesCount = (moduleId: Option<Nullable<number>>) => {
   );
 };
 
-export interface ModuleDetailsQueryResponse {
+export interface ModuleInitialPublishInfo {
   publisherVmAddress: HexAddr;
   createdHeight: Option<number>;
   createdTime: Option<Date>;
@@ -326,14 +325,14 @@ export interface ModuleDetailsQueryResponse {
 
 export const useModuleDetailsQuery = (
   moduleId: Option<Nullable<number>>
-): UseQueryResult<ModuleDetailsQueryResponse> => {
+): UseQueryResult<ModuleInitialPublishInfo> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = async () => {
     if (!moduleId) throw new Error("Module id not found");
     return indexerGraphClient
-      .request(getModuleDetailsQueryDocument, { moduleId })
-      .then<ModuleDetailsQueryResponse>(({ modules }) => {
+      .request(getModuleInitialPublishInfoQueryDocument, { moduleId })
+      .then<ModuleInitialPublishInfo>(({ modules }) => {
         const target = modules[0];
         if (!target) throw new Error(`Cannot find module with id ${moduleId}`);
         return {
@@ -366,7 +365,7 @@ export const useDecodeScript = ({
   base64EncodedFile: string;
   options?: Omit<UseQueryOptions<ExposedFunction>, "queryKey">;
 }): UseQueryResult<ExposedFunction> => {
-  const lcd = useLCDEndpoint();
+  const lcd = useBaseApiRoute("rest");
 
   const queryFn = async (): Promise<ExposedFunction> => {
     const fn = await decodeScript(

From 11cd2c620092a715583e4f50948fc380239f8d77 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 19 Oct 2023 18:38:04 +0700
Subject: [PATCH 215/368] fix(components): improve ux writing for recent codes
 and contracts

---
 CHANGELOG.md                                  |   3 +
 src/lib/app-provider/env.ts                   |   1 -
 src/lib/app-provider/hooks/useBaseApiRoute.ts |   3 -
 src/lib/components/fund/selectFund.tsx        |   2 +-
 src/lib/hooks/useExecuteCmds.ts               |  20 +-
 src/lib/hooks/useQueryCmds.ts                 |  18 +-
 src/lib/layout/navbar/index.tsx               | 237 +++++++++---------
 src/lib/pages/codes/index.tsx                 |   2 +-
 .../components/CommandSection.tsx             | 116 +++++----
 src/lib/pages/contracts/index.tsx             |   2 +-
 src/lib/services/assetService.ts              |  24 +-
 11 files changed, 228 insertions(+), 200 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 198aa8d4d..bdd03bae7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#579](https://github.com/alleslabs/celatone-frontend/pull/579) Improve ux writing for recent items page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 
 ### Bug fixes
@@ -79,6 +80,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#575](https://github.com/alleslabs/celatone-frontend/pull/575) Support message suggestion for contract from Sylvia framework
 - [#564](https://github.com/alleslabs/celatone-frontend/pull/564) Update cosmjs version to latest and bump terra testnet gas price
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
@@ -121,6 +123,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Bug fixes
 
 - [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
+- [#570](https://github.com/alleslabs/celatone-frontend/pull/570) Use native tokens in attached funds
 - [#567](https://github.com/alleslabs/celatone-frontend/pull/567) Fix attached funds in code snippet
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 96a712baf..6121dc26f 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -19,7 +19,6 @@ export enum CELATONE_QUERY_KEYS {
   // ASSET
   ASSET_INFOS = "CELATONE_QUERY_ASSET_INFOS",
   ASSET_INFO_LIST = "CELATONE_QUERY_ASSET_INFO_LIST",
-  NATIVE_TOKENS_INFO = "CELATONE_QUERY_NATIVE_TOKENS_INFO",
   // BLOCK
   BLOCKS = "CELATONE_QUERY_BLOCKS",
   BLOCK_COUNT = "CELATONE_QUERY_BLOCK_COUNT",
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index b9cf4862e..d0f1454e1 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -13,7 +13,6 @@ export const useBaseApiRoute = (
     | "rest"
     | "icns_names"
     | "icns_address"
-    | "native_tokens"
     | "cosmwasm"
 ): string => {
   const {
@@ -49,8 +48,6 @@ export const useBaseApiRoute = (
       return `${api}/icns/names`;
     case "icns_address":
       return `${api}/icns/address`;
-    case "native_tokens":
-      return `${api}/native-assets/${chain}/${currentChainId}`;
     case "cosmwasm":
       return `${api}/cosmwasm/${chain}/${currentChainId}`;
     default:
diff --git a/src/lib/components/fund/selectFund.tsx b/src/lib/components/fund/selectFund.tsx
index 71297fb45..aea438691 100644
--- a/src/lib/components/fund/selectFund.tsx
+++ b/src/lib/components/fund/selectFund.tsx
@@ -26,7 +26,7 @@ export const SelectFund = ({
   assetsSelect,
   labelBgColor,
 }: SelectFundProps) => {
-  const { data: assetInfos = [] } = useAssetInfoList();
+  const { data: assetInfos = [] } = useAssetInfoList({ assetType: "native" });
   const { fields, append, remove } = useFieldArray({
     control,
     name: ASSETS_SELECT,
diff --git a/src/lib/hooks/useExecuteCmds.ts b/src/lib/hooks/useExecuteCmds.ts
index 4ca91b76e..2ce3ed65a 100644
--- a/src/lib/hooks/useExecuteCmds.ts
+++ b/src/lib/hooks/useExecuteCmds.ts
@@ -26,16 +26,26 @@ export const useExecuteCmds = (contractAddress: ContractAddr) => {
     ],
     retry: false,
     onError: (e) => {
-      if (e.message.includes("contract: ")) {
-        setExecCmds([]);
+      const executeCmds: string[] = [];
+
+      // Check if Sylvia framework
+      const sylviaRegex =
+        /Messages supported by this contract: (.*?): execute wasm contract failed: invalid request/;
+      const contentMatch = e.message?.match(sylviaRegex);
+
+      if (contentMatch && contentMatch[1]) {
+        const content = contentMatch[1].split(",");
+        content.forEach((each) => executeCmds.push(each.trim()));
       } else if (e.message.includes("Error parsing into type")) {
-        const executeCmds: string[] = [];
         Array.from(e.message?.matchAll(/`(.*?)`/g) || [])
           .slice(1)
           .forEach((match) => executeCmds.push(match[1]));
-        setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
-      } else {
+      }
+
+      if (executeCmds.length === 0) {
         setExecCmds([["", "{}"]]);
+      } else {
+        setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
       }
     },
   });
diff --git a/src/lib/hooks/useQueryCmds.ts b/src/lib/hooks/useQueryCmds.ts
index dc46d26a7..4e7425b8c 100644
--- a/src/lib/hooks/useQueryCmds.ts
+++ b/src/lib/hooks/useQueryCmds.ts
@@ -32,9 +32,21 @@ export const useQueryCmds = (contractAddress: ContractAddr) => {
       refetchOnWindowFocus: false,
       onError: (e: AxiosError<RpcQueryError>) => {
         const cmds: string[] = [];
-        Array.from(e.response?.data.message?.matchAll(/`(.*?)`/g) || [])
-          .slice(1)
-          .forEach((match) => cmds.push(match[1]));
+        const resMsg = e.response?.data.message;
+
+        // Check if Sylvia framework
+        const sylviaRegex =
+          /Messages supported by this contract: (.*?): query wasm contract failed: invalid request/;
+        const contentMatch = resMsg?.match(sylviaRegex);
+
+        if (contentMatch && contentMatch[1]) {
+          const content = contentMatch[1].split(",");
+          content.forEach((each) => cmds.push(each.trim()));
+        } else {
+          Array.from(resMsg?.matchAll(/`(.*?)`/g) || [])
+            .slice(1)
+            .forEach((match) => cmds.push(match[1]));
+        }
         setQueryCmds(cmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
       },
     }
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index c9ad548a2..4a3dd4630 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
-import { useMemo, type Dispatch, type SetStateAction } from "react";
+import { type Dispatch, type SetStateAction } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
 import {
@@ -32,133 +32,122 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
 
   const { address } = useCurrentChain();
 
-  const navMenu: MenuInfo[] = useMemo(
-    () => [
-      {
-        category: "Your Account",
-        slug: "your-account",
-        submenu: [
+  const navMenu: MenuInfo[] = [
+    {
+      category: "Your Account",
+      slug: "your-account",
+      submenu: [
+        {
+          name: "Past Transactions",
+          slug: "/past-txs",
+          icon: "history" as IconKeys,
+        },
+        {
+          name: "Your Account Details",
+          slug: `/accounts/${address}`,
+          icon: "admin" as IconKeys,
+          isDisable: !address,
+          tooltipText:
+            "You need to connect wallet to view your account details.",
+          trackEvent: () => track(AmpEvent.USE_TO_YOUR_ACCOUNT),
+        },
+      ],
+    },
+    ...(publicProject.enabled
+      ? [
           {
-            name: "Past Transactions",
-            slug: "/past-txs",
-            icon: "history" as IconKeys,
+            category: "Public Projects",
+            slug: StorageKeys.ProjectSidebar,
+            submenu: [
+              ...getSavedPublicProjects().map((list) => ({
+                name: list.name,
+                slug: `/projects/${list.slug}`,
+                logo: list.logo as IconKeys,
+              })),
+              {
+                name: "View All Projects",
+                slug: "/projects",
+                icon: "public-project" as IconKeys,
+              },
+            ],
           },
+        ]
+      : []),
+    ...(wasm.enabled
+      ? [
           {
-            name: "Your Account Details",
-            slug: `/accounts/${address}`,
-            icon: "admin" as IconKeys,
-            isDisable: !address,
-            tooltipText:
-              "You need to connect wallet to view your account details.",
-            trackEvent: () => track(AmpEvent.USE_TO_YOUR_ACCOUNT),
+            category: "Developer Tools",
+            slug: StorageKeys.DevSidebar,
+            submenu: [
+              {
+                name: "Deploy Contract",
+                slug: "/deploy",
+                icon: "add-new" as IconKeys,
+              },
+              {
+                name: "Query",
+                slug: "/query",
+                icon: "query" as IconKeys,
+              },
+              {
+                name: "Execute",
+                slug: "/execute",
+                icon: "execute" as IconKeys,
+              },
+              {
+                name: "Migrate",
+                slug: "/migrate",
+                icon: "migrate" as IconKeys,
+              },
+              // {
+              //   name: "Recent Activities",
+              //   slug: "/",
+              //   icon: "list" as IconKeys,
+              // },
+            ],
+            subSection: [
+              {
+                category: "This Wallet",
+                submenu: [
+                  {
+                    name: "My Stored Codes",
+                    slug: "/stored-codes",
+                    icon: "code" as IconKeys,
+                  },
+                  {
+                    name: INSTANTIATED_LIST_NAME,
+                    slug: `/contract-lists/${formatSlugName(
+                      INSTANTIATED_LIST_NAME
+                    )}`,
+                    icon: getListIcon(INSTANTIATED_LIST_NAME),
+                  },
+                ],
+              },
+              {
+                category: "This Device",
+                submenu: [
+                  {
+                    name: "Saved Codes",
+                    slug: "/saved-codes",
+                    icon: "code" as IconKeys,
+                  },
+                  {
+                    name: SAVED_LIST_NAME,
+                    slug: `/contract-lists/${formatSlugName(SAVED_LIST_NAME)}`,
+                    icon: "contract-address" as IconKeys,
+                  },
+                  {
+                    name: "View All Contract List",
+                    slug: "/contract-lists",
+                    icon: "more" as IconKeys,
+                  },
+                ],
+              },
+            ],
           },
-        ],
-      },
-      ...(publicProject.enabled
-        ? [
-            {
-              category: "Public Projects",
-              slug: StorageKeys.ProjectSidebar,
-              submenu: [
-                ...getSavedPublicProjects().map((list) => ({
-                  name: list.name,
-                  slug: `/projects/${list.slug}`,
-                  logo: list.logo as IconKeys,
-                })),
-                {
-                  name: "View All Projects",
-                  slug: "/projects",
-                  icon: "public-project" as IconKeys,
-                },
-              ],
-            },
-          ]
-        : []),
-      ...(wasm.enabled
-        ? [
-            {
-              category: "Developer Tools",
-              slug: StorageKeys.DevSidebar,
-              submenu: [
-                {
-                  name: "Deploy Contract",
-                  slug: "/deploy",
-                  icon: "add-new" as IconKeys,
-                },
-                {
-                  name: "Query",
-                  slug: "/query",
-                  icon: "query" as IconKeys,
-                },
-                {
-                  name: "Execute",
-                  slug: "/execute",
-                  icon: "execute" as IconKeys,
-                },
-                {
-                  name: "Migrate",
-                  slug: "/migrate",
-                  icon: "migrate" as IconKeys,
-                },
-                // {
-                //   name: "Recent Activities",
-                //   slug: "/",
-                //   icon: "list" as IconKeys,
-                // },
-              ],
-              subSection: [
-                {
-                  category: "This Wallet",
-                  submenu: [
-                    {
-                      name: "My Stored Codes",
-                      slug: "/stored-codes",
-                      icon: "code" as IconKeys,
-                    },
-                    {
-                      name: INSTANTIATED_LIST_NAME,
-                      slug: `/contract-lists/${formatSlugName(
-                        INSTANTIATED_LIST_NAME
-                      )}`,
-                      icon: getListIcon(INSTANTIATED_LIST_NAME),
-                    },
-                  ],
-                },
-                {
-                  category: "This Device",
-                  submenu: [
-                    {
-                      name: "Saved Codes",
-                      slug: "/saved-codes",
-                      icon: "code" as IconKeys,
-                    },
-                    {
-                      name: SAVED_LIST_NAME,
-                      slug: `/contract-lists/${formatSlugName(
-                        SAVED_LIST_NAME
-                      )}`,
-                      icon: "contract-address" as IconKeys,
-                    },
-                    {
-                      name: "View All Contract List",
-                      slug: "/contract-lists",
-                      icon: "more" as IconKeys,
-                    },
-                  ],
-                },
-              ],
-            },
-          ]
-        : []),
-    ],
-    [
-      address,
-      getSavedPublicProjects,
-      publicProject.enabled,
-      track,
-      wasm.enabled,
-    ]
-  );
+        ]
+      : []),
+  ];
 
   return (
     <Flex direction="column" h="full" overflow="hidden" position="relative">
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index b6cb79961..32641ee77 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -79,7 +79,7 @@ const RecentCodes = observer(() => {
           Recent Codes
         </Heading>
         <Text variant="body2" color="text.dark" fontWeight="500" mb={8}>
-          These codes are the most recently stored on this network
+          Showing the 100 most recent stored codes on this network
         </Text>
         <Flex
           gap={{ base: 6, md: 3 }}
diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index b9772c00d..5bd901be3 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -24,15 +24,70 @@ import { useSchemaStore } from "lib/providers/store";
 import type { ContractAddr } from "lib/types";
 import { encode, jsonPrettify } from "lib/utils";
 
+interface RenderCmdsProps {
+  isFetching: boolean;
+  cmds: [string, string][];
+  contractAddress: ContractAddr;
+  type: string;
+}
+
 interface CommandSectionProps {
   contractAddress: ContractAddr;
   codeHash: string;
   codeId: string;
 }
 
+const RenderCmds = ({
+  isFetching,
+  cmds,
+  contractAddress,
+  type,
+}: RenderCmdsProps) => {
+  const navigate = useInternalNavigate();
+
+  if (isFetching) {
+    return <Spinner size="md" mx={1} />;
+  }
+  if (cmds.length) {
+    return (
+      <ButtonGroup
+        width="90%"
+        flexWrap="wrap"
+        rowGap={2}
+        sx={{
+          "> button": {
+            marginInlineStart: "0 !important",
+            marginInlineEnd: "1",
+          },
+        }}
+      >
+        {cmds.sort().map(([cmd, msg]) => (
+          <ContractCmdButton
+            key={`${type}-cmd-${cmd}`}
+            cmd={cmd}
+            onClickCmd={() => {
+              navigate({
+                pathname: `/${type}`,
+                query: {
+                  contract: contractAddress,
+                  msg: encode(jsonPrettify(msg)),
+                },
+              });
+            }}
+          />
+        ))}
+      </ButtonGroup>
+    );
+  }
+  return (
+    <Text variant="body2" color="text.dark">
+      No messages available
+    </Text>
+  );
+};
+
 export const CommandSection = observer(
   ({ contractAddress, codeHash, codeId }: CommandSectionProps) => {
-    const navigate = useInternalNavigate();
     const { isOpen, onClose, onOpen } = useDisclosure();
 
     const { getSchemaByCodeHash } = useSchemaStore();
@@ -43,51 +98,6 @@ export const CommandSection = observer(
       useQueryCmds(contractAddress);
     const { isFetching: isExecuteCmdsFetching, execCmds } =
       useExecuteCmds(contractAddress);
-    const renderCmds = (
-      isFetching: boolean,
-      cmds: [string, string][],
-      type: string
-    ) => {
-      if (isFetching) {
-        return <Spinner size="md" mx={1} />;
-      }
-      if (cmds.length) {
-        return (
-          <ButtonGroup
-            width="90%"
-            flexWrap="wrap"
-            rowGap={2}
-            sx={{
-              "> button": {
-                marginInlineStart: "0 !important",
-                marginInlineEnd: "1",
-              },
-            }}
-          >
-            {cmds.sort().map(([cmd, msg]) => (
-              <ContractCmdButton
-                key={`${type}-cmd-${cmd}`}
-                cmd={cmd}
-                onClickCmd={() => {
-                  navigate({
-                    pathname: `/${type}`,
-                    query: {
-                      contract: contractAddress,
-                      msg: encode(jsonPrettify(msg)),
-                    },
-                  });
-                }}
-              />
-            ))}
-          </ButtonGroup>
-        );
-      }
-      return (
-        <Text variant="body2" color="text.dark">
-          No messages available
-        </Text>
-      );
-    };
 
     return (
       <Flex
@@ -151,7 +161,12 @@ export const CommandSection = observer(
             <Text color="text.dark" variant="body2" fontWeight={500} mb={2}>
               Query Shortcuts
             </Text>
-            {renderCmds(isQueryCmdsFetching, queryCmds, "query")}
+            <RenderCmds
+              isFetching={isQueryCmdsFetching}
+              cmds={queryCmds}
+              contractAddress={contractAddress}
+              type="query"
+            />
           </Flex>
           <Flex
             direction="column"
@@ -163,7 +178,12 @@ export const CommandSection = observer(
             <Text color="text.dark" variant="body2" fontWeight={500} mb={2}>
               Execute Shortcuts
             </Text>
-            {renderCmds(isExecuteCmdsFetching, execCmds, "execute")}
+            <RenderCmds
+              isFetching={isExecuteCmdsFetching}
+              cmds={execCmds}
+              contractAddress={contractAddress}
+              type="execute"
+            />
           </Flex>
         </Flex>
         <JsonSchemaModal
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 584e97bc3..6ee35aa2c 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -65,7 +65,7 @@ const RecentContracts = observer(() => {
           Recent Contracts
         </Heading>
         <Text variant="body2" color="text.dark" fontWeight={500} mb={8}>
-          These contracts are the most recently instantiated on this network
+          Showing the 100 most recent instantiated contracts on this network
         </Text>
       </Box>
       {isMobile ? (
diff --git a/src/lib/services/assetService.ts b/src/lib/services/assetService.ts
index 7e031a115..60e9f7994 100644
--- a/src/lib/services/assetService.ts
+++ b/src/lib/services/assetService.ts
@@ -34,23 +34,21 @@ export const useAssetInfos = ({
   };
 };
 
-export const useAssetInfoList = () => {
-  const assetsApiRoute = useBaseApiRoute("assets");
-  return useQuery(
-    [CELATONE_QUERY_KEYS.ASSET_INFO_LIST, assetsApiRoute],
-    async () => getAssetInfosWithoutPricesPath(assetsApiRoute),
-    { enabled: Boolean(assetsApiRoute), retry: 1, refetchOnWindowFocus: false }
+export const useAssetInfoList = ({
+  assetType,
+}: {
+  assetType: "all" | "native" | "cw20";
+}) => {
+  const assetsApiRoute = useBaseApiRoute("assets").concat(
+    assetType !== "all" ? `/type/${assetType}` : ""
   );
-};
-
-export const useNativeTokensInfo = () => {
-  const nativeTokensApiRoute = useBaseApiRoute("native_tokens");
 
   return useQuery(
-    [CELATONE_QUERY_KEYS.NATIVE_TOKENS_INFO, nativeTokensApiRoute],
-    async () => getAssetInfosWithoutPricesPath(nativeTokensApiRoute),
+    [CELATONE_QUERY_KEYS.ASSET_INFO_LIST, assetsApiRoute],
+    async () => getAssetInfosWithoutPricesPath(assetsApiRoute),
     {
-      enabled: Boolean(nativeTokensApiRoute),
+      enabled: Boolean(assetsApiRoute),
+      retry: 1,
       refetchOnWindowFocus: false,
     }
   );

From f0a869b7ec55b76b11ea07c0b4b63416b96b0c9c Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 20 Oct 2023 11:32:47 +0700
Subject: [PATCH 216/368] feat: add stone-11 support

---
 src/config/chain/initia.ts              |  48 ++++++++
 src/lib/chain-registry/initiatestnet.ts | 139 ++++++++++++++++--------
 src/lib/providers/cosmos-kit/index.tsx  |   2 +-
 3 files changed, 143 insertions(+), 46 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index d5276ab88..b1821e66e 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -51,4 +51,52 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
     },
     extra: {},
   },
+  "stone-11": {
+    chain: "initia",
+    registryChainName: "initiatestnet",
+    prettyName: "Initia Testnet",
+    lcd: "https://stone-rest.initia.tech",
+    rpc: "https://stone-rpc.initia.tech:443",
+    indexer: "https://stone-11-graphql.alleslabs.dev/v1/graphql",
+    api: "https://celatone-api.alleslabs.dev",
+    wallets: [...keplrWallets],
+    features: {
+      faucet: {
+        enabled: false,
+      },
+      wasm: {
+        enabled: false,
+      },
+      move: {
+        enabled: true,
+        moduleMaxFileSize: 1_048_576,
+        decodeApi: "https://initia-api-jiod42ec2q-as.a.run.app/decode_module",
+      },
+      pool: {
+        enabled: false,
+      },
+      publicProject: {
+        enabled: true,
+      },
+      gov: {
+        enabled: true,
+      },
+      nft: {
+        enabled: true,
+      },
+    },
+    gas: {
+      gasPrice: {
+        tokenPerGas: 0.151,
+        denom: "uinit",
+      },
+      gasAdjustment: 1.5,
+      maxGasLimit: 25_000_000,
+    },
+    explorerLink: {
+      validator: "https://app.initia.tech/validator",
+      proposal: "https://app.initia.tech/proposal",
+    },
+    extra: {},
+  },
 };
diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index 3daf56a14..db4fc6c9c 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -1,52 +1,101 @@
 import type { AssetList, Chain } from "@chain-registry/types";
 
-export const initiatestnet: Chain = {
-  $schema: "../chain.schema.json",
-  chain_name: "initiatestnet",
-  status: "live",
-  network_type: "testnet",
-  pretty_name: "Initia Testnet",
-  chain_id: "stone-10",
-  bech32_prefix: "init",
-  daemon_name: "initd",
-  node_home: "$HOME/.init",
-  key_algos: ["secp256k1"],
-  slip44: 118,
-  fees: {
-    fee_tokens: [
-      {
-        denom: "uinit",
-        fixed_min_gas_price: 0,
-        low_gas_price: 0.151,
-        average_gas_price: 0.151,
-        high_gas_price: 0.151,
-      },
-    ],
-  },
-  staking: {
-    staking_tokens: [
-      {
-        denom: "uinit",
-      },
-    ],
-  },
-  logo_URIs: {
-    png: "",
-    svg: "",
+export const initiatestnet: Chain[] = [
+  {
+    $schema: "../chain.schema.json",
+    chain_name: "initiatestnet",
+    status: "live",
+    network_type: "testnet",
+    pretty_name: "Initia Testnet",
+    chain_id: "stone-10",
+    bech32_prefix: "init",
+    daemon_name: "initd",
+    node_home: "$HOME/.init",
+    key_algos: ["secp256k1"],
+    slip44: 118,
+    fees: {
+      fee_tokens: [
+        {
+          denom: "uinit",
+          fixed_min_gas_price: 0,
+          low_gas_price: 0.151,
+          average_gas_price: 0.151,
+          high_gas_price: 0.151,
+        },
+      ],
+    },
+    staking: {
+      staking_tokens: [
+        {
+          denom: "uinit",
+        },
+      ],
+    },
+    logo_URIs: {
+      png: "",
+      svg: "",
+    },
+    apis: {
+      rpc: [
+        {
+          address: "https://stone-rpc.initia.tech:443",
+        },
+      ],
+      rest: [
+        {
+          address: "https://stone-rest.initia.tech",
+        },
+      ],
+    },
   },
-  apis: {
-    rpc: [
-      {
-        address: "https://stone-rpc.initia.tech:443",
-      },
-    ],
-    rest: [
-      {
-        address: "https://stone-rest.initia.tech",
-      },
-    ],
+  {
+    $schema: "../chain.schema.json",
+    chain_name: "initiatestnet",
+    status: "live",
+    network_type: "testnet",
+    pretty_name: "Initia Testnet",
+    chain_id: "stone-11",
+    bech32_prefix: "init",
+    daemon_name: "initd",
+    node_home: "$HOME/.init",
+    key_algos: ["secp256k1"],
+    slip44: 118,
+    fees: {
+      fee_tokens: [
+        {
+          denom: "uinit",
+          fixed_min_gas_price: 0,
+          low_gas_price: 0.151,
+          average_gas_price: 0.151,
+          high_gas_price: 0.151,
+        },
+      ],
+    },
+    staking: {
+      staking_tokens: [
+        {
+          denom: "uinit",
+        },
+      ],
+    },
+    logo_URIs: {
+      png: "",
+      svg: "",
+    },
+    apis: {
+      rpc: [
+        {
+          address: "https://stone-rpc.initia.tech:443",
+        },
+      ],
+      rest: [
+        {
+          address: "https://stone-rest.initia.tech",
+        },
+      ],
+    },
   },
-};
+];
 
 export const initiatestnetAssets: AssetList = {
   $schema: "../assetlist.schema.json",
diff --git a/src/lib/providers/cosmos-kit/index.tsx b/src/lib/providers/cosmos-kit/index.tsx
index 52bef39e8..418629e90 100644
--- a/src/lib/providers/cosmos-kit/index.tsx
+++ b/src/lib/providers/cosmos-kit/index.tsx
@@ -41,7 +41,7 @@ export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <Provider
-      chains={[...chains, localosmosis, sei, terra2testnet, initiatestnet]}
+      chains={[...chains, localosmosis, sei, terra2testnet, ...initiatestnet]}
       assetLists={[
         ...assets,
         localosmosisAsset,

From ebb5239febb6bbccf192d4625233d194c8c47d58 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 20 Oct 2023 11:45:29 +0700
Subject: [PATCH 217/368] fix: add limit 1

---
 src/lib/gql/gql.ts      | 6 +++---
 src/lib/gql/graphql.ts  | 5 +++++
 src/lib/query/module.ts | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index e21b22c22..e9f77292b 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -61,7 +61,7 @@ const documents = {
     types.GetModuleHistoriesQueryDocument,
   "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetModuleHistoriesCountQueryDocument,
-  '\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n':
+  '\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n':
     types.GetModuleInitialPublishInfoQueryDocument,
   "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n":
     types.GetPoolListDocument,
@@ -201,8 +201,8 @@ export function graphql(
   source: "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: '\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
-): typeof documents['\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
+  source: '\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
+): typeof documents['\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
 export function graphql(
   source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
 ): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index afa9823a1..3f38d6891 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -19813,6 +19813,11 @@ export const GetModuleInitialPublishInfoQueryDocument = {
                         ],
                       },
                     },
+                    {
+                      kind: "Argument",
+                      name: { kind: "Name", value: "limit" },
+                      value: { kind: "IntValue", value: "1" },
+                    },
                   ],
                   selectionSet: {
                     kind: "SelectionSet",
diff --git a/src/lib/query/module.ts b/src/lib/query/module.ts
index dd386666e..0f81c9791 100644
--- a/src/lib/query/module.ts
+++ b/src/lib/query/module.ts
@@ -62,6 +62,7 @@ export const getModuleInitialPublishInfoQueryDocument = graphql(`
           proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }
         }
         order_by: { proposal_id: asc }
+        limit: 1
       ) {
         proposal {
           id

From c5867dbfe4e36b8a0b95a74d22edd549e07a8773 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 20 Oct 2023 14:11:34 +0700
Subject: [PATCH 218/368] chore: update rpc, lcd

---
 src/config/chain/initia.ts              | 10 +--
 src/lib/chain-registry/initiatestnet.ts | 81 ++++++++++++++++---------
 src/lib/providers/cosmos-kit/index.tsx  |  2 +-
 3 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index b1821e66e..f62cc5e43 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -6,7 +6,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
   "stone-10": {
     chain: "initia",
     registryChainName: "initiatestnet",
-    prettyName: "Initia Testnet",
+    prettyName: "Initia Testnet 10",
     lcd: "https://stone-rest.initia.tech",
     rpc: "https://stone-rpc.initia.tech:443",
     indexer: "https://stone-10-graphql.alleslabs.dev/v1/graphql",
@@ -53,10 +53,10 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
   },
   "stone-11": {
     chain: "initia",
-    registryChainName: "initiatestnet",
-    prettyName: "Initia Testnet",
-    lcd: "https://stone-rest.initia.tech",
-    rpc: "https://stone-rpc.initia.tech:443",
+    registryChainName: "initiatestnet11",
+    prettyName: "Initia Testnet 11",
+    lcd: "https://next-stone-rest.initia.tech",
+    rpc: "https://next-stone-rpc.initia.tech:443",
     indexer: "https://stone-11-graphql.alleslabs.dev/v1/graphql",
     api: "https://celatone-api.alleslabs.dev",
     wallets: [...keplrWallets],
diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index db4fc6c9c..3470f4e28 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -6,7 +6,7 @@ export const initiatestnet: Chain[] = [
     chain_name: "initiatestnet",
     status: "live",
     network_type: "testnet",
-    pretty_name: "Initia Testnet",
+    pretty_name: "Initia Testnet 10",
     chain_id: "stone-10",
     bech32_prefix: "init",
     daemon_name: "initd",
@@ -50,10 +50,10 @@ export const initiatestnet: Chain[] = [
   },
   {
     $schema: "../chain.schema.json",
-    chain_name: "initiatestnet",
+    chain_name: "initiatestnet11",
     status: "live",
     network_type: "testnet",
-    pretty_name: "Initia Testnet",
+    pretty_name: "Initia Testnet 11",
     chain_id: "stone-11",
     bech32_prefix: "init",
     daemon_name: "initd",
@@ -85,38 +85,63 @@ export const initiatestnet: Chain[] = [
     apis: {
       rpc: [
         {
-          address: "https://stone-rpc.initia.tech:443",
+          address: "https://next-stone-rpc.initia.tech:443",
         },
       ],
       rest: [
         {
-          address: "https://stone-rest.initia.tech",
+          address: "https://next-stone-rest.initia.tech",
         },
       ],
     },
   },
 ];
 
-export const initiatestnetAssets: AssetList = {
-  $schema: "../assetlist.schema.json",
-  chain_name: "initiatestnet",
-  assets: [
-    {
-      description: "The native staking token of Initia.",
-      denom_units: [
-        {
-          denom: "uinit",
-          exponent: 0,
-        },
-        {
-          denom: "init",
-          exponent: 6,
-        },
-      ],
-      base: "uinit",
-      name: "Init",
-      display: "init",
-      symbol: "INIT",
-    },
-  ],
-};
+export const initiatestnetAssets: AssetList[] = [
+  {
+    $schema: "../assetlist.schema.json",
+    chain_name: "initiatestnet",
+    assets: [
+      {
+        description: "The native staking token of Initia.",
+        denom_units: [
+          {
+            denom: "uinit",
+            exponent: 0,
+          },
+          {
+            denom: "init",
+            exponent: 6,
+          },
+        ],
+        base: "uinit",
+        name: "Init",
+        display: "init",
+        symbol: "INIT",
+      },
+    ],
+  },
+  {
+    $schema: "../assetlist.schema.json",
+    chain_name: "initiatestnet11",
+    assets: [
+      {
+        description: "The native staking token of Initia.",
+        denom_units: [
+          {
+            denom: "uinit",
+            exponent: 0,
+          },
+          {
+            denom: "init",
+            exponent: 6,
+          },
+        ],
+        base: "uinit",
+        name: "Init",
+        display: "init",
+        symbol: "INIT",
+      },
+    ],
+  },
+];
diff --git a/src/lib/providers/cosmos-kit/index.tsx b/src/lib/providers/cosmos-kit/index.tsx
index 418629e90..389085c64 100644
--- a/src/lib/providers/cosmos-kit/index.tsx
+++ b/src/lib/providers/cosmos-kit/index.tsx
@@ -47,7 +47,7 @@ export const ChainProvider = ({ children }: { children: React.ReactNode }) => {
         localosmosisAsset,
         seiAssets,
         terra2testnetAssets,
-        initiatestnetAssets,
+        ...initiatestnetAssets,
       ]}
       wallets={wallets}
       endpointOptions={{

From 6e5d70f42fe7138a334aa89fc0d24e3ee382ef91 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 20 Oct 2023 15:57:13 +0700
Subject: [PATCH 219/368] fix: remove unused

---
 src/lib/services/searchService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index b4ef2d09a..c596301af 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -148,7 +148,7 @@ export const useSearchHandler = (
   return {
     results: [
       addressResult,
-      enableModuleFetching && moduleData && "Module Path",
+      moduleData && "Module Path",
       txData && "Transaction Hash",
       codeData && "Code ID",
       blockData && "Block",

From 7e81076580e126992c6be09fa543c57b9496cb7d Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 20 Oct 2023 16:04:19 +0700
Subject: [PATCH 220/368] docs: edit changelog

---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bdd03bae7..aec35d9e5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -122,7 +122,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
 - [#570](https://github.com/alleslabs/celatone-frontend/pull/570) Use native tokens in attached funds
 - [#567](https://github.com/alleslabs/celatone-frontend/pull/567) Fix attached funds in code snippet
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text

From 2ad98627c9ee36ccf73f7fee0decec4f79fa9a5f Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 20 Oct 2023 16:29:37 +0700
Subject: [PATCH 221/368] fix: moduleService path

---
 src/lib/services/searchService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index c596301af..be4ef0d28 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -14,7 +14,7 @@ import { isCodeId, isHexAddress, splitModule } from "lib/utils";
 import { useBlockInfoQuery } from "./blockService";
 import { useCodeDataByCodeId } from "./codeService";
 import { queryContract } from "./contract";
-import { useAccountModules } from "./moduleService";
+import { useAccountModules } from "./move/moduleService";
 import { useAddressByICNSName, useICNSNamesByAddress } from "./nameService";
 import type { ICNSNamesResponse } from "./ns";
 import { usePoolByPoolId } from "./poolService";

From 9fa0ed859811a704baaf47b993063b73f3eab22b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 20 Oct 2023 16:56:25 +0700
Subject: [PATCH 222/368] fix: moduleService path

---
 src/lib/services/searchService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index c596301af..be4ef0d28 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -14,7 +14,7 @@ import { isCodeId, isHexAddress, splitModule } from "lib/utils";
 import { useBlockInfoQuery } from "./blockService";
 import { useCodeDataByCodeId } from "./codeService";
 import { queryContract } from "./contract";
-import { useAccountModules } from "./moduleService";
+import { useAccountModules } from "./move/moduleService";
 import { useAddressByICNSName, useICNSNamesByAddress } from "./nameService";
 import type { ICNSNamesResponse } from "./ns";
 import { usePoolByPoolId } from "./poolService";

From fc9045ac7b932f7eabacfbe851f2a68170cbf114 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 25 Oct 2023 11:20:14 +0700
Subject: [PATCH 223/368] feat: bump package

---
 CHANGELOG.md                                  |  1 +
 package.json                                  |  4 +-
 .../abi/args-form/field/ArgFieldWidget.tsx    | 39 ++++++++++++++++---
 .../abi/args-form/field/constants.ts          | 12 ++++++
 .../components/abi/args-form/field/index.tsx  |  7 +++-
 .../components/abi/args-form/field/utils.ts   | 31 ++++++++++++++-
 src/lib/services/move/moduleService.ts        |  3 +-
 src/lib/utils/abi.ts                          | 16 +++++---
 yarn.lock                                     | 18 ++++-----
 9 files changed, 103 insertions(+), 28 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75cb183eb..b57e1db86 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#581](https://github.com/alleslabs/celatone-frontend/pull/581) Support new move input i.e., object, fixed_point, and decimal
 - [#562](https://github.com/alleslabs/celatone-frontend/pull/562) Support searching with hex address and module path
 - [#572](https://github.com/alleslabs/celatone-frontend/pull/572) Wireup module publish details
 - [#558](https://github.com/alleslabs/celatone-frontend/pull/558) Wireup module transaction history table
diff --git a/package.json b/package.json
index 8663b9cff..54999992c 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "@emotion/styled": "^11",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
-    "@initia/initia.js": "0.1.8",
-    "@initia/initia.proto": "0.1.11",
+    "@initia/initia.js": "0.1.10",
+    "@initia/initia.proto": "0.1.12",
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index 8d01db13b..a54dd5749 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -2,14 +2,25 @@ import { Input, Textarea } from "@chakra-ui/react";
 import { Select } from "chakra-react-select";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import { useExampleAddresses } from "lib/app-provider";
+import { useCurrentChain, useExampleAddresses } from "lib/app-provider";
 import type { HumanAddr, Nullable } from "lib/types";
 
-import { UINT_TYPES, STRING_TYPE } from "./constants";
+import {
+  UINT_TYPES,
+  STRING_TYPE,
+  OBJECT_TYPE,
+  FIXED_POINT_TYPES,
+  DECIMAL_TYPES,
+} from "./constants";
 
-const getInputPlaceholder = (type: string, isNull: boolean) => {
+const getInputPlaceholder = (
+  type: string,
+  isNull: boolean,
+  addressPrefix: string
+) => {
   if (type === STRING_TYPE && !isNull)
     return "Left blank to send as empty string";
+  if (type.startsWith(OBJECT_TYPE)) return `0xabc4... or ${addressPrefix}1...`;
   return " ";
 };
 
@@ -22,10 +33,16 @@ const getVectorPlaceholder = (
   const [, elementType] = type.split(/<(.*)>/);
 
   if (UINT_TYPES.includes(elementType)) return "[1, 2, 3]";
-  if (elementType === "address") return `[0x1, ${sampleAddresses}]`;
+  if (elementType === "address" || elementType.startsWith(OBJECT_TYPE))
+    return `[0x1, ${sampleAddresses}]`;
   if (elementType === STRING_TYPE)
     return "[some first string, some second string]";
   if (elementType === "bool") return "[true, false]";
+  if (
+    FIXED_POINT_TYPES.includes(elementType) ||
+    DECIMAL_TYPES.includes(elementType)
+  )
+    return "[1, 1.2, 1.23, 12.34]";
   return `[${elementType}]`;
 };
 
@@ -45,13 +62,23 @@ export const ArgFieldWidget = ({
   value,
   onChange,
 }: ArgFieldWidgetProps) => {
+  const {
+    chain: { bech32_prefix: prefix },
+  } = useCurrentChain();
   const { user: exampleAddress } = useExampleAddresses();
 
-  if (UINT_TYPES.includes(type) || type === "address" || type === STRING_TYPE)
+  if (
+    UINT_TYPES.includes(type) ||
+    type === "address" ||
+    type === STRING_TYPE ||
+    type.startsWith(OBJECT_TYPE) ||
+    FIXED_POINT_TYPES.includes(type) ||
+    DECIMAL_TYPES.includes(type)
+  )
     return (
       <Input
         size="md"
-        placeholder={getInputPlaceholder(type, value === null)}
+        placeholder={getInputPlaceholder(type, value === null, prefix)}
         value={value ?? ""}
         onChange={onChange}
       />
diff --git a/src/lib/components/abi/args-form/field/constants.ts b/src/lib/components/abi/args-form/field/constants.ts
index 28e1dd6e0..b26d879e9 100644
--- a/src/lib/components/abi/args-form/field/constants.ts
+++ b/src/lib/components/abi/args-form/field/constants.ts
@@ -1,3 +1,15 @@
 export const UINT_TYPES = ["u8", "u16", "u32", "u64", "u128", "u256"];
 
 export const STRING_TYPE = "0x1::string::String";
+
+export const OBJECT_TYPE = "0x1::object::Object";
+
+export const FIXED_POINT_TYPES = [
+  "0x1::fixed_point32::FixedPoint32",
+  "0x1::fixed_point64::FixedPoint64",
+];
+
+export const DECIMAL_TYPES = [
+  "0x1::decimal128::Decimal128",
+  "0x1::decimal256::Decimal256",
+];
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index fb5188185..e1394349d 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -14,7 +14,7 @@ import { useValidateAddress } from "lib/app-provider";
 import type { AbiFormData } from "lib/types";
 
 import { ArgFieldWidget } from "./ArgFieldWidget";
-import { STRING_TYPE } from "./constants";
+import { OBJECT_TYPE, STRING_TYPE } from "./constants";
 import { getRules } from "./utils";
 
 interface ArgFieldTemplateProps {
@@ -61,7 +61,10 @@ export const ArgFieldTemplate = ({
       <FormControl
         className={`${size}-form`}
         variant={
-          (type === STRING_TYPE || type.startsWith("vector")) && !isNull
+          (type === STRING_TYPE ||
+            type.startsWith("vector") ||
+            type.startsWith(OBJECT_TYPE)) &&
+          !isNull
             ? "fixed-floating"
             : "floating"
         }
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
index ae54b30ec..cf9526b3b 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -4,8 +4,9 @@ import { parseInt } from "lodash";
 import type { FieldValues, UseControllerProps } from "react-hook-form";
 
 import type { Option } from "lib/types";
+import { getArgType } from "lib/utils";
 
-import { UINT_TYPES } from "./constants";
+import { DECIMAL_TYPES, OBJECT_TYPE, UINT_TYPES } from "./constants";
 
 const validateNull = (v: Option<string>) =>
   v !== undefined ? undefined : "cannot be null";
@@ -29,6 +30,22 @@ const validateAddress =
   (isValidArgAddress: (input: string) => boolean) => (v: string) =>
     isValidArgAddress(v) ? undefined : "Invalid address";
 
+const validateDecimal = (bcsDecimalType: string) => (v: string) => {
+  const [integer, decimal] = v.split(".");
+  if (decimal && decimal.length > 18) return "Decimal length must be <= 18";
+  try {
+    const value = big(integer)
+      .times("1000000000000000000")
+      .add(decimal ?? "0");
+    const maxValue = big(2).pow(parseInt(bcsDecimalType.slice(7)));
+    if (value.lt(0) || value.gte(maxValue)) throw new Error();
+    return undefined;
+  } catch {
+    return `Input must be ‘${bcsDecimalType}’`;
+  }
+  return undefined;
+};
+
 const validateVector = (
   v: string,
   vectorType: string,
@@ -90,7 +107,7 @@ export const getRules = <T extends FieldValues>(
       },
     };
   }
-  if (type === "address") {
+  if (type === "address" || type.startsWith(OBJECT_TYPE)) {
     rules.validate = {
       ...rules.validate,
       address: (v: Option<string>) => {
@@ -99,6 +116,16 @@ export const getRules = <T extends FieldValues>(
       },
     };
   }
+  if (DECIMAL_TYPES.includes(type)) {
+    const bcsType = getArgType(type);
+    rules.validate = {
+      ...rules.validate,
+      [bcsType]: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateDecimal(bcsType)(v);
+      },
+    };
+  }
   if (type.startsWith("vector")) {
     rules.validate = {
       ...rules.validate,
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index 335269824..cb0c73916 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -150,8 +150,7 @@ export const useFunctionView = ({
   onSuccess?: (data: string) => void;
   onError?: (err: AxiosError<RpcQueryError>) => void;
 }): UseQueryResult<string> => {
-  // TODO: handle POST in celatone API
-  const baseEndpoint = "https://stone-rest.initia.tech";
+  const baseEndpoint = useBaseApiRoute("rest");
   const queryFn: QueryFunction<string> = () =>
     getFunctionView(baseEndpoint, moduleAddress, moduleName, fn, abiData);
   return useQuery(
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index fe0e48c08..bc5291344 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -55,10 +55,16 @@ export const getAbiInitialData = (length: number) =>
 // ------------------------------------------//
 // -----------------MOVE ARGS----------------//
 // ------------------------------------------//
-const getArgType = (argType: string) =>
-  argType
-    .replaceAll("0x1::string::String", "string")
-    .replaceAll("0x1::option::Option", "option");
+export const getArgType = (argType: string) => {
+  if (argType === "0x1::string::String") return BCS.STRING;
+  if (argType.startsWith("0x1::option::Option")) return BCS.OPTION;
+  if (argType.startsWith("0x1::object::Object")) return BCS.OBJECT;
+  if (argType === "0x1::fixed_point32::FixedPoint32") return BCS.FIXED_POINT32;
+  if (argType === "0x1::fixed_point64::FixedPoint64") return BCS.FIXED_POINT64;
+  if (argType === "0x1::decimal128::Decimal128") return BCS.DECIMAL128;
+  if (argType === "0x1::decimal256::Decimal256") return BCS.DECIMAL256;
+  return argType;
+};
 
 const getArgValue = ({
   type,
@@ -79,7 +85,7 @@ const getArgValue = ({
         ? values.map((element) => element.toLowerCase() === "true")
         : values;
     }
-    if (type === "bool") return value === "true";
+    if (type === "bool") return value.toLowerCase() === "true";
     return value.trim();
   } catch (e) {
     return "";
diff --git a/yarn.lock b/yarn.lock
index 8300a9ae6..e1d69a43b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3431,12 +3431,12 @@
   dependencies:
     browser-headers "^0.4.1"
 
-"@initia/initia.js@0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.8.tgz#f1d1d12a37788054061b2e5f9db55c33dcc5f67c"
-  integrity sha512-Q7GhXHgIZ3th6k2vou+e+CO4C5JA/JeA6w3oP/kb2cxbqOAOM1+ybN/8oMtHNApxh/gpmCWUXi7axHV5v/91UA==
+"@initia/initia.js@0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.10.tgz#cd7549a0224974d15bf225cbe057a0e112cd8572"
+  integrity sha512-qv3DPuXUfvPvWaQp/9MNgut9JbjAsflcPIFl4gUlN7tYn9re8FlqRxBjhCuIVBwOvyExVRInnCjacW26t7la9A==
   dependencies:
-    "@initia/initia.proto" "^0.1.11"
+    "@initia/initia.proto" "^0.1.12"
     "@ledgerhq/hw-transport" "^6.27.12"
     "@ledgerhq/hw-transport-webhid" "^6.27.12"
     "@ledgerhq/hw-transport-webusb" "^6.27.12"
@@ -3453,10 +3453,10 @@
     tmp "^0.2.1"
     ws "^7.5.9"
 
-"@initia/initia.proto@0.1.11", "@initia/initia.proto@^0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.11.tgz#39016bbb4d15f06aaec17e56d6f431ddadc600ce"
-  integrity sha512-G9HRTy5xfza6hTjYLuLgcmJWjSDsnLXnc2HvWceDcaSlHp212rMH07+gpazwY0L6aCm3uWyqLh4Yig60L3AaRA==
+"@initia/initia.proto@0.1.12", "@initia/initia.proto@^0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.12.tgz#bfef7f9fe2b8dfa39364a30d1e497ed214029f55"
+  integrity sha512-dJkCgMyIonVDdWWmcAkCLx7woejp0EWbC9EXT/3xHxXw+IiZJrNBJOzY2wAjOBfOwC7n7HCJkpFtp2i2rumuTQ==
   dependencies:
     "@improbable-eng/grpc-web" "^0.15.0"
     google-protobuf "^3.21.0"

From ff9578b06aa5530aa9b068b271075c9834232ef1 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 25 Oct 2023 11:53:21 +0700
Subject: [PATCH 224/368] fix: add helpertext

---
 src/lib/components/abi/args-form/field/index.tsx         | 9 +++++++--
 .../components/abi/args-form/field/utils/helperText.ts   | 7 +++++++
 src/lib/components/abi/args-form/field/utils/index.ts    | 2 ++
 .../abi/args-form/field/{utils.ts => utils/rules.ts}     | 8 ++++----
 4 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/abi/args-form/field/utils/helperText.ts
 create mode 100644 src/lib/components/abi/args-form/field/utils/index.ts
 rename src/lib/components/abi/args-form/field/{utils.ts => utils/rules.ts} (95%)

diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index e1394349d..eb95ab215 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -4,6 +4,7 @@ import {
   Checkbox,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Text,
 } from "@chakra-ui/react";
@@ -15,7 +16,7 @@ import type { AbiFormData } from "lib/types";
 
 import { ArgFieldWidget } from "./ArgFieldWidget";
 import { OBJECT_TYPE, STRING_TYPE } from "./constants";
-import { getRules } from "./utils";
+import { getHelperText, getRules } from "./utils";
 
 interface ArgFieldTemplateProps {
   index: number;
@@ -85,10 +86,14 @@ export const ArgFieldTemplate = ({
           {param}
         </FormLabel>
 
-        {isError && (
+        {isError ? (
           <FormErrorMessage className="error-text" mt={1}>
             {error.message}
           </FormErrorMessage>
+        ) : (
+          <FormHelperText className="helper-text" mt={1}>
+            {getHelperText(type)}
+          </FormHelperText>
         )}
       </FormControl>
       {isOptional && (
diff --git a/src/lib/components/abi/args-form/field/utils/helperText.ts b/src/lib/components/abi/args-form/field/utils/helperText.ts
new file mode 100644
index 000000000..ad2014403
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/utils/helperText.ts
@@ -0,0 +1,7 @@
+import { FIXED_POINT_TYPES } from "../constants";
+
+export const getHelperText = (type: string) => {
+  if (FIXED_POINT_TYPES.includes(type))
+    return "Input might be altered due to fixed point behavior";
+  return undefined;
+};
diff --git a/src/lib/components/abi/args-form/field/utils/index.ts b/src/lib/components/abi/args-form/field/utils/index.ts
new file mode 100644
index 000000000..6be6ac50d
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/utils/index.ts
@@ -0,0 +1,2 @@
+export * from "./helperText";
+export * from "./rules";
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
similarity index 95%
rename from src/lib/components/abi/args-form/field/utils.ts
rename to src/lib/components/abi/args-form/field/utils/rules.ts
index cf9526b3b..a64183414 100644
--- a/src/lib/components/abi/args-form/field/utils.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -3,11 +3,10 @@ import big from "big.js";
 import { parseInt } from "lodash";
 import type { FieldValues, UseControllerProps } from "react-hook-form";
 
+import { DECIMAL_TYPES, OBJECT_TYPE, UINT_TYPES } from "../constants";
 import type { Option } from "lib/types";
 import { getArgType } from "lib/utils";
 
-import { DECIMAL_TYPES, OBJECT_TYPE, UINT_TYPES } from "./constants";
-
 const validateNull = (v: Option<string>) =>
   v !== undefined ? undefined : "cannot be null";
 
@@ -32,11 +31,12 @@ const validateAddress =
 
 const validateDecimal = (bcsDecimalType: string) => (v: string) => {
   const [integer, decimal] = v.split(".");
-  if (decimal && decimal.length > 18) return "Decimal length must be <= 18";
+  if (decimal && decimal.length > 18)
+    return "Decimal length must be less than 18";
   try {
     const value = big(integer)
       .times("1000000000000000000")
-      .add(decimal ?? "0");
+      .add(decimal || "0");
     const maxValue = big(2).pow(parseInt(bcsDecimalType.slice(7)));
     if (value.lt(0) || value.gte(maxValue)) throw new Error();
     return undefined;

From 799a982da77d9aa2557b830c2cf2ef471329bbf2 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 25 Oct 2023 14:00:47 +0700
Subject: [PATCH 225/368] fix: bump pkgs

---
 package.json |  4 ++--
 yarn.lock    | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 8663b9cff..54999992c 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "@emotion/styled": "^11",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
-    "@initia/initia.js": "0.1.8",
-    "@initia/initia.proto": "0.1.11",
+    "@initia/initia.js": "0.1.10",
+    "@initia/initia.proto": "0.1.12",
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
diff --git a/yarn.lock b/yarn.lock
index 8300a9ae6..e1d69a43b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3431,12 +3431,12 @@
   dependencies:
     browser-headers "^0.4.1"
 
-"@initia/initia.js@0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.8.tgz#f1d1d12a37788054061b2e5f9db55c33dcc5f67c"
-  integrity sha512-Q7GhXHgIZ3th6k2vou+e+CO4C5JA/JeA6w3oP/kb2cxbqOAOM1+ybN/8oMtHNApxh/gpmCWUXi7axHV5v/91UA==
+"@initia/initia.js@0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.10.tgz#cd7549a0224974d15bf225cbe057a0e112cd8572"
+  integrity sha512-qv3DPuXUfvPvWaQp/9MNgut9JbjAsflcPIFl4gUlN7tYn9re8FlqRxBjhCuIVBwOvyExVRInnCjacW26t7la9A==
   dependencies:
-    "@initia/initia.proto" "^0.1.11"
+    "@initia/initia.proto" "^0.1.12"
     "@ledgerhq/hw-transport" "^6.27.12"
     "@ledgerhq/hw-transport-webhid" "^6.27.12"
     "@ledgerhq/hw-transport-webusb" "^6.27.12"
@@ -3453,10 +3453,10 @@
     tmp "^0.2.1"
     ws "^7.5.9"
 
-"@initia/initia.proto@0.1.11", "@initia/initia.proto@^0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.11.tgz#39016bbb4d15f06aaec17e56d6f431ddadc600ce"
-  integrity sha512-G9HRTy5xfza6hTjYLuLgcmJWjSDsnLXnc2HvWceDcaSlHp212rMH07+gpazwY0L6aCm3uWyqLh4Yig60L3AaRA==
+"@initia/initia.proto@0.1.12", "@initia/initia.proto@^0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.12.tgz#bfef7f9fe2b8dfa39364a30d1e497ed214029f55"
+  integrity sha512-dJkCgMyIonVDdWWmcAkCLx7woejp0EWbC9EXT/3xHxXw+IiZJrNBJOzY2wAjOBfOwC7n7HCJkpFtp2i2rumuTQ==
   dependencies:
     "@improbable-eng/grpc-web" "^0.15.0"
     google-protobuf "^3.21.0"

From 87a08ab1727ea15dc8a52553416ac76034c0ffac Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 25 Oct 2023 14:19:00 +0700
Subject: [PATCH 226/368] fix: temp remove validate object

---
 src/lib/components/abi/args-form/field/utils/rules.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/abi/args-form/field/utils/rules.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
index a64183414..1e3b055e7 100644
--- a/src/lib/components/abi/args-form/field/utils/rules.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -3,7 +3,7 @@ import big from "big.js";
 import { parseInt } from "lodash";
 import type { FieldValues, UseControllerProps } from "react-hook-form";
 
-import { DECIMAL_TYPES, OBJECT_TYPE, UINT_TYPES } from "../constants";
+import { DECIMAL_TYPES, UINT_TYPES } from "../constants";
 import type { Option } from "lib/types";
 import { getArgType } from "lib/utils";
 
@@ -64,6 +64,8 @@ const validateVector = (
   if (elementType === "bool") validateElement = validateBool;
   if (elementType === "address")
     validateElement = validateAddress(isValidArgAddress);
+  if (DECIMAL_TYPES.includes(elementType))
+    validateElement = validateDecimal(getArgType(elementType));
   // TODO: handle Vector?
 
   let error: Option<string>;
@@ -107,7 +109,7 @@ export const getRules = <T extends FieldValues>(
       },
     };
   }
-  if (type === "address" || type.startsWith(OBJECT_TYPE)) {
+  if (type === "address") {
     rules.validate = {
       ...rules.validate,
       address: (v: Option<string>) => {

From 2f25c221ef3cd973351ad29f1e22da09ec993945 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 25 Oct 2023 14:50:47 +0700
Subject: [PATCH 227/368] fix: null error

---
 src/lib/app-provider/hooks/useAddress.ts      |  7 +++-
 .../components/abi/args-form/field/index.tsx  | 20 +++++++----
 .../abi/args-form/field/utils/rules.ts        | 36 ++++++++++++-------
 src/lib/utils/validate.ts                     | 14 ++++++++
 4 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index 220475716..bfeee14c0 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -2,7 +2,7 @@ import { fromBech32 } from "@cosmjs/encoding";
 import { useCallback, useMemo } from "react";
 
 import type { Option } from "lib/types";
-import { isHexAddress } from "lib/utils";
+import { isHexAddress, isHexModuleAddress } from "lib/utils";
 
 import { useCurrentChain } from "./useCurrentChain";
 import { useExampleAddresses } from "./useExampleAddresses";
@@ -140,5 +140,10 @@ export const useValidateAddress = () => {
         !address.startsWith(bech32Prefix) && isHexAddress(address),
       [bech32Prefix]
     ),
+    validateHexModuleAddress: useCallback(
+      (address: string) =>
+        !address.startsWith(bech32Prefix) && isHexModuleAddress(address),
+      [bech32Prefix]
+    ),
   };
 };
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index eb95ab215..0c5bba4fe 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -30,20 +30,28 @@ export const ArgFieldTemplate = ({
   control,
 }: ArgFieldTemplateProps) => {
   const [isEditted, setIsEditted] = useState(false);
-  const { validateUserAddress, validateContractAddress, validateHexAddress } =
-    useValidateAddress();
+  const {
+    validateUserAddress,
+    validateContractAddress,
+    validateHexAddress,
+    validateHexModuleAddress,
+  } = useValidateAddress();
 
   const isValidArgAddress = useCallback(
     (input: string) =>
-      validateUserAddress(input) === null ||
+      validateUserAddress(input) === null || validateHexAddress(input),
+    [validateHexAddress, validateUserAddress]
+  );
+  const isValidArgObject = useCallback(
+    (input: string) =>
       validateContractAddress(input) === null ||
-      validateHexAddress(input),
-    [validateContractAddress, validateHexAddress, validateUserAddress]
+      validateHexModuleAddress(input),
+    [validateContractAddress, validateHexModuleAddress]
   );
 
   const isOptional = param.startsWith("0x1::option::Option");
   const type = isOptional ? param.split(/<(.*)>/)[1] : param;
-  const rules = getRules(type, isOptional, isValidArgAddress);
+  const rules = getRules(type, isOptional, isValidArgAddress, isValidArgObject);
 
   const {
     field: { value, onChange, ...fieldProps },
diff --git a/src/lib/components/abi/args-form/field/utils/rules.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
index 1e3b055e7..805b3bc84 100644
--- a/src/lib/components/abi/args-form/field/utils/rules.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -3,8 +3,8 @@ import big from "big.js";
 import { parseInt } from "lodash";
 import type { FieldValues, UseControllerProps } from "react-hook-form";
 
-import { DECIMAL_TYPES, UINT_TYPES } from "../constants";
-import type { Option } from "lib/types";
+import { DECIMAL_TYPES, OBJECT_TYPE, UINT_TYPES } from "../constants";
+import type { Nullable, Option } from "lib/types";
 import { getArgType } from "lib/utils";
 
 const validateNull = (v: Option<string>) =>
@@ -83,7 +83,8 @@ const validateVector = (
 export const getRules = <T extends FieldValues>(
   type: string,
   isOptional: boolean,
-  isValidArgAddress: (input: string) => boolean
+  isValidArgAddress: (input: string) => boolean,
+  isValidArgObject: (input: string) => boolean
 ): UseControllerProps<T>["rules"] => {
   const rules: UseControllerProps<T>["rules"] = {};
 
@@ -95,16 +96,16 @@ export const getRules = <T extends FieldValues>(
   if (UINT_TYPES.includes(type))
     rules.validate = {
       ...rules.validate,
-      [type]: (v: Option<string>) => {
-        if (v === undefined) return undefined;
+      [type]: (v: Nullable<string>) => {
+        if (v === null) return undefined;
         return validateUint(type)(v);
       },
     };
   if (type === "bool") {
     rules.validate = {
       ...rules.validate,
-      bool: (v: Option<string>) => {
-        if (v === undefined) return undefined;
+      bool: (v: Nullable<string>) => {
+        if (v === null) return undefined;
         return validateBool(v);
       },
     };
@@ -112,18 +113,27 @@ export const getRules = <T extends FieldValues>(
   if (type === "address") {
     rules.validate = {
       ...rules.validate,
-      address: (v: Option<string>) => {
-        if (v === undefined) return undefined;
+      address: (v: Nullable<string>) => {
+        if (v === null) return undefined;
         return validateAddress(isValidArgAddress)(v);
       },
     };
   }
+  if (type.startsWith(OBJECT_TYPE)) {
+    rules.validate = {
+      ...rules.validate,
+      object: (v: Nullable<string>) => {
+        if (v === null) return undefined;
+        return validateAddress(isValidArgObject)(v);
+      },
+    };
+  }
   if (DECIMAL_TYPES.includes(type)) {
     const bcsType = getArgType(type);
     rules.validate = {
       ...rules.validate,
-      [bcsType]: (v: Option<string>) => {
-        if (v === undefined) return undefined;
+      [bcsType]: (v: Nullable<string>) => {
+        if (v === null) return undefined;
         return validateDecimal(bcsType)(v);
       },
     };
@@ -131,8 +141,8 @@ export const getRules = <T extends FieldValues>(
   if (type.startsWith("vector")) {
     rules.validate = {
       ...rules.validate,
-      [type]: (v: Option<string>) => {
-        if (v === undefined) return undefined;
+      [type]: (v: Nullable<string>) => {
+        if (v === null) return undefined;
         return validateVector(v, type, isValidArgAddress);
       },
     };
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index 926de4406..8d4cc7daf 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -36,3 +36,17 @@ export const isHexAddress = (address: string): boolean => {
   }
   return true;
 };
+
+export const isHexModuleAddress = (address: string): boolean => {
+  if (!/^0x[a-fA-F0-9]{1,64}$/.test(address)) {
+    return false;
+  }
+
+  const strip = padHexAddress(address as HexAddr).slice(2);
+  try {
+    fromHex(strip);
+  } catch {
+    return false;
+  }
+  return true;
+};

From f80b5cd07c104c97b1023089bf68636c10232f9d Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 25 Oct 2023 15:08:42 +0700
Subject: [PATCH 228/368] feat: move code snippet

---
 src/lib/components/modal/MoveCodeSnippet.tsx  | 304 ++++++++++++++++++
 .../{CodeSnippet.tsx => WasmCodeSnippet.tsx}  |   8 +-
 .../pages/execute/components/JsonExecute.tsx  |  11 +-
 .../components/schema-execute/ExecuteBox.tsx  |  11 +-
 .../interact/component/form/ExecuteArea.tsx   |  18 +-
 .../interact/component/form/ViewArea.tsx      |  18 +-
 src/lib/pages/query/components/JsonQuery.tsx  |  11 +-
 .../query/components/SchemaQueryComponent.tsx |  13 +-
 8 files changed, 369 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/components/modal/MoveCodeSnippet.tsx
 rename src/lib/components/modal/{CodeSnippet.tsx => WasmCodeSnippet.tsx} (98%)

diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
new file mode 100644
index 000000000..892f09c01
--- /dev/null
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -0,0 +1,304 @@
+import type { ButtonProps } from "@chakra-ui/react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  Button,
+  useDisclosure,
+  ModalCloseButton,
+  TabList,
+  Tabs,
+  TabPanels,
+  TabPanel,
+  Heading,
+  Box,
+} from "@chakra-ui/react";
+import { useMemo } from "react";
+import AceEditor from "react-ace";
+
+import { CopyButton } from "../copy";
+import { CustomIcon } from "../icon";
+import { CURR_THEME } from "env";
+import { AmpEvent, useTrack } from "lib/amplitude";
+import {
+  useCelatoneApp,
+  useCurrentChain,
+  useLCDEndpoint,
+  useRPCEndpoint,
+} from "lib/app-provider";
+import { CustomTab } from "lib/components/CustomTab";
+import type { AbiFormData, ExposedFunction, MoveAccountAddr } from "lib/types";
+import { serializeAbiData } from "lib/utils";
+
+import "ace-builds/src-noconflict/ace";
+import "ace-builds/src-noconflict/mode-sh";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-one_dark";
+import "ace-builds/src-noconflict/theme-pastel_on_dark";
+
+interface MoveCodeSnippetProps {
+  moduleAddress: MoveAccountAddr;
+  moduleName: string;
+  fn: ExposedFunction;
+  abiData: AbiFormData;
+  type: "view" | "execute";
+  ml?: ButtonProps["ml"];
+}
+
+interface FormatedData {
+  showTypeArgs: boolean;
+  showArgs: boolean;
+  formatedTypeArgs: string;
+  formatedArgs: string;
+  formatedAbiData: string;
+  typeArgsFlags: string;
+  argsFlags: string;
+}
+
+const MoveCodeSnippet = ({
+  moduleAddress,
+  moduleName,
+  fn,
+  abiData,
+  type = "view",
+  ml,
+}: MoveCodeSnippetProps) => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+  const {
+    chain: { daemon_name: daemonName },
+  } = useCurrentChain();
+  const { track } = useTrack();
+  const lcdEndpoint = useLCDEndpoint();
+  const rpcEndpoint = useRPCEndpoint();
+  const {
+    currentChainId,
+    chainConfig: {
+      gas: { gasPrice },
+    },
+  } = useCelatoneApp();
+
+  const gasPriceStr = `${gasPrice.tokenPerGas}${gasPrice.denom}`;
+
+  const {
+    showTypeArgs,
+    showArgs,
+    formatedAbiData,
+    formatedArgs,
+    formatedTypeArgs,
+    typeArgsFlags,
+    argsFlags,
+  } = useMemo<FormatedData>(() => {
+    const serializedAbiData = serializeAbiData(fn, abiData);
+    const displayTypeArgs = serializedAbiData.typeArgs.length > 0;
+    const displayArgs = serializedAbiData.args.length > 0;
+
+    return {
+      showTypeArgs: displayTypeArgs,
+      showArgs: displayArgs,
+      formatedTypeArgs: JSON.stringify(serializedAbiData.typeArgs),
+      formatedArgs: JSON.stringify(serializedAbiData.args),
+      formatedAbiData: JSON.stringify(serializedAbiData),
+      typeArgsFlags: displayTypeArgs
+        ? `\n\t--type-args '${serializedAbiData.typeArgs.join(" ")}' \\`
+        : "",
+      argsFlags: displayArgs
+        ? `\n\t--args '${serializedAbiData.args.join(" ")}' \\`
+        : "",
+    };
+  }, [abiData, fn]);
+
+  const codeSnippets: Record<
+    string,
+    { name: string; mode: string; snippet: string }[]
+  > = {
+    view: [
+      {
+        name: "Curl",
+        mode: "sh",
+        snippet: `curl '${lcdEndpoint}/initia/move/v1/accounts/${moduleAddress}/modules/${moduleName}/view_functions/${fn.name}' \\
+--data-raw '${formatedAbiData}'`,
+      },
+      {
+        name: "CLI",
+        mode: "sh",
+        snippet: `export CHAIN_ID='${currentChainId}'\n
+export MODULE_ADDRESS='${moduleAddress}'\n
+export MODULE_NAME='${moduleName}'\n
+export MODULE_FN='${fn.name}'\n
+export RPC_URL='${rpcEndpoint}'\n
+${daemonName} query move execute $MODULE_ADDRESS \\
+    $MODULE_NAME \\
+    $MODULE_FN \\${typeArgsFlags}${argsFlags}
+    --chain-id $CHAIN_ID \\
+    --node $RPC_URL`,
+      },
+      {
+        name: "InitiaJS",
+        mode: "javascript",
+        snippet: `import { LCDClient } from '@initia/initia.js'
+
+const lcd = new LCDClient('${lcdEndpoint}', {
+    chainId: '${currentChainId}',
+});
+const moduleAddress =
+"${moduleAddress}";
+const moduleName = "${moduleName}";
+const fnName = "${fn.name}";
+const viewModule = async (moduleAddress, moduleName, fnName) => {
+    const viewResult = await lcd.move.viewFunction(
+        moduleAddress,
+        moduleName,
+        fnName${showTypeArgs ? ",\n\t\t".concat(formatedTypeArgs) : ""}${
+          showArgs
+            ? (!showTypeArgs ? ",\n\t\tundefined" : "") +
+              ",\n\t\t".concat(formatedArgs)
+            : ""
+        }
+    )
+    console.log(viewResult);
+};\n
+viewModule(moduleAddress, moduleName, fnName);`,
+      },
+    ],
+    execute: [
+      {
+        name: "CLI",
+        mode: "sh",
+        snippet: `${daemonName} keys add --recover celatone\n
+export CHAIN_ID='${currentChainId}'\n
+export RPC_URL='${rpcEndpoint}'\n
+export MODULE_ADDRESS ='${moduleAddress}'\n
+export MODULE_NAME = '${moduleName}'\n
+export MODULE_FN='${fn.name}'\n
+${daemonName} tx move execute $MODULE_ADDRESS \\
+    $MODULE_NAME \\
+    $MODULE_FN \\${typeArgsFlags}${argsFlags}
+    --from celatone \\
+    --chain-id $CHAIN_ID \\
+    --node $RPC_URL \\
+    --gas auto \\
+    --gas-prices ${gasPriceStr} \\
+    --gas-adjustment 1.5`,
+      },
+      {
+        name: "InitiaJS",
+        mode: "javascript",
+        snippet: `import { LCDClient, Wallet, MnemonicKey, MsgExecute } from '@initia/initia.js';
+
+const lcd = new LCDClient('https://stone-rest.initia.tech/', {
+    chainId: '${currentChainId}',
+    gasPrices: '${gasPriceStr}',
+    gasAdjustment: '2.0',
+});
+const key = new MnemonicKey({
+    mnemonic: "<MNEMONIC>",
+});
+const wallet = new Wallet(lcd, key);
+const msg = new MsgExecute(
+    key.accAddress,
+    '${moduleAddress}',
+    '${moduleName}',
+    '${fn.name}'${showTypeArgs ? ",\n\t".concat(formatedTypeArgs) : ""}${
+          showArgs
+            ? (!showTypeArgs ? ",\n\tundefined" : "") +
+              ",\n\t".concat(formatedArgs)
+            : ""
+        }
+);
+
+const execute = async () => {
+    const signedTx = await wallet.createAndSignTx({
+        msgs: [msg],
+    });
+
+    const broadcastResult = await lcd.tx.broadcast(signedTx);
+    console.log(broadcastResult);
+};
+execute();
+        `,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <Button
+        variant="outline-accent"
+        size="md"
+        ml={ml}
+        gap={1}
+        onClick={() => {
+          track(AmpEvent.USE_CONTRACT_SNIPPET);
+          onOpen();
+        }}
+      >
+        <CustomIcon name="code" />
+        Code Snippet
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered size="4xl">
+        <ModalOverlay />
+        <ModalContent w="840px">
+          <ModalHeader>
+            <CustomIcon name="code" boxSize={6} color="gray.600" />
+            <Heading as="h5" variant="h5">
+              Code Snippet
+            </Heading>
+          </ModalHeader>
+          <ModalCloseButton color="gray.600" />
+          <ModalBody px={4} maxH="640px" overflow="scroll">
+            <Tabs>
+              <TabList borderBottom="1px solid" borderColor="gray.700">
+                {codeSnippets[type].map((item) => (
+                  <CustomTab key={`menu-${item.name}`}>{item.name}</CustomTab>
+                ))}
+              </TabList>
+              <TabPanels>
+                {codeSnippets[type].map((item) => (
+                  <TabPanel key={item.name} px={2} py={4}>
+                    <Box
+                      bgColor="background.main"
+                      p={4}
+                      borderRadius="8px"
+                      position="relative"
+                    >
+                      <AceEditor
+                        readOnly
+                        mode={item.mode}
+                        theme={CURR_THEME.jsonTheme}
+                        fontSize="14px"
+                        style={{
+                          width: "100%",
+                          background: "transparent",
+                        }}
+                        value={item.snippet}
+                        setOptions={{
+                          showGutter: false,
+                          useWorker: false,
+                          printMargin: false,
+                          wrap: true,
+                        }}
+                      />
+                      <Box position="absolute" top={4} right={4}>
+                        <CopyButton
+                          value={item.snippet}
+                          amptrackSection="code_snippet"
+                        />
+                      </Box>
+                    </Box>
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </Tabs>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default MoveCodeSnippet;
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/WasmCodeSnippet.tsx
similarity index 98%
rename from src/lib/components/modal/CodeSnippet.tsx
rename to src/lib/components/modal/WasmCodeSnippet.tsx
index 24f0e74f4..3fe879471 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/WasmCodeSnippet.tsx
@@ -40,7 +40,7 @@ import "ace-builds/src-noconflict/theme-monokai";
 import "ace-builds/src-noconflict/theme-one_dark";
 import "ace-builds/src-noconflict/theme-pastel_on_dark";
 
-interface CodeSnippetProps {
+interface WasmCodeSnippetProps {
   contractAddress: ContractAddr;
   message: string;
   type: "query" | "execute";
@@ -48,13 +48,13 @@ interface CodeSnippetProps {
   funds?: Coin[];
 }
 
-const CodeSnippet = ({
+const WasmCodeSnippet = ({
   contractAddress,
   message,
   type = "query",
   ml,
   funds = [],
-}: CodeSnippetProps) => {
+}: WasmCodeSnippetProps) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const {
     chain: { chain_name: chainName, daemon_name: daemonName },
@@ -281,4 +281,4 @@ execute();
   );
 };
 
-export default CodeSnippet;
+export default WasmCodeSnippet;
diff --git a/src/lib/pages/execute/components/JsonExecute.tsx b/src/lib/pages/execute/components/JsonExecute.tsx
index cdae57f55..1fb86663c 100644
--- a/src/lib/pages/execute/components/JsonExecute.tsx
+++ b/src/lib/pages/execute/components/JsonExecute.tsx
@@ -45,9 +45,12 @@ interface JsonExecuteProps {
   initialFunds: Coin[];
 }
 
-const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
-  ssr: false,
-});
+const WasmCodeSnippet = dynamic(
+  () => import("lib/components/modal/WasmCodeSnippet"),
+  {
+    ssr: false,
+  }
+);
 
 const assetDefault = {
   assetsSelect: defaultAsset,
@@ -282,7 +285,7 @@ export const JsonExecute = ({
             value={msg}
             amptrackSection="execute_msg"
           />
-          <CodeSnippet
+          <WasmCodeSnippet
             type="execute"
             contractAddress={contractAddress}
             message={msg}
diff --git a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
index ecb13ec62..b5825c17f 100644
--- a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
+++ b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
@@ -58,9 +58,12 @@ import {
   jsonValidate,
 } from "lib/utils";
 
-const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
-  ssr: false,
-});
+const WasmCodeSnippet = dynamic(
+  () => import("lib/components/modal/WasmCodeSnippet"),
+  {
+    ssr: false,
+  }
+);
 
 interface ExecuteBoxProps {
   msgSchema: SchemaInfo;
@@ -340,7 +343,7 @@ export const ExecuteBox = ({
                 amptrackSection="execute_msg"
                 buttonText="Copy JSON"
               />
-              <CodeSnippet
+              <WasmCodeSnippet
                 type="execute"
                 contractAddress={contractAddress}
                 message={msg}
diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index 42eb82a1f..7a31b7016 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -2,6 +2,7 @@ import { Alert, AlertDescription, Button, Flex } from "@chakra-ui/react";
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import type { StdFee } from "@cosmjs/stargate";
 import { MsgExecute as MsgExecuteModule } from "@initia/initia.js";
+import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import {
@@ -19,6 +20,13 @@ import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import type { AbiFormData, ExposedFunction, HexAddr } from "lib/types";
 import { getAbiInitialData, serializeAbiData, toEncodeObject } from "lib/utils";
 
+const MoveCodeSnippet = dynamic(
+  () => import("lib/components/modal/MoveCodeSnippet"),
+  {
+    ssr: false,
+  }
+);
+
 export const ExecuteArea = ({
   moduleAddress,
   moduleName,
@@ -174,8 +182,14 @@ export const ExecuteArea = ({
           </AlertDescription>
         </Alert>
       )}
-      <Flex alignItems="center" justify="end" mt={6}>
-        {/* <Button>TODO: CodeSnippet</Button> */}
+      <Flex alignItems="center" justify="space-between" mt={6}>
+        <MoveCodeSnippet
+          moduleAddress={moduleAddress}
+          moduleName={moduleName}
+          fn={fn}
+          abiData={data}
+          type="execute"
+        />
         <Flex direction="row" align="center" gap={2}>
           <Flex fontSize="14px" color="text.dark" alignItems="center">
             Transaction Fee:{" "}
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 5d83f3ef0..18467b4cc 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -9,6 +9,7 @@ import {
   Spinner,
   Text,
 } from "@chakra-ui/react";
+import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
 import { useIsMac } from "lib/app-provider";
@@ -26,6 +27,13 @@ import type {
 } from "lib/types";
 import { getAbiInitialData, jsonPrettify } from "lib/utils";
 
+const MoveCodeSnippet = dynamic(
+  () => import("lib/components/modal/MoveCodeSnippet"),
+  {
+    ssr: false,
+  }
+);
+
 export const ViewArea = ({
   moduleAddress,
   moduleName,
@@ -87,8 +95,14 @@ export const ViewArea = ({
           propsOnChange={setAbiData}
           propsOnErrors={setAbiErrors}
         />
-        <Flex justify="end" mt={4}>
-          {/* <Button>TODO: CodeSnippet</Button> */}
+        <Flex align="center" justify="space-between" mt={4}>
+          <MoveCodeSnippet
+            moduleAddress={moduleAddress}
+            moduleName={moduleName}
+            fn={fn}
+            abiData={abiData}
+            type="view"
+          />
           <Button
             variant="primary"
             fontSize="14px"
diff --git a/src/lib/pages/query/components/JsonQuery.tsx b/src/lib/pages/query/components/JsonQuery.tsx
index 399a0430d..2e68b10e4 100644
--- a/src/lib/pages/query/components/JsonQuery.tsx
+++ b/src/lib/pages/query/components/JsonQuery.tsx
@@ -31,9 +31,12 @@ import {
   getCurrentDate,
 } from "lib/utils";
 
-const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
-  ssr: false,
-});
+const WasmCodeSnippet = dynamic(
+  () => import("lib/components/modal/WasmCodeSnippet"),
+  {
+    ssr: false,
+  }
+);
 
 interface JsonQueryProps {
   contractAddress: ContractAddr;
@@ -153,7 +156,7 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
                 value={msg}
                 amptrackSection="query_msg"
               />
-              <CodeSnippet
+              <WasmCodeSnippet
                 type="query"
                 contractAddress={contractAddress}
                 message={msg}
diff --git a/src/lib/pages/query/components/SchemaQueryComponent.tsx b/src/lib/pages/query/components/SchemaQueryComponent.tsx
index b09216b18..7db160757 100644
--- a/src/lib/pages/query/components/SchemaQueryComponent.tsx
+++ b/src/lib/pages/query/components/SchemaQueryComponent.tsx
@@ -47,9 +47,12 @@ import {
 
 import { SchemaQueryResponse } from "./SchemaQueryResponse";
 
-const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
-  ssr: false,
-});
+const WasmCodeSnippet = dynamic(
+  () => import("lib/components/modal/WasmCodeSnippet"),
+  {
+    ssr: false,
+  }
+);
 
 interface SchemaQueryComponentProps {
   msgSchema: SchemaInfo;
@@ -175,7 +178,7 @@ export const SchemaQueryComponent = ({
                   amptrackSection="query_msg"
                   buttonText="Copy QueryMsg"
                 />
-                <CodeSnippet
+                <WasmCodeSnippet
                   type="query"
                   contractAddress={contractAddress}
                   message={msg}
@@ -235,7 +238,7 @@ export const SchemaQueryComponent = ({
                   amptrackSection="query_msg"
                   buttonText="Copy QueryMsg"
                 />
-                <CodeSnippet
+                <WasmCodeSnippet
                   type="query"
                   contractAddress={contractAddress}
                   message={JSON.stringify({ [msgSchema.title ?? ""]: {} })}

From 2d8c4d054ddcec0bb4a17028befe9a38d945168c Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 25 Oct 2023 15:20:18 +0700
Subject: [PATCH 229/368] docs: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75cb183eb..a33a66e0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#583](https://github.com/alleslabs/celatone-frontend/pull/583) Support Move code snippets
 - [#562](https://github.com/alleslabs/celatone-frontend/pull/562) Support searching with hex address and module path
 - [#572](https://github.com/alleslabs/celatone-frontend/pull/572) Wireup module publish details
 - [#558](https://github.com/alleslabs/celatone-frontend/pull/558) Wireup module transaction history table

From 68c040f1916ec9c2925edc03781a749089b4d53c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 25 Oct 2023 15:31:02 +0700
Subject: [PATCH 230/368] fix: object

---
 src/lib/components/abi/args-form/field/utils/rules.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/abi/args-form/field/utils/rules.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
index 805b3bc84..b3839056b 100644
--- a/src/lib/components/abi/args-form/field/utils/rules.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -49,7 +49,8 @@ const validateDecimal = (bcsDecimalType: string) => (v: string) => {
 const validateVector = (
   v: string,
   vectorType: string,
-  isValidArgAddress: (input: string) => boolean
+  isValidArgAddress: (input: string) => boolean,
+  isValidArgObject: (input: string) => boolean
 ) => {
   const value = v.trim();
   if (!value.startsWith("[") || !value.endsWith("]"))
@@ -64,6 +65,8 @@ const validateVector = (
   if (elementType === "bool") validateElement = validateBool;
   if (elementType === "address")
     validateElement = validateAddress(isValidArgAddress);
+  if (elementType.startsWith(OBJECT_TYPE))
+    validateElement = validateAddress(isValidArgObject);
   if (DECIMAL_TYPES.includes(elementType))
     validateElement = validateDecimal(getArgType(elementType));
   // TODO: handle Vector?
@@ -143,7 +146,7 @@ export const getRules = <T extends FieldValues>(
       ...rules.validate,
       [type]: (v: Nullable<string>) => {
         if (v === null) return undefined;
-        return validateVector(v, type, isValidArgAddress);
+        return validateVector(v, type, isValidArgAddress, isValidArgObject);
       },
     };
   }

From de5681c64366004cefa433fd9ad9c1b0d1c42f1b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 25 Oct 2023 16:10:28 +0700
Subject: [PATCH 231/368] fix: throw error when tx failed

---
 CHANGELOG.md                       |  1 +
 src/lib/app-fns/tx/common/post.tsx | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75cb183eb..36bac1610 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -130,6 +130,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#584](https://github.com/alleslabs/celatone-frontend/pull/584) Throw an error when tx failed on postTx
 - [#555](https://github.com/alleslabs/celatone-frontend/pull/555) Rewrite publish status resolver into an effect
 - [#557](https://github.com/alleslabs/celatone-frontend/pull/557) Fix see module ux writing and policy modal
 - [#554](https://github.com/alleslabs/celatone-frontend/pull/554) Fix and improve ui alignment, cta, and publish error
diff --git a/src/lib/app-fns/tx/common/post.tsx b/src/lib/app-fns/tx/common/post.tsx
index bfebff1fd..5c4acc326 100644
--- a/src/lib/app-fns/tx/common/post.tsx
+++ b/src/lib/app-fns/tx/common/post.tsx
@@ -4,12 +4,14 @@ import type {
   InstantiateResult,
   UploadResult,
 } from "@cosmjs/cosmwasm-stargate";
+import { isDeliverTxFailure } from "@cosmjs/stargate";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { formatUFee } from "lib/utils/formatter/denom";
 
+// TODO: We'll use only DeliverTxResponse later.
 type TxResult =
   | UploadResult
   | InstantiateResult
@@ -20,12 +22,23 @@ interface PostTxParams<T extends TxResult> {
   postFn: () => Promise<T>;
 }
 
+// TODO: remove later. We'll throw an error with transactionHash.
+function createDeliverTxResponseErrorMessage(
+  result: DeliverTxResponse
+): string {
+  return `Error when broadcasting tx ${result.transactionHash} at height ${result.height}. Code: ${result.code}; Raw log: ${result.rawLog}`;
+}
+
 export const postTx = <T extends TxResult>({ postFn }: PostTxParams<T>) => {
   return () =>
     postFn().then(
       // NOTE: only shown if there is a wait for the next step
       // currently not appearing since next step is already a success
       (txResult) => {
+        if ("code" in txResult && isDeliverTxFailure(txResult)) {
+          throw new Error(createDeliverTxResponseErrorMessage(txResult));
+        }
+
         return {
           value: txResult,
           phase: TxStreamPhase.BROADCAST,

From 753b80634c3ea5780dc090e07b793e46f7bcf39d Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 25 Oct 2023 16:20:30 +0700
Subject: [PATCH 232/368] fix(components): add specific type and remove type
 assertion

---
 src/lib/layout/SubHeader.tsx             |  2 +-
 src/lib/services/move/resourceService.ts | 10 +++++-----
 src/lib/types/move/resource.ts           |  5 +++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index e9ae36df4..e6eba88b8 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -25,7 +25,7 @@ const SubHeader = () => {
     { name: "Transactions", slug: "/txs", icon: "file" },
     { name: "Blocks", slug: "/blocks", icon: "block" },
   ];
-
+  // TODO Recent Modules
   // if (moveConfig.enabled)
   //   subHeaderMenu.push({
   //     name: "Modules",
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index 24931756a..3b7562e5d 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -39,19 +39,19 @@ export const useAccountResources = ({
         return {
           ...acc,
           [ownerName]: {
-            owner: ownerName,
+            owner: ownerName as MoveAccountAddr,
             resources: {
               ...ownerResources,
               [groupName]: {
                 group: groupName,
-                account: ownerName,
+                account: ownerName as MoveAccountAddr,
                 displayName: `${truncate(ownerName)}::${groupName}`,
                 items,
               },
             },
           },
         };
-      }, {} as Record<string, ResourceGroupByAccount>);
+      }, {});
 
       const groupedByName = resources.reduce<Record<string, ResourceGroup>>(
         (acc, resource) => {
@@ -64,13 +64,13 @@ export const useAccountResources = ({
             ...acc,
             [groupName]: {
               displayName: `${truncate(accountName)}::${groupName}`,
-              account: accountName,
+              account: accountName as MoveAccountAddr,
               group: groupName,
               items,
             },
           };
         },
-        {} as Record<string, ResourceGroup>
+        {}
       );
 
       return {
diff --git a/src/lib/types/move/resource.ts b/src/lib/types/move/resource.ts
index 98d0cb2bb..825d3ef3f 100644
--- a/src/lib/types/move/resource.ts
+++ b/src/lib/types/move/resource.ts
@@ -1,3 +1,4 @@
+import type { MoveAccountAddr } from "../addrs";
 import type { SnakeToCamelCaseNested } from "../converter";
 import type { Pagination } from "../rest";
 
@@ -17,12 +18,12 @@ export type InternalResource = SnakeToCamelCaseNested<ResponseResource>;
 
 export interface ResourceGroup {
   group: string;
-  account: string;
+  account: MoveAccountAddr;
   displayName: string;
   items: InternalResource[];
 }
 
 export interface ResourceGroupByAccount {
-  owner: string;
+  owner: MoveAccountAddr;
   resources: Record<string, ResourceGroup>;
 }

From 3fcbedd9bfaa39f33ed888a5cc769081c6959d5e Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 25 Oct 2023 16:49:03 +0700
Subject: [PATCH 233/368] feat: add initia faucet

---
 CHANGELOG.md               | 1 +
 src/config/chain/initia.ts | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75cb183eb..9f383df8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#585](https://github.com/alleslabs/celatone-frontend/pull/585) Add Initia Faucet
 - [#562](https://github.com/alleslabs/celatone-frontend/pull/562) Support searching with hex address and module path
 - [#572](https://github.com/alleslabs/celatone-frontend/pull/572) Wireup module publish details
 - [#558](https://github.com/alleslabs/celatone-frontend/pull/558) Wireup module transaction history table
diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index f62cc5e43..881e27db0 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -62,7 +62,8 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
     wallets: [...keplrWallets],
     features: {
       faucet: {
-        enabled: false,
+        enabled: true,
+        url: "http://initia-faucet.alleslabs.dev",
       },
       wasm: {
         enabled: false,

From c27b01088e4b6cb06b6b1cb8c01e0ed227e52b4d Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 25 Oct 2023 21:37:53 +0700
Subject: [PATCH 234/368] chore: make it variable

---
 src/config/chain/initia.ts  | 2 +-
 src/config/chain/osmosis.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index 881e27db0..c359f55c1 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -63,7 +63,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
     features: {
       faucet: {
         enabled: true,
-        url: "http://initia-faucet.alleslabs.dev",
+        url: process.env.NEXT_PUBLIC_INITIA_TESTNET_FAUCET_URL ?? "",
       },
       wasm: {
         enabled: false,
diff --git a/src/config/chain/osmosis.ts b/src/config/chain/osmosis.ts
index b41118ae1..e2a6bbe15 100644
--- a/src/config/chain/osmosis.ts
+++ b/src/config/chain/osmosis.ts
@@ -66,7 +66,7 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
     features: {
       faucet: {
         enabled: true,
-        url: "https://faucet.alleslabs.dev",
+        url: process.env.NEXT_PUBLIC_OSMOSIS_TESTNET_FAUCET_URL ?? "",
       },
       wasm: {
         enabled: true,

From 1efb0d0646205d62cc59972ae640da55ba68e190 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 25 Oct 2023 21:39:55 +0700
Subject: [PATCH 235/368] chore: change explorer link

---
 src/config/chain/initia.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index c359f55c1..155033f8c 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -95,8 +95,8 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
       maxGasLimit: 25_000_000,
     },
     explorerLink: {
-      validator: "https://app.initia.tech/validator",
-      proposal: "https://app.initia.tech/proposal",
+      validator: "https://next.app.initia.tech/validator",
+      proposal: "https://next.app.initia.tech/proposal",
     },
     extra: {},
   },

From fc04df04861b53efbc7280ab177fc91b01959cfe Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:59:27 +0700
Subject: [PATCH 236/368] fix: pad hex fn

---
 src/lib/utils/address.ts  | 6 +++---
 src/lib/utils/validate.ts | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index 5ef2a4695..3a7157256 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -20,8 +20,8 @@ export const getAddressTypeText = (addressType: AddressReturnType) => {
 export const bech32AddressToHex = (addr: HumanAddr): HexAddr =>
   "0x".concat(toHex(fromBech32(addr).data)) as HexAddr;
 
-export const padHexAddress = (hexAddr: HexAddr): HexAddr =>
-  `0x${hexAddr.slice(2).padStart(40, "0")}` as HexAddr;
+export const padHexAddress = (hexAddr: HexAddr, length: number): HexAddr =>
+  `0x${hexAddr.slice(2).padStart(length, "0")}` as HexAddr;
 
 export const unpadHexAddress = (hexAddr: HexAddr) =>
   `0x${hexAddr.slice(2).replace(/^0+/, "")}` as HexAddr;
@@ -30,6 +30,6 @@ export const hexToBech32Address = (
   prefix: string,
   hexAddr: HexAddr
 ): HumanAddr => {
-  const strip = padHexAddress(hexAddr).slice(2);
+  const strip = padHexAddress(hexAddr, 40).slice(2);
   return toBech32(prefix, fromHex(strip)) as HumanAddr;
 };
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index 8d4cc7daf..52cbe339e 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -28,7 +28,7 @@ export const isHexAddress = (address: string): boolean => {
     return false;
   }
 
-  const strip = padHexAddress(address as HexAddr).slice(2);
+  const strip = padHexAddress(address as HexAddr, 40).slice(2);
   try {
     fromHex(strip);
   } catch {
@@ -42,7 +42,7 @@ export const isHexModuleAddress = (address: string): boolean => {
     return false;
   }
 
-  const strip = padHexAddress(address as HexAddr).slice(2);
+  const strip = padHexAddress(address as HexAddr, 64).slice(2);
   try {
     fromHex(strip);
   } catch {

From d75100e931bf9483ffa62c4745272f4e8f0e3cd7 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 26 Oct 2023 11:46:47 +0700
Subject: [PATCH 237/368] fix: history order in InitRender

---
 .../pages/module-details/components/ModuleInfo.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index ec6be60c3..4d416fa86 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -55,6 +55,13 @@ const InitRender = ({
     );
   }
 
+  if (createdHeight === 0)
+    return (
+      <LabelText label="Created by">
+        <Text variant="body2">Genesis</Text>
+      </LabelText>
+    );
+
   if (initProposalTitle && initProposalId) {
     return (
       <LabelText
@@ -71,13 +78,6 @@ const InitRender = ({
     );
   }
 
-  if (createdHeight === 0)
-    return (
-      <LabelText label="Created by">
-        <Text variant="body2">Genesis</Text>
-      </LabelText>
-    );
-
   return (
     <LabelText label="Instantiate Transaction">
       <Text variant="body2">N/A</Text>

From 4969778f21449ce4dc53b877542cb0950d263848 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 26 Oct 2023 14:26:57 +0700
Subject: [PATCH 238/368] chore: fix import

---
 src/lib/services/move/resourceService.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index 3b7562e5d..1706f1e80 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -2,11 +2,11 @@ import type { QueryFunction, UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 
 import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
-import type { MoveAccountAddr } from "lib/types";
 import type {
   ResourceGroup,
   ResourceGroupByAccount,
-} from "lib/types/move/resource";
+  MoveAccountAddr,
+} from "lib/types";
 import { truncate } from "lib/utils";
 
 import { getAccountResources } from "./resource";

From 65c320319803cb8aa571e6397b3d48840be0b490 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 26 Oct 2023 14:29:49 +0700
Subject: [PATCH 239/368] fix: handle mv module addr

---
 src/lib/app-provider/hooks/useAddress.ts      |  6 +-
 .../hooks/useConvertHexAddress.ts             | 17 +++-
 .../components/abi/args-form/field/index.tsx  |  6 +-
 src/lib/data/constant.ts                      |  3 +
 src/lib/hooks/useFormatAddresses.ts           | 37 ++++++++
 src/lib/pages/account-details/index.tsx       | 24 ++---
 .../component/drawer/ModuleSelectDrawer.tsx   | 10 ++-
 .../drawer/selector/ModuleSelectorInput.tsx   | 27 ++----
 .../interact/hooks/useValidateModuleInput.ts  |  4 +-
 src/lib/services/blockService.ts              |  4 +-
 src/lib/services/searchService.ts             | 90 +++++++++++--------
 src/lib/utils/address.ts                      |  5 +-
 src/lib/utils/validate.ts                     | 24 ++---
 13 files changed, 151 insertions(+), 106 deletions(-)
 create mode 100644 src/lib/hooks/useFormatAddresses.ts

diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index bfeee14c0..f4d7d0a37 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -2,7 +2,7 @@ import { fromBech32 } from "@cosmjs/encoding";
 import { useCallback, useMemo } from "react";
 
 import type { Option } from "lib/types";
-import { isHexAddress, isHexModuleAddress } from "lib/utils";
+import { isHexWalletAddress, isHexModuleAddress } from "lib/utils";
 
 import { useCurrentChain } from "./useCurrentChain";
 import { useExampleAddresses } from "./useExampleAddresses";
@@ -135,9 +135,9 @@ export const useValidateAddress = () => {
         ),
       [bech32Prefix, getAddressTypeByLength]
     ),
-    validateHexAddress: useCallback(
+    validateHexWalletAddress: useCallback(
       (address: string) =>
-        !address.startsWith(bech32Prefix) && isHexAddress(address),
+        !address.startsWith(bech32Prefix) && isHexWalletAddress(address),
       [bech32Prefix]
     ),
     validateHexModuleAddress: useCallback(
diff --git a/src/lib/app-provider/hooks/useConvertHexAddress.ts b/src/lib/app-provider/hooks/useConvertHexAddress.ts
index 749d4ec8b..8e8eee95f 100644
--- a/src/lib/app-provider/hooks/useConvertHexAddress.ts
+++ b/src/lib/app-provider/hooks/useConvertHexAddress.ts
@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 
+import { HEX_MODULE_ADDRESS_LENGTH, HEX_WALLET_ADDRESS_LENGTH } from "lib/data";
 import type { HexAddr } from "lib/types";
 import { hexToBech32Address } from "lib/utils";
 
@@ -10,8 +11,16 @@ export const useConvertHexAddress = () => {
     chain: { bech32_prefix: bech32Prefix },
   } = useCurrentChain();
 
-  return useCallback(
-    (hexAddr: HexAddr) => hexToBech32Address(bech32Prefix, hexAddr),
-    [bech32Prefix]
-  );
+  return {
+    convertHexWalletAddress: useCallback(
+      (hexAddr: HexAddr) =>
+        hexToBech32Address(bech32Prefix, hexAddr, HEX_WALLET_ADDRESS_LENGTH),
+      [bech32Prefix]
+    ),
+    convertHexModuleAddress: useCallback(
+      (hexAddr: HexAddr) =>
+        hexToBech32Address(bech32Prefix, hexAddr, HEX_MODULE_ADDRESS_LENGTH),
+      [bech32Prefix]
+    ),
+  };
 };
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index 0c5bba4fe..c6d23b536 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -33,14 +33,14 @@ export const ArgFieldTemplate = ({
   const {
     validateUserAddress,
     validateContractAddress,
-    validateHexAddress,
+    validateHexWalletAddress,
     validateHexModuleAddress,
   } = useValidateAddress();
 
   const isValidArgAddress = useCallback(
     (input: string) =>
-      validateUserAddress(input) === null || validateHexAddress(input),
-    [validateHexAddress, validateUserAddress]
+      validateUserAddress(input) === null || validateHexWalletAddress(input),
+    [validateHexWalletAddress, validateUserAddress]
   );
   const isValidArgObject = useCallback(
     (input: string) =>
diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
index 09be0c986..5018e9718 100644
--- a/src/lib/data/constant.ts
+++ b/src/lib/data/constant.ts
@@ -74,3 +74,6 @@ export enum StorageKeys {
   Wallets = "wallets",
   Networks = "networks",
 }
+
+export const HEX_WALLET_ADDRESS_LENGTH = 40;
+export const HEX_MODULE_ADDRESS_LENGTH = 64;
diff --git a/src/lib/hooks/useFormatAddresses.ts b/src/lib/hooks/useFormatAddresses.ts
new file mode 100644
index 000000000..5fe55401e
--- /dev/null
+++ b/src/lib/hooks/useFormatAddresses.ts
@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+
+import { useConvertHexAddress, useValidateAddress } from "lib/app-provider";
+import type { HexAddr, HumanAddr } from "lib/types";
+import { bech32AddressToHex, unpadHexAddress } from "lib/utils";
+
+export const useFormatAddresses = () => {
+  const { convertHexWalletAddress, convertHexModuleAddress } =
+    useConvertHexAddress();
+  const { validateHexWalletAddress, validateHexModuleAddress } =
+    useValidateAddress();
+
+  return useCallback(
+    (address: string) => {
+      if (validateHexWalletAddress(address))
+        return {
+          address: convertHexWalletAddress(address as HexAddr),
+          hex: unpadHexAddress(address as HexAddr),
+        };
+      if (validateHexModuleAddress(address))
+        return {
+          address: convertHexModuleAddress(address as HexAddr),
+          hex: unpadHexAddress(address as HexAddr),
+        };
+      return {
+        address: address as HumanAddr,
+        hex: unpadHexAddress(bech32AddressToHex(address as HumanAddr)),
+      };
+    },
+    [
+      convertHexModuleAddress,
+      convertHexWalletAddress,
+      validateHexModuleAddress,
+      validateHexWalletAddress,
+    ]
+  );
+};
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 6b8c39333..1fdf134fd 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -11,7 +11,6 @@ import { useCallback, useEffect } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
 import {
-  useConvertHexAddress,
   useInternalNavigate,
   useMoveConfig,
   useValidateAddress,
@@ -23,6 +22,7 @@ import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
+import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
 import { useAccountDetailsTableCounts } from "lib/model/account";
 import { useAccountId } from "lib/services/accountService";
 import type { IndexedModule } from "lib/services/move/moduleService";
@@ -35,11 +35,10 @@ import {
 } from "lib/services/publicProjectService";
 import type { HexAddr, HumanAddr, MoveAccountAddr, Option } from "lib/types";
 import {
-  bech32AddressToHex,
   getFirstQueryParam,
-  isHexAddress,
+  isHexWalletAddress,
+  isHexModuleAddress,
   truncate,
-  unpadHexAddress,
 } from "lib/utils";
 
 import { AccountHeader } from "./components/AccountHeader";
@@ -425,20 +424,12 @@ const AccountDetails = () => {
   const router = useRouter();
   const { track } = useTrack();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
-  const hexToBech32 = useConvertHexAddress();
+  const formatAddresses = useFormatAddresses();
   // TODO: change to `Addr` for correctness (i.e. interchain account)
   const accountAddressParam = getFirstQueryParam(
     router.query.accountAddress
   ).toLowerCase() as MoveAccountAddr;
-  const [hexAddr, humanAddr] = isHexAddress(accountAddressParam)
-    ? [
-        unpadHexAddress(accountAddressParam as HexAddr),
-        hexToBech32(accountAddressParam as HexAddr),
-      ]
-    : [
-        unpadHexAddress(bech32AddressToHex(accountAddressParam as HumanAddr)),
-        accountAddressParam as HumanAddr,
-      ];
+  const { address, hex } = formatAddresses(accountAddressParam);
   // TODO: fix assertion later
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
 
@@ -450,12 +441,13 @@ const AccountDetails = () => {
 
   return (
     <PageContainer>
-      {!isHexAddress(accountAddressParam) &&
+      {!isHexWalletAddress(accountAddressParam) &&
+      !isHexModuleAddress(accountAddressParam) &&
       validateUserAddress(accountAddressParam) &&
       validateContractAddress(accountAddressParam) ? (
         <InvalidAccount />
       ) : (
-        <AccountDetailsBody hexAddress={hexAddr} accountAddress={humanAddr} />
+        <AccountDetailsBody hexAddress={hex} accountAddress={address} />
       )}
     </PageContainer>
   );
diff --git a/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx b/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
index ea24bc628..a0a0b43ac 100644
--- a/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
+++ b/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
@@ -18,6 +18,7 @@ import {
   type IndexedModule,
 } from "lib/services/move/moduleService";
 import type { HexAddr, HumanAddr, MoveAccountAddr, Option } from "lib/types";
+import { isHexWalletAddress } from "lib/utils";
 
 import { ModuleSelectMainBody } from "./body";
 import { ModuleSelector } from "./selector";
@@ -40,7 +41,8 @@ export const ModuleSelectDrawer = ({
   hexAddress,
   handleModuleSelect,
 }: ModuleSelectDrawerProps) => {
-  const convertHexAddr = useConvertHexAddress();
+  const { convertHexWalletAddress, convertHexModuleAddress } =
+    useConvertHexAddress();
 
   const [mode, setMode] = useState<DisplayMode>("input");
   const [selectedAddress, setSelectedAddress] = useState<SelectedAddress>({
@@ -67,7 +69,9 @@ export const ModuleSelectDrawer = ({
     if (hexAddress) {
       setMode("display");
       setSelectedAddress({
-        address: convertHexAddr(hexAddress),
+        address: isHexWalletAddress(hexAddress)
+          ? convertHexWalletAddress(hexAddress)
+          : convertHexModuleAddress(hexAddress),
         hex: hexAddress,
       });
     } else {
@@ -78,7 +82,7 @@ export const ModuleSelectDrawer = ({
       });
       setModules(undefined);
     }
-  }, [convertHexAddr, hexAddress]);
+  }, [convertHexWalletAddress, convertHexModuleAddress, hexAddress]);
 
   useEffect(() => {
     if (isOpen && selectedAddress.hex) refetch();
diff --git a/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx
index 978420228..f03c91757 100644
--- a/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx
+++ b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx
@@ -7,17 +7,14 @@ import type {
   DisplayMode,
   ModuleSelectFunction,
 } from "../types";
-import {
-  useConvertHexAddress,
-  useValidateAddress,
-  useExampleAddresses,
-} from "lib/app-provider";
+import { useExampleAddresses } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
+import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
 import { useValidateModuleInput } from "lib/pages/interact/hooks/useValidateModuleInput";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import { useAccountModules } from "lib/services/move/moduleService";
-import type { MoveAccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
-import { bech32AddressToHex, splitModule, unpadHexAddress } from "lib/utils";
+import type { MoveAccountAddr, Option } from "lib/types";
+import { splitModule } from "lib/utils";
 
 export interface ModuleSelectorInputProps {
   selectedAddress: SelectedAddress;
@@ -43,8 +40,7 @@ export const ModuleSelectorInput = ({
     [keyword]
   );
 
-  const convertHexAddr = useConvertHexAddress();
-  const { validateHexAddress } = useValidateAddress();
+  const formatAddresses = useFormatAddresses();
   const validateModuleInput = useValidateModuleInput();
   const { user } = useExampleAddresses();
   const { refetch, isFetching } = useAccountModules({
@@ -57,18 +53,7 @@ export const ModuleSelectorInput = ({
       retry: false,
       onSuccess: (data) => {
         setError("");
-        setSelectedAddress(() => {
-          const isHex = validateHexAddress(addr);
-          return isHex
-            ? {
-                address: convertHexAddr(addr as HexAddr),
-                hex: unpadHexAddress(addr as HexAddr),
-              }
-            : {
-                address: addr as HumanAddr,
-                hex: unpadHexAddress(bech32AddressToHex(addr as HumanAddr)),
-              };
-        });
+        setSelectedAddress(formatAddresses(addr));
         if (Array.isArray(data)) {
           setModules(data);
           setMode("display");
diff --git a/src/lib/pages/interact/hooks/useValidateModuleInput.ts b/src/lib/pages/interact/hooks/useValidateModuleInput.ts
index 675bbd423..fe0ac3e79 100644
--- a/src/lib/pages/interact/hooks/useValidateModuleInput.ts
+++ b/src/lib/pages/interact/hooks/useValidateModuleInput.ts
@@ -6,7 +6,7 @@ import {
   useValidateAddress,
 } from "lib/app-provider";
 import type { Nullable } from "lib/types";
-import { isHexAddress, splitModule, truncate } from "lib/utils";
+import { isHexWalletAddress, splitModule, truncate } from "lib/utils";
 
 export const useValidateModuleInput = () => {
   const { validateUserAddress } = useValidateAddress();
@@ -29,7 +29,7 @@ export const useValidateModuleInput = () => {
       const addrErr = validateUserAddress(address);
       const invalidAddress = address.startsWith(prefix)
         ? addrErr
-        : !isHexAddress(address);
+        : !isHexWalletAddress(address);
 
       if (invalidAddress || module === "" || functionName === "")
         return errText;
diff --git a/src/lib/services/blockService.ts b/src/lib/services/blockService.ts
index db1748c34..ba029971f 100644
--- a/src/lib/services/blockService.ts
+++ b/src/lib/services/blockService.ts
@@ -19,7 +19,7 @@ import type {
 } from "lib/types";
 import {
   isBlock,
-  isHexAddress,
+  isHexWalletAddress,
   parseDate,
   parseDateOpt,
   parseTxHash,
@@ -126,7 +126,7 @@ export const useBlockInfoQuery = (
     [CELATONE_QUERY_KEYS.BLOCK_INFO, indexerGraphClient, height],
     queryFn,
     {
-      enabled: isBlock(height) && !isHexAddress(height),
+      enabled: isBlock(height) && !isHexWalletAddress(height),
       retry: false,
       refetchOnWindowFocus: false,
     }
diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index be4ef0d28..78e1acaa6 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -9,7 +9,12 @@ import {
   useGetAddressType,
 } from "lib/app-provider";
 import type { Addr, ContractAddr, Option } from "lib/types";
-import { isCodeId, isHexAddress, splitModule } from "lib/utils";
+import {
+  isCodeId,
+  isHexWalletAddress,
+  isHexModuleAddress,
+  splitModule,
+} from "lib/utils";
 
 import { useBlockInfoQuery } from "./blockService";
 import { useCodeDataByCodeId } from "./codeService";
@@ -65,11 +70,8 @@ export const useSearchHandler = (
   } = useCurrentChain();
   const getAddressType = useGetAddressType();
   const addressType = getAddressType(debouncedKeyword);
-  const { data: txData, isFetching: txFetching } = useTxData(debouncedKeyword);
-  const { data: codeData, isFetching: codeFetching } = useCodeDataByCodeId({
-    codeId: debouncedKeyword,
-    enabled: isWasm && isCodeId(debouncedKeyword),
-  });
+
+  // Contract
   const { data: contractData, isFetching: contractFetching } = useQuery(
     [CELATONE_QUERY_KEYS.CONTRACT_INFO, lcdEndpoint, debouncedKeyword],
     async () => queryContract(lcdEndpoint, debouncedKeyword as ContractAddr),
@@ -79,33 +81,71 @@ export const useSearchHandler = (
       retry: false,
     }
   );
+
+  const isAddr =
+    addressType === "user_address" ||
+    addressType === "contract_address" ||
+    isHexWalletAddress(debouncedKeyword) ||
+    isHexModuleAddress(debouncedKeyword);
+
+  // ICNS
+  const { data: icnsAddressData, isFetching: icnsAddressFetching } =
+    useAddressByICNSName(debouncedKeyword);
+  // provide ICNS metadata result
+  const { data: icnsNames } = useICNSNamesByAddress(
+    (isAddr ? debouncedKeyword : icnsAddressData?.address) as Addr
+  );
+
+  const addressResult = useMemo(() => {
+    if (isAddr) {
+      return contractData ? "Contract Address" : "Wallet Address";
+    }
+    return (
+      icnsAddressData?.address &&
+      (icnsAddressData.addressType === "contract_address"
+        ? "Contract Address"
+        : "Wallet Address")
+    );
+  }, [isAddr, contractData, icnsAddressData]);
+
+  // Code
+  const { data: codeData, isFetching: codeFetching } = useCodeDataByCodeId({
+    codeId: debouncedKeyword,
+    enabled: isWasm && isCodeId(debouncedKeyword),
+  });
+
+  // Tx
+  const { data: txData, isFetching: txFetching } = useTxData(debouncedKeyword);
+
+  // Block
   const { data: blockData, isFetching: blockFetching } =
     useBlockInfoQuery(debouncedKeyword);
+
+  // Pool
   const { data: poolData, isFetching: poolFetching } = usePoolByPoolId(
     Number(debouncedKeyword),
     isPool &&
       Number.isInteger(Number(debouncedKeyword)) &&
       Number(debouncedKeyword) > 0
   );
-  const { data: icnsAddressData, isFetching: icnsAddressFetching } =
-    useAddressByICNSName(debouncedKeyword);
 
-  const [initiaAddr, moduleName, functionName] = splitModule(debouncedKeyword);
+  // Move
+  const [addr, moduleName, functionName] = splitModule(debouncedKeyword);
 
   const enableModuleFetching = useMemo(
     () =>
       Boolean(
         isMove &&
-          (getAddressType(initiaAddr) === "user_address" ||
-            isHexAddress(initiaAddr)) &&
+          (getAddressType(addr) === "user_address" ||
+            isHexWalletAddress(addr)) &&
           moduleName &&
           functionName === undefined
       ),
-    [functionName, getAddressType, initiaAddr, isMove, moduleName]
+    [functionName, getAddressType, addr, isMove, moduleName]
   );
 
   const { data: moduleData, isFetching: moduleFetching } = useAccountModules({
-    address: initiaAddr,
+    address: addr,
     moduleName,
     functionName: undefined,
     options: {
@@ -115,27 +155,7 @@ export const useSearchHandler = (
     },
   });
 
-  const isAddr =
-    addressType === "user_address" ||
-    addressType === "contract_address" ||
-    isHexAddress(debouncedKeyword);
-
-  // provide ICNS metadata result
-  const { data: icnsNames } = useICNSNamesByAddress(
-    (isAddr ? debouncedKeyword : icnsAddressData?.address) as Addr
-  );
-
-  const addressResult = useMemo(() => {
-    if (isAddr) {
-      return contractData ? "Contract Address" : "Wallet Address";
-    }
-    return (
-      icnsAddressData?.address &&
-      (icnsAddressData.addressType === "contract_address"
-        ? "Contract Address"
-        : "Wallet Address")
-    );
-  }, [isAddr, contractData, icnsAddressData]);
+  // TODO: handle module function later
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
@@ -148,7 +168,7 @@ export const useSearchHandler = (
   return {
     results: [
       addressResult,
-      moduleData && "Module Path",
+      moduleName && moduleData && "Module Path",
       txData && "Transaction Hash",
       codeData && "Code ID",
       blockData && "Block",
diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index 3a7157256..1aa396823 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -28,8 +28,9 @@ export const unpadHexAddress = (hexAddr: HexAddr) =>
 
 export const hexToBech32Address = (
   prefix: string,
-  hexAddr: HexAddr
+  hexAddr: HexAddr,
+  length: number
 ): HumanAddr => {
-  const strip = padHexAddress(hexAddr, 40).slice(2);
+  const strip = padHexAddress(hexAddr, length).slice(2);
   return toBech32(prefix, fromHex(strip)) as HumanAddr;
 };
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index 52cbe339e..e92ff34e5 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -1,5 +1,6 @@
 import { fromHex } from "@cosmjs/encoding";
 
+import { HEX_MODULE_ADDRESS_LENGTH, HEX_WALLET_ADDRESS_LENGTH } from "lib/data";
 import type { HexAddr } from "lib/types";
 
 import { padHexAddress } from "./address";
@@ -23,12 +24,13 @@ export const isBlock = (input: string): boolean => {
   return Number.isInteger(numberValue) && numberValue > 0;
 };
 
-export const isHexAddress = (address: string): boolean => {
-  if (!/^0x[a-fA-F0-9]{1,40}$/.test(address)) {
+const isHexAddress = (address: string, length: number): boolean => {
+  const regex = new RegExp(`^0x[a-fA-F0-9]{1,${length}}$`);
+  if (!regex.test(address)) {
     return false;
   }
 
-  const strip = padHexAddress(address as HexAddr, 40).slice(2);
+  const strip = padHexAddress(address as HexAddr, length).slice(2);
   try {
     fromHex(strip);
   } catch {
@@ -37,16 +39,8 @@ export const isHexAddress = (address: string): boolean => {
   return true;
 };
 
-export const isHexModuleAddress = (address: string): boolean => {
-  if (!/^0x[a-fA-F0-9]{1,64}$/.test(address)) {
-    return false;
-  }
+export const isHexWalletAddress = (address: string) =>
+  isHexAddress(address, HEX_WALLET_ADDRESS_LENGTH);
 
-  const strip = padHexAddress(address as HexAddr, 64).slice(2);
-  try {
-    fromHex(strip);
-  } catch {
-    return false;
-  }
-  return true;
-};
+export const isHexModuleAddress = (address: string) =>
+  isHexAddress(address, HEX_MODULE_ADDRESS_LENGTH);

From b0d77955f8d4d92a7c8024d39aa28bc9e0b4bffd Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 26 Oct 2023 14:40:47 +0700
Subject: [PATCH 240/368] fix(components): add shortcut for contract state and
 clean up transition

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/ButtonCard.tsx             |  2 +-
 src/lib/components/CopyLink.tsx               |  2 +-
 src/lib/components/ExplorerLink.tsx           |  4 +-
 src/lib/components/ListSelection.tsx          |  4 +-
 src/lib/components/TagSelection.tsx           |  4 +-
 src/lib/components/TxFilterSelection.tsx      |  2 +-
 src/lib/components/dropzone/index.tsx         |  4 +-
 .../components/filter/FilterDropdownItem.tsx  |  2 +-
 src/lib/components/forms/SelectInput.tsx      |  2 +-
 src/lib/components/json/JsonInput.tsx         |  2 +-
 src/lib/components/json/JsonReadOnly.tsx      |  2 +-
 src/lib/components/json/ViewFullMsgButton.tsx |  2 +-
 src/lib/components/table/AccordionTx.tsx      |  2 +-
 .../components/table/codes/CodesTableRow.tsx  |  2 +-
 .../table/contracts/ContractsTableRow.tsx     |  2 +-
 .../transactions/TransactionsTableRow.tsx     |  4 +-
 src/lib/layout/Footer.tsx                     |  6 +--
 src/lib/layout/Header.tsx                     |  4 +-
 src/lib/layout/SubHeader.tsx                  |  2 +-
 src/lib/layout/mobile/NavDrawer.tsx           |  6 +--
 src/lib/layout/navbar/Collapse.tsx            |  2 +-
 src/lib/layout/navbar/Expand.tsx              |  2 +-
 .../components/delegations/index.tsx          |  4 +-
 .../tables/bonded/BondedTableRow.tsx          |  2 +-
 .../NonRedelegatableTableRow.tsx              |  2 +-
 .../redelegation/RedelegationTableRow.tsx     |  2 +-
 .../components/InstantiateInfo.tsx            |  2 +-
 .../contract-details/components/JsonInfo.tsx  |  4 +-
 src/lib/pages/contract-details/index.tsx      | 42 ++++++++++++++++++-
 src/lib/pages/home/components/DevShortcut.tsx |  2 +-
 src/lib/pages/home/index.tsx                  |  2 +-
 .../tables/pool-txs/PoolTxsMsg.tsx            |  4 +-
 .../supportedSection/AllocationBadge.tsx      |  2 +-
 .../components/supportedSection/PoolCard.tsx  |  2 +-
 .../UnsupportedPoolCard.tsx                   |  4 +-
 .../components/PublicProjectCard.tsx          |  2 +-
 .../table/account/PublicProjectAccountRow.tsx |  2 +-
 .../table/code/PublicProjectCodeRow.tsx       |  2 +-
 .../contract/PublicProjectContractRow.tsx     |  2 +-
 .../components/tx-message/EventBox.tsx        |  7 +---
 .../components/tx-message/TxMsgDetails.tsx    |  2 +-
 .../components/tx-message/TxMsgExpand.tsx     |  4 +-
 43 files changed, 98 insertions(+), 62 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aec35d9e5..7f022ff58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#586](https://github.com/alleslabs/celatone-frontend/pull/586) Add shortcut for contract states
 - [#579](https://github.com/alleslabs/celatone-frontend/pull/579) Improve ux writing for recent items page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 
diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx
index 38d69cefa..644bd9e5d 100644
--- a/src/lib/components/ButtonCard.tsx
+++ b/src/lib/components/ButtonCard.tsx
@@ -29,7 +29,7 @@ export const ButtonCard = ({
     w="100%"
     cursor="pointer"
     _hover={{ bgColor: "gray.700" }}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     _disabled={{
       bgColor: "gray.900",
       cursor: "not-allowed",
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index 896ead015..3a4e8575a 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -67,7 +67,7 @@ export const CopyLink = ({
           wordBreak={{ base: "break-all", md: "inherit" }}
           variant="body2"
           color="secondary.main"
-          transition="all .25s ease-in-out"
+          transition="all 0.25s ease-in-out"
           display="inline"
         >
           {value === address ? `${value} (Me)` : value}
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 142d4ad2d..fbae082a2 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -124,7 +124,7 @@ const LinkRender = ({
     <Text
       variant={textVariant}
       color="secondary.main"
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       _hover={{ color: "secondary.light" }}
       className={isEllipsis ? "ellipsis" : undefined}
       maxW={maxWidth}
@@ -196,7 +196,7 @@ export const ExplorerLink = ({
       className="copier-wrapper"
       display="inline-flex"
       alignItems="center"
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       _hover={{
         ...(!readOnly && {
           textDecoration: "underline",
diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index 2edfae202..344c01c8b 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -211,7 +211,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                   key={option.value}
                   style={listItemProps}
                   _hover={{ bg: "gray.700" }}
-                  transition="all .25s ease-in-out"
+                  transition="all 0.25s ease-in-out"
                   onClick={() => selectOptionFromList(option)}
                 >
                   <Flex alignItems="center" justifyContent="space-between">
@@ -236,7 +236,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                       w="full"
                       style={listItemProps}
                       _hover={{ bg: "gray.700" }}
-                      transition="all .25s ease-in-out"
+                      transition="all 0.25s ease-in-out"
                       data-testid="create-option"
                       onClick={() => setEnableOutside(false)}
                     >
diff --git a/src/lib/components/TagSelection.tsx b/src/lib/components/TagSelection.tsx
index d2a6c3579..f3dbb2251 100644
--- a/src/lib/components/TagSelection.tsx
+++ b/src/lib/components/TagSelection.tsx
@@ -242,7 +242,7 @@ export const TagSelection = observer(
                     key={option}
                     style={listItemProps}
                     _hover={{ bg: "gray.700" }}
-                    transition="all .25s ease-in-out"
+                    transition="all 0.25s ease-in-out"
                     onClick={() => selectOptionFromList(option)}
                   >
                     <Flex alignItems="center" justifyContent="space-between">
@@ -266,7 +266,7 @@ export const TagSelection = observer(
                   <ListItem
                     style={listItemProps}
                     _hover={{ bg: "gray.700" }}
-                    transition="all .25s ease-in-out"
+                    transition="all 0.25s ease-in-out"
                     data-testid="create-option"
                     onClick={() => createOption()}
                   >
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 10ae6e782..30b744bcd 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -202,7 +202,7 @@ export const TxFilterSelection = forwardRef<
                   key={option}
                   style={listItemProps}
                   _hover={{ bg: "gray.800" }}
-                  transition="all .25s ease-in-out"
+                  transition="all 0.25s ease-in-out"
                   onClick={() => selectOption(option)}
                 >
                   <Flex alignItems="center" justifyContent="space-between">
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index deeefb35c..c85663a93 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -52,7 +52,7 @@ export function DropZone({
         align="center"
         direction="column"
         _hover={{ bg: "gray.900" }}
-        transition="all .25s ease-in-out"
+        transition="all 0.25s ease-in-out"
         cursor="pointer"
         {...getRootProps()}
         {...componentProps}
@@ -63,7 +63,7 @@ export function DropZone({
           <Text
             variant="body1"
             color="secondary.main"
-            transition="all .25s ease-in-out"
+            transition="all 0.25s ease-in-out"
             _hover={{ color: "secondary.light" }}
             style={{ textDecoration: "underline" }}
           >
diff --git a/src/lib/components/filter/FilterDropdownItem.tsx b/src/lib/components/filter/FilterDropdownItem.tsx
index 40a239d64..bd7aa6505 100644
--- a/src/lib/components/filter/FilterDropdownItem.tsx
+++ b/src/lib/components/filter/FilterDropdownItem.tsx
@@ -24,7 +24,7 @@ export const FilterDropdownItem = ({
   <ListItem
     style={listItemProps}
     _hover={{ bg: "gray.800" }}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     onClick={onSelect}
   >
     <Flex alignItems="center" justifyContent="space-between">
diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx
index c65a000f9..574f7113c 100644
--- a/src/lib/components/forms/SelectInput.tsx
+++ b/src/lib/components/forms/SelectInput.tsx
@@ -53,7 +53,7 @@ const SelectItem = ({ children, onSelect, disabled }: SelectItemProps) => (
     gap={2}
     aria-disabled={disabled}
     _hover={{ bg: "gray.800" }}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     _disabled={{ opacity: 0.4, pointerEvents: "none" }}
   >
     {children}
diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
index 81f04ae7d..8922e910e 100644
--- a/src/lib/components/json/JsonInput.tsx
+++ b/src/lib/components/json/JsonInput.tsx
@@ -117,7 +117,7 @@ const JsonInput = ({
         borderRadius="8px"
         position="relative"
         minH={32}
-        transition="all .25s ease-in-out"
+        transition="all 0.25s ease-in-out"
         _hover={{
           borderColor: "gray.600",
         }}
diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index 2e5fa367f..5e9b68882 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -64,7 +64,7 @@ const JsonReadOnly = ({
       borderWidth="thin"
       borderColor={!isJsonValid ? "error.main" : "gray.700"}
       borderRadius="8px"
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       _hover={{
         borderColor: isJsonValid && "gray.600",
         "& .copy-button-box": { display: "block" },
diff --git a/src/lib/components/json/ViewFullMsgButton.tsx b/src/lib/components/json/ViewFullMsgButton.tsx
index 4032951f3..dff86a4e3 100644
--- a/src/lib/components/json/ViewFullMsgButton.tsx
+++ b/src/lib/components/json/ViewFullMsgButton.tsx
@@ -22,7 +22,7 @@ export const ViewFullMsgButton = ({
     borderRadius="0 0 8px 8px"
     cursor="pointer"
     _hover={{ bg: "gray.900" }}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     onClick={onClick}
     zIndex="docked"
   >
diff --git a/src/lib/components/table/AccordionTx.tsx b/src/lib/components/table/AccordionTx.tsx
index 495199651..8099683ea 100644
--- a/src/lib/components/table/AccordionTx.tsx
+++ b/src/lib/components/table/AccordionTx.tsx
@@ -50,7 +50,7 @@ export const AccordionTx = ({
       pl={accordionSpacing}
       gap={3}
       _hover={{ background: "gray.800" }}
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       onMouseEnter={() => setShowButton(true)}
       onMouseLeave={() => setShowButton(false)}
     >
diff --git a/src/lib/components/table/codes/CodesTableRow.tsx b/src/lib/components/table/codes/CodesTableRow.tsx
index 1cfb4201f..6b698c8b5 100644
--- a/src/lib/components/table/codes/CodesTableRow.tsx
+++ b/src/lib/components/table/codes/CodesTableRow.tsx
@@ -31,7 +31,7 @@ export const CodesTableRow = ({
       templateColumns={templateColumns}
       onClick={() => onRowSelect(codeInfo.id)}
       _hover={{ bg: "gray.900" }}
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       cursor="pointer"
       minW="min-content"
     >
diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
index dc0cd186c..302f36a1f 100644
--- a/src/lib/components/table/contracts/ContractsTableRow.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -102,7 +102,7 @@ export const ContractsTableRow = ({
     templateColumns={templateColumns}
     onClick={() => onRowSelect(contractInfo.contractAddress)}
     _hover={{ bg: "gray.900" }}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     cursor="pointer"
     minW="min-content"
   >
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index f05b1f512..e4bbba2e9 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -44,7 +44,7 @@ export const TransactionsTableRow = ({
         templateColumns={templateColumns}
         onClick={isAccordion ? onToggle : undefined}
         _hover={{ background: "gray.900" }}
-        transition="all .25s ease-in-out"
+        transition="all 0.25s ease-in-out"
         cursor={isAccordion ? "pointer" : "default"}
       >
         <TableRow pl={2}>
@@ -52,7 +52,7 @@ export const TransactionsTableRow = ({
             <CustomIcon
               name="chevron-down"
               transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
-              transition="all .25s ease-in-out"
+              transition="all 0.25s ease-in-out"
               color="gray.600"
             />
           )}
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index 8756dfa14..e3c0f2aa5 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -81,7 +81,7 @@ const SocialMenuRender = ({
         >
           <Flex
             borderRadius="8px"
-            transition="all .25s ease-in-out"
+            transition="all 0.25s ease-in-out"
             _hover={{ backgroundColor: "gray.800" }}
           >
             <CustomIcon name={item.icon} boxSize={iconSize} color="gray.600" />
@@ -109,7 +109,7 @@ const AllesFeedback = () => {
         borderRadius={8}
         align="center"
         _hover={{ background: "gray.800" }}
-        transition="all .25s ease-in-out"
+        transition="all 0.25s ease-in-out"
       >
         <CustomIcon name="feedback" color="gray.600" />
         <Text variant="body3" color="text.dark">
@@ -161,7 +161,7 @@ const IconLink = ({
             as="span"
             ml={1}
             color="secondary.main"
-            transition="all .25s ease-in-out"
+            transition="all 0.25s ease-in-out"
             _hover={{ color: "secondary.light" }}
           >
             {text2}
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 166dba493..5565ce4cf 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -59,7 +59,7 @@ const Header = () => {
             borderWidth="1px"
             borderColor="gray.600"
             _hover={{ bg: "gray.700" }}
-            transition="all .25s ease-in-out"
+            transition="all 0.25s ease-in-out"
             w="170px"
           >
             <Flex
@@ -93,7 +93,7 @@ const Header = () => {
                   _hover={{
                     backgroundColor: "gray.800",
                   }}
-                  transition="all .25s ease-in-out"
+                  transition="all 0.25s ease-in-out"
                   isDisabled={noConfig}
                 >
                   <Flex justify="space-between" align="center" w="full">
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index 46100bd98..93a708cb7 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -66,7 +66,7 @@ const SubHeader = () => {
               borderColor={
                 isCurrentPage(item.slug) ? activeColor : "transparent"
               }
-              transition="all .25s ease-in-out"
+              transition="all 0.25s ease-in-out"
               _hover={{ borderColor: activeColor }}
               sx={{
                 _hover: {
diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index cf0142f90..bcca2c7da 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -112,7 +112,7 @@ export const NavDrawer = () => {
                   borderWidth="1px"
                   borderColor="gray.600"
                   _hover={{ bg: "gray.700" }}
-                  transition="all .25s ease-in-out"
+                  transition="all 0.25s ease-in-out"
                   w="220px"
                 >
                   <Flex
@@ -147,7 +147,7 @@ export const NavDrawer = () => {
                         _hover={{
                           backgroundColor: "gray.800",
                         }}
-                        transition="all .25s ease-in-out"
+                        transition="all 0.25s ease-in-out"
                         isDisabled={noConfig}
                       >
                         <Flex justify="space-between" align="center" w="full">
@@ -218,7 +218,7 @@ export const NavDrawer = () => {
                         cursor="pointer"
                         _hover={{ bg: "gray.700", borderRadius: "8px" }}
                         my="1px"
-                        transition="all .25s ease-in-out"
+                        transition="all 0.25s ease-in-out"
                         alignItems="center"
                         position="relative"
                         bgColor={
diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx
index 3c4c09119..731681938 100644
--- a/src/lib/layout/navbar/Collapse.tsx
+++ b/src/lib/layout/navbar/Collapse.tsx
@@ -24,7 +24,7 @@ const CollapseNavInfo = ({ submenu, isCurrentPage }: CollapseNavInfoProps) => (
       _hover={
         submenu.isDisable ? undefined : { bg: "gray.700", borderRadius: "8px" }
       }
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       alignItems="center"
       position="relative"
       bgColor={isCurrentPage(submenu.slug) ? "gray.800" : "transparent"}
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index e9e38f267..a5c0c3fba 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -32,7 +32,7 @@ const NavInfo = ({ submenu, isCurrentPage }: NavInfoProps) => (
       submenu.isDisable ? undefined : { bg: "gray.700", borderRadius: "8px" }
     }
     my="1px"
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     alignItems="center"
     position="relative"
     bgColor={isCurrentPage(submenu.slug) ? "gray.800" : "transparent"}
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index a12187c78..dbafe4f5f 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -109,7 +109,7 @@ export const DelegationsSection = ({
         position={isOpen ? "absolute" : "relative"}
         opacity={isOpen ? 0 : 1}
         left={isOpen ? "-100%" : "0"}
-        transition="all 0.25s"
+        transition="all 0.25s ease-in-out"
       >
         <DelegationInfo
           TotalBondedCard={TotalBondedCard}
@@ -161,7 +161,7 @@ export const DelegationsSection = ({
         position={isOpen ? "relative" : "absolute"}
         opacity={isOpen ? 1 : 0}
         left={isOpen ? "0" : "100%"}
-        transition="all 0.25s"
+        transition="all 0.25s ease-in-out"
       />
     </Flex>
   );
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
index e033ebb65..fd4172643 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
@@ -25,7 +25,7 @@ export const BondedTableRow = ({
   <Grid
     templateColumns={templateColumns}
     _hover={{ bg: "gray.900" }}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     minW="min-content"
   >
     <TableRow>
diff --git a/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx b/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx
index d3a440f16..537d18dc0 100644
--- a/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx
@@ -16,7 +16,7 @@ export const NonRedelegatableTableRow = ({
 }: NonRedelegatableTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     minW="min-content"
   >
     <TableRow>
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
index 695bc470c..033a875c5 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
@@ -19,7 +19,7 @@ export const RedelegationTableRow = ({
   <Grid
     templateColumns={templateColumns}
     _hover={{ bg: "gray.900" }}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     minW="min-content"
   >
     <TableRow>
diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
index ca82e46bc..b6ee33acd 100644
--- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx
+++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
@@ -39,7 +39,7 @@ const PortIdRender = ({ portId }: { portId: string }) => {
     <Box
       className="copier-wrapper"
       fontSize="14px"
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
     >
       {charArray?.map((line, idx) =>
         idx === charArray.length - 1 ? (
diff --git a/src/lib/pages/contract-details/components/JsonInfo.tsx b/src/lib/pages/contract-details/components/JsonInfo.tsx
index 1cd573547..5b3e85018 100644
--- a/src/lib/pages/contract-details/components/JsonInfo.tsx
+++ b/src/lib/pages/contract-details/components/JsonInfo.tsx
@@ -29,7 +29,7 @@ export const JsonInfo = ({
         borderRadius="8px"
         background="gray.900"
         _hover={{ backgroundColor: "gray.800" }}
-        transition="all .25s ease-in-out"
+        transition="all 0.25s ease-in-out"
         cursor="pointer"
         onClick={() => setExpand((prev) => !prev)}
       >
@@ -37,7 +37,7 @@ export const JsonInfo = ({
           {header}
         </Heading>
         <CustomIcon
-          transition="all .25s ease-in-out"
+          transition="all 0.25s ease-in-out"
           name={expand ? "chevron-up" : "chevron-down"}
           color="gray.600"
         />
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index d6fd20a4a..48eaa8bb1 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -5,6 +5,7 @@ import {
   Tabs,
   TabPanels,
   TabPanel,
+  Text,
 } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
@@ -18,6 +19,7 @@ import {
   useInternalNavigate,
 } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
+import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
@@ -49,6 +51,7 @@ enum TabIndex {
   Txs = "txs",
   States = "states",
 }
+
 interface ContractDetailsBodyProps {
   contractAddress: ContractAddr;
   contractData: ContractData;
@@ -68,7 +71,7 @@ const ContractTxsTable = observer(
     } = useContractDetailsTableCounts(contractAddress, contractAccountId);
     if (!contractData.contractDetail) return <InvalidContract />;
     return (
-      <>
+      <Flex direction="column">
         {/* History Table section */}
         <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
           Transaction & History
@@ -117,11 +120,43 @@ const ContractTxsTable = observer(
             </TabPanel>
           </TabPanels>
         </Tabs>
-      </>
+      </Flex>
     );
   }
 );
 
+const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => {
+  return (
+    <Flex
+      onClick={onViewMore}
+      border="2px solid"
+      borderColor="gray.700"
+      borderRadius="8px"
+      p={4}
+      mt={12}
+      alignItems="center"
+      justifyContent="space-between"
+      w="full"
+      cursor="pointer"
+      transition="all 0.25s ease-in-out"
+      _hover={{ bgColor: "gray.900" }}
+    >
+      <Flex alignItems="center" gap={3}>
+        <CustomIcon name="contract-list" color="gray.600" boxSize={6} />
+        <div>
+          <Text variant="body1" fontWeight={600}>
+            View Contracts States
+          </Text>
+          <Text variant="body2" color="text.dark" fontWeight={600}>
+            Access the current contract states information
+          </Text>
+        </div>
+      </Flex>
+      <CustomIcon name="chevron-right" color="gray.600" boxSize={6} />
+    </Flex>
+  );
+};
+
 const ContractDetailsBody = observer(
   ({ contractAddress, contractData }: ContractDetailsBodyProps) => {
     const tableHeaderId = "contractDetailsTableHeader";
@@ -257,6 +292,9 @@ const ContractDetailsBody = observer(
                   contractAddress={contractAddress}
                   contractData={contractData}
                 />
+                <ContractStateShortcut
+                  onViewMore={handleTabChange(TabIndex.States)}
+                />
               </Flex>
             </TabPanel>
             <TabPanel p={0}>
diff --git a/src/lib/pages/home/components/DevShortcut.tsx b/src/lib/pages/home/components/DevShortcut.tsx
index 9af690c72..2c8f68434 100644
--- a/src/lib/pages/home/components/DevShortcut.tsx
+++ b/src/lib/pages/home/components/DevShortcut.tsx
@@ -57,7 +57,7 @@ export const DevShortcut = () => {
               <Flex
                 sx={cardProps}
                 _hover={{ bg: "gray.800" }}
-                transition="all .25s ease-in-out"
+                transition="all 0.25s ease-in-out"
               >
                 <Flex alignItems="center" gap={3}>
                   <CustomIcon
diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx
index e5e219936..e1d3dda90 100644
--- a/src/lib/pages/home/index.tsx
+++ b/src/lib/pages/home/index.tsx
@@ -71,7 +71,7 @@ const CardInfo = ({
   <Flex
     sx={cardProps}
     _hover={{ bg: "gray.700" }}
-    transition="all .25s ease-in-out"
+    transition="all 0.25s ease-in-out"
     bg="gray.800"
     onClick={navigate}
     cursor="pointer"
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index d447876a9..80c0167d6 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -56,7 +56,7 @@ export const PoolTxsMsg = ({
       <Grid
         className="copier-wrapper"
         templateColumns={templateColumns}
-        transition="all .25s ease-in-out"
+        transition="all 0.25s ease-in-out"
         cursor="pointer"
         onClick={() => {
           if (message) {
@@ -75,7 +75,7 @@ export const PoolTxsMsg = ({
             <CustomIcon
               name="chevron-down"
               transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
-              transition="all .25s ease-in-out"
+              transition="all 0.25s ease-in-out"
               color="gray.600"
             />
           )}
diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
index 0277018b9..08a092622 100644
--- a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -46,7 +46,7 @@ export const AllocationBadge = ({
       border="1px solid"
       borderColor="gray.700"
       borderRadius="8px"
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       alignItems="center"
       gap={2}
     >
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index ee11f3aa1..23faf50ae 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -57,7 +57,7 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
       bg="gray.900"
       borderRadius="8px"
       p={4}
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       cursor="pointer"
       sx={{
         _hover: {
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 72bd8edfb..262571a3c 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -60,7 +60,7 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
       mt={4}
       bg="gray.900"
       _hover={{ bg: "gray.800" }}
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       cursor="pointer"
     >
       {({ isExpanded }) => (
@@ -110,7 +110,7 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                       <CustomIcon
                         name="chevron-down"
                         transform={isExpanded ? "rotate(180deg)" : "rotate(0)"}
-                        transition="all .25s ease-in-out"
+                        transition="all 0.25s ease-in-out"
                       />
                     }
                   />
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index 6ae727531..726db6b7f 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -34,7 +34,7 @@ export const PublicProjectCard = observer(
         alignItems="center"
         bg="gray.800"
         _hover={{ bg: "gray.700" }}
-        transition="all .25s ease-in-out"
+        transition="all 0.25s ease-in-out"
         borderRadius="8px"
         gap={4}
         minH={48}
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
index 5105463b5..2a4d965ea 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
@@ -44,7 +44,7 @@ export const PublicProjectAccountRow = ({
       templateColumns={templateColumns}
       onClick={goToDetail}
       _hover={{ bg: "gray.900" }}
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       cursor="pointer"
       minW="min-content"
     >
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
index 05ba22d8d..23445281f 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
@@ -37,7 +37,7 @@ export const PublicProjectCodeRow = ({
       templateColumns={templateColumns}
       onClick={goToCodeDetails}
       _hover={{ bg: "gray.900" }}
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       cursor="pointer"
       minW="min-content"
     >
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
index 5cc1b2e2f..d0f4d8356 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
@@ -57,7 +57,7 @@ export const PublicProjectContractRow = ({
       templateColumns={templateColumns}
       onClick={goToContractDetails}
       _hover={{ bg: "gray.900" }}
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       cursor="pointer"
       minW="min-content"
     >
diff --git a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
index 5042c3ee0..5d414d1e6 100644
--- a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
@@ -132,7 +132,7 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
           color="gray.600"
           boxSize={4}
           transform={expand ? "rotate(180deg)" : "rotate(0)"}
-          transition="all .25s ease-in-out"
+          transition="all 0.25s ease-in-out"
           m={0}
         />
       </Flex>
@@ -146,10 +146,7 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
         overflow="hidden"
         initial="collapsed"
         animate={expand ? "expanded" : "collapsed"}
-        transition={{
-          duration: "0.25",
-          ease: "easeInOut",
-        }}
+        transition="all 0.25s ease-in-out"
       >
         <Box borderTop="1px solid var(--chakra-colors-gray-700)" mx={4} />
         <TxReceiptRender
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
index a13485279..eb5d7b71a 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
@@ -47,7 +47,7 @@ export const TxMsgDetails = ({
       pt={4}
       height={isExpand ? "full" : 0}
       overflow="hidden"
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
     >
       <TxReceiptRender variant="tx-page" receipts={receipts} gap={3} />
     </Flex>
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
index 388808aba..5927e3d63 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
@@ -298,7 +298,7 @@ export const TxMsgExpand = ({
       align="center"
       justify="space-between"
       borderRadius="8px"
-      transition="all .25s ease-in-out"
+      transition="all 0.25s ease-in-out"
       cursor="pointer"
       onClick={() => {
         track(AmpEvent.USE_TX_MSG_EXPAND, {
@@ -352,7 +352,7 @@ export const TxMsgExpand = ({
           color="gray.600"
           boxSize={4}
           transform={isExpand ? "rotate(180deg)" : "rotate(0)"}
-          transition="all .25s ease-in-out"
+          transition="all 0.25s ease-in-out"
           m={0}
         />
       </Flex>

From 8d0a5f130b086734c505f27d8e9eedf8339b7653 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 26 Oct 2023 15:13:02 +0700
Subject: [PATCH 241/368] fix: add module breadcrumb

---
 src/lib/pages/module-details/components/ModuleTop.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index f8b3f6b33..056519fff 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -33,7 +33,10 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             text: moduleData.parsedAbi.address,
             href: `/accounts/${moduleData.parsedAbi.address}`,
           },
-          { text: "Modules" },
+          {
+            text: "Modules",
+            href: `/accounts/${moduleData.parsedAbi.address}/modules`,
+          },
           { text: moduleData.moduleName },
         ]}
       />

From bcc652243e66a73afb64571f9476769712a37058 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 26 Oct 2023 15:13:15 +0700
Subject: [PATCH 242/368] fix(components): adjust in overview page

---
 CHANGELOG.md                                    |  1 +
 src/lib/pages/blocks/components/BlocksRow.tsx   | 15 +++++++++++++--
 src/lib/pages/blocks/components/BlocksTable.tsx |  4 +++-
 src/lib/pages/blocks/index.tsx                  |  9 ++++++++-
 src/lib/pages/home/index.tsx                    |  8 +++++++-
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aec35d9e5..efded857c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#587](https://github.com/alleslabs/celatone-frontend/pull/587) Make block row clickable
 - [#579](https://github.com/alleslabs/celatone-frontend/pull/579) Improve ux writing for recent items page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 
diff --git a/src/lib/pages/blocks/components/BlocksRow.tsx b/src/lib/pages/blocks/components/BlocksRow.tsx
index db15b128d..32edda215 100644
--- a/src/lib/pages/blocks/components/BlocksRow.tsx
+++ b/src/lib/pages/blocks/components/BlocksRow.tsx
@@ -10,11 +10,22 @@ import { dateFromNow, formatUTC, truncate } from "lib/utils";
 interface BlocksRowProps {
   templateColumns: GridProps["templateColumns"];
   blockData: BlockInfo;
+  onRowSelect: (blockHeight: number) => void;
 }
 
-export const BlocksRow = ({ templateColumns, blockData }: BlocksRowProps) => {
+export const BlocksRow = ({
+  templateColumns,
+  blockData,
+  onRowSelect,
+}: BlocksRowProps) => {
   return (
-    <Grid templateColumns={templateColumns}>
+    <Grid
+      templateColumns={templateColumns}
+      onClick={() => onRowSelect(blockData.height)}
+      _hover={{ bg: "gray.900" }}
+      transition="all .25s ease-in-out"
+      cursor="pointer"
+    >
       <TableRow>
         <ExplorerLink
           type="block_height"
diff --git a/src/lib/pages/blocks/components/BlocksTable.tsx b/src/lib/pages/blocks/components/BlocksTable.tsx
index 4f76853cc..4f7901805 100644
--- a/src/lib/pages/blocks/components/BlocksTable.tsx
+++ b/src/lib/pages/blocks/components/BlocksTable.tsx
@@ -18,12 +18,13 @@ import { BlocksRow } from "./BlocksRow";
 
 interface BlocksTableProps {
   isViewMore?: boolean;
+  onRowSelect: (blockHeight: number) => void;
 }
 
 const TEMPLATE_COLUMNS = "140px 160px minmax(300px,1fr) 120px 280px";
 const scrollComponentId = "block-table-header";
 
-export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
+export const BlocksTable = ({ isViewMore, onRowSelect }: BlocksTableProps) => {
   const { data: blockCount, refetch: refetchCount } = useBlockCountQuery();
 
   const {
@@ -98,6 +99,7 @@ export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
             <BlocksRow
               key={block.hash}
               templateColumns={TEMPLATE_COLUMNS}
+              onRowSelect={onRowSelect}
               blockData={block}
             />
           ))}
diff --git a/src/lib/pages/blocks/index.tsx b/src/lib/pages/blocks/index.tsx
index 2775fc7fb..13436d3a5 100644
--- a/src/lib/pages/blocks/index.tsx
+++ b/src/lib/pages/blocks/index.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
+import { useInternalNavigate } from "lib/app-provider";
 import PageContainer from "lib/components/PageContainer";
 
 import { BlocksTable } from "./components/BlocksTable";
@@ -10,6 +11,12 @@ import { BlocksTable } from "./components/BlocksTable";
 const BlocksPage = () => {
   const router = useRouter();
   const { track } = useTrack();
+  const navigate = useInternalNavigate();
+  const onRowSelect = (blockHeight: number) =>
+    navigate({
+      pathname: "/blocks/[blockHeight]",
+      query: { blockHeight },
+    });
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_BLOCKS);
@@ -23,7 +30,7 @@ const BlocksPage = () => {
       <Text variant="body2" fontWeight={500} color="text.dark" mb={8}>
         This page displays all blocks on this network sorted by recency
       </Text>
-      <BlocksTable />
+      <BlocksTable onRowSelect={onRowSelect} />
     </PageContainer>
   );
 };
diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx
index e5e219936..cb4920c88 100644
--- a/src/lib/pages/home/index.tsx
+++ b/src/lib/pages/home/index.tsx
@@ -129,6 +129,12 @@ const Home = () => {
   );
   const { data: txsCount, isLoading: isLoadingTxsCount } = useTxsCount();
 
+  const onBlockRowSelect = (blockHeight: number) =>
+    navigate({
+      pathname: "/blocks/[blockHeight]",
+      query: { blockHeight },
+    });
+
   const toTxs = () =>
     navigate({
       pathname: "/txs",
@@ -246,7 +252,7 @@ const Home = () => {
         <Heading as="h5" variant="h5" mb={5}>
           Recent Blocks
         </Heading>
-        <BlocksTable isViewMore />
+        <BlocksTable isViewMore onRowSelect={onBlockRowSelect} />
         {latestBlockInfo?.height && latestBlockInfo.height > 5 && (
           <ViewMore onClick={toBlocks} />
         )}

From 36e0541674991065653de6b576b390401fab9b1c Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 26 Oct 2023 15:46:30 +0700
Subject: [PATCH 243/368] fix(components): add tab index

---
 src/lib/pages/contract-details/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 48eaa8bb1..6b31c07bc 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -201,7 +201,7 @@ const ContractDetailsBody = observer(
     return (
       <>
         <ContractTop contractAddress={contractAddress} {...contractData} />
-        <Tabs isLazy>
+        <Tabs index={Object.values(TabIndex).indexOf(tab)} isLazy>
           <TabList
             mt={6}
             mb={8}

From cc0e9105c3b3741281b5ab32e0bba7062d353209 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 26 Oct 2023 16:11:28 +0700
Subject: [PATCH 244/368] fix: isBlock, validate address

---
 src/lib/components/abi/args-form/field/index.tsx | 12 ++++++++++--
 .../interact/hooks/useValidateModuleInput.ts     | 16 ++++++++++------
 src/lib/services/blockService.ts                 | 10 ++--------
 src/lib/utils/validate.test.ts                   | 16 ++++++++++++++--
 src/lib/utils/validate.ts                        |  4 ++++
 5 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index c6d23b536..cff3e12f7 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -39,8 +39,16 @@ export const ArgFieldTemplate = ({
 
   const isValidArgAddress = useCallback(
     (input: string) =>
-      validateUserAddress(input) === null || validateHexWalletAddress(input),
-    [validateHexWalletAddress, validateUserAddress]
+      validateUserAddress(input) === null ||
+      validateContractAddress(input) === null ||
+      validateHexWalletAddress(input) ||
+      validateHexModuleAddress(input),
+    [
+      validateContractAddress,
+      validateHexModuleAddress,
+      validateHexWalletAddress,
+      validateUserAddress,
+    ]
   );
   const isValidArgObject = useCallback(
     (input: string) =>
diff --git a/src/lib/pages/interact/hooks/useValidateModuleInput.ts b/src/lib/pages/interact/hooks/useValidateModuleInput.ts
index fe0ac3e79..4511dfcd9 100644
--- a/src/lib/pages/interact/hooks/useValidateModuleInput.ts
+++ b/src/lib/pages/interact/hooks/useValidateModuleInput.ts
@@ -6,10 +6,15 @@ import {
   useValidateAddress,
 } from "lib/app-provider";
 import type { Nullable } from "lib/types";
-import { isHexWalletAddress, splitModule, truncate } from "lib/utils";
+import {
+  isHexModuleAddress,
+  isHexWalletAddress,
+  splitModule,
+  truncate,
+} from "lib/utils";
 
 export const useValidateModuleInput = () => {
-  const { validateUserAddress } = useValidateAddress();
+  const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const {
     chain: { bech32_prefix: prefix },
   } = useCurrentChain();
@@ -26,16 +31,15 @@ export const useValidateModuleInput = () => {
       // Allow only module path for now
       if (inputArr.length > 3) return errText;
       const [address, module, functionName] = inputArr;
-      const addrErr = validateUserAddress(address);
       const invalidAddress = address.startsWith(prefix)
-        ? addrErr
-        : !isHexWalletAddress(address);
+        ? !!validateUserAddress(address) && !!validateContractAddress(address)
+        : !isHexWalletAddress(address) && !isHexModuleAddress(address);
 
       if (invalidAddress || module === "" || functionName === "")
         return errText;
 
       return null;
     },
-    [errText, prefix, validateUserAddress]
+    [errText, prefix, validateContractAddress, validateUserAddress]
   );
 };
diff --git a/src/lib/services/blockService.ts b/src/lib/services/blockService.ts
index ba029971f..4660ec79e 100644
--- a/src/lib/services/blockService.ts
+++ b/src/lib/services/blockService.ts
@@ -17,13 +17,7 @@ import type {
   Nullable,
   ValidatorAddr,
 } from "lib/types";
-import {
-  isBlock,
-  isHexWalletAddress,
-  parseDate,
-  parseDateOpt,
-  parseTxHash,
-} from "lib/utils";
+import { isBlock, parseDate, parseDateOpt, parseTxHash } from "lib/utils";
 
 export const useBlocklistQuery = (
   limit: number,
@@ -126,7 +120,7 @@ export const useBlockInfoQuery = (
     [CELATONE_QUERY_KEYS.BLOCK_INFO, indexerGraphClient, height],
     queryFn,
     {
-      enabled: isBlock(height) && !isHexWalletAddress(height),
+      enabled: isBlock(height),
       retry: false,
       refetchOnWindowFocus: false,
     }
diff --git a/src/lib/utils/validate.test.ts b/src/lib/utils/validate.test.ts
index 447043103..41e817dd5 100644
--- a/src/lib/utils/validate.test.ts
+++ b/src/lib/utils/validate.test.ts
@@ -15,6 +15,12 @@ describe("isCodeId", () => {
     test("length too long", () => {
       expect(isCodeId("12345678")).toBeFalsy();
     });
+    test("negative number", () => {
+      expect(isCodeId("-1234")).toBeFalsy();
+    });
+    test("hexstring", () => {
+      expect(isCodeId("0x1234")).toBeFalsy();
+    });
   });
 });
 
@@ -49,10 +55,16 @@ describe("isBlock", () => {
   });
   describe("invalid", () => {
     test("empty string", () => {
-      expect(isCodeId("")).toBeFalsy();
+      expect(isBlock("")).toBeFalsy();
     });
     test("non-number string", () => {
-      expect(isCodeId("1234ABCD")).toBeFalsy();
+      expect(isBlock("1234ABCD")).toBeFalsy();
+    });
+    test("negative number", () => {
+      expect(isBlock("-1234")).toBeFalsy();
+    });
+    test("hexstring", () => {
+      expect(isBlock("0x1234")).toBeFalsy();
     });
   });
 });
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index e92ff34e5..993c44eda 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -6,6 +6,8 @@ import type { HexAddr } from "lib/types";
 import { padHexAddress } from "./address";
 
 export const isCodeId = (input: string): boolean => {
+  // TODO: refactor this to isHex later
+  if (input.startsWith("0x")) return false;
   const numberValue = Number(input);
   return input.length <= 7 && Number.isInteger(numberValue) && numberValue > 0;
 };
@@ -20,6 +22,8 @@ export const isTxHash = (input: string): boolean => {
 };
 
 export const isBlock = (input: string): boolean => {
+  // TODO: refactor this to isHex later
+  if (input.startsWith("0x")) return false;
   const numberValue = Number(input);
   return Number.isInteger(numberValue) && numberValue > 0;
 };

From 60a84b5b1998ddb2db81a77940731d93d1537552 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 26 Oct 2023 16:28:53 +0700
Subject: [PATCH 245/368] fix: initia's daemon name

---
 src/lib/chain-registry/initiatestnet.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index 3470f4e28..7c4eaba91 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -9,7 +9,7 @@ export const initiatestnet: Chain[] = [
     pretty_name: "Initia Testnet 10",
     chain_id: "stone-10",
     bech32_prefix: "init",
-    daemon_name: "initd",
+    daemon_name: "initiad",
     node_home: "$HOME/.init",
     key_algos: ["secp256k1"],
     slip44: 118,
@@ -56,7 +56,7 @@ export const initiatestnet: Chain[] = [
     pretty_name: "Initia Testnet 11",
     chain_id: "stone-11",
     bech32_prefix: "init",
-    daemon_name: "initd",
+    daemon_name: "initiad",
     node_home: "$HOME/.init",
     key_algos: ["secp256k1"],
     slip44: 118,

From 740893869e74ab3cefde8021d02311cb19c5d9d9 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 26 Oct 2023 16:40:32 +0700
Subject: [PATCH 246/368] feat: add lp token breakdown and tweak ui

---
 src/lib/app-provider/env.ts                   |   1 +
 src/lib/components/table/TableTitle.tsx       |   2 +-
 src/lib/components/{ => token}/TokenCard.tsx  |  16 +-
 src/lib/components/token/TokenComposition.tsx |  55 +++++
 src/lib/components/token/TokenImageRender.tsx |  28 +++
 src/lib/components/token/index.ts             |   3 +
 .../components/asset/index.tsx                |  24 +-
 .../components/delegations/DelegationInfo.tsx |   2 +-
 .../delegations/DelegationsBody.tsx           |   2 +-
 .../components/delegations/index.tsx          |  57 ++++-
 .../radio-card/MultiBondsRadioCard.tsx        |   2 +-
 .../delegations/radio-card/index.tsx          |   2 +-
 .../delegations/total-card/MultiBondsCard.tsx |   4 +-
 .../delegations/total-card/SingleBondCard.tsx |  13 +-
 .../total-card/SingleBondMultiAssetsCard.tsx  |   2 +-
 .../delegations/total-card/TotalCardModal.tsx |  27 ++-
 .../delegations/total-card/TotalCardTop.tsx   |   2 +-
 .../delegations/total-card/index.tsx          |   2 +-
 .../components/tables/TokenCell.tsx           |  31 +--
 .../tables/bonded/BondedTableHeader.tsx       |   6 +-
 .../tables/bonded/BondedTableRow.tsx          |   5 +
 .../components/tables/bonded/TokensCell.tsx   |  16 +-
 .../tables/bonded/UnbondingsTable.tsx         |   1 +
 .../redelegation/RedelegationTableRow.tsx     |  11 +-
 src/lib/pages/account-details/data.ts         |  53 +++--
 src/lib/pages/account-details/types.ts        |   2 +-
 .../components/TokenSection.tsx               |   2 +-
 .../interact/component/form/ViewArea.tsx      |   1 +
 src/lib/pages/pools/components/PoolLogo.tsx   |   7 +-
 .../tables/pool-assets/PoolAssetsTableRow.tsx |   7 +-
 .../messages/components/PoolAssetCard.tsx     |   2 +-
 .../messages/swap/components/PoolRoute.tsx    |   2 +-
 .../components/supportedSection/PoolCard.tsx  |   6 +-
 .../UnsupportedPoolCard.tsx                   |   6 +-
 src/lib/pages/pools/data.ts                   |   4 +-
 .../tx-message/msg-receipts/CoinComponent.tsx |   2 +-
 src/lib/services/move/index.ts                |   4 +
 src/lib/services/move/moduleService.ts        |   3 +-
 src/lib/services/poolService.ts               | 211 +++++++++++++++++-
 src/lib/styles/theme/components/radio.ts      |  62 +++--
 src/lib/types/asset.ts                        |  33 ++-
 src/lib/types/currency/balance.ts             |   2 +
 src/lib/types/pool.ts                         |  13 ++
 src/lib/utils/abi.ts                          |   6 +-
 src/lib/utils/assetValue.ts                   |  73 ++++--
 src/lib/utils/json.ts                         |   7 +-
 yarn.lock                                     |  10 +
 47 files changed, 660 insertions(+), 172 deletions(-)
 rename src/lib/components/{ => token}/TokenCard.tsx (87%)
 create mode 100644 src/lib/components/token/TokenComposition.tsx
 create mode 100644 src/lib/components/token/TokenImageRender.tsx
 create mode 100644 src/lib/components/token/index.ts
 create mode 100644 src/lib/services/move/index.ts

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 24ff47333..37b4aaded 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -93,6 +93,7 @@ export enum CELATONE_QUERY_KEYS {
   POOL_INFO_BY_IDS = "CELATONE_QUERY_POOL_INFO_BY_IDS",
   POOL_TRANSACTION_BY_ID = "CELATONE_QUERY_POOL_TRANSACTION_BY_ID",
   POOL_TRANSACTION_BY_ID_COUNT = "CELATONE_QUERY_POOL_TRANSACTION_BY_ID_COUNT",
+  POOL_MOVE_LP_SHARE_INFO = "CELATONE_QUERY_POOL_MOVE_LP_SHARE_INFO",
   // MODULES
   ACCOUNT_MODULES = "CELATONE_QUERY_ACCOUNT_MODULES",
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index d8307e5c9..de64e5c33 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -25,7 +25,7 @@ export const TableTitle = ({
         {count ?? "N/A"}
       </Badge>
     </Flex>
-    <Text variant="body2" textColor="text.dark">
+    <Text variant="body2" textColor="text.dark" fontWeight={600}>
       {helperText}
     </Text>
   </Box>
diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/token/TokenCard.tsx
similarity index 87%
rename from src/lib/components/TokenCard.tsx
rename to src/lib/components/token/TokenCard.tsx
index d2af5f3ea..5d191f6fa 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/token/TokenCard.tsx
@@ -1,7 +1,8 @@
 import type { FlexProps } from "@chakra-ui/react";
-import { Badge, Flex, Image, Text } from "@chakra-ui/react";
+import { Badge, Flex, Text } from "@chakra-ui/react";
 
-import { NAToken } from "lib/icon";
+import { Copier } from "../copy";
+import { Tooltip } from "../Tooltip";
 import type { BalanceWithAssetInfo, Token, U, USD } from "lib/types";
 import {
   calAssetValueWithPrecision,
@@ -9,8 +10,7 @@ import {
   formatUTokenWithPrecision,
 } from "lib/utils";
 
-import { Copier } from "./copy";
-import { Tooltip } from "./Tooltip";
+import { TokenImageRender } from "./TokenImageRender";
 
 interface TokenCardProps extends FlexProps {
   userBalance: BalanceWithAssetInfo;
@@ -43,12 +43,10 @@ export const TokenCard = ({
           borderBottomColor="gray.700"
           pb={2}
         >
-          <Image
-            boxSize={6}
-            src={userBalance.assetInfo?.logo}
+          <TokenImageRender
+            logo={userBalance.lpLogo ?? userBalance.assetInfo?.logo}
             alt={symbol}
-            fallback={<NAToken />}
-            fallbackStrategy="onError"
+            boxSize={6}
           />
           <Text
             variant="body2"
diff --git a/src/lib/components/token/TokenComposition.tsx b/src/lib/components/token/TokenComposition.tsx
new file mode 100644
index 000000000..344d464e2
--- /dev/null
+++ b/src/lib/components/token/TokenComposition.tsx
@@ -0,0 +1,55 @@
+import { Flex, type FlexProps, Text } from "@chakra-ui/react";
+
+import type { TokenWithValue } from "lib/types";
+import {
+  formatPrice,
+  formatUTokenWithPrecision,
+  getTokenLabel,
+} from "lib/utils";
+
+interface TokenCompositionProps extends FlexProps {
+  token: TokenWithValue;
+}
+
+export const TokenComposition = ({
+  token,
+  ...flexProps
+}: TokenCompositionProps) => (
+  <Flex direction="column" {...flexProps}>
+    {token.isLpToken ? (
+      <Flex>
+        <Text variant="body2">
+          <Text as="span" mr={1} fontWeight={700}>
+            {token.lpDetails.coinA.amount}
+          </Text>
+          {getTokenLabel(
+            token.lpDetails.coinA.denom,
+            token.lpDetails.coinA.symbol
+          )}
+        </Text>
+        <Text variant="body2" mx={1}>
+          +
+        </Text>
+        <Text variant="body2">
+          <Text as="span" mr={1} fontWeight={700}>
+            {token.lpDetails.coinB.amount}
+          </Text>
+          {getTokenLabel(
+            token.lpDetails.coinB.denom,
+            token.lpDetails.coinB.symbol
+          )}
+        </Text>
+      </Flex>
+    ) : (
+      <Text variant="body2">
+        <Text as="span" fontWeight={700} mr={1}>
+          {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
+        </Text>
+        {getTokenLabel(token.denom, token.symbol)}
+      </Text>
+    )}
+    <Text variant="body3" textColor="text.dark">
+      {token.value ? `(≈ ${formatPrice(token.value)})` : "-"}
+    </Text>
+  </Flex>
+);
diff --git a/src/lib/components/token/TokenImageRender.tsx b/src/lib/components/token/TokenImageRender.tsx
new file mode 100644
index 000000000..b51b732fd
--- /dev/null
+++ b/src/lib/components/token/TokenImageRender.tsx
@@ -0,0 +1,28 @@
+import type { ImageProps } from "@chakra-ui/react";
+import { Image, Flex } from "@chakra-ui/react";
+
+import { NAToken } from "lib/icon";
+import type { Option } from "lib/types";
+
+const TokenImage = (props: ImageProps) => (
+  <Image
+    boxSize={5}
+    fallback={<NAToken />}
+    fallbackStrategy="onError"
+    {...props}
+  />
+);
+
+interface TokenImageRenderProps extends ImageProps {
+  logo: Option<string | string[]>;
+}
+
+export const TokenImageRender = ({ logo, ...props }: TokenImageRenderProps) =>
+  Array.isArray(logo) ? (
+    <Flex>
+      <TokenImage src={logo[0]} alt={logo[0]} zIndex={1} {...props} />
+      <TokenImage src={logo[1]} alt={logo[1]} ml="-6px" {...props} />
+    </Flex>
+  ) : (
+    <TokenImage src={logo} alt={logo} {...props} />
+  );
diff --git a/src/lib/components/token/index.ts b/src/lib/components/token/index.ts
new file mode 100644
index 000000000..3723b2e5d
--- /dev/null
+++ b/src/lib/components/token/index.ts
@@ -0,0 +1,3 @@
+export * from "./TokenCard";
+export * from "./TokenComposition";
+export * from "./TokenImageRender";
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index 01a1670a5..ba1ef4ca3 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -8,7 +8,7 @@ import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { UnsupportedTokensModal } from "lib/components/modal";
 import { TableTitle, ViewMore } from "lib/components/table";
-import { TokenCard } from "lib/components/TokenCard";
+import { TokenCard } from "lib/components/token/TokenCard";
 import { useOpenAssetTab } from "lib/hooks";
 import { useUserAssetInfos } from "lib/pages/account-details/data";
 import type { BalanceWithAssetInfo, HumanAddr, Option, USD } from "lib/types";
@@ -28,8 +28,9 @@ interface AssetSectionContentProps {
 }
 
 interface AssetCtaProps {
-  walletAddress: HumanAddr;
+  unsupportedAssets: Option<BalanceWithAssetInfo[]>;
   totalAsset: number;
+  walletAddress: HumanAddr;
 }
 
 const MAX_ASSETS_SHOW = 8;
@@ -68,8 +69,11 @@ const AssetTitle = ({
   return <TableTitle title="Assets" count={totalAsset} mb={0} />;
 };
 
-const AssetCta = ({ walletAddress, totalAsset }: AssetCtaProps) => {
-  const { unsupportedAssets } = useUserAssetInfos(walletAddress);
+const AssetCta = ({
+  unsupportedAssets,
+  totalAsset,
+  walletAddress,
+}: AssetCtaProps) => {
   const openAssetTab = useOpenAssetTab();
   const { trackUseViewJSON } = useTrack();
 
@@ -181,7 +185,11 @@ export const AssetsSection = ({
           >
             <Flex gap="50px">{TotalAssetValueInfo}</Flex>
             {!isMobile && (
-              <AssetCta walletAddress={walletAddress} totalAsset={totalAsset} />
+              <AssetCta
+                unsupportedAssets={unsupportedAssets}
+                walletAddress={walletAddress}
+                totalAsset={totalAsset}
+              />
             )}
           </Flex>
           <AssetSectionContent
@@ -190,7 +198,11 @@ export const AssetsSection = ({
             error={error}
           />
           {isMobile && (
-            <AssetCta walletAddress={walletAddress} totalAsset={totalAsset} />
+            <AssetCta
+              unsupportedAssets={unsupportedAssets}
+              walletAddress={walletAddress}
+              totalAsset={totalAsset}
+            />
           )}
         </>
       )}
diff --git a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
index c6a100abb..963afedac 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
@@ -37,7 +37,7 @@ export const DelegationInfo = ({
         >
           <Flex direction="column" gap={2}>
             <Heading variant="h6" as="h6">
-              Delegations
+              Delegation Details
             </Heading>
             {totalBondedCard}
           </Flex>
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index 7f00fa1e8..8d966dd82 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -34,7 +34,7 @@ export const DelegationsBody = ({
   const [value, setValue] = useState("Delegated");
   const { trackUseRadio } = useTrack();
   return (
-    <Flex direction="column" gap={8}>
+    <Flex direction="column" gap={8} p={8} borderRadius="8px" bg="gray.900">
       <RadioGroup
         onChange={(newValue) => {
           trackUseRadio(newValue.toLocaleLowerCase());
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index cc81db431..e7b301b5f 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -1,22 +1,61 @@
-import { Flex, useDisclosure } from "@chakra-ui/react";
+import { Flex, Heading, useDisclosure } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { useUserDelegationInfos } from "lib/pages/account-details/data";
-import type { HumanAddr } from "lib/types";
-import { getTokenLabel } from "lib/utils";
+import type { HumanAddr, USD } from "lib/types";
+import {
+  formatPrice,
+  getTokenLabel,
+  totalValueTokenWithValue,
+} from "lib/utils";
 
 import { DelegationInfo } from "./DelegationInfo";
 import { DelegationsBody } from "./DelegationsBody";
 import { RedelegationsSection } from "./RedelegationsSection";
+import type { TotalCardProps } from "./total-card";
 import { TotalCard } from "./total-card";
+import { TotalCardTop } from "./total-card/TotalCardTop";
 
 interface DelegationsSectionProps {
   walletAddress: HumanAddr;
   onViewMore?: () => void;
 }
 
+interface DisplayCardProps extends TotalCardProps {
+  isViewMore: boolean;
+}
+
+export const DisplayCard = ({
+  isViewMore,
+  ...totalCardProps
+}: DisplayCardProps) =>
+  isViewMore ? (
+    <Flex direction="column" gap={1} minW="233px">
+      <TotalCardTop
+        title={totalCardProps.title}
+        message={totalCardProps.message}
+        fontWeight={600}
+      />
+      {!totalCardProps.tokens ? (
+        <Heading variant="h6" as="h6">
+          N/A
+        </Heading>
+      ) : (
+        <Heading variant="h6" as="h6">
+          {formatPrice(
+            totalValueTokenWithValue(totalCardProps.tokens, big(0) as USD<Big>)
+          )}
+        </Heading>
+      )}
+    </Flex>
+  ) : (
+    <TotalCard {...totalCardProps} />
+  );
+
 export const DelegationsSection = ({
   walletAddress,
   onViewMore,
@@ -43,7 +82,6 @@ export const DelegationsSection = ({
     totalCommission,
     isLoadingTotalCommission,
   } = useUserDelegationInfos(walletAddress);
-
   if (isLoading) return <Loading withBorder />;
   if (!stakingParams)
     return <EmptyState message="Error fetching delegation data" />;
@@ -60,7 +98,7 @@ export const DelegationsSection = ({
     >
       <Flex
         direction="column"
-        gap={4}
+        gap={8}
         w="full"
         position={isOpen ? "absolute" : "relative"}
         opacity={isOpen ? 0 : 1}
@@ -69,7 +107,7 @@ export const DelegationsSection = ({
       >
         <DelegationInfo
           totalBondedCard={
-            <TotalCard
+            <DisplayCard
               title="Total Bonded"
               message={`Total delegated and unbonding ${
                 stakingParams.bondDenoms.length === 1
@@ -83,11 +121,12 @@ export const DelegationsSection = ({
               bondDenoms={stakingParams.bondDenoms}
               tokens={totalBonded}
               isLoading={isLoadingTotalBonded}
+              isViewMore={Boolean(onViewMore)}
             />
           }
           otherInfoCards={
             <>
-              <TotalCard
+              <DisplayCard
                 title="Reward"
                 message={`Total rewards earned from delegated ${
                   stakingParams.bondDenoms.length === 1
@@ -98,15 +137,17 @@ export const DelegationsSection = ({
                 bondDenoms={stakingParams.bondDenoms}
                 tokens={totalRewards}
                 isLoading={isLoadingRewards}
+                isViewMore={Boolean(onViewMore)}
               />
               {isValidator && (
-                <TotalCard
+                <DisplayCard
                   title="Commission"
                   message="Total commission reward earned by validator"
                   address={walletAddress}
                   bondDenoms={stakingParams.bondDenoms}
                   tokens={totalCommission}
                   isLoading={isLoadingTotalCommission}
+                  isViewMore={Boolean(onViewMore)}
                 />
               )}
             </>
diff --git a/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx b/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
index ad7f18efb..aa8983718 100644
--- a/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
@@ -37,7 +37,7 @@ export const MultiBondsRadioCard = ({
   isLoading,
 }: MultiBondsRadioCardProps) => (
   <Flex direction="column" gap={1}>
-    <Text variant="body2" textColor="gray.400" fontWeight={500}>
+    <Text variant="body2" textColor="gray.400" fontWeight={600}>
       {value}
     </Text>
     <MultiBondsRadioCardBody tokens={tokens} isLoading={isLoading} />
diff --git a/src/lib/pages/account-details/components/delegations/radio-card/index.tsx b/src/lib/pages/account-details/components/delegations/radio-card/index.tsx
index 5bc123f03..2ef492985 100644
--- a/src/lib/pages/account-details/components/delegations/radio-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/radio-card/index.tsx
@@ -21,7 +21,7 @@ export const RadioCard = ({
   isLoading,
   bondDenoms,
 }: RadioCardProps) => (
-  <Radio variant="card" value={value} overflowX="hidden">
+  <Radio variant="gray-card" value={value} overflowX="hidden">
     {bondDenoms.length === 1 ? (
       <SingleBondRadioCard
         value={value}
diff --git a/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
index d21f84044..71c3b53b8 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/MultiBondsCard.tsx
@@ -46,7 +46,7 @@ export const MultiBondsCard = ({
       onClick={!isDisabled ? onOpen : undefined}
     >
       <Flex direction="column" gap={1}>
-        <TotalCardTop title={title} message={message} fontWeight={500} />
+        <TotalCardTop title={title} message={message} fontWeight={600} />
         {!tokens ? (
           <Heading variant="h6" as="h6">
             N/A
@@ -72,7 +72,7 @@ export const MultiBondsCard = ({
           </>
         )}
       </Flex>
-      <CustomIcon name="chevron-right" boxSize={4} color="secondary.main" />
+      <CustomIcon name="chevron-right" boxSize={4} color="gray.400" />
     </Flex>
   );
 };
diff --git a/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
index 09b83577f..79941bf9c 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
@@ -1,6 +1,6 @@
-import { Flex, Heading, Image, Text } from "@chakra-ui/react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
 
-import { NAToken } from "lib/icon";
+import { TokenImageRender } from "lib/components/token";
 import type { Option, TokenWithValue } from "lib/types";
 import {
   formatPrice,
@@ -22,7 +22,7 @@ export const SingleBondCard = ({
   token,
 }: SingleBondCardProps) => (
   <Flex direction="column" minW="233px" gap={1}>
-    <TotalCardTop title={title} message={message} fontWeight={500} />
+    <TotalCardTop title={title} message={message} fontWeight={600} />
     {!token ? (
       <Heading variant="h6" as="h6">
         N/A
@@ -35,12 +35,7 @@ export const SingleBondCard = ({
         <Text variant="body1" textColor="text.main">
           {getTokenLabel(token.denom, token.symbol)}
         </Text>
-        <Image
-          boxSize={6}
-          src={token.logo}
-          alt={getTokenLabel(token.denom, token.symbol)}
-          fallback={<NAToken />}
-        />
+        <TokenImageRender logo={token.logo} boxSize={6} />
       </Flex>
     )}
     <Text variant="body2" textColor="text.dark">
diff --git a/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx
index ad7485b8c..2b5ce4796 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx
@@ -24,7 +24,7 @@ export const SingleBondMultiAssetsCard = ({
   const { isOpen, onOpen, onClose } = useDisclosure();
   return (
     <Flex direction="column" minW="233px" gap={1}>
-      <TotalCardTop title={title} message={message} fontWeight={500} />
+      <TotalCardTop title={title} message={message} fontWeight={600} />
       <Heading variant="h6" as="h6">
         {formatPrice(totalValueTokenWithValue(tokens, Big(0) as USD<Big>))}
       </Heading>
diff --git a/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx b/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
index f3f0043af..01a1aa973 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
@@ -16,10 +16,12 @@ import big from "big.js";
 
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
+import { TokenImageRender, TokenComposition } from "lib/components/token";
 import type { Addr, TokenWithValue, USD } from "lib/types";
 import {
   compareTokenWithValues,
   formatPrice,
+  getTokenLabel,
   totalValueTokenWithValue,
 } from "lib/utils";
 
@@ -34,6 +36,24 @@ interface TotalCardModel {
   onClose: () => void;
 }
 
+const DelegationTokenCard = ({ token }: { token: TokenWithValue }) => (
+  <Flex
+    bg="gray.900"
+    borderRadius="8px"
+    p="12px 16px"
+    align="center"
+    justify="space-between"
+  >
+    <Flex align="center" gap={2}>
+      <TokenImageRender boxSize={6} logo={token.logo} alt={token.denom} />
+      <Text variant="body1" fontWeight={700}>
+        {getTokenLabel(token.denom, token.symbol)}
+      </Text>
+    </Flex>
+    <TokenComposition token={token} alignItems="flex-end" />
+  </Flex>
+);
+
 export const TotalCardModal = ({
   title,
   message,
@@ -49,7 +69,7 @@ export const TotalCardModal = ({
     returnFocusOnClose={false}
   >
     <ModalOverlay />
-    <ModalContent w="640px">
+    <ModalContent w="800px" bg="gray.800">
       <ModalHeader>
         <Flex w="full" direction="row" alignItems="center" gap={3}>
           <CustomIcon name="assets-solid" boxSize={5} m={1} color="gray.600" />
@@ -58,7 +78,7 @@ export const TotalCardModal = ({
           </Heading>
         </Flex>
       </ModalHeader>
-      <ModalCloseButton color="gray.600" />
+      <ModalCloseButton color="gray.400" />
       <ModalBody maxH="400px" overflow="overlay">
         <Flex direction="column" gap={4}>
           <Grid templateColumns="1fr 1fr">
@@ -86,11 +106,10 @@ export const TotalCardModal = ({
             </GridItem>
           </Grid>
           <Flex gap={2} direction="column">
-            {/* TODO: fix */}
             {Object.values(tokens)
               .sort(compareTokenWithValues)
               .map((token) => (
-                <Text>{`${token.amount}${token.denom}`}</Text>
+                <DelegationTokenCard key={token.denom} token={token} />
               ))}
           </Flex>
         </Flex>
diff --git a/src/lib/pages/account-details/components/delegations/total-card/TotalCardTop.tsx b/src/lib/pages/account-details/components/delegations/total-card/TotalCardTop.tsx
index 00a5da749..0affe2f70 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/TotalCardTop.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/TotalCardTop.tsx
@@ -15,7 +15,7 @@ export const TotalCardTop = ({
   message,
   fontWeight,
 }: TotalCardTopProps) => (
-  <Flex alignItems="center" gap={1}>
+  <Flex alignItems="center" gap={2}>
     <Text variant="body2" fontWeight={fontWeight} textColor="text.dark">
       {title}
     </Text>
diff --git a/src/lib/pages/account-details/components/delegations/total-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
index 44dda50fd..8e393cafb 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
@@ -7,7 +7,7 @@ import { MultiBondsCard } from "./MultiBondsCard";
 import { SingleBondCard } from "./SingleBondCard";
 import { SingleBondMultiAssetsCard } from "./SingleBondMultiAssetsCard";
 
-interface TotalCardProps {
+export interface TotalCardProps {
   title: string;
   message: string;
   address: Addr;
diff --git a/src/lib/pages/account-details/components/tables/TokenCell.tsx b/src/lib/pages/account-details/components/tables/TokenCell.tsx
index 71ecea6a0..90f676c40 100644
--- a/src/lib/pages/account-details/components/tables/TokenCell.tsx
+++ b/src/lib/pages/account-details/components/tables/TokenCell.tsx
@@ -1,36 +1,15 @@
-import { Flex, Image, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
-import { NAToken } from "lib/icon";
+import { TokenImageRender, TokenComposition } from "lib/components/token";
 import type { TokenWithValue } from "lib/types";
-import {
-  formatPrice,
-  formatUTokenWithPrecision,
-  getTokenLabel,
-} from "lib/utils";
 
 interface TokenCellProps {
   token: TokenWithValue;
 }
 
 export const TokenCell = ({ token }: TokenCellProps) => (
-  <Flex alignItems="center" gap={1}>
-    <Image
-      boxSize={6}
-      src={token.logo}
-      alt={getTokenLabel(token.denom, token.symbol)}
-      fallback={<NAToken />}
-      fallbackStrategy="onError"
-    />
-    <Flex direction="column">
-      <Flex gap={1} alignItems="center">
-        <Text variant="body2" fontWeight={700}>
-          {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
-        </Text>
-        <Text variant="body2">{getTokenLabel(token.denom, token.symbol)}</Text>
-      </Flex>
-      <Text variant="body3" textColor="text.dark">
-        ({token.value ? formatPrice(token.value) : "-"})
-      </Text>
-    </Flex>
+  <Flex alignItems="center" gap={2}>
+    <TokenImageRender logo={token.logo} />
+    <TokenComposition token={token} />
   </Flex>
 );
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableHeader.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableHeader.tsx
index 066058520..73f095f60 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableHeader.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableHeader.tsx
@@ -10,7 +10,11 @@ export const BondedTableHeader = ({
   templateColumns: GridProps["templateColumns"];
   isDelegation: boolean;
 }) => (
-  <Grid templateColumns={templateColumns} minW="min-content">
+  <Grid
+    templateColumns={templateColumns}
+    minW="min-content"
+    sx={{ "& > div": { color: "text.dark" } }}
+  >
     <TableHeader>Validator</TableHeader>
     <TableHeader>Amount</TableHeader>
     <TableHeader>{isDelegation ? "Reward" : "Unbond Completed By"}</TableHeader>
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
index 82efa03c2..aa7b3904c 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
@@ -18,18 +18,21 @@ interface BondedTableRowProps {
   bondedInfo: BondedInfo;
   isSingleBondDenom: boolean;
   templateColumns: string;
+  isUnbonding?: boolean;
 }
 
 export const BondedTableRow = ({
   bondedInfo,
   isSingleBondDenom,
   templateColumns,
+  isUnbonding,
 }: BondedTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
     _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     minW="min-content"
+    sx={{ "& > div": { alignItems: "flex-start" } }}
   >
     <TableRow>
       <ValidatorBadge validator={bondedInfo.validator} />
@@ -38,6 +41,7 @@ export const BondedTableRow = ({
       <TokensCell
         tokens={bondedInfo.balances}
         isSingleBondDenom={isSingleBondDenom}
+        isUnbonding={isUnbonding}
       />
     </TableRow>
 
@@ -46,6 +50,7 @@ export const BondedTableRow = ({
         <TokensCell
           tokens={bondedInfo.rewards}
           isSingleBondDenom={isSingleBondDenom}
+          isUnbonding={isUnbonding}
         />
       </TableRow>
     )}
diff --git a/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx b/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
index 676598d59..e9e271b45 100644
--- a/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
@@ -6,6 +6,7 @@ import type { TokenWithValue } from "lib/types";
 interface TokensCellProps {
   tokens: TokenWithValue[];
   isSingleBondDenom: boolean;
+  isUnbonding?: boolean;
 }
 
 const EmptyTokenCell = () => (
@@ -14,14 +15,25 @@ const EmptyTokenCell = () => (
   </Text>
 );
 
-export const TokensCell = ({ tokens, isSingleBondDenom }: TokensCellProps) => {
+export const TokensCell = ({
+  tokens,
+  isSingleBondDenom,
+  isUnbonding,
+}: TokensCellProps) => {
   if (isSingleBondDenom) {
     if (!tokens.length) return <EmptyTokenCell />;
     return <TokenCell token={tokens[0]} />;
   }
 
   return (
-    <Flex direction="column" p={3} bgColor="gray.800" borderRadius="8px">
+    <Flex
+      direction="column"
+      p={3}
+      bgColor={isUnbonding ? undefined : "gray.800"}
+      borderRadius="8px"
+      gap={2}
+      w="full"
+    >
       {!tokens.length ? (
         <EmptyTokenCell />
       ) : (
diff --git a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
index f560eadf7..94651022e 100644
--- a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
@@ -82,6 +82,7 @@ const UnbondingsTableBody = ({
           }}
           isSingleBondDenom={isSingleBondDenom}
           templateColumns={TEMPLATE_COLUMNS}
+          isUnbonding
         />
       ))}
     </TableContainer>
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
index 5193f7dc3..c3487c853 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
@@ -31,13 +31,10 @@ export const RedelegationTableRow = ({
     <TableRow>
       <ValidatorBadge validator={redelegation.dstValidator} />
     </TableRow>
-    <TableRow>
-      {
-        /* TODO: double check with multi denom */
-        redelegation.balances.map((balance) => (
-          <TokenCell token={balance} />
-        ))
-      }
+    <TableRow flexDirection="column" alignItems="start" gap={2}>
+      {redelegation.balances.map((balance) => (
+        <TokenCell key={balance.denom} token={balance} />
+      ))}
     </TableRow>
     <TableRow>
       <Flex direction="column">
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index 2e56b52de..da170af62 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -18,6 +18,7 @@ import {
   useStakingParams,
   useUnbondings,
 } from "lib/services/delegationService";
+import { useLPShareInfo } from "lib/services/poolService";
 import { useValidators } from "lib/services/validatorService";
 import type {
   BalanceWithAssetInfo,
@@ -169,17 +170,32 @@ export const useUserAssetInfos = (
     error,
   } = useAccountBalances(walletAddress);
   const { assetInfos } = useAssetInfos({ withPrices: true });
+  const { data: lpMap } = useLPShareInfo();
 
   const contractBalancesWithAssetInfos = balances?.map<BalanceWithAssetInfo>(
-    (balance): BalanceWithAssetInfo => ({
-      balance,
-      assetInfo: assetInfos?.[balance.id],
-    })
+    (balance): BalanceWithAssetInfo => {
+      const assetInfo = assetInfos?.[balance.id];
+      const isLp = balance.id in (lpMap || {});
+      const lpDetails = lpMap?.[balance.id];
+      return {
+        balance: {
+          ...balance,
+          price: isLp ? lpDetails?.lpPricePerShare.toNumber() : balance.price,
+          symbol: isLp ? lpDetails?.symbol : balance.symbol,
+          precision: isLp ? lpDetails?.precision ?? 0 : balance.precision,
+        },
+        assetInfo,
+        isLpToken: isLp,
+        lpLogo: lpDetails?.image,
+      };
+    }
   );
 
   // Supported assets should order by descending value
   const supportedAssets = contractBalancesWithAssetInfos
-    ?.filter((balance) => balance.assetInfo)
+    ?.filter(
+      (balance) => balance.assetInfo || balance.balance.id in (lpMap || {})
+    )
     .sort((a, b) =>
       a.balance.price && b.balance.price
         ? calAssetValueWithPrecision(b.balance).cmp(
@@ -222,6 +238,7 @@ const calBonded = (
 export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
   const { data: rawStakingParams, isLoading: isLoadingRawStakingParams } =
     useStakingParams();
+  const { data: lpMap, isFetching: isLpMapFetching } = useLPShareInfo();
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos({
     withPrices: true,
   });
@@ -239,7 +256,11 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
     useCommission(addrToValoper(walletAddress));
 
   const isLoading =
-    isLoadingRawStakingParams || isLoadingAssetInfos || isLoadingValidators;
+    isLoadingRawStakingParams ||
+    isLoadingAssetInfos ||
+    isLoadingValidators ||
+    isLpMapFetching;
+
   const data: UserDelegationsData = {
     stakingParams: undefined,
     isValidator: undefined,
@@ -261,7 +282,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
     isLoadingTotalCommission: isLoadingRawCommission,
   };
 
-  if (rawStakingParams && assetInfos && validators) {
+  if (rawStakingParams && assetInfos && validators && lpMap) {
     data.stakingParams = {
       ...rawStakingParams,
       bondDenoms: rawStakingParams.bondDenoms.map((denom) => ({
@@ -284,7 +305,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       },
       balances: raw.balance
         .map((coin) =>
-          coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+          coinToTokenWithValue(coin.denom, coin.amount, assetInfos, lpMap)
         )
         .sort(compareTokenWithValues),
     }));
@@ -311,7 +332,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       completionTime: raw.completionTime,
       balances: raw.balance
         .map((coin) =>
-          coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+          coinToTokenWithValue(coin.denom, coin.amount, assetInfos, lpMap)
         )
         .sort(compareTokenWithValues),
     }));
@@ -334,11 +355,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
         ...prev,
         [raw.validatorAddress]: raw.reward
           .map<TokenWithValue>((coin) =>
-            coinToTokenWithValue(
-              coin.denom,
-              coin.amount,
-              assetInfos[coin.denom]
-            )
+            coinToTokenWithValue(coin.denom, coin.amount, assetInfos, lpMap)
           )
           .sort(compareTokenWithValues),
       }),
@@ -352,7 +369,8 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
         [raw.denom]: coinToTokenWithValue(
           raw.denom,
           raw.amount,
-          assetInfos[raw.denom]
+          assetInfos,
+          lpMap
         ),
       }),
       {}
@@ -372,7 +390,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       completionTime: raw.completionTime,
       balances: raw.balance
         .map((coin) =>
-          coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+          coinToTokenWithValue(coin.denom, coin.amount, assetInfos, lpMap)
         )
         .sort(compareTokenWithValues),
     }));
@@ -385,7 +403,8 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
         [raw.denom]: coinToTokenWithValue(
           raw.denom,
           raw.amount,
-          assetInfos[raw.denom]
+          assetInfos,
+          lpMap
         ),
       }),
       {}
diff --git a/src/lib/pages/account-details/types.ts b/src/lib/pages/account-details/types.ts
index a986ecf27..53623466e 100644
--- a/src/lib/pages/account-details/types.ts
+++ b/src/lib/pages/account-details/types.ts
@@ -10,7 +10,7 @@ import type {
 export interface DenomInfo {
   denom: string;
   symbol?: string;
-  logo?: string;
+  logo?: string | string[];
   precision?: number;
 }
 
diff --git a/src/lib/pages/contract-details/components/TokenSection.tsx b/src/lib/pages/contract-details/components/TokenSection.tsx
index 1068b7907..6a269bef5 100644
--- a/src/lib/pages/contract-details/components/TokenSection.tsx
+++ b/src/lib/pages/contract-details/components/TokenSection.tsx
@@ -5,7 +5,7 @@ import type { ContractData } from "../types";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { UnsupportedTokensModal } from "lib/components/modal";
-import { TokenCard } from "lib/components/TokenCard";
+import { TokenCard } from "lib/components/token/TokenCard";
 import type { ContractAddr } from "lib/types";
 
 interface TokenSectionProps {
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 5d83f3ef0..1df79f82c 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -40,6 +40,7 @@ export const ViewArea = ({
     typeArgs: getAbiInitialData(fn.generic_type_params.length),
     args: getAbiInitialData(fn.params.length),
   });
+
   const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
   const [res, setRes] = useState<JsonDataType>(undefined);
   const [error, setError] = useState<Option<string>>(undefined);
diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index e63161f59..783b0cbf0 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -1,7 +1,8 @@
 import type { FlexProps, ImageProps, TextProps } from "@chakra-ui/react";
-import { Flex, Image, Text } from "@chakra-ui/react";
+import { Flex, Text } from "@chakra-ui/react";
 
 import { getUndefinedTokenIcon } from "../utils";
+import { TokenImageRender } from "lib/components/token";
 import type { TokenWithValue } from "lib/types";
 
 interface PoolAssetLogoProps {
@@ -12,9 +13,9 @@ interface PoolAssetLogoProps {
 
 const PoolAssetLogo = ({ token, logoSize, idx }: PoolAssetLogoProps) => (
   <Flex key={token.denom}>
-    <Image
+    <TokenImageRender
+      logo={token.logo || getUndefinedTokenIcon(token.denom)}
       boxSize={logoSize}
-      src={token.logo || getUndefinedTokenIcon(token.denom)}
       zIndex={2 - idx}
     />
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index f0ed874b9..72e8742ab 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -1,9 +1,10 @@
 import type { GridProps } from "@chakra-ui/react";
-import { Flex, Grid, Image, Text } from "@chakra-ui/react";
+import { Flex, Grid, Text } from "@chakra-ui/react";
 import type { Big } from "big.js";
 
 import { Copier } from "lib/components/copy";
 import { TableRow } from "lib/components/table";
+import { TokenImageRender } from "lib/components/token";
 import { TooltipInfo } from "lib/components/Tooltip";
 import { getUndefinedTokenIcon } from "lib/pages/pools/utils";
 import type { USD, PoolDetail, TokenWithValue, Ratio } from "lib/types";
@@ -51,9 +52,9 @@ export const PoolAssetsTableRow = ({
             "& .widget": { display: "flex" },
           }}
         >
-          <Image
+          <TokenImageRender
             boxSize={7}
-            src={token.logo ?? getUndefinedTokenIcon(token.denom)}
+            logo={token.logo ?? getUndefinedTokenIcon(token.denom)}
           />
           <Flex flexDirection="column">
             <Flex align="center" gap={1}>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
index 5520833ba..7bde41dde 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
@@ -47,7 +47,7 @@ export const PoolAssetCard = ({
     );
 
   const tokens = poolAssets[poolId].map<TokenWithValue>((denom) =>
-    coinToTokenWithValue(denom, "0", assetInfos?.[denom])
+    coinToTokenWithValue(denom, "0", assetInfos)
   );
   return (
     <>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
index 2f27c0ffd..8b42b1c1e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
@@ -42,7 +42,7 @@ export const PoolRoute = ({
       </Text>
       {routes.map((pool) => {
         const tokens = poolAssets[pool.poolId].map<TokenWithValue>((denom) =>
-          coinToTokenWithValue(denom, "0", assetInfos?.[denom])
+          coinToTokenWithValue(denom, "0", assetInfos)
         );
         return (
           <Flex
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index ee11f3aa1..22ad68108 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -116,7 +116,7 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
           <AllocationBadge
             key={asset.denom}
             denom={asset.denom}
-            logo={asset.logo}
+            logo={asset.logo as string}
             symbol={asset.symbol}
             precision={asset.precision}
             amount={asset.amount}
@@ -129,7 +129,9 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
           <AllocationBadge
             key="OTHERS"
             denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
-            logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
+            logo={
+              is4Assets ? (item.poolLiquidity[3].logo as string) : undefined
+            }
             symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
             precision={is4Assets ? item.poolLiquidity[3].precision : undefined}
             amount={
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 72bd8edfb..0fa45f3e6 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -6,7 +6,6 @@ import {
   AccordionPanel,
   chakra,
   Text,
-  Image,
   Button,
 } from "@chakra-ui/react";
 import Link from "next/link";
@@ -17,6 +16,7 @@ import { useTrack } from "lib/amplitude";
 import { useInternalNavigate, usePoolConfig } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
+import { TokenImageRender } from "lib/components/token";
 import { Tooltip } from "lib/components/Tooltip";
 import type { Pool } from "lib/types";
 import { PoolType } from "lib/types";
@@ -137,9 +137,9 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                       gap={3}
                       alignItems="center"
                     >
-                      <Image
+                      <TokenImageRender
+                        logo={asset.logo ?? getUndefinedTokenIcon(asset.denom)}
                         boxSize={6}
-                        src={asset.logo ?? getUndefinedTokenIcon(asset.denom)}
                       />
                       <Text variant="body2" color="text.main" fontWeight="bold">
                         {formatUTokenWithPrecision(
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index 70316292f..78fc72e95 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -48,7 +48,7 @@ export const usePools = (
     type: pool.type,
     isSuperfluid: pool.isSuperfluid,
     poolLiquidity: pool.poolLiquidity.map<TokenWithValue>((coin) =>
-      coinToTokenWithValue(coin.denom, coin.amount, assetInfos?.[coin.denom])
+      coinToTokenWithValue(coin.denom, coin.amount, assetInfos)
     ),
     contractAddress: pool.contractAddress,
   }));
@@ -86,7 +86,7 @@ export const usePool = (
       isSuperfluid: pool.isSuperfluid,
       isSupported: pool.isSupported,
       poolLiquidity: pool.poolLiquidity.map<TokenWithValue>((coin) =>
-        coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+        coinToTokenWithValue(coin.denom, coin.amount, assetInfos)
       ),
       blockHeight: pool.blockHeight,
       creator: pool.creator,
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
index ea214ca0d..ded6f2546 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
@@ -6,7 +6,7 @@ import { useTrack } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { ShowMoreButton } from "lib/components/button";
 import { UnsupportedTokensModal } from "lib/components/modal/UnsupportedTokensModal";
-import { TokenCard } from "lib/components/TokenCard";
+import { TokenCard } from "lib/components/token/TokenCard";
 import type { AssetInfo, Option } from "lib/types";
 
 type AssetObject = { [key: string]: AssetInfo };
diff --git a/src/lib/services/move/index.ts b/src/lib/services/move/index.ts
new file mode 100644
index 000000000..0c38c52d7
--- /dev/null
+++ b/src/lib/services/move/index.ts
@@ -0,0 +1,4 @@
+export * from "./module";
+export * from "./moduleService";
+export * from "./resource";
+export * from "./resourceService";
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index 335269824..0896f570f 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -10,6 +10,7 @@ import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
   useCelatoneApp,
+  useLCDEndpoint,
   useMoveConfig,
 } from "lib/app-provider";
 import {
@@ -151,7 +152,7 @@ export const useFunctionView = ({
   onError?: (err: AxiosError<RpcQueryError>) => void;
 }): UseQueryResult<string> => {
   // TODO: handle POST in celatone API
-  const baseEndpoint = "https://stone-rest.initia.tech";
+  const baseEndpoint = useLCDEndpoint();
   const queryFn: QueryFunction<string> = () =>
     getFunctionView(baseEndpoint, moduleAddress, moduleName, fn, abiData);
   return useQuery(
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index d285eb757..ad9dc496c 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -1,9 +1,15 @@
 import type { Coin } from "@cosmjs/stargate";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
+import type { Big } from "big.js";
+import big from "big.js";
 import { useCallback } from "react";
 
-import { CELATONE_QUERY_KEYS, useCelatoneApp } from "lib/app-provider";
+import {
+  CELATONE_QUERY_KEYS,
+  useCelatoneApp,
+  useLCDEndpoint,
+} from "lib/app-provider";
 import type { Order_By } from "lib/gql/graphql";
 import {
   getPoolByPoolId,
@@ -13,10 +19,20 @@ import {
   getPoolListCount,
   getPoolsByPoolIds,
 } from "lib/query";
-import type { ContractAddr, Pool, PoolDetail, PoolTypeFilter } from "lib/types";
-import { isPositiveInt } from "lib/utils";
+import type {
+  ContractAddr,
+  HexAddr,
+  Option,
+  Pool,
+  PoolDetail,
+  PoolTypeFilter,
+} from "lib/types";
+import { isPositiveInt, parseJsonStr } from "lib/utils";
 
+import { useAssetInfos } from "./assetService";
 import { usePoolExpression } from "./expression/poolExpression";
+import type { IndexedModule } from "./move";
+import { useAccountModules, getFunctionView } from "./move";
 
 export const usePoolListQuery = ({
   isSupported,
@@ -214,3 +230,192 @@ export const usePoolAssetsbyPoolIds = (
     }
   );
 };
+
+interface PairRaw {
+  coin_a: {
+    metadata: string;
+    denom: string;
+    decimals: number;
+  };
+  coin_b: {
+    metadata: string;
+    denom: string;
+    decimals: number;
+  };
+  liquidity_token: {
+    metadata: string;
+    denom: string;
+    decimals: number;
+  };
+  coin_a_weight: string;
+  coin_b_weight: string;
+  coin_a_amount: string;
+  coin_b_amount: string;
+  total_share: string;
+}
+
+interface PairResponse {
+  coin_a: {
+    denom: string;
+    tag: HexAddr;
+    weight: string;
+    amount: string;
+  };
+  coin_b: {
+    denom: string;
+    tag: HexAddr;
+    weight: string;
+    amount: string;
+  };
+  lp_denom: string;
+  lp_tag: HexAddr;
+  decimals: number;
+  total_share: string;
+}
+
+export interface LPShareInfoReturn {
+  [key: string]: {
+    coinA: {
+      symbol: string;
+      denom: string;
+      precision: number;
+      tag: HexAddr;
+      amountAPerShare: Big;
+    };
+    coinB: {
+      symbol: string;
+      denom: string;
+      precision: number;
+      tag: HexAddr;
+      amountBPerShare: Big;
+    };
+    lpPricePerShare: Big;
+    precision: number;
+    image: [string, string];
+    symbol: string;
+  };
+}
+
+const indexPairResponse = (res: string): PairResponse[] => {
+  const parsed = parseJsonStr<PairRaw[]>(res);
+  return parsed.map((raw) => ({
+    coin_a: {
+      denom: raw.coin_a.denom,
+      tag: raw.coin_a.metadata as HexAddr,
+      weight: raw.coin_a_weight,
+      amount: raw.coin_a_amount,
+    },
+    coin_b: {
+      denom: raw.coin_b.denom,
+      tag: raw.coin_b.metadata as HexAddr,
+      weight: raw.coin_b_weight,
+      amount: raw.coin_b_amount,
+    },
+    lp_denom: raw.liquidity_token.denom,
+    lp_tag: raw.liquidity_token.metadata as HexAddr,
+    decimals: raw.liquidity_token.decimals,
+    total_share: raw.total_share,
+  }));
+};
+
+export const useLPShareInfo = () => {
+  const { data: moduleData } = useAccountModules({
+    address: "0xa36bd0a54fad4bd931c4c00e3e74815f99a6c6b4" as HexAddr,
+    moduleName: "PoolInfo",
+    functionName: "get_all_pair_infos",
+    options: { refetchOnWindowFocus: false, staleTime: Infinity },
+  });
+  const { assetInfos } = useAssetInfos({ withPrices: true });
+  const lcdEndpoint = useLCDEndpoint();
+
+  const poolInfoModule = moduleData as Option<IndexedModule>;
+
+  const queryFn = async () => {
+    if (!poolInfoModule?.searchedFn || !assetInfos)
+      throw new Error(
+        "Error fetching module, asset infos or dex functions not found."
+      );
+    const pairs = await getFunctionView(
+      lcdEndpoint,
+      poolInfoModule.address,
+      poolInfoModule.moduleName,
+      poolInfoModule.searchedFn,
+      {
+        typeArgs: {},
+        args: {},
+      }
+    ).then((res) => indexPairResponse(res));
+
+    return pairs.reduce<LPShareInfoReturn>((acc, curr) => {
+      const [coinA, coinB] = [curr.coin_a.denom, curr.coin_b.denom].map(
+        (denom, idx) => ({
+          ...(idx === 0 ? curr.coin_a : curr.coin_b),
+          ...assetInfos[denom],
+        })
+      );
+
+      const totalShares = big(curr.total_share).div(big(10).pow(curr.decimals));
+      const amountAPerShare = big(curr.coin_a.amount)
+        .div(big(10).pow(coinA.precision))
+        .div(totalShares);
+      const amountBPerShare = big(curr.coin_b.amount)
+        .div(big(10).pow(coinB.precision))
+        .div(totalShares);
+
+      const lpPricePerShare = (() => {
+        if (coinA.price && coinB.price) {
+          return big(coinA.price)
+            .times(amountAPerShare)
+            .plus(big(coinB.price).times(amountBPerShare));
+        }
+        if (coinA.price) {
+          return big(coinA.price)
+            .times(amountAPerShare)
+            .times(big(coinA.weight).plus(coinB.weight).div(coinA.weight));
+        }
+        if (coinB.price) {
+          return big(coinB.price)
+            .times(amountBPerShare)
+            .times(big(coinA.weight).plus(coinB.weight).div(coinB.weight));
+        }
+        return big(0);
+      })();
+      return {
+        ...acc,
+        [curr.lp_denom]: {
+          coinA: {
+            symbol: coinA.symbol,
+            denom: coinA.denom,
+            precision: coinA.precision,
+            tag: coinA.tag,
+            amountAPerShare,
+          },
+          coinB: {
+            symbol: coinB.symbol,
+            denom: coinB.denom,
+            precision: coinB.precision,
+            tag: coinA.tag,
+            amountBPerShare,
+          },
+          lpPricePerShare,
+          precision: curr.decimals,
+          image: [coinA.logo, coinB.logo],
+          symbol: `${coinA.symbol}-${coinB.symbol}`,
+        },
+      };
+    }, {});
+  };
+  return useQuery(
+    [
+      CELATONE_QUERY_KEYS.POOL_MOVE_LP_SHARE_INFO,
+      poolInfoModule,
+      assetInfos,
+      lcdEndpoint,
+    ],
+    queryFn,
+    {
+      enabled: Boolean(poolInfoModule?.searchedFn && assetInfos),
+      refetchOnWindowFocus: false,
+    }
+  );
+};
diff --git a/src/lib/styles/theme/components/radio.ts b/src/lib/styles/theme/components/radio.ts
index 39f800d92..26b74689e 100644
--- a/src/lib/styles/theme/components/radio.ts
+++ b/src/lib/styles/theme/components/radio.ts
@@ -1,6 +1,33 @@
-import type { ComponentStyleConfig } from "@chakra-ui/react";
+import type { ComponentStyleConfig, SystemStyleObject } from "@chakra-ui/react";
 
 const primaryLight = "primary.light";
+const textMain = "text.main";
+
+const generateCardStyle = ({
+  containerChecked,
+  controlChecked,
+}: {
+  containerChecked: SystemStyleObject;
+  controlChecked?: SystemStyleObject;
+}) => ({
+  container: {
+    minW: "fit-content",
+    w: "full",
+    px: "24px",
+    py: "12px",
+    border: "2px solid",
+    borderRadius: "12px",
+    borderColor: "gray.700",
+    bgColor: "gray.900",
+    overflowX: "scroll",
+    "&[data-checked]": containerChecked,
+  },
+  control: {
+    boxSize: "18px",
+    _checked: controlChecked,
+  },
+  label: { w: "inherit" },
+});
 
 export const Radio: ComponentStyleConfig = {
   baseStyle: {
@@ -38,29 +65,22 @@ export const Radio: ComponentStyleConfig = {
     },
   },
   variants: {
-    card: {
-      container: {
-        minW: "fit-content",
-        w: "full",
-        px: "24px",
-        py: "12px",
-        border: "2px solid",
-        borderRadius: "12px",
-        borderColor: "gray.700",
-        bgColor: "gray.900",
-        overflowX: "scroll",
-        "&[data-checked]": {
-          borderColor: primaryLight,
-          bgColor: "primary.background",
-        },
+    "primary-card": generateCardStyle({
+      containerChecked: {
+        borderColor: primaryLight,
+        bgColor: "primary.background",
       },
-      control: {
-        boxSize: "18px",
+    }),
+    "gray-card": generateCardStyle({
+      containerChecked: {
+        borderColor: textMain,
+        bgColor: "gray.700",
       },
-      label: {
-        w: "inherit",
+      controlChecked: {
+        borderColor: textMain,
+        color: textMain,
       },
-    },
+    }),
   },
   defaultProps: {
     size: "lg",
diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts
index d1affa365..ae77d9125 100644
--- a/src/lib/types/asset.ts
+++ b/src/lib/types/asset.ts
@@ -1,13 +1,26 @@
 import type Big from "big.js";
 
-import type { Option, Token, U, USD } from "lib/types";
+import type { LPDetails, Option, Token, U, USD } from "lib/types";
 
-export interface TokenWithValue {
-  denom: string;
-  amount: U<Token<Big>>;
-  symbol: Option<string>;
-  logo: Option<string>;
-  precision: Option<number>;
-  price?: Option<USD<Big>>;
-  value: Option<USD<Big>>;
-}
+export type TokenWithValue =
+  | {
+      isLpToken?: false;
+      denom: string;
+      amount: U<Token<Big>>;
+      symbol: Option<string>;
+      logo: Option<string>;
+      precision: Option<number>;
+      price?: Option<USD<Big>>;
+      value: Option<USD<Big>>;
+    }
+  | {
+      isLpToken: true;
+      denom: string;
+      amount: U<Token<Big>>;
+      symbol: Option<string>;
+      logo: Option<string[]>;
+      precision: Option<number>;
+      price?: Option<USD<Big>>;
+      value: Option<USD<Big>>;
+      lpDetails: LPDetails;
+    };
diff --git a/src/lib/types/currency/balance.ts b/src/lib/types/currency/balance.ts
index 98586b698..fc25c194a 100644
--- a/src/lib/types/currency/balance.ts
+++ b/src/lib/types/currency/balance.ts
@@ -25,6 +25,8 @@ export interface AssetInfo {
 }
 
 export interface BalanceWithAssetInfo {
+  isLpToken?: boolean;
   balance: Balance;
   assetInfo: Option<AssetInfo>;
+  lpLogo?: Option<[string, string]>;
 }
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 83e621e03..bd0fad8bd 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -54,3 +54,16 @@ export interface PoolDetail<
   tickSpacing: Nullable<number>;
   contractAddress: Nullable<ContractAddr>;
 }
+
+export interface LPDetails {
+  coinA: {
+    amount: string;
+    denom: string;
+    symbol: string;
+  };
+  coinB: {
+    amount: string;
+    denom: string;
+    symbol: string;
+  };
+}
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index fe0e48c08..954cdf7fc 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -89,7 +89,10 @@ const getArgValue = ({
 const BUFFER_SIZE = 1024 * 1024;
 const bcs = BCS.getInstance();
 
-const serializeArg = (arg: { type: string; value: Nullable<string> }) => {
+export const serializeArg = (arg: {
+  type: string;
+  value: Nullable<string>;
+}) => {
   try {
     const argType = getArgType(arg.type);
     const argValue = getArgValue(arg);
@@ -103,6 +106,7 @@ export const serializeAbiData = (fn: ExposedFunction, abiData: AbiFormData) => {
   const serializedArgs = fn.params.map((type, index) =>
     serializeArg({ type, value: abiData.args[index] })
   );
+
   return {
     typeArgs: fn.generic_type_params.map((_, index) => abiData.typeArgs[index]),
     args: serializedArgs,
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 3b684d9c7..24c1b51a4 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -1,8 +1,9 @@
 import type { BigSource } from "big.js";
 import big, { Big } from "big.js";
 
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { LPShareInfoReturn } from "lib/services/poolService";
 import type {
-  AssetInfo,
   Balance,
   BalanceWithAssetInfo,
   Option,
@@ -12,7 +13,7 @@ import type {
   USD,
 } from "lib/types";
 
-import { toToken } from "./formatter";
+import { formatUTokenWithPrecision, toToken } from "./formatter";
 
 export const calculateAssetValue = (
   amount: Token<BigSource>,
@@ -42,23 +43,61 @@ export const calTotalValue = (assets: BalanceWithAssetInfo[]): USD<Big> =>
 export const coinToTokenWithValue = (
   denom: string,
   amount: string,
-  assetInfo: Option<AssetInfo>
+  assetInfos: AssetInfosOpt,
+  lpMap: LPShareInfoReturn = {}
 ): TokenWithValue => {
   const tokenAmount = big(amount) as U<Token<Big>>;
-  return {
-    denom,
-    amount: tokenAmount,
-    symbol: assetInfo?.symbol,
-    logo: assetInfo?.logo,
-    precision: assetInfo?.precision,
-    price: assetInfo ? (big(assetInfo.price) as USD<Big>) : undefined,
-    value: assetInfo
-      ? calculateAssetValue(
-          toToken(tokenAmount, assetInfo.precision),
-          assetInfo.price as USD<number>
-        )
-      : undefined,
-  };
+  const assetInfo = assetInfos?.[denom];
+  const isLp = denom in lpMap;
+  const lpDetails = lpMap[denom];
+  return isLp
+    ? {
+        isLpToken: isLp,
+        denom,
+        amount: tokenAmount,
+        symbol: lpDetails.symbol,
+        logo: lpDetails.image,
+        precision: lpDetails.precision,
+        lpDetails: {
+          coinA: {
+            amount: formatUTokenWithPrecision(
+              tokenAmount.times(lpDetails.coinA.amountAPerShare) as U<
+                Token<Big>
+              >,
+              lpDetails.precision
+            ),
+            denom: lpDetails.coinA.denom,
+            symbol: lpDetails.coinA.symbol,
+          },
+          coinB: {
+            amount: formatUTokenWithPrecision(
+              tokenAmount.times(lpDetails.coinB.amountBPerShare) as U<
+                Token<Big>
+              >,
+              lpDetails.precision
+            ),
+            denom: lpDetails.coinB.denom,
+            symbol: lpDetails.coinB.symbol,
+          },
+        },
+        value: tokenAmount
+          .times(lpDetails.lpPricePerShare)
+          .div(big(10).pow(lpDetails.precision)) as USD<Big>,
+      }
+    : {
+        denom,
+        amount: tokenAmount,
+        symbol: assetInfo?.symbol,
+        logo: assetInfo?.logo as string,
+        precision: assetInfo?.precision,
+        price: assetInfo ? (big(assetInfo.price) as USD<Big>) : undefined,
+        value: assetInfo
+          ? calculateAssetValue(
+              toToken(tokenAmount, assetInfo.precision),
+              assetInfo.price as USD<number>
+            )
+          : undefined,
+      };
 };
 
 export const addTokenWithValue = (
diff --git a/src/lib/utils/json.ts b/src/lib/utils/json.ts
index 78b6ac573..355fce9fc 100644
--- a/src/lib/utils/json.ts
+++ b/src/lib/utils/json.ts
@@ -24,11 +24,14 @@ export const jsonPrettify = (text: string) => {
 
 export const jsonLineCount = (text: string) => text.split(/\n/).length;
 
-export const parseJsonStr = (json: string, fallback = ""): JsonDataType => {
+export const parseJsonStr = <T extends JsonDataType>(
+  json: string,
+  fallback = ""
+): T => {
   try {
     return JSON.parse(json);
   } catch (_) {
-    return fallback;
+    return fallback as T;
   }
 };
 
diff --git a/yarn.lock b/yarn.lock
index e1d69a43b..051debac7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3463,6 +3463,16 @@
     long "^5.2.0"
     protobufjs "^7.1.1"
 
+"@initia/initia.proto@^0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.12.tgz#bfef7f9fe2b8dfa39364a30d1e497ed214029f55"
+  integrity sha512-dJkCgMyIonVDdWWmcAkCLx7woejp0EWbC9EXT/3xHxXw+IiZJrNBJOzY2wAjOBfOwC7n7HCJkpFtp2i2rumuTQ==
+  dependencies:
+    "@improbable-eng/grpc-web" "^0.15.0"
+    google-protobuf "^3.21.0"
+    long "^5.2.0"
+    protobufjs "^7.1.1"
+
 "@interchain-ui/react@1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.4.1.tgz#92e9eb3d657596a84f7c93c509a1c4a3f8771f10"

From e53dad547f0001e350c9558485629690ffb7d15d Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 26 Oct 2023 16:52:10 +0700
Subject: [PATCH 247/368] fix(components): fix layout and styling

---
 .../components/CommandSection.tsx             |  2 +-
 .../components/TokenSection.tsx               |  1 +
 .../components/contract-description/index.tsx |  2 -
 .../components/contract-state/StateCard.tsx   |  2 +-
 src/lib/pages/contract-details/index.tsx      | 94 ++++++++++---------
 5 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index 5bd901be3..14335ce09 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -102,7 +102,7 @@ export const CommandSection = observer(
     return (
       <Flex
         direction="column"
-        gap={6}
+        gap={4}
         pb={{ base: 0, md: 8 }}
         borderBottom={{ base: "0px", md: "1px solid" }}
         borderBottomColor={{ base: "transparent", md: "gray.700" }}
diff --git a/src/lib/pages/contract-details/components/TokenSection.tsx b/src/lib/pages/contract-details/components/TokenSection.tsx
index 1068b7907..0ba11999a 100644
--- a/src/lib/pages/contract-details/components/TokenSection.tsx
+++ b/src/lib/pages/contract-details/components/TokenSection.tsx
@@ -85,6 +85,7 @@ export const TokenSection = ({
       pb={{ base: 2, md: 8 }}
       borderBottom={onViewMore ? { base: "none", md: "1px solid" } : "none"}
       borderBottomColor={{ base: "transparent", md: "gray.700" }}
+      gap={4}
     >
       <Flex justify="space-between" align="center" mb={{ base: 2, md: 1 }}>
         <Heading as="h6" variant="h6" color="text.main" fontWeight={500}>
diff --git a/src/lib/pages/contract-details/components/contract-description/index.tsx b/src/lib/pages/contract-details/components/contract-description/index.tsx
index 948fec9c4..0a344ad6b 100644
--- a/src/lib/pages/contract-details/components/contract-description/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/index.tsx
@@ -22,8 +22,6 @@ export const ContractDesc = ({
   return (
     <Flex
       direction={{ base: "column", md: "row" }}
-      mt={{ base: 0, md: 0 }}
-      mb={4}
       gap={{ base: 4, md: 6 }}
       pb={{ base: 0, md: 8 }}
       borderBottom={{ base: "0px", md: "1px solid" }}
diff --git a/src/lib/pages/contract-details/components/contract-state/StateCard.tsx b/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
index 0e3f3913d..c00d686c5 100644
--- a/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/StateCard.tsx
@@ -17,7 +17,7 @@ export const StateCard = ({ state }: StateCardProps) => {
   }, [state.key]);
 
   return (
-    <Box borderRadius={8} bgColor="gray.900" py={2} px={4} maxWidth="100%">
+    <Box borderRadius={8} bgColor="gray.900" p={3} maxWidth="100%">
       <Box mb={3}>
         <Text variant="body2" color="text.main" wordBreak="break-word">
           {firstKey}
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 6b31c07bc..031d9c482 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -71,9 +71,9 @@ const ContractTxsTable = observer(
     } = useContractDetailsTableCounts(contractAddress, contractAccountId);
     if (!contractData.contractDetail) return <InvalidContract />;
     return (
-      <Flex direction="column">
+      <Flex direction="column" gap={6}>
         {/* History Table section */}
-        <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
+        <Heading as="h6" variant="h6" id={tableHeaderId}>
           Transaction & History
         </Heading>
         <Tabs isLazy lazyBehavior="keepMounted">
@@ -129,7 +129,7 @@ const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => {
   return (
     <Flex
       onClick={onViewMore}
-      border="2px solid"
+      border="1px solid"
       borderColor="gray.700"
       borderRadius="8px"
       p={4}
@@ -144,10 +144,10 @@ const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => {
       <Flex alignItems="center" gap={3}>
         <CustomIcon name="contract-list" color="gray.600" boxSize={6} />
         <div>
-          <Text variant="body1" fontWeight={600}>
+          <Text variant="body2" fontWeight={600}>
             View Contracts States
           </Text>
-          <Text variant="body2" color="text.dark" fontWeight={600}>
+          <Text variant="body3" color="text.dark" fontWeight={600}>
             Access the current contract states information
           </Text>
         </div>
@@ -241,51 +241,55 @@ const ContractDetailsBody = observer(
                   codeId={contractData.contractDetail.codeId.toString()}
                 />
                 {/* Instantiate/Contract Info Section */}
-                <Heading as="h6" variant="h6" minW="fit-content">
-                  Contract Information
-                </Heading>
-                <Flex
-                  mb={12}
-                  mt={6}
-                  justify="space-between"
-                  direction={{ base: "column", md: "row" }}
-                >
-                  {/* Instantiate Info */}
-                  {isMobile && (
-                    <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
-                      Instantiate Info
+                <Flex direction="column" gap={6}>
+                  {!isMobile && (
+                    <Heading as="h6" variant="h6" minW="fit-content">
+                      Contract Information
                     </Heading>
                   )}
-                  <InstantiateInfo
-                    isLoading={
-                      contractData.isContractDetailLoading ||
-                      contractData.isContractCw2InfoLoading ||
-                      contractData.isInstantiateDetailLoading
-                    }
-                    {...contractData}
-                  />
-                  {/* Contract Info (Expand) */}
                   <Flex
-                    direction="column"
-                    flex={0.8}
-                    gap={4}
-                    mt={{ base: 12, md: 0 }}
+                    mb={12}
+                    justify="space-between"
+                    direction={{ base: "column", md: "row" }}
                   >
-                    <JsonInfo
-                      header="Contract Info"
-                      jsonString={jsonPrettify(
-                        JSON.stringify(
-                          contractData.rawContractResponse?.contract_info ?? {}
-                        )
-                      )}
-                      isLoading={contractData.isRawContractResponseLoading}
-                    />
-                    <JsonInfo
-                      header="Instantiate Message"
-                      jsonString={jsonPrettify(contractData.initMsg ?? "")}
-                      isLoading={contractData.isInstantiateDetailLoading}
-                      defaultExpand
+                    {/* Instantiate Info */}
+                    {isMobile && (
+                      <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
+                        Instantiate Info
+                      </Heading>
+                    )}
+                    <InstantiateInfo
+                      isLoading={
+                        contractData.isContractDetailLoading ||
+                        contractData.isContractCw2InfoLoading ||
+                        contractData.isInstantiateDetailLoading
+                      }
+                      {...contractData}
                     />
+                    {/* Contract Info (Expand) */}
+                    <Flex
+                      direction="column"
+                      flex={0.8}
+                      gap={4}
+                      mt={{ base: 12, md: 0 }}
+                    >
+                      <JsonInfo
+                        header="Contract Info"
+                        jsonString={jsonPrettify(
+                          JSON.stringify(
+                            contractData.rawContractResponse?.contract_info ??
+                              {}
+                          )
+                        )}
+                        isLoading={contractData.isRawContractResponseLoading}
+                      />
+                      <JsonInfo
+                        header="Instantiate Message"
+                        jsonString={jsonPrettify(contractData.initMsg ?? "")}
+                        isLoading={contractData.isInstantiateDetailLoading}
+                        defaultExpand
+                      />
+                    </Flex>
                   </Flex>
                 </Flex>
                 <ContractTxsTable

From dced727278bcc08671d0337efa9a4a668ea15693 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 26 Oct 2023 18:40:16 +0700
Subject: [PATCH 248/368] fix: cannot search 0x1 on non move chain

---
 src/lib/services/searchService.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index 78e1acaa6..69ecb2c9f 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -85,8 +85,9 @@ export const useSearchHandler = (
   const isAddr =
     addressType === "user_address" ||
     addressType === "contract_address" ||
-    isHexWalletAddress(debouncedKeyword) ||
-    isHexModuleAddress(debouncedKeyword);
+    (isMove &&
+      (isHexWalletAddress(debouncedKeyword) ||
+        isHexModuleAddress(debouncedKeyword)));
 
   // ICNS
   const { data: icnsAddressData, isFetching: icnsAddressFetching } =
@@ -125,6 +126,7 @@ export const useSearchHandler = (
   const { data: poolData, isFetching: poolFetching } = usePoolByPoolId(
     Number(debouncedKeyword),
     isPool &&
+      !debouncedKeyword.startsWith("0x") &&
       Number.isInteger(Number(debouncedKeyword)) &&
       Number(debouncedKeyword) > 0
   );

From f03c3bb96e0057e7659a390199c3034f53a37a01 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 27 Oct 2023 13:08:22 +0700
Subject: [PATCH 249/368] fix: script bugs

---
 CHANGELOG.md                                  |  1 +
 .../abi/args-form/field/utils/rules.ts        | 37 +++++++++++++++++--
 src/lib/components/abi/args-form/index.tsx    | 11 ++++--
 src/lib/components/upload/UploadCard.tsx      |  4 +-
 src/lib/pages/deploy-script/index.tsx         |  3 +-
 5 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29c0e4f7b..8e7f2b7f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -133,6 +133,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#590](https://github.com/alleslabs/celatone-frontend/pull/590) Fix upload script various bugs
 - [#584](https://github.com/alleslabs/celatone-frontend/pull/584) Throw an error when tx failed on postTx
 - [#555](https://github.com/alleslabs/celatone-frontend/pull/555) Rewrite publish status resolver into an effect
 - [#557](https://github.com/alleslabs/celatone-frontend/pull/557) Fix see module ux writing and policy modal
diff --git a/src/lib/components/abi/args-form/field/utils/rules.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
index b3839056b..1f1f3bb9e 100644
--- a/src/lib/components/abi/args-form/field/utils/rules.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -3,12 +3,17 @@ import big from "big.js";
 import { parseInt } from "lodash";
 import type { FieldValues, UseControllerProps } from "react-hook-form";
 
-import { DECIMAL_TYPES, OBJECT_TYPE, UINT_TYPES } from "../constants";
+import {
+  DECIMAL_TYPES,
+  FIXED_POINT_TYPES,
+  OBJECT_TYPE,
+  UINT_TYPES,
+} from "../constants";
 import type { Nullable, Option } from "lib/types";
 import { getArgType } from "lib/utils";
 
 const validateNull = (v: Option<string>) =>
-  v !== undefined ? undefined : "cannot be null";
+  v !== null ? undefined : "cannot be null";
 
 const validateUint = (uintType: string) => (v: string) => {
   try {
@@ -29,6 +34,21 @@ const validateAddress =
   (isValidArgAddress: (input: string) => boolean) => (v: string) =>
     isValidArgAddress(v) ? undefined : "Invalid address";
 
+const validateFixedPoint = (bcsFixedPointType: string) => (v: string) => {
+  const [integer, decimal] = v.split(".");
+  try {
+    const div = big(2).pow(parseInt(bcsFixedPointType.slice(11)));
+    const value = big(integer)
+      .times(div)
+      .add(decimal || "0");
+    const maxValue = div.mul(div);
+    if (value.lt(0) || value.gte(maxValue)) throw new Error();
+    return undefined;
+  } catch {
+    return `Input must be ‘${bcsFixedPointType}’`;
+  }
+};
+
 const validateDecimal = (bcsDecimalType: string) => (v: string) => {
   const [integer, decimal] = v.split(".");
   if (decimal && decimal.length > 18)
@@ -43,7 +63,6 @@ const validateDecimal = (bcsDecimalType: string) => (v: string) => {
   } catch {
     return `Input must be ‘${bcsDecimalType}’`;
   }
-  return undefined;
 };
 
 const validateVector = (
@@ -67,6 +86,8 @@ const validateVector = (
     validateElement = validateAddress(isValidArgAddress);
   if (elementType.startsWith(OBJECT_TYPE))
     validateElement = validateAddress(isValidArgObject);
+  if (FIXED_POINT_TYPES.includes(elementType))
+    validateElement = validateFixedPoint(getArgType(elementType));
   if (DECIMAL_TYPES.includes(elementType))
     validateElement = validateDecimal(getArgType(elementType));
   // TODO: handle Vector?
@@ -131,6 +152,16 @@ export const getRules = <T extends FieldValues>(
       },
     };
   }
+  if (FIXED_POINT_TYPES.includes(type)) {
+    const bcsType = getArgType(type);
+    rules.validate = {
+      ...rules.validate,
+      [bcsType]: (v: Nullable<string>) => {
+        if (v === null) return undefined;
+        return validateFixedPoint(bcsType)(v);
+      },
+    };
+  }
   if (DECIMAL_TYPES.includes(type)) {
     const bcsType = getArgType(type);
     rules.validate = {
diff --git a/src/lib/components/abi/args-form/index.tsx b/src/lib/components/abi/args-form/index.tsx
index c504233fc..6cf9019b4 100644
--- a/src/lib/components/abi/args-form/index.tsx
+++ b/src/lib/components/abi/args-form/index.tsx
@@ -33,7 +33,7 @@ export const ArgsForm = ({
     control,
     getValues,
     clearErrors,
-    formState: { errors },
+    formState: { errors, isValid },
   } = useForm<Record<string, Nullable<string>>>({
     defaultValues: initialData,
     mode: "all",
@@ -45,9 +45,14 @@ export const ArgsForm = ({
   }, [trigger]);
 
   useEffect(
-    () => propsOnErrors?.(formatErrors(errors)),
+    () => {
+      const validating: [string, string][] = isValid
+        ? []
+        : [["form", "not-valid"]];
+      propsOnErrors?.([...formatErrors(errors), ...validating]);
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(errors), propsOnErrors]
+    [JSON.stringify(errors), isValid]
   );
 
   return (
diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx
index 684c2be97..141ad753a 100644
--- a/src/lib/components/upload/UploadCard.tsx
+++ b/src/lib/components/upload/UploadCard.tsx
@@ -81,12 +81,12 @@ export const UploadCard = ({
         </Flex>
         <Flex align="center" gap={4}>
           <Button
-            leftIcon={<CustomIcon name="swap" boxSize={3} />}
+            leftIcon={<CustomIcon name="delete" boxSize={3} />}
             size="sm"
             variant={themeConfig.buttonVariant}
             onClick={deleteFile}
           >
-            Change file
+            Remove file
           </Button>
           {status === "error" && (
             <CustomIcon
diff --git a/src/lib/pages/deploy-script/index.tsx b/src/lib/pages/deploy-script/index.tsx
index 20eac8f47..bffe0fa7d 100644
--- a/src/lib/pages/deploy-script/index.tsx
+++ b/src/lib/pages/deploy-script/index.tsx
@@ -145,7 +145,8 @@ export const DeployScript = () => {
           Script
         </Heading>
         <Text fontWeight={600} variant="body2" color="text.dark" mt={2} mb={12}>
-          Upload .mv files to deploy one-time use Script which execute messages.
+          Upload a .mv file to deploy one-time use Script which execute
+          messages.
         </Text>
         <ConnectWalletAlert
           subtitle="You need to connect your wallet to perform this action"

From 0914280216dbd26378cbeda1e54266738805ea8a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 27 Oct 2023 14:34:12 +0700
Subject: [PATCH 250/368] feat: bump initia 0.1.10

---
 CHANGELOG.md                                  |    1 +
 package.json                                  |   16 +-
 .../abi/args-form/field/utils/rules.ts        |    6 +-
 src/lib/utils/abi.ts                          |    4 +-
 yarn.lock                                     | 1736 ++++++++++++-----
 5 files changed, 1292 insertions(+), 471 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29c0e4f7b..e7b7893bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#591](https://github.com/alleslabs/celatone-frontend/pull/584) Bump initia.js due to decimal serialization and dynamic buffer
 - [#574](https://github.com/alleslabs/celatone-frontend/pull/574) Add min height to wasm page container to properly align footer
 - [#569](https://github.com/alleslabs/celatone-frontend/pull/569) Add move config to dev shortcuts in homepage
 - [#559](https://github.com/alleslabs/celatone-frontend/pull/559) Restructure and refactor responsive tables
diff --git a/package.json b/package.json
index 54999992c..347cc6f00 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
-    "@initia/initia.js": "0.1.10",
+    "@initia/initia.js": "0.1.11",
     "@initia/initia.proto": "0.1.12",
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
@@ -94,8 +94,8 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.1.0",
-    "@commitlint/cz-commitlint": "^17.1.2",
+    "@commitlint/config-conventional": "^18.1.0",
+    "@commitlint/cz-commitlint": "^18.2.0",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^29.4.0",
     "@types/node-gzip": "^1.1.0",
@@ -105,18 +105,18 @@
     "commitizen": "^4.2.5",
     "commitlint": "^17.1.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.25.0",
-    "eslint-config-next": "^13.0.0",
-    "eslint-config-sznm": "^1.0.0",
+    "eslint": "^8.52.0",
+    "eslint-config-next": "^14.0.0",
+    "eslint-config-sznm": "^2.0.2",
     "husky": "^8.0.1",
     "jest": "^29.5.0",
     "lint-staged": "^13.0.3",
     "mockdate": "^3.0.5",
     "next-sitemap": "^3.1.25",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.3",
     "standard-version": "^9.5.0",
     "ts-jest": "^29.0.5",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.6"
   },
   "packageManager": "yarn@1.22.19"
 }
diff --git a/src/lib/components/abi/args-form/field/utils/rules.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
index b3839056b..a762a0173 100644
--- a/src/lib/components/abi/args-form/field/utils/rules.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -29,6 +29,10 @@ const validateAddress =
   (isValidArgAddress: (input: string) => boolean) => (v: string) =>
     isValidArgAddress(v) ? undefined : "Invalid address";
 
+const validateObject =
+  (isValidArgObject: (input: string) => boolean) => (v: string) =>
+    isValidArgObject(v) ? undefined : "Invalid SDK module address";
+
 const validateDecimal = (bcsDecimalType: string) => (v: string) => {
   const [integer, decimal] = v.split(".");
   if (decimal && decimal.length > 18)
@@ -127,7 +131,7 @@ export const getRules = <T extends FieldValues>(
       ...rules.validate,
       object: (v: Nullable<string>) => {
         if (v === null) return undefined;
-        return validateAddress(isValidArgObject)(v);
+        return validateObject(isValidArgObject)(v);
       },
     };
   }
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index bc5291344..a10221265 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -92,14 +92,14 @@ const getArgValue = ({
   }
 };
 
-const BUFFER_SIZE = 1024 * 1024;
 const bcs = BCS.getInstance();
 
 const serializeArg = (arg: { type: string; value: Nullable<string> }) => {
+  const bufferSize = Math.max(1024, 2 * (arg.value ?? "").length);
   try {
     const argType = getArgType(arg.type);
     const argValue = getArgValue(arg);
-    return bcs.serialize(argType, argValue, BUFFER_SIZE);
+    return bcs.serialize(argType, argValue, bufferSize);
   } catch (e) {
     return "";
   }
diff --git a/yarn.lock b/yarn.lock
index e1d69a43b..129871b89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
 "@amplitude/analytics-browser@^1.12.1":
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/@amplitude/analytics-browser/-/analytics-browser-1.12.1.tgz#e1dc719027cb66dbc52f70ce36d51fd40d6b66bd"
@@ -861,15 +866,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/runtime-corejs3@^7.10.2":
-  version "7.17.9"
-  resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.17.9.tgz"
-  integrity sha512-WxYHHUWF2uZ7Hp1K+D1xQgbgkGUfA+5UPOegEXGt2Y5SMog/rYCVaifLZDbw8UkNXozEqqrZTy6bglL7xTaCOw==
-  dependencies:
-    core-js-pure "^3.20.2"
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5":
   version "7.19.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz"
   integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
@@ -897,6 +894,13 @@
   dependencies:
     regenerator-runtime "^0.13.10"
 
+"@babel/runtime@^7.20.7":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.21.0":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
@@ -1969,12 +1973,12 @@
     resolve-global "1.0.0"
     yargs "^17.0.0"
 
-"@commitlint/config-conventional@^17.1.0":
-  version "17.1.0"
-  resolved "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-17.1.0.tgz"
-  integrity sha512-WU2p0c9/jLi8k2q2YrDV96Y8XVswQOceIQ/wyJvQxawJSCasLdRB3kUIYdNjOCJsxkpoUlV/b90ZPxp1MYZDiA==
+"@commitlint/config-conventional@^18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-18.1.0.tgz#f8f37b0de4090ebd3f9418672184814fab520205"
+  integrity sha512-8vvvtV3GOLEMHeKc8PjRL1lfP1Y4B6BG0WroFd9PJeRiOc3nFX1J0wlJenLURzl9Qus6YXVGWf+a/ZlbCKT3AA==
   dependencies:
-    conventional-changelog-conventionalcommits "^5.0.0"
+    conventional-changelog-conventionalcommits "^7.0.2"
 
 "@commitlint/config-validator@^17.1.0":
   version "17.1.0"
@@ -1984,17 +1988,25 @@
     "@commitlint/types" "^17.0.0"
     ajv "^8.11.0"
 
-"@commitlint/cz-commitlint@^17.1.2":
-  version "17.1.2"
-  resolved "https://registry.npmjs.org/@commitlint/cz-commitlint/-/cz-commitlint-17.1.2.tgz"
-  integrity sha512-U1cpvTiri5Ib3m4xkmI4sk4Wh95dQRy2hrxt8YWTSKvyBHpOXfu9EIIqDQ+j8/aLSKo2RjBxS4lValxXnpJ4xA==
+"@commitlint/config-validator@^18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-validator/-/config-validator-18.1.0.tgz#e717151ab99206bdf70d2b526a32e530cec72512"
+  integrity sha512-kbHkIuItXn93o2NmTdwi5Mk1ujyuSIysRE/XHtrcps/27GuUKEIqBJp6TdJ4Sq+ze59RlzYSHMKuDKZbfg9+uQ==
   dependencies:
-    "@commitlint/ensure" "^17.0.0"
-    "@commitlint/load" "^17.1.2"
-    "@commitlint/types" "^17.0.0"
+    "@commitlint/types" "^18.1.0"
+    ajv "^8.11.0"
+
+"@commitlint/cz-commitlint@^18.2.0":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/cz-commitlint/-/cz-commitlint-18.2.0.tgz#2bca7e6ad48a9c020df884d438611df7d112198b"
+  integrity sha512-37zzllDFwUWA61lYR6KBpbCkjgQl7zcZ6IAXxI1qfkSeZPRnjf5KSyzQvUqP5bd6xr24A6Dlh/kaS44CR44WSw==
+  dependencies:
+    "@commitlint/ensure" "^18.1.0"
+    "@commitlint/load" "^18.2.0"
+    "@commitlint/types" "^18.1.0"
     chalk "^4.1.0"
-    lodash "^4.17.21"
-    word-wrap "^1.2.3"
+    lodash.isplainobject "^4.0.6"
+    word-wrap "^1.2.5"
 
 "@commitlint/ensure@^17.0.0":
   version "17.0.0"
@@ -2004,11 +2016,28 @@
     "@commitlint/types" "^17.0.0"
     lodash "^4.17.19"
 
+"@commitlint/ensure@^18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/ensure/-/ensure-18.1.0.tgz#3342fdaf42210166a6ca8779c0028298dd60b4b7"
+  integrity sha512-CkPzJ9UBumIo54VDcpmBlaVX81J++wzEhN3DJH9+6PaLeiIG+gkSx8t7C2gfwG7PaiW4HzQtdQlBN5ab+c4vFQ==
+  dependencies:
+    "@commitlint/types" "^18.1.0"
+    lodash.camelcase "^4.3.0"
+    lodash.kebabcase "^4.1.1"
+    lodash.snakecase "^4.1.1"
+    lodash.startcase "^4.4.0"
+    lodash.upperfirst "^4.3.1"
+
 "@commitlint/execute-rule@^17.0.0":
   version "17.0.0"
   resolved "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-17.0.0.tgz"
   integrity sha512-nVjL/w/zuqjCqSJm8UfpNaw66V9WzuJtQvEnCrK4jDw6qKTmZB+1JQ8m6BQVZbNBcwfYdDNKnhIhqI0Rk7lgpQ==
 
+"@commitlint/execute-rule@^18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/execute-rule/-/execute-rule-18.1.0.tgz#1dcacf8da1981dd2e6da76988fdac9f48cdccd46"
+  integrity sha512-w3Vt4K+O7+nSr9/gFSEfZ1exKUOPSlJaRpnk7Y+XowEhvwT7AIk1HNANH+gETf0zGZ020+hfiMW/Ome+SNCUsg==
+
 "@commitlint/format@^17.0.0":
   version "17.0.0"
   resolved "https://registry.npmjs.org/@commitlint/format/-/format-17.0.0.tgz"
@@ -2053,6 +2082,24 @@
     ts-node "^10.8.1"
     typescript "^4.6.4"
 
+"@commitlint/load@^18.2.0":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-18.2.0.tgz#ca2428c306d0b7f5ae9bac91991efaa359ba0ad6"
+  integrity sha512-xjX3d3CRlOALwImhOsmLYZh14/+gW/KxsY7+bPKrzmGuFailf9K7ckhB071oYZVJdACnpY4hDYiosFyOC+MpAA==
+  dependencies:
+    "@commitlint/config-validator" "^18.1.0"
+    "@commitlint/execute-rule" "^18.1.0"
+    "@commitlint/resolve-extends" "^18.1.0"
+    "@commitlint/types" "^18.1.0"
+    "@types/node" "^18.11.9"
+    chalk "^4.1.0"
+    cosmiconfig "^8.0.0"
+    cosmiconfig-typescript-loader "^5.0.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    lodash.uniq "^4.5.0"
+    resolve-from "^5.0.0"
+
 "@commitlint/message@^17.0.0":
   version "17.0.0"
   resolved "https://registry.npmjs.org/@commitlint/message/-/message-17.0.0.tgz"
@@ -2090,6 +2137,18 @@
     resolve-from "^5.0.0"
     resolve-global "^1.0.0"
 
+"@commitlint/resolve-extends@^18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/resolve-extends/-/resolve-extends-18.1.0.tgz#f134b679c3dfdd4006d2d6c9ace36237b7b0ffed"
+  integrity sha512-3mZpzOEJkELt7BbaZp6+bofJyxViyObebagFn0A7IHaLARhPkWTivXdjvZHS12nAORftv88Yhbh8eCPKfSvB7g==
+  dependencies:
+    "@commitlint/config-validator" "^18.1.0"
+    "@commitlint/types" "^18.1.0"
+    import-fresh "^3.0.0"
+    lodash.mergewith "^4.6.2"
+    resolve-from "^5.0.0"
+    resolve-global "^1.0.0"
+
 "@commitlint/rules@^17.0.0":
   version "17.0.0"
   resolved "https://registry.npmjs.org/@commitlint/rules/-/rules-17.0.0.tgz"
@@ -2120,6 +2179,13 @@
   dependencies:
     chalk "^4.1.0"
 
+"@commitlint/types@^18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/types/-/types-18.1.0.tgz#7d0d0227ee28b5bacbafa648601ee51e8604f03e"
+  integrity sha512-65vGxZmbs+2OVwEItxhp3Ul7X2m2LyLfifYI/NdPwRqblmuES2w2aIRhIjb7cwUIBHHSTT8WXj4ixVHQibmvLQ==
+  dependencies:
+    chalk "^4.1.0"
+
 "@confio/ics23@^0.6.8":
   version "0.6.8"
   resolved "https://registry.npmjs.org/@confio/ics23/-/ics23-0.6.8.tgz"
@@ -2516,21 +2582,38 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
-"@eslint/eslintrc@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz"
-  integrity sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.5.1", "@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+
+"@eslint/eslintrc@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
+  integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.4.0"
-    globals "^13.15.0"
+    espree "^9.6.0"
+    globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@8.52.0":
+  version "8.52.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.52.0.tgz#78fe5f117840f69dc4a353adf9b9cd926353378c"
+  integrity sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==
+
 "@ethersproject/abi@5.7.0", "@ethersproject/abi@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.7.0.tgz#b3f3e045bbbeed1af3947335c247ad625a44e449"
@@ -3388,24 +3471,24 @@
   resolved "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.1.tgz"
   integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==
 
-"@humanwhocodes/config-array@^0.10.5":
-  version "0.10.7"
-  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz"
-  integrity sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==
+"@humanwhocodes/config-array@^0.11.13":
+  version "0.11.13"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
+  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
+    "@humanwhocodes/object-schema" "^2.0.1"
     debug "^4.1.1"
-    minimatch "^3.0.4"
+    minimatch "^3.0.5"
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/object-schema@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
+  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
 
 "@hutson/parse-repository-url@^3.0.0":
   version "3.0.2"
@@ -3431,16 +3514,16 @@
   dependencies:
     browser-headers "^0.4.1"
 
-"@initia/initia.js@0.1.10":
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.10.tgz#cd7549a0224974d15bf225cbe057a0e112cd8572"
-  integrity sha512-qv3DPuXUfvPvWaQp/9MNgut9JbjAsflcPIFl4gUlN7tYn9re8FlqRxBjhCuIVBwOvyExVRInnCjacW26t7la9A==
+"@initia/initia.js@0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.11.tgz#4f25ab35754db4db238eed564ac82aa97c9200cc"
+  integrity sha512-SlRLedPTnqU/4H2Ffo9Ufbvxofrc1ndU4kp//z/ZzFV0yid1yqkq39580RcDUudU9IsrK2MurAPjWkFIPAne+Q==
   dependencies:
     "@initia/initia.proto" "^0.1.12"
     "@ledgerhq/hw-transport" "^6.27.12"
     "@ledgerhq/hw-transport-webhid" "^6.27.12"
     "@ledgerhq/hw-transport-webusb" "^6.27.12"
-    "@mysten/bcs" "^0.7.0"
+    "@mysten/bcs" "^0.8.1"
     axios "^0.27.2"
     bech32 "^2.0.0"
     bignumber.js "^9.1.0"
@@ -4067,10 +4150,10 @@
     "@motionone/dom" "^10.16.2"
     tslib "^2.3.1"
 
-"@mysten/bcs@^0.7.0":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@mysten/bcs/-/bcs-0.7.4.tgz#1e32ec3d1fa68a0ed98323e604a741728927e421"
-  integrity sha512-6DKzM4L10Au3Og5EJRBqJZmXWZ7hS/clVjbVUH4sA0aFtS3AZo2xc+r5fUFfdJbaWZUxVaDiQ8BNiEZWkAnEOw==
+"@mysten/bcs@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@mysten/bcs/-/bcs-0.8.1.tgz#30d3256a728a4a934ae608d118347289fe0ba1e7"
+  integrity sha512-wSEdP7QEfGQdb34g+7R0f3OdRqrv88iIABfJVDVJ6IsGLYVILreh8dZfNpZNUUyzctiyhX7zB9e/lR5qkddFPA==
   dependencies:
     bs58 "^5.0.0"
 
@@ -4079,10 +4162,10 @@
   resolved "https://registry.npmjs.org/@next/env/-/env-13.0.0.tgz"
   integrity sha512-65v9BVuah2Mplohm4+efsKEnoEuhmlGm8B2w6vD1geeEP2wXtlSJCvR/cCRJ3fD8wzCQBV41VcMBQeYET6MRkg==
 
-"@next/eslint-plugin-next@13.0.0":
-  version "13.0.0"
-  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.0.tgz"
-  integrity sha512-z+gnX4Zizatqatc6f4CQrcC9oN8Us3Vrq/OLyc98h7K/eWctrnV91zFZodmJHUjx0cITY8uYM7LXD7IdYkg3kg==
+"@next/eslint-plugin-next@14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.0.0.tgz#b299e61292b8abede7ecb37499feb817385801e6"
+  integrity sha512-Ye37nNI09V3yt7pzuzSQtwlvuJ2CGzFszHXkcTHHZgNr7EhTMFLipn3VSJChy+e5+ahTdNApPphc3qCPUsn10A==
   dependencies:
     glob "7.1.7"
 
@@ -4174,7 +4257,7 @@
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3":
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -4209,6 +4292,18 @@
     tslib "^2.4.1"
     webcrypto-core "^1.7.4"
 
+"@pkgr/utils@^2.3.1":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.4.2.tgz#9e638bbe9a6a6f165580dc943f138fd3309a2cbc"
+  integrity sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==
+  dependencies:
+    cross-spawn "^7.0.3"
+    fast-glob "^3.3.0"
+    is-glob "^4.0.3"
+    open "^9.1.0"
+    picocolors "^1.0.0"
+    tslib "^2.6.0"
+
 "@popperjs/core@^2.9.3":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -4337,10 +4432,10 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rushstack/eslint-patch@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz"
-  integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==
+"@rushstack/eslint-patch@^1.3.3":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz#5f1b518ec5fa54437c0b7c4a821546c64fed6922"
+  integrity sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==
 
 "@rx-stream/pipe@^0.7.1":
   version "0.7.1"
@@ -4818,10 +4913,10 @@
   resolved "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz"
   integrity sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==
 
-"@types/json-schema@^7.0.9":
-  version "7.0.11"
-  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz"
-  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+"@types/json-schema@^7.0.12":
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.14.tgz#74a97a5573980802f32c8e47b663530ab3b6b7d1"
+  integrity sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==
 
 "@types/json-stable-stringify@^1.0.32":
   version "1.0.34"
@@ -4889,6 +4984,13 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-14.18.28.tgz"
   integrity sha512-CK2fnrQlIgKlCV3N2kM+Gznb5USlwA1KFX3rJVHmgVk6NJxFPuQ86pAcvKnu37IA4BGlSRz7sEE1lHL1aLZ/eQ==
 
+"@types/node@^18.11.9":
+  version "18.18.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.7.tgz#bb3a7068dc4ba421b6968f2a259298b3a4e129e8"
+  integrity sha512-bw+lEsxis6eqJYW8Ql6+yTqkE6RuFtsQPSe5JxXbqYRFQEER5aJA9a5UH9igqDWm3X4iLHIKOHlnAXLM4mi7uQ==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
@@ -4949,6 +5051,11 @@
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/semver@^7.5.0":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.4.tgz#0a41252ad431c473158b22f9bfb9a63df7541cff"
+  integrity sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==
+
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
@@ -4978,85 +5085,95 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^5.23.0":
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.23.0.tgz"
-  integrity sha512-hEcSmG4XodSLiAp1uxv/OQSGsDY6QN3TcRU32gANp+19wGE1QQZLRS8/GV58VRUoXhnkuJ3ZxNQ3T6Z6zM59DA==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.23.0"
-    "@typescript-eslint/type-utils" "5.23.0"
-    "@typescript-eslint/utils" "5.23.0"
-    debug "^4.3.2"
-    functional-red-black-tree "^1.0.1"
-    ignore "^5.1.8"
-    regexpp "^3.2.0"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/parser@^5.21.0", "@typescript-eslint/parser@^5.23.0":
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.23.0.tgz"
-  integrity sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==
+"@typescript-eslint/eslint-plugin@^6.0.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.9.0.tgz#fdb6f3821c0167e3356e9d89c80e8230b2e401f4"
+  integrity sha512-lgX7F0azQwRPB7t7WAyeHWVfW1YJ9NIgd9mvGhfQpRY56X6AVf8mwM8Wol+0z4liE7XX3QOt8MN1rUKCfSjRIA==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.23.0"
-    "@typescript-eslint/types" "5.23.0"
-    "@typescript-eslint/typescript-estree" "5.23.0"
-    debug "^4.3.2"
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "6.9.0"
+    "@typescript-eslint/type-utils" "6.9.0"
+    "@typescript-eslint/utils" "6.9.0"
+    "@typescript-eslint/visitor-keys" "6.9.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/parser@^5.4.2 || ^6.0.0", "@typescript-eslint/parser@^6.0.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.9.0.tgz#2b402cadeadd3f211c25820e5433413347b27391"
+  integrity sha512-GZmjMh4AJ/5gaH4XF2eXA8tMnHWP+Pm1mjQR2QN4Iz+j/zO04b9TOvJYOX2sCNIQHtRStKTxRY1FX7LhpJT4Gw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "6.9.0"
+    "@typescript-eslint/types" "6.9.0"
+    "@typescript-eslint/typescript-estree" "6.9.0"
+    "@typescript-eslint/visitor-keys" "6.9.0"
+    debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz"
-  integrity sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==
+"@typescript-eslint/scope-manager@6.9.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.9.0.tgz#2626e9a7fe0e004c3e25f3b986c75f584431134e"
+  integrity sha512-1R8A9Mc39n4pCCz9o79qRO31HGNDvC7UhPhv26TovDsWPBDx+Sg3rOZdCELIA3ZmNoWAuxaMOT7aWtGRSYkQxw==
   dependencies:
-    "@typescript-eslint/types" "5.23.0"
-    "@typescript-eslint/visitor-keys" "5.23.0"
+    "@typescript-eslint/types" "6.9.0"
+    "@typescript-eslint/visitor-keys" "6.9.0"
 
-"@typescript-eslint/type-utils@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.23.0.tgz"
-  integrity sha512-iuI05JsJl/SUnOTXA9f4oI+/4qS/Zcgk+s2ir+lRmXI+80D8GaGwoUqs4p+X+4AxDolPpEpVUdlEH4ADxFy4gw==
+"@typescript-eslint/type-utils@6.9.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.9.0.tgz#23923c8c9677c2ad41457cf8e10a5f2946be1b04"
+  integrity sha512-XXeahmfbpuhVbhSOROIzJ+b13krFmgtc4GlEuu1WBT+RpyGPIA4Y/eGnXzjbDj5gZLzpAXO/sj+IF/x2GtTMjQ==
   dependencies:
-    "@typescript-eslint/utils" "5.23.0"
-    debug "^4.3.2"
-    tsutils "^3.21.0"
+    "@typescript-eslint/typescript-estree" "6.9.0"
+    "@typescript-eslint/utils" "6.9.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
 
-"@typescript-eslint/types@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.23.0.tgz"
-  integrity sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==
+"@typescript-eslint/types@6.9.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.9.0.tgz#86a0cbe7ac46c0761429f928467ff3d92f841098"
+  integrity sha512-+KB0lbkpxBkBSiVCuQvduqMJy+I1FyDbdwSpM3IoBS7APl4Bu15lStPjgBIdykdRqQNYqYNMa8Kuidax6phaEw==
 
-"@typescript-eslint/typescript-estree@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz"
-  integrity sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==
+"@typescript-eslint/typescript-estree@6.9.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.9.0.tgz#d0601b245be873d8fe49f3737f93f8662c8693d4"
+  integrity sha512-NJM2BnJFZBEAbCfBP00zONKXvMqihZCrmwCaik0UhLr0vAgb6oguXxLX1k00oQyD+vZZ+CJn3kocvv2yxm4awQ==
   dependencies:
-    "@typescript-eslint/types" "5.23.0"
-    "@typescript-eslint/visitor-keys" "5.23.0"
-    debug "^4.3.2"
-    globby "^11.0.4"
+    "@typescript-eslint/types" "6.9.0"
+    "@typescript-eslint/visitor-keys" "6.9.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
     is-glob "^4.0.3"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/utils@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.23.0.tgz"
-  integrity sha512-dbgaKN21drqpkbbedGMNPCtRPZo1IOUr5EI9Jrrh99r5UW5Q0dz46RKXeSBoPV+56R6dFKpbrdhgUNSJsDDRZA==
-  dependencies:
-    "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.23.0"
-    "@typescript-eslint/types" "5.23.0"
-    "@typescript-eslint/typescript-estree" "5.23.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
-
-"@typescript-eslint/visitor-keys@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz"
-  integrity sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==
-  dependencies:
-    "@typescript-eslint/types" "5.23.0"
-    eslint-visitor-keys "^3.0.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/utils@6.9.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.9.0.tgz#5bdac8604fca4823f090e4268e681c84d3597c9f"
+  integrity sha512-5Wf+Jsqya7WcCO8me504FBigeQKVLAMPmUzYgDbWchINNh1KJbxCgVya3EQ2MjvJMVeXl3pofRmprqX6mfQkjQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "6.9.0"
+    "@typescript-eslint/types" "6.9.0"
+    "@typescript-eslint/typescript-estree" "6.9.0"
+    semver "^7.5.4"
+
+"@typescript-eslint/visitor-keys@6.9.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.0.tgz#cc69421c10c4ac997ed34f453027245988164e80"
+  integrity sha512-dGtAfqjV6RFOtIP8I0B4ZTBRrlTT8NHHlZZSchQx3qReaoDeXhYM++M4So2AgFK9ZB0emRPA6JI1HkafzA2Ibg==
+  dependencies:
+    "@typescript-eslint/types" "6.9.0"
+    eslint-visitor-keys "^3.4.1"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
 "@vanilla-extract/css-utils@^0.1.3":
   version "0.1.3"
@@ -5537,11 +5654,16 @@ acorn-walk@^8.1.1:
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^8.4.1, acorn@^8.8.0:
+acorn@^8.4.1:
   version "8.8.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+acorn@^8.9.0:
+  version "8.11.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.1.tgz#29c6f12c3002d884b6f8baa37089e1917425cd3d"
+  integrity sha512-IJTNCJMRHfRfb8un89z1QtS0x890C2QUrUxFMK8zy+RizcId6mfnqOf68Bu9YkDgpLYuvCm6aYbwDatXVZPjMQ==
+
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz"
@@ -5579,7 +5701,7 @@ ajv-formats@^2.1.1:
   dependencies:
     ajv "^8.0.0"
 
-ajv@^6.10.0, ajv@^6.12.4:
+ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -5713,20 +5835,27 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
-aria-query@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
-  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+aria-query@^5.1.3:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+  dependencies:
+    dequal "^2.0.3"
+
+array-buffer-byte-length@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
+  integrity sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==
   dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@babel/runtime-corejs3" "^7.10.2"
+    call-bind "^1.0.2"
+    is-array-buffer "^3.0.1"
 
 array-ify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz"
   integrity sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==
 
-array-includes@^3.1.4, array-includes@^3.1.5:
+array-includes@^3.1.4:
   version "3.1.5"
   resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz"
   integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
@@ -5737,30 +5866,76 @@ array-includes@^3.1.4, array-includes@^3.1.5:
     get-intrinsic "^1.1.1"
     is-string "^1.0.7"
 
+array-includes@^3.1.6, array-includes@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
+  integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    is-string "^1.0.7"
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array.prototype.flat@^1.2.5:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz"
-  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
+array.prototype.findlastindex@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207"
+  integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
+    get-intrinsic "^1.2.1"
 
-array.prototype.flatmap@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz"
-  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.tosorted@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.2.tgz#620eff7442503d66c799d95503f82b475745cefd"
+  integrity sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
+    get-intrinsic "^1.2.1"
+
+arraybuffer.prototype.slice@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz#98bd561953e3e74bb34938e77647179dfe6e9f12"
+  integrity sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==
+  dependencies:
+    array-buffer-byte-length "^1.0.0"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    is-array-buffer "^3.0.2"
+    is-shared-array-buffer "^1.0.2"
 
 arrify@^1.0.1:
   version "1.0.1"
@@ -5811,6 +5986,13 @@ astral-regex@^2.0.0:
   resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+asynciterator.prototype@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
+  integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
+  dependencies:
+    has-symbols "^1.0.3"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
@@ -5841,10 +6023,10 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.3.5:
-  version "4.4.2"
-  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz"
-  integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==
+axe-core@^4.6.2:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.8.2.tgz#2f6f3cde40935825cf4465e3c1c9e77b240ff6ae"
+  integrity sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==
 
 axios@0.21.1:
   version "0.21.1"
@@ -5886,10 +6068,12 @@ axios@^1.4.0:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
-  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+axobject-query@^3.1.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
+  integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
+  dependencies:
+    dequal "^2.0.3"
 
 babel-jest@^29.5.0:
   version "29.5.0"
@@ -6030,7 +6214,7 @@ bech32@^2.0.0:
   resolved "https://registry.yarnpkg.com/bech32/-/bech32-2.0.0.tgz#078d3686535075c8c79709f054b1b226a133b355"
   integrity sha512-LcknSilhIGatDAsY1ak2I8VtGaHNhgMSYVxFrGLXv+xLHytaKZKcaUJJUE7qmBr7h33o5YQwP55pMI0xmkpJwg==
 
-big-integer@^1.6.48:
+big-integer@^1.6.44, big-integer@^1.6.48:
   version "1.6.51"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
   integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
@@ -6106,6 +6290,13 @@ bowser@2.11.0:
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
   integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
 
+bplist-parser@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
+  integrity sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
+  dependencies:
+    big-integer "^1.6.44"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
@@ -6285,6 +6476,13 @@ bufferutil@^4.0.3:
   dependencies:
     node-gyp-build "^4.3.0"
 
+bundle-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-3.0.0.tgz#ba59bcc9ac785fb67ccdbf104a2bf60c099f0e1a"
+  integrity sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
+  dependencies:
+    run-applescript "^5.0.0"
+
 busboy@^1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
@@ -6305,6 +6503,15 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.4, call-bind@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513"
+  integrity sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==
+  dependencies:
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.1"
+    set-function-length "^1.1.1"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
@@ -6767,14 +6974,12 @@ conventional-changelog-conventionalcommits@4.6.3, conventional-changelog-convent
     lodash "^4.17.15"
     q "^1.5.1"
 
-conventional-changelog-conventionalcommits@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-5.0.0.tgz"
-  integrity sha512-lCDbA+ZqVFQGUj7h9QBKoIpLhl8iihkO0nCTyRNzuXtcd7ubODpYB04IFy31JloiJgG0Uovu8ot8oxRzn7Nwtw==
+conventional-changelog-conventionalcommits@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-7.0.2.tgz#aa5da0f1b2543094889e8cf7616ebe1a8f5c70d5"
+  integrity sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==
   dependencies:
     compare-func "^2.0.0"
-    lodash "^4.17.15"
-    q "^1.5.1"
 
 conventional-changelog-core@^4.2.1:
   version "4.2.4"
@@ -6944,11 +7149,6 @@ copy-to-clipboard@^3.3.3:
   dependencies:
     toggle-selection "^1.0.6"
 
-core-js-pure@^3.20.2:
-  version "3.22.5"
-  resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.5.tgz"
-  integrity sha512-8xo9R00iYD7TcV7OrC98GwxiUEAabVWO3dix+uyWjnYrx9fyASLlIX+f/3p5dW5qByaP2bcZ8X/T47s55et/tA==
-
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
@@ -6971,6 +7171,13 @@ cosmiconfig-typescript-loader@^4.0.0:
   resolved "https://registry.npmjs.org/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-4.0.0.tgz"
   integrity sha512-cVpucSc2Tf+VPwCCR7SZzmQTQkPbkk4O01yXsYqXBIbjE1bhwqSyAgYQkRK1un4i0OPziTleqFhdkmOc4RQ/9g==
 
+cosmiconfig-typescript-loader@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-5.0.0.tgz#0d3becfe022a871f7275ceb2397d692e06045dc8"
+  integrity sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==
+  dependencies:
+    jiti "^1.19.1"
+
 cosmiconfig@7.0.1, cosmiconfig@^7.0.0:
   version "7.0.1"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz"
@@ -6982,6 +7189,16 @@ cosmiconfig@7.0.1, cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^8.0.0:
+  version "8.3.6"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.3.6.tgz#060a2b871d66dba6c8538ea1118ba1ac16f5fae3"
+  integrity sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==
+  dependencies:
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+    path-type "^4.0.0"
+
 cosmjs-types@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.7.2.tgz#a757371abd340949c5bd5d49c6f8379ae1ffd7e2"
@@ -7140,9 +7357,9 @@ cz-conventional-changelog@3.3.0:
   optionalDependencies:
     "@commitlint/load" ">6.1.1"
 
-damerau-levenshtein@^1.0.7:
+damerau-levenshtein@^1.0.8:
   version "1.0.8"
-  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
 dargs@^7.0.0:
@@ -7177,13 +7394,6 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
@@ -7234,6 +7444,24 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
+default-browser-id@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
+  integrity sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
+  dependencies:
+    bplist-parser "^0.2.0"
+    untildify "^4.0.0"
+
+default-browser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-4.0.0.tgz#53c9894f8810bf86696de117a6ce9085a3cbc7da"
+  integrity sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
+  dependencies:
+    bundle-name "^3.0.0"
+    default-browser-id "^3.0.0"
+    execa "^7.1.1"
+    titleize "^3.0.0"
+
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz"
@@ -7241,6 +7469,20 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
+define-data-property@^1.0.1, define-data-property@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
+  integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
+  dependencies:
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
+define-lazy-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
+  integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
+
 define-properties@^1.1.3, define-properties@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz"
@@ -7249,6 +7491,15 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 delay@^4.4.0:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/delay/-/delay-4.4.1.tgz#6e02d02946a1b6ab98b39262ced965acba2ac4d1"
@@ -7269,6 +7520,11 @@ dependency-graph@^0.11.0:
   resolved "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz"
   integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
 
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 des.js@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.1.0.tgz#1d37f5766f3bbff4ee9638e871a8768c173b81da"
@@ -7450,6 +7706,14 @@ end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
+enhanced-resolve@^5.12.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
+  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@@ -7457,7 +7721,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.5:
   version "1.20.0"
   resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.0.tgz"
   integrity sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==
@@ -7486,6 +7750,80 @@ es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19
     string.prototype.trimstart "^1.0.5"
     unbox-primitive "^1.0.2"
 
+es-abstract@^1.22.1:
+  version "1.22.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.3.tgz#48e79f5573198de6dee3589195727f4f74bc4f32"
+  integrity sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==
+  dependencies:
+    array-buffer-byte-length "^1.0.0"
+    arraybuffer.prototype.slice "^1.0.2"
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.5"
+    es-set-tostringtag "^2.0.1"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.2"
+    get-symbol-description "^1.0.0"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+    internal-slot "^1.0.5"
+    is-array-buffer "^3.0.2"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.12"
+    is-weakref "^1.0.2"
+    object-inspect "^1.13.1"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.5.1"
+    safe-array-concat "^1.0.1"
+    safe-regex-test "^1.0.0"
+    string.prototype.trim "^1.2.8"
+    string.prototype.trimend "^1.0.7"
+    string.prototype.trimstart "^1.0.7"
+    typed-array-buffer "^1.0.0"
+    typed-array-byte-length "^1.0.0"
+    typed-array-byte-offset "^1.0.0"
+    typed-array-length "^1.0.4"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.13"
+
+es-iterator-helpers@^1.0.12:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
+  integrity sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==
+  dependencies:
+    asynciterator.prototype "^1.0.0"
+    call-bind "^1.0.2"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.1"
+    es-set-tostringtag "^2.0.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    iterator.prototype "^1.1.2"
+    safe-array-concat "^1.0.1"
+
+es-set-tostringtag@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz#11f7cc9f63376930a5f20be4915834f4bc74f9c9"
+  integrity sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==
+  dependencies:
+    get-intrinsic "^1.2.2"
+    has-tostringtag "^1.0.0"
+    hasown "^2.0.0"
+
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz"
@@ -7537,10 +7875,10 @@ eslint-config-airbnb-base@^15.0.0:
     object.entries "^1.1.5"
     semver "^6.3.0"
 
-eslint-config-airbnb-typescript@^17.0.0:
-  version "17.0.0"
-  resolved "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.0.0.tgz"
-  integrity sha512-elNiuzD0kPAPTXjFWg+lE24nMdHMtuxgYoD30OyMD6yrW1AhFZPAg27VX7d3tzOErw+dgJTNWfRSDqEcXb4V0g==
+eslint-config-airbnb-typescript@^17.1.0:
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.1.0.tgz#fda960eee4a510f092a9a1c139035ac588937ddc"
+  integrity sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==
   dependencies:
     eslint-config-airbnb-base "^15.0.0"
 
@@ -7553,43 +7891,44 @@ eslint-config-airbnb@^19.0.4:
     object.assign "^4.1.2"
     object.entries "^1.1.5"
 
-eslint-config-next@^13.0.0:
-  version "13.0.0"
-  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.0.0.tgz"
-  integrity sha512-y2nqWS2tycWySdVhb+rhp6CuDmDazGySqkzzQZf3UTyfHyC7og1m5m/AtMFwCo5mtvDqvw1BENin52kV9733lg==
+eslint-config-next@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.0.0.tgz#c896867c8f08dab65205fb3b4bcc5d9ab8646d08"
+  integrity sha512-jtXeE+/pGQ3h9n11QyyuPN50kO13GO5XvjU5ZRq6W+XTpOMjyobWmK2s7aowy0FtzA49krJzYzEU9s1RMwoJ6g==
   dependencies:
-    "@next/eslint-plugin-next" "13.0.0"
-    "@rushstack/eslint-patch" "^1.1.3"
-    "@typescript-eslint/parser" "^5.21.0"
+    "@next/eslint-plugin-next" "14.0.0"
+    "@rushstack/eslint-patch" "^1.3.3"
+    "@typescript-eslint/parser" "^5.4.2 || ^6.0.0"
     eslint-import-resolver-node "^0.3.6"
-    eslint-import-resolver-typescript "^2.7.1"
-    eslint-plugin-import "^2.26.0"
-    eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-react "^7.31.7"
-    eslint-plugin-react-hooks "^4.5.0"
-
-eslint-config-prettier@^8.5.0:
-  version "8.5.0"
-  resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz"
-  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
-
-eslint-config-sznm@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/eslint-config-sznm/-/eslint-config-sznm-1.0.0.tgz"
-  integrity sha512-DoOgrx3r8Icr0iymGZj1BY0HK8Agt6++xStQVFNqmUobiVhhXVNQcq19F+aBvXhwhH6E49f9BKIdugG7lnz9mA==
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.28.1"
+    eslint-plugin-jsx-a11y "^6.7.1"
+    eslint-plugin-react "^7.33.2"
+    eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+
+eslint-config-prettier@^8.8.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
+  integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
+
+eslint-config-sznm@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-config-sznm/-/eslint-config-sznm-2.0.2.tgz#95282c11de37d7d4051728c5a4e0394dffc08a99"
+  integrity sha512-B28dQFWNk3MLpXe3jGXU5eNYyD0OHnwC5bs79iF1pGIRpEF2zUgvVRrDoJDAIQSmHicIzIhOOpoNCLzWU/711Q==
   dependencies:
-    "@typescript-eslint/eslint-plugin" "^5.23.0"
-    "@typescript-eslint/parser" "^5.23.0"
+    "@typescript-eslint/eslint-plugin" "^6.0.0"
+    "@typescript-eslint/parser" "^6.0.0"
     eslint-config-airbnb "^19.0.4"
     eslint-config-airbnb-base "^15.0.0"
-    eslint-config-airbnb-typescript "^17.0.0"
-    eslint-config-prettier "^8.5.0"
-    eslint-plugin-import "^2.26.0"
-    eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-prettier "^4.0.0"
-    eslint-plugin-react "^7.29.4"
-    eslint-plugin-react-hooks "^4.5.0"
-    eslint-plugin-sonarjs "^0.13.0"
+    eslint-config-airbnb-typescript "^17.1.0"
+    eslint-config-prettier "^8.8.0"
+    eslint-import-resolver-typescript "^3.5.5"
+    eslint-plugin-import "^2.27.5"
+    eslint-plugin-jsx-a11y "^6.7.1"
+    eslint-plugin-prettier "^5.0.0"
+    eslint-plugin-react "^7.32.2"
+    eslint-plugin-react-hooks "^4.6.0"
+    eslint-plugin-sonarjs "^0.19.0"
 
 eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
@@ -7599,194 +7938,200 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-import-resolver-typescript@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz"
-  integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
+eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
+eslint-import-resolver-typescript@^3.5.2, eslint-import-resolver-typescript@^3.5.5:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz#7b983680edd3f1c5bce1a5829ae0bc2d57fe9efa"
+  integrity sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==
   dependencies:
     debug "^4.3.4"
-    glob "^7.2.0"
+    enhanced-resolve "^5.12.0"
+    eslint-module-utils "^2.7.4"
+    fast-glob "^3.3.1"
+    get-tsconfig "^4.5.0"
+    is-core-module "^2.11.0"
     is-glob "^4.0.3"
-    resolve "^1.22.0"
-    tsconfig-paths "^3.14.1"
 
-eslint-module-utils@^2.7.3:
-  version "2.7.3"
-  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz"
-  integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
+eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
+  integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
   dependencies:
     debug "^3.2.7"
-    find-up "^2.1.0"
 
-eslint-plugin-import@^2.26.0:
-  version "2.26.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz"
-  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
+eslint-plugin-import@^2.27.5, eslint-plugin-import@^2.28.1:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz#8133232e4329ee344f2f612885ac3073b0b7e155"
+  integrity sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==
   dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flat "^1.2.5"
-    debug "^2.6.9"
+    array-includes "^3.1.7"
+    array.prototype.findlastindex "^1.2.3"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
+    debug "^3.2.7"
     doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.3"
-    has "^1.0.3"
-    is-core-module "^2.8.1"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.8.0"
+    hasown "^2.0.0"
+    is-core-module "^2.13.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.values "^1.1.5"
-    resolve "^1.22.0"
-    tsconfig-paths "^3.14.1"
-
-eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.5.1"
-  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz"
-  integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==
-  dependencies:
-    "@babel/runtime" "^7.16.3"
-    aria-query "^4.2.2"
-    array-includes "^3.1.4"
+    object.fromentries "^2.0.7"
+    object.groupby "^1.0.1"
+    object.values "^1.1.7"
+    semver "^6.3.1"
+    tsconfig-paths "^3.14.2"
+
+eslint-plugin-jsx-a11y@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
+  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    aria-query "^5.1.3"
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
     ast-types-flow "^0.0.7"
-    axe-core "^4.3.5"
-    axobject-query "^2.2.0"
-    damerau-levenshtein "^1.0.7"
+    axe-core "^4.6.2"
+    axobject-query "^3.1.1"
+    damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
     has "^1.0.3"
-    jsx-ast-utils "^3.2.1"
-    language-tags "^1.0.5"
-    minimatch "^3.0.4"
+    jsx-ast-utils "^3.3.3"
+    language-tags "=1.0.5"
+    minimatch "^3.1.2"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
+    semver "^6.3.0"
 
-eslint-plugin-prettier@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz"
-  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+eslint-plugin-prettier@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.1.tgz#a3b399f04378f79f066379f544e42d6b73f11515"
+  integrity sha512-m3u5RnR56asrwV/lDC4GHorlW75DsFfmUcjfCYylTUs85dBRnB7VM6xG8eCMJdeDRnppzmxZVf1GEPJvl1JmNg==
   dependencies:
     prettier-linter-helpers "^1.0.0"
+    synckit "^0.8.5"
 
-eslint-plugin-react-hooks@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz"
-  integrity sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==
+"eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705", eslint-plugin-react-hooks@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
-eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
-  version "7.31.9"
-  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.9.tgz"
-  integrity sha512-vrVJwusIw4L99lyfXjtCw8HWdloajsiYslMavogrBe2Gl8gr95TJsJnOMRasN4b4N24I3XuJf6aAV6MhyGmjqw==
+eslint-plugin-react@^7.32.2, eslint-plugin-react@^7.33.2:
+  version "7.33.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
+  integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
   dependencies:
-    array-includes "^3.1.5"
-    array.prototype.flatmap "^1.3.0"
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
+    array.prototype.tosorted "^1.1.1"
     doctrine "^2.1.0"
+    es-iterator-helpers "^1.0.12"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
-    object.entries "^1.1.5"
-    object.fromentries "^2.0.5"
-    object.hasown "^1.1.1"
-    object.values "^1.1.5"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
+    object.hasown "^1.1.2"
+    object.values "^1.1.6"
     prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
-    semver "^6.3.0"
-    string.prototype.matchall "^4.0.7"
-
-eslint-plugin-sonarjs@^0.13.0:
-  version "0.13.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-sonarjs/-/eslint-plugin-sonarjs-0.13.0.tgz"
-  integrity sha512-t3m7ta0EspzDxSOZh3cEOJIJVZgN/TlJYaBGnQlK6W/PZNbWep8q4RQskkJkA7/zwNpX0BaoEOSUUrqaADVoqA==
+    resolve "^2.0.0-next.4"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.8"
 
-eslint-scope@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^4.1.1"
+eslint-plugin-sonarjs@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-sonarjs/-/eslint-plugin-sonarjs-0.19.0.tgz#6654bc1c6d24c2183891b8bfe1175004dbba1e3c"
+  integrity sha512-6+s5oNk5TFtVlbRxqZN7FIGmjdPCYQKaTzFPmqieCmsU1kBYDzndTeQav0xtQNwZJWu5awWfTGe8Srq9xFOGnw==
 
-eslint-scope@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz"
-  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
-eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0:
+eslint-visitor-keys@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@^8.25.0:
-  version "8.25.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-8.25.0.tgz"
-  integrity sha512-DVlJOZ4Pn50zcKW5bYH7GQK/9MsoQG2d5eDH0ebEkE8PbgzTTmtt/VTH9GGJ4BfeZCpBLqFfvsjX35UacUL83A==
-  dependencies:
-    "@eslint/eslintrc" "^1.3.3"
-    "@humanwhocodes/config-array" "^0.10.5"
+eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint@^8.52.0:
+  version "8.52.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.52.0.tgz#d0cd4a1fac06427a61ef9242b9353f36ea7062fc"
+  integrity sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.2"
+    "@eslint/js" "8.52.0"
+    "@humanwhocodes/config-array" "^0.11.13"
     "@humanwhocodes/module-importer" "^1.0.1"
-    ajv "^6.10.0"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
-    esquery "^1.4.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     find-up "^5.0.0"
-    glob-parent "^6.0.1"
-    globals "^13.15.0"
-    globby "^11.1.0"
-    grapheme-splitter "^1.0.4"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
-    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    js-sdsl "^4.1.4"
+    is-path-inside "^3.0.3"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    regexpp "^3.2.0"
+    optionator "^0.9.3"
     strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
-espree@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz"
-  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
-    acorn "^8.8.0"
+    acorn "^8.9.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^3.4.1"
 
 esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -7797,11 +8142,6 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
@@ -7906,6 +8246,21 @@ execa@^6.1.0:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
+execa@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9"
+  integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.1"
+    human-signals "^4.3.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^3.0.7"
+    strip-final-newline "^3.0.0"
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -7974,6 +8329,17 @@ fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.0, fast-glob@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
@@ -8077,7 +8443,7 @@ find-root@1.1.0, find-root@^1.1.0:
   resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
-find-up@^2.0.0, find-up@^2.1.0:
+find-up@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz"
   integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
@@ -8239,6 +8605,11 @@ function-bind@^1.1.1:
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
 function.prototype.name@^1.1.5:
   version "1.1.5"
   resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz"
@@ -8249,12 +8620,17 @@ function.prototype.name@^1.1.5:
     es-abstract "^1.19.0"
     functions-have-names "^1.2.2"
 
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
 
-functions-have-names@^1.2.2:
+functions-have-names@^1.2.2, functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -8302,6 +8678,16 @@ get-intrinsic@^1.1.3:
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.0, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b"
+  integrity sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==
+  dependencies:
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -8335,6 +8721,13 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+get-tsconfig@^4.5.0:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.2.tgz#0dcd6fb330391d46332f4c6c1bf89a6514c2ddce"
+  integrity sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==
+  dependencies:
+    resolve-pkg-maps "^1.0.0"
+
 git-raw-commits@^2.0.0, git-raw-commits@^2.0.8:
   version "2.0.11"
   resolved "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz"
@@ -8376,9 +8769,9 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
+glob-parent@^6.0.2:
   version "6.0.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
   dependencies:
     is-glob "^4.0.3"
@@ -8395,7 +8788,7 @@ glob@7.1.7:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.2.3, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0:
+glob@7.2.3, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4:
   version "7.2.3"
   resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -8450,21 +8843,21 @@ globals@^11.1.0:
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.15.0:
-  version "13.15.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz"
-  integrity sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==
+globals@^13.19.0:
+  version "13.23.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.23.0.tgz#ef31673c926a0976e1f61dab4dca57e0c0a8af02"
+  integrity sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==
   dependencies:
     type-fest "^0.20.2"
 
-globalthis@^1.0.1:
+globalthis@^1.0.1, globalthis@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz"
   integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
   dependencies:
     define-properties "^1.1.3"
 
-globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
+globby@^11.0.3, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -8493,15 +8886,15 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-graceful-fs@^4.2.9:
+graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
-grapheme-splitter@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
-  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
 graphql-config@4.3.6:
   version "4.3.6"
@@ -8634,6 +9027,13 @@ hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@~1.1.7:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hasown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
+  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
+  dependencies:
+    function-bind "^1.1.2"
+
 header-case@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz"
@@ -8714,6 +9114,11 @@ human-signals@^3.0.1:
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz"
   integrity sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==
 
+human-signals@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
+  integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
+
 husky@^8.0.1:
   version "8.0.1"
   resolved "https://registry.npmjs.org/husky/-/husky-8.0.1.tgz"
@@ -8736,11 +9141,16 @@ ieee754@^1.1.13, ieee754@^1.1.4, ieee754@^1.2.1:
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.1.8, ignore@^5.2.0:
+ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+ignore@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
@@ -8756,7 +9166,7 @@ immutable@~3.7.6:
   resolved "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz"
   integrity sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==
 
-import-fresh@^3.0.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -8835,6 +9245,15 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+internal-slot@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.6.tgz#37e756098c4911c5e912b8edbf71ed3aa116f930"
+  integrity sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==
+  dependencies:
+    get-intrinsic "^1.2.2"
+    hasown "^2.0.0"
+    side-channel "^1.0.4"
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
@@ -8863,11 +9282,27 @@ is-arguments@^1.0.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
+  integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.0"
+    is-typed-array "^1.1.10"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
@@ -8895,7 +9330,7 @@ is-buffer@~1.1.1:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-callable@^1.1.3:
+is-callable@^1.1.3, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
@@ -8905,6 +9340,13 @@ is-callable@^1.1.4, is-callable@^1.2.4:
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
+is-core-module@^2.11.0, is-core-module@^2.13.1:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
 is-core-module@^2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
@@ -8912,25 +9354,42 @@ is-core-module@^2.13.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.1, is-core-module@^2.9.0:
+is-core-module@^2.5.0, is-core-module@^2.9.0:
   version "2.10.0"
   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz"
   integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
   dependencies:
     has "^1.0.3"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-docker@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-docker@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
+  integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
@@ -8953,7 +9412,7 @@ is-generator-fn@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
   integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
-is-generator-function@^1.0.7:
+is-generator-function@^1.0.10, is-generator-function@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
   integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
@@ -8967,6 +9426,13 @@ is-glob@4.0.3, is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-inside-container@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
+  integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
+  dependencies:
+    is-docker "^3.0.0"
+
 is-interactive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz"
@@ -8979,6 +9445,11 @@ is-lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+is-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-nan@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/is-nan/-/is-nan-1.3.2.tgz#043a54adea31748b55b6cd4e09aadafa69bd9e1d"
@@ -9009,6 +9480,11 @@ is-obj@^2.0.0:
   resolved "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz"
   integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
 
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
 is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
@@ -9036,6 +9512,11 @@ is-relative@^1.0.0:
   dependencies:
     is-unc-path "^1.0.0"
 
+is-set@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz"
@@ -9074,7 +9555,7 @@ is-text-path@^1.0.1:
   dependencies:
     text-extensions "^1.0.0"
 
-is-typed-array@^1.1.3:
+is-typed-array@^1.1.10, is-typed-array@^1.1.12, is-typed-array@^1.1.3, is-typed-array@^1.1.9:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a"
   integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==
@@ -9105,6 +9586,11 @@ is-utf8@^0.2.1:
   resolved "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
@@ -9112,11 +9598,31 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-weakset@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
+  integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 is-windows@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
@@ -9187,6 +9693,17 @@ istanbul-reports@^3.1.3:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+iterator.prototype@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
+  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+  dependencies:
+    define-properties "^1.2.1"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    reflect.getprototypeof "^1.0.4"
+    set-function-name "^2.0.1"
+
 jest-changed-files@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.5.0.tgz#e88786dca8bf2aa899ec4af7644e16d9dcf9b23e"
@@ -9548,6 +10065,11 @@ jest@^29.5.0:
     import-local "^3.0.2"
     jest-cli "^29.5.0"
 
+jiti@^1.19.1:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42"
+  integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
+
 js-base64@^3.7.4:
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.4.tgz#af95b20f23efc8034afd2d1cc5b9d0adf7419037"
@@ -9599,11 +10121,6 @@ js-encoding-utils@0.5.6:
   resolved "https://registry.yarnpkg.com/js-encoding-utils/-/js-encoding-utils-0.5.6.tgz#517351d8f4a85b2ad121183d41df8319981bee03"
   integrity sha512-qnAGsUIWrmzh5n+3AXqbxX1KsB9hkQmJZf3aA9DLAS7GpL/NEHCBreFFbW+imramoU+Q0TDyvkwhRbBRH1TVkg==
 
-js-sdsl@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz"
-  integrity sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==
-
 js-sha3@0.8.0, js-sha3@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
@@ -9700,10 +10217,10 @@ json-to-pretty-yaml@^1.2.2:
     remedial "^1.0.7"
     remove-trailing-spaces "^1.0.6"
 
-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
@@ -9757,7 +10274,7 @@ jsonwebtoken@^8.5.1:
     ms "^2.1.1"
     semver "^5.6.0"
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.3.0"
   resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz"
   integrity sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==
@@ -9765,6 +10282,16 @@ jsonwebtoken@^8.5.1:
     array-includes "^3.1.4"
     object.assign "^4.1.2"
 
+jsx-ast-utils@^3.3.3:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
 jwa@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz"
@@ -9825,10 +10352,10 @@ language-subtag-registry@~0.3.2:
   resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz"
   integrity sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==
 
-language-tags@^1.0.5:
+language-tags@=1.0.5:
   version "1.0.5"
-  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz"
-  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
   dependencies:
     language-subtag-registry "~0.3.2"
 
@@ -9978,6 +10505,11 @@ lodash-es@^4.17.15:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -10028,6 +10560,11 @@ lodash.isstring@^4.0.1:
   resolved "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz"
   integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==
 
+lodash.kebabcase@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
+  integrity sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==
+
 lodash.map@^4.5.1:
   version "4.6.0"
   resolved "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz"
@@ -10043,7 +10580,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.mergewith@4.6.2:
+lodash.mergewith@4.6.2, lodash.mergewith@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz"
   integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
@@ -10053,6 +10590,26 @@ lodash.once@^4.0.0:
   resolved "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz"
   integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
 
+lodash.snakecase@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
+  integrity sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==
+
+lodash.startcase@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
+  integrity sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
+
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
+
+lodash.upperfirst@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
+  integrity sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==
+
 lodash@4.17.21, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
@@ -10324,7 +10881,7 @@ minimatch@4.2.1:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -10411,11 +10968,6 @@ motion@^10.16.2:
     "@motionone/utils" "^10.15.1"
     "@motionone/vue" "^10.16.2"
 
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
-
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
@@ -10616,6 +11168,11 @@ object-inspect@^1.12.0, object-inspect@^1.12.2, object-inspect@^1.9.0:
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz"
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
+object-inspect@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
+
 object-is@^1.0.1:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
@@ -10629,7 +11186,7 @@ object-keys@^1.1.1:
   resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.2:
+object.assign@^4.1.2, object.assign@^4.1.4:
   version "4.1.4"
   resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz"
   integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
@@ -10648,31 +11205,50 @@ object.entries@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-object.fromentries@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz"
-  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+object.entries@^1.1.6:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
+  integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
-object.hasown@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz"
-  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+object.fromentries@^2.0.6, object.fromentries@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
+  integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
   dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
-object.values@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz"
-  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+object.groupby@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee"
+  integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+
+object.hasown@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
+  integrity sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==
+  dependencies:
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
+object.values@^1.1.6, object.values@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
+  integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 on-exit-leak-free@^0.2.0:
   version "0.2.0"
@@ -10700,17 +11276,27 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+open@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
+  integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
+  dependencies:
+    default-browser "^4.0.0"
+    define-lazy-prop "^3.0.0"
+    is-inside-container "^1.0.0"
+    is-wsl "^2.2.0"
+
+optionator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
   dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
-    word-wrap "^1.2.3"
 
 ora@^5.4.1:
   version "5.4.1"
@@ -10912,7 +11498,7 @@ path-key@^4.0.0:
   resolved "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz"
   integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
 
-path-parse@^1.0.6, path-parse@^1.0.7:
+path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -11052,10 +11638,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz"
-  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+prettier@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+  integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
 
 pretty-format@^29.0.0, pretty-format@^29.5.0:
   version "29.5.0"
@@ -11500,6 +12086,18 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+reflect.getprototypeof@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
+  integrity sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
 regenerator-runtime@^0.13.10:
   version "0.13.10"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz"
@@ -11529,10 +12127,14 @@ regexp.prototype.flags@^1.4.1:
     define-properties "^1.1.3"
     functions-have-names "^1.2.2"
 
-regexpp@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
-  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
+  integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    set-function-name "^2.0.0"
 
 relay-runtime@12.0.0:
   version "12.0.0"
@@ -11610,12 +12212,17 @@ resolve-global@1.0.0, resolve-global@^1.0.0:
   dependencies:
     global-dirs "^0.1.1"
 
+resolve-pkg-maps@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
+  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
+
 resolve.exports@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
   integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
 
-resolve@^1.10.0, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.10.0, resolve@^1.20.0:
   version "1.22.1"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -11633,13 +12240,23 @@ resolve@^1.19.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.3:
-  version "2.0.0-next.3"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
-  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
   dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.4:
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
 
 restore-cursor@^3.1.0:
   version "3.1.0"
@@ -11689,6 +12306,13 @@ rooks@^5.11.0:
     lodash.debounce "^4.0.8"
     raf "^3.4.1"
 
+run-applescript@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-5.0.0.tgz#e11e1c932e055d5c6b40d98374e0268d9b11899c"
+  integrity sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
+  dependencies:
+    execa "^5.0.0"
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz"
@@ -11722,6 +12346,16 @@ rxjs@^7.5.5:
   dependencies:
     tslib "^2.1.0"
 
+safe-array-concat@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
+  integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
@@ -11737,6 +12371,15 @@ safe-json-utils@^1.1.1:
   resolved "https://registry.yarnpkg.com/safe-json-utils/-/safe-json-utils-1.1.1.tgz#0e883874467d95ab914c3f511096b89bfb3e63b1"
   integrity sha512-SAJWGKDs50tAbiDXLf89PDwt9XYkWyANFWVzn4dTXl5QyI8t2o/bW5/OJl3lvc2WVU4MEpTo9Yz5NVFNsp+OJQ==
 
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
 safe-stable-stringify@^2.1.0:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz#138c84b6f6edb3db5f8ef3ef7115b8f55ccbf886"
@@ -11819,6 +12462,11 @@ semver@^6.0.0, semver@^6.3.0:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
 semver@^7.3.8:
   version "7.5.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
@@ -11826,6 +12474,13 @@ semver@^7.3.8:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 sentence-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz"
@@ -11840,6 +12495,25 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+set-function-length@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
+  integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
+  dependencies:
+    define-data-property "^1.1.1"
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
+set-function-name@^2.0.0, set-function-name@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
+  integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
+  dependencies:
+    define-data-property "^1.0.1"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.0"
+
 setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz"
@@ -12129,20 +12803,30 @@ string-width@^5.0.0:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string.prototype.matchall@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz"
-  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
+string.prototype.matchall@^4.0.8:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
+  integrity sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-    get-intrinsic "^1.1.1"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.4.1"
+    internal-slot "^1.0.5"
+    regexp.prototype.flags "^1.5.0"
+    set-function-name "^2.0.0"
     side-channel "^1.0.4"
 
+string.prototype.trim@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
+  integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
 string.prototype.trimend@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz"
@@ -12152,6 +12836,15 @@ string.prototype.trimend@^1.0.5:
     define-properties "^1.1.4"
     es-abstract "^1.19.5"
 
+string.prototype.trimend@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
+  integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
 string.prototype.trimstart@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz"
@@ -12161,6 +12854,15 @@ string.prototype.trimstart@^1.0.5:
     define-properties "^1.1.4"
     es-abstract "^1.19.5"
 
+string.prototype.trimstart@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
+  integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
@@ -12228,7 +12930,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@3.1.1, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -12283,11 +12985,24 @@ symbol-observable@^2.0.3:
   resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-2.0.3.tgz"
   integrity sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA==
 
+synckit@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
+  integrity sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
+  dependencies:
+    "@pkgr/utils" "^2.3.1"
+    tslib "^2.5.0"
+
 tabbable@^6.0.1, tabbable@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
@@ -12357,6 +13072,11 @@ title-case@^3.0.3:
   dependencies:
     tslib "^2.0.3"
 
+titleize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
+  integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
+
 tlds@^1.199.0:
   version "1.236.0"
   resolved "https://registry.npmjs.org/tlds/-/tlds-1.236.0.tgz"
@@ -12408,6 +13128,11 @@ trim-newlines@^3.0.0:
   resolved "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz"
   integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
+ts-api-utils@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.3.tgz#f12c1c781d04427313dbac808f453f050e54a331"
+  integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
+
 ts-jest@^29.0.5:
   version "29.1.0"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.0.tgz#4a9db4104a49b76d2b368ea775b6c9535c603891"
@@ -12446,17 +13171,17 @@ ts-node@^10.8.1:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
-tsconfig-paths@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"
-  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+tsconfig-paths@^3.14.2:
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
+  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
   dependencies:
     "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
+    json5 "^1.0.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@1.14.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -12471,12 +13196,10 @@ tslib@^2.3.1, tslib@^2.4.1, tslib@~2.4.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
 
-tsutils@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
-  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
-  dependencies:
-    tslib "^1.8.1"
+tslib@^2.5.0, tslib@^2.6.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -12525,6 +13248,45 @@ type-tagger@^1.0.0:
   resolved "https://registry.yarnpkg.com/type-tagger/-/type-tagger-1.0.0.tgz#dc6297e52e17097c1b92b42c16816a18f631e7f4"
   integrity sha512-FIPqqpmDgdaulCnRoKv1/d3U4xVBUrYn42QXWNP3XYmgfPUDuBUsgFOb9ntT0aIe0UsUP+lknpQ5d9Kn36RssA==
 
+typed-array-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60"
+  integrity sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+    is-typed-array "^1.1.10"
+
+typed-array-byte-length@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz#d787a24a995711611fb2b87a4052799517b230d0"
+  integrity sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==
+  dependencies:
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    has-proto "^1.0.1"
+    is-typed-array "^1.1.10"
+
+typed-array-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz#cbbe89b51fdef9cd6aaf07ad4707340abbc4ea0b"
+  integrity sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    has-proto "^1.0.1"
+    is-typed-array "^1.1.10"
+
+typed-array-length@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
+  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+  dependencies:
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    is-typed-array "^1.1.9"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
@@ -12540,10 +13302,10 @@ typescript@^4.6.4:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
-typescript@^4.9.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.1.6:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
+  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
 
 ua-parser-js@^0.7.30:
   version "0.7.32"
@@ -12582,6 +13344,11 @@ unc-path-regex@^0.1.2:
   resolved "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz"
   integrity sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 undici@^5.12.0, undici@^5.8.0:
   version "5.12.0"
   resolved "https://registry.npmjs.org/undici/-/undici-5.12.0.tgz"
@@ -12606,6 +13373,11 @@ unorm@^1.5.0:
   resolved "https://registry.yarnpkg.com/unorm/-/unorm-1.6.0.tgz#029b289661fba714f1a9af439eb51d9b16c205af"
   integrity sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA==
 
+untildify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
 update-browserslist-db@^1.0.5:
   version "1.0.8"
   resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.8.tgz"
@@ -12826,6 +13598,34 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz"
@@ -12842,6 +13642,17 @@ which-typed-array@^1.1.11, which-typed-array@^1.1.2:
     gopd "^1.0.1"
     has-tostringtag "^1.0.0"
 
+which-typed-array@^1.1.13, which-typed-array@^1.1.9:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.13.tgz#870cd5be06ddb616f504e7b039c4c24898184d36"
+  integrity sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.4"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.0"
+
 which@^1.2.14:
   version "1.3.1"
   resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz"
@@ -12870,11 +13681,16 @@ wif@^2.0.6:
   dependencies:
     bs58check "<3.0.0"
 
-word-wrap@^1.0.3, word-wrap@^1.2.3:
+word-wrap@^1.0.3:
   version "1.2.3"
   resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
 wordwrap@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz"

From 71039a7b710ed904688f3fea31e59552459b2352 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 27 Oct 2023 14:40:22 +0700
Subject: [PATCH 251/368] fix: new linter

---
 package.json                                  |   1 +
 .../json-schema/MessageInputSwitch.tsx        |   4 +-
 src/lib/components/modal/MoveCodeSnippet.tsx  |   9 +-
 .../components/ModuleLists.tsx                |   5 +-
 .../components/json-schema/SchemaPanel.tsx    |   2 +-
 src/lib/pages/deploy/index.tsx                |   6 +-
 src/lib/pages/instantiate/instantiate.tsx     |   2 +-
 .../migrate/components/MigrateContract.tsx    |   2 +-
 .../tables/pool-assets/PoolAssetsTableRow.tsx |   5 +-
 src/lib/pages/proposal/constants.tsx          |   2 +-
 .../query/components/SchemaQueryResponse.tsx  |   2 +-
 .../tx-message/msg-receipts/CoinComponent.tsx |   2 +-
 src/lib/providers/tx-broadcast.tsx            |   3 +-
 src/lib/types/pool.ts                         |   4 +-
 src/lib/utils/contractState.ts                |  25 +--
 src/lib/utils/proposal.ts                     |   7 +-
 yarn.lock                                     | 169 ++++++++++++++++++
 17 files changed, 213 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index 347cc6f00..4d9f334ae 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@graphql-codegen/client-preset": "^1.1.4",
     "@initia/initia.js": "0.1.11",
     "@initia/initia.proto": "0.1.12",
+    "@interchain-ui/react": "^1.11.8",
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
diff --git a/src/lib/components/json-schema/MessageInputSwitch.tsx b/src/lib/components/json-schema/MessageInputSwitch.tsx
index 2879a7f7e..8cf24eadb 100644
--- a/src/lib/components/json-schema/MessageInputSwitch.tsx
+++ b/src/lib/components/json-schema/MessageInputSwitch.tsx
@@ -21,7 +21,7 @@ export const jsonInputFormKey = MessageTabs.JSON_INPUT as "JSON Input";
 export const yourSchemaInputFormKey = MessageTabs.YOUR_SCHEMA as "Your Schema";
 
 interface MessageInputSwitchProps<
-  T extends Option<MessageTabs | OutputMessageTabs>
+  T extends Option<MessageTabs | OutputMessageTabs>,
 > {
   currentTab: T;
   disabled?: boolean;
@@ -32,7 +32,7 @@ interface MessageInputSwitchProps<
 }
 
 export const MessageInputSwitch = <
-  T extends Option<MessageTabs | OutputMessageTabs>
+  T extends Option<MessageTabs | OutputMessageTabs>,
 >({
   currentTab,
   disabled = false,
diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
index 892f09c01..88a071148 100644
--- a/src/lib/components/modal/MoveCodeSnippet.tsx
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -203,11 +203,10 @@ const msg = new MsgExecute(
     '${moduleAddress}',
     '${moduleName}',
     '${fn.name}'${showTypeArgs ? ",\n\t".concat(formatedTypeArgs) : ""}${
-          showArgs
-            ? (!showTypeArgs ? ",\n\tundefined" : "") +
-              ",\n\t".concat(formatedArgs)
-            : ""
-        }
+      showArgs
+        ? (!showTypeArgs ? ",\n\tundefined" : "") + ",\n\t".concat(formatedArgs)
+        : ""
+    }
 );
 
 const execute = async () => {
diff --git a/src/lib/pages/account-details/components/ModuleLists.tsx b/src/lib/pages/account-details/components/ModuleLists.tsx
index 9707b8159..16f81899d 100644
--- a/src/lib/pages/account-details/components/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/ModuleLists.tsx
@@ -36,8 +36,9 @@ export const ModuleLists = ({
   const filteredModules = useMemo(() => {
     if (!keyword) return modules;
 
-    return modules?.filter((module) =>
-      module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
+    return modules?.filter(
+      (module) =>
+        module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
     );
   }, [keyword, modules]);
 
diff --git a/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx b/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
index 456331091..c42725129 100644
--- a/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
+++ b/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
@@ -1,5 +1,5 @@
-import { UploadSchemaSection } from "lib/components/json-schema";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { UploadSchemaSection } from "lib/components/json-schema";
 import type { Nullable, Option } from "lib/types";
 import { jsonPrettify } from "lib/utils";
 
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index 5ab32c65b..c5353a56a 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -30,7 +30,11 @@ import { AccessConfigPermission } from "lib/types";
 const getAlertContent = (
   enabled: boolean,
   chainPrettyName: string
-): { variant: AlertProps["variant"]; icon: JSX.Element; description: string } =>
+): {
+  variant: AlertProps["variant"];
+  icon: JSX.Element;
+  description: string;
+} =>
   enabled
     ? {
         variant: "success",
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index c026acd04..0e9b2d20b 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -27,6 +27,7 @@ import { defaultAsset, defaultAssetJsonStr } from "lib/components/fund/data";
 import type { AttachFundsState } from "lib/components/fund/types";
 import { AttachFundsType } from "lib/components/fund/types";
 import { CustomIcon } from "lib/components/icon";
+import JsonInput from "lib/components/json/JsonInput";
 import {
   jsonInputFormKey,
   MessageInputContent,
@@ -35,7 +36,6 @@ import {
   SchemaInputSection,
   yourSchemaInputFormKey,
 } from "lib/components/json-schema";
-import JsonInput from "lib/components/json/JsonInput";
 import { CodeSelectSection } from "lib/components/select-code";
 import { Stepper } from "lib/components/stepper";
 import WasmPageContainer from "lib/components/WasmPageContainer";
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index 065a1ed64..16d4413c8 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -15,6 +15,7 @@ import { useMigrateTx } from "lib/app-provider/tx/migrate";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import type { FormStatus } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
+import JsonInput from "lib/components/json/JsonInput";
 import {
   MessageInputContent,
   MessageInputSwitch,
@@ -23,7 +24,6 @@ import {
   jsonInputFormKey,
   yourSchemaInputFormKey,
 } from "lib/components/json-schema";
-import JsonInput from "lib/components/json/JsonInput";
 import { CodeSelectSection } from "lib/components/select-code";
 import { useSchemaStore } from "lib/providers/store";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index f0ed874b9..65d6cbed7 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -35,9 +35,8 @@ export const PoolAssetsTableRow = ({
   const allocation = token.value
     ? formatRatio(divWithDefault(token.value, totalLiquidity, 0) as Ratio<Big>)
     : undefined;
-  const tokenWeight = weight?.find(
-    (w) => w.denom === token.denom
-  )?.percentWeight;
+  const tokenWeight = weight?.find((w) => w.denom === token.denom)
+    ?.percentWeight;
   const scalingFactor = scalingFactors
     ? formatInteger(scalingFactors[liquidityIndex])
     : undefined;
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 940768d11..f75764b78 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -48,7 +48,7 @@ export const SIDEBAR_WHITELIST_DETAILS: (
         </span>
       ),
     },
-  }[permission]);
+  })[permission];
 
 const storeCodePage = "proposal-store-code";
 export const SIDEBAR_STORE_CODE_DETAILS: (
diff --git a/src/lib/pages/query/components/SchemaQueryResponse.tsx b/src/lib/pages/query/components/SchemaQueryResponse.tsx
index 90ea98560..56dfbdff8 100644
--- a/src/lib/pages/query/components/SchemaQueryResponse.tsx
+++ b/src/lib/pages/query/components/SchemaQueryResponse.tsx
@@ -1,8 +1,8 @@
 import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
 import { memo, useEffect, useState } from "react";
 
-import { JsonSchemaForm, OutputMessageTabs } from "lib/components/json-schema";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { JsonSchemaForm, OutputMessageTabs } from "lib/components/json-schema";
 import type { SchemaInfo } from "lib/stores/schema";
 import type { Option } from "lib/types";
 import { dateFromNow, parseJsonStr } from "lib/utils";
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
index ea214ca0d..d9a904814 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
@@ -13,7 +13,7 @@ type AssetObject = { [key: string]: AssetInfo };
 
 interface CoinComponentProps<
   T extends Coin | Coin[],
-  A extends Option<AssetObject> | AssetObject
+  A extends Option<AssetObject> | AssetObject,
 > {
   amount: T;
   assetInfos: A;
diff --git a/src/lib/providers/tx-broadcast.tsx b/src/lib/providers/tx-broadcast.tsx
index 3126ec097..d7df01950 100644
--- a/src/lib/providers/tx-broadcast.tsx
+++ b/src/lib/providers/tx-broadcast.tsx
@@ -10,8 +10,7 @@ import {
 import type { Observable } from "rxjs";
 
 import { TxModal } from "lib/components/tx";
-import type { Nullable } from "lib/types";
-import { type TxResultRendering } from "lib/types";
+import type { Nullable, TxResultRendering } from "lib/types";
 
 interface TxBroadcast {
   broadcast: (nextStream: Observable<TxResultRendering>) => void;
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 83e621e03..14cda1f96 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -26,7 +26,7 @@ export interface PoolWeight<T extends string | Big = Big> {
 }
 
 export interface Pool<
-  TLiquidity extends Coin | TokenWithValue = TokenWithValue
+  TLiquidity extends Coin | TokenWithValue = TokenWithValue,
 > {
   id: number;
   type: PoolType;
@@ -37,7 +37,7 @@ export interface Pool<
 
 export interface PoolDetail<
   TWeight extends string | Big = Big,
-  TLiquidity extends Coin | TokenWithValue = TokenWithValue
+  TLiquidity extends Coin | TokenWithValue = TokenWithValue,
 > extends Pool<TLiquidity> {
   isSupported: boolean;
   blockHeight: Option<number>;
diff --git a/src/lib/utils/contractState.ts b/src/lib/utils/contractState.ts
index e74518f62..b90afad73 100644
--- a/src/lib/utils/contractState.ts
+++ b/src/lib/utils/contractState.ts
@@ -65,16 +65,19 @@ export const parseStateKey = (key: string): DecodedKey => {
 };
 
 export const groupContractStatesByFirstIndex = (states: ContractState[]) =>
-  states.reduce((acc, state) => {
-    // save all states
-    acc.all = acc.all?.concat(state) ?? [state];
+  states.reduce(
+    (acc, state) => {
+      // save all states
+      acc.all = acc.all?.concat(state) ?? [state];
 
-    if (state.key.type === "bucket") {
-      const firstIndexValue = state.key.values[0];
-      acc[firstIndexValue] = acc[firstIndexValue]?.concat(state) ?? [state];
-    } else {
-      acc.others = acc.others?.concat(state) ?? [state];
-    }
+      if (state.key.type === "bucket") {
+        const firstIndexValue = state.key.values[0];
+        acc[firstIndexValue] = acc[firstIndexValue]?.concat(state) ?? [state];
+      } else {
+        acc.others = acc.others?.concat(state) ?? [state];
+      }
 
-    return acc;
-  }, {} as { [key: string]: ContractState[] });
+      return acc;
+    },
+    {} as { [key: string]: ContractState[] }
+  );
diff --git a/src/lib/utils/proposal.ts b/src/lib/utils/proposal.ts
index dacc75786..4f4c03cf1 100644
--- a/src/lib/utils/proposal.ts
+++ b/src/lib/utils/proposal.ts
@@ -20,7 +20,8 @@ export const getAmountToVote = (
 
   return minDepositAmount.lte(initialDeposit.amount)
     ? null
-    : `${d2Formatter(minDepositAmount.minus(initialDeposit.amount), "NaN")} ${
-        minDeposit?.formattedDenom
-      }`;
+    : `${d2Formatter(
+        minDepositAmount.minus(initialDeposit.amount),
+        "NaN"
+      )} ${minDeposit?.formattedDenom}`;
 };
diff --git a/yarn.lock b/yarn.lock
index 129871b89..409389802 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2968,6 +2968,13 @@
   dependencies:
     "@floating-ui/utils" "^0.1.1"
 
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
+
 "@floating-ui/dom@^1.0.1", "@floating-ui/dom@^1.3.0":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
@@ -2976,6 +2983,14 @@
     "@floating-ui/core" "^1.4.1"
     "@floating-ui/utils" "^0.1.1"
 
+"@floating-ui/dom@^1.5.1", "@floating-ui/dom@^1.5.2":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+  dependencies:
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
+
 "@floating-ui/react-dom@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
@@ -2983,6 +2998,13 @@
   dependencies:
     "@floating-ui/dom" "^1.3.0"
 
+"@floating-ui/react-dom@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
+  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
 "@floating-ui/react@^0.25.0":
   version "0.25.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.1.tgz#174bf4322913aa3549aeff27a0755fe10c66686d"
@@ -2992,11 +3014,25 @@
     "@floating-ui/utils" "^0.1.1"
     tabbable "^6.0.1"
 
+"@floating-ui/react@^0.26.0":
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.1.tgz#a790bd3cff5f334d9e87d3ec132a3dc39d937800"
+  integrity sha512-5gyJIJ2tZOPMgmZ/vEcVhdmQiy75b7LPO71sYIiDsxGcZ4hxLuygQWCuT0YXHqppt//Eese+L6t5KnX/gZ3tVA==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.2"
+    "@floating-ui/utils" "^0.1.5"
+    tabbable "^6.0.1"
+
 "@floating-ui/utils@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
   integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
 
+"@floating-ui/utils@^0.1.3", "@floating-ui/utils@^0.1.5":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
 "@formkit/auto-animate@1.0.0-beta.6":
   version "1.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz#ed7f8bc47d774a7764756646e9e3432e8be51cb3"
@@ -3572,6 +3608,37 @@
     type-fest "^4.2.0"
     zustand "^4.3.8"
 
+"@interchain-ui/react@^1.11.8":
+  version "1.11.8"
+  resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.11.8.tgz#9a39924695fc8850cc24965204eb8450209eb4e6"
+  integrity sha512-qEsCa2dhPHPrimXoSo1Z3s7mR/WT6/jzSR/oLnnuXTi+5KpCi7Fc6ThsTR4BgJ05pKHMU+KLHUbcnu68SFPaUQ==
+  dependencies:
+    "@fastify/deepmerge" "^1.3.0"
+    "@floating-ui/dom" "^1.5.2"
+    "@floating-ui/react" "^0.26.0"
+    "@formkit/auto-animate" "1.0.0-beta.6"
+    "@vanilla-extract/css" "^1.12.0"
+    "@vanilla-extract/css-utils" "^0.1.3"
+    "@vanilla-extract/dynamic" "^2.0.3"
+    "@vanilla-extract/recipes" "^0.4.0"
+    "@zag-js/number-input" "^0.26.0"
+    "@zag-js/react" "^0.26.0"
+    animejs "^3.2.1"
+    bignumber.js "^9.1.1"
+    clsx "^1.2.1"
+    copy-to-clipboard "^3.3.3"
+    immer "^9.0.19"
+    lodash "^4.17.21"
+    rainbow-sprinkles "^0.17.0"
+    zustand "^4.3.8"
+
+"@internationalized/number@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.3.0.tgz#92233d130a0591085f93be86a9e6356cfa0e2de2"
+  integrity sha512-PuxgnKE5NJMOGKUcX1QROo8jq7sW7UWLrL5B6Rfe8BdWgU/be04cVvLyCeALD46vvbAv3d1mUvyHav/Q9a237g==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
 "@iov/crypto@2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@iov/crypto/-/crypto-2.1.0.tgz#10e91b6692e154958c11626dfd096a80e8a481a4"
@@ -4729,6 +4796,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.3.tgz#98c6da1e196f5f08f977658b80d6bd941b5f294f"
+  integrity sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==
+  dependencies:
+    tslib "^2.4.0"
+
 "@tanstack/query-core@4.15.1":
   version "4.15.1"
   resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.15.1.tgz"
@@ -5469,6 +5543,11 @@
   resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.15.0.tgz#c32b3bf2050f81ed9eace140542db43a565e3454"
   integrity sha512-+lmu/JVQ6Q5M9Tmbt1sXVkp3CtP10JYOo/PU2L6w6mXpwazT5FUpsuorrBrBM9rhWOnxI7CVvFy7r/rxReDWgg==
 
+"@zag-js/anatomy@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.26.0.tgz#74b79740ed12cfb90c9208b62a5aa1992a5273ca"
+  integrity sha512-B0u3uU++3TXqgklH0fwPqb12y+kMSTKBD40S5+HFz/mmaxolNaJzT3QfkT4NfD+9Q3GdlHA4uQqsxhi6SfSb5w==
+
 "@zag-js/aria-hidden@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/aria-hidden/-/aria-hidden-0.15.0.tgz#97ef569a3a149df6ab89c9de08595729fe4f406c"
@@ -5484,6 +5563,14 @@
     "@zag-js/store" "0.15.0"
     klona "2.0.6"
 
+"@zag-js/core@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/core/-/core-0.26.0.tgz#c1ee370d5d4eba1b4971aa2fa5e69f443f634e7e"
+  integrity sha512-pwVFL1hTZ7w86NEA1Xs9Brq9OmTkW94JTGsBGNEMuH6LVuGGF/fike/nkJP/G/DpvdIrkwI5dKLr7P/nQ55DbQ==
+  dependencies:
+    "@zag-js/store" "0.26.0"
+    klona "2.0.6"
+
 "@zag-js/dialog@^0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/dialog/-/dialog-0.15.0.tgz#92d353a2f5b870cdbbf83a7f7a46ac12ea51e94d"
@@ -5517,11 +5604,24 @@
     "@zag-js/text-selection" "0.15.0"
     "@zag-js/types" "0.15.0"
 
+"@zag-js/dom-event@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/dom-event/-/dom-event-0.26.0.tgz#2c33fcb7fe83a553c84e793484a9fdbba5a1a167"
+  integrity sha512-Rc+ecXYDLG7wFPWVMS5XPXIQVqPUo0jXjMG5Yj7USkSBm5bg3bGsrJ2WyDpkxvvZpYmbXO6OaSyWdclrQNEcHg==
+  dependencies:
+    "@zag-js/text-selection" "0.26.0"
+    "@zag-js/types" "0.26.0"
+
 "@zag-js/dom-query@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.15.0.tgz#48954851575f0f11127d48cf271ce323bb13f1f0"
   integrity sha512-gxm7GefQ+ggJE+iN0/kHgbM90DPd4RZYoQC6TQOWy3nxij69IuoSI6goMakJ33hUckszWm9z86Sqe1U1puzssQ==
 
+"@zag-js/dom-query@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.26.0.tgz#2c1f9996ca5aac9347dca07fb1a6d68d90d152bd"
+  integrity sha512-M28nfCTl+Vc23OnttM3jv5Zn6pq/9qNkN8NQ9rCsemOALJvNOQeu8MFv7d6Jhgg3f8RqEB6EN0rS64UbgBovRg==
+
 "@zag-js/element-size@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@zag-js/element-size/-/element-size-0.1.0.tgz#dfdb3f66a70328d0c3149aae29b8f99c10590c22"
@@ -5539,6 +5639,13 @@
   dependencies:
     "@zag-js/mutation-observer" "0.15.0"
 
+"@zag-js/form-utils@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/form-utils/-/form-utils-0.26.0.tgz#d81d08d9d54d043625464f2d0498b561cd6d6001"
+  integrity sha512-ylvONwa9HkVOdRzI+NsfNCMduFbmukvBjlPv7PEtTuZznUasFEDxLdIAp6P6hlYIPGgZXl05IfyTPSLAwYPn9g==
+  dependencies:
+    "@zag-js/mutation-observer" "0.26.0"
+
 "@zag-js/interact-outside@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/interact-outside/-/interact-outside-0.15.0.tgz#e7fb88d20ce869091687ddd31ff1aaa82d1218d8"
@@ -5554,6 +5661,11 @@
   resolved "https://registry.yarnpkg.com/@zag-js/mutation-observer/-/mutation-observer-0.15.0.tgz#3848f7d9c9a39a7c7d86ed49cc6c5a4e0ffdcf85"
   integrity sha512-7e2d1RYA0nuKOAJknbYBw6XfywF5eFC/4oel/nINHmS14JtjZnjMq/8z/kdrMMJnlQHou+wnaoskOLv+4Sv7pw==
 
+"@zag-js/mutation-observer@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/mutation-observer/-/mutation-observer-0.26.0.tgz#0e201b2ba06de3e75001069133a9e1360210f1ed"
+  integrity sha512-JDtHyVLsVCxVscKLsMSxQ0Hjg2xmTmWL5C+272mHkr0r2JS2x6Z1dMn5x0capSz9vXUbHUgoHz9PSJXHkRJwAA==
+
 "@zag-js/number-input@^0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/number-input/-/number-input-0.15.0.tgz#c1f0ebc405ed9bfc22ac3d4fedc0cab1d585c388"
@@ -5569,11 +5681,32 @@
     "@zag-js/types" "0.15.0"
     "@zag-js/utils" "0.15.0"
 
+"@zag-js/number-input@^0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/number-input/-/number-input-0.26.0.tgz#a9443efbe472cee2e8abc23afb7a9968da723360"
+  integrity sha512-1KwIeCQsgnYOUzdAUMmaqiOwG+YOJIYUvmBhgNQld2IhkdqykXTIM9cZoQyNsjsYnzXhe7y6IMskUx/GlvzlCA==
+  dependencies:
+    "@internationalized/number" "^3.3.0"
+    "@zag-js/anatomy" "0.26.0"
+    "@zag-js/core" "0.26.0"
+    "@zag-js/dom-event" "0.26.0"
+    "@zag-js/dom-query" "0.26.0"
+    "@zag-js/form-utils" "0.26.0"
+    "@zag-js/mutation-observer" "0.26.0"
+    "@zag-js/number-utils" "0.26.0"
+    "@zag-js/types" "0.26.0"
+    "@zag-js/utils" "0.26.0"
+
 "@zag-js/number-utils@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/number-utils/-/number-utils-0.15.0.tgz#06d19e2145e183acebea272412fdb5780c7cbd81"
   integrity sha512-ebDPCv4UNl5qAe+x55NSUK5gMLbhlqh8mVVq6EnPUqPfbglcjUgNzht78TZ3d+0rdfgC3F8SI3pWaZk9DY4O1Q==
 
+"@zag-js/number-utils@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/number-utils/-/number-utils-0.26.0.tgz#82ad003934e434c634f31606fff866895e008433"
+  integrity sha512-XjsDVecCn/svNx/jXObD2utGFkNc+x93bRD/CPjGF40sRWka41xIpobOgLux2v8wWBM/FwMcU1W53eenTaCGkg==
+
 "@zag-js/react@^0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.15.0.tgz#516b92405b4536cd0605a9c702d2fe78ca18f1bc"
@@ -5584,6 +5717,16 @@
     "@zag-js/types" "0.15.0"
     proxy-compare "2.5.1"
 
+"@zag-js/react@^0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.26.0.tgz#7c55d1b4966f8a7b5bac53303481d9f92e73c922"
+  integrity sha512-PEZm+qRhL162PFbKwMNpnULsN6OGmqqp0cT31T2lMpGUY98bPMy9e4iWyqvrwMroJyr67Cak3/GZ3l5qMEJNNA==
+  dependencies:
+    "@zag-js/core" "0.26.0"
+    "@zag-js/store" "0.26.0"
+    "@zag-js/types" "0.26.0"
+    proxy-compare "2.5.1"
+
 "@zag-js/remove-scroll@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/remove-scroll/-/remove-scroll-0.15.0.tgz#e466557985d06dec79c489993d433ffd9b136de7"
@@ -5598,6 +5741,13 @@
   dependencies:
     proxy-compare "2.5.1"
 
+"@zag-js/store@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/store/-/store-0.26.0.tgz#4be9becc00ce4404436d5927015bdbae464371be"
+  integrity sha512-NcIWqP5RE7QU9zHi4ixl6CVX0Ff56Q8tAikwWPKAQOin/XctI1rHGNWI0/uUa+9Ib3Wsc2M83I6kTLrWstkZQQ==
+  dependencies:
+    proxy-compare "2.5.1"
+
 "@zag-js/tabbable@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/tabbable/-/tabbable-0.15.0.tgz#3303da58bb8f590e1ebf2a709c7567be15d212c9"
@@ -5612,6 +5762,13 @@
   dependencies:
     "@zag-js/dom-query" "0.15.0"
 
+"@zag-js/text-selection@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/text-selection/-/text-selection-0.26.0.tgz#a1f9105f1135daa32b9d236359a7d6754aefdbaf"
+  integrity sha512-BTlb/g8kj6Fs8FZdldLk2kJ6Za5qkihp0GtwjXBTtU6NSFkh96MPMyhCXf+WrFyet4Sbna7JyeTbfGLbomPxYg==
+  dependencies:
+    "@zag-js/dom-query" "0.26.0"
+
 "@zag-js/types@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.15.0.tgz#22fb42c125deb786f00ad984d111236bc9f2002f"
@@ -5619,11 +5776,23 @@
   dependencies:
     csstype "3.1.2"
 
+"@zag-js/types@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.26.0.tgz#ee5901ea6bee0daac8dbd024a76c5fff976f0c78"
+  integrity sha512-pQWK9dngn9zYCIzEbuGG9PboCYd1CaTWgEX3+KGFYTqOEcunPijx1MW3LZNmLaqYZLNd8yCRU5IKlno/cRBKVA==
+  dependencies:
+    csstype "3.1.2"
+
 "@zag-js/utils@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.15.0.tgz#65e2df9e6932211fb6f927e6667d35e5b4b593b7"
   integrity sha512-aNjydiheTKMoIo1wASk3XgN3mbcCiCk2zAiUyldU4JCw9xWevMk5aSszW2v3A0yms6z+qhRb77Z50fejG7OlSA==
 
+"@zag-js/utils@0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.26.0.tgz#a5579bc18706ea900b6fe59f01a41dab43b3b20b"
+  integrity sha512-TKg0l0FNIRZS2ocU5KPh5oXHljiaWJ1S8vsbTutCklurBWsOU1qVPoawPKBoNCSWEXdTqmvwGwD8smqV6zjnOQ==
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz"

From aff8bdcb5eb0f8f378cddd7b62ad83dc9b077990 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 27 Oct 2023 14:56:55 +0700
Subject: [PATCH 252/368] fix: misaligned in unsupported assets modal

---
 src/lib/components/modal/UnsupportedTokensModal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index c69f80a68..ef6cd3a96 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -72,7 +72,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
       role="group"
       _hover={{
         "& .info": {
-          display: "flex",
+          visibility: "visible",
         },
       }}
     >
@@ -82,12 +82,12 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
         w="full"
         alignItems="center"
       >
-        <Flex gap={1}>
+        <Flex gap={1} alignItems="center">
           <Text variant="body2" className="ellipsis">
             {tokenLabel}
           </Text>
           <Tooltip label={`Token ID: ${balance.id}`} maxW="500px">
-            <Flex cursor="pointer" className="info" display="none">
+            <Flex cursor="pointer" className="info" visibility="hidden">
               <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
             </Flex>
           </Tooltip>
@@ -95,8 +95,8 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
             type="unsupported_asset"
             value={balance.id}
             copyLabel="Token ID Copied!"
+            ml={0}
             display="none"
-            ml={1}
             amptrackSection="unsupported_token_copy"
           />
         </Flex>

From 230604fdcd751d39cd016d40b4fe2636f3f847e4 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 27 Oct 2023 15:09:55 +0700
Subject: [PATCH 253/368] fix: tooltip, overlay code btn

---
 src/lib/components/modal/MoveCodeSnippet.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
index 892f09c01..44df7c28c 100644
--- a/src/lib/components/modal/MoveCodeSnippet.tsx
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -14,6 +14,7 @@ import {
   TabPanel,
   Heading,
   Box,
+  Flex,
 } from "@chakra-ui/react";
 import { useMemo } from "react";
 import AceEditor from "react-ace";
@@ -119,7 +120,7 @@ const MoveCodeSnippet = ({
       {
         name: "Curl",
         mode: "sh",
-        snippet: `curl '${lcdEndpoint}/initia/move/v1/accounts/${moduleAddress}/modules/${moduleName}/view_functions/${fn.name}' \\
+        snippet: `\n\ncurl '${lcdEndpoint}/initia/move/v1/accounts/${moduleAddress}/modules/${moduleName}/view_functions/${fn.name}' \\
 --data-raw '${formatedAbiData}'`,
       },
       {
@@ -171,8 +172,8 @@ viewModule(moduleAddress, moduleName, fnName);`,
         snippet: `${daemonName} keys add --recover celatone\n
 export CHAIN_ID='${currentChainId}'\n
 export RPC_URL='${rpcEndpoint}'\n
-export MODULE_ADDRESS ='${moduleAddress}'\n
-export MODULE_NAME = '${moduleName}'\n
+export MODULE_ADDRESS='${moduleAddress}'\n
+export MODULE_NAME='${moduleName}'\n
 export MODULE_FN='${fn.name}'\n
 ${daemonName} tx move execute $MODULE_ADDRESS \\
     $MODULE_NAME \\
@@ -284,10 +285,13 @@ execute();
                         }}
                       />
                       <Box position="absolute" top={4} right={4}>
-                        <CopyButton
-                          value={item.snippet}
-                          amptrackSection="code_snippet"
-                        />
+                        {/* Workaround for centering Tooltip placement */}
+                        <Flex>
+                          <CopyButton
+                            value={item.snippet}
+                            amptrackSection="code_snippet"
+                          />
+                        </Flex>
                       </Box>
                     </Box>
                   </TabPanel>

From b1411d0e1dffb363a62efeb02def6cff0303a3e6 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 27 Oct 2023 15:33:20 +0700
Subject: [PATCH 254/368] chore: fix cli

---
 src/lib/components/modal/MoveCodeSnippet.tsx | 73 ++++++++++++--------
 1 file changed, 46 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
index 44df7c28c..e8a6c65f7 100644
--- a/src/lib/components/modal/MoveCodeSnippet.tsx
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -31,7 +31,7 @@ import {
 } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import type { AbiFormData, ExposedFunction, MoveAccountAddr } from "lib/types";
-import { serializeAbiData } from "lib/utils";
+import { getArgType, serializeAbiData } from "lib/utils";
 
 import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-sh";
@@ -58,6 +58,7 @@ interface FormatedData {
   formatedAbiData: string;
   typeArgsFlags: string;
   argsFlags: string;
+  isHiddenCLI: boolean;
 }
 
 const MoveCodeSnippet = ({
@@ -92,10 +93,17 @@ const MoveCodeSnippet = ({
     formatedTypeArgs,
     typeArgsFlags,
     argsFlags,
+    isHiddenCLI,
   } = useMemo<FormatedData>(() => {
     const serializedAbiData = serializeAbiData(fn, abiData);
     const displayTypeArgs = serializedAbiData.typeArgs.length > 0;
     const displayArgs = serializedAbiData.args.length > 0;
+    const argTypes = fn.params.map((param) => getArgType(param));
+
+    const argsWithTypes = Object.values(abiData.args).map((arg, index) => {
+      const argType = argTypes[index];
+      return `${argType}:${arg}`;
+    });
 
     return {
       showTypeArgs: displayTypeArgs,
@@ -106,15 +114,23 @@ const MoveCodeSnippet = ({
       typeArgsFlags: displayTypeArgs
         ? `\n\t--type-args '${serializedAbiData.typeArgs.join(" ")}' \\`
         : "",
-      argsFlags: displayArgs
-        ? `\n\t--args '${serializedAbiData.args.join(" ")}' \\`
-        : "",
+      argsFlags: displayArgs ? `\n\t--args ${argsWithTypes.join(" ")} \\` : "",
+      isHiddenCLI: argTypes.some(
+        (argType) =>
+          argType === "vector" ||
+          argType === "option" ||
+          argType === "object" ||
+          argType === "fixed_point32" ||
+          argType === "fixed_point64" ||
+          argType === "decimal128" ||
+          argType === "decimal256"
+      ),
     };
   }, [abiData, fn]);
 
   const codeSnippets: Record<
     string,
-    { name: string; mode: string; snippet: string }[]
+    { name: string; mode: string; snippet: string; isHidden?: boolean }[]
   > = {
     view: [
       {
@@ -126,6 +142,7 @@ const MoveCodeSnippet = ({
       {
         name: "CLI",
         mode: "sh",
+        isHidden: isHiddenCLI,
         snippet: `export CHAIN_ID='${currentChainId}'\n
 export MODULE_ADDRESS='${moduleAddress}'\n
 export MODULE_NAME='${moduleName}'\n
@@ -166,25 +183,6 @@ viewModule(moduleAddress, moduleName, fnName);`,
       },
     ],
     execute: [
-      {
-        name: "CLI",
-        mode: "sh",
-        snippet: `${daemonName} keys add --recover celatone\n
-export CHAIN_ID='${currentChainId}'\n
-export RPC_URL='${rpcEndpoint}'\n
-export MODULE_ADDRESS='${moduleAddress}'\n
-export MODULE_NAME='${moduleName}'\n
-export MODULE_FN='${fn.name}'\n
-${daemonName} tx move execute $MODULE_ADDRESS \\
-    $MODULE_NAME \\
-    $MODULE_FN \\${typeArgsFlags}${argsFlags}
-    --from celatone \\
-    --chain-id $CHAIN_ID \\
-    --node $RPC_URL \\
-    --gas auto \\
-    --gas-prices ${gasPriceStr} \\
-    --gas-adjustment 1.5`,
-      },
       {
         name: "InitiaJS",
         mode: "javascript",
@@ -219,8 +217,27 @@ const execute = async () => {
     const broadcastResult = await lcd.tx.broadcast(signedTx);
     console.log(broadcastResult);
 };
-execute();
-        `,
+execute();`,
+      },
+      {
+        name: "CLI",
+        mode: "sh",
+        isHidden: isHiddenCLI,
+        snippet: `${daemonName} keys add --recover celatone\n
+export CHAIN_ID='${currentChainId}'\n
+export RPC_URL='${rpcEndpoint}'\n
+export MODULE_ADDRESS='${moduleAddress}'\n
+export MODULE_NAME='${moduleName}'\n
+export MODULE_FN='${fn.name}'\n
+${daemonName} tx move execute $MODULE_ADDRESS \\
+    $MODULE_NAME \\
+    $MODULE_FN \\${typeArgsFlags}${argsFlags}
+    --from celatone \\
+    --chain-id $CHAIN_ID \\
+    --node $RPC_URL \\
+    --gas auto \\
+    --gas-prices ${gasPriceStr} \\
+    --gas-adjustment 1.5`,
       },
     ],
   };
@@ -255,7 +272,9 @@ execute();
             <Tabs>
               <TabList borderBottom="1px solid" borderColor="gray.700">
                 {codeSnippets[type].map((item) => (
-                  <CustomTab key={`menu-${item.name}`}>{item.name}</CustomTab>
+                  <CustomTab key={`menu-${item.name}`} hidden={item.isHidden}>
+                    {item.name}
+                  </CustomTab>
                 ))}
               </TabList>
               <TabPanels>

From e49bd1ff33857f81e1d63ba18058ceb4d87d180b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 27 Oct 2023 15:49:51 +0700
Subject: [PATCH 255/368] feat: submit button

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/button/SubmitButton.tsx    | 51 +++++++++++++++++++
 src/lib/components/button/index.ts            |  1 +
 .../pages/execute/components/JsonExecute.tsx  | 38 +++-----------
 .../interact/component/form/ExecuteArea.tsx   | 35 +++----------
 .../interact/component/form/ViewArea.tsx      | 34 +++----------
 src/lib/pages/query/components/JsonQuery.tsx  | 36 +++----------
 7 files changed, 81 insertions(+), 115 deletions(-)
 create mode 100644 src/lib/components/button/SubmitButton.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29c0e4f7b..5daf34f58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#593](https://github.com/alleslabs/celatone-frontend/pull/593) Refactor submit button to a common component
 - [#574](https://github.com/alleslabs/celatone-frontend/pull/574) Add min height to wasm page container to properly align footer
 - [#569](https://github.com/alleslabs/celatone-frontend/pull/569) Add move config to dev shortcuts in homepage
 - [#559](https://github.com/alleslabs/celatone-frontend/pull/559) Restructure and refactor responsive tables
diff --git a/src/lib/components/button/SubmitButton.tsx b/src/lib/components/button/SubmitButton.tsx
new file mode 100644
index 000000000..e6a090625
--- /dev/null
+++ b/src/lib/components/button/SubmitButton.tsx
@@ -0,0 +1,51 @@
+import { Button } from "@chakra-ui/react";
+import { useEffect } from "react";
+
+import { CustomIcon } from "../icon";
+import { useIsMac, useMobile } from "lib/app-provider";
+
+interface SubmitButtonProps {
+  text: string;
+  isLoading: boolean;
+  onSubmit: () => void;
+  isDisabled: boolean;
+}
+
+export const SubmitButton = ({
+  text,
+  isLoading,
+  onSubmit,
+  isDisabled,
+}: SubmitButtonProps) => {
+  const isMobile = useMobile();
+  const isMac = useIsMac();
+
+  useEffect(() => {
+    const keydownHandler = (e: KeyboardEvent) => {
+      // TODO: problem with safari if focusing in the textarea
+      const specialKey = isMac ? e.metaKey : e.ctrlKey;
+      if (!isDisabled && specialKey && e.key === "Enter") {
+        onSubmit();
+      }
+    };
+    document.addEventListener("keydown", keydownHandler);
+    return () => {
+      document.removeEventListener("keydown", keydownHandler);
+    };
+  });
+
+  return (
+    <Button
+      variant="primary"
+      fontSize="14px"
+      p="6px 16px"
+      onClick={onSubmit}
+      isDisabled={isDisabled}
+      leftIcon={<CustomIcon name="execute" />}
+      isLoading={isLoading}
+      sx={{ pointerEvents: isLoading && "none" }}
+    >
+      {text} {!isMobile && `(${isMac ? "⌘" : "Ctrl"} + Enter)`}
+    </Button>
+  );
+};
diff --git a/src/lib/components/button/index.ts b/src/lib/components/button/index.ts
index 70bdd03c3..5864fb344 100644
--- a/src/lib/components/button/index.ts
+++ b/src/lib/components/button/index.ts
@@ -7,3 +7,4 @@ export * from "./ResendButton";
 export * from "./ShowMoreButton";
 export * from "./CustomIconButton";
 export * from "./FaucetButton";
+export * from "./SubmitButton";
diff --git a/src/lib/pages/execute/components/JsonExecute.tsx b/src/lib/pages/execute/components/JsonExecute.tsx
index 1fb86663c..5d4bbac3f 100644
--- a/src/lib/pages/execute/components/JsonExecute.tsx
+++ b/src/lib/pages/execute/components/JsonExecute.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Button } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -9,11 +9,10 @@ import {
   useFabricateFee,
   useExecuteContractTx,
   useCurrentChain,
-  useMobile,
-  useIsMac,
 } from "lib/app-provider";
 import { useAttachFunds } from "lib/app-provider/hooks/useAttachFunds";
 import { useSimulateFeeQuery } from "lib/app-provider/queries";
+import { SubmitButton } from "lib/components/button";
 import { CopyButton } from "lib/components/copy";
 import { ErrorMessageRender } from "lib/components/ErrorMessageRender";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -26,7 +25,6 @@ import {
 } from "lib/components/fund/data";
 import type { AttachFundsState } from "lib/components/fund/types";
 import { AttachFundsType } from "lib/components/fund/types";
-import { CustomIcon } from "lib/components/icon";
 import JsonInput from "lib/components/json/JsonInput";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import { useExecuteCmds } from "lib/hooks";
@@ -66,8 +64,6 @@ export const JsonExecute = ({
   // ------------------------------------------//
   // --------------DEPENDENCIES----------------//
   // ------------------------------------------//
-  const isMobile = useMobile();
-  const isMac = useIsMac();
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const executeTx = useExecuteContractTx();
@@ -243,20 +239,6 @@ export const JsonExecute = ({
   ]);
 
   const isButtonDisabled = !enableExecute || !fee || isFetching;
-  useEffect(() => {
-    const keydownHandler = (e: KeyboardEvent) => {
-      // TODO: problem with safari if focusing in the textarea
-      const specialKey = isMac ? e.metaKey : e.ctrlKey;
-      if (!isButtonDisabled && specialKey && e.key === "Enter") {
-        proceed();
-      }
-    };
-    document.addEventListener("keydown", keydownHandler);
-    return () => {
-      document.removeEventListener("keydown", keydownHandler);
-    };
-  });
-
   return (
     <>
       {cmdsFetching && <LoadingOverlay />}
@@ -296,18 +278,12 @@ export const JsonExecute = ({
             Transaction Fee:{" "}
             <EstimatedFeeRender estimatedFee={fee} loading={isFetching} />
           </Flex>
-          <Button
-            variant="primary"
-            fontSize="14px"
-            p="6px 16px"
-            onClick={proceed}
-            isDisabled={isButtonDisabled}
-            leftIcon={<CustomIcon name="execute" />}
+          <SubmitButton
+            text="Execute"
             isLoading={processing}
-            sx={{ pointerEvents: processing && "none" }}
-          >
-            Execute {!isMobile && ` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
-          </Button>
+            onSubmit={proceed}
+            isDisabled={isButtonDisabled}
+          />
         </Flex>
       </Flex>
     </>
diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index 7a31b7016..3551551ba 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -1,4 +1,4 @@
-import { Alert, AlertDescription, Button, Flex } from "@chakra-ui/react";
+import { Alert, AlertDescription, Flex } from "@chakra-ui/react";
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import type { StdFee } from "@cosmjs/stargate";
 import { MsgExecute as MsgExecuteModule } from "@initia/initia.js";
@@ -10,9 +10,9 @@ import {
   useSimulateFeeQuery,
   useExecuteModuleTx,
   useCurrentChain,
-  useIsMac,
 } from "lib/app-provider";
 import { AbiForm } from "lib/components/abi";
+import { SubmitButton } from "lib/components/button";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { CustomIcon } from "lib/components/icon";
@@ -44,7 +44,6 @@ export const ExecuteArea = ({
       ? fn.params.slice(1)
       : fn.params;
 
-  const isMac = useIsMac();
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const executeModuleTx = useExecuteModuleTx();
@@ -133,20 +132,6 @@ export const ExecuteArea = ({
   }, [address, data, enableExecute, executeFn, moduleAddress, moduleName]);
 
   const isButtonDisabled = !enableExecute || !fee || isFetching;
-  useEffect(() => {
-    const keydownHandler = (e: KeyboardEvent) => {
-      // TODO: problem with safari if focusing in the textarea
-      const specialKey = isMac ? e.metaKey : e.ctrlKey;
-      if (!isButtonDisabled && specialKey && e.key === "Enter") {
-        proceed();
-      }
-    };
-    document.addEventListener("keydown", keydownHandler);
-    return () => {
-      document.removeEventListener("keydown", keydownHandler);
-    };
-  });
-
   return (
     <Flex direction="column">
       {fn.is_entry ? (
@@ -195,18 +180,12 @@ export const ExecuteArea = ({
             Transaction Fee:{" "}
             <EstimatedFeeRender estimatedFee={fee} loading={isFetching} />
           </Flex>
-          <Button
-            variant="primary"
-            fontSize="14px"
-            p="6px 16px"
-            onClick={proceed}
-            isDisabled={isButtonDisabled}
-            leftIcon={<CustomIcon name="execute" />}
+          <SubmitButton
+            text="Execute"
             isLoading={processing}
-            sx={{ pointerEvents: processing && "none" }}
-          >
-            Execute{` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
-          </Button>
+            onSubmit={proceed}
+            isDisabled={isButtonDisabled}
+          />
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 18467b4cc..66a81fe59 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -1,7 +1,6 @@
 import {
   Alert,
   AlertDescription,
-  Button,
   Flex,
   Grid,
   GridItem,
@@ -10,10 +9,10 @@ import {
   Text,
 } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
-import { useIsMac } from "lib/app-provider";
 import { AbiForm } from "lib/components/abi";
+import { SubmitButton } from "lib/components/button";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import { DEFAULT_RPC_ERROR } from "lib/data";
@@ -43,7 +42,6 @@ export const ViewArea = ({
   moduleName: string;
   fn: ExposedFunction;
 }) => {
-  const isMac = useIsMac();
   const [abiData, setAbiData] = useState<AbiFormData>({
     typeArgs: getAbiInitialData(fn.generic_type_params.length),
     args: getAbiInitialData(fn.params.length),
@@ -74,18 +72,6 @@ export const ViewArea = ({
   const isButtonDisabled = Boolean(
     Object.values(abiData.typeArgs).some((v) => !v.length) || !!abiErrors.length
   );
-  useEffect(() => {
-    const keydownHandler = (e: KeyboardEvent) => {
-      // TODO: problem with safari if focusing in the textarea
-      const specialKey = isMac ? e.metaKey : e.ctrlKey;
-      if (!isButtonDisabled && specialKey && e.key === "Enter") handleQuery();
-    };
-    document.addEventListener("keydown", keydownHandler);
-    return () => {
-      document.removeEventListener("keydown", keydownHandler);
-    };
-  });
-
   return (
     <Grid templateColumns="1fr 1fr" gap={6}>
       <GridItem>
@@ -103,18 +89,12 @@ export const ViewArea = ({
             abiData={abiData}
             type="view"
           />
-          <Button
-            variant="primary"
-            fontSize="14px"
-            p="6px 16px"
-            size={{ base: "sm", md: "md" }}
-            onClick={handleQuery}
-            isDisabled={isButtonDisabled}
+          <SubmitButton
+            text="View"
             isLoading={isLoading}
-            leftIcon={<CustomIcon name="query" />}
-          >
-            View{` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
-          </Button>
+            onSubmit={handleQuery}
+            isDisabled={isButtonDisabled}
+          />
         </Flex>
       </GridItem>
       <GridItem>
diff --git a/src/lib/pages/query/components/JsonQuery.tsx b/src/lib/pages/query/components/JsonQuery.tsx
index 2e68b10e4..5f90618d8 100644
--- a/src/lib/pages/query/components/JsonQuery.tsx
+++ b/src/lib/pages/query/components/JsonQuery.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex, Button, Spacer, Box, Text } from "@chakra-ui/react";
+import { ButtonGroup, Flex, Spacer, Box, Text } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
@@ -9,12 +9,10 @@ import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
   useCurrentChain,
-  useIsMac,
-  useMobile,
 } from "lib/app-provider";
+import { SubmitButton } from "lib/components/button";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
-import { CustomIcon } from "lib/components/icon";
 import JsonInput from "lib/components/json/JsonInput";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
@@ -45,8 +43,6 @@ interface JsonQueryProps {
 
 export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
   const { track, trackAction } = useTrack();
-  const isMobile = useMobile();
-  const isMac = useIsMac();
   const { isFetching: cmdsFetching, queryCmds } = useQueryCmds(contractAddress);
   const lcdEndpoint = useBaseApiRoute("rest");
   const { addActivity } = useContractStore();
@@ -94,18 +90,6 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
   };
 
   const isButtonDisabled = jsonValidate(msg) !== null;
-  useEffect(() => {
-    const keydownHandler = (e: KeyboardEvent) => {
-      // TODO: problem with safari if focusing in the textarea
-      const specialKey = isMac ? e.metaKey : e.ctrlKey;
-      if (!isButtonDisabled && specialKey && e.key === "Enter") handleQuery();
-    };
-    document.addEventListener("keydown", keydownHandler);
-    return () => {
-      document.removeEventListener("keydown", keydownHandler);
-    };
-  });
-
   return (
     <>
       {cmdsFetching && <LoadingOverlay />}
@@ -162,18 +146,12 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
                 message={msg}
               />
             </Flex>
-            <Button
-              variant="primary"
-              fontSize="14px"
-              p="6px 16px"
-              size={{ base: "sm", md: "md" }}
-              onClick={handleQuery}
-              isDisabled={isButtonDisabled}
+            <SubmitButton
+              text="Query"
               isLoading={queryFetching || queryRefetching}
-              leftIcon={<CustomIcon name="query" />}
-            >
-              Query{!isMobile && ` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
-            </Button>
+              onSubmit={handleQuery}
+              isDisabled={isButtonDisabled}
+            />
           </Flex>
         </Box>
         <Spacer

From 1e305d155181ea68214c52ebfc05593368872e58 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 27 Oct 2023 16:05:28 +0700
Subject: [PATCH 256/368] fix: lp assets filtering and delegation ui/ux
 improvement

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/token/TokenCard.tsx        |  8 +--
 src/lib/components/token/TokenComposition.tsx |  4 +-
 src/lib/components/token/TokenImageRender.tsx |  2 +-
 .../components/delegations/index.tsx          | 10 +++-
 .../components/tables/bonded/TokensCell.tsx   |  1 +
 .../redelegation/RedelegationTableRow.tsx     |  1 +
 src/lib/pages/account-details/data.ts         | 51 +++++++++++--------
 src/lib/services/poolService.ts               | 38 +++++++-------
 src/lib/types/asset.ts                        |  4 +-
 src/lib/types/currency/balance.ts             |  2 +-
 src/lib/utils/assetValue.ts                   | 35 +++++++++----
 12 files changed, 97 insertions(+), 60 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e141d4677..28e1fd485 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -134,6 +134,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#593](https://github.com/alleslabs/celatone-frontend/pull/593) LP assets filtering and delegation ui/ux improvement
 - [#584](https://github.com/alleslabs/celatone-frontend/pull/584) Throw an error when tx failed on postTx
 - [#555](https://github.com/alleslabs/celatone-frontend/pull/555) Rewrite publish status resolver into an effect
 - [#557](https://github.com/alleslabs/celatone-frontend/pull/557) Fix see module ux writing and policy modal
diff --git a/src/lib/components/token/TokenCard.tsx b/src/lib/components/token/TokenCard.tsx
index 5d191f6fa..7e6faa13f 100644
--- a/src/lib/components/token/TokenCard.tsx
+++ b/src/lib/components/token/TokenCard.tsx
@@ -23,7 +23,7 @@ export const TokenCard = ({
   ...cardProps
 }: TokenCardProps) => {
   const { symbol, price, amount, precision, id } = userBalance.balance;
-
+  const priceExist = price !== undefined;
   return (
     <Tooltip label={`Token ID: ${id}`} maxW="240px" textAlign="center">
       <Flex
@@ -57,10 +57,10 @@ export const TokenCard = ({
             {symbol}
           </Text>
           <Badge variant="gray" ml={2}>
-            {price ? formatPrice(price as USD<number>) : "N/A"}
+            {priceExist ? formatPrice(price as USD<number>) : "N/A"}
           </Badge>
           <Copier
-            type={price ? "supported_asset" : "unsupported_asset"}
+            type={priceExist ? "supported_asset" : "unsupported_asset"}
             value={id}
             copyLabel="Token ID Copied!"
             display={{ base: "flex", md: "none" }}
@@ -74,7 +74,7 @@ export const TokenCard = ({
             {formatUTokenWithPrecision(amount as U<Token>, precision, false)}
           </Text>
           <Text variant="body3" color="text.dark">
-            {price
+            {priceExist
               ? `(${formatPrice(
                   calAssetValueWithPrecision(userBalance.balance)
                 )})`
diff --git a/src/lib/components/token/TokenComposition.tsx b/src/lib/components/token/TokenComposition.tsx
index 344d464e2..b73453591 100644
--- a/src/lib/components/token/TokenComposition.tsx
+++ b/src/lib/components/token/TokenComposition.tsx
@@ -16,8 +16,8 @@ export const TokenComposition = ({
   ...flexProps
 }: TokenCompositionProps) => (
   <Flex direction="column" {...flexProps}>
-    {token.isLpToken ? (
-      <Flex>
+    {token.isLPToken ? (
+      <Flex wrap="wrap">
         <Text variant="body2">
           <Text as="span" mr={1} fontWeight={700}>
             {token.lpDetails.coinA.amount}
diff --git a/src/lib/components/token/TokenImageRender.tsx b/src/lib/components/token/TokenImageRender.tsx
index b51b732fd..115cef067 100644
--- a/src/lib/components/token/TokenImageRender.tsx
+++ b/src/lib/components/token/TokenImageRender.tsx
@@ -19,7 +19,7 @@ interface TokenImageRenderProps extends ImageProps {
 
 export const TokenImageRender = ({ logo, ...props }: TokenImageRenderProps) =>
   Array.isArray(logo) ? (
-    <Flex>
+    <Flex minW="fit-content">
       <TokenImage src={logo[0]} alt={logo[0]} zIndex={1} {...props} />
       <TokenImage src={logo[1]} alt={logo[1]} ml="-6px" {...props} />
     </Flex>
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index e7b301b5f..d75a1d593 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -1,6 +1,8 @@
 import { Flex, Heading, useDisclosure } from "@chakra-ui/react";
 import type { Big } from "big.js";
 import big from "big.js";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
 import { Loading } from "lib/components/Loading";
@@ -61,7 +63,8 @@ export const DelegationsSection = ({
   onViewMore,
 }: DelegationsSectionProps) => {
   const { track } = useTrack();
-  const { isOpen, onToggle } = useDisclosure();
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  const router = useRouter();
   const {
     stakingParams,
     isValidator,
@@ -82,6 +85,11 @@ export const DelegationsSection = ({
     totalCommission,
     isLoadingTotalCommission,
   } = useUserDelegationInfos(walletAddress);
+
+  useEffect(() => {
+    onClose();
+  }, [onClose, router.query.accountAddress]);
+
   if (isLoading) return <Loading withBorder />;
   if (!stakingParams)
     return <EmptyState message="Error fetching delegation data" />;
diff --git a/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx b/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
index e9e271b45..a2ecaf34a 100644
--- a/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
@@ -30,6 +30,7 @@ export const TokensCell = ({
       direction="column"
       p={3}
       bgColor={isUnbonding ? undefined : "gray.800"}
+      py={isUnbonding ? 0 : undefined}
       borderRadius="8px"
       gap={2}
       w="full"
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
index c3487c853..989d65aee 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
@@ -21,6 +21,7 @@ export const RedelegationTableRow = ({
     _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     minW="min-content"
+    sx={{ "& > div": { alignItems: "flex-start" } }}
   >
     <TableRow>
       <ValidatorBadge validator={redelegation.srcValidator} />
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index da170af62..344e90977 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -1,5 +1,6 @@
 import type { Big } from "big.js";
 import big from "big.js";
+import { isUndefined } from "lodash";
 
 import { useCodeStore, useContractStore } from "lib/providers/store";
 import { useAccountBalances } from "lib/services/accountService";
@@ -38,6 +39,7 @@ import {
   coinToTokenWithValue,
   totalValueTokenWithValue,
   compareTokenWithValues,
+  getLPDetails,
 } from "lib/utils";
 
 import type { DenomInfo, UserDelegationsData } from "./types";
@@ -172,32 +174,38 @@ export const useUserAssetInfos = (
   const { assetInfos } = useAssetInfos({ withPrices: true });
   const { data: lpMap } = useLPShareInfo();
 
-  const contractBalancesWithAssetInfos = balances?.map<BalanceWithAssetInfo>(
-    (balance): BalanceWithAssetInfo => {
+  const contractBalancesWithAssetInfos = balances
+    ?.filter((bal) => Number(bal.amount))
+    .map<BalanceWithAssetInfo>((balance): BalanceWithAssetInfo => {
       const assetInfo = assetInfos?.[balance.id];
-      const isLp = balance.id in (lpMap || {});
-      const lpDetails = lpMap?.[balance.id];
-      return {
-        balance: {
-          ...balance,
-          price: isLp ? lpDetails?.lpPricePerShare.toNumber() : balance.price,
-          symbol: isLp ? lpDetails?.symbol : balance.symbol,
-          precision: isLp ? lpDetails?.precision ?? 0 : balance.precision,
-        },
-        assetInfo,
-        isLpToken: isLp,
-        lpLogo: lpDetails?.image,
-      };
-    }
-  );
+      const { isLPToken, lpDetails } = getLPDetails(balance.id, lpMap);
+      return isLPToken
+        ? {
+            balance: {
+              ...balance,
+              price: lpDetails.lpPricePerShare.toNumber(),
+              symbol: lpDetails.symbol,
+              precision: lpDetails.precision,
+            },
+            assetInfo,
+            isLPToken,
+            lpLogo: lpDetails.image,
+          }
+        : {
+            balance,
+            assetInfo,
+            isLPToken,
+          };
+    });
 
   // Supported assets should order by descending value
   const supportedAssets = contractBalancesWithAssetInfos
     ?.filter(
-      (balance) => balance.assetInfo || balance.balance.id in (lpMap || {})
+      (balance) =>
+        balance.assetInfo || getLPDetails(balance.balance.id, lpMap).isLPToken
     )
     .sort((a, b) =>
-      a.balance.price && b.balance.price
+      !isUndefined(a.balance.price) && !isUndefined(b.balance.price)
         ? calAssetValueWithPrecision(b.balance).cmp(
             calAssetValueWithPrecision(a.balance)
           )
@@ -205,7 +213,8 @@ export const useUserAssetInfos = (
     );
 
   const unsupportedAssets = contractBalancesWithAssetInfos?.filter(
-    (balance) => !balance.assetInfo
+    (balance) =>
+      !balance.assetInfo && !getLPDetails(balance.balance.id, lpMap).isLPToken
   );
 
   return {
@@ -282,7 +291,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
     isLoadingTotalCommission: isLoadingRawCommission,
   };
 
-  if (rawStakingParams && assetInfos && validators && lpMap) {
+  if (rawStakingParams && assetInfos && validators) {
     data.stakingParams = {
       ...rawStakingParams,
       bondDenoms: rawStakingParams.bondDenoms.map((denom) => ({
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index ad9dc496c..62996d13b 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -274,26 +274,28 @@ interface PairResponse {
 }
 
 export interface LPShareInfoReturn {
-  [key: string]: {
-    coinA: {
-      symbol: string;
-      denom: string;
-      precision: number;
-      tag: HexAddr;
-      amountAPerShare: Big;
-    };
-    coinB: {
-      symbol: string;
-      denom: string;
-      precision: number;
-      tag: HexAddr;
-      amountBPerShare: Big;
-    };
-    lpPricePerShare: Big;
+  coinA: {
+    symbol: string;
+    denom: string;
     precision: number;
-    image: [string, string];
+    tag: HexAddr;
+    amountAPerShare: Big;
+  };
+  coinB: {
     symbol: string;
+    denom: string;
+    precision: number;
+    tag: HexAddr;
+    amountBPerShare: Big;
   };
+  lpPricePerShare: Big;
+  precision: number;
+  image: [string, string];
+  symbol: string;
+}
+
+export interface LPShareInfoMap {
+  [key: string]: LPShareInfoReturn;
 }
 
 const indexPairResponse = (res: string): PairResponse[] => {
@@ -346,7 +348,7 @@ export const useLPShareInfo = () => {
       }
     ).then((res) => indexPairResponse(res));
 
-    return pairs.reduce<LPShareInfoReturn>((acc, curr) => {
+    return pairs.reduce<LPShareInfoMap>((acc, curr) => {
       const [coinA, coinB] = [curr.coin_a.denom, curr.coin_b.denom].map(
         (denom, idx) => ({
           ...(idx === 0 ? curr.coin_a : curr.coin_b),
diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts
index ae77d9125..d0d2499ce 100644
--- a/src/lib/types/asset.ts
+++ b/src/lib/types/asset.ts
@@ -4,7 +4,7 @@ import type { LPDetails, Option, Token, U, USD } from "lib/types";
 
 export type TokenWithValue =
   | {
-      isLpToken?: false;
+      isLPToken?: false;
       denom: string;
       amount: U<Token<Big>>;
       symbol: Option<string>;
@@ -14,7 +14,7 @@ export type TokenWithValue =
       value: Option<USD<Big>>;
     }
   | {
-      isLpToken: true;
+      isLPToken: true;
       denom: string;
       amount: U<Token<Big>>;
       symbol: Option<string>;
diff --git a/src/lib/types/currency/balance.ts b/src/lib/types/currency/balance.ts
index fc25c194a..cfb719881 100644
--- a/src/lib/types/currency/balance.ts
+++ b/src/lib/types/currency/balance.ts
@@ -25,7 +25,7 @@ export interface AssetInfo {
 }
 
 export interface BalanceWithAssetInfo {
-  isLpToken?: boolean;
+  isLPToken?: boolean;
   balance: Balance;
   assetInfo: Option<AssetInfo>;
   lpLogo?: Option<[string, string]>;
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 24c1b51a4..1e461cbf5 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -2,7 +2,10 @@ import type { BigSource } from "big.js";
 import big, { Big } from "big.js";
 
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { LPShareInfoReturn } from "lib/services/poolService";
+import type {
+  LPShareInfoMap,
+  LPShareInfoReturn,
+} from "lib/services/poolService";
 import type {
   Balance,
   BalanceWithAssetInfo,
@@ -40,19 +43,32 @@ export const calTotalValue = (assets: BalanceWithAssetInfo[]): USD<Big> =>
     big(0) as USD<Big>
   );
 
+type LPDetailsReturn =
+  | { isLPToken: true; lpDetails: LPShareInfoReturn }
+  | { isLPToken: false; lpDetails: undefined };
+
+export const getLPDetails = (
+  denom: string,
+  lpMap: LPShareInfoMap = {}
+): LPDetailsReturn => {
+  const isLPToken = denom in lpMap;
+  return isLPToken
+    ? { isLPToken: true, lpDetails: lpMap[denom] }
+    : { isLPToken: false, lpDetails: undefined };
+};
+
 export const coinToTokenWithValue = (
   denom: string,
   amount: string,
   assetInfos: AssetInfosOpt,
-  lpMap: LPShareInfoReturn = {}
+  lpMap?: LPShareInfoMap
 ): TokenWithValue => {
   const tokenAmount = big(amount) as U<Token<Big>>;
   const assetInfo = assetInfos?.[denom];
-  const isLp = denom in lpMap;
-  const lpDetails = lpMap[denom];
-  return isLp
+  const { isLPToken, lpDetails } = getLPDetails(denom, lpMap);
+  return isLPToken
     ? {
-        isLpToken: isLp,
+        isLPToken,
         denom,
         amount: tokenAmount,
         symbol: lpDetails.symbol,
@@ -134,9 +150,8 @@ export const compareTokenWithValues = (
   token1: TokenWithValue,
   token2: TokenWithValue
 ) => {
-  if (token1.symbol && token2.symbol)
-    return token1.symbol.localeCompare(token2.symbol);
-  if (token1.symbol && !token2.symbol) return -1;
-  if (!token1.symbol && token2.symbol) return 1;
+  if (token1.value && token2.value) return token2.value.cmp(token1.value);
+  if (token1.value && !token2.value) return -1;
+  if (!token1.value && token2.value) return 1;
   return token1.denom.localeCompare(token2.denom);
 };

From b50d1f5b349afc727e892c020a5b9fc9d76ccbc9 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 27 Oct 2023 16:15:59 +0700
Subject: [PATCH 257/368] fix(components): fix bug bash as comment

---
 src/lib/components/copy/CopyButton.tsx        |   8 +-
 .../components/module/FunctionDetailCard.tsx  | 121 +++++++-----------
 .../components/ModuleLists.tsx                |  10 +-
 .../components/TotalAccountValue.tsx          |   4 +-
 .../components/resources/ResourceLists.tsx    |  18 ++-
 .../components/resources/ResourceSection.tsx  |   2 +-
 .../module-details/components/ModuleInfo.tsx  |   5 +-
 .../module-details/components/ModuleTop.tsx   |   5 +-
 8 files changed, 87 insertions(+), 86 deletions(-)

diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index 3f6de91f3..cf07bb4bf 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -13,6 +13,7 @@ interface CopyButtonProps extends ButtonProps {
   hasIcon?: boolean;
   buttonText?: string;
   amptrackSection?: string;
+  iconGap?: number;
 }
 
 export const CopyButton = ({
@@ -25,6 +26,7 @@ export const CopyButton = ({
   buttonText = "Copy",
   amptrackSection,
   ml,
+  iconGap,
   ...buttonProps
 }: CopyButtonProps) => {
   const { track } = useTrack();
@@ -48,7 +50,11 @@ export const CopyButton = ({
           borderRadius={size === "xs" ? 6 : 8}
         >
           {hasIcon && (
-            <CustomIcon name="copy" boxSize={size === "xs" ? 3 : 4} />
+            <CustomIcon
+              name="copy"
+              boxSize={size === "xs" ? 3 : 4}
+              mr={iconGap}
+            />
           )}
           {buttonText}
         </Button>
diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index 67f0072d4..621befe70 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -9,7 +9,6 @@ import {
   chakra,
 } from "@chakra-ui/react";
 
-import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
 import { LabelText } from "../LabelText";
 import { Tooltip } from "../Tooltip";
@@ -168,81 +167,57 @@ export const FunctionDetailCard = ({
               <Flex alignItems="center" gap={{ base: 0, md: 4 }}>
                 {!isMobile && (
                   <>
-                    <Flex alignItems="center" gap={2}>
-                      <Tooltip
-                        bg="primary.dark"
-                        label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+                    <Flex alignItems="center" gap={1}>
+                      <CustomIcon
+                        name={getVisibilityIcon(visibility)}
+                        color="gray.600"
+                        boxSize={3}
+                      />
+                      <Text
+                        variant="body3"
+                        color="text.dark"
+                        textTransform="capitalize"
                       >
-                        <Flex
-                          pointerEvents="auto"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <Flex gap={1} alignItems="center">
-                            {disabled ? (
-                              <CustomIcon
-                                name="close"
-                                color="gray.600"
-                                boxSize={3}
-                              />
-                            ) : (
-                              <CustomIcon
-                                name="check"
-                                color="success.main"
-                                boxSize={3}
-                              />
-                            )}
-                            <Text variant="body3" color="text.dark">
-                              is_entry
-                            </Text>
-                          </Flex>
-                        </Flex>
-                      </Tooltip>
-                      <DotSeparator bg="gray.600" />
-                      <Flex alignItems="center" gap={1}>
-                        <CustomIcon
-                          name={getVisibilityIcon(visibility)}
-                          color="gray.600"
-                          boxSize={3}
-                        />
-                        <Text
-                          variant="body3"
-                          color="text.dark"
-                          textTransform="capitalize"
-                        >
-                          {visibility}
-                        </Text>
-                      </Flex>
+                        {visibility}
+                      </Text>
                     </Flex>
-                    <Button
-                      variant={getButtonStyle().variant}
-                      isDisabled={disabled}
-                      borderColor={getButtonStyle().color}
-                      size="sm"
-                      onClick={(e) => {
-                        navigate({
-                          pathname: "/interact",
-                          query: {
-                            address,
-                            moduleName,
-                            functionType: isView ? "view" : "execute",
-                            functionName: exposedFn.name,
-                          },
-                        });
-                        e.stopPropagation();
-                      }}
-                      leftIcon={
-                        <CustomIcon
-                          mx={0}
-                          name={isView ? "query" : "execute"}
-                          color={getButtonStyle().color}
-                          boxSize={3}
-                        />
-                      }
+
+                    <Tooltip
+                      isDisabled={!disabled}
+                      bg="primary.dark"
+                      label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
                     >
-                      <Text color={getButtonStyle().color} mt="2px">
-                        {isView ? "View" : "Execute"}
-                      </Text>
-                    </Button>
+                      <Button
+                        variant={getButtonStyle().variant}
+                        isDisabled={disabled}
+                        borderColor={getButtonStyle().color}
+                        size="sm"
+                        onClick={(e) => {
+                          navigate({
+                            pathname: "/interact",
+                            query: {
+                              address,
+                              moduleName,
+                              functionType: isView ? "view" : "execute",
+                              functionName: exposedFn.name,
+                            },
+                          });
+                          e.stopPropagation();
+                        }}
+                        leftIcon={
+                          <CustomIcon
+                            mx={0}
+                            name={isView ? "query" : "execute"}
+                            color={getButtonStyle().color}
+                            boxSize={3}
+                          />
+                        }
+                      >
+                        <Text color={getButtonStyle().color} mt="2px">
+                          {isView ? "View" : "Execute"}
+                        </Text>
+                      </Button>
+                    </Tooltip>
                   </>
                 )}
                 <StyledIconButton
diff --git a/src/lib/pages/account-details/components/ModuleLists.tsx b/src/lib/pages/account-details/components/ModuleLists.tsx
index 9707b8159..31c0a813d 100644
--- a/src/lib/pages/account-details/components/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/ModuleLists.tsx
@@ -27,7 +27,9 @@ export const ModuleLists = ({
   modules,
   isLoading,
   onViewMore,
-}: ModuleListsProps) => {
+}: // TODO
+// eslint-disable-next-line sonarjs/cognitive-complexity
+ModuleListsProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
 
@@ -107,8 +109,10 @@ export const ModuleLists = ({
               </SimpleGrid>
             ) : (
               <EmptyState
-                imageVariant="not-found"
-                message="No matched modules found"
+                imageVariant={onViewMore ? "empty" : "not-found"}
+                message={
+                  onViewMore ? "No modules found" : "No matched modules found"
+                }
                 withBorder
                 my={0}
               />
diff --git a/src/lib/pages/account-details/components/TotalAccountValue.tsx b/src/lib/pages/account-details/components/TotalAccountValue.tsx
index f82c23da2..bfc3b51bf 100644
--- a/src/lib/pages/account-details/components/TotalAccountValue.tsx
+++ b/src/lib/pages/account-details/components/TotalAccountValue.tsx
@@ -33,8 +33,8 @@ export const TotalAccountValue = ({
         />
       ) : (
         <Heading
-          as="h5"
-          variant="h5"
+          as="h6"
+          variant="h6"
           color={
             !totalAccountValue || totalAccountValue.eq(0)
               ? "text.dark"
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
index 0702a9bd6..2caf51fbc 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
@@ -1,4 +1,4 @@
-import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { Flex, SimpleGrid, Box } from "@chakra-ui/react";
 import { useCallback } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
@@ -43,11 +43,23 @@ export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
   );
   if (isLoading) return <Loading />;
   if (!resourcesData) return <ErrorFetching />;
-  if (resourcesData.totalCount === 0)
-    return <EmptyState imageVariant="empty" message="No resources found." />;
 
   const resources = resourcesData.groupedByName;
   const isMobileOverview = isMobile && !!onViewMore;
+
+  if (resourcesData.totalCount === 0 && !isMobileOverview)
+    return (
+      <Box w="full" mt={8}>
+        <TableTitle title="Resources" count={resourcesData.totalCount} mb={0} />
+        <EmptyState
+          imageVariant="empty"
+          message="No resources found"
+          withBorder
+          my={6}
+        />
+      </Box>
+    );
+
   return (
     <Flex
       direction="column"
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 4c287eecb..346a806dd 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -86,7 +86,7 @@ export const ResourceSection = ({
   if (isLoading) return <Loading />;
   if (!resources) return <ErrorFetching />;
   if (resources.length === 0)
-    return <EmptyState imageVariant="empty" message="No resources found." />;
+    return <EmptyState imageVariant="empty" message="No resources found" />;
 
   const selectedIndex = !selectedAccountParam
     ? 0
diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
index 4d416fa86..218360a9a 100644
--- a/src/lib/pages/module-details/components/ModuleInfo.tsx
+++ b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -115,7 +115,10 @@ const ModuleDetailsBody = ({
   } = moduleDetails;
 
   return (
-    <DetailsContainer>
+    <DetailsContainer
+      flexDirection={{ base: "column", md: "row" }}
+      gap={{ base: 6, md: 0 }}
+    >
       <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
       <LabelText
         label="Initial Published Block Height"
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 056519fff..64d3f3160 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -147,7 +147,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             <Button
               variant="outline-primary"
               w={{ base: "full", md: "auto" }}
-              leftIcon={<CustomIcon name="query" />}
+              leftIcon={<CustomIcon name="query" mr={0} />}
               size={{ base: "sm", md: "md" }}
               onClick={() =>
                 navigate({
@@ -165,7 +165,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             <Button
               variant="outline-primary"
               w={{ base: "full", md: "auto" }}
-              leftIcon={<CustomIcon name="execute" />}
+              leftIcon={<CustomIcon name="execute" mr={0} />}
               size={{ base: "sm", md: "md" }}
               onClick={() =>
                 navigate({
@@ -185,6 +185,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
               variant="outline-primary"
               size={{ base: "sm", md: "md" }}
               buttonText="Copy ABI"
+              iconGap={2}
             />
           </Flex>
         )}

From ec7d04c6a8f609c54c8b3f6c245f018f33d39bcf Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 27 Oct 2023 16:16:02 +0700
Subject: [PATCH 258/368] fix: add quote

---
 src/lib/components/modal/MoveCodeSnippet.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
index e8a6c65f7..58895447d 100644
--- a/src/lib/components/modal/MoveCodeSnippet.tsx
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -114,7 +114,9 @@ const MoveCodeSnippet = ({
       typeArgsFlags: displayTypeArgs
         ? `\n\t--type-args '${serializedAbiData.typeArgs.join(" ")}' \\`
         : "",
-      argsFlags: displayArgs ? `\n\t--args ${argsWithTypes.join(" ")} \\` : "",
+      argsFlags: displayArgs
+        ? `\n\t--args '${argsWithTypes.join(" ")}' \\`
+        : "",
       isHiddenCLI: argTypes.some(
         (argType) =>
           argType === "vector" ||

From 6307a43afd54b290c9b29266fb17192f60d2ca72 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 27 Oct 2023 16:55:29 +0700
Subject: [PATCH 259/368] fix: downgrade interchain version

---
 package.json |   2 +-
 yarn.lock    | 169 ---------------------------------------------------
 2 files changed, 1 insertion(+), 170 deletions(-)

diff --git a/package.json b/package.json
index 4d9f334ae..04f7e9113 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@graphql-codegen/client-preset": "^1.1.4",
     "@initia/initia.js": "0.1.11",
     "@initia/initia.proto": "0.1.12",
-    "@interchain-ui/react": "^1.11.8",
+    "@interchain-ui/react": "1.4.1",
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
diff --git a/yarn.lock b/yarn.lock
index 409389802..129871b89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2968,13 +2968,6 @@
   dependencies:
     "@floating-ui/utils" "^0.1.1"
 
-"@floating-ui/core@^1.4.2":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
-  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
-  dependencies:
-    "@floating-ui/utils" "^0.1.3"
-
 "@floating-ui/dom@^1.0.1", "@floating-ui/dom@^1.3.0":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
@@ -2983,14 +2976,6 @@
     "@floating-ui/core" "^1.4.1"
     "@floating-ui/utils" "^0.1.1"
 
-"@floating-ui/dom@^1.5.1", "@floating-ui/dom@^1.5.2":
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
-  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
-  dependencies:
-    "@floating-ui/core" "^1.4.2"
-    "@floating-ui/utils" "^0.1.3"
-
 "@floating-ui/react-dom@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
@@ -2998,13 +2983,6 @@
   dependencies:
     "@floating-ui/dom" "^1.3.0"
 
-"@floating-ui/react-dom@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
-  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
-  dependencies:
-    "@floating-ui/dom" "^1.5.1"
-
 "@floating-ui/react@^0.25.0":
   version "0.25.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.1.tgz#174bf4322913aa3549aeff27a0755fe10c66686d"
@@ -3014,25 +2992,11 @@
     "@floating-ui/utils" "^0.1.1"
     tabbable "^6.0.1"
 
-"@floating-ui/react@^0.26.0":
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.1.tgz#a790bd3cff5f334d9e87d3ec132a3dc39d937800"
-  integrity sha512-5gyJIJ2tZOPMgmZ/vEcVhdmQiy75b7LPO71sYIiDsxGcZ4hxLuygQWCuT0YXHqppt//Eese+L6t5KnX/gZ3tVA==
-  dependencies:
-    "@floating-ui/react-dom" "^2.0.2"
-    "@floating-ui/utils" "^0.1.5"
-    tabbable "^6.0.1"
-
 "@floating-ui/utils@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
   integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
 
-"@floating-ui/utils@^0.1.3", "@floating-ui/utils@^0.1.5":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
-  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
-
 "@formkit/auto-animate@1.0.0-beta.6":
   version "1.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz#ed7f8bc47d774a7764756646e9e3432e8be51cb3"
@@ -3608,37 +3572,6 @@
     type-fest "^4.2.0"
     zustand "^4.3.8"
 
-"@interchain-ui/react@^1.11.8":
-  version "1.11.8"
-  resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.11.8.tgz#9a39924695fc8850cc24965204eb8450209eb4e6"
-  integrity sha512-qEsCa2dhPHPrimXoSo1Z3s7mR/WT6/jzSR/oLnnuXTi+5KpCi7Fc6ThsTR4BgJ05pKHMU+KLHUbcnu68SFPaUQ==
-  dependencies:
-    "@fastify/deepmerge" "^1.3.0"
-    "@floating-ui/dom" "^1.5.2"
-    "@floating-ui/react" "^0.26.0"
-    "@formkit/auto-animate" "1.0.0-beta.6"
-    "@vanilla-extract/css" "^1.12.0"
-    "@vanilla-extract/css-utils" "^0.1.3"
-    "@vanilla-extract/dynamic" "^2.0.3"
-    "@vanilla-extract/recipes" "^0.4.0"
-    "@zag-js/number-input" "^0.26.0"
-    "@zag-js/react" "^0.26.0"
-    animejs "^3.2.1"
-    bignumber.js "^9.1.1"
-    clsx "^1.2.1"
-    copy-to-clipboard "^3.3.3"
-    immer "^9.0.19"
-    lodash "^4.17.21"
-    rainbow-sprinkles "^0.17.0"
-    zustand "^4.3.8"
-
-"@internationalized/number@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.3.0.tgz#92233d130a0591085f93be86a9e6356cfa0e2de2"
-  integrity sha512-PuxgnKE5NJMOGKUcX1QROo8jq7sW7UWLrL5B6Rfe8BdWgU/be04cVvLyCeALD46vvbAv3d1mUvyHav/Q9a237g==
-  dependencies:
-    "@swc/helpers" "^0.5.0"
-
 "@iov/crypto@2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@iov/crypto/-/crypto-2.1.0.tgz#10e91b6692e154958c11626dfd096a80e8a481a4"
@@ -4796,13 +4729,6 @@
   dependencies:
     tslib "^2.4.0"
 
-"@swc/helpers@^0.5.0":
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.3.tgz#98c6da1e196f5f08f977658b80d6bd941b5f294f"
-  integrity sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==
-  dependencies:
-    tslib "^2.4.0"
-
 "@tanstack/query-core@4.15.1":
   version "4.15.1"
   resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.15.1.tgz"
@@ -5543,11 +5469,6 @@
   resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.15.0.tgz#c32b3bf2050f81ed9eace140542db43a565e3454"
   integrity sha512-+lmu/JVQ6Q5M9Tmbt1sXVkp3CtP10JYOo/PU2L6w6mXpwazT5FUpsuorrBrBM9rhWOnxI7CVvFy7r/rxReDWgg==
 
-"@zag-js/anatomy@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.26.0.tgz#74b79740ed12cfb90c9208b62a5aa1992a5273ca"
-  integrity sha512-B0u3uU++3TXqgklH0fwPqb12y+kMSTKBD40S5+HFz/mmaxolNaJzT3QfkT4NfD+9Q3GdlHA4uQqsxhi6SfSb5w==
-
 "@zag-js/aria-hidden@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/aria-hidden/-/aria-hidden-0.15.0.tgz#97ef569a3a149df6ab89c9de08595729fe4f406c"
@@ -5563,14 +5484,6 @@
     "@zag-js/store" "0.15.0"
     klona "2.0.6"
 
-"@zag-js/core@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/core/-/core-0.26.0.tgz#c1ee370d5d4eba1b4971aa2fa5e69f443f634e7e"
-  integrity sha512-pwVFL1hTZ7w86NEA1Xs9Brq9OmTkW94JTGsBGNEMuH6LVuGGF/fike/nkJP/G/DpvdIrkwI5dKLr7P/nQ55DbQ==
-  dependencies:
-    "@zag-js/store" "0.26.0"
-    klona "2.0.6"
-
 "@zag-js/dialog@^0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/dialog/-/dialog-0.15.0.tgz#92d353a2f5b870cdbbf83a7f7a46ac12ea51e94d"
@@ -5604,24 +5517,11 @@
     "@zag-js/text-selection" "0.15.0"
     "@zag-js/types" "0.15.0"
 
-"@zag-js/dom-event@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/dom-event/-/dom-event-0.26.0.tgz#2c33fcb7fe83a553c84e793484a9fdbba5a1a167"
-  integrity sha512-Rc+ecXYDLG7wFPWVMS5XPXIQVqPUo0jXjMG5Yj7USkSBm5bg3bGsrJ2WyDpkxvvZpYmbXO6OaSyWdclrQNEcHg==
-  dependencies:
-    "@zag-js/text-selection" "0.26.0"
-    "@zag-js/types" "0.26.0"
-
 "@zag-js/dom-query@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.15.0.tgz#48954851575f0f11127d48cf271ce323bb13f1f0"
   integrity sha512-gxm7GefQ+ggJE+iN0/kHgbM90DPd4RZYoQC6TQOWy3nxij69IuoSI6goMakJ33hUckszWm9z86Sqe1U1puzssQ==
 
-"@zag-js/dom-query@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.26.0.tgz#2c1f9996ca5aac9347dca07fb1a6d68d90d152bd"
-  integrity sha512-M28nfCTl+Vc23OnttM3jv5Zn6pq/9qNkN8NQ9rCsemOALJvNOQeu8MFv7d6Jhgg3f8RqEB6EN0rS64UbgBovRg==
-
 "@zag-js/element-size@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@zag-js/element-size/-/element-size-0.1.0.tgz#dfdb3f66a70328d0c3149aae29b8f99c10590c22"
@@ -5639,13 +5539,6 @@
   dependencies:
     "@zag-js/mutation-observer" "0.15.0"
 
-"@zag-js/form-utils@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/form-utils/-/form-utils-0.26.0.tgz#d81d08d9d54d043625464f2d0498b561cd6d6001"
-  integrity sha512-ylvONwa9HkVOdRzI+NsfNCMduFbmukvBjlPv7PEtTuZznUasFEDxLdIAp6P6hlYIPGgZXl05IfyTPSLAwYPn9g==
-  dependencies:
-    "@zag-js/mutation-observer" "0.26.0"
-
 "@zag-js/interact-outside@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/interact-outside/-/interact-outside-0.15.0.tgz#e7fb88d20ce869091687ddd31ff1aaa82d1218d8"
@@ -5661,11 +5554,6 @@
   resolved "https://registry.yarnpkg.com/@zag-js/mutation-observer/-/mutation-observer-0.15.0.tgz#3848f7d9c9a39a7c7d86ed49cc6c5a4e0ffdcf85"
   integrity sha512-7e2d1RYA0nuKOAJknbYBw6XfywF5eFC/4oel/nINHmS14JtjZnjMq/8z/kdrMMJnlQHou+wnaoskOLv+4Sv7pw==
 
-"@zag-js/mutation-observer@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/mutation-observer/-/mutation-observer-0.26.0.tgz#0e201b2ba06de3e75001069133a9e1360210f1ed"
-  integrity sha512-JDtHyVLsVCxVscKLsMSxQ0Hjg2xmTmWL5C+272mHkr0r2JS2x6Z1dMn5x0capSz9vXUbHUgoHz9PSJXHkRJwAA==
-
 "@zag-js/number-input@^0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/number-input/-/number-input-0.15.0.tgz#c1f0ebc405ed9bfc22ac3d4fedc0cab1d585c388"
@@ -5681,32 +5569,11 @@
     "@zag-js/types" "0.15.0"
     "@zag-js/utils" "0.15.0"
 
-"@zag-js/number-input@^0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/number-input/-/number-input-0.26.0.tgz#a9443efbe472cee2e8abc23afb7a9968da723360"
-  integrity sha512-1KwIeCQsgnYOUzdAUMmaqiOwG+YOJIYUvmBhgNQld2IhkdqykXTIM9cZoQyNsjsYnzXhe7y6IMskUx/GlvzlCA==
-  dependencies:
-    "@internationalized/number" "^3.3.0"
-    "@zag-js/anatomy" "0.26.0"
-    "@zag-js/core" "0.26.0"
-    "@zag-js/dom-event" "0.26.0"
-    "@zag-js/dom-query" "0.26.0"
-    "@zag-js/form-utils" "0.26.0"
-    "@zag-js/mutation-observer" "0.26.0"
-    "@zag-js/number-utils" "0.26.0"
-    "@zag-js/types" "0.26.0"
-    "@zag-js/utils" "0.26.0"
-
 "@zag-js/number-utils@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/number-utils/-/number-utils-0.15.0.tgz#06d19e2145e183acebea272412fdb5780c7cbd81"
   integrity sha512-ebDPCv4UNl5qAe+x55NSUK5gMLbhlqh8mVVq6EnPUqPfbglcjUgNzht78TZ3d+0rdfgC3F8SI3pWaZk9DY4O1Q==
 
-"@zag-js/number-utils@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/number-utils/-/number-utils-0.26.0.tgz#82ad003934e434c634f31606fff866895e008433"
-  integrity sha512-XjsDVecCn/svNx/jXObD2utGFkNc+x93bRD/CPjGF40sRWka41xIpobOgLux2v8wWBM/FwMcU1W53eenTaCGkg==
-
 "@zag-js/react@^0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.15.0.tgz#516b92405b4536cd0605a9c702d2fe78ca18f1bc"
@@ -5717,16 +5584,6 @@
     "@zag-js/types" "0.15.0"
     proxy-compare "2.5.1"
 
-"@zag-js/react@^0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.26.0.tgz#7c55d1b4966f8a7b5bac53303481d9f92e73c922"
-  integrity sha512-PEZm+qRhL162PFbKwMNpnULsN6OGmqqp0cT31T2lMpGUY98bPMy9e4iWyqvrwMroJyr67Cak3/GZ3l5qMEJNNA==
-  dependencies:
-    "@zag-js/core" "0.26.0"
-    "@zag-js/store" "0.26.0"
-    "@zag-js/types" "0.26.0"
-    proxy-compare "2.5.1"
-
 "@zag-js/remove-scroll@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/remove-scroll/-/remove-scroll-0.15.0.tgz#e466557985d06dec79c489993d433ffd9b136de7"
@@ -5741,13 +5598,6 @@
   dependencies:
     proxy-compare "2.5.1"
 
-"@zag-js/store@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/store/-/store-0.26.0.tgz#4be9becc00ce4404436d5927015bdbae464371be"
-  integrity sha512-NcIWqP5RE7QU9zHi4ixl6CVX0Ff56Q8tAikwWPKAQOin/XctI1rHGNWI0/uUa+9Ib3Wsc2M83I6kTLrWstkZQQ==
-  dependencies:
-    proxy-compare "2.5.1"
-
 "@zag-js/tabbable@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/tabbable/-/tabbable-0.15.0.tgz#3303da58bb8f590e1ebf2a709c7567be15d212c9"
@@ -5762,13 +5612,6 @@
   dependencies:
     "@zag-js/dom-query" "0.15.0"
 
-"@zag-js/text-selection@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/text-selection/-/text-selection-0.26.0.tgz#a1f9105f1135daa32b9d236359a7d6754aefdbaf"
-  integrity sha512-BTlb/g8kj6Fs8FZdldLk2kJ6Za5qkihp0GtwjXBTtU6NSFkh96MPMyhCXf+WrFyet4Sbna7JyeTbfGLbomPxYg==
-  dependencies:
-    "@zag-js/dom-query" "0.26.0"
-
 "@zag-js/types@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.15.0.tgz#22fb42c125deb786f00ad984d111236bc9f2002f"
@@ -5776,23 +5619,11 @@
   dependencies:
     csstype "3.1.2"
 
-"@zag-js/types@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.26.0.tgz#ee5901ea6bee0daac8dbd024a76c5fff976f0c78"
-  integrity sha512-pQWK9dngn9zYCIzEbuGG9PboCYd1CaTWgEX3+KGFYTqOEcunPijx1MW3LZNmLaqYZLNd8yCRU5IKlno/cRBKVA==
-  dependencies:
-    csstype "3.1.2"
-
 "@zag-js/utils@0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.15.0.tgz#65e2df9e6932211fb6f927e6667d35e5b4b593b7"
   integrity sha512-aNjydiheTKMoIo1wASk3XgN3mbcCiCk2zAiUyldU4JCw9xWevMk5aSszW2v3A0yms6z+qhRb77Z50fejG7OlSA==
 
-"@zag-js/utils@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.26.0.tgz#a5579bc18706ea900b6fe59f01a41dab43b3b20b"
-  integrity sha512-TKg0l0FNIRZS2ocU5KPh5oXHljiaWJ1S8vsbTutCklurBWsOU1qVPoawPKBoNCSWEXdTqmvwGwD8smqV6zjnOQ==
-
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz"

From f50d4ac1c58f62deb7d432a0f9408ee5184c78e8 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 27 Oct 2023 17:10:02 +0700
Subject: [PATCH 260/368] feat: show parameter changes field for parameter
 change proposal tx

---
 CHANGELOG.md                                               | 1 +
 .../components/tx-message/msg-receipts/index.tsx           | 7 +++++++
 src/lib/utils/tx/types.ts                                  | 1 +
 3 files changed, 9 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aec35d9e5..53fda4f02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -80,6 +80,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#596](https://github.com/alleslabs/celatone-frontend/pull/596) Show parameter changes field for ParameterChangeProposal Tx
 - [#575](https://github.com/alleslabs/celatone-frontend/pull/575) Support message suggestion for contract from Sylvia framework
 - [#564](https://github.com/alleslabs/celatone-frontend/pull/564) Update cosmjs version to latest and bump terra testnet gas price
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index af5cf75c2..c332e2e20 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -618,6 +618,13 @@ export const generateReceipts = (
           value: String(details.is_expedited ?? false),
         },
         { title: "Title", value: details.content.title },
+        details.content.changes && {
+          title: "Parameter Changes",
+          html: getCommonReceiptHtml({
+            type: "json",
+            value: details.content.changes,
+          }),
+        },
       ];
     }
     case "/cosmos.gov.v1beta1.MsgVote": {
diff --git a/src/lib/utils/tx/types.ts b/src/lib/utils/tx/types.ts
index 06ac2d4e5..2d1e93b7e 100644
--- a/src/lib/utils/tx/types.ts
+++ b/src/lib/utils/tx/types.ts
@@ -156,6 +156,7 @@ export interface MsgSubmitProposalDetails extends MsgBaseDetails {
     subject_client_id: string;
     substitute_client_id: string;
     title: string;
+    changes?: { key: string; subspace: string; value: string }[];
   };
   is_expedited?: boolean;
 }

From 63bed5be0670018343e44df1ee2ee57e20b0d846 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 27 Oct 2023 17:25:07 +0700
Subject: [PATCH 261/368] fix: reset delegate and unbonding state

---
 .../components/delegations/DelegationsBody.tsx            | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index 8d966dd82..7b09183eb 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -1,5 +1,6 @@
 import { Flex, RadioGroup, Stack } from "@chakra-ui/react";
-import { useState } from "react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 import type { DenomInfo } from "../../types";
 import { DelegationsTable, UnbondingsTable } from "../tables";
@@ -33,6 +34,11 @@ export const DelegationsBody = ({
   // NOTE: set between "Delegated" and "Unbonding"
   const [value, setValue] = useState("Delegated");
   const { trackUseRadio } = useTrack();
+  const router = useRouter();
+
+  useEffect(() => {
+    setValue("Delegated");
+  }, [router.query.accountAddress]);
   return (
     <Flex direction="column" gap={8} p={8} borderRadius="8px" bg="gray.900">
       <RadioGroup

From a815e2ddc3b1cee0dcd85e5c0938103914556d11 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 27 Oct 2023 18:20:10 +0700
Subject: [PATCH 262/368] fix: script initial valid

---
 src/lib/pages/deploy-script/index.tsx         | 29 ++++++++++---------
 .../interact/component/form/ExecuteArea.tsx   |  4 ++-
 .../interact/component/form/ViewArea.tsx      |  4 ++-
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/lib/pages/deploy-script/index.tsx b/src/lib/pages/deploy-script/index.tsx
index bffe0fa7d..f03173ead 100644
--- a/src/lib/pages/deploy-script/index.tsx
+++ b/src/lib/pages/deploy-script/index.tsx
@@ -1,6 +1,6 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import {
   useCurrentChain,
@@ -54,7 +54,9 @@ export const DeployScript = () => {
     typeArgs: {},
     args: {},
   });
-  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([
+    ["form", "initial"],
+  ]);
 
   const enableDeploy = useMemo(
     () =>
@@ -79,7 +81,7 @@ export const DeployScript = () => {
     setEstimatedFee(undefined);
     setSimulateError("");
     setInputData({ typeArgs: {}, args: {} });
-    setAbiErrors([]);
+    setAbiErrors([["form", "initial"]]);
   }, []);
 
   const { isFetching: isSimulating } = useSimulateFeeQuery({
@@ -128,16 +130,6 @@ export const DeployScript = () => {
     inputData,
   ]);
 
-  useEffect(() => {
-    const script = fileState.decodeRes;
-    if (script) {
-      setInputData({
-        typeArgs: getAbiInitialData(script.generic_type_params.length),
-        args: getAbiInitialData(script.params.length),
-      });
-    }
-  }, [fileState.decodeRes]);
-
   return (
     <>
       <WasmPageContainer>
@@ -162,7 +154,16 @@ export const DeployScript = () => {
             file: Option<File>,
             base64File: string,
             decodeRes: Option<ExposedFunction>
-          ) => setFileState({ file, base64File, decodeRes })}
+          ) => {
+            setFileState({ file, base64File, decodeRes });
+            if (decodeRes)
+              setInputData({
+                typeArgs: getAbiInitialData(
+                  decodeRes.generic_type_params.length
+                ),
+                args: getAbiInitialData(decodeRes.params.length),
+              });
+          }}
         />
         <Heading as="h6" variant="h6" mt={8} mb={4} alignSelf="start">
           Script input
diff --git a/src/lib/pages/interact/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx
index 7a31b7016..f132170a8 100644
--- a/src/lib/pages/interact/component/form/ExecuteArea.tsx
+++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx
@@ -54,7 +54,9 @@ export const ExecuteArea = ({
     typeArgs: getAbiInitialData(executeFn.generic_type_params.length),
     args: getAbiInitialData(executeFn.params.length),
   });
-  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([
+    ["form", "initial"],
+  ]);
 
   const [composedTxMsgs, setComposedTxMsgs] = useState<EncodeObject[]>([]);
   const [simulateFeeError, setSimulateFeeError] = useState<string>();
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 18467b4cc..8c4d614a9 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -48,7 +48,9 @@ export const ViewArea = ({
     typeArgs: getAbiInitialData(fn.generic_type_params.length),
     args: getAbiInitialData(fn.params.length),
   });
-  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([
+    ["form", "initial"],
+  ]);
   const [res, setRes] = useState<JsonDataType>(undefined);
   const [error, setError] = useState<Option<string>>(undefined);
 

From 3b9caf82f81be1a1c0b259a621c461c44d70f950 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 30 Oct 2023 10:53:01 +0700
Subject: [PATCH 263/368] fix: refactor

---
 src/lib/pages/blocks/components/BlocksRow.tsx | 86 +++++++++----------
 .../pages/blocks/components/BlocksTable.tsx   | 13 ++-
 src/lib/pages/blocks/index.tsx                |  9 +-
 src/lib/pages/home/index.tsx                  |  8 +-
 4 files changed, 54 insertions(+), 62 deletions(-)

diff --git a/src/lib/pages/blocks/components/BlocksRow.tsx b/src/lib/pages/blocks/components/BlocksRow.tsx
index 32edda215..add710a34 100644
--- a/src/lib/pages/blocks/components/BlocksRow.tsx
+++ b/src/lib/pages/blocks/components/BlocksRow.tsx
@@ -17,48 +17,46 @@ export const BlocksRow = ({
   templateColumns,
   blockData,
   onRowSelect,
-}: BlocksRowProps) => {
-  return (
-    <Grid
-      templateColumns={templateColumns}
-      onClick={() => onRowSelect(blockData.height)}
-      _hover={{ bg: "gray.900" }}
-      transition="all .25s ease-in-out"
-      cursor="pointer"
-    >
-      <TableRow>
-        <ExplorerLink
-          type="block_height"
-          value={blockData.height.toString()}
-          showCopyOnHover
-        >
-          {blockData.height}
-        </ExplorerLink>
-      </TableRow>
-      <TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
-      <TableRow>
-        <ValidatorBadge
-          validator={blockData.proposer}
-          badgeSize={7}
-          maxWidth="220px"
-        />
-      </TableRow>
-      <TableRow
-        justifyContent="center"
-        color={blockData.txCount === 0 ? "text.dark" : "text.main"}
+}: BlocksRowProps) => (
+  <Grid
+    templateColumns={templateColumns}
+    onClick={() => onRowSelect(blockData.height)}
+    _hover={{ bg: "gray.900" }}
+    transition="all .25s ease-in-out"
+    cursor="pointer"
+  >
+    <TableRow>
+      <ExplorerLink
+        type="block_height"
+        value={blockData.height.toString()}
+        showCopyOnHover
       >
-        {blockData.txCount}
-      </TableRow>
-      <TableRow>
-        <Flex direction="column">
-          <Text variant="body2" color="text.dark">
-            {formatUTC(blockData.timestamp)}
-          </Text>
-          <Text variant="body3" color="text.disabled">
-            ({dateFromNow(blockData.timestamp)})
-          </Text>
-        </Flex>
-      </TableRow>
-    </Grid>
-  );
-};
+        {blockData.height}
+      </ExplorerLink>
+    </TableRow>
+    <TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
+    <TableRow>
+      <ValidatorBadge
+        validator={blockData.proposer}
+        badgeSize={7}
+        maxWidth="220px"
+      />
+    </TableRow>
+    <TableRow
+      justifyContent="center"
+      color={blockData.txCount === 0 ? "text.dark" : "text.main"}
+    >
+      {blockData.txCount}
+    </TableRow>
+    <TableRow>
+      <Flex direction="column">
+        <Text variant="body2" color="text.dark">
+          {formatUTC(blockData.timestamp)}
+        </Text>
+        <Text variant="body3" color="text.disabled">
+          ({dateFromNow(blockData.timestamp)})
+        </Text>
+      </Flex>
+    </TableRow>
+  </Grid>
+);
diff --git a/src/lib/pages/blocks/components/BlocksTable.tsx b/src/lib/pages/blocks/components/BlocksTable.tsx
index 4f7901805..87f05cf20 100644
--- a/src/lib/pages/blocks/components/BlocksTable.tsx
+++ b/src/lib/pages/blocks/components/BlocksTable.tsx
@@ -1,7 +1,7 @@
 import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { useMobile } from "lib/app-provider";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { BlockCard } from "lib/components/card/BlockCard";
 import { Loading } from "lib/components/Loading";
 import { Pagination } from "lib/components/pagination";
@@ -18,15 +18,16 @@ import { BlocksRow } from "./BlocksRow";
 
 interface BlocksTableProps {
   isViewMore?: boolean;
-  onRowSelect: (blockHeight: number) => void;
 }
 
 const TEMPLATE_COLUMNS = "140px 160px minmax(300px,1fr) 120px 280px";
 const scrollComponentId = "block-table-header";
 
-export const BlocksTable = ({ isViewMore, onRowSelect }: BlocksTableProps) => {
+export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
   const { data: blockCount, refetch: refetchCount } = useBlockCountQuery();
 
+  const navigate = useInternalNavigate();
+
   const {
     pagesQuantity,
     currentPage,
@@ -49,6 +50,12 @@ export const BlocksTable = ({ isViewMore, onRowSelect }: BlocksTableProps) => {
     error,
   } = useBlocklistQuery(pageSize, offset);
 
+  const onRowSelect = (blockHeight: number) =>
+    navigate({
+      pathname: "/blocks/[blockHeight]",
+      query: { blockHeight },
+    });
+
   const onPageChange = (nextPage: number) => {
     refetchCount();
     setCurrentPage(nextPage);
diff --git a/src/lib/pages/blocks/index.tsx b/src/lib/pages/blocks/index.tsx
index 13436d3a5..2775fc7fb 100644
--- a/src/lib/pages/blocks/index.tsx
+++ b/src/lib/pages/blocks/index.tsx
@@ -3,7 +3,6 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { AmpEvent, useTrack } from "lib/amplitude";
-import { useInternalNavigate } from "lib/app-provider";
 import PageContainer from "lib/components/PageContainer";
 
 import { BlocksTable } from "./components/BlocksTable";
@@ -11,12 +10,6 @@ import { BlocksTable } from "./components/BlocksTable";
 const BlocksPage = () => {
   const router = useRouter();
   const { track } = useTrack();
-  const navigate = useInternalNavigate();
-  const onRowSelect = (blockHeight: number) =>
-    navigate({
-      pathname: "/blocks/[blockHeight]",
-      query: { blockHeight },
-    });
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_BLOCKS);
@@ -30,7 +23,7 @@ const BlocksPage = () => {
       <Text variant="body2" fontWeight={500} color="text.dark" mb={8}>
         This page displays all blocks on this network sorted by recency
       </Text>
-      <BlocksTable onRowSelect={onRowSelect} />
+      <BlocksTable />
     </PageContainer>
   );
 };
diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx
index cb4920c88..e5e219936 100644
--- a/src/lib/pages/home/index.tsx
+++ b/src/lib/pages/home/index.tsx
@@ -129,12 +129,6 @@ const Home = () => {
   );
   const { data: txsCount, isLoading: isLoadingTxsCount } = useTxsCount();
 
-  const onBlockRowSelect = (blockHeight: number) =>
-    navigate({
-      pathname: "/blocks/[blockHeight]",
-      query: { blockHeight },
-    });
-
   const toTxs = () =>
     navigate({
       pathname: "/txs",
@@ -252,7 +246,7 @@ const Home = () => {
         <Heading as="h5" variant="h5" mb={5}>
           Recent Blocks
         </Heading>
-        <BlocksTable isViewMore onRowSelect={onBlockRowSelect} />
+        <BlocksTable isViewMore />
         {latestBlockInfo?.height && latestBlockInfo.height > 5 && (
           <ViewMore onClick={toBlocks} />
         )}

From 854d39044885e1bcaaff0f23447dead30052ae3c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 30 Oct 2023 11:33:27 +0700
Subject: [PATCH 264/368] fix: refactor resources and modules

---
 .../components/ModuleLists.tsx                | 128 -----------
 .../components/modules/ModuleLists.tsx        |  64 ++++++
 .../components/modules/ModuleListsBody.tsx    |  88 ++++++++
 .../components/modules/index.ts               |   1 +
 .../components/resources/ResourceLists.tsx    | 115 ----------
 .../components/resources/ResourceOverview.tsx |  59 +++++
 .../resources/ResourceOverviewBody.tsx        |  80 +++++++
 .../components/resources/ResourceSection.tsx  | 213 ++----------------
 .../resources/ResourceSectionBody.tsx         | 184 +++++++++++++++
 .../components/resources/index.ts             |   2 +-
 src/lib/pages/account-details/index.tsx       |  33 +--
 11 files changed, 520 insertions(+), 447 deletions(-)
 delete mode 100644 src/lib/pages/account-details/components/ModuleLists.tsx
 create mode 100644 src/lib/pages/account-details/components/modules/ModuleLists.tsx
 create mode 100644 src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
 create mode 100644 src/lib/pages/account-details/components/modules/index.ts
 delete mode 100644 src/lib/pages/account-details/components/resources/ResourceLists.tsx
 create mode 100644 src/lib/pages/account-details/components/resources/ResourceOverview.tsx
 create mode 100644 src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx
 create mode 100644 src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx

diff --git a/src/lib/pages/account-details/components/ModuleLists.tsx b/src/lib/pages/account-details/components/ModuleLists.tsx
deleted file mode 100644
index 31c0a813d..000000000
--- a/src/lib/pages/account-details/components/ModuleLists.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Flex, SimpleGrid } from "@chakra-ui/react";
-import { useMemo, useState } from "react";
-
-import { useInternalNavigate, useMobile } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import InputWithIcon from "lib/components/InputWithIcon";
-import { Loading } from "lib/components/Loading";
-import { ModuleCard } from "lib/components/module";
-import { EmptyState } from "lib/components/state";
-import { TableTitle, ViewMore } from "lib/components/table";
-import { type IndexedModule } from "lib/services/move/moduleService";
-import type { HumanAddr, Option } from "lib/types";
-
-import { ErrorFetching } from "./ErrorFetching";
-
-interface ModuleListsProps {
-  totalCount: Option<number>;
-  selectedAddress: HumanAddr;
-  modules: Option<IndexedModule[]>;
-  isLoading: boolean;
-  onViewMore?: () => void;
-}
-
-export const ModuleLists = ({
-  totalCount,
-  selectedAddress,
-  modules,
-  isLoading,
-  onViewMore,
-}: // TODO
-// eslint-disable-next-line sonarjs/cognitive-complexity
-ModuleListsProps) => {
-  const isMobile = useMobile();
-  const navigate = useInternalNavigate();
-
-  const [keyword, setKeyword] = useState("");
-
-  const filteredModules = useMemo(() => {
-    if (!keyword) return modules;
-
-    return modules?.filter((module) =>
-      module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
-    );
-  }, [keyword, modules]);
-
-  const handleOnSelect = (module: IndexedModule) => {
-    navigate({
-      pathname: `/modules/[address]/[moduleName]`,
-      query: {
-        address: selectedAddress,
-        moduleName: module.moduleName,
-      },
-    });
-  };
-
-  if (isLoading) return <Loading />;
-  if (!modules) return <ErrorFetching />;
-
-  const isMobileOverview = isMobile && !!onViewMore;
-  return (
-    <Flex
-      direction="column"
-      mt={{ base: 4, md: 8 }}
-      mb={{ base: 0, md: 8 }}
-      width="full"
-    >
-      {isMobileOverview ? (
-        <Flex
-          justify="space-between"
-          w="full"
-          bg="gray.900"
-          borderRadius="8px"
-          p={4}
-          onClick={onViewMore}
-        >
-          <TableTitle title="Modules" count={totalCount} mb={0} />
-          <CustomIcon name="chevron-right" color="gray.600" />
-        </Flex>
-      ) : (
-        <>
-          <TableTitle
-            title="Module Instances"
-            helperText="Modules are ‘smart contracts’ deployed by this account"
-            count={totalCount}
-          />
-          <Flex direction="column" gap={8}>
-            {!onViewMore && (
-              <InputWithIcon
-                placeholder="Search with Module Name..."
-                value={keyword}
-                onChange={(e) => setKeyword(e.target.value)}
-                action="execute-message-search"
-              />
-            )}
-            {filteredModules?.length ? (
-              <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
-                {(onViewMore
-                  ? filteredModules.slice(0, 9)
-                  : filteredModules
-                ).map((item) => (
-                  <ModuleCard
-                    key={item.moduleName}
-                    selectedAddress={selectedAddress}
-                    module={item}
-                    selectedModule={undefined}
-                    setSelectedModule={handleOnSelect}
-                  />
-                ))}
-              </SimpleGrid>
-            ) : (
-              <EmptyState
-                imageVariant={onViewMore ? "empty" : "not-found"}
-                message={
-                  onViewMore ? "No modules found" : "No matched modules found"
-                }
-                withBorder
-                my={0}
-              />
-            )}
-          </Flex>
-        </>
-      )}
-      {!isMobile && onViewMore && Number(filteredModules?.length) > 9 && (
-        <ViewMore onClick={onViewMore} />
-      )}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
new file mode 100644
index 000000000..ae4d8e342
--- /dev/null
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -0,0 +1,64 @@
+import { Flex } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { TableTitle } from "lib/components/table";
+import { type IndexedModule } from "lib/services/move/moduleService";
+import type { HumanAddr, Option } from "lib/types";
+
+import { ModuleListsBody } from "./ModuleListsBody";
+
+interface ModuleListsProps {
+  totalCount: Option<number>;
+  selectedAddress: HumanAddr;
+  modules: Option<IndexedModule[]>;
+  isLoading: boolean;
+  onViewMore?: () => void;
+}
+
+export const ModuleLists = ({
+  totalCount,
+  selectedAddress,
+  modules,
+  isLoading,
+  onViewMore,
+}: ModuleListsProps) => {
+  const isMobile = useMobile();
+  const isMobileOverview = isMobile && !!onViewMore;
+  return (
+    <Flex
+      direction="column"
+      mt={{ base: 4, md: 8 }}
+      mb={{ base: 0, md: 8 }}
+      width="full"
+    >
+      {isMobileOverview ? (
+        <Flex
+          justify="space-between"
+          w="full"
+          bg="gray.900"
+          borderRadius="8px"
+          p={4}
+          onClick={onViewMore}
+        >
+          <TableTitle title="Modules" count={totalCount} mb={0} />
+          <CustomIcon name="chevron-right" color="gray.600" />
+        </Flex>
+      ) : (
+        <>
+          <TableTitle
+            title="Module Instances"
+            helperText="Modules are ‘smart contracts’ deployed by this account"
+            count={totalCount}
+          />
+          <ModuleListsBody
+            selectedAddress={selectedAddress}
+            modules={modules}
+            isLoading={isLoading}
+            onViewMore={onViewMore}
+          />
+        </>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
new file mode 100644
index 000000000..86697c5ac
--- /dev/null
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -0,0 +1,88 @@
+import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { useMemo, useState } from "react";
+
+import { ErrorFetching } from "../ErrorFetching";
+import { useInternalNavigate } from "lib/app-provider";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { Loading } from "lib/components/Loading";
+import { ModuleCard } from "lib/components/module";
+import { EmptyState } from "lib/components/state";
+import { ViewMore } from "lib/components/table";
+import type { IndexedModule } from "lib/services/move/moduleService";
+import type { HumanAddr, Option } from "lib/types";
+
+interface ModuleListsBodyProps {
+  selectedAddress: HumanAddr;
+  modules: Option<IndexedModule[]>;
+  isLoading: boolean;
+  onViewMore?: () => void;
+}
+
+export const ModuleListsBody = ({
+  selectedAddress,
+  modules,
+  isLoading,
+  onViewMore,
+}: ModuleListsBodyProps) => {
+  const navigate = useInternalNavigate();
+
+  const [keyword, setKeyword] = useState("");
+
+  const filteredModules = useMemo(() => {
+    if (!keyword) return modules;
+
+    return modules?.filter((module) =>
+      module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
+    );
+  }, [keyword, modules]);
+
+  const handleOnSelect = (module: IndexedModule) => {
+    navigate({
+      pathname: `/modules/[address]/[moduleName]`,
+      query: {
+        address: selectedAddress,
+        moduleName: module.moduleName,
+      },
+    });
+  };
+
+  if (isLoading) return <Loading />;
+  if (!modules) return <ErrorFetching />;
+  if (!filteredModules?.length)
+    return (
+      <EmptyState
+        imageVariant={!keyword ? "empty" : "not-found"}
+        message={!keyword ? "No modules found" : "No matched modules found"}
+        withBorder
+        my={0}
+      />
+    );
+  return (
+    <Flex direction="column" gap={8}>
+      {!onViewMore && (
+        <InputWithIcon
+          placeholder="Search with Module Name..."
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          action="execute-message-search"
+        />
+      )}
+      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
+        {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
+          (item) => (
+            <ModuleCard
+              key={item.moduleName}
+              selectedAddress={selectedAddress}
+              module={item}
+              selectedModule={undefined}
+              setSelectedModule={handleOnSelect}
+            />
+          )
+        )}
+      </SimpleGrid>
+      {onViewMore && filteredModules.length > 9 && (
+        <ViewMore onClick={onViewMore} />
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/modules/index.ts b/src/lib/pages/account-details/components/modules/index.ts
new file mode 100644
index 000000000..6cd5eca2a
--- /dev/null
+++ b/src/lib/pages/account-details/components/modules/index.ts
@@ -0,0 +1 @@
+export * from "./ModuleLists";
diff --git a/src/lib/pages/account-details/components/resources/ResourceLists.tsx b/src/lib/pages/account-details/components/resources/ResourceLists.tsx
deleted file mode 100644
index 2caf51fbc..000000000
--- a/src/lib/pages/account-details/components/resources/ResourceLists.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Flex, SimpleGrid, Box } from "@chakra-ui/react";
-import { useCallback } from "react";
-
-import { ErrorFetching } from "../ErrorFetching";
-import { useInternalNavigate, useMobile } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
-import { ResourceCard } from "lib/components/resource";
-import { EmptyState } from "lib/components/state";
-import { TableTitle, ViewMore } from "lib/components/table";
-import { useAccountResources } from "lib/services/move/resourceService";
-import type { HumanAddr, ResourceGroup } from "lib/types";
-import { scrollToTop } from "lib/utils";
-
-interface ResourcesListsProps {
-  address: HumanAddr;
-  onViewMore?: () => void;
-}
-
-export const ResourceLists = ({ address, onViewMore }: ResourcesListsProps) => {
-  const isMobile = useMobile();
-  const navigate = useInternalNavigate();
-  const { data: resourcesData, isLoading } = useAccountResources({
-    address,
-  });
-
-  const handleSelectResource = useCallback(
-    (resource: ResourceGroup) => {
-      navigate({
-        pathname: `/accounts/[accountAddress]/[tab]`,
-        query: {
-          accountAddress: address,
-          tab: "resources",
-          account: resource.account,
-          selected: resource.group,
-        },
-        options: {
-          shallow: true,
-        },
-      });
-    },
-    [address, navigate]
-  );
-  if (isLoading) return <Loading />;
-  if (!resourcesData) return <ErrorFetching />;
-
-  const resources = resourcesData.groupedByName;
-  const isMobileOverview = isMobile && !!onViewMore;
-
-  if (resourcesData.totalCount === 0 && !isMobileOverview)
-    return (
-      <Box w="full" mt={8}>
-        <TableTitle title="Resources" count={resourcesData.totalCount} mb={0} />
-        <EmptyState
-          imageVariant="empty"
-          message="No resources found"
-          withBorder
-          my={6}
-        />
-      </Box>
-    );
-
-  return (
-    <Flex
-      direction="column"
-      mt={{ base: 4, md: 8 }}
-      mb={{ base: 0, md: 8 }}
-      width="full"
-    >
-      {isMobileOverview ? (
-        <Flex
-          justify="space-between"
-          w="full"
-          bg="gray.900"
-          borderRadius="8px"
-          p={4}
-          onClick={onViewMore}
-        >
-          <TableTitle
-            title="Resources"
-            count={resourcesData.totalCount}
-            mb={0}
-          />
-          <CustomIcon name="chevron-right" color="gray.600" />
-        </Flex>
-      ) : (
-        <>
-          <TableTitle
-            helperText="Resources stored in this account"
-            title="Resources"
-            count={resourcesData.totalCount}
-          />
-          <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
-            {resources.slice(0, 8).map((item) => (
-              <ResourceCard
-                key={item.displayName}
-                name={item.displayName}
-                amount={item.items.length}
-                onClick={() => handleSelectResource(item)}
-              />
-            ))}
-          </SimpleGrid>
-          {onViewMore && resources.length > 8 && (
-            <ViewMore
-              onClick={() => {
-                onViewMore();
-                scrollToTop();
-              }}
-            />
-          )}
-        </>
-      )}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
new file mode 100644
index 000000000..1a8d6af1c
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -0,0 +1,59 @@
+import { Flex } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { TableTitle } from "lib/components/table";
+import type { HumanAddr, Option, ResourceGroup } from "lib/types";
+
+import { ResourceOverviewBody } from "./ResourceOverviewBody";
+
+interface ResourceOverviewProps {
+  address: HumanAddr;
+  totalCount: Option<number>;
+  resourcesByName: Option<ResourceGroup[]>;
+  isLoading: boolean;
+  onViewMore: () => void;
+}
+
+export const ResourceOverview = ({
+  address,
+  totalCount,
+  resourcesByName,
+  isLoading,
+  onViewMore,
+}: ResourceOverviewProps) => {
+  const isMobile = useMobile();
+
+  return isMobile ? (
+    <Flex
+      justify="space-between"
+      w="full"
+      bg="gray.900"
+      borderRadius="8px"
+      p={4}
+      onClick={onViewMore}
+    >
+      <TableTitle title="Resources" count={totalCount} mb={0} />
+      <CustomIcon name="chevron-right" color="gray.600" />
+    </Flex>
+  ) : (
+    <Flex
+      direction="column"
+      mt={{ base: 4, md: 8 }}
+      mb={{ base: 0, md: 8 }}
+      width="full"
+    >
+      <TableTitle
+        title="Resources"
+        helperText="Resources stored in this account"
+        count={totalCount}
+      />
+      <ResourceOverviewBody
+        address={address}
+        resourcesByName={resourcesByName}
+        isLoading={isLoading}
+        onViewMore={onViewMore}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx b/src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx
new file mode 100644
index 000000000..3f6ece6e9
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx
@@ -0,0 +1,80 @@
+import { SimpleGrid } from "@chakra-ui/react";
+import { useCallback } from "react";
+
+import { ErrorFetching } from "../ErrorFetching";
+import { useInternalNavigate } from "lib/app-provider";
+import { Loading } from "lib/components/Loading";
+import { ResourceCard } from "lib/components/resource";
+import { EmptyState } from "lib/components/state";
+import { ViewMore } from "lib/components/table";
+import type { HumanAddr, Option, ResourceGroup } from "lib/types";
+import { scrollToTop } from "lib/utils";
+
+interface ResourceOverviewBodyProps {
+  address: HumanAddr;
+  resourcesByName: Option<ResourceGroup[]>;
+  isLoading: boolean;
+  onViewMore: () => void;
+}
+
+export const ResourceOverviewBody = ({
+  address,
+  resourcesByName,
+  isLoading,
+  onViewMore,
+}: ResourceOverviewBodyProps) => {
+  const navigate = useInternalNavigate();
+
+  const handleSelectResource = useCallback(
+    (resource: ResourceGroup) => {
+      navigate({
+        pathname: `/accounts/[accountAddress]/[tab]`,
+        query: {
+          accountAddress: address,
+          tab: "resources",
+          account: resource.account,
+          selected: resource.group,
+        },
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [address, navigate]
+  );
+
+  if (isLoading) return <Loading />;
+  if (!resourcesByName) return <ErrorFetching />;
+  if (!resourcesByName.length)
+    return (
+      <EmptyState
+        imageVariant="empty"
+        message="No resources found"
+        withBorder
+        my={6}
+      />
+    );
+
+  return (
+    <>
+      <SimpleGrid columns={{ sm: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
+        {resourcesByName.slice(0, 8).map((item) => (
+          <ResourceCard
+            key={item.displayName}
+            name={item.displayName}
+            amount={item.items.length}
+            onClick={() => handleSelectResource(item)}
+          />
+        ))}
+      </SimpleGrid>
+      {resourcesByName.length > 8 && (
+        <ViewMore
+          onClick={() => {
+            onViewMore();
+            scrollToTop();
+          }}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 346a806dd..76c5b2cf0 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -1,200 +1,37 @@
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Badge,
-  Button,
-  Flex,
-  Heading,
-  Text,
-} from "@chakra-ui/react";
-import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { Flex } from "@chakra-ui/react";
 
-import { ErrorFetching } from "../ErrorFetching";
-import { useInternalNavigate } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
-import { ResourceCard } from "lib/components/resource/ResourceCard";
-import { ResourceDetailCard } from "lib/components/resource/ResourceDetailCard";
-import { EmptyState } from "lib/components/state";
 import { TableTitle } from "lib/components/table";
-import type {
-  HumanAddr,
-  ResourceGroupByAccount,
-  ResourceGroup,
-  Option,
-} from "lib/types";
-import { getFirstQueryParam, truncate } from "lib/utils";
+import type { HumanAddr, ResourceGroupByAccount, Option } from "lib/types";
+
+import { ResourceSectionBody } from "./ResourceSectionBody";
 
 interface ResourceSectionProps {
   address: HumanAddr;
-  resources: Option<ResourceGroupByAccount[]>;
+  resourcesByOwner: Option<ResourceGroupByAccount[]>;
   isLoading: boolean;
 }
 
 export const ResourceSection = ({
   address,
-  resources,
+  resourcesByOwner,
   isLoading,
-}: ResourceSectionProps) => {
-  const router = useRouter();
-  const navigate = useInternalNavigate();
-  const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
-
-  const selectedAccountParam = getFirstQueryParam(router.query.account);
-  const selectedNameParam = getFirstQueryParam(router.query.selected);
-
-  const handleSelectResource = useCallback(
-    (
-      account: ResourceGroupByAccount["owner"],
-      resource: ResourceGroup["group"]
-    ) => {
-      if (account === selectedAccountParam && resource === selectedNameParam)
-        return;
-      navigate({
-        pathname: `/accounts/[accountAddress]/[tab]`,
-        query: {
-          accountAddress: address,
-          tab: "resources",
-          account,
-          selected: resource,
-        },
-        replace: true,
-        options: {
-          shallow: true,
-        },
-      });
-    },
-    [selectedNameParam, selectedAccountParam, address, navigate]
-  );
-
-  useEffect(() => {
-    const resourcesLength = resources?.find(
-      (resource) => resource.owner === selectedAccountParam
-    )?.resources?.[selectedNameParam].items.length;
-
-    if (resourcesLength === 1) {
-      setExpandedIndexes([0]);
-    } else {
-      setExpandedIndexes([]);
-    }
-  }, [resources, selectedNameParam, selectedAccountParam]);
-
-  if (isLoading) return <Loading />;
-  if (!resources) return <ErrorFetching />;
-  if (resources.length === 0)
-    return <EmptyState imageVariant="empty" message="No resources found" />;
-
-  const selectedIndex = !selectedAccountParam
-    ? 0
-    : resources.findIndex((item) => item.owner === selectedAccountParam);
-
-  const selectedGroup = resources[selectedIndex];
-  const selectedGroupArray = Object.values(selectedGroup.resources);
-  const selectedResources =
-    selectedGroupArray.find((item) => item.group === selectedNameParam) ??
-    selectedGroupArray[0];
-
-  const updateExpandedIndexes = (indexes: number[]) =>
-    setExpandedIndexes(indexes);
-
-  return (
-    <Flex direction="column" mt={8}>
-      <Flex>
-        <TableTitle
-          helperText="Resources stored in this account"
-          title="Resources"
-          count={resources.length}
-        />
-      </Flex>
-      <Flex
-        gap={6}
-        flexDirection={{ base: "column", md: "row" }}
-        position="relative"
-      >
-        <Flex minW={{ base: "full", md: 80 }}>
-          <Accordion allowMultiple defaultIndex={[selectedIndex]} width="full">
-            {resources.map((item) => (
-              <AccordionItem mb={4} key={item.owner}>
-                <AccordionButton>
-                  <Flex p={4} justifyContent="space-between" w="full">
-                    <Text variant="body1" fontWeight={600}>
-                      {truncate(item.owner)}
-                    </Text>
-                    <AccordionIcon color="gray.600" />
-                  </Flex>
-                </AccordionButton>
-                <AccordionPanel>
-                  <Flex direction="column" gap={3} maxW={80}>
-                    {Object.values(item.resources).map((subitem) => (
-                      <ResourceCard
-                        key={subitem.group}
-                        name={subitem.group}
-                        amount={subitem.items.length}
-                        isSelected={selectedResources.group === subitem.group}
-                        onClick={() =>
-                          handleSelectResource(item.owner, subitem.group)
-                        }
-                        hasBorder
-                      />
-                    ))}
-                  </Flex>
-                </AccordionPanel>
-              </AccordionItem>
-            ))}
-          </Accordion>
-        </Flex>
-        <Flex direction="column" w="full">
-          <Flex
-            justifyContent="space-between"
-            alignItems="center"
-            pb={6}
-            gap={12}
-          >
-            <Flex alignItems="center">
-              <Heading as="h6" variant="h6" wordBreak="break-word">
-                {selectedGroup.owner}::{selectedResources.group}
-              </Heading>
-              <Badge variant="primary" ml={2}>
-                {selectedResources.items.length}
-              </Badge>
-            </Flex>
-            <Button
-              variant="outline-primary"
-              minW={28}
-              size="sm"
-              rightIcon={
-                <CustomIcon
-                  name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
-                  boxSize={3}
-                />
-              }
-              onClick={() => {
-                setExpandedIndexes((prev) =>
-                  !prev.length
-                    ? Array.from(Array(selectedResources.items.length).keys())
-                    : []
-                );
-              }}
-            >
-              {expandedIndexes.length ? "Collapse All" : "Expand All"}
-            </Button>
-          </Flex>
-          <Accordion
-            allowMultiple
-            width="full"
-            index={expandedIndexes}
-            onChange={updateExpandedIndexes}
-          >
-            {selectedResources.items.map((item) => (
-              <ResourceDetailCard resourceData={item} key={item.structTag} />
-            ))}
-          </Accordion>
-        </Flex>
-      </Flex>
+}: ResourceSectionProps) => (
+  <Flex direction="column" mt={8}>
+    <TableTitle
+      helperText="Resources stored in this account"
+      title="Resources"
+      count={resourcesByOwner?.length}
+    />
+    <Flex
+      gap={6}
+      flexDirection={{ base: "column", md: "row" }}
+      position="relative"
+    >
+      <ResourceSectionBody
+        address={address}
+        resourcesByOwner={resourcesByOwner}
+        isLoading={isLoading}
+      />
     </Flex>
-  );
-};
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
new file mode 100644
index 000000000..2214cec20
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -0,0 +1,184 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Badge,
+  Button,
+  Flex,
+  Heading,
+  Text,
+} from "@chakra-ui/react";
+import { truncate } from "lodash";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useState } from "react";
+
+import { ErrorFetching } from "../ErrorFetching";
+import { useInternalNavigate } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
+import { ResourceCard, ResourceDetailCard } from "lib/components/resource";
+import { EmptyState } from "lib/components/state";
+import type {
+  HumanAddr,
+  Option,
+  ResourceGroup,
+  ResourceGroupByAccount,
+} from "lib/types";
+import { getFirstQueryParam } from "lib/utils";
+
+interface ResourceSectionBodyProps {
+  address: HumanAddr;
+  resourcesByOwner: Option<ResourceGroupByAccount[]>;
+  isLoading: boolean;
+}
+
+export const ResourceSectionBody = ({
+  address,
+  resourcesByOwner,
+  isLoading,
+}: ResourceSectionBodyProps) => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+  const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+
+  const selectedAccountParam = getFirstQueryParam(router.query.account);
+  const selectedNameParam = getFirstQueryParam(router.query.selected);
+
+  const handleSelectResource = useCallback(
+    (
+      account: ResourceGroupByAccount["owner"],
+      resource: ResourceGroup["group"]
+    ) => {
+      if (account === selectedAccountParam && resource === selectedNameParam)
+        return;
+      navigate({
+        pathname: `/accounts/[accountAddress]/[tab]`,
+        query: {
+          accountAddress: address,
+          tab: "resources",
+          account,
+          selected: resource,
+        },
+        replace: true,
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [selectedNameParam, selectedAccountParam, address, navigate]
+  );
+
+  const updateExpandedIndexes = (indexes: number[]) =>
+    setExpandedIndexes(indexes);
+
+  useEffect(() => {
+    const resourcesLength = resourcesByOwner?.find(
+      (resource) => resource.owner === selectedAccountParam
+    )?.resources?.[selectedNameParam].items.length;
+
+    if (resourcesLength === 1) {
+      setExpandedIndexes([0]);
+    } else {
+      setExpandedIndexes([]);
+    }
+  }, [resourcesByOwner, selectedNameParam, selectedAccountParam]);
+
+  if (isLoading) return <Loading />;
+  if (!resourcesByOwner) return <ErrorFetching />;
+  if (!resourcesByOwner.length)
+    return <EmptyState imageVariant="empty" message="No resources found" />;
+
+  const selectedIndex = !selectedAccountParam
+    ? 0
+    : resourcesByOwner.findIndex((item) => item.owner === selectedAccountParam);
+  const selectedGroup = resourcesByOwner[selectedIndex];
+  const selectedGroupArray = Object.values(selectedGroup.resources);
+  const selectedResources =
+    selectedGroupArray.find((item) => item.group === selectedNameParam) ??
+    selectedGroupArray[0];
+  return (
+    <>
+      <Flex minW={{ base: "full", md: 80 }}>
+        <Accordion allowMultiple defaultIndex={[selectedIndex]} width="full">
+          {resourcesByOwner.map((item) => (
+            <AccordionItem mb={4} key={item.owner}>
+              <AccordionButton>
+                <Flex p={4} justifyContent="space-between" w="full">
+                  <Text variant="body1" fontWeight={600}>
+                    {truncate(item.owner)}
+                  </Text>
+                  <AccordionIcon color="gray.600" />
+                </Flex>
+              </AccordionButton>
+              <AccordionPanel>
+                <Flex direction="column" gap={3} maxW={80}>
+                  {Object.values(item.resources).map((subitem) => (
+                    <ResourceCard
+                      key={subitem.group}
+                      name={subitem.group}
+                      amount={subitem.items.length}
+                      isSelected={selectedResources.group === subitem.group}
+                      onClick={() =>
+                        handleSelectResource(item.owner, subitem.group)
+                      }
+                      hasBorder
+                    />
+                  ))}
+                </Flex>
+              </AccordionPanel>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </Flex>
+      <Flex direction="column" w="full">
+        <Flex
+          justifyContent="space-between"
+          alignItems="center"
+          pb={6}
+          gap={12}
+        >
+          <Flex alignItems="center">
+            <Heading as="h6" variant="h6" wordBreak="break-word">
+              {selectedGroup.owner}::{selectedResources.group}
+            </Heading>
+            <Badge variant="primary" ml={2}>
+              {selectedResources.items.length}
+            </Badge>
+          </Flex>
+          <Button
+            variant="outline-primary"
+            minW={28}
+            size="sm"
+            rightIcon={
+              <CustomIcon
+                name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+                boxSize={3}
+              />
+            }
+            onClick={() => {
+              setExpandedIndexes((prev) =>
+                !prev.length
+                  ? Array.from(Array(selectedResources.items.length).keys())
+                  : []
+              );
+            }}
+          >
+            {expandedIndexes.length ? "Collapse All" : "Expand All"}
+          </Button>
+        </Flex>
+        <Accordion
+          allowMultiple
+          width="full"
+          index={expandedIndexes}
+          onChange={updateExpandedIndexes}
+        >
+          {selectedResources.items.map((item) => (
+            <ResourceDetailCard resourceData={item} key={item.structTag} />
+          ))}
+        </Accordion>
+      </Flex>
+    </>
+  );
+};
diff --git a/src/lib/pages/account-details/components/resources/index.ts b/src/lib/pages/account-details/components/resources/index.ts
index b85c1aeac..609da6e19 100644
--- a/src/lib/pages/account-details/components/resources/index.ts
+++ b/src/lib/pages/account-details/components/resources/index.ts
@@ -1,2 +1,2 @@
-export * from "./ResourceLists";
+export * from "./ResourceOverview";
 export * from "./ResourceSection";
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 41e36ce8f..9bf3f01fa 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -44,8 +44,8 @@ import {
 import { AccountHeader } from "./components/AccountHeader";
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
-import { ModuleLists } from "./components/ModuleLists";
-import { ResourceLists, ResourceSection } from "./components/resources";
+import { ModuleLists } from "./components/modules";
+import { ResourceOverview, ResourceSection } from "./components/resources";
 import {
   AdminContractsTable,
   InstantiatedContractsTable,
@@ -93,6 +93,16 @@ const AccountDetailsBody = ({
   const { data: accountId } = useAccountId(accountAddress);
   const { data: icnsName } = useICNSNamesByAddress(accountAddress);
 
+  const publicDetail = publicInfoBySlug?.details;
+
+  const {
+    tableCounts,
+    refetchCodesCount,
+    refetchContractsAdminCount,
+    refetchContractsCount,
+    refetchProposalsCount,
+    loadingState: { txCountLoading },
+  } = useAccountDetailsTableCounts(accountAddress, accountId);
   // TODO: combine with useAccountDetailsTableCounts and remove type assertion
   // move
   const { data: fetchedAccountModules, isFetching: isModulesLoading } =
@@ -109,16 +119,6 @@ const AccountDetailsBody = ({
       address: accountAddress,
     });
 
-  const publicDetail = publicInfoBySlug?.details;
-  const {
-    tableCounts,
-    refetchCodesCount,
-    refetchContractsAdminCount,
-    refetchContractsCount,
-    refetchProposalsCount,
-    loadingState: { txCountLoading },
-  } = useAccountDetailsTableCounts(accountAddress, accountId);
-
   const handleTabChange = useCallback(
     (nextTab: TabIndex) => () => {
       if (nextTab === tab) return;
@@ -336,13 +336,16 @@ const AccountDetailsBody = ({
             )}
             {move.enabled && (
               <>
-                <ResourceLists
+                <ResourceOverview
                   address={accountAddress}
+                  totalCount={resourcesData?.totalCount}
+                  resourcesByName={resourcesData?.groupedByName}
+                  isLoading={isResourceLoading}
                   onViewMore={handleTabChange(TabIndex.Resources)}
                 />
                 <ModuleLists
-                  selectedAddress={accountAddress}
                   totalCount={modulesData?.length}
+                  selectedAddress={accountAddress}
                   modules={modulesData}
                   isLoading={isModulesLoading}
                   onViewMore={handleTabChange(TabIndex.Modules)}
@@ -394,7 +397,7 @@ const AccountDetailsBody = ({
           <TabPanel p={0}>
             <ResourceSection
               address={accountAddress}
-              resources={resourcesData?.groupedByOwner}
+              resourcesByOwner={resourcesData?.groupedByOwner}
               isLoading={isResourceLoading}
             />
           </TabPanel>

From 27be72c2e605bcdcce379aaee286bfd9c5c407fd Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 30 Oct 2023 11:50:08 +0700
Subject: [PATCH 265/368] fix: fix pool txs row chevron and copy icon, add
 replace navigation option to public project details

---
 CHANGELOG.md                                        |  1 +
 src/lib/components/copy/Copier.tsx                  |  2 --
 .../pool-details/tables/pool-txs/PoolTxsMsg.tsx     | 13 ++++++-------
 .../pool-details/tables/pool-txs/PoolTxsTable.tsx   |  2 +-
 src/lib/pages/public-project/slug.tsx               |  1 +
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53fda4f02..2b25f84d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#597](https://github.com/alleslabs/celatone-frontend/pull/597) Fix pool txs row chevron and copy icon, add replace navigation option to public project details page
 - [#563](https://github.com/alleslabs/celatone-frontend/pull/563) Order by contract latest history timestamp in account contract instances
 - [#560](https://github.com/alleslabs/celatone-frontend/pull/560) Fix pool type alignment in pool card
 
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index 5c20a10e1..936c21431 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -31,7 +31,6 @@ export const Copier = ({
       triggerElement={
         <CustomIcon
           id={type}
-          h={6}
           className="copier"
           display={display}
           cursor="pointer"
@@ -41,7 +40,6 @@ export const Copier = ({
           name="copy"
           boxSize={3}
           color="gray.600"
-          minH={{ base: 6, md: "auto" }}
         />
       }
     />
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index d447876a9..7bbd8f2c4 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -40,6 +40,7 @@ export const PoolTxsMsg = ({
     .slice(0, 3)
     .concat("1fr")
     .join(" ");
+  const hasMsgDetails = transaction.success && message;
   return (
     <Box
       w="full"
@@ -70,13 +71,14 @@ export const PoolTxsMsg = ({
           onToggle();
         }}
       >
-        <TableNoBorderRow pl={2}>
-          {transaction.success && message && (
+        <TableNoBorderRow p="0 0 0 8px">
+          {hasMsgDetails && (
             <CustomIcon
               name="chevron-down"
               transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
               transition="all .25s ease-in-out"
               color="gray.600"
+              m={0}
             />
           )}
         </TableNoBorderRow>
@@ -140,17 +142,14 @@ export const PoolTxsMsg = ({
           )}
         </TableNoBorderRow>
       </Grid>
-      {transaction.success && message && (
+      {hasMsgDetails && (
         <Grid
           w="full"
           py={4}
           hidden={!isOpen}
           templateColumns={msgDetailTemplateColumns}
         >
-          <TableNoBorderRow py={0} />
-          <TableNoBorderRow py={0} />
-          <TableNoBorderRow py={0} />
-          <TableNoBorderRow py={0}>
+          <TableNoBorderRow gridArea="1 / 4" py={0}>
             <PoolMsgDetail
               txHash={transaction.hash}
               blockHeight={transaction.height}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
index 3a86f4897..b74036244 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
@@ -8,7 +8,7 @@ import { PoolTxsTableHeader } from "./PoolTxsTableHeader";
 import { PoolTxsTableRow } from "./PoolTxsTableRow";
 
 const TEMPLATE_COLUMNS =
-  "24px 180px 50px minmax(360px, 1fr) max(160px) max(220px)";
+  "24px max(200px) 50px minmax(360px, 1fr) max(160px) max(220px)";
 
 interface PoolTxsTableProps {
   pool: PoolDetail;
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index b8cb5dbab..00b8d3746 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -64,6 +64,7 @@ const ProjectDetail = () => {
 
       if (!tab || !Object.values(TabIndex).includes(tab)) {
         navigate({
+          replace: true,
           pathname: "/projects/[slug]/[tab]",
           query: {
             slug,

From ad67f401e5a705c9f41ffee6551577caec587a08 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 30 Oct 2023 14:05:59 +0700
Subject: [PATCH 266/368] fix(components): change shortcut position and fix
 expand bug

---
 .../contract-details/components/InstantiateInfo.tsx |  5 +----
 src/lib/pages/contract-details/index.tsx            | 13 ++++++-------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
index b6ee33acd..337940f4f 100644
--- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx
+++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
@@ -142,12 +142,11 @@ export const InstantiateInfo = ({
   const adminType = getAddressType(contractDetail.admin);
 
   return (
-    <Container w={{ base: "full", md: "auto" }}>
+    <Container w={{ base: "full", md: "auto" }} h="fit-content">
       <Flex direction={{ base: "row", md: "column" }} gap={{ base: 4, md: 6 }}>
         <LabelText flex="1" label="Network">
           {chainId}
         </LabelText>
-
         <LabelText flex="1" label="From Code" helperText1={codeLocalInfo?.name}>
           <ExplorerLink
             type="code_id"
@@ -169,7 +168,6 @@ export const InstantiateInfo = ({
             </Text>
           )}
         </LabelText>
-
         {contractDetail.admin ? (
           <LabelText
             flex="1"
@@ -191,7 +189,6 @@ export const InstantiateInfo = ({
           </LabelText>
         )}
       </Flex>
-
       <Divider border="1px solid" borderColor="gray.700" />
       {createdHeight !== undefined ? (
         <LabelText
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 031d9c482..7269274df 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -133,7 +133,6 @@ const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => {
       borderColor="gray.700"
       borderRadius="8px"
       p={4}
-      mt={12}
       alignItems="center"
       justifyContent="space-between"
       w="full"
@@ -142,9 +141,9 @@ const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => {
       _hover={{ bgColor: "gray.900" }}
     >
       <Flex alignItems="center" gap={3}>
-        <CustomIcon name="contract-list" color="gray.600" boxSize={6} />
+        <CustomIcon name="contract-list" color="gray.600" />
         <div>
-          <Text variant="body2" fontWeight={600}>
+          <Text as="h6" variant="h6s" fontWeight={600}>
             View Contracts States
           </Text>
           <Text variant="body3" color="text.dark" fontWeight={600}>
@@ -152,7 +151,7 @@ const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => {
           </Text>
         </div>
       </Flex>
-      <CustomIcon name="chevron-right" color="gray.600" boxSize={6} />
+      <CustomIcon name="chevron-right" color="gray.600" />
     </Flex>
   );
 };
@@ -289,6 +288,9 @@ const ContractDetailsBody = observer(
                         isLoading={contractData.isInstantiateDetailLoading}
                         defaultExpand
                       />
+                      <ContractStateShortcut
+                        onViewMore={handleTabChange(TabIndex.States)}
+                      />
                     </Flex>
                   </Flex>
                 </Flex>
@@ -296,9 +298,6 @@ const ContractDetailsBody = observer(
                   contractAddress={contractAddress}
                   contractData={contractData}
                 />
-                <ContractStateShortcut
-                  onViewMore={handleTabChange(TabIndex.States)}
-                />
               </Flex>
             </TabPanel>
             <TabPanel p={0}>

From d661302d4d4f5c417d3a17c7b12b8a618c60c842 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 30 Oct 2023 15:03:20 +0700
Subject: [PATCH 267/368] fix: remove workaround

---
 src/lib/components/copy/CopyTemplate.tsx     |  1 -
 src/lib/components/modal/MoveCodeSnippet.tsx | 12 ++++--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/copy/CopyTemplate.tsx b/src/lib/components/copy/CopyTemplate.tsx
index ec119e310..1b4703c0b 100644
--- a/src/lib/components/copy/CopyTemplate.tsx
+++ b/src/lib/components/copy/CopyTemplate.tsx
@@ -25,7 +25,6 @@ export const CopyTemplate = ({
   return (
     <Tooltip isOpen={!isDisabled && hasCopied} label={copyLabel}>
       <Box
-        display="inline"
         onClick={(e) => {
           onCopy();
           e.stopPropagation();
diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
index 58895447d..6c950375b 100644
--- a/src/lib/components/modal/MoveCodeSnippet.tsx
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -14,7 +14,6 @@ import {
   TabPanel,
   Heading,
   Box,
-  Flex,
 } from "@chakra-ui/react";
 import { useMemo } from "react";
 import AceEditor from "react-ace";
@@ -306,13 +305,10 @@ ${daemonName} tx move execute $MODULE_ADDRESS \\
                         }}
                       />
                       <Box position="absolute" top={4} right={4}>
-                        {/* Workaround for centering Tooltip placement */}
-                        <Flex>
-                          <CopyButton
-                            value={item.snippet}
-                            amptrackSection="code_snippet"
-                          />
-                        </Flex>
+                        <CopyButton
+                          value={item.snippet}
+                          amptrackSection="code_snippet"
+                        />
                       </Box>
                     </Box>
                   </TabPanel>

From 854eabe74908b80a5f794bcef9fb5417036d432e Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 30 Oct 2023 15:49:28 +0700
Subject: [PATCH 268/368] fix(components): implicit return

---
 src/lib/pages/contract-details/index.tsx | 56 ++++++++++++------------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 7269274df..47d09b5b5 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -125,36 +125,34 @@ const ContractTxsTable = observer(
   }
 );
 
-const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => {
-  return (
-    <Flex
-      onClick={onViewMore}
-      border="1px solid"
-      borderColor="gray.700"
-      borderRadius="8px"
-      p={4}
-      alignItems="center"
-      justifyContent="space-between"
-      w="full"
-      cursor="pointer"
-      transition="all 0.25s ease-in-out"
-      _hover={{ bgColor: "gray.900" }}
-    >
-      <Flex alignItems="center" gap={3}>
-        <CustomIcon name="contract-list" color="gray.600" />
-        <div>
-          <Text as="h6" variant="h6s" fontWeight={600}>
-            View Contracts States
-          </Text>
-          <Text variant="body3" color="text.dark" fontWeight={600}>
-            Access the current contract states information
-          </Text>
-        </div>
-      </Flex>
-      <CustomIcon name="chevron-right" color="gray.600" />
+const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => (
+  <Flex
+    onClick={onViewMore}
+    border="1px solid"
+    borderColor="gray.700"
+    borderRadius="8px"
+    p={4}
+    alignItems="center"
+    justifyContent="space-between"
+    w="full"
+    cursor="pointer"
+    transition="all 0.25s ease-in-out"
+    _hover={{ bgColor: "gray.900" }}
+  >
+    <Flex alignItems="center" gap={3}>
+      <CustomIcon name="contract-list" color="gray.600" />
+      <div>
+        <Text as="h6" variant="h6s" fontWeight={600}>
+          View Contracts States
+        </Text>
+        <Text variant="body3" color="text.dark" fontWeight={600}>
+          Access the current contract states information
+        </Text>
+      </div>
     </Flex>
-  );
-};
+    <CustomIcon name="chevron-right" color="gray.600" />
+  </Flex>
+);
 
 const ContractDetailsBody = observer(
   ({ contractAddress, contractData }: ContractDetailsBodyProps) => {

From f3291b4b3f6f0dd80d3ab4d8147f76905d64e616 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 30 Oct 2023 16:31:52 +0700
Subject: [PATCH 269/368] chore: remove getLPDetails

---
 CHANGELOG.md                          |  2 +-
 src/lib/pages/account-details/data.ts | 14 ++++-----
 src/lib/services/poolService.ts       | 43 +++++++++++++--------------
 src/lib/types/asset.ts                |  2 +-
 src/lib/utils/assetValue.ts           | 27 ++++-------------
 5 files changed, 36 insertions(+), 52 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28e1fd485..810a26607 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -134,7 +134,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#593](https://github.com/alleslabs/celatone-frontend/pull/593) LP assets filtering and delegation ui/ux improvement
+- [#594](https://github.com/alleslabs/celatone-frontend/pull/594) LP assets filtering and delegation ui/ux improvement
 - [#584](https://github.com/alleslabs/celatone-frontend/pull/584) Throw an error when tx failed on postTx
 - [#555](https://github.com/alleslabs/celatone-frontend/pull/555) Rewrite publish status resolver into an effect
 - [#557](https://github.com/alleslabs/celatone-frontend/pull/557) Fix see module ux writing and policy modal
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index 344e90977..08dbbe515 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -39,7 +39,6 @@ import {
   coinToTokenWithValue,
   totalValueTokenWithValue,
   compareTokenWithValues,
-  getLPDetails,
 } from "lib/utils";
 
 import type { DenomInfo, UserDelegationsData } from "./types";
@@ -178,8 +177,8 @@ export const useUserAssetInfos = (
     ?.filter((bal) => Number(bal.amount))
     .map<BalanceWithAssetInfo>((balance): BalanceWithAssetInfo => {
       const assetInfo = assetInfos?.[balance.id];
-      const { isLPToken, lpDetails } = getLPDetails(balance.id, lpMap);
-      return isLPToken
+      const lpDetails = lpMap?.[balance.id];
+      return lpDetails
         ? {
             balance: {
               ...balance,
@@ -188,13 +187,13 @@ export const useUserAssetInfos = (
               precision: lpDetails.precision,
             },
             assetInfo,
-            isLPToken,
+            isLPToken: true,
             lpLogo: lpDetails.image,
           }
         : {
             balance,
             assetInfo,
-            isLPToken,
+            isLPToken: false,
           };
     });
 
@@ -202,7 +201,8 @@ export const useUserAssetInfos = (
   const supportedAssets = contractBalancesWithAssetInfos
     ?.filter(
       (balance) =>
-        balance.assetInfo || getLPDetails(balance.balance.id, lpMap).isLPToken
+        !isUndefined(balance.assetInfo) ||
+        !isUndefined(lpMap?.[balance.balance.id])
     )
     .sort((a, b) =>
       !isUndefined(a.balance.price) && !isUndefined(b.balance.price)
@@ -214,7 +214,7 @@ export const useUserAssetInfos = (
 
   const unsupportedAssets = contractBalancesWithAssetInfos?.filter(
     (balance) =>
-      !balance.assetInfo && !getLPDetails(balance.balance.id, lpMap).isLPToken
+      isUndefined(balance.assetInfo) && isUndefined(lpMap?.[balance.balance.id])
   );
 
   return {
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 62996d13b..19d826d04 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -273,30 +273,29 @@ interface PairResponse {
   total_share: string;
 }
 
-export interface LPShareInfoReturn {
-  coinA: {
-    symbol: string;
-    denom: string;
+export type LPShareInfoMap = Record<
+  string,
+  {
+    coinA: {
+      symbol: string;
+      denom: string;
+      precision: number;
+      tag: HexAddr;
+      amountAPerShare: Big;
+    };
+    coinB: {
+      symbol: string;
+      denom: string;
+      precision: number;
+      tag: HexAddr;
+      amountBPerShare: Big;
+    };
+    lpPricePerShare: Big;
     precision: number;
-    tag: HexAddr;
-    amountAPerShare: Big;
-  };
-  coinB: {
+    image: [string, string];
     symbol: string;
-    denom: string;
-    precision: number;
-    tag: HexAddr;
-    amountBPerShare: Big;
-  };
-  lpPricePerShare: Big;
-  precision: number;
-  image: [string, string];
-  symbol: string;
-}
-
-export interface LPShareInfoMap {
-  [key: string]: LPShareInfoReturn;
-}
+  }
+>;
 
 const indexPairResponse = (res: string): PairResponse[] => {
   const parsed = parseJsonStr<PairRaw[]>(res);
diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts
index d0d2499ce..d2c41734b 100644
--- a/src/lib/types/asset.ts
+++ b/src/lib/types/asset.ts
@@ -4,7 +4,7 @@ import type { LPDetails, Option, Token, U, USD } from "lib/types";
 
 export type TokenWithValue =
   | {
-      isLPToken?: false;
+      isLPToken: false;
       denom: string;
       amount: U<Token<Big>>;
       symbol: Option<string>;
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 1e461cbf5..1bb1adb29 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -2,10 +2,7 @@ import type { BigSource } from "big.js";
 import big, { Big } from "big.js";
 
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type {
-  LPShareInfoMap,
-  LPShareInfoReturn,
-} from "lib/services/poolService";
+import type { LPShareInfoMap } from "lib/services/poolService";
 import type {
   Balance,
   BalanceWithAssetInfo,
@@ -43,20 +40,6 @@ export const calTotalValue = (assets: BalanceWithAssetInfo[]): USD<Big> =>
     big(0) as USD<Big>
   );
 
-type LPDetailsReturn =
-  | { isLPToken: true; lpDetails: LPShareInfoReturn }
-  | { isLPToken: false; lpDetails: undefined };
-
-export const getLPDetails = (
-  denom: string,
-  lpMap: LPShareInfoMap = {}
-): LPDetailsReturn => {
-  const isLPToken = denom in lpMap;
-  return isLPToken
-    ? { isLPToken: true, lpDetails: lpMap[denom] }
-    : { isLPToken: false, lpDetails: undefined };
-};
-
 export const coinToTokenWithValue = (
   denom: string,
   amount: string,
@@ -65,10 +48,10 @@ export const coinToTokenWithValue = (
 ): TokenWithValue => {
   const tokenAmount = big(amount) as U<Token<Big>>;
   const assetInfo = assetInfos?.[denom];
-  const { isLPToken, lpDetails } = getLPDetails(denom, lpMap);
-  return isLPToken
+  const lpDetails = lpMap?.[denom];
+  return lpDetails
     ? {
-        isLPToken,
+        isLPToken: true,
         denom,
         amount: tokenAmount,
         symbol: lpDetails.symbol,
@@ -101,6 +84,7 @@ export const coinToTokenWithValue = (
           .div(big(10).pow(lpDetails.precision)) as USD<Big>,
       }
     : {
+        isLPToken: false,
         denom,
         amount: tokenAmount,
         symbol: assetInfo?.symbol,
@@ -128,6 +112,7 @@ export const addTokenWithValue = (
         value: oldToken.value?.add(token.value ?? 0) as USD<Big>,
       }
     : {
+        isLPToken: false,
         denom: "",
         amount: big(0) as U<Token<Big>>,
         symbol: undefined,

From 2f93c7ee2fc6ecefdc02b2b529b41f979e1e5577 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 30 Oct 2023 17:01:00 +0700
Subject: [PATCH 270/368] fix(components): change shortcut to button

---
 src/lib/pages/contract-details/index.tsx | 73 +++++++++---------------
 1 file changed, 26 insertions(+), 47 deletions(-)

diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 47d09b5b5..0ae4df597 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -5,7 +5,7 @@ import {
   Tabs,
   TabPanels,
   TabPanel,
-  Text,
+  Button,
 } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
@@ -125,35 +125,6 @@ const ContractTxsTable = observer(
   }
 );
 
-const ContractStateShortcut = ({ onViewMore }: { onViewMore: () => void }) => (
-  <Flex
-    onClick={onViewMore}
-    border="1px solid"
-    borderColor="gray.700"
-    borderRadius="8px"
-    p={4}
-    alignItems="center"
-    justifyContent="space-between"
-    w="full"
-    cursor="pointer"
-    transition="all 0.25s ease-in-out"
-    _hover={{ bgColor: "gray.900" }}
-  >
-    <Flex alignItems="center" gap={3}>
-      <CustomIcon name="contract-list" color="gray.600" />
-      <div>
-        <Text as="h6" variant="h6s" fontWeight={600}>
-          View Contracts States
-        </Text>
-        <Text variant="body3" color="text.dark" fontWeight={600}>
-          Access the current contract states information
-        </Text>
-      </div>
-    </Flex>
-    <CustomIcon name="chevron-right" color="gray.600" />
-  </Flex>
-);
-
 const ContractDetailsBody = observer(
   ({ contractAddress, contractData }: ContractDetailsBodyProps) => {
     const tableHeaderId = "contractDetailsTableHeader";
@@ -250,20 +221,31 @@ const ContractDetailsBody = observer(
                     direction={{ base: "column", md: "row" }}
                   >
                     {/* Instantiate Info */}
-                    {isMobile && (
-                      <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
-                        Instantiate Info
-                      </Heading>
-                    )}
-                    <InstantiateInfo
-                      isLoading={
-                        contractData.isContractDetailLoading ||
-                        contractData.isContractCw2InfoLoading ||
-                        contractData.isInstantiateDetailLoading
-                      }
-                      {...contractData}
-                    />
-                    {/* Contract Info (Expand) */}
+                    <div>
+                      {isMobile && (
+                        <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
+                          Instantiate Info
+                        </Heading>
+                      )}
+                      <InstantiateInfo
+                        isLoading={
+                          contractData.isContractDetailLoading ||
+                          contractData.isContractCw2InfoLoading ||
+                          contractData.isInstantiateDetailLoading
+                        }
+                        {...contractData}
+                      />
+                      <Button
+                        size="sm"
+                        variant="outline-primary"
+                        mt={4}
+                        pr={1}
+                        onClick={handleTabChange(TabIndex.States)}
+                      >
+                        View Contract States
+                        <CustomIcon name="chevron-right" boxSize={3} />
+                      </Button>
+                    </div>
                     <Flex
                       direction="column"
                       flex={0.8}
@@ -286,9 +268,6 @@ const ContractDetailsBody = observer(
                         isLoading={contractData.isInstantiateDetailLoading}
                         defaultExpand
                       />
-                      <ContractStateShortcut
-                        onViewMore={handleTabChange(TabIndex.States)}
-                      />
                     </Flex>
                   </Flex>
                 </Flex>

From 9fd878e207ef52de93bd4f75175e63d4ce316e7b Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 30 Oct 2023 17:13:16 +0700
Subject: [PATCH 271/368] fix(components): fix changelog

---
 CHANGELOG.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01580d57c..65dc5f373 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,11 +43,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-<<<<<<< HEAD
 - [#586](https://github.com/alleslabs/celatone-frontend/pull/586) Add shortcut for contract states
-=======
 - [#587](https://github.com/alleslabs/celatone-frontend/pull/587) Make block row clickable
->>>>>>> develop
 - [#579](https://github.com/alleslabs/celatone-frontend/pull/579) Improve ux writing for recent items page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 

From 8221156740a494b91af9ea465ae63028e6e3b95b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 31 Oct 2023 11:49:13 +0700
Subject: [PATCH 272/368] fix: remove TODO

---
 .../delegations/DelegationsBody.tsx           |  3 +-
 .../components/delegations/index.tsx          | 51 +++----------------
 .../radio-card/MultiBondsRadioCard.tsx        |  1 -
 .../delegations/total-card/OverviewCard.tsx   | 29 +++++++++++
 .../delegations/total-card/index.tsx          |  6 +++
 .../tables/bonded/DelegationsTable.tsx        |  2 +-
 .../components/tables/bonded/TokensCell.tsx   | 10 ++--
 .../RedelegationTableMobileCard.tsx           |  9 ++--
 src/lib/pages/pools/components/PoolLogo.tsx   | 29 +++--------
 9 files changed, 60 insertions(+), 80 deletions(-)
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/OverviewCard.tsx

diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index 7b09183eb..cf1a17fa4 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -32,13 +32,14 @@ export const DelegationsBody = ({
   bondDenoms,
 }: DelegationsBodyProps) => {
   // NOTE: set between "Delegated" and "Unbonding"
+  const router = useRouter();
   const [value, setValue] = useState("Delegated");
   const { trackUseRadio } = useTrack();
-  const router = useRouter();
 
   useEffect(() => {
     setValue("Delegated");
   }, [router.query.accountAddress]);
+
   return (
     <Flex direction="column" gap={8} p={8} borderRadius="8px" bg="gray.900">
       <RadioGroup
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index d75a1d593..c66281bb9 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -1,6 +1,4 @@
-import { Flex, Heading, useDisclosure } from "@chakra-ui/react";
-import type { Big } from "big.js";
-import big from "big.js";
+import { Flex, useDisclosure } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
@@ -8,56 +6,19 @@ import { AmpEvent, useTrack } from "lib/amplitude";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { useUserDelegationInfos } from "lib/pages/account-details/data";
-import type { HumanAddr, USD } from "lib/types";
-import {
-  formatPrice,
-  getTokenLabel,
-  totalValueTokenWithValue,
-} from "lib/utils";
+import type { HumanAddr } from "lib/types";
+import { getTokenLabel } from "lib/utils";
 
 import { DelegationInfo } from "./DelegationInfo";
 import { DelegationsBody } from "./DelegationsBody";
 import { RedelegationsSection } from "./RedelegationsSection";
-import type { TotalCardProps } from "./total-card";
 import { TotalCard } from "./total-card";
-import { TotalCardTop } from "./total-card/TotalCardTop";
 
 interface DelegationsSectionProps {
   walletAddress: HumanAddr;
   onViewMore?: () => void;
 }
 
-interface DisplayCardProps extends TotalCardProps {
-  isViewMore: boolean;
-}
-
-export const DisplayCard = ({
-  isViewMore,
-  ...totalCardProps
-}: DisplayCardProps) =>
-  isViewMore ? (
-    <Flex direction="column" gap={1} minW="233px">
-      <TotalCardTop
-        title={totalCardProps.title}
-        message={totalCardProps.message}
-        fontWeight={600}
-      />
-      {!totalCardProps.tokens ? (
-        <Heading variant="h6" as="h6">
-          N/A
-        </Heading>
-      ) : (
-        <Heading variant="h6" as="h6">
-          {formatPrice(
-            totalValueTokenWithValue(totalCardProps.tokens, big(0) as USD<Big>)
-          )}
-        </Heading>
-      )}
-    </Flex>
-  ) : (
-    <TotalCard {...totalCardProps} />
-  );
-
 export const DelegationsSection = ({
   walletAddress,
   onViewMore,
@@ -115,7 +76,7 @@ export const DelegationsSection = ({
       >
         <DelegationInfo
           totalBondedCard={
-            <DisplayCard
+            <TotalCard
               title="Total Bonded"
               message={`Total delegated and unbonding ${
                 stakingParams.bondDenoms.length === 1
@@ -134,7 +95,7 @@ export const DelegationsSection = ({
           }
           otherInfoCards={
             <>
-              <DisplayCard
+              <TotalCard
                 title="Reward"
                 message={`Total rewards earned from delegated ${
                   stakingParams.bondDenoms.length === 1
@@ -148,7 +109,7 @@ export const DelegationsSection = ({
                 isViewMore={Boolean(onViewMore)}
               />
               {isValidator && (
-                <DisplayCard
+                <TotalCard
                   title="Commission"
                   message="Total commission reward earned by validator"
                   address={walletAddress}
diff --git a/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx b/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
index aa8983718..c17af56f4 100644
--- a/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/radio-card/MultiBondsRadioCard.tsx
@@ -30,7 +30,6 @@ const MultiBondsRadioCardBody = ({
   );
 };
 
-// TODO: double check UI
 export const MultiBondsRadioCard = ({
   value,
   tokens,
diff --git a/src/lib/pages/account-details/components/delegations/total-card/OverviewCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/OverviewCard.tsx
new file mode 100644
index 000000000..a9c83aef3
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/OverviewCard.tsx
@@ -0,0 +1,29 @@
+import { Flex, Heading } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
+
+import type { Option, TokenWithValue, USD } from "lib/types";
+import { formatPrice, totalValueTokenWithValue } from "lib/utils";
+
+import { TotalCardTop } from "./TotalCardTop";
+
+export interface OverviewCardProps {
+  title: string;
+  message: string;
+  tokens: Option<Record<string, TokenWithValue>>;
+}
+
+export const OverviewCard = ({ title, message, tokens }: OverviewCardProps) => (
+  <Flex direction="column" gap={1} minW="233px">
+    <TotalCardTop title={title} message={message} fontWeight={600} />
+    {!tokens ? (
+      <Heading variant="h6" as="h6">
+        N/A
+      </Heading>
+    ) : (
+      <Heading variant="h6" as="h6">
+        {formatPrice(totalValueTokenWithValue(tokens, big(0) as USD<Big>))}
+      </Heading>
+    )}
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/delegations/total-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
index 8e393cafb..8b360dcb0 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
@@ -4,6 +4,7 @@ import type { DenomInfo } from "lib/pages/account-details/types";
 import type { Addr, Option, TokenWithValue } from "lib/types";
 
 import { MultiBondsCard } from "./MultiBondsCard";
+import { OverviewCard } from "./OverviewCard";
 import { SingleBondCard } from "./SingleBondCard";
 import { SingleBondMultiAssetsCard } from "./SingleBondMultiAssetsCard";
 
@@ -14,6 +15,7 @@ export interface TotalCardProps {
   bondDenoms: DenomInfo[];
   tokens: Option<Record<string, TokenWithValue>>;
   isLoading: boolean;
+  isViewMore: boolean;
 }
 
 export const TotalCard = ({
@@ -23,6 +25,7 @@ export const TotalCard = ({
   bondDenoms,
   tokens = {},
   isLoading,
+  isViewMore,
 }: TotalCardProps) => {
   if (isLoading)
     return (
@@ -31,6 +34,9 @@ export const TotalCard = ({
       </Box>
     );
 
+  if (isViewMore)
+    return <OverviewCard title={title} message={message} tokens={tokens} />;
+
   if (bondDenoms.length === 1) {
     const denoms = Object.keys(tokens);
     const bondDenom = bondDenoms[0].denom;
diff --git a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
index 8fb335d11..b5a036d72 100644
--- a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
@@ -35,7 +35,7 @@ const DelegationsTableBody = ({
   if (isLoading) return <Loading withBorder />;
   if (!delegations || !rewards)
     return <EmptyState message={<ErrorFetching />} withBorder />;
-  if (!delegations?.length)
+  if (!delegations.length)
     return (
       <EmptyState
         message="This account did not delegate their assets to any validators."
diff --git a/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx b/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
index a2ecaf34a..8194e4702 100644
--- a/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/TokensCell.tsx
@@ -20,10 +20,12 @@ export const TokensCell = ({
   isSingleBondDenom,
   isUnbonding,
 }: TokensCellProps) => {
-  if (isSingleBondDenom) {
-    if (!tokens.length) return <EmptyTokenCell />;
-    return <TokenCell token={tokens[0]} />;
-  }
+  if (isSingleBondDenom)
+    return !tokens.length ? (
+      <EmptyTokenCell />
+    ) : (
+      <TokenCell token={tokens[0]} />
+    );
 
   return (
     <Flex
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
index a963197e0..c813eff7c 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
@@ -49,12 +49,9 @@ export const RedelegationTableMobileCard = ({
     </Grid>
     <Flex direction="column" gap={1}>
       <MobileLabel label="Amount" />
-      {
-        /* TODO: double check with multi denom */
-        redelegation.balances.map((balance) => (
-          <TokenCell token={balance} />
-        ))
-      }
+      {redelegation.balances.map((balance) => (
+        <TokenCell key={balance.denom} token={balance} />
+      ))}
     </Flex>
     <Flex direction="column" gap={1}>
       <MobileLabel label="Completed by" />
diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index 783b0cbf0..51e8351a6 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -5,22 +5,6 @@ import { getUndefinedTokenIcon } from "../utils";
 import { TokenImageRender } from "lib/components/token";
 import type { TokenWithValue } from "lib/types";
 
-interface PoolAssetLogoProps {
-  token: TokenWithValue;
-  logoSize: ImageProps["boxSize"];
-  idx: number;
-}
-
-const PoolAssetLogo = ({ token, logoSize, idx }: PoolAssetLogoProps) => (
-  <Flex key={token.denom}>
-    <TokenImageRender
-      logo={token.logo || getUndefinedTokenIcon(token.denom)}
-      boxSize={logoSize}
-      zIndex={2 - idx}
-    />
-  </Flex>
-);
-
 interface PoolLogoProps {
   tokens: TokenWithValue[];
   logoSize?: ImageProps["boxSize"];
@@ -49,12 +33,13 @@ export const PoolLogo = ({
       justifyContent="center"
     >
       {tokens.slice(0, isShortened ? 2 : undefined).map((token, idx) => (
-        <PoolAssetLogo
-          key={token.denom}
-          token={token}
-          logoSize={logoSize}
-          idx={idx}
-        />
+        <Flex key={token.denom}>
+          <TokenImageRender
+            logo={token.logo || getUndefinedTokenIcon(token.denom)}
+            boxSize={logoSize}
+            zIndex={2 - idx}
+          />
+        </Flex>
       ))}
       {isShortened && (
         <Flex

From 1b2067189c6e52541447f9769a2652a39b37bf5d Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 31 Oct 2023 11:54:27 +0700
Subject: [PATCH 273/368] feat: display content field for submit proposal tx
 details

---
 CHANGELOG.md                                             | 1 +
 .../components/tx-message/msg-receipts/index.tsx         | 9 +++------
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 198cfc8cd..328f032b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#598](https://github.com/alleslabs/celatone-frontend/pull/598) Display content field for submit proposal tx details
 - [#587](https://github.com/alleslabs/celatone-frontend/pull/587) Make block row clickable
 - [#579](https://github.com/alleslabs/celatone-frontend/pull/579) Improve ux writing for recent items page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index c332e2e20..44b7c1991 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -618,12 +618,9 @@ export const generateReceipts = (
           value: String(details.is_expedited ?? false),
         },
         { title: "Title", value: details.content.title },
-        details.content.changes && {
-          title: "Parameter Changes",
-          html: getCommonReceiptHtml({
-            type: "json",
-            value: details.content.changes,
-          }),
+        {
+          title: "Content",
+          html: getCommonReceiptHtml({ type: "json", value: details.content }),
         },
       ];
     }

From 13a8ed6a52709b5021d53fd0a2f845dc0317616d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 31 Oct 2023 14:21:09 +0700
Subject: [PATCH 274/368] fix: pr number

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7b7893bf..94cbcbaa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,7 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-- [#591](https://github.com/alleslabs/celatone-frontend/pull/584) Bump initia.js due to decimal serialization and dynamic buffer
+- [#591](https://github.com/alleslabs/celatone-frontend/pull/591) Bump initia.js due to decimal serialization and dynamic buffer
 - [#574](https://github.com/alleslabs/celatone-frontend/pull/574) Add min height to wasm page container to properly align footer
 - [#569](https://github.com/alleslabs/celatone-frontend/pull/569) Add move config to dev shortcuts in homepage
 - [#559](https://github.com/alleslabs/celatone-frontend/pull/559) Restructure and refactor responsive tables

From 7188fd70e71428800a37f4945812f691631d118b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 31 Oct 2023 14:54:01 +0700
Subject: [PATCH 275/368] fix: rules

---
 .../abi/args-form/field/utils/rules.ts        | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/abi/args-form/field/utils/rules.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
index 1f1f3bb9e..8c024afd6 100644
--- a/src/lib/components/abi/args-form/field/utils/rules.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -35,12 +35,11 @@ const validateAddress =
     isValidArgAddress(v) ? undefined : "Invalid address";
 
 const validateFixedPoint = (bcsFixedPointType: string) => (v: string) => {
-  const [integer, decimal] = v.split(".");
   try {
-    const div = big(2).pow(parseInt(bcsFixedPointType.slice(11)));
-    const value = big(integer)
-      .times(div)
-      .add(decimal || "0");
+    const div = big(2).pow(
+      parseInt(bcsFixedPointType.slice("fixed_point".length))
+    );
+    const value = big(v).times(div);
     const maxValue = div.mul(div);
     if (value.lt(0) || value.gte(maxValue)) throw new Error();
     return undefined;
@@ -50,14 +49,14 @@ const validateFixedPoint = (bcsFixedPointType: string) => (v: string) => {
 };
 
 const validateDecimal = (bcsDecimalType: string) => (v: string) => {
-  const [integer, decimal] = v.split(".");
+  const [, decimal] = v.split(".");
   if (decimal && decimal.length > 18)
     return "Decimal length must be less than 18";
   try {
-    const value = big(integer)
-      .times("1000000000000000000")
-      .add(decimal || "0");
-    const maxValue = big(2).pow(parseInt(bcsDecimalType.slice(7)));
+    const value = big(v).times("1000000000000000000");
+    const maxValue = big(2).pow(
+      parseInt(bcsDecimalType.slice("decimal".length))
+    );
     if (value.lt(0) || value.gte(maxValue)) throw new Error();
     return undefined;
   } catch {

From 15741fff5011faafef0e1c6781604ac4d5b60e8f Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:01:14 +0700
Subject: [PATCH 276/368] fix: decimal rule

---
 src/lib/components/abi/args-form/field/utils/rules.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/abi/args-form/field/utils/rules.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
index 8c024afd6..ab6d1156e 100644
--- a/src/lib/components/abi/args-form/field/utils/rules.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -53,7 +53,7 @@ const validateDecimal = (bcsDecimalType: string) => (v: string) => {
   if (decimal && decimal.length > 18)
     return "Decimal length must be less than 18";
   try {
-    const value = big(v).times("1000000000000000000");
+    const value = big(v).times(big(10).pow(18));
     const maxValue = big(2).pow(
       parseInt(bcsDecimalType.slice("decimal".length))
     );

From c7eeee671b0d3b1dce00dbb457b8229218bfc4d4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 11:20:00 +0700
Subject: [PATCH 277/368] fix: bump initia 0.1.12

---
 package.json |  2 +-
 yarn.lock    | 18 ++++--------------
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 04f7e9113..5f442a4a8 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
-    "@initia/initia.js": "0.1.11",
+    "@initia/initia.js": "0.1.12",
     "@initia/initia.proto": "0.1.12",
     "@interchain-ui/react": "1.4.1",
     "@monaco-editor/react": "^4.6.0",
diff --git a/yarn.lock b/yarn.lock
index 70b5b6606..d1b3ecb72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3514,10 +3514,10 @@
   dependencies:
     browser-headers "^0.4.1"
 
-"@initia/initia.js@0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.11.tgz#4f25ab35754db4db238eed564ac82aa97c9200cc"
-  integrity sha512-SlRLedPTnqU/4H2Ffo9Ufbvxofrc1ndU4kp//z/ZzFV0yid1yqkq39580RcDUudU9IsrK2MurAPjWkFIPAne+Q==
+"@initia/initia.js@0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.12.tgz#10e777088c759f7ce3124f1451650e564045f296"
+  integrity sha512-K6zxKMksSpPRFJKMCYokSxvHAC66juKR/gqQ+m6PnIvvkwLg8HY4GamvQKbmIuYxahHhk/WFfFwYNK5DWTwF7w==
   dependencies:
     "@initia/initia.proto" "^0.1.12"
     "@ledgerhq/hw-transport" "^6.27.12"
@@ -3546,16 +3546,6 @@
     long "^5.2.0"
     protobufjs "^7.1.1"
 
-"@initia/initia.proto@^0.1.12":
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.12.tgz#bfef7f9fe2b8dfa39364a30d1e497ed214029f55"
-  integrity sha512-dJkCgMyIonVDdWWmcAkCLx7woejp0EWbC9EXT/3xHxXw+IiZJrNBJOzY2wAjOBfOwC7n7HCJkpFtp2i2rumuTQ==
-  dependencies:
-    "@improbable-eng/grpc-web" "^0.15.0"
-    google-protobuf "^3.21.0"
-    long "^5.2.0"
-    protobufjs "^7.1.1"
-
 "@interchain-ui/react@1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.4.1.tgz#92e9eb3d657596a84f7c93c509a1c4a3f8771f10"

From 16cc1a8ddbb4a4882ba4352f165e5cebd360127a Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 1 Nov 2023 11:27:41 +0700
Subject: [PATCH 278/368] fix(components): change addr type to move addr

---
 src/lib/components/module/ModuleCard.tsx      |   4 +-
 .../components/modules/ModuleLists.tsx        |   4 +-
 .../components/modules/ModuleListsBody.tsx    |   4 +-
 .../components/resources/ResourceOverview.tsx |   4 +-
 .../resources/ResourceOverviewBody.tsx        |   4 +-
 .../public-project/components/tables/index.ts |   1 +
 .../modules/PublicProjectModuleMobileCard.tsx |  64 +++++++++++
 .../tables/modules/PublicProjectModuleRow.tsx | 101 +++++++++++++++++
 .../components/tables/modules/index.tsx       | 106 ++++++++++++++++++
 src/lib/pages/public-project/slug.tsx         |  50 +++++++++
 src/lib/types/projects.ts                     |  11 ++
 11 files changed, 343 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
 create mode 100644 src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
 create mode 100644 src/lib/pages/public-project/components/tables/modules/index.tsx

diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index 3133cfbb4..729502719 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -3,12 +3,12 @@ import { Flex, Grid, Text } from "@chakra-ui/react";
 import { CustomIcon } from "../icon";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import { useVerifyModule } from "lib/services/move/moduleService";
-import type { HumanAddr, Option } from "lib/types";
+import type { MoveAccountAddr, Option } from "lib/types";
 
 import { CountBadge } from "./CountBadge";
 
 interface ModuleCardProps {
-  selectedAddress: HumanAddr;
+  selectedAddress: MoveAccountAddr;
   module: IndexedModule;
   selectedModule: Option<IndexedModule>;
   setSelectedModule: (module: IndexedModule) => void;
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index ae4d8e342..441f3a2e0 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -4,13 +4,13 @@ import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { TableTitle } from "lib/components/table";
 import { type IndexedModule } from "lib/services/move/moduleService";
-import type { HumanAddr, Option } from "lib/types";
+import type { MoveAccountAddr, Option } from "lib/types";
 
 import { ModuleListsBody } from "./ModuleListsBody";
 
 interface ModuleListsProps {
   totalCount: Option<number>;
-  selectedAddress: HumanAddr;
+  selectedAddress: MoveAccountAddr;
   modules: Option<IndexedModule[]>;
   isLoading: boolean;
   onViewMore?: () => void;
diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
index 86697c5ac..e7a3f180e 100644
--- a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -9,10 +9,10 @@ import { ModuleCard } from "lib/components/module";
 import { EmptyState } from "lib/components/state";
 import { ViewMore } from "lib/components/table";
 import type { IndexedModule } from "lib/services/move/moduleService";
-import type { HumanAddr, Option } from "lib/types";
+import type { MoveAccountAddr, Option } from "lib/types";
 
 interface ModuleListsBodyProps {
-  selectedAddress: HumanAddr;
+  selectedAddress: MoveAccountAddr;
   modules: Option<IndexedModule[]>;
   isLoading: boolean;
   onViewMore?: () => void;
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
index 1a8d6af1c..0c12c6f18 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -3,12 +3,12 @@ import { Flex } from "@chakra-ui/react";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { TableTitle } from "lib/components/table";
-import type { HumanAddr, Option, ResourceGroup } from "lib/types";
+import type { MoveAccountAddr, Option, ResourceGroup } from "lib/types";
 
 import { ResourceOverviewBody } from "./ResourceOverviewBody";
 
 interface ResourceOverviewProps {
-  address: HumanAddr;
+  address: MoveAccountAddr;
   totalCount: Option<number>;
   resourcesByName: Option<ResourceGroup[]>;
   isLoading: boolean;
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx b/src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx
index 3f6ece6e9..5676e9da2 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx
@@ -7,11 +7,11 @@ import { Loading } from "lib/components/Loading";
 import { ResourceCard } from "lib/components/resource";
 import { EmptyState } from "lib/components/state";
 import { ViewMore } from "lib/components/table";
-import type { HumanAddr, Option, ResourceGroup } from "lib/types";
+import type { MoveAccountAddr, Option, ResourceGroup } from "lib/types";
 import { scrollToTop } from "lib/utils";
 
 interface ResourceOverviewBodyProps {
-  address: HumanAddr;
+  address: MoveAccountAddr;
   resourcesByName: Option<ResourceGroup[]>;
   isLoading: boolean;
   onViewMore: () => void;
diff --git a/src/lib/pages/public-project/components/tables/index.ts b/src/lib/pages/public-project/components/tables/index.ts
index 1c103833a..ed27af302 100644
--- a/src/lib/pages/public-project/components/tables/index.ts
+++ b/src/lib/pages/public-project/components/tables/index.ts
@@ -1,3 +1,4 @@
 export * from "./accounts";
 export * from "./codes";
 export * from "./contracts";
+export * from "./modules";
diff --git a/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
new file mode 100644
index 000000000..4b06b2d78
--- /dev/null
+++ b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
@@ -0,0 +1,64 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
+import type { Module } from "lib/types";
+import { truncate } from "lib/utils";
+
+interface PublicProjectModuleMobileCardProps {
+  module: Module;
+}
+export const PublicProjectModuleMobileCard = ({
+  module,
+}: PublicProjectModuleMobileCardProps) => {
+  const navigate = useInternalNavigate();
+
+  const goToModuleDetails = () => {
+    navigate({
+      pathname: "/modules/[address]/[moduleName]/[tab]",
+      query: {
+        address: module.address,
+        moduleName: module.name,
+        tab: "overview",
+      },
+    });
+  };
+  return (
+    <MobileCardTemplate
+      onClick={goToModuleDetails}
+      topContent={
+        <Flex gap={2} align="center">
+          <Flex direction="column">
+            <MobileLabel variant="body2" label="Module Path" />
+            <Text
+              variant="body2"
+              onClick={goToModuleDetails}
+              color="primary.main"
+            >
+              {truncate(module.address)}::{module.name}
+            </Text>
+          </Flex>
+        </Flex>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column">
+            <MobileLabel variant="body2" label="Owner" />
+            <ExplorerLink
+              value={module.address.toString()}
+              type="user_address"
+              showCopyOnHover
+            />
+          </Flex>
+          <Flex direction="column">
+            <MobileLabel variant="body2" label="Module Description" />
+            <Text variant="body2" color="text.dark" whiteSpace="break-spaces">
+              {module.description || "N/A"}
+            </Text>
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
new file mode 100644
index 000000000..a7933c24f
--- /dev/null
+++ b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
@@ -0,0 +1,101 @@
+import { Button, Grid, Text } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { TableRow } from "lib/components/table";
+import type { Module } from "lib/types/projects";
+import { truncate } from "lib/utils";
+
+interface ModuleTableRowProps {
+  module: Module;
+  templateColumns: string;
+}
+
+export const PublicProjectModuleRow = ({
+  module,
+  templateColumns,
+}: ModuleTableRowProps) => {
+  const navigate = useInternalNavigate();
+
+  const goToModuleDetails = () => {
+    navigate({
+      pathname: "/modules/[address]/[moduleName]/[tab]",
+      query: {
+        address: module.address,
+        moduleName: module.name,
+        tab: "overview",
+      },
+    });
+  };
+
+  return (
+    <Grid
+      templateColumns={templateColumns}
+      onClick={goToModuleDetails}
+      _hover={{ bg: "gray.900" }}
+      transition="all 0.25s ease-in-out"
+      cursor="pointer"
+      minW="min-content"
+    >
+      <TableRow>
+        <Text
+          onClick={goToModuleDetails}
+          color="primary.main"
+          _hover={{
+            textDecoration: "underline",
+            textDecorationColor: "primary.light",
+            "& > p": { color: "primary.light" },
+          }}
+          cursor="pointer"
+        >
+          {truncate(module.address)}::{module.name}
+        </Text>
+      </TableRow>
+      <TableRow>
+        <ExplorerLink
+          value={module.address}
+          type="user_address"
+          showCopyOnHover
+        />
+      </TableRow>
+      <TableRow>
+        <Text color="text.dark">{module.description}</Text>
+      </TableRow>
+      {/* TODO check validity */}
+      <TableRow gap={2}>
+        <Button
+          variant="outline-white"
+          size="sm"
+          onClick={() =>
+            navigate({
+              pathname: "/interact",
+              query: {
+                address: module.address,
+                moduleName: module.name,
+                functionType: "view",
+              },
+            })
+          }
+        >
+          View
+        </Button>
+        <Button
+          variant="outline-white"
+          size="sm"
+          onClick={() =>
+            navigate({
+              pathname: "/interact",
+              query: {
+                address: module.address,
+                moduleName: module.name,
+                functionType: "execute",
+              },
+            })
+          }
+        >
+          Execute
+        </Button>
+      </TableRow>
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/public-project/components/tables/modules/index.tsx b/src/lib/pages/public-project/components/tables/modules/index.tsx
new file mode 100644
index 000000000..19f81332e
--- /dev/null
+++ b/src/lib/pages/public-project/components/tables/modules/index.tsx
@@ -0,0 +1,106 @@
+import { Box, Grid, TableContainer } from "@chakra-ui/react";
+import { matchSorter } from "match-sorter";
+import { useMemo, useState } from "react";
+
+import { useMobile } from "lib/app-provider";
+import { TextInput } from "lib/components/forms";
+import { EmptyState } from "lib/components/state";
+import {
+  MobileTableContainer,
+  TableHeader,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
+import type { Module } from "lib/types";
+
+import { PublicProjectModuleMobileCard } from "./PublicProjectModuleMobileCard";
+import { PublicProjectModuleRow } from "./PublicProjectModuleRow";
+
+interface PublicProjectModuleTableProps {
+  modules: Module[];
+  onViewMore?: () => void;
+}
+
+const TEMPLATE_COLUMNS = "280px 160px minmax(250px, 1fr) 160px";
+
+const ModuleTableHeader = () => (
+  <Grid templateColumns={TEMPLATE_COLUMNS} minW="min-content">
+    <TableHeader>Module Path</TableHeader>
+    <TableHeader>Owner</TableHeader>
+    <TableHeader>Module Description</TableHeader>
+    <TableHeader />
+  </Grid>
+);
+
+const ContentRender = ({
+  filteredModules,
+  isMobile,
+}: {
+  filteredModules: Module[];
+  isMobile: boolean;
+}) =>
+  isMobile ? (
+    <MobileTableContainer>
+      {filteredModules.map((module) => (
+        <PublicProjectModuleMobileCard key={module.address} module={module} />
+      ))}
+    </MobileTableContainer>
+  ) : (
+    <TableContainer mb={4}>
+      <ModuleTableHeader />
+      {filteredModules.map((module) => (
+        <PublicProjectModuleRow
+          key={module.name}
+          module={module}
+          templateColumns={TEMPLATE_COLUMNS}
+        />
+      ))}
+    </TableContainer>
+  );
+
+export const PublicProjectModuleTable = ({
+  modules = [],
+  onViewMore,
+}: PublicProjectModuleTableProps) => {
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const isMobile = useMobile();
+
+  const filteredModules = useMemo(() => {
+    return onViewMore
+      ? modules.slice(0, 5)
+      : matchSorter(modules, searchKeyword, {
+          keys: ["name", "address", "description"],
+          threshold: matchSorter.rankings.CONTAINS,
+        });
+  }, [modules, onViewMore, searchKeyword]);
+
+  return (
+    <Box mt={{ base: 8, md: 12 }} mb={4}>
+      <TableTitle title="Modules" count={modules.length} />
+      {!onViewMore && (
+        <TextInput
+          variant="fixed-floating"
+          value={searchKeyword}
+          setInputState={setSearchKeyword}
+          placeholder="Search with Module address or Module name"
+          size={{ base: "md", md: "lg" }}
+          mb={6}
+        />
+      )}
+      {filteredModules.length ? (
+        <ContentRender filteredModules={filteredModules} isMobile={isMobile} />
+      ) : (
+        <EmptyState
+          message={
+            modules.length
+              ? "No matching module found for this project. Make sure you are searching with Module Address or Module Name"
+              : "There is currently no modules related to this project."
+          }
+          imageVariant={onViewMore && "empty"}
+          withBorder
+        />
+      )}
+      {modules.length > 5 && onViewMore && <ViewMore onClick={onViewMore} />}
+    </Box>
+  );
+};
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 8409c6ddb..2f8015f6e 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -7,10 +7,12 @@ import {
   usePublicProjectConfig,
   useWasmConfig,
   useInternalNavigate,
+  useMoveConfig,
 } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
+import type { MoveAccountAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import { DetailHeader } from "./components/DetailHeader";
@@ -18,6 +20,7 @@ import {
   PublicProjectAccountTable,
   PublicProjectCodeTable,
   PublicProjectContractTable,
+  PublicProjectModuleTable,
 } from "./components/tables";
 import { usePublicData } from "./data";
 
@@ -26,12 +29,14 @@ enum TabIndex {
   Codes = "codes",
   Contracts = "contracts",
   Accounts = "accounts",
+  Modules = "modules",
 }
 
 const ProjectDetail = () => {
   const { track } = useTrack();
   const router = useRouter();
   const wasm = useWasmConfig({ shouldRedirect: false });
+  const move = useMoveConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
   // TODO: remove assertion later
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
@@ -44,6 +49,32 @@ const ProjectDetail = () => {
     isLoading,
   } = usePublicData();
 
+  const mockupModules = [
+    {
+      slug: "initia",
+      address: "init1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpqr5e3d" as MoveAccountAddr,
+      name: "acl",
+      description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
+      github: "",
+    },
+    {
+      slug: "initia2",
+      address: "init1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpqr5e3d" as MoveAccountAddr,
+      name: "dex",
+      description:
+        "Consequatur, aliquam veritatis laudantium odit optio at et quo, eos a labore",
+      github: "",
+    },
+    {
+      slug: "initia3",
+      address: "init1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpqr5e3d" as MoveAccountAddr,
+      name: "capability",
+      description:
+        "Libero quasi molestiae nulla laboriosam beatae nostrum alias harum ducimus.",
+      github: "",
+    },
+  ];
+
   const handleTabChange = (nextTab: TabIndex) => () => {
     if (nextTab === tab) return;
     navigate({
@@ -127,6 +158,15 @@ const ProjectDetail = () => {
           >
             Accounts
           </CustomTab>
+          {/* TODO Change to publicModules */}
+          <CustomTab
+            count={mockupModules.length}
+            isDisabled={!mockupModules.length}
+            onClick={handleTabChange(TabIndex.Modules)}
+            hidden={!move.enabled}
+          >
+            Modules
+          </CustomTab>
         </TabList>
         <TabPanels my={8}>
           <TabPanel p={0}>
@@ -146,6 +186,13 @@ const ProjectDetail = () => {
               accounts={publicAccounts}
               onViewMore={handleTabChange(TabIndex.Accounts)}
             />
+            {/* TODO Change to publicModules */}
+            {move.enabled && (
+              <PublicProjectModuleTable
+                modules={mockupModules}
+                onViewMore={handleTabChange(TabIndex.Modules)}
+              />
+            )}
           </TabPanel>
           <TabPanel p={0}>
             <PublicProjectCodeTable codes={publicCodes} />
@@ -156,6 +203,9 @@ const ProjectDetail = () => {
           <TabPanel p={0}>
             <PublicProjectAccountTable accounts={publicAccounts} />
           </TabPanel>
+          <TabPanel p={0}>
+            <PublicProjectModuleTable modules={mockupModules} />
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </PageContainer>
diff --git a/src/lib/types/projects.ts b/src/lib/types/projects.ts
index 3b5fd0d80..ced740558 100644
--- a/src/lib/types/projects.ts
+++ b/src/lib/types/projects.ts
@@ -7,6 +7,7 @@ import type {
   PermissionAddresses,
   Option,
   Nullable,
+  MoveAccountAddr,
 } from "lib/types";
 
 export interface Account {
@@ -17,6 +18,14 @@ export interface Account {
   type: string;
 }
 
+export interface Module {
+  slug: string;
+  address: MoveAccountAddr;
+  name: string;
+  description: string;
+  github: string;
+}
+
 export interface RawPublicCode {
   description: string;
   id: number;
@@ -65,6 +74,7 @@ export interface RawPublicProjectInfo {
   assets: AssetInfo;
   codes: RawPublicCode[];
   contracts: RawPublicContract[];
+  modules: Module[];
   details: PublicDetail;
   slug: string;
 }
@@ -78,6 +88,7 @@ export interface PublicProjectInfo {
   assets: AssetInfo;
   codes: PublicCode[];
   contracts: PublicContract[];
+  modules: Module[];
   details: PublicDetail;
   slug: string;
 }

From e639568a74f17b6b3491261f8112d6aee9b65409 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 11:58:58 +0700
Subject: [PATCH 279/368] fix: spacing

---
 .../account-details/components/modules/ModuleListsBody.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
index e7a3f180e..200580d12 100644
--- a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -25,14 +25,14 @@ export const ModuleListsBody = ({
   onViewMore,
 }: ModuleListsBodyProps) => {
   const navigate = useInternalNavigate();
-
   const [keyword, setKeyword] = useState("");
 
   const filteredModules = useMemo(() => {
     if (!keyword) return modules;
 
-    return modules?.filter((module) =>
-      module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
+    return modules?.filter(
+      (module) =>
+        module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
     );
   }, [keyword, modules]);
 

From c0ba05d5f55eb946e4fc11d4c84b067d468f0526 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 1 Nov 2023 12:20:21 +0700
Subject: [PATCH 280/368] fix: support initia module address in link

---
 src/lib/components/ExplorerLink.tsx           | 33 ++++++++++++++-----
 .../table/proposals/ProposalsTableRow.tsx     | 12 +++----
 src/lib/components/tx/modal/ButtonSection.tsx | 12 +++----
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 142d4ad2d..d51e02d9f 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -3,9 +3,10 @@ import { Box, Text, Flex } from "@chakra-ui/react";
 
 import type { ExplorerConfig } from "config/chain/types";
 import { useTrack } from "lib/amplitude";
-import type { AddressReturnType } from "lib/app-provider";
+import { type AddressReturnType } from "lib/app-provider";
 import { useCelatoneApp } from "lib/app-provider/contexts";
 import { useBaseApiRoute } from "lib/app-provider/hooks/useBaseApiRoute";
+import { useMoveConfig } from "lib/app-provider/hooks/useConfig";
 import { useCurrentChain } from "lib/app-provider/hooks/useCurrentChain";
 import { useMobile } from "lib/app-provider/hooks/useMediaQuery";
 import type { Option } from "lib/types";
@@ -36,19 +37,26 @@ interface ExplorerLinkProps extends BoxProps {
   fixedHeight?: boolean;
 }
 
-export const getNavigationUrl = (
-  type: ExplorerLinkProps["type"],
-  explorerConfig: ExplorerConfig,
-  value: string,
-  lcdEndpoint: string
-) => {
+export const getNavigationUrl = ({
+  type,
+  explorerConfig,
+  value,
+  lcdEndpoint,
+  moveEnabled = false,
+}: {
+  type: ExplorerLinkProps["type"];
+  explorerConfig: ExplorerConfig;
+  value: string;
+  lcdEndpoint: string;
+  moveEnabled?: boolean;
+}) => {
   let url = "";
   switch (type) {
     case "tx_hash":
       url = "/txs";
       break;
     case "contract_address":
-      url = "/contracts";
+      url = moveEnabled ? "/accounts" : "/contracts";
       break;
     case "user_address":
       url = "/accounts";
@@ -171,6 +179,7 @@ export const ExplorerLink = ({
 }: ExplorerLinkProps) => {
   const { address } = useCurrentChain();
   const lcdEndpoint = useBaseApiRoute("rest");
+  const { enabled: moveEnabled } = useMoveConfig({ shouldRedirect: false });
   const {
     chainConfig: { explorerLink: explorerConfig },
   } = useCelatoneApp();
@@ -184,7 +193,13 @@ export const ExplorerLink = ({
     type === "pool_id";
 
   const [hrefLink, textValue] = [
-    getNavigationUrl(type, explorerConfig, copyValue || value, lcdEndpoint),
+    getNavigationUrl({
+      type,
+      explorerConfig,
+      value: copyValue || value,
+      lcdEndpoint,
+      moveEnabled,
+    }),
     getValueText(value === address, textFormat === "truncate", value),
   ];
 
diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index f0c1110d1..c4489b6b6 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -60,12 +60,12 @@ export const ProposalsTableRow = ({
               });
               // TOOD: revisit retrieving url (make a proper hook)
               openNewTab(
-                getNavigationUrl(
-                  "proposal_id",
-                  explorerLink,
-                  proposal.proposalId.toString(),
-                  lcdEndpoint
-                )
+                getNavigationUrl({
+                  type: "proposal_id",
+                  explorerConfig: explorerLink,
+                  value: proposal.proposalId.toString(),
+                  lcdEndpoint,
+                })
               );
             }
           : undefined
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index 548d579c6..7d5e32a2f 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -49,12 +49,12 @@ export const ButtonSection = ({
       ?.value?.toString();
     // TOOD: revisit retrieving url (make a proper hook)
     openNewTab(
-      getNavigationUrl(
-        "proposal_id",
-        explorerLink,
-        proposalId ?? "",
-        lcdEndpoint
-      )
+      getNavigationUrl({
+        type: "proposal_id",
+        explorerConfig: explorerLink,
+        value: proposalId ?? "",
+        lcdEndpoint,
+      })
     );
     onClose?.();
   };

From 905b2c8c9277c229af21125364b056895f031e6f Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 1 Nov 2023 12:28:13 +0700
Subject: [PATCH 281/368] chore: change move to wasm

---
 src/lib/components/ExplorerLink.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index d51e02d9f..9cbec44f0 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -6,7 +6,7 @@ import { useTrack } from "lib/amplitude";
 import { type AddressReturnType } from "lib/app-provider";
 import { useCelatoneApp } from "lib/app-provider/contexts";
 import { useBaseApiRoute } from "lib/app-provider/hooks/useBaseApiRoute";
-import { useMoveConfig } from "lib/app-provider/hooks/useConfig";
+import { useWasmConfig } from "lib/app-provider/hooks/useConfig";
 import { useCurrentChain } from "lib/app-provider/hooks/useCurrentChain";
 import { useMobile } from "lib/app-provider/hooks/useMediaQuery";
 import type { Option } from "lib/types";
@@ -42,13 +42,13 @@ export const getNavigationUrl = ({
   explorerConfig,
   value,
   lcdEndpoint,
-  moveEnabled = false,
+  wasmEnabled = false,
 }: {
   type: ExplorerLinkProps["type"];
   explorerConfig: ExplorerConfig;
   value: string;
   lcdEndpoint: string;
-  moveEnabled?: boolean;
+  wasmEnabled?: boolean;
 }) => {
   let url = "";
   switch (type) {
@@ -56,7 +56,7 @@ export const getNavigationUrl = ({
       url = "/txs";
       break;
     case "contract_address":
-      url = moveEnabled ? "/accounts" : "/contracts";
+      url = wasmEnabled ? "/contracts" : "/accounts";
       break;
     case "user_address":
       url = "/accounts";
@@ -179,7 +179,7 @@ export const ExplorerLink = ({
 }: ExplorerLinkProps) => {
   const { address } = useCurrentChain();
   const lcdEndpoint = useBaseApiRoute("rest");
-  const { enabled: moveEnabled } = useMoveConfig({ shouldRedirect: false });
+  const { enabled: wasmEnabled } = useWasmConfig({ shouldRedirect: false });
   const {
     chainConfig: { explorerLink: explorerConfig },
   } = useCelatoneApp();
@@ -198,7 +198,7 @@ export const ExplorerLink = ({
       explorerConfig,
       value: copyValue || value,
       lcdEndpoint,
-      moveEnabled,
+      wasmEnabled,
     }),
     getValueText(value === address, textFormat === "truncate", value),
   ];

From 84834f08dc5d2250f3db535357e4e7872fd811ab Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 1 Nov 2023 13:36:04 +0700
Subject: [PATCH 282/368] docs: edit changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57f13f781..94a84003b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -136,6 +136,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#599](https://github.com/alleslabs/celatone-frontend/pull/599) Fix getNavigationUrl to support move
 - [#590](https://github.com/alleslabs/celatone-frontend/pull/590) Fix upload script various bugs
 - [#594](https://github.com/alleslabs/celatone-frontend/pull/594) LP assets filtering and delegation ui/ux improvement
 - [#584](https://github.com/alleslabs/celatone-frontend/pull/584) Throw an error when tx failed on postTx

From dd99d8931dda2a2ce55e2f27ae79b4560aaadb84 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 1 Nov 2023 15:57:15 +0700
Subject: [PATCH 283/368] fix(components): add modules to public project

---
 src/lib/app-provider/env.ts                   |   1 +
 src/lib/app-provider/hooks/useBaseApiRoute.ts |   3 +
 .../public-project/components/tables/index.ts |   1 +
 .../modules/PublicProjectModuleMobileCard.tsx |  68 +++++++++++
 .../tables/modules/PublicProjectModuleRow.tsx | 107 +++++++++++++++++
 .../components/tables/modules/index.tsx       | 110 ++++++++++++++++++
 src/lib/pages/public-project/data.ts          |   3 +
 src/lib/pages/public-project/slug.tsx         |  26 ++++-
 src/lib/services/publicProjectService.ts      |  36 ++++++
 src/lib/types/projects.ts                     |  19 +++
 10 files changed, 373 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
 create mode 100644 src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
 create mode 100644 src/lib/pages/public-project/components/tables/modules/index.tsx

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 24ff47333..4ed519eab 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -75,6 +75,7 @@ export enum CELATONE_QUERY_KEYS {
   PUBLIC_PROJECT_BY_CONTRACT_ADDRESS = "CELATONE_QUERY_PUBLIC_PROJECT_BY_CONTRACT_ADDRESS",
   PUBLIC_PROJECT_BY_CODE_ID = "CELATONE_QUERY_PUBLIC_PROJECT_BY_CODE_ID",
   PUBLIC_PROJECT_BY_WALLET_ADDRESS = "CELATONE_QUERY_PUBLIC_PROJECT_BY_WALLET_ADDRESS",
+  PUBLIC_PROJECT_BY_MODULE_PATH = "CELATONE_QUERY_PUBLIC_PROJECT_BY_MODULE_PATH",
   // TX
   TX_DATA = "CELATONE_QUERY_TX_DATA",
   TXS_BY_ADDRESS_PAGINATION = "CELATONE_QUERY_TXS_BY_ADDRESS_PAGINATION",
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index b9cf4862e..19373b285 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -15,6 +15,7 @@ export const useBaseApiRoute = (
     | "icns_address"
     | "native_tokens"
     | "cosmwasm"
+    | "move_modules"
 ): string => {
   const {
     chainConfig: { chain, api: configApi },
@@ -53,6 +54,8 @@ export const useBaseApiRoute = (
       return `${api}/native-assets/${chain}/${currentChainId}`;
     case "cosmwasm":
       return `${api}/cosmwasm/${chain}/${currentChainId}`;
+    case "move_modules":
+      return `${api}/${chain}/${currentChainId}/move_modules`;
     default:
       throw new Error(
         "Error retrieving chain, api, or currentChainId from chain config."
diff --git a/src/lib/pages/public-project/components/tables/index.ts b/src/lib/pages/public-project/components/tables/index.ts
index 1c103833a..ed27af302 100644
--- a/src/lib/pages/public-project/components/tables/index.ts
+++ b/src/lib/pages/public-project/components/tables/index.ts
@@ -1,3 +1,4 @@
 export * from "./accounts";
 export * from "./codes";
 export * from "./contracts";
+export * from "./modules";
diff --git a/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
new file mode 100644
index 000000000..bf2d86b9a
--- /dev/null
+++ b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
@@ -0,0 +1,68 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
+import type { Module } from "lib/types";
+import { truncate } from "lib/utils";
+
+interface PublicProjectModuleMobileCardProps {
+  module: Module;
+}
+export const PublicProjectModuleMobileCard = ({
+  module,
+}: PublicProjectModuleMobileCardProps) => {
+  const navigate = useInternalNavigate();
+  const goToDetail = () => {
+    navigate({
+      replace: true,
+      pathname: "/modules/[address]/[moduleName]/[tab]",
+      query: {
+        address: module.address,
+        moduleName: module.name,
+        tab: "overview",
+      },
+      options: {
+        shallow: true,
+      },
+    });
+  };
+
+  return (
+    <MobileCardTemplate
+      onClick={goToDetail}
+      topContent={
+        <Flex direction="column">
+          <MobileLabel variant="body2" label="Module Path" />
+          <Text
+            variant="body2"
+            onClick={goToDetail}
+            color="primary.main"
+            transition="all 0.25s ease-in-out"
+            _hover={{
+              textDecoration: "underline",
+              textDecorationColor: "primary.light",
+              "& > p": { color: "primary.light" },
+            }}
+          >
+            {truncate(module.address)}::{module.name}
+          </Text>
+        </Flex>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column">
+            <MobileLabel variant="body2" label="Owner" />
+            <ExplorerLink value={module.address} type="user_address" />
+          </Flex>
+          <Flex direction="column">
+            <MobileLabel variant="body2" label="Description" />
+            <Text variant="body2" color="text.dark" whiteSpace="break-spaces">
+              {module.description || "N/A"}
+            </Text>
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
new file mode 100644
index 000000000..e4a924618
--- /dev/null
+++ b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
@@ -0,0 +1,107 @@
+import { Button, Flex, Grid, Text } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { TableRow } from "lib/components/table";
+import type { Module } from "lib/types";
+import { truncate } from "lib/utils";
+
+interface ModuleTableRowProps {
+  module: Module;
+  templateColumns: string;
+}
+
+export const PublicProjectModuleRow = ({
+  module,
+  templateColumns,
+}: ModuleTableRowProps) => {
+  const navigate = useInternalNavigate();
+  const goToDetail = () => {
+    navigate({
+      replace: true,
+      pathname: "/modules/[address]/[moduleName]/[tab]",
+      query: {
+        address: module.address,
+        moduleName: module.name,
+        tab: "overview",
+      },
+      options: {
+        shallow: true,
+      },
+    });
+  };
+
+  return (
+    <Grid
+      templateColumns={templateColumns}
+      onClick={goToDetail}
+      _hover={{ bg: "gray.900" }}
+      transition="all 0.25s ease-in-out"
+      cursor="pointer"
+      minW="min-content"
+    >
+      <TableRow>
+        <Text
+          onClick={goToDetail}
+          color="primary.main"
+          transition="all 0.25s ease-in-out"
+          _hover={{
+            textDecoration: "underline",
+            textDecorationColor: "primary.light",
+            "& > p": { color: "primary.light" },
+          }}
+        >
+          {truncate(module.address)}::{module.name}
+        </Text>
+      </TableRow>
+      <TableRow>
+        <ExplorerLink
+          value={module.address}
+          type="user_address"
+          showCopyOnHover
+        />
+      </TableRow>
+      <TableRow>
+        <Text variant="body2" color="text.dark" whiteSpace="break-spaces">
+          {module.description || "N/A"}
+        </Text>
+      </TableRow>
+      <TableRow>
+        <Flex gap={2} onClick={(e) => e.stopPropagation()}>
+          <Button
+            variant="outline-white"
+            size="sm"
+            onClick={() =>
+              navigate({
+                pathname: "/interact",
+                query: {
+                  address: module.address,
+                  moduleName: module.name,
+                  functionType: "view",
+                },
+              })
+            }
+          >
+            View
+          </Button>
+          <Button
+            variant="outline-white"
+            size="sm"
+            onClick={() =>
+              navigate({
+                pathname: "/interact",
+                query: {
+                  address: module.address,
+                  moduleName: module.name,
+                  functionType: "execute",
+                },
+              })
+            }
+          >
+            Execute
+          </Button>
+        </Flex>
+      </TableRow>
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/public-project/components/tables/modules/index.tsx b/src/lib/pages/public-project/components/tables/modules/index.tsx
new file mode 100644
index 000000000..9ab1ea9d7
--- /dev/null
+++ b/src/lib/pages/public-project/components/tables/modules/index.tsx
@@ -0,0 +1,110 @@
+import { Grid, Box } from "@chakra-ui/react";
+import { matchSorter } from "match-sorter";
+import { useMemo, useState } from "react";
+
+import { useMobile } from "lib/app-provider";
+import { TextInput } from "lib/components/forms";
+import { EmptyState } from "lib/components/state";
+import {
+  MobileTableContainer,
+  TableContainer,
+  TableHeader,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
+import type { Module } from "lib/types";
+
+import { PublicProjectModuleMobileCard } from "./PublicProjectModuleMobileCard";
+import { PublicProjectModuleRow } from "./PublicProjectModuleRow";
+
+interface PublicProjectModuleTableProps {
+  modules: Module[];
+  onViewMore?: () => void;
+}
+
+const TEMPLATE_COLUMNS = "320px 160px minmax(250px, 1fr) 160px";
+
+const ModuleTableHeader = () => (
+  <Grid templateColumns={TEMPLATE_COLUMNS} minW="min-content">
+    <TableHeader>Module Path</TableHeader>
+    <TableHeader>Owner</TableHeader>
+    <TableHeader>Module Description</TableHeader>
+    <TableHeader />
+  </Grid>
+);
+
+const ContentRender = ({
+  filteredModules,
+  isMobile,
+}: {
+  filteredModules: Module[];
+  isMobile: boolean;
+}) =>
+  isMobile ? (
+    <MobileTableContainer>
+      {filteredModules.map((module) => (
+        <PublicProjectModuleMobileCard
+          key={`sm-${module.address}::${module.name}`}
+          module={module}
+        />
+      ))}
+    </MobileTableContainer>
+  ) : (
+    <TableContainer mb={4}>
+      <ModuleTableHeader />
+      {filteredModules.map((module) => (
+        <PublicProjectModuleRow
+          key={`${module.address}::${module.name}`}
+          module={module}
+          templateColumns={TEMPLATE_COLUMNS}
+        />
+      ))}
+    </TableContainer>
+  );
+
+export const PublicProjectModuleTable = ({
+  modules = [],
+  onViewMore,
+}: PublicProjectModuleTableProps) => {
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const isMobile = useMobile();
+
+  const filteredModules = useMemo(() => {
+    return onViewMore
+      ? modules.slice(0, 5)
+      : matchSorter(modules, searchKeyword, {
+          keys: ["name", "address", "description"],
+          threshold: matchSorter.rankings.CONTAINS,
+        });
+  }, [modules, onViewMore, searchKeyword]);
+
+  return (
+    <Box mt={{ base: 8, md: 12 }} mb={4}>
+      <TableTitle title="Modules" count={modules.length} />
+      {!onViewMore && (
+        <TextInput
+          variant="fixed-floating"
+          value={searchKeyword}
+          setInputState={setSearchKeyword}
+          placeholder="Search with Module address or Module name"
+          size={{ base: "md", md: "lg" }}
+          mb={6}
+        />
+      )}
+      {filteredModules.length ? (
+        <ContentRender filteredModules={filteredModules} isMobile={isMobile} />
+      ) : (
+        <EmptyState
+          message={
+            modules.length
+              ? "No matching module found for this project. Make sure you are searching with Account Address or Account Name"
+              : "There is currently no modules related to this project."
+          }
+          imageVariant={onViewMore && "empty"}
+          withBorder
+        />
+      )}
+      {modules.length > 5 && onViewMore && <ViewMore onClick={onViewMore} />}
+    </Box>
+  );
+};
diff --git a/src/lib/pages/public-project/data.ts b/src/lib/pages/public-project/data.ts
index a8ae5ed0d..04b119ae0 100644
--- a/src/lib/pages/public-project/data.ts
+++ b/src/lib/pages/public-project/data.ts
@@ -7,6 +7,7 @@ import type {
   PublicDetail,
   Option,
   Account,
+  Module,
 } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
@@ -14,6 +15,7 @@ interface PublicDataState {
   publicCodes: PublicCode[];
   publicContracts: PublicContract[];
   publicAccounts: Account[];
+  publicModules: Module[];
   projectDetail: Option<PublicDetail>;
   slug: string;
   isLoading: boolean;
@@ -29,6 +31,7 @@ export const usePublicData = (): PublicDataState => {
     publicCodes: projectInfo?.codes || [],
     publicContracts: projectInfo?.contracts || [],
     publicAccounts: projectInfo?.accounts || [],
+    publicModules: projectInfo?.modules || [],
     projectDetail: projectInfo?.details,
     slug: projectSlug,
     isLoading,
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 8409c6ddb..5ac8e293e 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -7,6 +7,7 @@ import {
   usePublicProjectConfig,
   useWasmConfig,
   useInternalNavigate,
+  useMoveConfig,
 } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
@@ -18,6 +19,7 @@ import {
   PublicProjectAccountTable,
   PublicProjectCodeTable,
   PublicProjectContractTable,
+  PublicProjectModuleTable,
 } from "./components/tables";
 import { usePublicData } from "./data";
 
@@ -26,12 +28,14 @@ enum TabIndex {
   Codes = "codes",
   Contracts = "contracts",
   Accounts = "accounts",
+  Modules = "modules",
 }
 
 const ProjectDetail = () => {
   const { track } = useTrack();
   const router = useRouter();
   const wasm = useWasmConfig({ shouldRedirect: false });
+  const move = useMoveConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
   // TODO: remove assertion later
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
@@ -39,6 +43,7 @@ const ProjectDetail = () => {
     publicCodes,
     publicContracts,
     publicAccounts,
+    publicModules,
     projectDetail,
     slug,
     isLoading,
@@ -81,7 +86,8 @@ const ProjectDetail = () => {
 
   const overviewCount =
     publicAccounts.length +
-    (wasm.enabled ? publicCodes.length + publicContracts.length : 0);
+    (wasm.enabled ? publicCodes.length + publicContracts.length : 0) +
+    (move.enabled ? publicModules.length : 0);
 
   if (isLoading) return <Loading withBorder />;
   return (
@@ -127,6 +133,15 @@ const ProjectDetail = () => {
           >
             Accounts
           </CustomTab>
+          {move.enabled && (
+            <CustomTab
+              count={publicModules.length}
+              isDisabled={!publicModules.length}
+              onClick={handleTabChange(TabIndex.Modules)}
+            >
+              Modules
+            </CustomTab>
+          )}
         </TabList>
         <TabPanels my={8}>
           <TabPanel p={0}>
@@ -146,6 +161,12 @@ const ProjectDetail = () => {
               accounts={publicAccounts}
               onViewMore={handleTabChange(TabIndex.Accounts)}
             />
+            {move.enabled && (
+              <PublicProjectModuleTable
+                modules={publicModules}
+                onViewMore={handleTabChange(TabIndex.Modules)}
+              />
+            )}
           </TabPanel>
           <TabPanel p={0}>
             <PublicProjectCodeTable codes={publicCodes} />
@@ -156,6 +177,9 @@ const ProjectDetail = () => {
           <TabPanel p={0}>
             <PublicProjectAccountTable accounts={publicAccounts} />
           </TabPanel>
+          <TabPanel p={0}>
+            <PublicProjectModuleTable modules={publicModules} />
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </PageContainer>
diff --git a/src/lib/services/publicProjectService.ts b/src/lib/services/publicProjectService.ts
index 1b30b6041..abc961dc6 100644
--- a/src/lib/services/publicProjectService.ts
+++ b/src/lib/services/publicProjectService.ts
@@ -6,6 +6,7 @@ import { useCallback } from "react";
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
+  useMoveConfig,
   usePublicProjectConfig,
   useWasmConfig,
 } from "lib/app-provider";
@@ -18,6 +19,7 @@ import type {
   RawPublicProjectInfo,
   PublicCode,
   RawPublicCode,
+  PublicModule,
 } from "lib/types";
 import { isCodeId } from "lib/utils";
 
@@ -176,3 +178,37 @@ export const usePublicProjectByAccountAddress = (
     }
   );
 };
+
+export const usePublicProjectByModulePath = (
+  address: Option<string>,
+  name: Option<string>
+): UseQueryResult<PublicModule> => {
+  const projectsApiRoute = useBaseApiRoute("move_modules");
+  const projectConfig = usePublicProjectConfig({ shouldRedirect: false });
+  const moveConfig = useMoveConfig({ shouldRedirect: false });
+
+  const queryFn = useCallback(async () => {
+    if (!address)
+      throw new Error(
+        "Module address not found (usePublicProjectByContractAddress)"
+      );
+    return axios
+      .get<PublicModule>(`${projectsApiRoute}/${address}/${name}`)
+      .then(({ data: projectInfo }) => projectInfo);
+  }, [projectsApiRoute, address, name]);
+
+  return useQuery(
+    [
+      CELATONE_QUERY_KEYS.PUBLIC_PROJECT_BY_MODULE_PATH,
+      projectsApiRoute,
+      address,
+      name,
+    ],
+    queryFn,
+    {
+      enabled: Boolean(address) && projectConfig.enabled && moveConfig.enabled,
+      retry: false,
+      refetchOnWindowFocus: false,
+    }
+  );
+};
diff --git a/src/lib/types/projects.ts b/src/lib/types/projects.ts
index 3b5fd0d80..39ac33698 100644
--- a/src/lib/types/projects.ts
+++ b/src/lib/types/projects.ts
@@ -7,6 +7,7 @@ import type {
   PermissionAddresses,
   Option,
   Nullable,
+  MoveAccountAddr,
 } from "lib/types";
 
 export interface Account {
@@ -17,6 +18,14 @@ export interface Account {
   type: string;
 }
 
+export interface Module {
+  address: MoveAccountAddr;
+  description: string;
+  github: string;
+  name: string;
+  slug: string;
+}
+
 export interface RawPublicCode {
   description: string;
   id: number;
@@ -65,6 +74,7 @@ export interface RawPublicProjectInfo {
   assets: AssetInfo;
   codes: RawPublicCode[];
   contracts: RawPublicContract[];
+  modules: Module[];
   details: PublicDetail;
   slug: string;
 }
@@ -78,6 +88,7 @@ export interface PublicProjectInfo {
   assets: AssetInfo;
   codes: PublicCode[];
   contracts: PublicContract[];
+  modules: Module[];
   details: PublicDetail;
   slug: string;
 }
@@ -89,3 +100,11 @@ export interface PublicInfo {
   description: string;
   github: string;
 }
+
+export interface PublicModule {
+  address: MoveAccountAddr;
+  name: string;
+  description: string;
+  github: string;
+  slug: string;
+}

From 6de1f2dffb0c61cc8e2a7023d9d97d92453d289f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 1 Nov 2023 15:59:09 +0700
Subject: [PATCH 284/368] fix(components): add change log

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 805680cc9..12ed25a49 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#600](https://github.com/alleslabs/celatone-frontend/pull/600) Add modules in public project
 - [#583](https://github.com/alleslabs/celatone-frontend/pull/583) Support Move code snippets
 - [#585](https://github.com/alleslabs/celatone-frontend/pull/585) Add Initia Faucet
 - [#562](https://github.com/alleslabs/celatone-frontend/pull/562) Support searching with hex address and module path

From f07ec3b12b82516cc954ad60844c34f36d74a5aa Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 17:17:53 +0700
Subject: [PATCH 285/368] fix: wallet modal

---
 src/lib/styles/globals.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/styles/globals.css b/src/lib/styles/globals.css
index ed1ceb774..557c995bb 100644
--- a/src/lib/styles/globals.css
+++ b/src/lib/styles/globals.css
@@ -1,4 +1,9 @@
 /* Global Styling here */
+div[data-floating-ui-portal] {
+  position: relative;
+  z-index: 9999;
+}
+
 .copier-wrapper:hover .copier {
   display: inline;
 }

From 375a33ce59afa2e5768f939a9d6d7baad6990a5c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 17:30:31 +0700
Subject: [PATCH 286/368] fix: test

---
 src/lib/utils/assetValue.test.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/lib/utils/assetValue.test.ts b/src/lib/utils/assetValue.test.ts
index ea510e81f..a4eae6923 100644
--- a/src/lib/utils/assetValue.test.ts
+++ b/src/lib/utils/assetValue.test.ts
@@ -399,32 +399,35 @@ describe("calTotalValue", () => {
 });
 
 describe("addTokenWithValue", () => {
-  const tokenWithValue1 = {
+  const tokenWithValue1: TokenWithValue = {
+    isLPToken: false,
     denom: "uadenom",
     amount: big(100) as U<Token<Big>>,
     precision: 6,
     value: big(200) as USD<Big>,
     symbol: "",
     logo: "",
-  } as TokenWithValue;
+  };
 
-  const tokenWithValue2 = {
+  const tokenWithValue2: TokenWithValue = {
+    isLPToken: false,
     denom: "uadenom",
     amount: big(100) as U<Token<Big>>,
     precision: 6,
     value: big(3500) as USD<Big>,
     symbol: "",
     logo: "",
-  } as TokenWithValue;
+  };
 
-  const tokenWithValue3 = {
+  const tokenWithValue3: TokenWithValue = {
+    isLPToken: false,
     denom: "ubdenom",
     amount: big(100) as U<Token<Big>>,
     precision: 6,
     value: big(3500) as USD<Big>,
     symbol: "",
     logo: "",
-  } as TokenWithValue;
+  };
 
   test("no old total value", () => {
     expect(addTokenWithValue(undefined, tokenWithValue1)).toEqual(
@@ -451,6 +454,7 @@ describe("addTokenWithValue", () => {
 
   test("invalid, when denoms are not the same", () => {
     expect(addTokenWithValue(tokenWithValue1, tokenWithValue3)).toEqual({
+      isLPToken: false,
       denom: "",
       amount: big(0) as U<Token<Big>>,
       precision: undefined,
@@ -459,6 +463,7 @@ describe("addTokenWithValue", () => {
       logo: undefined,
     });
     expect(addTokenWithValue(tokenWithValue1, tokenWithValue3)).toEqual({
+      isLPToken: false,
       denom: "",
       amount: big(0) as U<Token<Big>>,
       precision: undefined,

From 0ac9c21b1653ed7114d8e63bc10cef310348b431 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 17:35:02 +0700
Subject: [PATCH 287/368] fix: type

---
 src/lib/types/asset.ts           |  4 ++--
 src/lib/utils/assetValue.test.ts | 15 +++++++++------
 src/lib/utils/assetValue.ts      |  8 +++++---
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts
index d2c41734b..b5b38bad9 100644
--- a/src/lib/types/asset.ts
+++ b/src/lib/types/asset.ts
@@ -10,7 +10,7 @@ export type TokenWithValue =
       symbol: Option<string>;
       logo: Option<string>;
       precision: Option<number>;
-      price?: Option<USD<Big>>;
+      price: Option<USD<Big>>;
       value: Option<USD<Big>>;
     }
   | {
@@ -20,7 +20,7 @@ export type TokenWithValue =
       symbol: Option<string>;
       logo: Option<string[]>;
       precision: Option<number>;
-      price?: Option<USD<Big>>;
+      price: Option<USD<Big>>;
       value: Option<USD<Big>>;
       lpDetails: LPDetails;
     };
diff --git a/src/lib/utils/assetValue.test.ts b/src/lib/utils/assetValue.test.ts
index a4eae6923..36ad17501 100644
--- a/src/lib/utils/assetValue.test.ts
+++ b/src/lib/utils/assetValue.test.ts
@@ -403,30 +403,33 @@ describe("addTokenWithValue", () => {
     isLPToken: false,
     denom: "uadenom",
     amount: big(100) as U<Token<Big>>,
-    precision: 6,
-    value: big(200) as USD<Big>,
     symbol: "",
     logo: "",
+    precision: 6,
+    price: big(0) as USD<Big>,
+    value: big(200) as USD<Big>,
   };
 
   const tokenWithValue2: TokenWithValue = {
     isLPToken: false,
     denom: "uadenom",
     amount: big(100) as U<Token<Big>>,
-    precision: 6,
-    value: big(3500) as USD<Big>,
     symbol: "",
     logo: "",
+    precision: 6,
+    price: big(0) as USD<Big>,
+    value: big(3500) as USD<Big>,
   };
 
   const tokenWithValue3: TokenWithValue = {
     isLPToken: false,
     denom: "ubdenom",
     amount: big(100) as U<Token<Big>>,
-    precision: 6,
-    value: big(3500) as USD<Big>,
     symbol: "",
     logo: "",
+    precision: 6,
+    price: big(0) as USD<Big>,
+    value: big(3500) as USD<Big>,
   };
 
   test("no old total value", () => {
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 1bb1adb29..250f9f66c 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -57,6 +57,10 @@ export const coinToTokenWithValue = (
         symbol: lpDetails.symbol,
         logo: lpDetails.image,
         precision: lpDetails.precision,
+        price: lpDetails.lpPricePerShare as USD<Big>,
+        value: tokenAmount
+          .times(lpDetails.lpPricePerShare)
+          .div(big(10).pow(lpDetails.precision)) as USD<Big>,
         lpDetails: {
           coinA: {
             amount: formatUTokenWithPrecision(
@@ -79,9 +83,6 @@ export const coinToTokenWithValue = (
             symbol: lpDetails.coinB.symbol,
           },
         },
-        value: tokenAmount
-          .times(lpDetails.lpPricePerShare)
-          .div(big(10).pow(lpDetails.precision)) as USD<Big>,
       }
     : {
         isLPToken: false,
@@ -118,6 +119,7 @@ export const addTokenWithValue = (
         symbol: undefined,
         logo: undefined,
         precision: undefined,
+        price: big(0) as USD<Big>,
         value: big(0) as USD<Big>,
       };
 };

From d42a5dae183ce1de595ed7554ca855de6d8c6636 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 17:45:22 +0700
Subject: [PATCH 288/368] fix: test

---
 src/lib/utils/assetValue.test.ts | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/lib/utils/assetValue.test.ts b/src/lib/utils/assetValue.test.ts
index 36ad17501..366a57399 100644
--- a/src/lib/utils/assetValue.test.ts
+++ b/src/lib/utils/assetValue.test.ts
@@ -406,8 +406,8 @@ describe("addTokenWithValue", () => {
     symbol: "",
     logo: "",
     precision: 6,
-    price: big(0) as USD<Big>,
-    value: big(200) as USD<Big>,
+    price: big(35) as USD<Big>,
+    value: big(3500) as USD<Big>,
   };
 
   const tokenWithValue2: TokenWithValue = {
@@ -417,7 +417,7 @@ describe("addTokenWithValue", () => {
     symbol: "",
     logo: "",
     precision: 6,
-    price: big(0) as USD<Big>,
+    price: big(35) as USD<Big>,
     value: big(3500) as USD<Big>,
   };
 
@@ -428,8 +428,8 @@ describe("addTokenWithValue", () => {
     symbol: "",
     logo: "",
     precision: 6,
-    price: big(0) as USD<Big>,
-    value: big(3500) as USD<Big>,
+    price: big(2) as USD<Big>,
+    value: big(400) as USD<Big>,
   };
 
   test("no old total value", () => {
@@ -439,13 +439,15 @@ describe("addTokenWithValue", () => {
   });
 
   test("old value + new value", () => {
-    const expectResult = {
+    const expectResult: TokenWithValue = {
+      isLPToken: false,
       denom: "uadenom",
       amount: big(200) as U<Token<Big>>,
-      precision: 6,
-      value: big(3700) as USD<Big>,
       symbol: "",
+      precision: 6,
       logo: "",
+      price: big(35) as USD<Big>,
+      value: big(7000) as USD<Big>,
     };
     expect(addTokenWithValue(tokenWithValue1, tokenWithValue2)).toEqual(
       expectResult
@@ -460,19 +462,21 @@ describe("addTokenWithValue", () => {
       isLPToken: false,
       denom: "",
       amount: big(0) as U<Token<Big>>,
-      precision: undefined,
-      value: big(0) as USD<Big>,
       symbol: undefined,
+      precision: undefined,
       logo: undefined,
+      price: big(0) as USD<Big>,
+      value: big(0) as USD<Big>,
     });
     expect(addTokenWithValue(tokenWithValue1, tokenWithValue3)).toEqual({
       isLPToken: false,
       denom: "",
       amount: big(0) as U<Token<Big>>,
-      precision: undefined,
-      value: big(0) as USD<Big>,
       symbol: undefined,
+      precision: undefined,
       logo: undefined,
+      price: big(0) as USD<Big>,
+      value: big(0) as USD<Big>,
     });
   });
 });

From 6d82df44a6ec4a35d8ed1f4d9082f057b8d22471 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 1 Nov 2023 18:03:19 +0700
Subject: [PATCH 289/368] fix: formatter

---
 .../json-schema/MessageInputSwitch.tsx        |   4 +-
 src/lib/components/modal/MoveCodeSnippet.tsx  |   9 +-
 src/lib/gql/gql.ts                            | 108 +++++++++---------
 .../components/modules/ModuleListsBody.tsx    |   5 +-
 .../components/json-schema/SchemaPanel.tsx    |   2 +-
 src/lib/pages/instantiate/instantiate.tsx     |   2 +-
 .../migrate/components/MigrateContract.tsx    |   2 +-
 .../tables/pool-assets/PoolAssetsTableRow.tsx |   5 +-
 src/lib/pages/proposal/constants.tsx          |   2 +-
 .../query/components/SchemaQueryResponse.tsx  |   2 +-
 .../tx-message/msg-receipts/CoinComponent.tsx |   2 +-
 src/lib/types/pool.ts                         |   4 +-
 src/lib/utils/contractState.ts                |  25 ++--
 src/lib/utils/proposal.ts                     |   7 +-
 14 files changed, 91 insertions(+), 88 deletions(-)

diff --git a/src/lib/components/json-schema/MessageInputSwitch.tsx b/src/lib/components/json-schema/MessageInputSwitch.tsx
index 2879a7f7e..8cf24eadb 100644
--- a/src/lib/components/json-schema/MessageInputSwitch.tsx
+++ b/src/lib/components/json-schema/MessageInputSwitch.tsx
@@ -21,7 +21,7 @@ export const jsonInputFormKey = MessageTabs.JSON_INPUT as "JSON Input";
 export const yourSchemaInputFormKey = MessageTabs.YOUR_SCHEMA as "Your Schema";
 
 interface MessageInputSwitchProps<
-  T extends Option<MessageTabs | OutputMessageTabs>
+  T extends Option<MessageTabs | OutputMessageTabs>,
 > {
   currentTab: T;
   disabled?: boolean;
@@ -32,7 +32,7 @@ interface MessageInputSwitchProps<
 }
 
 export const MessageInputSwitch = <
-  T extends Option<MessageTabs | OutputMessageTabs>
+  T extends Option<MessageTabs | OutputMessageTabs>,
 >({
   currentTab,
   disabled = false,
diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
index 6c950375b..cffde936c 100644
--- a/src/lib/components/modal/MoveCodeSnippet.tsx
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -203,11 +203,10 @@ const msg = new MsgExecute(
     '${moduleAddress}',
     '${moduleName}',
     '${fn.name}'${showTypeArgs ? ",\n\t".concat(formatedTypeArgs) : ""}${
-          showArgs
-            ? (!showTypeArgs ? ",\n\tundefined" : "") +
-              ",\n\t".concat(formatedArgs)
-            : ""
-        }
+      showArgs
+        ? (!showTypeArgs ? ",\n\tundefined" : "") + ",\n\t".concat(formatedArgs)
+        : ""
+    }
 );
 
 const execute = async () => {
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 2b0e7f68b..cc69d2dd5 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -115,166 +115,166 @@ const documents = {
 
 export function graphql(
   source: "\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"
-): typeof documents["\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"];
+): (typeof documents)["\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"
-): typeof documents["\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"];
+): (typeof documents)["\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"
-): typeof documents["\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"
-): typeof documents["\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"
-): typeof documents["\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"];
+): (typeof documents)["\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockTime {\n    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {\n      height\n      timestamp\n    }\n    latest: blocks(order_by: { height: desc }, limit: 1) {\n      height\n      timestamp\n    }\n  }\n"
-): typeof documents["\n  query getBlockTime {\n    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {\n      height\n      timestamp\n    }\n    latest: blocks(order_by: { height: desc }, limit: 1) {\n      height\n      timestamp\n    }\n  }\n"];
+): (typeof documents)["\n  query getBlockTime {\n    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {\n      height\n      timestamp\n    }\n    latest: blocks(order_by: { height: desc }, limit: 1) {\n      height\n      timestamp\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getCodeListQuery {\n    codes(limit: 100, offset: 0, order_by: { id: desc }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
-): typeof documents["\n  query getCodeListQuery {\n    codes(limit: 100, offset: 0, order_by: { id: desc }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+): (typeof documents)["\n  query getCodeListQuery {\n    codes(limit: 100, offset: 0, order_by: { id: desc }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
-): typeof documents["\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+): (typeof documents)["\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
-): typeof documents["\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+): (typeof documents)["\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getCodeDataByCodeId($codeId: Int!) {\n    codes_by_pk(id: $codeId) {\n      id\n      account {\n        address\n      }\n      transaction {\n        hash\n        block {\n          height\n          timestamp\n        }\n      }\n      # Can only have 1 store code proposal\n      code_proposals(limit: 1) {\n        proposal_id\n        block {\n          height\n          timestamp\n        }\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
-): typeof documents["\n  query getCodeDataByCodeId($codeId: Int!) {\n    codes_by_pk(id: $codeId) {\n      id\n      account {\n        address\n      }\n      transaction {\n        hash\n        block {\n          height\n          timestamp\n        }\n      }\n      # Can only have 1 store code proposal\n      code_proposals(limit: 1) {\n        proposal_id\n        block {\n          height\n          timestamp\n        }\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+): (typeof documents)["\n  query getCodeDataByCodeId($codeId: Int!) {\n    codes_by_pk(id: $codeId) {\n      id\n      account {\n        address\n      }\n      transaction {\n        hash\n        block {\n          height\n          timestamp\n        }\n      }\n      # Can only have 1 store code proposal\n      code_proposals(limit: 1) {\n        proposal_id\n        block {\n          height\n          timestamp\n        }\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getCodeListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    codes(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
-): typeof documents["\n  query getCodeListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    codes(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+): (typeof documents)["\n  query getCodeListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    codes(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getContractByContractAddressQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      address\n      code_id\n      label\n      accountByInitBy {\n        address\n      }\n      admin: account {\n        address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractByContractAddressQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      address\n      code_id\n      label\n      accountByInitBy {\n        address\n      }\n      admin: account {\n        address\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getContractByContractAddressQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      address\n      code_id\n      label\n      accountByInitBy {\n        address\n      }\n      admin: account {\n        address\n      }\n    }\n  }\n"];
 export function graphql(
   source: '\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
-): typeof documents['\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
+): (typeof documents)['\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
 export function graphql(
   source: "\n  query getContractListQuery {\n    contracts(limit: 100, offset: 0, order_by: { id: desc }) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListQuery {\n    contracts(limit: 100, offset: 0, order_by: { id: desc }) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getContractListQuery {\n    contracts(limit: 100, offset: 0, order_by: { id: desc }) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getAdminByContractAddressesQueryDocument(\n    $contractAddresses: [String!]!\n  ) {\n    contracts(where: { address: { _in: $contractAddresses } }) {\n      address\n      admin: account {\n        address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getAdminByContractAddressesQueryDocument(\n    $contractAddresses: [String!]!\n  ) {\n    contracts(where: { address: { _in: $contractAddresses } }) {\n      address\n      admin: account {\n        address\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getAdminByContractAddressesQueryDocument(\n    $contractAddresses: [String!]!\n  ) {\n    contracts(where: { address: { _in: $contractAddresses } }) {\n      address\n      admin: account {\n        address\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getContractListByAdmin($address: String!) {\n    contracts(\n      where: { account: { address: { _eq: $address } } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListByAdmin($address: String!) {\n    contracts(\n      where: { account: { address: { _eq: $address } } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getContractListByAdmin($address: String!) {\n    contracts(\n      where: { account: { address: { _eq: $address } } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getContractListByCodeIdPagination(\n    $codeId: Int!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { code_id: { _eq: $codeId } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListByCodeIdPagination(\n    $codeId: Int!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { code_id: { _eq: $codeId } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getContractListByCodeIdPagination(\n    $codeId: Int!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { code_id: { _eq: $codeId } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getContractListCountByCodeId($codeId: Int!) {\n    contracts_aggregate(where: { code_id: { _eq: $codeId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListCountByCodeId($codeId: Int!) {\n    contracts_aggregate(where: { code_id: { _eq: $codeId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getContractListCountByCodeId($codeId: Int!) {\n    contracts_aggregate(where: { code_id: { _eq: $codeId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getMigrationHistoriesByContractAddress(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_histories(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { block: { timestamp: desc } }\n      limit: $pageSize\n      offset: $offset\n    ) {\n      code_id\n      account {\n        address\n      }\n      block {\n        height\n        timestamp\n      }\n      remark\n      code {\n        account {\n          address\n        }\n        cw2_contract\n        cw2_version\n      }\n    }\n  }\n"
-): typeof documents["\n  query getMigrationHistoriesByContractAddress(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_histories(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { block: { timestamp: desc } }\n      limit: $pageSize\n      offset: $offset\n    ) {\n      code_id\n      account {\n        address\n      }\n      block {\n        height\n        timestamp\n      }\n      remark\n      code {\n        account {\n          address\n        }\n        cw2_contract\n        cw2_version\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getMigrationHistoriesByContractAddress(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_histories(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { block: { timestamp: desc } }\n      limit: $pageSize\n      offset: $offset\n    ) {\n      code_id\n      account {\n        address\n      }\n      block {\n        height\n        timestamp\n      }\n      remark\n      code {\n        account {\n          address\n        }\n        cw2_contract\n        cw2_version\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getMigrationHistoriesCountByContractAddress($contractAddress: String!) {\n    contract_histories_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getMigrationHistoriesCountByContractAddress($contractAddress: String!) {\n    contract_histories_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getMigrationHistoriesCountByContractAddress($contractAddress: String!) {\n    contract_histories_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: {\n        contract_histories_aggregate: { max: { block_height: desc } }\n      }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: {\n        contract_histories_aggregate: { max: { block_height: desc } }\n      }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: {\n        contract_histories_aggregate: { max: { block_height: desc } }\n      }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getContractListByAdminPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListByAdminPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getContractListByAdminPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"
-): typeof documents["\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"];
+): (typeof documents)["\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getModuleHistoriesQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_histories(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block: { height: desc } }\n    ) {\n      remark\n      block {\n        height\n        timestamp\n      }\n      upgrade_policy\n    }\n  }\n"
-): typeof documents["\n  query getModuleHistoriesQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_histories(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block: { height: desc } }\n    ) {\n      remark\n      block {\n        height\n        timestamp\n      }\n      upgrade_policy\n    }\n  }\n"];
+): (typeof documents)["\n  query getModuleHistoriesQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_histories(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block: { height: desc } }\n    ) {\n      remark\n      block {\n        height\n        timestamp\n      }\n      upgrade_policy\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: '\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
-): typeof documents['\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
+): (typeof documents)['\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
 export function graphql(
   source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
-): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
+): (typeof documents)["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
-): typeof documents["\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
+): (typeof documents)["\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n      spread_factor\n      tick_spacing\n      contract_address\n    }\n  }\n"
-): typeof documents["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n      spread_factor\n      tick_spacing\n      contract_address\n    }\n  }\n"];
+): (typeof documents)["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n      spread_factor\n      tick_spacing\n      contract_address\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"
-): typeof documents["\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"];
+): (typeof documents)["\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"
-): typeof documents["\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"];
+): (typeof documents)["\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n      is_expedited\n      resolved_height\n    }\n  }\n"
-): typeof documents["\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n      is_expedited\n      resolved_height\n    }\n  }\n"];
+): (typeof documents)["\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n      is_expedited\n      resolved_height\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getProposalsCountByWalletAddress($walletAddress: String!) {\n    proposals_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getProposalsCountByWalletAddress($walletAddress: String!) {\n    proposals_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getProposalsCountByWalletAddress($walletAddress: String!) {\n    proposals_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getProposalList(\n    $expression: proposals_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: $expression\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      type\n      id\n      title\n      voting_end_time\n      deposit_end_time\n      resolved_height\n      status\n      is_expedited\n      account {\n        address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getProposalList(\n    $expression: proposals_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: $expression\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      type\n      id\n      title\n      voting_end_time\n      deposit_end_time\n      resolved_height\n      status\n      is_expedited\n      account {\n        address\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getProposalList(\n    $expression: proposals_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: $expression\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      type\n      id\n      title\n      voting_end_time\n      deposit_end_time\n      resolved_height\n      status\n      is_expedited\n      account {\n        address\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getProposalListCount($expression: proposals_bool_exp) {\n    proposals_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getProposalListCount($expression: proposals_bool_exp) {\n    proposals_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getProposalListCount($expression: proposals_bool_exp) {\n    proposals_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n"
-): typeof documents["\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n"];
+): (typeof documents)["\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n"
-): typeof documents["\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n"];
+): (typeof documents)["\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
-): typeof documents["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"
-): typeof documents["\n  query getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
+): (typeof documents)["\n  query getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"
-): typeof documents["\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"];
+): (typeof documents)["\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"
-): typeof documents["\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
+): (typeof documents)["\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"
-): typeof documents["\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
-): typeof documents["\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+): (typeof documents)["\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      moniker\n      operator_address\n      website\n    }\n  }\n"
-): typeof documents["\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      moniker\n      operator_address\n      website\n    }\n  }\n"];
+): (typeof documents)["\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      moniker\n      operator_address\n      website\n    }\n  }\n"];
 
 export function graphql(source: string): unknown;
 export function graphql(source: string) {
diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
index 4d26ac743..200580d12 100644
--- a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -30,8 +30,9 @@ export const ModuleListsBody = ({
   const filteredModules = useMemo(() => {
     if (!keyword) return modules;
 
-    return modules?.filter((module) =>
-      module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
+    return modules?.filter(
+      (module) =>
+        module.moduleName?.toLowerCase().includes(keyword.toLowerCase())
     );
   }, [keyword, modules]);
 
diff --git a/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx b/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
index 456331091..c42725129 100644
--- a/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
+++ b/src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx
@@ -1,5 +1,5 @@
-import { UploadSchemaSection } from "lib/components/json-schema";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { UploadSchemaSection } from "lib/components/json-schema";
 import type { Nullable, Option } from "lib/types";
 import { jsonPrettify } from "lib/utils";
 
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index c026acd04..0e9b2d20b 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -27,6 +27,7 @@ import { defaultAsset, defaultAssetJsonStr } from "lib/components/fund/data";
 import type { AttachFundsState } from "lib/components/fund/types";
 import { AttachFundsType } from "lib/components/fund/types";
 import { CustomIcon } from "lib/components/icon";
+import JsonInput from "lib/components/json/JsonInput";
 import {
   jsonInputFormKey,
   MessageInputContent,
@@ -35,7 +36,6 @@ import {
   SchemaInputSection,
   yourSchemaInputFormKey,
 } from "lib/components/json-schema";
-import JsonInput from "lib/components/json/JsonInput";
 import { CodeSelectSection } from "lib/components/select-code";
 import { Stepper } from "lib/components/stepper";
 import WasmPageContainer from "lib/components/WasmPageContainer";
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index 065a1ed64..16d4413c8 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -15,6 +15,7 @@ import { useMigrateTx } from "lib/app-provider/tx/migrate";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import type { FormStatus } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
+import JsonInput from "lib/components/json/JsonInput";
 import {
   MessageInputContent,
   MessageInputSwitch,
@@ -23,7 +24,6 @@ import {
   jsonInputFormKey,
   yourSchemaInputFormKey,
 } from "lib/components/json-schema";
-import JsonInput from "lib/components/json/JsonInput";
 import { CodeSelectSection } from "lib/components/select-code";
 import { useSchemaStore } from "lib/providers/store";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index 72e8742ab..0c0910bf7 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -36,9 +36,8 @@ export const PoolAssetsTableRow = ({
   const allocation = token.value
     ? formatRatio(divWithDefault(token.value, totalLiquidity, 0) as Ratio<Big>)
     : undefined;
-  const tokenWeight = weight?.find(
-    (w) => w.denom === token.denom
-  )?.percentWeight;
+  const tokenWeight = weight?.find((w) => w.denom === token.denom)
+    ?.percentWeight;
   const scalingFactor = scalingFactors
     ? formatInteger(scalingFactors[liquidityIndex])
     : undefined;
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 940768d11..f75764b78 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -48,7 +48,7 @@ export const SIDEBAR_WHITELIST_DETAILS: (
         </span>
       ),
     },
-  }[permission]);
+  })[permission];
 
 const storeCodePage = "proposal-store-code";
 export const SIDEBAR_STORE_CODE_DETAILS: (
diff --git a/src/lib/pages/query/components/SchemaQueryResponse.tsx b/src/lib/pages/query/components/SchemaQueryResponse.tsx
index 90ea98560..56dfbdff8 100644
--- a/src/lib/pages/query/components/SchemaQueryResponse.tsx
+++ b/src/lib/pages/query/components/SchemaQueryResponse.tsx
@@ -1,8 +1,8 @@
 import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
 import { memo, useEffect, useState } from "react";
 
-import { JsonSchemaForm, OutputMessageTabs } from "lib/components/json-schema";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { JsonSchemaForm, OutputMessageTabs } from "lib/components/json-schema";
 import type { SchemaInfo } from "lib/stores/schema";
 import type { Option } from "lib/types";
 import { dateFromNow, parseJsonStr } from "lib/utils";
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
index ded6f2546..e237e4949 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
@@ -13,7 +13,7 @@ type AssetObject = { [key: string]: AssetInfo };
 
 interface CoinComponentProps<
   T extends Coin | Coin[],
-  A extends Option<AssetObject> | AssetObject
+  A extends Option<AssetObject> | AssetObject,
 > {
   amount: T;
   assetInfos: A;
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index bd0fad8bd..6419c71af 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -26,7 +26,7 @@ export interface PoolWeight<T extends string | Big = Big> {
 }
 
 export interface Pool<
-  TLiquidity extends Coin | TokenWithValue = TokenWithValue
+  TLiquidity extends Coin | TokenWithValue = TokenWithValue,
 > {
   id: number;
   type: PoolType;
@@ -37,7 +37,7 @@ export interface Pool<
 
 export interface PoolDetail<
   TWeight extends string | Big = Big,
-  TLiquidity extends Coin | TokenWithValue = TokenWithValue
+  TLiquidity extends Coin | TokenWithValue = TokenWithValue,
 > extends Pool<TLiquidity> {
   isSupported: boolean;
   blockHeight: Option<number>;
diff --git a/src/lib/utils/contractState.ts b/src/lib/utils/contractState.ts
index e74518f62..b90afad73 100644
--- a/src/lib/utils/contractState.ts
+++ b/src/lib/utils/contractState.ts
@@ -65,16 +65,19 @@ export const parseStateKey = (key: string): DecodedKey => {
 };
 
 export const groupContractStatesByFirstIndex = (states: ContractState[]) =>
-  states.reduce((acc, state) => {
-    // save all states
-    acc.all = acc.all?.concat(state) ?? [state];
+  states.reduce(
+    (acc, state) => {
+      // save all states
+      acc.all = acc.all?.concat(state) ?? [state];
 
-    if (state.key.type === "bucket") {
-      const firstIndexValue = state.key.values[0];
-      acc[firstIndexValue] = acc[firstIndexValue]?.concat(state) ?? [state];
-    } else {
-      acc.others = acc.others?.concat(state) ?? [state];
-    }
+      if (state.key.type === "bucket") {
+        const firstIndexValue = state.key.values[0];
+        acc[firstIndexValue] = acc[firstIndexValue]?.concat(state) ?? [state];
+      } else {
+        acc.others = acc.others?.concat(state) ?? [state];
+      }
 
-    return acc;
-  }, {} as { [key: string]: ContractState[] });
+      return acc;
+    },
+    {} as { [key: string]: ContractState[] }
+  );
diff --git a/src/lib/utils/proposal.ts b/src/lib/utils/proposal.ts
index dacc75786..4f4c03cf1 100644
--- a/src/lib/utils/proposal.ts
+++ b/src/lib/utils/proposal.ts
@@ -20,7 +20,8 @@ export const getAmountToVote = (
 
   return minDepositAmount.lte(initialDeposit.amount)
     ? null
-    : `${d2Formatter(minDepositAmount.minus(initialDeposit.amount), "NaN")} ${
-        minDeposit?.formattedDenom
-      }`;
+    : `${d2Formatter(
+        minDepositAmount.minus(initialDeposit.amount),
+        "NaN"
+      )} ${minDeposit?.formattedDenom}`;
 };

From 31f5cbd228a0fa29dcb74afacdb2610bc64341aa Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 1 Nov 2023 18:34:22 +0700
Subject: [PATCH 290/368] chore: change type name

---
 .../components/PublicProjectCard.tsx          |  5 ++++-
 .../PublicProjectAccountMobileCard.tsx        |  4 ++--
 .../accounts/PublicProjectAccountRow.tsx      |  4 ++--
 .../components/tables/accounts/index.tsx      |  6 +++---
 .../components/tables/accounts/utils.ts       |  6 ++++--
 .../modules/PublicProjectModuleMobileCard.tsx |  4 ++--
 .../tables/modules/PublicProjectModuleRow.tsx |  4 ++--
 .../components/tables/modules/index.tsx       |  6 +++---
 src/lib/pages/public-project/data.ts          |  8 ++++----
 src/lib/pages/public-project/slug.tsx         | 17 ++++++++--------
 src/lib/types/projects.ts                     | 20 ++++++-------------
 11 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index 726db6b7f..a96997e03 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -57,7 +57,10 @@ export const PublicProjectCard = observer(
             >
               <Flex gap={2} pr={1}>
                 <Image
-                  src={item.logo}
+                  src={
+                    item.logo ??
+                    "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg"
+                  }
                   borderRadius="full"
                   alt="Celatone"
                   width={7}
diff --git a/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountMobileCard.tsx b/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountMobileCard.tsx
index 601c53741..0753051f0 100644
--- a/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountMobileCard.tsx
+++ b/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountMobileCard.tsx
@@ -3,12 +3,12 @@ import { Flex, Text } from "@chakra-ui/react";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { MobileCardTemplate, MobileLabel } from "lib/components/table";
-import type { Account } from "lib/types";
+import type { PublicAccount } from "lib/types";
 
 import { getNavigationArgs } from "./utils";
 
 interface PublicProjectAccountMobileCardProps {
-  accountInfo: Account;
+  accountInfo: PublicAccount;
 }
 export const PublicProjectAccountMobileCard = ({
   accountInfo,
diff --git a/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountRow.tsx b/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountRow.tsx
index 1beb9f387..fbe1d31de 100644
--- a/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountRow.tsx
+++ b/src/lib/pages/public-project/components/tables/accounts/PublicProjectAccountRow.tsx
@@ -3,12 +3,12 @@ import { Grid, Text } from "@chakra-ui/react";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TableRow } from "lib/components/table";
-import type { Account } from "lib/types";
+import type { PublicAccount } from "lib/types";
 
 import { getNavigationArgs } from "./utils";
 
 interface AccountTableRowProps {
-  accountInfo: Account;
+  accountInfo: PublicAccount;
   templateColumns: string;
 }
 
diff --git a/src/lib/pages/public-project/components/tables/accounts/index.tsx b/src/lib/pages/public-project/components/tables/accounts/index.tsx
index 9f7a996a9..73d8fa757 100644
--- a/src/lib/pages/public-project/components/tables/accounts/index.tsx
+++ b/src/lib/pages/public-project/components/tables/accounts/index.tsx
@@ -12,13 +12,13 @@ import {
   TableTitle,
   ViewMore,
 } from "lib/components/table";
-import type { Account } from "lib/types";
+import type { PublicAccount } from "lib/types";
 
 import { PublicProjectAccountMobileCard } from "./PublicProjectAccountMobileCard";
 import { PublicProjectAccountRow } from "./PublicProjectAccountRow";
 
 interface PublicProjectAccountTableProps {
-  accounts: Account[];
+  accounts: PublicAccount[];
   onViewMore?: () => void;
 }
 
@@ -36,7 +36,7 @@ const ContentRender = ({
   filteredAccounts,
   isMobile,
 }: {
-  filteredAccounts: Account[];
+  filteredAccounts: PublicAccount[];
   isMobile: boolean;
 }) =>
   isMobile ? (
diff --git a/src/lib/pages/public-project/components/tables/accounts/utils.ts b/src/lib/pages/public-project/components/tables/accounts/utils.ts
index 9c29d530e..ebd26e608 100644
--- a/src/lib/pages/public-project/components/tables/accounts/utils.ts
+++ b/src/lib/pages/public-project/components/tables/accounts/utils.ts
@@ -1,7 +1,9 @@
 import type { NavigationArgs } from "lib/app-provider";
-import type { Account } from "lib/types";
+import type { PublicAccount } from "lib/types";
 
-export const getNavigationArgs = (accountInfo: Account): NavigationArgs => {
+export const getNavigationArgs = (
+  accountInfo: PublicAccount
+): NavigationArgs => {
   switch (accountInfo.type) {
     case "account":
       return {
diff --git a/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
index 4b06b2d78..0dddec182 100644
--- a/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
+++ b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleMobileCard.tsx
@@ -3,11 +3,11 @@ import { Flex, Text } from "@chakra-ui/react";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { MobileCardTemplate, MobileLabel } from "lib/components/table";
-import type { Module } from "lib/types";
+import type { PublicModule } from "lib/types";
 import { truncate } from "lib/utils";
 
 interface PublicProjectModuleMobileCardProps {
-  module: Module;
+  module: PublicModule;
 }
 export const PublicProjectModuleMobileCard = ({
   module,
diff --git a/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
index b5065a808..1c7eb40ed 100644
--- a/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
+++ b/src/lib/pages/public-project/components/tables/modules/PublicProjectModuleRow.tsx
@@ -3,11 +3,11 @@ import { Button, Flex, Grid, Text } from "@chakra-ui/react";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TableRow } from "lib/components/table";
-import type { Module } from "lib/types";
+import type { PublicModule } from "lib/types";
 import { truncate } from "lib/utils";
 
 interface ModuleTableRowProps {
-  module: Module;
+  module: PublicModule;
   templateColumns: string;
 }
 
diff --git a/src/lib/pages/public-project/components/tables/modules/index.tsx b/src/lib/pages/public-project/components/tables/modules/index.tsx
index 7ae28eaf7..cd9ceb917 100644
--- a/src/lib/pages/public-project/components/tables/modules/index.tsx
+++ b/src/lib/pages/public-project/components/tables/modules/index.tsx
@@ -12,13 +12,13 @@ import {
   TableTitle,
   ViewMore,
 } from "lib/components/table";
-import type { Module } from "lib/types";
+import type { PublicModule } from "lib/types";
 
 import { PublicProjectModuleMobileCard } from "./PublicProjectModuleMobileCard";
 import { PublicProjectModuleRow } from "./PublicProjectModuleRow";
 
 interface PublicProjectModuleTableProps {
-  modules: Module[];
+  modules: PublicModule[];
   onViewMore?: () => void;
 }
 
@@ -37,7 +37,7 @@ const ContentRender = ({
   filteredModules,
   isMobile,
 }: {
-  filteredModules: Module[];
+  filteredModules: PublicModule[];
   isMobile: boolean;
 }) =>
   isMobile ? (
diff --git a/src/lib/pages/public-project/data.ts b/src/lib/pages/public-project/data.ts
index 04b119ae0..8223bb97b 100644
--- a/src/lib/pages/public-project/data.ts
+++ b/src/lib/pages/public-project/data.ts
@@ -6,16 +6,16 @@ import type {
   PublicContract,
   PublicDetail,
   Option,
-  Account,
-  Module,
+  PublicAccount,
+  PublicModule,
 } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 interface PublicDataState {
   publicCodes: PublicCode[];
   publicContracts: PublicContract[];
-  publicAccounts: Account[];
-  publicModules: Module[];
+  publicAccounts: PublicAccount[];
+  publicModules: PublicModule[];
   projectDetail: Option<PublicDetail>;
   slug: string;
   isLoading: boolean;
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 06a38d3dc..3f722559c 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -134,15 +134,14 @@ const ProjectDetail = () => {
           >
             Accounts
           </CustomTab>
-          {move.enabled && (
-            <CustomTab
-              count={publicModules.length}
-              isDisabled={!publicModules.length}
-              onClick={handleTabChange(TabIndex.Modules)}
-            >
-              Modules
-            </CustomTab>
-          )}
+          <CustomTab
+            count={publicModules.length}
+            isDisabled={!publicModules.length}
+            onClick={handleTabChange(TabIndex.Modules)}
+            hidden={!move.enabled}
+          >
+            Modules
+          </CustomTab>
         </TabList>
         <TabPanels my={8}>
           <TabPanel p={0}>
diff --git a/src/lib/types/projects.ts b/src/lib/types/projects.ts
index 39ac33698..3f5012826 100644
--- a/src/lib/types/projects.ts
+++ b/src/lib/types/projects.ts
@@ -10,7 +10,7 @@ import type {
   MoveAccountAddr,
 } from "lib/types";
 
-export interface Account {
+export interface PublicAccount {
   address: HumanAddr;
   description: string;
   name: string;
@@ -18,7 +18,7 @@ export interface Account {
   type: string;
 }
 
-export interface Module {
+export interface PublicModule {
   address: MoveAccountAddr;
   description: string;
   github: string;
@@ -70,11 +70,11 @@ export interface PublicDetail {
 }
 
 export interface RawPublicProjectInfo {
-  accounts: Account[];
+  accounts: PublicAccount[];
   assets: AssetInfo;
   codes: RawPublicCode[];
   contracts: RawPublicContract[];
-  modules: Module[];
+  modules: PublicModule[];
   details: PublicDetail;
   slug: string;
 }
@@ -84,11 +84,11 @@ export interface PublicContract extends Omit<RawPublicContract, "address"> {
 }
 
 export interface PublicProjectInfo {
-  accounts: Account[];
+  accounts: PublicAccount[];
   assets: AssetInfo;
   codes: PublicCode[];
   contracts: PublicContract[];
-  modules: Module[];
+  modules: PublicModule[];
   details: PublicDetail;
   slug: string;
 }
@@ -100,11 +100,3 @@ export interface PublicInfo {
   description: string;
   github: string;
 }
-
-export interface PublicModule {
-  address: MoveAccountAddr;
-  name: string;
-  description: string;
-  github: string;
-  slug: string;
-}

From 25665ddff3dfaa8253a9ecd0eec832e0cad1c25b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 18:58:21 +0700
Subject: [PATCH 291/368] fix: downgrade version

---
 CHANGELOG.md |   1 +
 package.json |   2 +-
 yarn.lock    | 157 +++++++++++++++++++++++++--------------------------
 3 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a6e12f5bc..2c963f6f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -82,6 +82,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#602](https://github.com/alleslabs/celatone-frontend/pull/602) Downgrade @interchain-ui/react version
 - [#599](https://github.com/alleslabs/celatone-frontend/pull/599) Fix getNavigationUrl to support move
 - [#590](https://github.com/alleslabs/celatone-frontend/pull/590) Fix upload script various bugs
 - [#594](https://github.com/alleslabs/celatone-frontend/pull/594) LP assets filtering and delegation ui/ux improvement
diff --git a/package.json b/package.json
index f0df20a65..cffa9077d 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@graphql-codegen/client-preset": "^1.1.4",
     "@initia/initia.js": "0.1.12",
     "@initia/initia.proto": "0.1.12",
-    "@interchain-ui/react": "1.11.7",
+    "@interchain-ui/react": "1.11.4",
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
diff --git a/yarn.lock b/yarn.lock
index 87444f7a1..7a4df76e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3182,10 +3182,10 @@
     long "^5.2.0"
     protobufjs "^7.1.1"
 
-"@interchain-ui/react@1.11.7":
-  version "1.11.7"
-  resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.11.7.tgz#8410dd4374c9e46c1d3b2bae4d98cd10a603ec51"
-  integrity sha512-ktdQ5QvxDq9PDXoLpajHTaxWbT9U5ohUZI4jbYZZrG2+nErUKH+H9DgG5TRiGJjaAEXa3JPLM0KD5GcCNFj+OA==
+"@interchain-ui/react@1.11.4":
+  version "1.11.4"
+  resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.11.4.tgz#62ec06ebed6e9f434f1f406962565e86c34b9b6c"
+  integrity sha512-jUx02LyyUjSKANcpNJ9DPOkVlD2nERmQZsqEnUeJQ6wsG4rgO5yd0jHDUgqotvwxkRisYSy8jqDGe3r4pYsNBw==
   dependencies:
     "@fastify/deepmerge" "^1.3.0"
     "@floating-ui/dom" "^1.5.2"
@@ -3195,8 +3195,8 @@
     "@vanilla-extract/css-utils" "^0.1.3"
     "@vanilla-extract/dynamic" "^2.0.3"
     "@vanilla-extract/recipes" "^0.4.0"
-    "@zag-js/number-input" "^0.26.0"
-    "@zag-js/react" "^0.26.0"
+    "@zag-js/number-input" "^0.15.0"
+    "@zag-js/react" "^0.15.0"
     animejs "^3.2.1"
     bignumber.js "^9.1.1"
     clsx "^1.2.1"
@@ -5151,31 +5151,31 @@
     fast-url-parser "^1.1.3"
     tslib "^2.3.1"
 
-"@zag-js/anatomy@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.26.0.tgz#74b79740ed12cfb90c9208b62a5aa1992a5273ca"
-  integrity sha512-B0u3uU++3TXqgklH0fwPqb12y+kMSTKBD40S5+HFz/mmaxolNaJzT3QfkT4NfD+9Q3GdlHA4uQqsxhi6SfSb5w==
+"@zag-js/anatomy@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.15.0.tgz#c32b3bf2050f81ed9eace140542db43a565e3454"
+  integrity sha512-+lmu/JVQ6Q5M9Tmbt1sXVkp3CtP10JYOo/PU2L6w6mXpwazT5FUpsuorrBrBM9rhWOnxI7CVvFy7r/rxReDWgg==
 
-"@zag-js/core@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/core/-/core-0.26.0.tgz#c1ee370d5d4eba1b4971aa2fa5e69f443f634e7e"
-  integrity sha512-pwVFL1hTZ7w86NEA1Xs9Brq9OmTkW94JTGsBGNEMuH6LVuGGF/fike/nkJP/G/DpvdIrkwI5dKLr7P/nQ55DbQ==
+"@zag-js/core@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/core/-/core-0.15.0.tgz#3566bc9b23d07528eeec9160b0b8ece9b7f647b0"
+  integrity sha512-eH3yx9nv0hMyoR+hWtJVJpCagpU5s61rOMHfLkdjMPTWSVjQZdp3SGEm6BTUjBlNbQkTZhUbPpg/FEqx1iPfJw==
   dependencies:
-    "@zag-js/store" "0.26.0"
+    "@zag-js/store" "0.15.0"
     klona "2.0.6"
 
-"@zag-js/dom-event@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/dom-event/-/dom-event-0.26.0.tgz#2c33fcb7fe83a553c84e793484a9fdbba5a1a167"
-  integrity sha512-Rc+ecXYDLG7wFPWVMS5XPXIQVqPUo0jXjMG5Yj7USkSBm5bg3bGsrJ2WyDpkxvvZpYmbXO6OaSyWdclrQNEcHg==
+"@zag-js/dom-event@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/dom-event/-/dom-event-0.15.0.tgz#529491fee3e25b4a47ce46edab624cf7bab67c47"
+  integrity sha512-5Sw2pNCcX2PqSiz4Ntm2PDu+YARQLtUrAf6PBBSUIqMZ0X9pp7DWTY3IfpdqY2ADsRLRMIe1LqzM+/c0u3Gd1Q==
   dependencies:
-    "@zag-js/text-selection" "0.26.0"
-    "@zag-js/types" "0.26.0"
+    "@zag-js/text-selection" "0.15.0"
+    "@zag-js/types" "0.15.0"
 
-"@zag-js/dom-query@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.26.0.tgz#2c1f9996ca5aac9347dca07fb1a6d68d90d152bd"
-  integrity sha512-M28nfCTl+Vc23OnttM3jv5Zn6pq/9qNkN8NQ9rCsemOALJvNOQeu8MFv7d6Jhgg3f8RqEB6EN0rS64UbgBovRg==
+"@zag-js/dom-query@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.15.0.tgz#48954851575f0f11127d48cf271ce323bb13f1f0"
+  integrity sha512-gxm7GefQ+ggJE+iN0/kHgbM90DPd4RZYoQC6TQOWy3nxij69IuoSI6goMakJ33hUckszWm9z86Sqe1U1puzssQ==
 
 "@zag-js/element-size@0.1.0":
   version "0.1.0"
@@ -5187,74 +5187,73 @@
   resolved "https://registry.yarnpkg.com/@zag-js/focus-visible/-/focus-visible-0.1.0.tgz#9777bbaff8316d0b3a14a9095631e1494f69dbc7"
   integrity sha512-PeaBcTmdZWcFf7n1aM+oiOdZc+sy14qi0emPIeUuGMTjbP0xLGrZu43kdpHnWSXy7/r4Ubp/vlg50MCV8+9Isg==
 
-"@zag-js/form-utils@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/form-utils/-/form-utils-0.26.0.tgz#d81d08d9d54d043625464f2d0498b561cd6d6001"
-  integrity sha512-ylvONwa9HkVOdRzI+NsfNCMduFbmukvBjlPv7PEtTuZznUasFEDxLdIAp6P6hlYIPGgZXl05IfyTPSLAwYPn9g==
+"@zag-js/form-utils@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/form-utils/-/form-utils-0.15.0.tgz#dc70686f5d6ad8d845b5e4bab8eb92833a280b11"
+  integrity sha512-3gFzyF8x48wK2Fabt6rxjMETmhSlwTtCjF10XFrKscL1LZASc3Abl7lJcpTEmVJ5kb5D+50Zw+jlHjHrvddH6g==
   dependencies:
-    "@zag-js/mutation-observer" "0.26.0"
+    "@zag-js/mutation-observer" "0.15.0"
 
-"@zag-js/mutation-observer@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/mutation-observer/-/mutation-observer-0.26.0.tgz#0e201b2ba06de3e75001069133a9e1360210f1ed"
-  integrity sha512-JDtHyVLsVCxVscKLsMSxQ0Hjg2xmTmWL5C+272mHkr0r2JS2x6Z1dMn5x0capSz9vXUbHUgoHz9PSJXHkRJwAA==
+"@zag-js/mutation-observer@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/mutation-observer/-/mutation-observer-0.15.0.tgz#3848f7d9c9a39a7c7d86ed49cc6c5a4e0ffdcf85"
+  integrity sha512-7e2d1RYA0nuKOAJknbYBw6XfywF5eFC/4oel/nINHmS14JtjZnjMq/8z/kdrMMJnlQHou+wnaoskOLv+4Sv7pw==
 
-"@zag-js/number-input@^0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/number-input/-/number-input-0.26.0.tgz#a9443efbe472cee2e8abc23afb7a9968da723360"
-  integrity sha512-1KwIeCQsgnYOUzdAUMmaqiOwG+YOJIYUvmBhgNQld2IhkdqykXTIM9cZoQyNsjsYnzXhe7y6IMskUx/GlvzlCA==
+"@zag-js/number-input@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/number-input/-/number-input-0.15.0.tgz#c1f0ebc405ed9bfc22ac3d4fedc0cab1d585c388"
+  integrity sha512-WyIGLI4gUm9+53OPCoOmzyZaqT32ALdfZl1QjTVLuDXzckoBgqxaowR0mJU1gDkJ89mSI02p0B0Q89SOiokUfQ==
+  dependencies:
+    "@zag-js/anatomy" "0.15.0"
+    "@zag-js/core" "0.15.0"
+    "@zag-js/dom-event" "0.15.0"
+    "@zag-js/dom-query" "0.15.0"
+    "@zag-js/form-utils" "0.15.0"
+    "@zag-js/mutation-observer" "0.15.0"
+    "@zag-js/number-utils" "0.15.0"
+    "@zag-js/types" "0.15.0"
+    "@zag-js/utils" "0.15.0"
+
+"@zag-js/number-utils@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/number-utils/-/number-utils-0.15.0.tgz#06d19e2145e183acebea272412fdb5780c7cbd81"
+  integrity sha512-ebDPCv4UNl5qAe+x55NSUK5gMLbhlqh8mVVq6EnPUqPfbglcjUgNzht78TZ3d+0rdfgC3F8SI3pWaZk9DY4O1Q==
+
+"@zag-js/react@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.15.0.tgz#516b92405b4536cd0605a9c702d2fe78ca18f1bc"
+  integrity sha512-Uygdyq29Y7q5GPOYv1VC9Ya5tdFOs+jdCZk5h5BKzFy3vCSDaVuZ8WT+w7JgvUWh6aQUKjUMLG8lXxWWnJA0Jg==
   dependencies:
-    "@internationalized/number" "^3.3.0"
-    "@zag-js/anatomy" "0.26.0"
-    "@zag-js/core" "0.26.0"
-    "@zag-js/dom-event" "0.26.0"
-    "@zag-js/dom-query" "0.26.0"
-    "@zag-js/form-utils" "0.26.0"
-    "@zag-js/mutation-observer" "0.26.0"
-    "@zag-js/number-utils" "0.26.0"
-    "@zag-js/types" "0.26.0"
-    "@zag-js/utils" "0.26.0"
-
-"@zag-js/number-utils@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/number-utils/-/number-utils-0.26.0.tgz#82ad003934e434c634f31606fff866895e008433"
-  integrity sha512-XjsDVecCn/svNx/jXObD2utGFkNc+x93bRD/CPjGF40sRWka41xIpobOgLux2v8wWBM/FwMcU1W53eenTaCGkg==
-
-"@zag-js/react@^0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.26.0.tgz#7c55d1b4966f8a7b5bac53303481d9f92e73c922"
-  integrity sha512-PEZm+qRhL162PFbKwMNpnULsN6OGmqqp0cT31T2lMpGUY98bPMy9e4iWyqvrwMroJyr67Cak3/GZ3l5qMEJNNA==
-  dependencies:
-    "@zag-js/core" "0.26.0"
-    "@zag-js/store" "0.26.0"
-    "@zag-js/types" "0.26.0"
+    "@zag-js/core" "0.15.0"
+    "@zag-js/store" "0.15.0"
+    "@zag-js/types" "0.15.0"
     proxy-compare "2.5.1"
 
-"@zag-js/store@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/store/-/store-0.26.0.tgz#4be9becc00ce4404436d5927015bdbae464371be"
-  integrity sha512-NcIWqP5RE7QU9zHi4ixl6CVX0Ff56Q8tAikwWPKAQOin/XctI1rHGNWI0/uUa+9Ib3Wsc2M83I6kTLrWstkZQQ==
+"@zag-js/store@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/store/-/store-0.15.0.tgz#e3cf5a10588ce2bb7f94280b95437fec6650c0f8"
+  integrity sha512-xq4WFrd+fqJE+Y0Os3FhN2/ru2zxvIvV8IT9y5Ev+3VRZw+L6Ut4tEjOONk+zr+UpkRx3jflPqlekjLHtowp0w==
   dependencies:
     proxy-compare "2.5.1"
 
-"@zag-js/text-selection@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/text-selection/-/text-selection-0.26.0.tgz#a1f9105f1135daa32b9d236359a7d6754aefdbaf"
-  integrity sha512-BTlb/g8kj6Fs8FZdldLk2kJ6Za5qkihp0GtwjXBTtU6NSFkh96MPMyhCXf+WrFyet4Sbna7JyeTbfGLbomPxYg==
+"@zag-js/text-selection@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/text-selection/-/text-selection-0.15.0.tgz#7c5ede2a98aaed7eb5d12c4995d5dc03688dbdc1"
+  integrity sha512-5i/MkTTBOJN17YylGgvRC+dyO5l3pgz2a/z0xBiIpimYqP1W66P0N1Yq0/5VZubs9TG41jKyEKuulKfcpLwmYg==
   dependencies:
-    "@zag-js/dom-query" "0.26.0"
+    "@zag-js/dom-query" "0.15.0"
 
-"@zag-js/types@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.26.0.tgz#ee5901ea6bee0daac8dbd024a76c5fff976f0c78"
-  integrity sha512-pQWK9dngn9zYCIzEbuGG9PboCYd1CaTWgEX3+KGFYTqOEcunPijx1MW3LZNmLaqYZLNd8yCRU5IKlno/cRBKVA==
+"@zag-js/types@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.15.0.tgz#22fb42c125deb786f00ad984d111236bc9f2002f"
+  integrity sha512-rkAwZDl6e5p2iXF9HknP03TQ/G9jfOto0x2r2rds4wsPbfVJBNGk0Mo6Jl9GXcpNiyOCOO74SoO9VjZTmMqVvw==
   dependencies:
     csstype "3.1.2"
 
-"@zag-js/utils@0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.26.0.tgz#a5579bc18706ea900b6fe59f01a41dab43b3b20b"
-  integrity sha512-TKg0l0FNIRZS2ocU5KPh5oXHljiaWJ1S8vsbTutCklurBWsOU1qVPoawPKBoNCSWEXdTqmvwGwD8smqV6zjnOQ==
+"@zag-js/utils@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.15.0.tgz#65e2df9e6932211fb6f927e6667d35e5b4b593b7"
+  integrity sha512-aNjydiheTKMoIo1wASk3XgN3mbcCiCk2zAiUyldU4JCw9xWevMk5aSszW2v3A0yms6z+qhRb77Z50fejG7OlSA==
 
 JSONStream@^1.0.4, JSONStream@^1.3.5:
   version "1.3.5"

From 6e8dd6d9db03f472cda7a7805e4b34381ab57620 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 19:13:30 +0700
Subject: [PATCH 292/368] fix: changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c963f6f3..162e6c4b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -82,7 +82,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#602](https://github.com/alleslabs/celatone-frontend/pull/602) Downgrade @interchain-ui/react version
+- [#602](https://github.com/alleslabs/celatone-frontend/pull/602) Fix package version client error
 - [#599](https://github.com/alleslabs/celatone-frontend/pull/599) Fix getNavigationUrl to support move
 - [#590](https://github.com/alleslabs/celatone-frontend/pull/590) Fix upload script various bugs
 - [#594](https://github.com/alleslabs/celatone-frontend/pull/594) LP assets filtering and delegation ui/ux improvement

From cedd5f9d60a10949c9c4f4a20d9ccfa7d9e00345 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 1 Nov 2023 19:30:19 +0700
Subject: [PATCH 293/368] fix: yarn lock

---
 yarn.lock | 278 +-----------------------------------------------------
 1 file changed, 2 insertions(+), 276 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 7a4df76e4..1762fc43a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2047,7 +2047,7 @@
     "@chain-registry/types" "0.17.0"
     "@cosmos-kit/core" "^2.7.4"
     "@cosmos-kit/react-lite" "^2.5.5"
-    "@interchain-ui/react" "^1.11.0"
+    "@interchain-ui/react" "1.11.4"
     "@react-icons/all-files" "^4.1.0"
 
 "@cosmos-kit/station-extension@^2.5.4":
@@ -2625,45 +2625,6 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
-"@formatjs/ecma402-abstract@1.17.2":
-  version "1.17.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz#d197c6e26b9fd96ff7ba3b3a0cc2f25f1f2dcac3"
-  integrity sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==
-  dependencies:
-    "@formatjs/intl-localematcher" "0.4.2"
-    tslib "^2.4.0"
-
-"@formatjs/fast-memoize@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz#33bd616d2e486c3e8ef4e68c99648c196887802b"
-  integrity sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==
-  dependencies:
-    tslib "^2.4.0"
-
-"@formatjs/icu-messageformat-parser@2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.0.tgz#9b13f2710a3b4efddfeb544480f684f27a53483b"
-  integrity sha512-7uqC4C2RqOaBQtcjqXsSpGRYVn+ckjhNga5T/otFh6MgxRrCJQqvjfbrGLpX1Lcbxdm5WH3Z2WZqt1+Tm/cn/Q==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/icu-skeleton-parser" "1.6.2"
-    tslib "^2.4.0"
-
-"@formatjs/icu-skeleton-parser@1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.2.tgz#00303034dc08583973c8aa67b96534c49c0bad8d"
-  integrity sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    tslib "^2.4.0"
-
-"@formatjs/intl-localematcher@0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz#7e6e596dbaf2f0c5a7c22da5a01d5c55f4c37e9a"
-  integrity sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==
-  dependencies:
-    tslib "^2.4.0"
-
 "@formkit/auto-animate@1.0.0-beta.6":
   version "1.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz#ed7f8bc47d774a7764756646e9e3432e8be51cb3"
@@ -3206,61 +3167,6 @@
     rainbow-sprinkles "^0.17.0"
     zustand "^4.3.8"
 
-"@interchain-ui/react@^1.11.0":
-  version "1.11.12"
-  resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.11.12.tgz#e5e8cf0faaa639410948ffe47b8fddc09e64891b"
-  integrity sha512-N2JCjuMax4J1kLFScpZbN3AyDgnetISUv4F0mwGuTWsRrNDdvBbu+EDhMICXoIGSNHeigVe0YjVVMLSpupunig==
-  dependencies:
-    "@fastify/deepmerge" "^1.3.0"
-    "@floating-ui/dom" "^1.5.2"
-    "@floating-ui/react" "^0.26.0"
-    "@formkit/auto-animate" "1.0.0-beta.6"
-    "@react-aria/i18n" "^3.8.4"
-    "@react-aria/numberfield" "^3.9.1"
-    "@react-aria/utils" "^3.21.1"
-    "@react-stately/numberfield" "^3.6.2"
-    "@vanilla-extract/css" "^1.12.0"
-    "@vanilla-extract/css-utils" "^0.1.3"
-    "@vanilla-extract/dynamic" "^2.0.3"
-    "@vanilla-extract/recipes" "^0.4.0"
-    animejs "^3.2.1"
-    bignumber.js "^9.1.1"
-    clsx "^1.2.1"
-    copy-to-clipboard "^3.3.3"
-    immer "^9.0.19"
-    lodash "^4.17.21"
-    rainbow-sprinkles "^0.17.0"
-    zustand "^4.3.8"
-
-"@internationalized/date@^3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.5.0.tgz#67f1dd62355f05140cc80e324842e9bfb4553abe"
-  integrity sha512-nw0Q+oRkizBWMioseI8+2TeUPEyopJVz5YxoYVzR0W1v+2YytiYah7s/ot35F149q/xAg4F1gT/6eTd+tsUpFQ==
-  dependencies:
-    "@swc/helpers" "^0.5.0"
-
-"@internationalized/message@^3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.1.1.tgz#0f29c5a239b5dcd457b55f21dcd38d1a44a1236a"
-  integrity sha512-ZgHxf5HAPIaR0th+w0RUD62yF6vxitjlprSxmLJ1tam7FOekqRSDELMg4Cr/DdszG5YLsp5BG3FgHgqquQZbqw==
-  dependencies:
-    "@swc/helpers" "^0.5.0"
-    intl-messageformat "^10.1.0"
-
-"@internationalized/number@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.3.0.tgz#92233d130a0591085f93be86a9e6356cfa0e2de2"
-  integrity sha512-PuxgnKE5NJMOGKUcX1QROo8jq7sW7UWLrL5B6Rfe8BdWgU/be04cVvLyCeALD46vvbAv3d1mUvyHav/Q9a237g==
-  dependencies:
-    "@swc/helpers" "^0.5.0"
-
-"@internationalized/string@^3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@internationalized/string/-/string-3.1.1.tgz#2ab7372d58bbb7ffd3de62fc2a311e4690186981"
-  integrity sha512-fvSr6YRoVPgONiVIUhgCmIAlifMVCeej/snPZVzbzRPxGpHl3o1GRe+d/qh92D8KhgOciruDUH8I5mjdfdjzfA==
-  dependencies:
-    "@swc/helpers" "^0.5.0"
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -3883,174 +3789,11 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-"@react-aria/focus@^3.14.3":
-  version "3.14.3"
-  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.14.3.tgz#5e66dbf47e1d92aebf67d52b3b08d1631591f5b6"
-  integrity sha512-gvO/frZ7SxyfyHJYC+kRsUXnXct8hGHKlG1TwbkzCCXim9XIPKDgRzfNGuFfj0i8ZpR9xmsjOBUkHZny0uekFA==
-  dependencies:
-    "@react-aria/interactions" "^3.19.1"
-    "@react-aria/utils" "^3.21.1"
-    "@react-types/shared" "^3.21.0"
-    "@swc/helpers" "^0.5.0"
-    clsx "^1.1.1"
-
-"@react-aria/i18n@^3.8.4":
-  version "3.8.4"
-  resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.8.4.tgz#e7ecd3edcaa66ceaf9ebb1034395e021685163af"
-  integrity sha512-YlTJn7YJlUxds/T5dNtme551qc118NoDQhK+IgGpzcmPQ3xSnwBAQP4Zwc7wCpAU+xEwnNcsGw+L1wJd49He/A==
-  dependencies:
-    "@internationalized/date" "^3.5.0"
-    "@internationalized/message" "^3.1.1"
-    "@internationalized/number" "^3.3.0"
-    "@internationalized/string" "^3.1.1"
-    "@react-aria/ssr" "^3.8.0"
-    "@react-aria/utils" "^3.21.1"
-    "@react-types/shared" "^3.21.0"
-    "@swc/helpers" "^0.5.0"
-
-"@react-aria/interactions@^3.19.1":
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.19.1.tgz#b17b1f9dc84624d4222c7fa0a4fa6b4c14fe125a"
-  integrity sha512-2QFOvq/rJfMGEezmtYcGcJmfaD16kHKcSTLFrZ8aeBK6hYFddGVZJZk+dXf+G7iNaffa8rMt6uwzVe/malJPBA==
-  dependencies:
-    "@react-aria/ssr" "^3.8.0"
-    "@react-aria/utils" "^3.21.1"
-    "@react-types/shared" "^3.21.0"
-    "@swc/helpers" "^0.5.0"
-
-"@react-aria/label@^3.7.2":
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.7.2.tgz#6563495cad2af9262e722514e88406baede48852"
-  integrity sha512-rS0xQy+4RH1+JLESzLZd9H285McjNNf2kKwBhzU0CW3akjlu7gqaMKEJhX9MlpPDIVOUc2oEObGdU3UMmqa8ew==
-  dependencies:
-    "@react-aria/utils" "^3.21.1"
-    "@react-types/label" "^3.8.1"
-    "@react-types/shared" "^3.21.0"
-    "@swc/helpers" "^0.5.0"
-
-"@react-aria/live-announcer@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@react-aria/live-announcer/-/live-announcer-3.3.1.tgz#bf864b8820fb02daaeefc1c972782a0174fd60b9"
-  integrity sha512-hsc77U7S16trM86d+peqJCOCQ7/smO1cybgdpOuzXyiwcHQw8RQ4GrXrS37P4Ux/44E9nMZkOwATQRT2aK8+Ew==
-  dependencies:
-    "@swc/helpers" "^0.5.0"
-
-"@react-aria/numberfield@^3.9.1":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@react-aria/numberfield/-/numberfield-3.9.1.tgz#de8bbcfbd971c22311a85a3ab34165c53ff96519"
-  integrity sha512-s9LM5YUzZpbOn5KldUS2JmkDNOA9obVmm8TofICH+z6RnReznp72NLPn0IwblRnocmMOIvGINT55Tz50BmbfNA==
-  dependencies:
-    "@react-aria/i18n" "^3.8.4"
-    "@react-aria/interactions" "^3.19.1"
-    "@react-aria/live-announcer" "^3.3.1"
-    "@react-aria/spinbutton" "^3.5.4"
-    "@react-aria/textfield" "^3.12.2"
-    "@react-aria/utils" "^3.21.1"
-    "@react-stately/numberfield" "^3.6.2"
-    "@react-types/button" "^3.9.0"
-    "@react-types/numberfield" "^3.6.1"
-    "@react-types/shared" "^3.21.0"
-    "@react-types/textfield" "^3.8.1"
-    "@swc/helpers" "^0.5.0"
-
-"@react-aria/spinbutton@^3.5.4":
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/@react-aria/spinbutton/-/spinbutton-3.5.4.tgz#d1c317838f4ae55d6a2e6c698581e4cf0f2b0c89"
-  integrity sha512-W5dhUOjyBIgd8d4z526fW/HXQ+BdFceeGyvNAXoYBi/1gt3KqN/6CZgskG7OQEufxCOWc9e4A2eWNwvkQVJvWg==
-  dependencies:
-    "@react-aria/i18n" "^3.8.4"
-    "@react-aria/live-announcer" "^3.3.1"
-    "@react-aria/utils" "^3.21.1"
-    "@react-types/button" "^3.9.0"
-    "@react-types/shared" "^3.21.0"
-    "@swc/helpers" "^0.5.0"
-
-"@react-aria/ssr@^3.8.0":
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.8.0.tgz#e7f467ac42f72504682724304ce221f785d70d49"
-  integrity sha512-Y54xs483rglN5DxbwfCPHxnkvZ+gZ0LbSYmR72LyWPGft8hN/lrl1VRS1EW2SMjnkEWlj+Km2mwvA3kEHDUA0A==
-  dependencies:
-    "@swc/helpers" "^0.5.0"
-
-"@react-aria/textfield@^3.12.2":
-  version "3.12.2"
-  resolved "https://registry.yarnpkg.com/@react-aria/textfield/-/textfield-3.12.2.tgz#e1ae5abaf72ed9c800e6a8afface3b2fd58258ca"
-  integrity sha512-wRg8LJjZV6o4S/LRFqxs5waGDTiuIa/CRN+/X37Fu7GeZFeK0IBvWjKPlXLe7gMswaFqRmTKnQCU42mzUdDK1g==
-  dependencies:
-    "@react-aria/focus" "^3.14.3"
-    "@react-aria/label" "^3.7.2"
-    "@react-aria/utils" "^3.21.1"
-    "@react-types/shared" "^3.21.0"
-    "@react-types/textfield" "^3.8.1"
-    "@swc/helpers" "^0.5.0"
-
-"@react-aria/utils@^3.21.1":
-  version "3.21.1"
-  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.21.1.tgz#35f5d545757ea38f05a0d2f5492f13217ebb03ce"
-  integrity sha512-tySfyWHXOhd/b6JSrSOl7krngEXN3N6pi1hCAXObRu3+MZlaZOMDf/j18aoteaIF2Jpv8HMWUJUJtQKGmBJGRA==
-  dependencies:
-    "@react-aria/ssr" "^3.8.0"
-    "@react-stately/utils" "^3.8.0"
-    "@react-types/shared" "^3.21.0"
-    "@swc/helpers" "^0.5.0"
-    clsx "^1.1.1"
-
 "@react-icons/all-files@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@react-icons/all-files/-/all-files-4.1.0.tgz#477284873a0821928224b6fc84c62d2534d6650b"
   integrity sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==
 
-"@react-stately/numberfield@^3.6.2":
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/@react-stately/numberfield/-/numberfield-3.6.2.tgz#2102d956239721fbf629891d2de46920416492fc"
-  integrity sha512-li/SO3BU3RGySRNlXhPRKr161GJyNbQe6kjnj+0BFTS/ST9nxCgxFK4llHf+S+I/shNI6+0U2nAjE85QOv4emQ==
-  dependencies:
-    "@internationalized/number" "^3.3.0"
-    "@react-stately/utils" "^3.8.0"
-    "@react-types/numberfield" "^3.6.1"
-    "@react-types/shared" "^3.21.0"
-    "@swc/helpers" "^0.5.0"
-
-"@react-stately/utils@^3.8.0":
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.8.0.tgz#88a45742c58bde804f6cbecb20ea3833915cfdf0"
-  integrity sha512-wCIoFDbt/uwNkWIBF+xV+21k8Z8Sj5qGO3uptTcVmjYcZngOaGGyB4NkiuZhmhG70Pkv+yVrRwoC1+4oav9cCg==
-  dependencies:
-    "@swc/helpers" "^0.5.0"
-
-"@react-types/button@^3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.9.0.tgz#66df80cafaa98aaa34c331e927d21fdf4a0bdc4a"
-  integrity sha512-YhbchUDB7yL88ZFA0Zqod6qOMdzCLD5yVRmhWymk0yNLvB7EB1XX4c5sRANalfZSFP0RpCTlkjB05Hzp4+xOYg==
-  dependencies:
-    "@react-types/shared" "^3.21.0"
-
-"@react-types/label@^3.8.1":
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.8.1.tgz#b076a0fb955051307bfa3fed7e18ce0dc76d8c7b"
-  integrity sha512-fA6zMTF2TmfU7H8JBJi0pNd8t5Ak4gO+ZA3cZBysf8r3EmdAsgr3LLqFaGTnZzPH1Fux6c7ARI3qjVpyNiejZQ==
-  dependencies:
-    "@react-types/shared" "^3.21.0"
-
-"@react-types/numberfield@^3.6.1":
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/@react-types/numberfield/-/numberfield-3.6.1.tgz#da13f9086181a64a7e2e39f500584bdca20097b3"
-  integrity sha512-jdMCN0mQ7eZkPrCKYkkG+jSjcG2VQ5P7mR9tTaCQeQK1wo+tF/8LWD+6n6dU7hH/qlU9sxVEg3U3kJ9sgNK+Hw==
-  dependencies:
-    "@react-types/shared" "^3.21.0"
-
-"@react-types/shared@^3.21.0":
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.21.0.tgz#1af41fdf7dfbdbd33bbc1210617c43ed0d4ef20c"
-  integrity sha512-wJA2cUF8dP4LkuNUt9Vh2kkfiQb2NLnV2pPXxVnKJZ7d4x2/7VPccN+LYPnH8m0X3+rt50cxWuPKQmjxSsCFOg==
-
-"@react-types/textfield@^3.8.1":
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/@react-types/textfield/-/textfield-3.8.1.tgz#433c82d8f696ed77b1d5e71aadc40cbe378b536c"
-  integrity sha512-p8Xmew9kzJd+tCM7h9LyebZHpv7SH1IE1Nu13hLCOV5cZ/tVVVCwjNGLMv4MtUpSn++H42YLJgAW9Uif+a+RHg==
-  dependencies:
-    "@react-types/shared" "^3.21.0"
-
 "@repeaterjs/repeater@3.0.4", "@repeaterjs/repeater@^3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@repeaterjs/repeater/-/repeater-3.0.4.tgz#a04d63f4d1bf5540a41b01a921c9a7fddc3bd1ca"
@@ -4412,13 +4155,6 @@
   dependencies:
     tslib "^2.4.0"
 
-"@swc/helpers@^0.5.0":
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.3.tgz#98c6da1e196f5f08f977658b80d6bd941b5f294f"
-  integrity sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==
-  dependencies:
-    tslib "^2.4.0"
-
 "@tanstack/query-core@4.36.1":
   version "4.36.1"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.36.1.tgz#79f8c1a539d47c83104210be2388813a7af2e524"
@@ -6325,7 +6061,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^1.1.1, clsx@^1.2.1:
+clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -8664,16 +8400,6 @@ internal-slot@^1.0.5:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
-intl-messageformat@^10.1.0:
-  version "10.5.4"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.5.4.tgz#7b212b083f1b354d7e282518e78057e025134af9"
-  integrity sha512-z+hrFdiJ/heRYlzegrdFYqU1m/KOMOVMqNilIArj+PbsuU8TNE7v4TWdQgSoxlxbT4AcZH3Op3/Fu15QTp+W1w==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/fast-memoize" "2.2.0"
-    "@formatjs/icu-messageformat-parser" "2.7.0"
-    tslib "^2.4.0"
-
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"

From 297993ec9f9c2df91be046392e65b8320f34bb3b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 2 Nov 2023 11:18:31 +0700
Subject: [PATCH 294/368] fix: package dep

---
 package.json                                  |   6 +-
 .../abi/args-form/field/ArgFieldWidget.tsx    |   6 +-
 .../icon-buttons/IconButton.tsx               |   9 +-
 .../json-schema/form/widgets/SelectWidget.tsx |   6 +-
 yarn.lock                                     | 307 ++++--------------
 5 files changed, 79 insertions(+), 255 deletions(-)

diff --git a/package.json b/package.json
index cffa9077d..38f61bd0f 100644
--- a/package.json
+++ b/package.json
@@ -18,13 +18,17 @@
     "push-release": "git push --follow-tags origin main",
     "prepare": "husky install"
   },
+  "resolutions": {
+    "@interchain-ui/react": "1.11.4",
+    "chakra-react-select": "^4.7.0"
+  },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.8.0",
     "@amplitude/marketing-analytics-browser": "^1.0.7",
     "@chain-registry/types": "0.17.0",
     "@chakra-ui/anatomy": "^2.1.0",
     "@chakra-ui/card": "^2.1.1",
-    "@chakra-ui/icons": "^1.1.1",
+    "@chakra-ui/icons": "^2.0.11",
     "@chakra-ui/react": "2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
     "@cosmjs/cosmwasm-stargate": "0.31.3",
diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index a54dd5749..ffdacf0f2 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -107,13 +107,15 @@ export const ArgFieldWidget = ({
             ...provided,
             color: state.isDisabled ? "gray.700" : undefined,
           }),
-          option: (provided, state) => ({
+          option: (provided) => ({
             ...provided,
-            bg: state.isSelected ? "gray.800" : undefined,
             color: "text.main",
             _hover: {
               bg: "gray.700",
             },
+            _selected: {
+              bg: "gray.800",
+            },
           }),
         }}
       />
diff --git a/src/lib/components/json-schema/form/templates/button-templates/icon-buttons/IconButton.tsx b/src/lib/components/json-schema/form/templates/button-templates/icon-buttons/IconButton.tsx
index fea067783..b98439f7a 100644
--- a/src/lib/components/json-schema/form/templates/button-templates/icon-buttons/IconButton.tsx
+++ b/src/lib/components/json-schema/form/templates/button-templates/icon-buttons/IconButton.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ArrowUpIcon, ArrowDownIcon } from "@chakra-ui/icons";
 import type { IconButtonProps } from "@rjsf/utils";
 
 import { CustomIcon } from "lib/components/icon";
@@ -11,14 +10,18 @@ export function MoveDownButton<T = any, F = any>(props: IconButtonProps<T, F>) {
     <ChakraIconButton<T, F>
       title="Move Down"
       {...props}
-      icon={<ArrowDownIcon />}
+      icon={<CustomIcon name="arrow-down" />}
     />
   );
 }
 
 export function MoveUpButton<T = any, F = any>(props: IconButtonProps<T, F>) {
   return (
-    <ChakraIconButton<T, F> title="Move Up" {...props} icon={<ArrowUpIcon />} />
+    <ChakraIconButton<T, F>
+      title="Move Up"
+      {...props}
+      icon={<CustomIcon name="arrow-up" />}
+    />
   );
 }
 
diff --git a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
index 2e2f4469b..1b38e655a 100644
--- a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
+++ b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
@@ -158,13 +158,15 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
             ...provided,
             color: state.isDisabled ? "gray.700" : undefined,
           }),
-          option: (provided, state) => ({
+          option: (provided) => ({
             ...provided,
-            bg: state.isSelected ? "gray.800" : undefined,
             color: "text.main",
             _hover: {
               bg: "gray.700",
             },
+            _selected: {
+              bg: "gray.800",
+            },
           }),
         }}
       />
diff --git a/yarn.lock b/yarn.lock
index 1762fc43a..c70c7a22c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -616,7 +616,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -765,14 +765,6 @@
     "@chakra-ui/visually-hidden" "2.0.11"
     "@zag-js/focus-visible" "0.1.0"
 
-"@chakra-ui/clickable@1.2.6":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.2.6.tgz#7f3deef71580acf47c2395cac2c1734f43418a3f"
-  integrity sha512-89SsrQwwwAadcl/bN8nZqqaaVhVNFdBXqQnxVy1t07DL5ezubmNb5SgFh9LDznkm9YYPQhaGr3W6HFro7iAHMg==
-  dependencies:
-    "@chakra-ui/react-utils" "1.2.3"
-    "@chakra-ui/utils" "1.10.4"
-
 "@chakra-ui/clickable@2.0.10":
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-2.0.10.tgz#e89b7b3eaf9364753f6205e36fd5128b26a617d8"
@@ -787,15 +779,6 @@
   dependencies:
     "@chakra-ui/icon" "3.0.11"
 
-"@chakra-ui/color-mode@1.4.8":
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.4.8.tgz#e5367b909f5b4c782b239f9d37d4cf1a44c28559"
-  integrity sha512-iD4126DVQi06c6ARr3uf3R2rtEu8aBVjW8rhZ+lOsV26Z15iCJA7OAut13Xu06fcZvgjSB/ChDy6Sx9sV9UjHA==
-  dependencies:
-    "@chakra-ui/hooks" "1.9.1"
-    "@chakra-ui/react-env" "1.1.6"
-    "@chakra-ui/utils" "1.10.4"
-
 "@chakra-ui/color-mode@2.1.9":
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-2.1.9.tgz#d3a6f9ba9eee15d9e14cc96484e25d44cef1dbc1"
@@ -821,13 +804,6 @@
   resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-2.0.8.tgz#093ce6b166b37f2dd14e63f246635c463a59c106"
   integrity sha512-VuDD1rk1pFc+dItk4yUcstyoC9D2B35hatHDBtlPMqTczFAzpbgVJJYgEHANatXGfulM5SdckmYEIJ3Tac1Rtg==
 
-"@chakra-ui/descendant@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-2.1.4.tgz#b85c52b0b429da0a08d0950b4f8bef61b94f43f6"
-  integrity sha512-k1olHM6c0fcI5fQxO9rqg9rxripcfHMEm2LkORgH0CAzFn/U75CxCw5ec0IMedNWCdiv740enVfnfhBAoSg7gw==
-  dependencies:
-    "@chakra-ui/react-utils" "^1.2.3"
-
 "@chakra-ui/descendant@3.0.10":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-3.0.10.tgz#e54c95270896c451f61b57d31719ee042f4e1827"
@@ -879,26 +855,6 @@
     "@chakra-ui/react-types" "2.0.3"
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
-"@chakra-ui/form-control@^1.0.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.6.0.tgz#a2a7b82a385f75fababf3947d39e227b4d073929"
-  integrity sha512-MtUE98aocP2QTgvyyJ/ABuG33mhT3Ox56phKreG3HzbUKByMwrbQSm1QcAgyYdqSZ9eKB2tXx+qgGNh+avAfDA==
-  dependencies:
-    "@chakra-ui/hooks" "1.9.1"
-    "@chakra-ui/icon" "2.0.5"
-    "@chakra-ui/react-utils" "1.2.3"
-    "@chakra-ui/utils" "1.10.4"
-
-"@chakra-ui/hooks@1.9.1":
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.9.1.tgz#7a00659e6bb4d56cf56022071eca0b77a7df1ac1"
-  integrity sha512-SEeh1alDKzrP9gMLWMnXOUDBQDKF/URL6iTmkumTn6vhawWNla6sPrcMyoCzWdMzwUhZp3QNtCKbUm7dxBXvPw==
-  dependencies:
-    "@chakra-ui/react-utils" "1.2.3"
-    "@chakra-ui/utils" "1.10.4"
-    compute-scroll-into-view "1.0.14"
-    copy-to-clipboard "3.3.1"
-
 "@chakra-ui/hooks@2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-2.1.0.tgz#a8df3692e407c2fed8cc551c8ce7f3fcd0ea9864"
@@ -909,13 +865,6 @@
     compute-scroll-into-view "1.0.14"
     copy-to-clipboard "3.3.1"
 
-"@chakra-ui/icon@2.0.5", "@chakra-ui/icon@^2.0.0":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-2.0.5.tgz#d57f53e6a2c7ae1bae7292a1778fd466c02e2e29"
-  integrity sha512-ZrqRvCCIxGr4qFd/r1pmtd9tobRmv8KAxV7ygFoc/t4vOSKTcVIjhE12gsI3FzgvXM15ZFVwsxa1zodwgo5neQ==
-  dependencies:
-    "@chakra-ui/utils" "1.10.4"
-
 "@chakra-ui/icon@3.0.11":
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.11.tgz#a51dda24bed2f2ed77b4136ada8f22d3249c9870"
@@ -923,13 +872,19 @@
   dependencies:
     "@chakra-ui/shared-utils" "2.0.2"
 
-"@chakra-ui/icons@^1.1.1":
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.1.7.tgz#f8c0c44a969c8654b90026b7d375b550c4bfbc49"
-  integrity sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==
+"@chakra-ui/icon@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.2.0.tgz#92b9454aa0d561b4994bcd6a1b3bb1fdd5c67bef"
+  integrity sha512-xxjGLvlX2Ys4H0iHrI16t74rG9EBcpFvJ3Y3B7KMQTrnW34Kf7Da/UC8J67Gtx85mTHW020ml85SVPKORWNNKQ==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.5"
+
+"@chakra-ui/icons@^2.0.11":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.1.1.tgz#58ff0f9e703f2f4f89debd600ce4e438f43f9c9a"
+  integrity sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==
   dependencies:
-    "@chakra-ui/icon" "2.0.5"
-    "@types/react" "^17.0.15"
+    "@chakra-ui/icon" "3.2.0"
 
 "@chakra-ui/image@2.0.11":
   version "2.0.11"
@@ -961,15 +916,6 @@
     "@chakra-ui/react-context" "2.0.4"
     "@chakra-ui/shared-utils" "2.0.2"
 
-"@chakra-ui/layout@^1.0.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.8.0.tgz#f95e78168644b45ac7327e4e0cfb1f0e6f7c3b4d"
-  integrity sha512-GJtEKez5AZu0XQTxI6a6jwA/hMDD36pP0HBxBOGuHP1hWCebDzMjraiMfWiP9w7hKERFE4j19kocHxIXyocfJA==
-  dependencies:
-    "@chakra-ui/icon" "2.0.5"
-    "@chakra-ui/react-utils" "1.2.3"
-    "@chakra-ui/utils" "1.10.4"
-
 "@chakra-ui/lazy-utils@2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@chakra-ui/lazy-utils/-/lazy-utils-2.0.2.tgz#d85f9afc60c2434ba76376fd4b23a7a0a1341e14"
@@ -1008,19 +954,6 @@
     "@chakra-ui/react-use-update-effect" "2.0.4"
     "@chakra-ui/transition" "2.0.11"
 
-"@chakra-ui/menu@^1.0.0":
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.8.12.tgz#98f9cbccfc8fbaaea1f19dcea16ffb96a25eb01f"
-  integrity sha512-X/s74VpOReQW4fCRCa21f/VOe++cXhPz2Sh7pDjtaT3zmKjrJwgk1Kw75cXfNX1eke6hf/wZ0FGweu/m7+C3OA==
-  dependencies:
-    "@chakra-ui/clickable" "1.2.6"
-    "@chakra-ui/descendant" "2.1.4"
-    "@chakra-ui/hooks" "1.9.1"
-    "@chakra-ui/popper" "2.4.3"
-    "@chakra-ui/react-utils" "1.2.3"
-    "@chakra-ui/transition" "1.4.8"
-    "@chakra-ui/utils" "1.10.4"
-
 "@chakra-ui/modal@2.2.2":
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-2.2.2.tgz#bf3ef2673a8641a5c851faceb7811e0c0f323517"
@@ -1090,14 +1023,6 @@
     "@chakra-ui/react-use-focus-on-pointer-down" "2.0.3"
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
-"@chakra-ui/popper@2.4.3":
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-2.4.3.tgz#fcdc917d13a56b9d44868c78a009e4dd692697a2"
-  integrity sha512-TGzFnYt3mtIVkIejtYIAu4Ka9DaYLzMR4NgcqI6EtaTvgK7Xep+6RTiY/Nq+ZT3l/eaNUwqHRFoNrDUg1XYasA==
-  dependencies:
-    "@chakra-ui/react-utils" "1.2.3"
-    "@popperjs/core" "^2.9.3"
-
 "@chakra-ui/popper@3.0.8":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-3.0.8.tgz#89b6984aee405316974dbb70ba451f85832bf44e"
@@ -1154,13 +1079,6 @@
   resolved "https://registry.yarnpkg.com/@chakra-ui/react-context/-/react-context-2.0.4.tgz#1b6ab260d44d9073c95b975b7d1643f011e65e02"
   integrity sha512-eBITFkf7fLSiMZrSdhweK4fYr41WUNMEeIEOP2dCWolE7WgKxNYaYleC+iRGY0GeXkFM2KYywUtixjJe29NuVA==
 
-"@chakra-ui/react-env@1.1.6":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-1.1.6.tgz#9915b02fd1f8ca62ccf578eaec793f1c4dea78b0"
-  integrity sha512-L90LNvCfe04FTkN9OPok/o2e60zLJNBH8Im/5dUHvqy7dXLXok8ZDad5vEL46XmGbhe7O8fbxhG6FmAYdcCHrQ==
-  dependencies:
-    "@chakra-ui/utils" "1.10.4"
-
 "@chakra-ui/react-env@2.0.10":
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-2.0.10.tgz#2eaa4ba64a14ecd2d279c32d5edfef7a6b5de3e8"
@@ -1283,13 +1201,6 @@
   resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-update-effect/-/react-use-update-effect-2.0.4.tgz#522bc58b943fffe540a91f7a096d42e4a91b9748"
   integrity sha512-F/I9LVnGAQyvww+x7tQb47wCwjhMYjpxtM1dTg1U3oCEXY0yF1Ts3NJLUAlsr3nAW6epJIwWx61niC7KWpam1w==
 
-"@chakra-ui/react-utils@1.2.3", "@chakra-ui/react-utils@^1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-1.2.3.tgz#3356c9299bc8faada8fac6c5886ca65ec95bb5be"
-  integrity sha512-r8pUwCVVB7UPhb0AiRa9ZzSp4xkMz64yIeJ4O4aGy4WMw7TRH4j4QkbkE1YC9tQitrXrliOlvx4WWJR4VyiGpw==
-  dependencies:
-    "@chakra-ui/utils" "^1.10.4"
-
 "@chakra-ui/react-utils@2.0.8":
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-2.0.8.tgz#1db4e920386f4afbf44fe9dd8aaaf6f22eefb371"
@@ -1398,14 +1309,6 @@
   resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-2.0.10.tgz#f8b1b6f1c8f45e3aeab44d5ab1f1debc71e52573"
   integrity sha512-SwId1xPaaFAaEYrR9eHkQHAuB66CbxwjWaQonEjeEUSh9ecxkd5WbXlsQSyf2hVRIqXJg0m3HIYblcKUsQt9Rw==
 
-"@chakra-ui/spinner@^1.0.0":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.2.6.tgz#d85fb3d763a69d40570b591507c5087dba38e6c4"
-  integrity sha512-GoUCccN120fGRVgUtfuwcEjeoaxffB+XsgpxX7jhWloXf8b6lkqm68bsxX4Ybb2vGN1fANI98/45JmrnddZO/A==
-  dependencies:
-    "@chakra-ui/utils" "1.10.4"
-    "@chakra-ui/visually-hidden" "1.1.6"
-
 "@chakra-ui/stat@2.0.11":
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-2.0.11.tgz#0c052aee68486a892e09e802bb569dc984e31eae"
@@ -1414,14 +1317,6 @@
     "@chakra-ui/icon" "3.0.11"
     "@chakra-ui/react-context" "2.0.4"
 
-"@chakra-ui/styled-system@1.19.0":
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.19.0.tgz#102fadaefc1a2dfd8e0c4837eafa660531a08419"
-  integrity sha512-z+bMfWs6jQGkpgarge1kmk78DuDhJIXRUMyRqZ3+CiIkze88bIIsww6mV2i8tEfUfTAvALeMnlYZ1DYsHsTTJw==
-  dependencies:
-    "@chakra-ui/utils" "1.10.4"
-    csstype "3.0.9"
-
 "@chakra-ui/styled-system@2.3.4":
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.3.4.tgz#6022c5a675b54a69b1d3c2d3e60258901dc7b82a"
@@ -1458,17 +1353,6 @@
     "@chakra-ui/utils" "2.0.11"
     react-fast-compare "3.2.0"
 
-"@chakra-ui/system@^1.2.0":
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.12.1.tgz#608655ef3f7cb82eedd8f20d2546458d90d77cce"
-  integrity sha512-Rp09/rMuPA3hF38OJxeQciGO9N0Ie1GxwHRAw1AFA/TY3fVyK9pNI5oN+J/1cAxq7v9yKdIr1YfnruJTI9xfEg==
-  dependencies:
-    "@chakra-ui/color-mode" "1.4.8"
-    "@chakra-ui/react-utils" "1.2.3"
-    "@chakra-ui/styled-system" "1.19.0"
-    "@chakra-ui/utils" "1.10.4"
-    react-fast-compare "3.2.0"
-
 "@chakra-ui/table@2.0.11":
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/@chakra-ui/table/-/table-2.0.11.tgz#9bd25d5383c94982b89e792675bc1d1f667f81f3"
@@ -1555,28 +1439,11 @@
     "@chakra-ui/react-use-event-listener" "2.0.4"
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
-"@chakra-ui/transition@1.4.8":
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.4.8.tgz#ac0f4675da929ae69fc9d6db6a1edf61e982772c"
-  integrity sha512-5uc8LEuCH7+0h++wqAav/EktTHOjbLDSTXQlU9fzPIlNNgyf2eXrHVN2AGMGKiMR9Z4gS7umQjZ54r0w/mZ/Fw==
-  dependencies:
-    "@chakra-ui/utils" "1.10.4"
-
 "@chakra-ui/transition@2.0.11":
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-2.0.11.tgz#b2cfeb2150871c635cb9d03d9b525481dbe56f56"
   integrity sha512-O0grc162LARPurjz1R+J+zr4AAKsVwN5+gaqLfZLMWg6TpvczJhwEA2fLCNAdkC/gomere390bJsy52xfUacUw==
 
-"@chakra-ui/utils@1.10.4", "@chakra-ui/utils@^1.10.4":
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.10.4.tgz#40a32d4efd8684b2e7432a40b285796383eacfd3"
-  integrity sha512-AM91VQQxw8F4F1WDA28mqKY6NFIOuzc2Ekkna88imy2OiqqmYH0xkq8J16L2qj4cLiLozpYqba3C79pWioy6FA==
-  dependencies:
-    "@types/lodash.mergewith" "4.6.6"
-    css-box-model "1.2.1"
-    framesync "5.3.0"
-    lodash.mergewith "4.6.2"
-
 "@chakra-ui/utils@2.0.11":
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-2.0.11.tgz#8e773f900a8356bd10c48b59151a781dba1c7b70"
@@ -1587,13 +1454,6 @@
     framesync "5.3.0"
     lodash.mergewith "4.6.2"
 
-"@chakra-ui/visually-hidden@1.1.6":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.1.6.tgz#7a546a5aebe4779c8f18d65b1f0e56249720f28d"
-  integrity sha512-Xzy5bA0UA+IyMgwJizQYSEdgz8cC/tHdmFB3CniXzmpKTSK8mJddeEBl+cGbXHBzxEUhH7xF1eaS41O+0ezWEQ==
-  dependencies:
-    "@chakra-ui/utils" "1.10.4"
-
 "@chakra-ui/visually-hidden@2.0.11":
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-2.0.11.tgz#b2eb236e803451b39cdfcce3c5ab52e773c066a3"
@@ -2047,7 +1907,7 @@
     "@chain-registry/types" "0.17.0"
     "@cosmos-kit/core" "^2.7.4"
     "@cosmos-kit/react-lite" "^2.5.5"
-    "@interchain-ui/react" "1.11.4"
+    "@interchain-ui/react" "^1.11.0"
     "@react-icons/all-files" "^4.1.0"
 
 "@cosmos-kit/station-extension@^2.5.4":
@@ -3143,7 +3003,7 @@
     long "^5.2.0"
     protobufjs "^7.1.1"
 
-"@interchain-ui/react@1.11.4":
+"@interchain-ui/react@1.11.4", "@interchain-ui/react@^1.11.0":
   version "1.11.4"
   resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.11.4.tgz#62ec06ebed6e9f434f1f406962565e86c34b9b6c"
   integrity sha512-jUx02LyyUjSKANcpNJ9DPOkVlD2nERmQZsqEnUeJQ6wsG4rgO5yd0jHDUgqotvwxkRisYSy8jqDGe3r4pYsNBw==
@@ -4443,18 +4303,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^18.0.21":
-  version "18.2.33"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.33.tgz#055356243dc4350a9ee6c6a2c07c5cae12e38877"
-  integrity sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17.0.15":
-  version "17.0.69"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.69.tgz#245a0cf2f5b0fb1d645691d3083e3c7d4409b98f"
-  integrity sha512-klEeru//GhiQvXUBayz0Q4l3rKHWsBR/EUOhOeow6hK2jV7MlO44+8yEk6+OtPeOlRfnpUnrLXzGK+iGph5aeg==
+  version "18.2.34"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.34.tgz#aed20f19473721ba328feb99d1ec3307ebc1a8dd"
+  integrity sha512-U6eW/alrRk37FU/MS2RYMjx0Va2JGIVXELTODaTIYgvWGCV4Y4TfTUzG8DdmpDNIT0Xpj/R7GfyHOJJrDttcvg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -5168,7 +5019,7 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
-aria-query@^5.1.3:
+aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@@ -5299,10 +5150,10 @@ assert@^2.0.0:
     object.assign "^4.1.4"
     util "^0.12.5"
 
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
 
 astral-regex@^2.0.0:
   version "2.0.0"
@@ -5346,10 +5197,10 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.6.2:
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.8.2.tgz#2f6f3cde40935825cf4465e3c1c9e77b240ff6ae"
-  integrity sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==
+axe-core@=4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
 axios@^0.21.2:
   version "0.21.4"
@@ -5375,7 +5226,7 @@ axios@^1.1.3:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^3.1.1:
+axobject-query@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
   integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
@@ -5852,20 +5703,7 @@ chain-registry@1.20.0:
     "@babel/runtime" "^7.21.0"
     "@chain-registry/types" "^0.17.0"
 
-chakra-react-select@^3.3.8:
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/chakra-react-select/-/chakra-react-select-3.3.9.tgz#1b4027b7e9715d9fdd918850b1d9297db050062a"
-  integrity sha512-6oMkCGznJm38e9nBbEs37u/raxwPKoPrOCetq1niLBlbs1wvftP06sSn2MWxiEf+VjNUpNqc9rk6sDzvcxOVLA==
-  dependencies:
-    "@chakra-ui/form-control" "^1.0.0"
-    "@chakra-ui/icon" "^2.0.0"
-    "@chakra-ui/layout" "^1.0.0"
-    "@chakra-ui/menu" "^1.0.0"
-    "@chakra-ui/spinner" "^1.0.0"
-    "@chakra-ui/system" "^1.2.0"
-    react-select "5.7.0"
-
-chakra-react-select@^4.7.0:
+chakra-react-select@^3.3.8, chakra-react-select@^4.7.0:
   version "4.7.6"
   resolved "https://registry.yarnpkg.com/chakra-react-select/-/chakra-react-select-4.7.6.tgz#3be8ffb314b8e75ef02663fd3e2fdf872b79683b"
   integrity sha512-ZL43hyXPnWf1g/HjsZDecbeJ4F2Q6tTPYJozlKWkrQ7lIX7ORP0aZYwmc5/Wly4UNzMimj2Vuosl6MmIXH+G2g==
@@ -6617,11 +6455,6 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@3.0.9:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
-  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
-
 csstype@3.1.2, csstype@^3.0.11, csstype@^3.0.2, csstype@^3.0.7:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
@@ -6936,9 +6769,9 @@ eastasianwidth@^0.2.0:
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 electron-to-chromium@^1.4.535:
-  version "1.4.572"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.572.tgz#ed9876658998138fe9e3aa47ecfa0bf914192a86"
-  integrity sha512-RlFobl4D3ieetbnR+2EpxdzFl9h0RAJkPK3pfiwMug2nhBin2ZCsGIAJWdpNniLz43sgXam/CgipOmvTA+rUiA==
+  version "1.4.574"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.574.tgz#6de04d7c6e244e5ffcae76d2e2a33b02cab66781"
+  integrity sha512-bg1m8L0n02xRzx4LsTTMbBPiUd9yIR+74iPtS/Ao65CuXvhVZHP0ym1kSdDG3yHFDXqHQQBKujlN1AQ8qZnyFg==
 
 elliptic@6.5.4, elliptic@^6.4.0, elliptic@^6.5.3, elliptic@^6.5.4:
   version "6.5.4"
@@ -7035,7 +6868,7 @@ es-abstract@^1.22.1:
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.13"
 
-es-iterator-helpers@^1.0.12:
+es-iterator-helpers@^1.0.12, es-iterator-helpers@^1.0.15:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
   integrity sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==
@@ -7218,26 +7051,26 @@ eslint-plugin-import@^2.27.5, eslint-plugin-import@^2.28.1:
     tsconfig-paths "^3.14.2"
 
 eslint-plugin-jsx-a11y@^6.7.1:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
-  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
+  integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
   dependencies:
-    "@babel/runtime" "^7.20.7"
-    aria-query "^5.1.3"
-    array-includes "^3.1.6"
-    array.prototype.flatmap "^1.3.1"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.6.2"
-    axobject-query "^3.1.1"
+    "@babel/runtime" "^7.23.2"
+    aria-query "^5.3.0"
+    array-includes "^3.1.7"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "=4.7.0"
+    axobject-query "^3.2.1"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
-    has "^1.0.3"
-    jsx-ast-utils "^3.3.3"
-    language-tags "=1.0.5"
+    es-iterator-helpers "^1.0.15"
+    hasown "^2.0.0"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
     minimatch "^3.1.2"
-    object.entries "^1.1.6"
-    object.fromentries "^2.0.6"
-    semver "^6.3.0"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
 
 eslint-plugin-prettier@^5.0.0:
   version "5.0.1"
@@ -8142,11 +7975,6 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
-has@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
-  integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
-
 hash-base@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
@@ -9337,7 +9165,7 @@ jsonpointer@^5.0.1:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
   integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
@@ -9392,17 +9220,17 @@ klona@2.0.6:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
 
-language-subtag-registry@~0.3.2:
+language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
   integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
-language-tags@=1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
   dependencies:
-    language-subtag-registry "~0.3.2"
+    language-subtag-registry "^0.3.20"
 
 leven@^3.1.0:
   version "3.1.0"
@@ -10170,7 +9998,7 @@ object.assign@^4.1.2, object.assign@^4.1.4:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.5, object.entries@^1.1.6:
+object.entries@^1.1.5, object.entries@^1.1.6, object.entries@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
   integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
@@ -10903,21 +10731,6 @@ react-responsive@^9.0.0:
     prop-types "^15.6.1"
     shallow-equal "^1.2.1"
 
-react-select@5.7.0:
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.0.tgz#82921b38f1fcf1471a0b62304da01f2896cd8ce6"
-  integrity sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==
-  dependencies:
-    "@babel/runtime" "^7.12.0"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/react" "^11.8.1"
-    "@floating-ui/dom" "^1.0.1"
-    "@types/react-transition-group" "^4.4.0"
-    memoize-one "^6.0.0"
-    prop-types "^15.6.0"
-    react-transition-group "^4.3.0"
-    use-isomorphic-layout-effect "^1.1.2"
-
 react-select@5.7.7, react-select@^5.4.0:
   version "5.7.7"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.7.tgz#dbade9dbf711ef2a181970c10f8ab319ac37fbd0"
@@ -12166,9 +11979,9 @@ undici-types@~5.26.4:
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
 universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
 unixify@^1.0.0:
   version "1.0.0"

From 48fb09e36692bc46b5a38103c4f77ce716aeaee2 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 2 Nov 2023 11:24:28 +0700
Subject: [PATCH 295/368] fix: dropdown menu portal

---
 src/lib/components/abi/args-form/field/ArgFieldWidget.tsx    | 1 +
 src/lib/components/json-schema/form/widgets/SelectWidget.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
index ffdacf0f2..c4dd7bff7 100644
--- a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -96,6 +96,7 @@ export const ArgFieldWidget = ({
         )}
         onChange={(e) => onChange(e?.value)}
         menuPosition="fixed"
+        menuPortalTarget={document.querySelector("body")}
         chakraStyles={{
           control: (provided) => ({
             ...provided,
diff --git a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
index 1b38e655a..70a2277c0 100644
--- a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
+++ b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
@@ -147,6 +147,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
         autoFocus={autofocus}
         value={selectedIndex === undefined ? undefined : formValue}
         menuPosition="fixed"
+        menuPortalTarget={document.querySelector("body")}
         chakraStyles={{
           control: (provided) => ({
             ...provided,

From c8941172002576bac02ad7dbbc976fee6d60c85b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 2 Nov 2023 11:49:45 +0700
Subject: [PATCH 296/368] docs: fix changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1082dfd43..ca60a30d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#600](https://github.com/alleslabs/celatone-frontend/pull/600) Add modules in public project
+- [#601](https://github.com/alleslabs/celatone-frontend/pull/601) Add modules in public project
 - [#581](https://github.com/alleslabs/celatone-frontend/pull/581) Support new move input i.e., object, fixed_point, and decimal
 - [#583](https://github.com/alleslabs/celatone-frontend/pull/583) Support Move code snippets
 - [#585](https://github.com/alleslabs/celatone-frontend/pull/585) Add Initia Faucet

From d608a7261a391161e245358442430a496464445b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 2 Nov 2023 12:03:11 +0700
Subject: [PATCH 297/368] chore: refactor undefined icon

---
 src/lib/data/icon.ts                                        | 5 +++++
 src/lib/data/index.ts                                       | 1 +
 src/lib/pages/pools/constant.ts                             | 6 ------
 src/lib/pages/pools/utils.ts                                | 4 ++--
 .../pages/public-project/components/PublicProjectCard.tsx   | 6 ++----
 5 files changed, 10 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/data/icon.ts

diff --git a/src/lib/data/icon.ts b/src/lib/data/icon.ts
new file mode 100644
index 000000000..75d91f5ab
--- /dev/null
+++ b/src/lib/data/icon.ts
@@ -0,0 +1,5 @@
+export const UNDEFINED_ICON_LIST = [
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
+];
diff --git a/src/lib/data/index.ts b/src/lib/data/index.ts
index bf31ea1e4..caeb9542c 100644
--- a/src/lib/data/index.ts
+++ b/src/lib/data/index.ts
@@ -1,2 +1,3 @@
 export * from "./constant";
 export * from "./tx";
+export * from "./icon";
diff --git a/src/lib/pages/pools/constant.ts b/src/lib/pages/pools/constant.ts
index 9b202ea34..91e2aba67 100644
--- a/src/lib/pages/pools/constant.ts
+++ b/src/lib/pages/pools/constant.ts
@@ -1,9 +1,3 @@
-export const UNDEFINED_TOKEN_LIST = [
-  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
-  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
-  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
-];
-
 export const SUPERFLUID_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg";
 export const BALANCER_ICON =
diff --git a/src/lib/pages/pools/utils.ts b/src/lib/pages/pools/utils.ts
index fb4528a83..98fa2f5a9 100644
--- a/src/lib/pages/pools/utils.ts
+++ b/src/lib/pages/pools/utils.ts
@@ -1,6 +1,6 @@
-import { UNDEFINED_TOKEN_LIST } from "./constant";
+import { UNDEFINED_ICON_LIST } from "lib/data";
 
 export const getUndefinedTokenIcon = (denom: string) => {
   const index = denom.split("").reduce((v, c) => v + c.charCodeAt(0), 0);
-  return UNDEFINED_TOKEN_LIST[index % UNDEFINED_TOKEN_LIST.length];
+  return UNDEFINED_ICON_LIST[index % UNDEFINED_ICON_LIST.length];
 };
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index a96997e03..04be70d0d 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useClampText } from "use-clamp-text";
 
 import { useInternalNavigate } from "lib/app-provider";
+import { UNDEFINED_ICON_LIST } from "lib/data";
 import type { PublicProjectInfo } from "lib/types";
 
 import { BookmarkButton } from "./BookmarkButton";
@@ -57,10 +58,7 @@ export const PublicProjectCard = observer(
             >
               <Flex gap={2} pr={1}>
                 <Image
-                  src={
-                    item.logo ??
-                    "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg"
-                  }
+                  src={item.logo ?? UNDEFINED_ICON_LIST[0]}
                   borderRadius="full"
                   alt="Celatone"
                   width={7}

From fd1896fe043e8bd8ec6ac3952504dfd71160dfc8 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 2 Nov 2023 14:12:35 +0700
Subject: [PATCH 298/368] fix: add fallback when logo is undefined

---
 src/lib/layout/navbar/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 11faaee03..df3f36d17 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -10,7 +10,12 @@ import {
   useMoveConfig,
 } from "lib/app-provider";
 import type { IconKeys } from "lib/components/icon";
-import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME, StorageKeys } from "lib/data";
+import {
+  INSTANTIATED_LIST_NAME,
+  SAVED_LIST_NAME,
+  StorageKeys,
+  UNDEFINED_ICON_LIST,
+} from "lib/data";
 import { useIsCurrentPage } from "lib/hooks";
 import { usePublicProjectStore } from "lib/providers/store";
 import { formatSlugName, getListIcon } from "lib/utils";
@@ -64,7 +69,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
               ...getSavedPublicProjects().map((list) => ({
                 name: list.name,
                 slug: `/projects/${list.slug}`,
-                logo: list.logo as IconKeys,
+                logo: list.logo || UNDEFINED_ICON_LIST[0],
               })),
               {
                 name: "View All Projects",

From 301444197b2ec080e1b095ff9c633491576d27c1 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 2 Nov 2023 16:21:46 +0700
Subject: [PATCH 299/368] fix: add isWasm, isMove to handle returned data

---
 CHANGELOG.md                      |   1 +
 src/lib/gql/fragment-masking.ts   |  14 +-
 src/lib/gql/gql.ts                | 211 ++++++++-
 src/lib/gql/graphql.ts            | 734 +++++++++++++++++++++++++++---
 src/lib/query/tx.ts               |  77 ++--
 src/lib/services/txService.ts     |  72 +--
 src/lib/utils/extractMsgType.ts   |   4 +-
 src/lib/utils/msgFurtherAction.ts |   2 +-
 8 files changed, 961 insertions(+), 154 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca60a30d1..9e0c619fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -83,6 +83,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#603](https://github.com/alleslabs/celatone-frontend/pull/603) Dynamically change returned data by isWasm, isMove
 - [#602](https://github.com/alleslabs/celatone-frontend/pull/602) Fix package version client error
 - [#599](https://github.com/alleslabs/celatone-frontend/pull/599) Fix getNavigationUrl to support move
 - [#590](https://github.com/alleslabs/celatone-frontend/pull/590) Fix upload script various bugs
diff --git a/src/lib/gql/fragment-masking.ts b/src/lib/gql/fragment-masking.ts
index 14a100d12..c6c2ca9cf 100644
--- a/src/lib/gql/fragment-masking.ts
+++ b/src/lib/gql/fragment-masking.ts
@@ -1,5 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
+/* eslint-disable */
+import {
+  ResultOf,
+  TypedDocumentNode as DocumentNode,
+} from "@graphql-typed-document-node/core";
 
 export type FragmentType<TDocumentType extends DocumentNode<any, any>> =
   TDocumentType extends DocumentNode<infer TType, any>
@@ -43,3 +46,10 @@ export function useFragment<TType>(
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any;
 }
+
+export function makeFragmentData<
+  F extends DocumentNode,
+  FT extends ResultOf<F>,
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index cc69d2dd5..fcb2974ca 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -2,6 +2,16 @@
 import * as types from "./graphql";
 import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
 
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel-plugin for production.
+ */
 const documents = {
   "\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n":
     types.GetAccountIdByAddressQueryDocumentDocument,
@@ -89,7 +99,7 @@ const documents = {
     types.GetProposalListCountDocument,
   "\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n":
     types.GetProposalTypesDocument,
-  "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n":
+  "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_send\n        is_ibc\n        is_clear_admin @include(if: $isWasm)\n        is_execute @include(if: $isWasm)\n        is_instantiate @include(if: $isWasm)\n        is_migrate @include(if: $isWasm)\n        is_store_code @include(if: $isWasm)\n        is_update_admin @include(if: $isWasm)\n        is_move_publish @include(if: $isMove)\n        is_move_upgrade @include(if: $isMove)\n        is_move_execute @include(if: $isMove)\n        is_move_script @include(if: $isMove)\n      }\n      is_signer\n    }\n  }\n":
     types.GetTxsByAddressPaginationDocument,
   "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByAddressDocument,
@@ -97,15 +107,15 @@ const documents = {
     types.GetTxsByPoolIdPaginationDocument,
   "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByPoolIdDocument,
-  "\n  query getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n":
+  "\n  query getTxs(\n    $offset: Int!\n    $pageSize: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_send\n      is_ibc\n      is_clear_admin @include(if: $isWasm)\n      is_execute @include(if: $isWasm)\n      is_instantiate @include(if: $isWasm)\n      is_migrate @include(if: $isWasm)\n      is_store_code @include(if: $isWasm)\n      is_update_admin @include(if: $isWasm)\n      is_move_publish @include(if: $isMove)\n      is_move_upgrade @include(if: $isMove)\n      is_move_execute @include(if: $isMove)\n      is_move_script @include(if: $isMove)\n    }\n  }\n":
     types.GetTxsDocument,
   "\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n":
     types.GetTxsCountDocument,
-  "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n":
+  "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_send\n      is_ibc\n      is_clear_admin @include(if: $isWasm)\n      is_execute @include(if: $isWasm)\n      is_instantiate @include(if: $isWasm)\n      is_migrate @include(if: $isWasm)\n      is_store_code @include(if: $isWasm)\n      is_update_admin @include(if: $isWasm)\n      is_move_publish @include(if: $isMove)\n      is_move_upgrade @include(if: $isMove)\n      is_move_execute @include(if: $isMove)\n      is_move_script @include(if: $isMove)\n    }\n  }\n":
     types.GetBlockTransactionsByHeightQueryDocument,
   "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetBlockTransactionCountByHeightQueryDocument,
-  "\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n":
+  "\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_send\n        is_ibc\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n":
     types.GetModuleTransactionsQueryDocument,
   "\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetModuleTransactionsCountQueryDocument,
@@ -113,170 +123,345 @@ const documents = {
     types.GetValidatorsDocument,
 };
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function graphql(source: string): unknown;
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"
 ): (typeof documents)["\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"
 ): (typeof documents)["\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getBlockDetailsByHeight($height: Int!) {\n    blocks_by_pk(height: $height) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          sum {\n            gas_used\n            gas_limit\n          }\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"
 ): (typeof documents)["\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getBlockTime {\n    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {\n      height\n      timestamp\n    }\n    latest: blocks(order_by: { height: desc }, limit: 1) {\n      height\n      timestamp\n    }\n  }\n"
 ): (typeof documents)["\n  query getBlockTime {\n    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {\n      height\n      timestamp\n    }\n    latest: blocks(order_by: { height: desc }, limit: 1) {\n      height\n      timestamp\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getCodeListQuery {\n    codes(limit: 100, offset: 0, order_by: { id: desc }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
 ): (typeof documents)["\n  query getCodeListQuery {\n    codes(limit: 100, offset: 0, order_by: { id: desc }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
 ): (typeof documents)["\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
 ): (typeof documents)["\n  query getCodeListByIDsQuery($ids: [Int!]!) {\n    codes(where: { id: { _in: $ids } }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getCodeDataByCodeId($codeId: Int!) {\n    codes_by_pk(id: $codeId) {\n      id\n      account {\n        address\n      }\n      transaction {\n        hash\n        block {\n          height\n          timestamp\n        }\n      }\n      # Can only have 1 store code proposal\n      code_proposals(limit: 1) {\n        proposal_id\n        block {\n          height\n          timestamp\n        }\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
 ): (typeof documents)["\n  query getCodeDataByCodeId($codeId: Int!) {\n    codes_by_pk(id: $codeId) {\n      id\n      account {\n        address\n      }\n      transaction {\n        hash\n        block {\n          height\n          timestamp\n        }\n      }\n      # Can only have 1 store code proposal\n      code_proposals(limit: 1) {\n        proposal_id\n        block {\n          height\n          timestamp\n        }\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getCodeListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    codes(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
 ): (typeof documents)["\n  query getCodeListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    codes(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getContractByContractAddressQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      address\n      code_id\n      label\n      accountByInitBy {\n        address\n      }\n      admin: account {\n        address\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getContractByContractAddressQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      address\n      code_id\n      label\n      accountByInitBy {\n        address\n      }\n      admin: account {\n        address\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: '\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
 ): (typeof documents)['\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getContractListQuery {\n    contracts(limit: 100, offset: 0, order_by: { id: desc }) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getContractListQuery {\n    contracts(limit: 100, offset: 0, order_by: { id: desc }) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getAdminByContractAddressesQueryDocument(\n    $contractAddresses: [String!]!\n  ) {\n    contracts(where: { address: { _in: $contractAddresses } }) {\n      address\n      admin: account {\n        address\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getAdminByContractAddressesQueryDocument(\n    $contractAddresses: [String!]!\n  ) {\n    contracts(where: { address: { _in: $contractAddresses } }) {\n      address\n      admin: account {\n        address\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getContractListByAdmin($address: String!) {\n    contracts(\n      where: { account: { address: { _eq: $address } } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getContractListByAdmin($address: String!) {\n    contracts(\n      where: { account: { address: { _eq: $address } } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getContractListByCodeIdPagination(\n    $codeId: Int!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { code_id: { _eq: $codeId } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getContractListByCodeIdPagination(\n    $codeId: Int!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { code_id: { _eq: $codeId } }\n      order_by: { transaction: { block: { timestamp: desc } } }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getContractListCountByCodeId($codeId: Int!) {\n    contracts_aggregate(where: { code_id: { _eq: $codeId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getContractListCountByCodeId($codeId: Int!) {\n    contracts_aggregate(where: { code_id: { _eq: $codeId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getMigrationHistoriesByContractAddress(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_histories(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { block: { timestamp: desc } }\n      limit: $pageSize\n      offset: $offset\n    ) {\n      code_id\n      account {\n        address\n      }\n      block {\n        height\n        timestamp\n      }\n      remark\n      code {\n        account {\n          address\n        }\n        cw2_contract\n        cw2_version\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getMigrationHistoriesByContractAddress(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_histories(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { block: { timestamp: desc } }\n      limit: $pageSize\n      offset: $offset\n    ) {\n      code_id\n      account {\n        address\n      }\n      block {\n        height\n        timestamp\n      }\n      remark\n      code {\n        account {\n          address\n        }\n        cw2_contract\n        cw2_version\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getMigrationHistoriesCountByContractAddress($contractAddress: String!) {\n    contract_histories_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getMigrationHistoriesCountByContractAddress($contractAddress: String!) {\n    contract_histories_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: {\n        contract_histories_aggregate: { max: { block_height: desc } }\n      }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getContractListByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: {\n        contract_histories_aggregate: { max: { block_height: desc } }\n      }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getContractListByAdminPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getContractListByAdminPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contracts(\n      where: { account: { address: { _eq: $walletAddress } } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        account {\n          address\n        }\n      }\n      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n        remark\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"
 ): (typeof documents)["\n  query getModuleIdByNameAndVmAddressQuery(\n    $name: String!\n    $vmAddress: String!\n  ) {\n    modules(\n      where: {\n        name: { _eq: $name }\n        vm_address: { vm_address: { _eq: $vmAddress } }\n      }\n    ) {\n      id\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getModuleHistoriesQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_histories(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block: { height: desc } }\n    ) {\n      remark\n      block {\n        height\n        timestamp\n      }\n      upgrade_policy\n    }\n  }\n"
 ): (typeof documents)["\n  query getModuleHistoriesQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_histories(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block: { height: desc } }\n    ) {\n      remark\n      block {\n        height\n        timestamp\n      }\n      upgrade_policy\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getModuleHistoriesCountQuery($moduleId: Int!) {\n    module_histories_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: '\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'
 ): (typeof documents)['\n  query getModuleInitialPublishInfoQuery($moduleId: Int!) {\n    modules(where: { id: { _eq: $moduleId } }) {\n      publisher_vm_address: vm_address {\n        vm_address\n      }\n      publish_transaction: transaction {\n        hash\n      }\n      module_proposals(\n        where: {\n          proposal: { type: { _in: ["/initia.move.v1.MsgGovPublish"] } }\n        }\n        order_by: { proposal_id: asc }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n      module_histories(order_by: { block: { timestamp: asc } }, limit: 1) {\n        block {\n          height\n          timestamp\n        }\n      }\n    }\n  }\n'];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
 ): (typeof documents)["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
 ): (typeof documents)["\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n      spread_factor\n      tick_spacing\n      contract_address\n    }\n  }\n"
 ): (typeof documents)["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n      spread_factor\n      tick_spacing\n      contract_address\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"
 ): (typeof documents)["\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"
 ): (typeof documents)["\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n      is_expedited\n      resolved_height\n    }\n  }\n"
 ): (typeof documents)["\n  query getProposalsByWalletAddressPagination(\n    $walletAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: { account: { address: { _eq: $walletAddress } } }\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      title\n      status\n      voting_end_time\n      deposit_end_time\n      type\n      id\n      is_expedited\n      resolved_height\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getProposalsCountByWalletAddress($walletAddress: String!) {\n    proposals_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getProposalsCountByWalletAddress($walletAddress: String!) {\n    proposals_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getProposalList(\n    $expression: proposals_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: $expression\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      type\n      id\n      title\n      voting_end_time\n      deposit_end_time\n      resolved_height\n      status\n      is_expedited\n      account {\n        address\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getProposalList(\n    $expression: proposals_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    proposals(\n      where: $expression\n      order_by: { id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      type\n      id\n      title\n      voting_end_time\n      deposit_end_time\n      resolved_height\n      status\n      is_expedited\n      account {\n        address\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getProposalListCount($expression: proposals_bool_exp) {\n    proposals_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getProposalListCount($expression: proposals_bool_exp) {\n    proposals_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n"
 ): (typeof documents)["\n  query getProposalTypes {\n    proposals(distinct_on: type) {\n      type\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
-  source: "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n"
-): (typeof documents)["\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_publish\n        is_move_upgrade\n        is_move_execute\n        is_move_script\n      }\n      is_signer\n    }\n  }\n"];
+  source: "\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_send\n        is_ibc\n        is_clear_admin @include(if: $isWasm)\n        is_execute @include(if: $isWasm)\n        is_instantiate @include(if: $isWasm)\n        is_migrate @include(if: $isWasm)\n        is_store_code @include(if: $isWasm)\n        is_update_admin @include(if: $isWasm)\n        is_move_publish @include(if: $isMove)\n        is_move_upgrade @include(if: $isMove)\n        is_move_execute @include(if: $isMove)\n        is_move_script @include(if: $isMove)\n      }\n      is_signer\n    }\n  }\n"
+): (typeof documents)["\n  query getTxsByAddressPagination(\n    $expression: account_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    account_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_send\n        is_ibc\n        is_clear_admin @include(if: $isWasm)\n        is_execute @include(if: $isWasm)\n        is_instantiate @include(if: $isWasm)\n        is_migrate @include(if: $isWasm)\n        is_store_code @include(if: $isWasm)\n        is_update_admin @include(if: $isWasm)\n        is_move_publish @include(if: $isMove)\n        is_move_upgrade @include(if: $isMove)\n        is_move_execute @include(if: $isMove)\n        is_move_script @include(if: $isMove)\n      }\n      is_signer\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
-  source: "\n  query getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"
-): (typeof documents)["\n  query getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
+  source: "\n  query getTxs(\n    $offset: Int!\n    $pageSize: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_send\n      is_ibc\n      is_clear_admin @include(if: $isWasm)\n      is_execute @include(if: $isWasm)\n      is_instantiate @include(if: $isWasm)\n      is_migrate @include(if: $isWasm)\n      is_store_code @include(if: $isWasm)\n      is_update_admin @include(if: $isWasm)\n      is_move_publish @include(if: $isMove)\n      is_move_upgrade @include(if: $isMove)\n      is_move_execute @include(if: $isMove)\n      is_move_script @include(if: $isMove)\n    }\n  }\n"
+): (typeof documents)["\n  query getTxs(\n    $offset: Int!\n    $pageSize: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_send\n      is_ibc\n      is_clear_admin @include(if: $isWasm)\n      is_execute @include(if: $isWasm)\n      is_instantiate @include(if: $isWasm)\n      is_migrate @include(if: $isWasm)\n      is_store_code @include(if: $isWasm)\n      is_update_admin @include(if: $isWasm)\n      is_move_publish @include(if: $isMove)\n      is_move_upgrade @include(if: $isMove)\n      is_move_execute @include(if: $isMove)\n      is_move_script @include(if: $isMove)\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"
 ): (typeof documents)["\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
-  source: "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"
-): (typeof documents)["\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
+  source: "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_send\n      is_ibc\n      is_clear_admin @include(if: $isWasm)\n      is_execute @include(if: $isWasm)\n      is_instantiate @include(if: $isWasm)\n      is_migrate @include(if: $isWasm)\n      is_store_code @include(if: $isWasm)\n      is_update_admin @include(if: $isWasm)\n      is_move_publish @include(if: $isMove)\n      is_move_upgrade @include(if: $isMove)\n      is_move_execute @include(if: $isMove)\n      is_move_script @include(if: $isMove)\n    }\n  }\n"
+): (typeof documents)["\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n    $isWasm: Boolean!\n    $isMove: Boolean!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_send\n      is_ibc\n      is_clear_admin @include(if: $isWasm)\n      is_execute @include(if: $isWasm)\n      is_instantiate @include(if: $isWasm)\n      is_migrate @include(if: $isWasm)\n      is_store_code @include(if: $isWasm)\n      is_update_admin @include(if: $isWasm)\n      is_move_publish @include(if: $isMove)\n      is_move_upgrade @include(if: $isMove)\n      is_move_execute @include(if: $isMove)\n      is_move_script @include(if: $isMove)\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
-  source: "\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"
-): (typeof documents)["\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_clear_admin\n        is_execute\n        is_ibc\n        is_instantiate\n        is_migrate\n        is_send\n        is_store_code\n        is_update_admin\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"];
+  source: "\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_send\n        is_ibc\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"
+): (typeof documents)["\n  query getModuleTransactionsQuery(\n    $moduleId: Int!\n    $pageSize: Int!\n    $offset: Int!\n  ) {\n    module_transactions(\n      where: { module_id: { _eq: $moduleId } }\n      limit: $pageSize\n      offset: $offset\n      order_by: { block_height: desc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_send\n        is_ibc\n        is_move_execute\n        is_move_execute_event\n        is_move_publish\n        is_move_script\n        is_move_upgrade\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): (typeof documents)["\n  query getModuleTransactionsCountQuery($moduleId: Int!) {\n    module_transactions_aggregate(where: { module_id: { _eq: $moduleId } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(
   source: "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      moniker\n      operator_address\n      website\n    }\n  }\n"
 ): (typeof documents)["\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      moniker\n      operator_address\n      website\n    }\n  }\n"];
 
-export function graphql(source: string): unknown;
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 5ca596ad1..fa91b7875 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -15599,6 +15599,8 @@ export type GetTxsByAddressPaginationQueryVariables = Exact<{
   expression?: InputMaybe<Account_Transactions_Bool_Exp>;
   offset: Scalars["Int"];
   pageSize: Scalars["Int"];
+  isWasm: Scalars["Boolean"];
+  isMove: Scalars["Boolean"];
 }>;
 
 export type GetTxsByAddressPaginationQuery = {
@@ -15612,18 +15614,18 @@ export type GetTxsByAddressPaginationQuery = {
       hash: any;
       success: boolean;
       messages: any;
-      is_clear_admin: boolean;
-      is_execute: boolean;
-      is_ibc: boolean;
-      is_instantiate: boolean;
-      is_migrate: boolean;
       is_send: boolean;
-      is_store_code: boolean;
-      is_update_admin: boolean;
-      is_move_publish: boolean;
-      is_move_upgrade: boolean;
-      is_move_execute: boolean;
-      is_move_script: boolean;
+      is_ibc: boolean;
+      is_clear_admin?: boolean;
+      is_execute?: boolean;
+      is_instantiate?: boolean;
+      is_migrate?: boolean;
+      is_store_code?: boolean;
+      is_update_admin?: boolean;
+      is_move_publish?: boolean;
+      is_move_upgrade?: boolean;
+      is_move_execute?: boolean;
+      is_move_script?: boolean;
       account: { __typename?: "accounts"; address: string };
     };
   }>;
@@ -15684,6 +15686,8 @@ export type GetTxsCountByPoolIdQuery = {
 export type GetTxsQueryVariables = Exact<{
   offset: Scalars["Int"];
   pageSize: Scalars["Int"];
+  isWasm: Scalars["Boolean"];
+  isMove: Scalars["Boolean"];
 }>;
 
 export type GetTxsQuery = {
@@ -15693,14 +15697,18 @@ export type GetTxsQuery = {
     hash: any;
     success: boolean;
     messages: any;
-    is_clear_admin: boolean;
-    is_execute: boolean;
-    is_ibc: boolean;
-    is_instantiate: boolean;
-    is_migrate: boolean;
     is_send: boolean;
-    is_store_code: boolean;
-    is_update_admin: boolean;
+    is_ibc: boolean;
+    is_clear_admin?: boolean;
+    is_execute?: boolean;
+    is_instantiate?: boolean;
+    is_migrate?: boolean;
+    is_store_code?: boolean;
+    is_update_admin?: boolean;
+    is_move_publish?: boolean;
+    is_move_upgrade?: boolean;
+    is_move_execute?: boolean;
+    is_move_script?: boolean;
     block: { __typename?: "blocks"; height: number; timestamp: any };
     account: { __typename?: "accounts"; address: string };
   }>;
@@ -15717,6 +15725,8 @@ export type GetBlockTransactionsByHeightQueryQueryVariables = Exact<{
   limit: Scalars["Int"];
   offset: Scalars["Int"];
   height: Scalars["Int"];
+  isWasm: Scalars["Boolean"];
+  isMove: Scalars["Boolean"];
 }>;
 
 export type GetBlockTransactionsByHeightQueryQuery = {
@@ -15726,14 +15736,18 @@ export type GetBlockTransactionsByHeightQueryQuery = {
     hash: any;
     success: boolean;
     messages: any;
-    is_clear_admin: boolean;
-    is_execute: boolean;
-    is_ibc: boolean;
-    is_instantiate: boolean;
-    is_migrate: boolean;
     is_send: boolean;
-    is_store_code: boolean;
-    is_update_admin: boolean;
+    is_ibc: boolean;
+    is_clear_admin?: boolean;
+    is_execute?: boolean;
+    is_instantiate?: boolean;
+    is_migrate?: boolean;
+    is_store_code?: boolean;
+    is_update_admin?: boolean;
+    is_move_publish?: boolean;
+    is_move_upgrade?: boolean;
+    is_move_execute?: boolean;
+    is_move_script?: boolean;
     block: { __typename?: "blocks"; height: number; timestamp: any };
     account: { __typename?: "accounts"; address: string };
   }>;
@@ -15770,14 +15784,8 @@ export type GetModuleTransactionsQueryQuery = {
       hash: any;
       success: boolean;
       messages: any;
-      is_clear_admin: boolean;
-      is_execute: boolean;
-      is_ibc: boolean;
-      is_instantiate: boolean;
-      is_migrate: boolean;
       is_send: boolean;
-      is_store_code: boolean;
-      is_update_admin: boolean;
+      is_ibc: boolean;
       is_move_execute: boolean;
       is_move_execute_event: boolean;
       is_move_publish: boolean;
@@ -21336,6 +21344,34 @@ export const GetTxsByAddressPaginationDocument = {
             type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
           },
         },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "isWasm" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "Boolean" },
+            },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "isMove" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "Boolean" },
+            },
+          },
+        },
       ],
       selectionSet: {
         kind: "SelectionSet",
@@ -21433,51 +21469,211 @@ export const GetTxsByAddressPaginationDocument = {
                       },
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "is_clear_admin" },
+                        name: { kind: "Name", value: "is_send" },
                       },
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "is_execute" },
+                        name: { kind: "Name", value: "is_ibc" },
                       },
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "is_ibc" },
+                        name: { kind: "Name", value: "is_clear_admin" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isWasm" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "is_instantiate" },
+                        name: { kind: "Name", value: "is_execute" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isWasm" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "is_migrate" },
+                        name: { kind: "Name", value: "is_instantiate" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isWasm" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "is_send" },
+                        name: { kind: "Name", value: "is_migrate" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isWasm" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
                         name: { kind: "Name", value: "is_store_code" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isWasm" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
                         name: { kind: "Name", value: "is_update_admin" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isWasm" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
                         name: { kind: "Name", value: "is_move_publish" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isMove" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
                         name: { kind: "Name", value: "is_move_upgrade" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isMove" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
                         name: { kind: "Name", value: "is_move_execute" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isMove" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                       {
                         kind: "Field",
                         name: { kind: "Name", value: "is_move_script" },
+                        directives: [
+                          {
+                            kind: "Directive",
+                            name: { kind: "Name", value: "include" },
+                            arguments: [
+                              {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "if" },
+                                value: {
+                                  kind: "Variable",
+                                  name: { kind: "Name", value: "isMove" },
+                                },
+                              },
+                            ],
+                          },
+                        ],
                       },
                     ],
                   },
@@ -21803,6 +21999,34 @@ export const GetTxsDocument = {
             type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
           },
         },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "isWasm" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "Boolean" },
+            },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "isMove" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "Boolean" },
+            },
+          },
+        },
       ],
       selectionSet: {
         kind: "SelectionSet",
@@ -21878,25 +22102,207 @@ export const GetTxsDocument = {
                 { kind: "Field", name: { kind: "Name", value: "hash" } },
                 { kind: "Field", name: { kind: "Name", value: "success" } },
                 { kind: "Field", name: { kind: "Name", value: "messages" } },
+                { kind: "Field", name: { kind: "Name", value: "is_send" } },
+                { kind: "Field", name: { kind: "Name", value: "is_ibc" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_clear_admin" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_execute" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
                 },
-                { kind: "Field", name: { kind: "Name", value: "is_execute" } },
-                { kind: "Field", name: { kind: "Name", value: "is_ibc" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_instantiate" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_migrate" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
                 },
-                { kind: "Field", name: { kind: "Name", value: "is_migrate" } },
-                { kind: "Field", name: { kind: "Name", value: "is_send" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_store_code" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
                 },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_update_admin" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_move_publish" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isMove" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_move_upgrade" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isMove" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_move_execute" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isMove" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_move_script" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isMove" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
                 },
               ],
             },
@@ -21993,6 +22399,34 @@ export const GetBlockTransactionsByHeightQueryDocument = {
             type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
           },
         },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "isWasm" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "Boolean" },
+            },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "isMove" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "Boolean" },
+            },
+          },
+        },
       ],
       selectionSet: {
         kind: "SelectionSet",
@@ -22094,25 +22528,207 @@ export const GetBlockTransactionsByHeightQueryDocument = {
                 { kind: "Field", name: { kind: "Name", value: "hash" } },
                 { kind: "Field", name: { kind: "Name", value: "success" } },
                 { kind: "Field", name: { kind: "Name", value: "messages" } },
+                { kind: "Field", name: { kind: "Name", value: "is_send" } },
+                { kind: "Field", name: { kind: "Name", value: "is_ibc" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_clear_admin" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_execute" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
                 },
-                { kind: "Field", name: { kind: "Name", value: "is_execute" } },
-                { kind: "Field", name: { kind: "Name", value: "is_ibc" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_instantiate" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_migrate" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
                 },
-                { kind: "Field", name: { kind: "Name", value: "is_migrate" } },
-                { kind: "Field", name: { kind: "Name", value: "is_send" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_store_code" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
                 },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_update_admin" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isWasm" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_move_publish" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isMove" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_move_upgrade" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isMove" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_move_execute" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isMove" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_move_script" },
+                  directives: [
+                    {
+                      kind: "Directive",
+                      name: { kind: "Name", value: "include" },
+                      arguments: [
+                        {
+                          kind: "Argument",
+                          name: { kind: "Name", value: "if" },
+                          value: {
+                            kind: "Variable",
+                            name: { kind: "Name", value: "isMove" },
+                          },
+                        },
+                      ],
+                    },
+                  ],
                 },
               ],
             },
@@ -22357,37 +22973,13 @@ export const GetModuleTransactionsQueryDocument = {
                         kind: "Field",
                         name: { kind: "Name", value: "messages" },
                       },
-                      {
-                        kind: "Field",
-                        name: { kind: "Name", value: "is_clear_admin" },
-                      },
-                      {
-                        kind: "Field",
-                        name: { kind: "Name", value: "is_execute" },
-                      },
-                      {
-                        kind: "Field",
-                        name: { kind: "Name", value: "is_ibc" },
-                      },
-                      {
-                        kind: "Field",
-                        name: { kind: "Name", value: "is_instantiate" },
-                      },
-                      {
-                        kind: "Field",
-                        name: { kind: "Name", value: "is_migrate" },
-                      },
                       {
                         kind: "Field",
                         name: { kind: "Name", value: "is_send" },
                       },
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "is_store_code" },
-                      },
-                      {
-                        kind: "Field",
-                        name: { kind: "Name", value: "is_update_admin" },
+                        name: { kind: "Name", value: "is_ibc" },
                       },
                       {
                         kind: "Field",
diff --git a/src/lib/query/tx.ts b/src/lib/query/tx.ts
index 581dc1652..8c89ccdd0 100644
--- a/src/lib/query/tx.ts
+++ b/src/lib/query/tx.ts
@@ -5,6 +5,8 @@ export const getTxsByAddressPagination = graphql(`
     $expression: account_transactions_bool_exp
     $offset: Int!
     $pageSize: Int!
+    $isWasm: Boolean!
+    $isMove: Boolean!
   ) {
     account_transactions(
       where: $expression
@@ -23,18 +25,18 @@ export const getTxsByAddressPagination = graphql(`
         hash
         success
         messages
-        is_clear_admin
-        is_execute
-        is_ibc
-        is_instantiate
-        is_migrate
         is_send
-        is_store_code
-        is_update_admin
-        is_move_publish
-        is_move_upgrade
-        is_move_execute
-        is_move_script
+        is_ibc
+        is_clear_admin @include(if: $isWasm)
+        is_execute @include(if: $isWasm)
+        is_instantiate @include(if: $isWasm)
+        is_migrate @include(if: $isWasm)
+        is_store_code @include(if: $isWasm)
+        is_update_admin @include(if: $isWasm)
+        is_move_publish @include(if: $isMove)
+        is_move_upgrade @include(if: $isMove)
+        is_move_execute @include(if: $isMove)
+        is_move_script @include(if: $isMove)
       }
       is_signer
     }
@@ -91,7 +93,12 @@ export const getTxsCountByPoolId = graphql(`
 `);
 
 export const getTxs = graphql(`
-  query getTxs($offset: Int!, $pageSize: Int!) {
+  query getTxs(
+    $offset: Int!
+    $pageSize: Int!
+    $isWasm: Boolean!
+    $isMove: Boolean!
+  ) {
     transactions(
       order_by: { block_height: desc }
       offset: $offset
@@ -107,14 +114,18 @@ export const getTxs = graphql(`
       hash
       success
       messages
-      is_clear_admin
-      is_execute
-      is_ibc
-      is_instantiate
-      is_migrate
       is_send
-      is_store_code
-      is_update_admin
+      is_ibc
+      is_clear_admin @include(if: $isWasm)
+      is_execute @include(if: $isWasm)
+      is_instantiate @include(if: $isWasm)
+      is_migrate @include(if: $isWasm)
+      is_store_code @include(if: $isWasm)
+      is_update_admin @include(if: $isWasm)
+      is_move_publish @include(if: $isMove)
+      is_move_upgrade @include(if: $isMove)
+      is_move_execute @include(if: $isMove)
+      is_move_script @include(if: $isMove)
     }
   }
 `);
@@ -132,6 +143,8 @@ export const getBlockTransactionsByHeightQueryDocument = graphql(`
     $limit: Int!
     $offset: Int!
     $height: Int!
+    $isWasm: Boolean!
+    $isMove: Boolean!
   ) {
     transactions(
       limit: $limit
@@ -149,14 +162,18 @@ export const getBlockTransactionsByHeightQueryDocument = graphql(`
       hash
       success
       messages
-      is_clear_admin
-      is_execute
-      is_ibc
-      is_instantiate
-      is_migrate
       is_send
-      is_store_code
-      is_update_admin
+      is_ibc
+      is_clear_admin @include(if: $isWasm)
+      is_execute @include(if: $isWasm)
+      is_instantiate @include(if: $isWasm)
+      is_migrate @include(if: $isWasm)
+      is_store_code @include(if: $isWasm)
+      is_update_admin @include(if: $isWasm)
+      is_move_publish @include(if: $isMove)
+      is_move_upgrade @include(if: $isMove)
+      is_move_execute @include(if: $isMove)
+      is_move_script @include(if: $isMove)
     }
   }
 `);
@@ -194,14 +211,8 @@ export const getModuleTransactionsQueryDocument = graphql(`
         hash
         success
         messages
-        is_clear_admin
-        is_execute
-        is_ibc
-        is_instantiate
-        is_migrate
         is_send
-        is_store_code
-        is_update_admin
+        is_ibc
         is_move_execute
         is_move_execute_event
         is_move_publish
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 66307153c..8d753717d 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -9,6 +9,8 @@ import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
   useCelatoneApp,
+  useMoveConfig,
+  useWasmConfig,
 } from "lib/app-provider";
 import {
   getTxsByAddressPagination,
@@ -88,6 +90,8 @@ export const useTxsByAddressPagination = (
   pageSize: number
 ): UseQueryResult<Transaction[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const { enabled: wasmEnable } = useWasmConfig({ shouldRedirect: false });
+  const { enabled: moveEnable } = useMoveConfig({ shouldRedirect: false });
   const expression = useTxExpression({
     accountId,
     search,
@@ -102,6 +106,8 @@ export const useTxsByAddressPagination = (
         expression,
         offset,
         pageSize,
+        isWasm: wasmEnable,
+        isMove: moveEnable,
       })
       .then<Transaction[]>(({ account_transactions }) =>
         account_transactions.map<Transaction>((transaction) => ({
@@ -113,26 +119,26 @@ export const useTxsByAddressPagination = (
           created: parseDate(transaction.block.timestamp),
           success: transaction.transaction.success,
           actionMsgType: getActionMsgType([
+            transaction.transaction.is_send,
             transaction.transaction.is_execute,
             transaction.transaction.is_instantiate,
-            transaction.transaction.is_send,
             transaction.transaction.is_store_code,
             transaction.transaction.is_migrate,
             transaction.transaction.is_update_admin,
             transaction.transaction.is_clear_admin,
-            // TODO: handle more action msg type
+            // TODO: handle more action Move msg type
           ]),
           furtherAction: getMsgFurtherAction(
             transaction.transaction.messages.length,
             {
+              isSend: transaction.transaction.is_send,
+              isIbc: transaction.transaction.is_ibc,
               isExecute: transaction.transaction.is_execute,
               isInstantiate: transaction.transaction.is_instantiate,
-              isSend: transaction.transaction.is_send,
               isUpload: transaction.transaction.is_store_code,
               isMigrate: transaction.transaction.is_migrate,
               isUpdateAdmin: transaction.transaction.is_update_admin,
               isClearAdmin: transaction.transaction.is_clear_admin,
-              isIbc: transaction.transaction.is_ibc,
               isMovePublish: transaction.transaction.is_move_publish,
               isMoveUpgrade: transaction.transaction.is_move_upgrade,
               isMoveExecute: transaction.transaction.is_move_execute,
@@ -142,10 +148,18 @@ export const useTxsByAddressPagination = (
             transaction.is_signer
           ),
           isIbc: transaction.transaction.is_ibc,
-          isInstantiate: transaction.transaction.is_instantiate,
+          isInstantiate: transaction.transaction.is_instantiate ?? false,
         }))
       );
-  }, [accountId, expression, indexerGraphClient, offset, pageSize]);
+  }, [
+    accountId,
+    expression,
+    indexerGraphClient,
+    moveEnable,
+    offset,
+    pageSize,
+    wasmEnable,
+  ]);
   return useQuery(
     [
       CELATONE_QUERY_KEYS.TXS_BY_ADDRESS_PAGINATION,
@@ -304,6 +318,8 @@ export const useTxs = (
   pageSize: number
 ): UseQueryResult<Transaction[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const { enabled: wasmEnable } = useWasmConfig({ shouldRedirect: false });
+  const { enabled: moveEnable } = useMoveConfig({ shouldRedirect: false });
 
   const queryFn = useCallback(
     async () =>
@@ -311,6 +327,8 @@ export const useTxs = (
         .request(getTxs, {
           offset,
           pageSize,
+          isWasm: wasmEnable,
+          isMove: moveEnable,
         })
         .then<Transaction[]>(({ transactions }) =>
           transactions.map<Transaction>((transaction) => ({
@@ -322,20 +340,21 @@ export const useTxs = (
             created: parseDate(transaction.block.timestamp),
             success: transaction.success,
             actionMsgType: getActionMsgType([
+              transaction.is_send,
               transaction.is_execute,
               transaction.is_instantiate,
-              transaction.is_send,
               transaction.is_store_code,
               transaction.is_migrate,
               transaction.is_update_admin,
               transaction.is_clear_admin,
+              // TODO: implement Move msg type
             ]),
             furtherAction: MsgFurtherAction.NONE,
             isIbc: transaction.is_ibc,
-            isInstantiate: transaction.is_instantiate,
+            isInstantiate: transaction.is_instantiate ?? false,
           }))
         ),
-    [indexerGraphClient, offset, pageSize]
+    [indexerGraphClient, moveEnable, offset, pageSize, wasmEnable]
   );
 
   return useQuery(
@@ -363,6 +382,8 @@ export const useTxsByBlockHeightPagination = (
   offset: number
 ): UseQueryResult<Transaction[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const { enabled: wasmEnable } = useWasmConfig({ shouldRedirect: false });
+  const { enabled: moveEnable } = useMoveConfig({ shouldRedirect: false });
 
   const queryFn = useCallback(
     async () =>
@@ -371,6 +392,8 @@ export const useTxsByBlockHeightPagination = (
           limit,
           offset,
           height,
+          isWasm: wasmEnable,
+          isMove: moveEnable,
         })
         .then<Transaction[]>(({ transactions }) =>
           transactions.map<Transaction>((transaction) => ({
@@ -392,10 +415,10 @@ export const useTxsByBlockHeightPagination = (
             ]),
             furtherAction: MsgFurtherAction.NONE,
             isIbc: transaction.is_ibc,
-            isInstantiate: transaction.is_instantiate,
+            isInstantiate: transaction.is_instantiate ?? false,
           }))
         ),
-    [height, limit, offset, indexerGraphClient]
+    [height, limit, offset, indexerGraphClient, wasmEnable, moveEnable]
   );
 
   return useQuery(
@@ -469,29 +492,14 @@ export const useModuleTxsByPagination = ({
           height: transaction.block.height,
           created: parseDate(transaction.block.timestamp),
           success: transaction.transaction.success,
-          actionMsgType: getActionMsgType([]),
-          furtherAction: getMsgFurtherAction(
-            transaction.transaction.messages.length,
-            {
-              isExecute: transaction.transaction.is_execute,
-              isInstantiate: transaction.transaction.is_instantiate,
-              isSend: transaction.transaction.is_send,
-              isUpload: transaction.transaction.is_store_code,
-              isMigrate: transaction.transaction.is_migrate,
-              isUpdateAdmin: transaction.transaction.is_update_admin,
-              isClearAdmin: transaction.transaction.is_clear_admin,
-              isIbc: transaction.transaction.is_ibc,
-              isMoveExecute: transaction.transaction.is_move_execute,
-              isMovePublish: transaction.transaction.is_move_publish,
-              isMoveScript: transaction.transaction.is_move_script,
-              isMoveUpgrade: transaction.transaction.is_move_upgrade,
-            },
-            transaction.transaction.success,
-            false
-          ),
+          actionMsgType: getActionMsgType([
+            transaction.transaction.is_send,
+            // TODO: handle more action Move msg type
+          ]),
+          furtherAction: MsgFurtherAction.NONE,
           isSigner: false,
           isIbc: transaction.transaction.is_ibc,
-          isInstantiate: transaction.transaction.is_instantiate,
+          isInstantiate: false,
         }))
       );
   };
diff --git a/src/lib/utils/extractMsgType.ts b/src/lib/utils/extractMsgType.ts
index 08a24f6e4..ba3363909 100644
--- a/src/lib/utils/extractMsgType.ts
+++ b/src/lib/utils/extractMsgType.ts
@@ -1,4 +1,4 @@
-import { ActionMsgType } from "lib/types";
+import { ActionMsgType, type Option } from "lib/types";
 
 export const extractMsgType = (typePath: string): string =>
   typePath.split(".").at(-1) || "";
@@ -21,7 +21,7 @@ export const extractMsgType = (typePath: string): string =>
  * @returns Returns action type
  *
  */
-export const getActionMsgType = (msgTypesSupportList: boolean[]) => {
+export const getActionMsgType = (msgTypesSupportList: Option<boolean>[]) => {
   const existLength = msgTypesSupportList.filter((type) => type).length;
   if (existLength === 0) return ActionMsgType.OTHER_ACTION_MSG;
   if (existLength === 1) return ActionMsgType.SINGLE_ACTION_MSG;
diff --git a/src/lib/utils/msgFurtherAction.ts b/src/lib/utils/msgFurtherAction.ts
index 4cb063e66..c88ba416a 100644
--- a/src/lib/utils/msgFurtherAction.ts
+++ b/src/lib/utils/msgFurtherAction.ts
@@ -3,7 +3,7 @@ import { MsgFurtherAction } from "lib/types";
 
 export const getMsgFurtherAction = (
   length: number,
-  filters: TxFilters,
+  filters: Partial<TxFilters>,
   isSuccess: boolean,
   isSigner: boolean
 ) => {

From 9fe90b76643d10194e40c0f540af0c8611b04124 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 2 Nov 2023 16:45:14 +0700
Subject: [PATCH 300/368] fix: support new version of msgUpdateClient

---
 .../components/tx-message/msg-receipts/index.tsx      | 11 ++++++++++-
 src/lib/utils/tx/types.ts                             |  5 ++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index 44b7c1991..b1f079614 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -869,7 +869,16 @@ export const generateReceipts = (
           title: "Client ID",
           value: details.client_id,
         },
-        {
+        // newer version
+        details.client_message && {
+          title: "Client Message",
+          html: getCommonReceiptHtml({
+            type: "json",
+            value: details.client_message,
+          }),
+        },
+        // older version
+        details.header && {
           title: "Header",
           html: getCommonReceiptHtml({
             type: "json",
diff --git a/src/lib/utils/tx/types.ts b/src/lib/utils/tx/types.ts
index f418eb0af..8125ed7f1 100644
--- a/src/lib/utils/tx/types.ts
+++ b/src/lib/utils/tx/types.ts
@@ -235,7 +235,10 @@ export interface MsgCreateClientDetails extends MsgBaseDetails {
 }
 export interface MsgUpdateClientDetails extends MsgBaseDetails {
   client_id: string;
-  header: object;
+  // newer version
+  client_message?: object;
+  // older version
+  header?: object;
   signer: Addr;
 }
 export interface MsgUpgradeClientDetails extends MsgBaseDetails {

From 64c8c2e4b04e683e1c04eab6f6a6d5ceb5ff3abc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 2 Nov 2023 17:57:50 +0700
Subject: [PATCH 301/368] fix: single delegation zero state

---
 CHANGELOG.md                                  |  1 +
 .../delegations/total-card/SingleBondCard.tsx | 45 ----------------
 .../delegations/total-card/index.tsx          | 24 ++-------
 .../single-bond-card/SingleBondCardBody.tsx   | 52 +++++++++++++++++++
 .../SingleBondCardBodyMulti.tsx}              | 20 ++++---
 .../SingleBondCardBodySingle.tsx              | 43 +++++++++++++++
 .../total-card/single-bond-card/index.tsx     | 40 ++++++++++++++
 src/lib/pages/account-details/data.ts         |  7 +--
 src/lib/pages/account-details/types.ts        |  1 +
 9 files changed, 155 insertions(+), 78 deletions(-)
 delete mode 100644 src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx
 rename src/lib/pages/account-details/components/delegations/total-card/{SingleBondMultiAssetsCard.tsx => single-bond-card/SingleBondCardBodyMulti.tsx} (73%)
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e0c619fa..a36d651f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -83,6 +83,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#604](https://github.com/alleslabs/celatone-frontend/pull/604) Fix single delegation total card zero state
 - [#603](https://github.com/alleslabs/celatone-frontend/pull/603) Dynamically change returned data by isWasm, isMove
 - [#602](https://github.com/alleslabs/celatone-frontend/pull/602) Fix package version client error
 - [#599](https://github.com/alleslabs/celatone-frontend/pull/599) Fix getNavigationUrl to support move
diff --git a/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
deleted file mode 100644
index 79941bf9c..000000000
--- a/src/lib/pages/account-details/components/delegations/total-card/SingleBondCard.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
-
-import { TokenImageRender } from "lib/components/token";
-import type { Option, TokenWithValue } from "lib/types";
-import {
-  formatPrice,
-  formatUTokenWithPrecision,
-  getTokenLabel,
-} from "lib/utils";
-
-import { TotalCardTop } from "./TotalCardTop";
-
-interface SingleBondCardProps {
-  title: string;
-  message: string;
-  token: Option<TokenWithValue>;
-}
-
-export const SingleBondCard = ({
-  title,
-  message,
-  token,
-}: SingleBondCardProps) => (
-  <Flex direction="column" minW="233px" gap={1}>
-    <TotalCardTop title={title} message={message} fontWeight={600} />
-    {!token ? (
-      <Heading variant="h6" as="h6">
-        N/A
-      </Heading>
-    ) : (
-      <Flex alignItems="center" gap={1}>
-        <Heading variant="h6" as="h6">
-          {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
-        </Heading>
-        <Text variant="body1" textColor="text.main">
-          {getTokenLabel(token.denom, token.symbol)}
-        </Text>
-        <TokenImageRender logo={token.logo} boxSize={6} />
-      </Flex>
-    )}
-    <Text variant="body2" textColor="text.dark">
-      ({token?.value ? formatPrice(token.value) : "-"})
-    </Text>
-  </Flex>
-);
diff --git a/src/lib/pages/account-details/components/delegations/total-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
index 8b360dcb0..243b64ef1 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
@@ -5,8 +5,7 @@ import type { Addr, Option, TokenWithValue } from "lib/types";
 
 import { MultiBondsCard } from "./MultiBondsCard";
 import { OverviewCard } from "./OverviewCard";
-import { SingleBondCard } from "./SingleBondCard";
-import { SingleBondMultiAssetsCard } from "./SingleBondMultiAssetsCard";
+import { SingleBondCard } from "./single-bond-card";
 
 export interface TotalCardProps {
   title: string;
@@ -23,7 +22,7 @@ export const TotalCard = ({
   message,
   address,
   bondDenoms,
-  tokens = {},
+  tokens,
   isLoading,
   isViewMore,
 }: TotalCardProps) => {
@@ -37,29 +36,16 @@ export const TotalCard = ({
   if (isViewMore)
     return <OverviewCard title={title} message={message} tokens={tokens} />;
 
-  if (bondDenoms.length === 1) {
-    const denoms = Object.keys(tokens);
-    const bondDenom = bondDenoms[0].denom;
-    if (
-      denoms.length === 0 ||
-      (denoms.length === 1 && denoms.includes(bondDenom))
-    )
-      return (
-        <SingleBondCard
-          title={title}
-          message={message}
-          token={tokens[bondDenom]}
-        />
-      );
+  if (bondDenoms.length === 1)
     return (
-      <SingleBondMultiAssetsCard
+      <SingleBondCard
         title={title}
         message={message}
         address={address}
+        bondDenom={bondDenoms[0]}
         tokens={tokens}
       />
     );
-  }
 
   return (
     <MultiBondsCard
diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx
new file mode 100644
index 000000000..1166a5faf
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx
@@ -0,0 +1,52 @@
+import big from "big.js";
+
+import type { DenomInfo } from "lib/pages/account-details/types";
+import type { Addr, TokenWithValue } from "lib/types";
+
+import { SingleBondCardBodyMulti } from "./SingleBondCardBodyMulti";
+import { SingleBondCardBodySingle } from "./SingleBondCardBodySingle";
+
+interface SingleBondCardBodyProps {
+  title: string;
+  message: string;
+  address: Addr;
+  bondDenom: DenomInfo;
+  tokens: Record<string, TokenWithValue>;
+}
+
+export const SingleBondCardBody = ({
+  title,
+  message,
+  address,
+  bondDenom,
+  tokens,
+}: SingleBondCardBodyProps) => {
+  const denoms = Object.keys(tokens);
+  if (
+    denoms.length === 0 ||
+    (denoms.length === 1 && denoms.includes(bondDenom.denom))
+  ) {
+    const bondToken = tokens[bondDenom.denom];
+    return (
+      <SingleBondCardBodySingle
+        {...(bondToken ?? {
+          denom: bondDenom.denom,
+          amount: big(0),
+          symbol: bondDenom.symbol,
+          logo: bondDenom.logo,
+          precision: bondDenom.precision,
+          value: big(0),
+        })}
+      />
+    );
+  }
+
+  return (
+    <SingleBondCardBodyMulti
+      title={title}
+      message={message}
+      address={address}
+      tokens={tokens}
+    />
+  );
+};
diff --git a/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodyMulti.tsx
similarity index 73%
rename from src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx
rename to src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodyMulti.tsx
index 2b5ce4796..2815afde9 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/SingleBondMultiAssetsCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodyMulti.tsx
@@ -1,32 +1,30 @@
 import { Flex, Heading, Text, useDisclosure } from "@chakra-ui/react";
-import { Big } from "big.js";
+import big, { type Big } from "big.js";
 
+import { TotalCardModal } from "../TotalCardModal";
 import { CustomIcon } from "lib/components/icon";
 import type { Addr, TokenWithValue, USD } from "lib/types";
 import { formatPrice, totalValueTokenWithValue } from "lib/utils";
 
-import { TotalCardModal } from "./TotalCardModal";
-import { TotalCardTop } from "./TotalCardTop";
-
-interface SingleBondMultiAssetsCardProps {
+interface SingleBondCardBodyMultiProps {
   title: string;
   message: string;
   address: Addr;
   tokens: Record<string, TokenWithValue>;
 }
 
-export const SingleBondMultiAssetsCard = ({
+export const SingleBondCardBodyMulti = ({
   title,
   message,
   address,
   tokens,
-}: SingleBondMultiAssetsCardProps) => {
+}: SingleBondCardBodyMultiProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
+
   return (
-    <Flex direction="column" minW="233px" gap={1}>
-      <TotalCardTop title={title} message={message} fontWeight={600} />
+    <>
       <Heading variant="h6" as="h6">
-        {formatPrice(totalValueTokenWithValue(tokens, Big(0) as USD<Big>))}
+        {formatPrice(totalValueTokenWithValue(tokens, big(0) as USD<Big>))}
       </Heading>
       <Flex
         gap={1}
@@ -56,6 +54,6 @@ export const SingleBondMultiAssetsCard = ({
         isOpen={isOpen}
         onClose={onClose}
       />
-    </Flex>
+    </>
   );
 };
diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx
new file mode 100644
index 000000000..f69885f07
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx
@@ -0,0 +1,43 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { TokenImageRender } from "lib/components/token";
+import type { Option, Token, U, USD } from "lib/types";
+import {
+  formatPrice,
+  formatUTokenWithPrecision,
+  getTokenLabel,
+} from "lib/utils";
+
+interface SingleBondCardBodySingleProps {
+  denom: string;
+  amount: U<Token<Big>>;
+  symbol: Option<string>;
+  logo: Option<string | string[]>;
+  precision: Option<number>;
+  value: Option<USD<Big>>;
+}
+
+export const SingleBondCardBodySingle = ({
+  denom,
+  amount,
+  symbol,
+  logo,
+  precision,
+  value,
+}: SingleBondCardBodySingleProps) => (
+  <>
+    <Flex alignItems="center" gap={1}>
+      <Heading variant="h6" as="h6">
+        {formatUTokenWithPrecision(amount, precision ?? 0)}
+      </Heading>
+      <Text variant="body1" textColor="text.main">
+        {getTokenLabel(denom, symbol)}
+      </Text>
+      <TokenImageRender logo={logo} boxSize={6} />
+    </Flex>
+    <Text variant="body2" textColor="text.dark">
+      ({value ? formatPrice(value) : "-"})
+    </Text>
+  </>
+);
diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx
new file mode 100644
index 000000000..9302b8e20
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx
@@ -0,0 +1,40 @@
+import { Flex, Heading } from "@chakra-ui/react";
+
+import { TotalCardTop } from "../TotalCardTop";
+import type { DenomInfo } from "lib/pages/account-details/types";
+import type { Addr, Option, TokenWithValue } from "lib/types";
+
+import { SingleBondCardBody } from "./SingleBondCardBody";
+
+interface SingleBondCardProps {
+  title: string;
+  message: string;
+  address: Addr;
+  bondDenom: DenomInfo;
+  tokens: Option<Record<string, TokenWithValue>>;
+}
+
+export const SingleBondCard = ({
+  title,
+  message,
+  address,
+  bondDenom,
+  tokens,
+}: SingleBondCardProps) => (
+  <Flex direction="column" minW="233px" gap={1}>
+    <TotalCardTop title={title} message={message} fontWeight={600} />
+    {!tokens ? (
+      <Heading variant="h6" as="h6">
+        N/A
+      </Heading>
+    ) : (
+      <SingleBondCardBody
+        title={title}
+        message={message}
+        address={address}
+        bondDenom={bondDenom}
+        tokens={tokens}
+      />
+    )}
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index 08dbbe515..9bf70a2cd 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -296,9 +296,10 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
       ...rawStakingParams,
       bondDenoms: rawStakingParams.bondDenoms.map((denom) => ({
         denom,
-        symbol: assetInfos[denom]?.symbol,
-        logo: assetInfos[denom]?.logo,
-        precision: assetInfos[denom]?.precision,
+        symbol: assetInfos[denom]?.symbol ?? lpMap?.[denom].symbol,
+        logo: assetInfos[denom]?.logo ?? lpMap?.[denom].image,
+        precision: assetInfos[denom]?.precision ?? lpMap?.[denom].precision,
+        price: assetInfos[denom]?.price ?? lpMap?.[denom].lpPricePerShare,
       })),
     };
 
diff --git a/src/lib/pages/account-details/types.ts b/src/lib/pages/account-details/types.ts
index 53623466e..0cd7d971d 100644
--- a/src/lib/pages/account-details/types.ts
+++ b/src/lib/pages/account-details/types.ts
@@ -12,6 +12,7 @@ export interface DenomInfo {
   symbol?: string;
   logo?: string | string[];
   precision?: number;
+  price?: number;
 }
 
 export interface NonRedelegatable {

From c4149571cb205c3419afdf0d62d2c490d6c092c5 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 2 Nov 2023 18:16:50 +0700
Subject: [PATCH 302/368] fix: remove denom info

---
 .../delegations/DelegationsBody.tsx           |  3 +--
 .../delegations/radio-card/index.tsx          | 15 +++--------
 .../delegations/total-card/index.tsx          |  3 +--
 .../single-bond-card/SingleBondCardBody.tsx   | 20 +++------------
 .../SingleBondCardBodySingle.tsx              | 25 ++++++-------------
 .../total-card/single-bond-card/index.tsx     |  3 +--
 src/lib/pages/account-details/data.ts         | 14 ++++-------
 src/lib/pages/account-details/types.ts        |  8 ------
 8 files changed, 21 insertions(+), 70 deletions(-)

diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index cf1a17fa4..01c616e7f 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -2,7 +2,6 @@ import { Flex, RadioGroup, Stack } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import type { DenomInfo } from "../../types";
 import { DelegationsTable, UnbondingsTable } from "../tables";
 import { useTrack } from "lib/amplitude";
 import type { Delegation, Unbonding } from "lib/pages/account-details/data";
@@ -18,7 +17,7 @@ interface DelegationsBodyProps {
   rewards: Option<Record<string, TokenWithValue[]>>;
   isLoadingDelegations: boolean;
   isLoadingUnbondings: boolean;
-  bondDenoms: DenomInfo[];
+  bondDenoms: TokenWithValue[];
 }
 
 export const DelegationsBody = ({
diff --git a/src/lib/pages/account-details/components/delegations/radio-card/index.tsx b/src/lib/pages/account-details/components/delegations/radio-card/index.tsx
index 2ef492985..c63dbcbef 100644
--- a/src/lib/pages/account-details/components/delegations/radio-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/radio-card/index.tsx
@@ -1,9 +1,6 @@
 import { Radio } from "@chakra-ui/react";
-import type { Big } from "big.js";
-import big from "big.js";
 
-import type { DenomInfo } from "lib/pages/account-details/types";
-import type { Option, TokenWithValue, USD } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 
 import { MultiBondsRadioCard } from "./MultiBondsRadioCard";
 import { SingleBondRadioCard } from "./SingleBondRadioCard";
@@ -12,7 +9,7 @@ interface RadioCardProps {
   value: string;
   tokens: Option<Record<string, TokenWithValue>>;
   isLoading: boolean;
-  bondDenoms: DenomInfo[];
+  bondDenoms: TokenWithValue[];
 }
 
 export const RadioCard = ({
@@ -26,13 +23,7 @@ export const RadioCard = ({
       <SingleBondRadioCard
         value={value}
         token={
-          tokens
-            ? Object.values(tokens)[0] ?? {
-                ...bondDenoms[0],
-                amount: 0,
-                value: big(0) as USD<Big>,
-              }
-            : undefined
+          tokens ? tokens[bondDenoms[0].denom] ?? bondDenoms[0] : undefined
         }
         isLoading={isLoading}
       />
diff --git a/src/lib/pages/account-details/components/delegations/total-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
index 243b64ef1..ced0b9631 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
@@ -1,6 +1,5 @@
 import { Box, Spinner } from "@chakra-ui/react";
 
-import type { DenomInfo } from "lib/pages/account-details/types";
 import type { Addr, Option, TokenWithValue } from "lib/types";
 
 import { MultiBondsCard } from "./MultiBondsCard";
@@ -11,7 +10,7 @@ export interface TotalCardProps {
   title: string;
   message: string;
   address: Addr;
-  bondDenoms: DenomInfo[];
+  bondDenoms: TokenWithValue[];
   tokens: Option<Record<string, TokenWithValue>>;
   isLoading: boolean;
   isViewMore: boolean;
diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx
index 1166a5faf..dced70c8b 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBody.tsx
@@ -1,6 +1,3 @@
-import big from "big.js";
-
-import type { DenomInfo } from "lib/pages/account-details/types";
 import type { Addr, TokenWithValue } from "lib/types";
 
 import { SingleBondCardBodyMulti } from "./SingleBondCardBodyMulti";
@@ -10,7 +7,7 @@ interface SingleBondCardBodyProps {
   title: string;
   message: string;
   address: Addr;
-  bondDenom: DenomInfo;
+  bondDenom: TokenWithValue;
   tokens: Record<string, TokenWithValue>;
 }
 
@@ -25,21 +22,10 @@ export const SingleBondCardBody = ({
   if (
     denoms.length === 0 ||
     (denoms.length === 1 && denoms.includes(bondDenom.denom))
-  ) {
-    const bondToken = tokens[bondDenom.denom];
+  )
     return (
-      <SingleBondCardBodySingle
-        {...(bondToken ?? {
-          denom: bondDenom.denom,
-          amount: big(0),
-          symbol: bondDenom.symbol,
-          logo: bondDenom.logo,
-          precision: bondDenom.precision,
-          value: big(0),
-        })}
-      />
+      <SingleBondCardBodySingle token={tokens[bondDenom.denom] ?? bondDenom} />
     );
-  }
 
   return (
     <SingleBondCardBodyMulti
diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx
index f69885f07..46eee06f0 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/SingleBondCardBodySingle.tsx
@@ -1,8 +1,7 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { TokenImageRender } from "lib/components/token";
-import type { Option, Token, U, USD } from "lib/types";
+import type { TokenWithValue } from "lib/types";
 import {
   formatPrice,
   formatUTokenWithPrecision,
@@ -10,34 +9,24 @@ import {
 } from "lib/utils";
 
 interface SingleBondCardBodySingleProps {
-  denom: string;
-  amount: U<Token<Big>>;
-  symbol: Option<string>;
-  logo: Option<string | string[]>;
-  precision: Option<number>;
-  value: Option<USD<Big>>;
+  token: TokenWithValue;
 }
 
 export const SingleBondCardBodySingle = ({
-  denom,
-  amount,
-  symbol,
-  logo,
-  precision,
-  value,
+  token,
 }: SingleBondCardBodySingleProps) => (
   <>
     <Flex alignItems="center" gap={1}>
       <Heading variant="h6" as="h6">
-        {formatUTokenWithPrecision(amount, precision ?? 0)}
+        {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
       </Heading>
       <Text variant="body1" textColor="text.main">
-        {getTokenLabel(denom, symbol)}
+        {getTokenLabel(token.denom, token.symbol)}
       </Text>
-      <TokenImageRender logo={logo} boxSize={6} />
+      <TokenImageRender logo={token.logo} boxSize={6} />
     </Flex>
     <Text variant="body2" textColor="text.dark">
-      ({value ? formatPrice(value) : "-"})
+      ({token?.value ? formatPrice(token.value) : "-"})
     </Text>
   </>
 );
diff --git a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx
index 9302b8e20..087f9467d 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/single-bond-card/index.tsx
@@ -1,7 +1,6 @@
 import { Flex, Heading } from "@chakra-ui/react";
 
 import { TotalCardTop } from "../TotalCardTop";
-import type { DenomInfo } from "lib/pages/account-details/types";
 import type { Addr, Option, TokenWithValue } from "lib/types";
 
 import { SingleBondCardBody } from "./SingleBondCardBody";
@@ -10,7 +9,7 @@ interface SingleBondCardProps {
   title: string;
   message: string;
   address: Addr;
-  bondDenom: DenomInfo;
+  bondDenom: TokenWithValue;
   tokens: Option<Record<string, TokenWithValue>>;
 }
 
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index 9bf70a2cd..ec96f3e4b 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -41,7 +41,7 @@ import {
   compareTokenWithValues,
 } from "lib/utils";
 
-import type { DenomInfo, UserDelegationsData } from "./types";
+import type { UserDelegationsData } from "./types";
 
 interface AccountContracts {
   contracts: Option<ContractInfo[]>;
@@ -62,7 +62,7 @@ interface AccountAssetInfos {
 }
 
 export interface StakingParams extends Omit<RawStakingParams, "bondDenoms"> {
-  bondDenoms: DenomInfo[];
+  bondDenoms: TokenWithValue[];
 }
 
 export interface Delegation {
@@ -294,13 +294,9 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
   if (rawStakingParams && assetInfos && validators) {
     data.stakingParams = {
       ...rawStakingParams,
-      bondDenoms: rawStakingParams.bondDenoms.map((denom) => ({
-        denom,
-        symbol: assetInfos[denom]?.symbol ?? lpMap?.[denom].symbol,
-        logo: assetInfos[denom]?.logo ?? lpMap?.[denom].image,
-        precision: assetInfos[denom]?.precision ?? lpMap?.[denom].precision,
-        price: assetInfos[denom]?.price ?? lpMap?.[denom].lpPricePerShare,
-      })),
+      bondDenoms: rawStakingParams.bondDenoms.map((denom) =>
+        coinToTokenWithValue(denom, "0", assetInfos, lpMap)
+      ),
     };
 
     data.isValidator = Object.keys(validators).includes(
diff --git a/src/lib/pages/account-details/types.ts b/src/lib/pages/account-details/types.ts
index 0cd7d971d..b6256a87f 100644
--- a/src/lib/pages/account-details/types.ts
+++ b/src/lib/pages/account-details/types.ts
@@ -7,14 +7,6 @@ import type {
   Unbonding,
 } from "./data";
 
-export interface DenomInfo {
-  denom: string;
-  symbol?: string;
-  logo?: string | string[];
-  precision?: number;
-  price?: number;
-}
-
 export interface NonRedelegatable {
   dstValidator: ValidatorInfo;
   completionTime: Date;

From d61e8aaec61b7dabf652268c94ffa356f49b41b6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 2 Nov 2023 18:39:55 +0700
Subject: [PATCH 303/368] fix: refactor tokenwithvalue

---
 src/lib/types/asset.ts | 43 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts
index b5b38bad9..e69a68f05 100644
--- a/src/lib/types/asset.ts
+++ b/src/lib/types/asset.ts
@@ -2,25 +2,24 @@ import type Big from "big.js";
 
 import type { LPDetails, Option, Token, U, USD } from "lib/types";
 
-export type TokenWithValue =
-  | {
-      isLPToken: false;
-      denom: string;
-      amount: U<Token<Big>>;
-      symbol: Option<string>;
-      logo: Option<string>;
-      precision: Option<number>;
-      price: Option<USD<Big>>;
-      value: Option<USD<Big>>;
-    }
-  | {
-      isLPToken: true;
-      denom: string;
-      amount: U<Token<Big>>;
-      symbol: Option<string>;
-      logo: Option<string[]>;
-      precision: Option<number>;
-      price: Option<USD<Big>>;
-      value: Option<USD<Big>>;
-      lpDetails: LPDetails;
-    };
+interface BaseTokenWithValue {
+  denom: string;
+  amount: U<Token<Big>>;
+  symbol: Option<string>;
+  precision: Option<number>;
+  price: Option<USD<Big>>;
+  value: Option<USD<Big>>;
+}
+
+export type TokenWithValue = BaseTokenWithValue &
+  (
+    | {
+        isLPToken: false;
+        logo: Option<string>;
+      }
+    | {
+        isLPToken: true;
+        logo: Option<string[]>;
+        lpDetails: LPDetails;
+      }
+  );

From 9c4241a3e3ad5458cb88f253c9472c391931c213 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 3 Nov 2023 15:27:22 +0700
Subject: [PATCH 304/368] feat: single amp

---
 CHANGELOG.md                                  |   1 +
 package.json                                  |   4 +-
 src/lib/amplitude/Amplitude.ts                | 100 +++++++
 src/lib/amplitude/index.ts                    |   2 +-
 src/lib/amplitude/track-event/index.ts        |  57 +---
 src/lib/amplitude/track-event/trackAction.ts  |  33 ++
 .../amplitude/track-event/trackComponent.ts   |   5 +
 .../amplitude/track-event/trackExternal.ts    |  26 ++
 .../amplitude/track-event/trackInteraction.ts | 176 +++++++++++
 src/lib/amplitude/track-event/trackToPage.ts  |  36 +++
 src/lib/amplitude/track-event/trackTx.ts      |   8 +
 .../track-event/useMandatoryProperties.ts     |  35 ---
 .../amplitude/track-event/useTrackAction.ts   |  54 ----
 .../track-event/useTrackComponent.ts          |  20 --
 .../amplitude/track-event/useTrackExternal.ts |  61 ----
 .../track-event/useTrackInteraction.ts        | 282 ------------------
 .../amplitude/track-event/useTrackToPage.ts   |  68 -----
 src/lib/amplitude/track-event/useTrackTx.ts   |  27 --
 src/lib/amplitude/types.ts                    |   5 +-
 src/lib/amplitude/useAmplitudeInit.ts         |  59 ----
 src/lib/app-fns/tx/clearAdmin.tsx             |   4 +-
 src/lib/app-fns/tx/common/catchTxError.tsx    |   3 +-
 src/lib/app-fns/tx/execute.tsx                |   5 +-
 src/lib/app-fns/tx/instantiate.tsx            |   4 +-
 src/lib/app-fns/tx/migrate.tsx                |   4 +-
 src/lib/app-fns/tx/move/executeModule.tsx     |   4 +-
 src/lib/app-fns/tx/publish.tsx                |   5 +-
 src/lib/app-fns/tx/resend.tsx                 |   5 +-
 src/lib/app-fns/tx/script.tsx                 |   5 +-
 src/lib/app-fns/tx/submitProposal.tsx         |   7 +-
 src/lib/app-fns/tx/updateAdmin.tsx            |   5 +-
 src/lib/app-fns/tx/upload.tsx                 |   4 +-
 src/lib/app-provider/contexts/nav.tsx         |  29 +-
 src/lib/app-provider/hooks/index.ts           |   1 -
 .../app-provider/hooks/usePreviousPathname.ts |  16 -
 src/lib/app-provider/tx/catchTxError.ts       |  17 --
 src/lib/app-provider/tx/clearAdmin.ts         |   9 +-
 src/lib/app-provider/tx/execute.ts            |   9 +-
 src/lib/app-provider/tx/instantiate.ts        |   9 +-
 src/lib/app-provider/tx/migrate.ts            |   9 +-
 src/lib/app-provider/tx/move/executeModule.ts |   8 +-
 src/lib/app-provider/tx/publish.tsx           |   9 +-
 src/lib/app-provider/tx/resend.ts             |   9 +-
 src/lib/app-provider/tx/script.tsx            |   9 +-
 src/lib/app-provider/tx/submitProposal.ts     |  20 +-
 src/lib/app-provider/tx/updateAdmin.ts        |   9 +-
 src/lib/app-provider/tx/upload.ts             |   9 +-
 src/lib/components/ConnectWalletAlert.tsx     |   3 +-
 src/lib/components/CopyLink.tsx               |   3 +-
 src/lib/components/ExplorerLink.tsx           |   3 +-
 src/lib/components/InputWithIcon.tsx          |  65 ++--
 src/lib/components/StickySidebar.tsx          |   3 +-
 .../components/ViewPermissionAddresses.tsx    |   3 +-
 src/lib/components/Wallet.tsx                 |   3 +-
 src/lib/components/button/BackButton.tsx      |   3 +-
 src/lib/components/button/ConnectWallet.tsx   |   3 +-
 .../components/button/NewProposalButton.tsx   |   3 +-
 src/lib/components/button/ResendButton.tsx    |   5 +-
 src/lib/components/copy/Copier.tsx            |  46 ++-
 src/lib/components/copy/CopyButton.tsx        |  66 ++--
 .../json-schema/AttachSchemaCard.tsx          |   8 +-
 .../json-schema/EditSchemaButtons.tsx         |   6 +-
 .../json-schema/MessageInputSwitch.tsx        |   5 +-
 .../components/json-schema/UploadTemplate.tsx |   4 +-
 .../section/SchemaInputSection.tsx            |   5 +-
 .../upload/UploadSchemaSection.tsx            |  89 +++---
 .../json-schema/view/ViewSchemaModal.tsx      |  25 +-
 src/lib/components/json/JsonReadOnly.tsx      |   3 +-
 src/lib/components/links/GitHubLink.tsx       |   3 +-
 src/lib/components/modal/ActionModal.tsx      |   3 +-
 src/lib/components/modal/MoveCodeSnippet.tsx  |   3 +-
 .../components/modal/RemoveSchemaModal.tsx    |   3 +-
 .../modal/UnsupportedTokensModal.tsx          |   3 +-
 src/lib/components/modal/WasmCodeSnippet.tsx  |   3 +-
 .../modal/code/CodeDetailsTemplate.tsx        |   4 +-
 src/lib/components/modal/code/RemoveCode.tsx  |   5 +-
 src/lib/components/modal/code/SaveNewCode.tsx |   3 +-
 .../modal/contract/AddToOtherList.tsx         |   3 +-
 .../components/modal/contract/ClearAdmin.tsx  |   5 +-
 .../contract/ContractDetailsTemplate.tsx      |   3 +-
 .../modal/contract/RemoveContract.tsx         |   3 +-
 .../modal/contract/SaveNewContract.tsx        |   3 +-
 .../components/modal/list/CreateNewList.tsx   |   4 +-
 .../components/modal/list/EditListName.tsx    |   3 +-
 src/lib/components/modal/list/RemoveList.tsx  |   3 +-
 src/lib/components/pagination/Next.tsx        |   3 +-
 src/lib/components/pagination/PageDetail.tsx  |  80 +++--
 src/lib/components/pagination/Previous.tsx    |   3 +-
 .../select-code/CodeSelectDrawerButton.tsx    |   3 +-
 .../select-code/CodeSelectSection.tsx         |   3 +-
 .../select-contract/SelectContractAdmin.tsx   |   3 +-
 .../SelectContractInstantiator.tsx            |   3 +-
 src/lib/components/state/InvalidState.tsx     |   5 +-
 src/lib/components/table/ViewMore.tsx         |  41 ++-
 .../components/table/codes/CodeNameCell.tsx   |   3 +-
 .../table/contracts/ContractNameCell.tsx      |   4 +-
 .../components/table/contracts/EditTags.tsx   |   3 +-
 .../table/proposals/ProposalsTableRow.tsx     |   3 +-
 .../upload/InstantiatePermissionRadio.tsx     |   3 +-
 src/lib/components/upload/UploadSection.tsx   |   4 +-
 src/lib/layout/Footer.tsx                     | 172 +++++------
 src/lib/layout/Header.tsx                     |   3 +-
 src/lib/layout/Searchbar.tsx                  |   5 +-
 src/lib/layout/SubHeader.tsx                  |  13 +-
 src/lib/layout/mobile/NavDrawer.tsx           |   3 +-
 src/lib/layout/navbar/Collapse.tsx            |   3 +-
 src/lib/layout/navbar/Expand.tsx              | 120 +++-----
 src/lib/layout/navbar/index.tsx               |   3 +-
 .../components/asset/index.tsx                |   3 +-
 .../components/delegations/DelegationInfo.tsx |   3 +-
 .../delegations/DelegationsBody.tsx           |   3 +-
 .../components/delegations/index.tsx          |   3 +-
 src/lib/pages/account-details/index.tsx       |  11 +-
 src/lib/pages/admin/index.tsx                 |   7 +-
 src/lib/pages/block-details/index.tsx         |   5 +-
 src/lib/pages/blocks/index.tsx                |   5 +-
 .../components/code-info/CodeInfoSection.tsx  |   7 +-
 src/lib/pages/code-details/index.tsx          |   3 +-
 src/lib/pages/codes/index.tsx                 |   5 +-
 src/lib/pages/contract-details/index.tsx      |   5 +-
 src/lib/pages/contract-list/index.tsx         |   5 +-
 src/lib/pages/contract-list/slug.tsx          |   5 +-
 src/lib/pages/contracts/index.tsx             |   5 +-
 src/lib/pages/deploy/index.tsx                |   5 +-
 .../pages/execute/components/ExecuteArea.tsx  |   8 +-
 .../pages/execute/components/JsonExecute.tsx  |   4 +-
 .../execute/components/MsgSuggestion.tsx      |  80 +++--
 .../components/schema-execute/ExecuteBox.tsx  |   4 +-
 .../components/schema-execute/index.tsx       |   7 +-
 src/lib/pages/execute/index.tsx               |   5 +-
 src/lib/pages/faucet/index.tsx                |   5 +-
 src/lib/pages/home/index.tsx                  |   5 +-
 .../component/InstantiateOffchainForm.tsx     |   3 +-
 src/lib/pages/instantiate/instantiate.tsx     |  11 +-
 .../migrate/components/MigrateContract.tsx    |   4 +-
 src/lib/pages/migrate/index.tsx               |   5 +-
 src/lib/pages/module-details/index.tsx        |   5 +-
 src/lib/pages/not-found/index.tsx             |   6 +-
 src/lib/pages/past-txs/index.tsx              |   5 +-
 .../pools/components/FilterByPoolType.tsx     |  33 +-
 .../pool-details/JsonModalButton.tsx          |   3 +-
 .../components/pool-details/PoolAssets.tsx    |   3 +-
 .../pool-details/PoolRelatedTxs.tsx           |  39 ++-
 .../components/pool-details/header/index.tsx  |   3 +-
 .../tables/pool-txs/PoolTxsMsg.tsx            |   3 +-
 .../components/supportedSection/PoolCard.tsx  |   3 +-
 .../components/supportedSection/index.tsx     |   3 +-
 .../UnsupportedPoolCard.tsx                   |   3 +-
 .../components/unsupportedSection/index.tsx   |   5 +-
 src/lib/pages/pools/index.tsx                 |  21 +-
 src/lib/pages/pools/poolId.tsx                |   5 +-
 src/lib/pages/proposal/constants.tsx          |  11 +-
 src/lib/pages/proposal/store-code/index.tsx   |  13 +-
 src/lib/pages/proposal/whitelist/index.tsx    |  17 +-
 .../components/ProposalStatusFilter.tsx       |   3 +-
 .../components/ProposalTypeFilter.tsx         |   3 +-
 src/lib/pages/proposals/index.tsx             |   5 +-
 .../public-project/components/AllProject.tsx  |   3 +-
 .../components/BookmarkButton.tsx             |   7 +-
 .../public-project/components/SocialMedia.tsx |   4 +-
 src/lib/pages/public-project/index.tsx        |   5 +-
 src/lib/pages/public-project/slug.tsx         |   5 +-
 src/lib/pages/query/components/JsonQuery.tsx  |   5 +-
 src/lib/pages/query/components/QueryArea.tsx  |   6 +-
 .../pages/query/components/SchemaQuery.tsx    |   3 +-
 .../query/components/SchemaQueryComponent.tsx |   3 +-
 src/lib/pages/query/index.tsx                 |   5 +-
 src/lib/pages/saved-codes/index.tsx           |   5 +-
 src/lib/pages/stored-codes/index.tsx          |   5 +-
 .../pages/tx-details/components/TxHeader.tsx  |   4 +-
 .../components/tx-message/EventBox.tsx        |   3 +-
 .../components/tx-message/TxMsgExpand.tsx     |   6 +-
 .../tx-message/msg-receipts/CoinComponent.tsx |   3 +-
 src/lib/pages/tx-details/index.tsx            |   5 +-
 src/lib/pages/txs/index.tsx                   |   5 +-
 src/lib/pages/upload/upload.tsx               |   5 +-
 src/lib/providers/amplitude.tsx               |  66 +++-
 src/lib/utils/address.ts                      |   9 +-
 yarn.lock                                     |  99 +++---
 179 files changed, 1175 insertions(+), 1682 deletions(-)
 create mode 100644 src/lib/amplitude/Amplitude.ts
 create mode 100644 src/lib/amplitude/track-event/trackAction.ts
 create mode 100644 src/lib/amplitude/track-event/trackComponent.ts
 create mode 100644 src/lib/amplitude/track-event/trackExternal.ts
 create mode 100644 src/lib/amplitude/track-event/trackInteraction.ts
 create mode 100644 src/lib/amplitude/track-event/trackToPage.ts
 create mode 100644 src/lib/amplitude/track-event/trackTx.ts
 delete mode 100644 src/lib/amplitude/track-event/useMandatoryProperties.ts
 delete mode 100644 src/lib/amplitude/track-event/useTrackAction.ts
 delete mode 100644 src/lib/amplitude/track-event/useTrackComponent.ts
 delete mode 100644 src/lib/amplitude/track-event/useTrackExternal.ts
 delete mode 100644 src/lib/amplitude/track-event/useTrackInteraction.ts
 delete mode 100644 src/lib/amplitude/track-event/useTrackToPage.ts
 delete mode 100644 src/lib/amplitude/track-event/useTrackTx.ts
 delete mode 100644 src/lib/amplitude/useAmplitudeInit.ts
 delete mode 100644 src/lib/app-provider/hooks/usePreviousPathname.ts
 delete mode 100644 src/lib/app-provider/tx/catchTxError.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a36d651f3..7bb50e275 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#605](https://github.com/alleslabs/celatone-frontend/pull/605) Apply singleton class style to Amplitude structure
 - [#591](https://github.com/alleslabs/celatone-frontend/pull/591) Bump initia.js due to decimal serialization and dynamic buffer
 - [#564](https://github.com/alleslabs/celatone-frontend/pull/564) Handle multi bond denoms data in the delegation section
 - [#593](https://github.com/alleslabs/celatone-frontend/pull/593) Refactor submit button to a common component
diff --git a/package.json b/package.json
index 38f61bd0f..50d614007 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
     "chakra-react-select": "^4.7.0"
   },
   "dependencies": {
-    "@amplitude/analytics-browser": "^1.8.0",
-    "@amplitude/marketing-analytics-browser": "^1.0.7",
+    "@amplitude/analytics-browser": "^2.3.3",
+    "@amplitude/analytics-types": "^2.3.0",
     "@chain-registry/types": "0.17.0",
     "@chakra-ui/anatomy": "^2.1.0",
     "@chakra-ui/card": "^2.1.1",
diff --git a/src/lib/amplitude/Amplitude.ts b/src/lib/amplitude/Amplitude.ts
new file mode 100644
index 000000000..24e79a117
--- /dev/null
+++ b/src/lib/amplitude/Amplitude.ts
@@ -0,0 +1,100 @@
+import { Identify, createInstance } from "@amplitude/analytics-browser";
+import type { BrowserClient } from "@amplitude/analytics-types";
+
+import type { Nullable } from "lib/types";
+
+import type { AmpEvent } from "./types";
+
+interface MandatoryProperties {
+  page: Nullable<string>;
+  prevPathname: Nullable<string>;
+  rawAddressHash: Nullable<string>;
+  chain: Nullable<string>;
+  mobile: Nullable<boolean>;
+  navSidebar: Nullable<boolean>;
+  devSidebar: Nullable<boolean>;
+  projectSidebar: Nullable<boolean>;
+}
+
+class Amplitude {
+  private static amplitude: Amplitude;
+
+  private client?: BrowserClient;
+
+  private mandatoryProperties: MandatoryProperties;
+
+  private constructor() {
+    if (typeof window !== "undefined") {
+      this.client = createInstance();
+      this.client.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? "", {
+        defaultTracking: {
+          attribution: true,
+          pageViews: false,
+        },
+        trackingOptions: {
+          ipAddress: false,
+          language: false,
+          platform: false,
+        },
+        // serverUrl: "/amplitude",
+      });
+    }
+
+    this.mandatoryProperties = {
+      page: null,
+      prevPathname: null,
+      rawAddressHash: null,
+      chain: null,
+      mobile: null,
+      navSidebar: null,
+      devSidebar: null,
+      projectSidebar: null,
+    };
+  }
+
+  public static getInstance() {
+    if (!Amplitude.amplitude) Amplitude.amplitude = new Amplitude();
+    return Amplitude.amplitude;
+  }
+
+  public setUserIdentity(
+    wallets: string[],
+    networks: string[],
+    navSidebar: boolean,
+    devSidebar: boolean,
+    projectSidebar: boolean
+  ) {
+    // Custom user properties
+    const identifyEvent = new Identify();
+    identifyEvent.set("Wallets", wallets);
+    identifyEvent.set("Wallets Count", wallets.length);
+    identifyEvent.set("Networks", networks);
+    identifyEvent.set("Networks Count", networks.length);
+    identifyEvent.set("Nav Sidebar", navSidebar);
+    identifyEvent.set("Dev Sidebar", devSidebar);
+    identifyEvent.set("Project Sidebar", projectSidebar);
+
+    this.client?.identify(identifyEvent);
+  }
+
+  public setMandatoryProperties(
+    properties: Omit<MandatoryProperties, "prevPathname">
+  ) {
+    const { page, ...rest } = properties;
+    const prevPathname = this.mandatoryProperties.page;
+    this.mandatoryProperties = {
+      page,
+      prevPathname,
+      ...rest,
+    };
+  }
+
+  public track(event: AmpEvent, properties?: Record<string, unknown>) {
+    this.client?.track(event, {
+      ...this.mandatoryProperties,
+      ...properties,
+    });
+  }
+}
+
+export const amp = Amplitude.getInstance();
diff --git a/src/lib/amplitude/index.ts b/src/lib/amplitude/index.ts
index 815ea2ff3..4a64f76cd 100644
--- a/src/lib/amplitude/index.ts
+++ b/src/lib/amplitude/index.ts
@@ -1,3 +1,3 @@
 export * from "./track-event";
-export * from "./useAmplitudeInit";
 export * from "./types";
+export { amp } from "./Amplitude";
diff --git a/src/lib/amplitude/track-event/index.ts b/src/lib/amplitude/track-event/index.ts
index fbbcc3792..5281d9158 100644
--- a/src/lib/amplitude/track-event/index.ts
+++ b/src/lib/amplitude/track-event/index.ts
@@ -1,47 +1,14 @@
-import { track as amplitudeTrack } from "@amplitude/analytics-browser";
-import { useCallback } from "react";
-
+import { amp } from "../Amplitude";
 import type { AmpEvent, ActionAmpEvent, SpecialAmpEvent } from "../types";
 
-import { useMandatoryProperties } from "./useMandatoryProperties";
-import { useTrackAction } from "./useTrackAction";
-import { useTrackComponent } from "./useTrackComponent";
-import { useTrackExternal } from "./useTrackExternal";
-import { useTrackInteraction } from "./useTrackInteraction";
-import { useTrackToPage } from "./useTrackToPage";
-import { useTrackTx } from "./useTrackTx";
-
-export const useTrack = () => {
-  const mandatoryProperties = useMandatoryProperties();
-
-  const trackAction = useTrackAction();
-  const trackComponent = useTrackComponent();
-  const trackExternal = useTrackExternal();
-  const trackInteraction = useTrackInteraction();
-  const trackToPage = useTrackToPage();
-  const trackTx = useTrackTx();
-
-  const track = useCallback(
-    (
-      event: Exclude<AmpEvent, ActionAmpEvent | SpecialAmpEvent>,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      properties?: Record<string, any>
-    ) => {
-      amplitudeTrack(event, {
-        ...mandatoryProperties,
-        ...properties,
-      });
-    },
-    [mandatoryProperties]
-  );
-
-  return {
-    track,
-    ...trackAction,
-    ...trackComponent,
-    ...trackExternal,
-    ...trackInteraction,
-    ...trackToPage,
-    ...trackTx,
-  };
-};
+export const track = (
+  event: Exclude<AmpEvent, ActionAmpEvent | SpecialAmpEvent>,
+  properties?: Record<string, unknown>
+) => amp.track(event, properties);
+
+export * from "./trackAction";
+export * from "./trackComponent";
+export * from "./trackExternal";
+export * from "./trackInteraction";
+export * from "./trackToPage";
+export * from "./trackTx";
diff --git a/src/lib/amplitude/track-event/trackAction.ts b/src/lib/amplitude/track-event/trackAction.ts
new file mode 100644
index 000000000..be35f7c2e
--- /dev/null
+++ b/src/lib/amplitude/track-event/trackAction.ts
@@ -0,0 +1,33 @@
+import { amp } from "../Amplitude";
+import type { ActionAmpEvent } from "../types";
+import type { AttachFundsType } from "lib/components/fund/types";
+
+export const trackActionWithFunds = (
+  event: ActionAmpEvent,
+  funds: number,
+  attachFundsOption: AttachFundsType,
+  method: "json-input" | "schema"
+) =>
+  amp.track(event, {
+    funds,
+    attachFundsOption,
+    method,
+  });
+
+export const trackAction = (
+  event: ActionAmpEvent,
+  method: "json-input" | "schema"
+) =>
+  amp.track(event, {
+    method,
+  });
+
+export const trackActionQuery = (
+  event: ActionAmpEvent,
+  method: "json-input" | "schema",
+  isInputRequired: boolean
+) =>
+  amp.track(event, {
+    method,
+    isInputRequired,
+  });
diff --git a/src/lib/amplitude/track-event/trackComponent.ts b/src/lib/amplitude/track-event/trackComponent.ts
new file mode 100644
index 000000000..fd825534b
--- /dev/null
+++ b/src/lib/amplitude/track-event/trackComponent.ts
@@ -0,0 +1,5 @@
+import { amp } from "../Amplitude";
+import { AmpEvent } from "../types";
+
+export const trackInvalidState = (title: string) =>
+  amp.track(AmpEvent.INVALID_STATE, { title });
diff --git a/src/lib/amplitude/track-event/trackExternal.ts b/src/lib/amplitude/track-event/trackExternal.ts
new file mode 100644
index 000000000..6f15c9dc3
--- /dev/null
+++ b/src/lib/amplitude/track-event/trackExternal.ts
@@ -0,0 +1,26 @@
+import { amp } from "../Amplitude";
+import { AmpEvent } from "../types";
+import type { Dict } from "lib/types";
+
+export const trackMintScan = (
+  type: string,
+  properties?: Dict<string, unknown>,
+  section?: string
+) =>
+  amp.track(AmpEvent.MINTSCAN, {
+    type,
+    properties,
+    section,
+  });
+
+export const trackWebsite = (url: string, section?: string) =>
+  amp.track(AmpEvent.WEBSITE, {
+    url,
+    section,
+  });
+
+export const trackSocial = (url: string, section?: string) =>
+  amp.track(AmpEvent.SOCIAL, {
+    url,
+    section,
+  });
diff --git a/src/lib/amplitude/track-event/trackInteraction.ts b/src/lib/amplitude/track-event/trackInteraction.ts
new file mode 100644
index 000000000..b6351678b
--- /dev/null
+++ b/src/lib/amplitude/track-event/trackInteraction.ts
@@ -0,0 +1,176 @@
+import big from "big.js";
+
+import { amp } from "../Amplitude";
+import { AmpEvent } from "../types";
+import type { Option, Token } from "lib/types";
+
+export const trackUseMainSearch = (isClick: boolean, section?: string) =>
+  amp.track(AmpEvent.USE_MAIN_SEARCH, {
+    isClick,
+    section,
+  });
+
+export const trackUseTab = (tab: string, section?: string) =>
+  amp.track(AmpEvent.USE_TAB, {
+    tab,
+    section,
+  });
+
+export const trackUseRadio = (radio: string, section?: string) =>
+  amp.track(AmpEvent.USE_RADIO, {
+    radio,
+    section,
+  });
+
+export const trackUseOtherModal = (title: string, section?: string) =>
+  amp.track(AmpEvent.USE_OTHER_MODAL, {
+    title,
+    section,
+  });
+
+export const trackUseViewJSON = (section?: string) =>
+  amp.track(AmpEvent.USE_VIEW_JSON, {
+    section,
+  });
+
+export const trackUseUnsupportedToken = (section?: string) =>
+  amp.track(AmpEvent.USE_UNSUPPORTED_ASSETS, {
+    section,
+  });
+
+export const trackUseCopier = (type: string, section?: string) =>
+  amp.track(AmpEvent.USE_COPIER, {
+    type,
+    section,
+  });
+
+export const trackUseExpand = ({
+  action,
+  component,
+  info,
+  section,
+}: {
+  action: "expand" | "collapse";
+  component:
+    | "assets"
+    | "json"
+    | "permission_address"
+    | "event_box"
+    | "unsupported_pool"
+    | "pool_tx_msg";
+  info?: object;
+  section?: string;
+}) =>
+  amp.track(AmpEvent.USE_EXPAND, {
+    action,
+    component,
+    info,
+    section,
+  });
+
+export const trackUseExpandAll = (
+  action: "expand" | "collapse",
+  section?: string
+) =>
+  amp.track(AmpEvent.USE_EXPAND, {
+    action,
+    section,
+  });
+
+export const trackUseClickWallet = (component?: string) =>
+  amp.track(AmpEvent.USE_CLICK_WALLET, {
+    component,
+  });
+
+export const trackUseRightHelperPanel = (action: string, section?: string) =>
+  amp.track(AmpEvent.USE_RIGHT_HELPER_PANEL, {
+    action,
+    section,
+  });
+
+export const trackUseUnpin = (check: boolean, section?: string) =>
+  amp.track(AmpEvent.USE_UNPIN, {
+    check,
+    section,
+  });
+
+export const trackUseInstantiatePermission = (
+  type: string,
+  emptyAddressesLength: number,
+  addressesLength: number,
+  section?: string
+) =>
+  amp.track(AmpEvent.USE_INSTANTIATE_PERMISSION, {
+    type,
+    emptyAddressesLength,
+    addressesLength,
+    section,
+  });
+
+export const trackUseWhitelistedAddress = (
+  emptyAddressesLength: number,
+  filledAddressesLength: number,
+  section?: string
+) =>
+  amp.track(AmpEvent.USE_WHITELISTED_ADDRESSES, {
+    emptyAddressesLength,
+    filledAddressesLength,
+    section,
+  });
+
+export const trackUseDepositFill = (amount: Token, section?: string) =>
+  amp.track(AmpEvent.USE_DEPOSIT_FILL, {
+    amount,
+    section,
+  });
+
+export const trackUseSubmitProposal = (
+  properties: {
+    initialDeposit: string;
+    minDeposit: Option<string>;
+    assetDenom: Option<string>;
+    [key: string]: unknown;
+  },
+  section?: string
+) => {
+  const proposalPeriod = big(properties.initialDeposit).lt(
+    properties.minDeposit || "0"
+  )
+    ? "Deposit"
+    : "Voting";
+
+  amp.track(AmpEvent.USE_SUBMIT_PROPOSAL, {
+    ...properties,
+    proposalPeriod,
+    section,
+  });
+};
+
+export const trackUseFilter = (
+  event:
+    | AmpEvent.USE_FILTER_POOL_TYPE
+    | AmpEvent.USE_FILTER_PROPOSALS_TYPE
+    | AmpEvent.USE_FILTER_PROPOSALS_STATUS,
+  filters: string[],
+  action: string
+) => amp.track(event, { action, filters });
+
+export const trackUsePaginationNavigate = (
+  navigate: string,
+  pageSize: number,
+  currentPage: number
+) =>
+  amp.track(AmpEvent.USE_PAGINATION_NAVIGATION, {
+    navigate,
+    pageSize,
+    currentPage,
+  });
+
+export const trackUseSort = (order: "ascending" | "descending") =>
+  amp.track(AmpEvent.USE_SORT, { order });
+
+export const trackUseView = (view: string) =>
+  amp.track(AmpEvent.USE_VIEW, { view });
+
+export const trackUseToggle = (name: string, isActive: boolean) =>
+  amp.track(AmpEvent.USE_TOGGLE, { name, isActive });
diff --git a/src/lib/amplitude/track-event/trackToPage.ts b/src/lib/amplitude/track-event/trackToPage.ts
new file mode 100644
index 000000000..ee95b7598
--- /dev/null
+++ b/src/lib/amplitude/track-event/trackToPage.ts
@@ -0,0 +1,36 @@
+import { amp } from "../Amplitude";
+import { AmpEvent } from "../types";
+
+export const trackToQuery = (contract: boolean, msg: boolean) =>
+  amp.track(AmpEvent.TO_QUERY, {
+    contract,
+    msg,
+  });
+
+export const trackToExecute = (contract: boolean, msg: boolean) =>
+  amp.track(AmpEvent.TO_EXECUTE, {
+    contract,
+    msg,
+  });
+
+export const trackToInstantiate = (
+  msg: boolean,
+  codeId: boolean,
+  section?: string
+) =>
+  amp.track(AmpEvent.TO_INSTANTIATE, {
+    codeId,
+    msg,
+    section,
+  });
+
+export const trackToMigrate = (contract: boolean, codeId: boolean) =>
+  amp.track(AmpEvent.TO_MIGRATE, {
+    codeId,
+    contract,
+  });
+
+export const trackToAdminUpdate = (contract: boolean) =>
+  amp.track(AmpEvent.TO_ADMIN_UPDATE, {
+    contract,
+  });
diff --git a/src/lib/amplitude/track-event/trackTx.ts b/src/lib/amplitude/track-event/trackTx.ts
new file mode 100644
index 000000000..4576af72f
--- /dev/null
+++ b/src/lib/amplitude/track-event/trackTx.ts
@@ -0,0 +1,8 @@
+import { amp } from "../Amplitude";
+import { AmpEvent } from "../types";
+
+export const trackTxSucceed = () => amp.track(AmpEvent.TX_SUCCEED);
+
+export const trackTxFailed = () => amp.track(AmpEvent.TX_FAILED);
+
+export const trackTxRejected = () => amp.track(AmpEvent.TX_REJECTED);
diff --git a/src/lib/amplitude/track-event/useMandatoryProperties.ts b/src/lib/amplitude/track-event/useMandatoryProperties.ts
deleted file mode 100644
index 8a8e2e907..000000000
--- a/src/lib/amplitude/track-event/useMandatoryProperties.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { fromBech32 } from "@cosmjs/encoding";
-import { useRouter } from "next/router";
-import { useMemo } from "react";
-
-import { useCelatoneApp, useNavContext } from "lib/app-provider/contexts";
-import { useCurrentChain, useMobile } from "lib/app-provider/hooks";
-import { StorageKeys } from "lib/data";
-import { sha256Hex, getItem } from "lib/utils";
-
-export const useMandatoryProperties = () => {
-  const { currentChainId } = useCelatoneApp();
-  const { prevPathname } = useNavContext();
-  const { address } = useCurrentChain();
-  const isMobile = useMobile();
-  const router = useRouter();
-
-  // TODO: make utility function
-  const rawAddressHash = address
-    ? sha256Hex(fromBech32(address).data)
-    : "Not Connected";
-
-  return useMemo(
-    () => ({
-      page: router.pathname.replace("/[network]", ""),
-      prevPathname,
-      rawAddressHash,
-      chain: currentChainId,
-      mobile: isMobile,
-      navSidebar: getItem(StorageKeys.NavSidebar, ""),
-      devSidebar: getItem(StorageKeys.DevSidebar, ""),
-      projectSidebar: getItem(StorageKeys.ProjectSidebar, ""),
-    }),
-    [currentChainId, isMobile, prevPathname, router.pathname, rawAddressHash]
-  );
-};
diff --git a/src/lib/amplitude/track-event/useTrackAction.ts b/src/lib/amplitude/track-event/useTrackAction.ts
deleted file mode 100644
index e32916bc8..000000000
--- a/src/lib/amplitude/track-event/useTrackAction.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { track } from "@amplitude/analytics-browser";
-import { useCallback } from "react";
-
-import type { ActionAmpEvent } from "../types";
-import type { AttachFundsType } from "lib/components/fund/types";
-
-import { useMandatoryProperties } from "./useMandatoryProperties";
-
-export const useTrackAction = () => {
-  const mandatoryProperties = useMandatoryProperties();
-
-  const trackActionWithFunds = useCallback(
-    (
-      event: ActionAmpEvent,
-      funds: number,
-      attachFundsOption: AttachFundsType,
-      method: "json-input" | "schema"
-    ) =>
-      track(event, {
-        ...mandatoryProperties,
-        funds,
-        attachFundsOption,
-        method,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackAction = useCallback(
-    (event: ActionAmpEvent, method: "json-input" | "schema") =>
-      track(event, {
-        ...mandatoryProperties,
-        method,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackActionQuery = useCallback(
-    (
-      event: ActionAmpEvent,
-      method: "json-input" | "schema",
-      isInputRequired: boolean
-    ) =>
-      track(event, {
-        ...mandatoryProperties,
-        method,
-        isInputRequired,
-      }),
-    [mandatoryProperties]
-  );
-
-  // TODO: implement custom action here
-
-  return { trackAction, trackActionWithFunds, trackActionQuery };
-};
diff --git a/src/lib/amplitude/track-event/useTrackComponent.ts b/src/lib/amplitude/track-event/useTrackComponent.ts
deleted file mode 100644
index eb29f6295..000000000
--- a/src/lib/amplitude/track-event/useTrackComponent.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { track } from "@amplitude/analytics-browser";
-import { useCallback } from "react";
-
-import { AmpEvent } from "../types";
-
-import { useMandatoryProperties } from "./useMandatoryProperties";
-
-export const useTrackComponent = () => {
-  const mandatoryProperties = useMandatoryProperties();
-
-  const trackInvalidState = useCallback(
-    (title: string) =>
-      track(AmpEvent.INVALID_STATE, { ...mandatoryProperties, title }),
-    [mandatoryProperties]
-  );
-
-  return {
-    trackInvalidState,
-  };
-};
diff --git a/src/lib/amplitude/track-event/useTrackExternal.ts b/src/lib/amplitude/track-event/useTrackExternal.ts
deleted file mode 100644
index 446011bd8..000000000
--- a/src/lib/amplitude/track-event/useTrackExternal.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { track } from "@amplitude/analytics-browser";
-import { useCallback } from "react";
-
-import { AmpEvent } from "../types";
-import type { Dict } from "lib/types";
-
-import { useMandatoryProperties } from "./useMandatoryProperties";
-
-export const useTrackExternal = () => {
-  const mandatoryProperties = useMandatoryProperties();
-
-  const trackMintScan = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (type: string, properties?: Dict<string, any>, section?: string) => {
-      track(AmpEvent.MINTSCAN, {
-        ...mandatoryProperties,
-        type,
-        properties,
-        section,
-      });
-    },
-    [mandatoryProperties]
-  );
-
-  const trackWebsite = useCallback(
-    (url: string, section?: string) =>
-      track(AmpEvent.WEBSITE, {
-        ...mandatoryProperties,
-        url,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackSocial = useCallback(
-    (url: string, section?: string) =>
-      track(AmpEvent.SOCIAL, {
-        ...mandatoryProperties,
-        url,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackCelatone = useCallback(
-    (url: string, section?: string) =>
-      track(AmpEvent.CELATONE, {
-        ...mandatoryProperties,
-        url,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  return {
-    trackMintScan,
-    trackWebsite,
-    trackSocial,
-    trackCelatone,
-  };
-};
diff --git a/src/lib/amplitude/track-event/useTrackInteraction.ts b/src/lib/amplitude/track-event/useTrackInteraction.ts
deleted file mode 100644
index a5f87ed10..000000000
--- a/src/lib/amplitude/track-event/useTrackInteraction.ts
+++ /dev/null
@@ -1,282 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { track } from "@amplitude/analytics-browser";
-import big from "big.js";
-import { useCallback } from "react";
-
-import { AmpEvent } from "../types";
-import type { Token, Option } from "lib/types";
-
-import { useMandatoryProperties } from "./useMandatoryProperties";
-
-// TODO: implement custom event properties including section
-export const useTrackInteraction = () => {
-  const mandatoryProperties = useMandatoryProperties();
-
-  const trackUseMainSearch = useCallback(
-    (isClick: boolean, section?: string) =>
-      track(AmpEvent.USE_MAIN_SEARCH, {
-        ...mandatoryProperties,
-        isClick,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseTab = useCallback(
-    (tab: string, section?: string) =>
-      track(AmpEvent.USE_TAB, {
-        ...mandatoryProperties,
-        tab,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseRadio = useCallback(
-    (radio: string, section?: string) =>
-      track(AmpEvent.USE_RADIO, {
-        ...mandatoryProperties,
-        radio,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseOtherModal = useCallback(
-    (title: string, section?: string) =>
-      track(AmpEvent.USE_OTHER_MODAL, {
-        ...mandatoryProperties,
-        title,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseViewJSON = useCallback(
-    (section?: string) =>
-      track(AmpEvent.USE_VIEW_JSON, {
-        ...mandatoryProperties,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseUnsupportedToken = useCallback(
-    (section?: string) =>
-      track(AmpEvent.USE_UNSUPPORTED_ASSETS, {
-        ...mandatoryProperties,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseCopier = useCallback(
-    (type: string, section?: string) =>
-      track(AmpEvent.USE_COPIER, {
-        ...mandatoryProperties,
-        type,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseExpand = useCallback(
-    ({
-      action,
-      component,
-      info,
-      section,
-    }: {
-      action: "expand" | "collapse";
-      component:
-        | "assets"
-        | "json"
-        | "permission_address"
-        | "event_box"
-        | "unsupported_pool"
-        | "pool_tx_msg";
-      info?: object;
-      section?: string;
-    }) =>
-      track(AmpEvent.USE_EXPAND, {
-        ...mandatoryProperties,
-        action,
-        component,
-        info,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseExpandAll = useCallback(
-    (action: "expand" | "collapse", section?: string) =>
-      track(AmpEvent.USE_EXPAND, {
-        ...mandatoryProperties,
-        action,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseClickWallet = useCallback(
-    (component?: string) =>
-      track(AmpEvent.USE_CLICK_WALLET, {
-        ...mandatoryProperties,
-        component,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseRightHelperPanel = useCallback(
-    (action: string, section?: string) =>
-      track(AmpEvent.USE_RIGHT_HELPER_PANEL, {
-        ...mandatoryProperties,
-        action,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseUnpin = useCallback(
-    (check: boolean, section?: string) =>
-      track(AmpEvent.USE_UNPIN, {
-        ...mandatoryProperties,
-        check,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseInstantiatePermission = useCallback(
-    (
-      type: string,
-      emptyAddressesLength: number,
-      addressesLength: number,
-      section?: string
-    ) =>
-      track(AmpEvent.USE_INSTANTIATE_PERMISSION, {
-        ...mandatoryProperties,
-        type,
-        emptyAddressesLength,
-        addressesLength,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseWhitelistedAddress = useCallback(
-    (
-      emptyAddressesLength: number,
-      filledAddressesLength: number,
-      section?: string
-    ) =>
-      track(AmpEvent.USE_WHITELISTED_ADDRESSES, {
-        ...mandatoryProperties,
-        emptyAddressesLength,
-        filledAddressesLength,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseDepositFill = useCallback(
-    (amount: Token, section?: string) => {
-      track(AmpEvent.USE_DEPOSIT_FILL, {
-        ...mandatoryProperties,
-        amount,
-        section,
-      });
-    },
-    [mandatoryProperties]
-  );
-
-  const trackUseSubmitProposal = useCallback(
-    (
-      properties: {
-        initialDeposit: string;
-        minDeposit: Option<string>;
-        assetDenom: Option<string>;
-        [key: string]: any;
-      },
-      section?: string
-    ) => {
-      const proposalPeriod = big(properties.initialDeposit).lt(
-        properties.minDeposit || "0"
-      )
-        ? "Deposit"
-        : "Voting";
-      track(AmpEvent.USE_SUBMIT_PROPOSAL, {
-        ...mandatoryProperties,
-        ...properties,
-        proposalPeriod,
-        section,
-      });
-    },
-    [mandatoryProperties]
-  );
-
-  const trackUseFilter = useCallback(
-    (
-      event:
-        | AmpEvent.USE_FILTER_POOL_TYPE
-        | AmpEvent.USE_FILTER_PROPOSALS_TYPE
-        | AmpEvent.USE_FILTER_PROPOSALS_STATUS,
-      filters: string[],
-      action: string
-    ) => track(event, { ...mandatoryProperties, action, filters }),
-    [mandatoryProperties]
-  );
-
-  const trackUsePaginationNavigate = useCallback(
-    (navigate: string, pageSize: number, currentPage: number) =>
-      track(AmpEvent.USE_PAGINATION_NAVIGATION, {
-        ...mandatoryProperties,
-        navigate,
-        pageSize,
-        currentPage,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackUseSort = useCallback(
-    (order: "ascending" | "descending") =>
-      track(AmpEvent.USE_SORT, { ...mandatoryProperties, order }),
-    [mandatoryProperties]
-  );
-
-  const trackUseView = useCallback(
-    (view: string) =>
-      track(AmpEvent.USE_VIEW, { ...mandatoryProperties, view }),
-    [mandatoryProperties]
-  );
-
-  const trackUseToggle = useCallback(
-    (name: string, isActive: boolean) =>
-      track(AmpEvent.USE_TOGGLE, { ...mandatoryProperties, name, isActive }),
-    [mandatoryProperties]
-  );
-
-  return {
-    trackUseMainSearch,
-    trackUseTab,
-    trackUseRadio,
-    trackUseOtherModal,
-    trackUseViewJSON,
-    trackUseUnsupportedToken,
-    trackUseCopier,
-    trackUseExpand,
-    trackUseExpandAll,
-    trackUseClickWallet,
-    trackUseRightHelperPanel,
-    trackUseUnpin,
-    trackUseInstantiatePermission,
-    trackUseWhitelistedAddress,
-    trackUseDepositFill,
-    trackUseSubmitProposal,
-    trackUseFilter,
-    trackUsePaginationNavigate,
-    trackUseSort,
-    trackUseView,
-    trackUseToggle,
-  };
-};
diff --git a/src/lib/amplitude/track-event/useTrackToPage.ts b/src/lib/amplitude/track-event/useTrackToPage.ts
deleted file mode 100644
index 7c480108a..000000000
--- a/src/lib/amplitude/track-event/useTrackToPage.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { track } from "@amplitude/analytics-browser";
-import { useCallback } from "react";
-
-import { AmpEvent } from "../types";
-
-import { useMandatoryProperties } from "./useMandatoryProperties";
-
-export const useTrackToPage = () => {
-  const mandatoryProperties = useMandatoryProperties();
-
-  const trackToQuery = useCallback(
-    (contract: boolean, msg: boolean) =>
-      track(AmpEvent.TO_QUERY, {
-        ...mandatoryProperties,
-        contract,
-        msg,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackToExecute = useCallback(
-    (contract: boolean, msg: boolean) =>
-      track(AmpEvent.TO_EXECUTE, {
-        ...mandatoryProperties,
-        contract,
-        msg,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackToInstantiate = useCallback(
-    (msg: boolean, codeId: boolean, section?: string) =>
-      track(AmpEvent.TO_INSTANTIATE, {
-        ...mandatoryProperties,
-        codeId,
-        msg,
-        section,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackToMigrate = useCallback(
-    (contract: boolean, codeId: boolean) =>
-      track(AmpEvent.TO_MIGRATE, {
-        ...mandatoryProperties,
-        codeId,
-        contract,
-      }),
-    [mandatoryProperties]
-  );
-
-  const trackToAdminUpdate = useCallback(
-    (contract: boolean) =>
-      track(AmpEvent.TO_ADMIN_UPDATE, {
-        ...mandatoryProperties,
-        contract,
-      }),
-    [mandatoryProperties]
-  );
-
-  return {
-    trackToQuery,
-    trackToExecute,
-    trackToInstantiate,
-    trackToMigrate,
-    trackToAdminUpdate,
-  };
-};
diff --git a/src/lib/amplitude/track-event/useTrackTx.ts b/src/lib/amplitude/track-event/useTrackTx.ts
deleted file mode 100644
index 3e7c5fd27..000000000
--- a/src/lib/amplitude/track-event/useTrackTx.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { track } from "@amplitude/analytics-browser";
-import { useCallback } from "react";
-
-import { AmpEvent } from "../types";
-
-import { useMandatoryProperties } from "./useMandatoryProperties";
-
-export const useTrackTx = () => {
-  const mandatoryProperties = useMandatoryProperties();
-
-  const trackTxSucceed = useCallback(
-    () => track(AmpEvent.TX_SUCCEED, { ...mandatoryProperties }),
-    [mandatoryProperties]
-  );
-
-  const trackTxFailed = useCallback(
-    () => track(AmpEvent.TX_FAILED, { ...mandatoryProperties }),
-    [mandatoryProperties]
-  );
-
-  const trackTxRejected = useCallback(
-    () => track(AmpEvent.TX_REJECTED, { ...mandatoryProperties }),
-    [mandatoryProperties]
-  );
-
-  return { trackTxSucceed, trackTxFailed, trackTxRejected };
-};
diff --git a/src/lib/amplitude/types.ts b/src/lib/amplitude/types.ts
index 7037c8c04..5e880ad29 100644
--- a/src/lib/amplitude/types.ts
+++ b/src/lib/amplitude/types.ts
@@ -55,7 +55,7 @@ export enum AmpEvent {
   TO_PROPOSAL_TO_STORE_CODE = "To Proposal To Store Code",
   TO_PROPOSAL_TO_WHITELIST = "To Proposal To Whitelist",
   // ACTIONS
-  ACTION_UPLOAD = "Act Upload",
+  ACTION_UPLOAD = "Action Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
   ACTION_EXECUTE = "Action Execute",
   ACTION_QUERY = "Action Query",
@@ -82,7 +82,6 @@ export enum AmpEvent {
   USE_VIEW_ATTACHED_JSON = "Use View Attached Json",
   USE_EDIT_ATTACHED_JSON = "Use Edit Attached Json",
   USE_REMOVE_ATTACHED_JSON = "Use Remove Attached Json",
-  USE_VIEW_JSON_IN_CODE_DETAIL = "Use View Json In Code Detail",
   USE_SWITCH_JSON_INPUT = "Use Switch Json Input",
   USE_CONTRACT_FORM = "Use Contract Form",
   USE_CONTRACT_MODAL = "Use Contract Modal",
@@ -133,7 +132,6 @@ export enum AmpEvent {
   MINTSCAN = "Mintscan",
   WEBSITE = "Website",
   SOCIAL = "Social",
-  CELATONE = "Celatone",
   FEEDBACK = "Feedback",
   ALLESLABS = "AllesLabs",
 }
@@ -159,7 +157,6 @@ export type SpecialAmpEvent =
   | AmpEvent.MINTSCAN
   | AmpEvent.WEBSITE
   | AmpEvent.SOCIAL
-  | AmpEvent.CELATONE
   | AmpEvent.USE_VIEW_JSON
   | AmpEvent.USE_UNSUPPORTED_ASSETS
   | AmpEvent.USE_COPIER
diff --git a/src/lib/amplitude/useAmplitudeInit.ts b/src/lib/amplitude/useAmplitudeInit.ts
deleted file mode 100644
index 8d9ad0f5a..000000000
--- a/src/lib/amplitude/useAmplitudeInit.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Identify, identify, init } from "@amplitude/analytics-browser";
-import { fromBech32 } from "@cosmjs/encoding";
-
-import { useCelatoneApp } from "lib/app-provider/contexts";
-import { useCurrentChain } from "lib/app-provider/hooks";
-import { StorageKeys } from "lib/data";
-import { useLocalStorage } from "lib/hooks/useLocalStorage";
-import { getItem, sha256Hex } from "lib/utils";
-
-export const useAmplitudeInit = () => {
-  const { currentChainId } = useCelatoneApp();
-  const { address } = useCurrentChain();
-  const [wallets, setWallets] = useLocalStorage<string[]>(
-    StorageKeys.Wallets,
-    []
-  );
-  const [networks, setNetworks] = useLocalStorage<string[]>(
-    StorageKeys.Networks,
-    []
-  );
-
-  if (typeof window !== "undefined") {
-    init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? "", undefined, {
-      trackingOptions: {
-        attribution: true,
-        region: false,
-        ipAddress: false,
-      },
-      serverUrl: "/amplitude",
-    });
-
-    // TODO: make util function
-    if (address) {
-      const rawAddressHash = sha256Hex(fromBech32(address).data);
-
-      if (!wallets.includes(rawAddressHash)) {
-        setWallets([...wallets, rawAddressHash]);
-      }
-    }
-
-    if (!networks.includes(currentChainId)) {
-      setNetworks([...networks, currentChainId]);
-    }
-
-    // Custom user properties
-    const identifyEvent = new Identify();
-    identifyEvent.set("Wallets", wallets);
-    identifyEvent.set("Wallets Count", wallets.length);
-    identifyEvent.set("Nav Sidebar", getItem(StorageKeys.NavSidebar, ""));
-    identifyEvent.set("Dev Sidebar", getItem(StorageKeys.DevSidebar, ""));
-    identifyEvent.set(
-      "Project Sidebar",
-      getItem(StorageKeys.ProjectSidebar, "")
-    );
-    identifyEvent.set("Networks", networks);
-    identifyEvent.set("Networks Count", networks.length);
-    identify(identifyEvent);
-  }
-};
diff --git a/src/lib/app-fns/tx/clearAdmin.tsx b/src/lib/app-fns/tx/clearAdmin.tsx
index 4d24fea05..c5c8cb641 100644
--- a/src/lib/app-fns/tx/clearAdmin.tsx
+++ b/src/lib/app-fns/tx/clearAdmin.tsx
@@ -6,13 +6,13 @@ import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TxStreamPhase } from "lib/types";
 import type { TxResultRendering, ContractAddr, HumanAddr } from "lib/types";
 import { formatUFee } from "lib/utils";
 
+import { catchTxError } from "./common";
 import { postTx } from "./common/post";
 import { sendingTx } from "./common/sending";
 
@@ -23,7 +23,6 @@ interface ClearAdminTxParams {
   memo?: string;
   client: SigningCosmWasmClient;
   onTxSucceed?: () => void;
-  catchTxError: CatchTxError;
 }
 
 export const clearAdminTx = ({
@@ -33,7 +32,6 @@ export const clearAdminTx = ({
   memo,
   client,
   onTxSucceed,
-  catchTxError,
 }: ClearAdminTxParams): Observable<TxResultRendering> => {
   return pipe(
     sendingTx(fee),
diff --git a/src/lib/app-fns/tx/common/catchTxError.tsx b/src/lib/app-fns/tx/common/catchTxError.tsx
index fc1dd2684..7f30f616a 100644
--- a/src/lib/app-fns/tx/common/catchTxError.tsx
+++ b/src/lib/app-fns/tx/common/catchTxError.tsx
@@ -1,6 +1,7 @@
 import type { OperatorFunction } from "rxjs";
 import { catchError } from "rxjs";
 
+import { trackTxFailed, trackTxRejected } from "lib/amplitude";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import type {
@@ -38,8 +39,6 @@ const getActionVariant = (isRejected: boolean): ActionVariant =>
   isRejected ? "rejected" : "failed";
 
 export const catchTxError = (
-  trackTxFailed: () => void,
-  trackTxRejected: () => void,
   onTxFailed?: () => void
 ): OperatorFunction<TxResultRendering, TxResultRendering> => {
   return catchError((error: Error) => {
diff --git a/src/lib/app-fns/tx/execute.tsx b/src/lib/app-fns/tx/execute.tsx
index dd6c1f0f1..4ff161e90 100644
--- a/src/lib/app-fns/tx/execute.tsx
+++ b/src/lib/app-fns/tx/execute.tsx
@@ -6,7 +6,6 @@ import type { Coin, StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import type { Activity } from "lib/stores/contract";
@@ -14,7 +13,7 @@ import type { ContractAddr, HumanAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { encode, formatUFee, getCurrentDate } from "lib/utils";
 
-import { postTx, sendingTx } from "./common";
+import { catchTxError, postTx, sendingTx } from "./common";
 
 interface ExecuteTxParams {
   address: HumanAddr;
@@ -23,7 +22,6 @@ interface ExecuteTxParams {
   msg: object;
   funds: Coin[];
   client: SigningCosmWasmClient;
-  catchTxError: CatchTxError;
   onTxSucceed?: (activity: Activity) => void;
   onTxFailed?: () => void;
 }
@@ -35,7 +33,6 @@ export const executeContractTx = ({
   msg,
   funds,
   client,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: ExecuteTxParams): Observable<TxResultRendering> => {
diff --git a/src/lib/app-fns/tx/instantiate.tsx b/src/lib/app-fns/tx/instantiate.tsx
index 21af59ad9..4ef0f1ffb 100644
--- a/src/lib/app-fns/tx/instantiate.tsx
+++ b/src/lib/app-fns/tx/instantiate.tsx
@@ -6,9 +6,9 @@ import type { Coin, StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import type { TxResultRendering } from "lib/types";
 
+import { catchTxError } from "./common";
 import { postTx } from "./common/post";
 import { sendingTx } from "./common/sending";
 
@@ -21,7 +21,6 @@ interface InstantiateTxParams {
   admin: string;
   funds: Coin[];
   client: SigningCosmWasmClient;
-  catchTxError: CatchTxError;
   onTxSucceed?: (txInfo: InstantiateResult, contractLabel: string) => void;
   onTxFailed?: () => void;
 }
@@ -35,7 +34,6 @@ export const instantiateContractTx = ({
   admin,
   funds,
   client,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: InstantiateTxParams): Observable<TxResultRendering> => {
diff --git a/src/lib/app-fns/tx/migrate.tsx b/src/lib/app-fns/tx/migrate.tsx
index 0b7080a64..1b4fa2d0e 100644
--- a/src/lib/app-fns/tx/migrate.tsx
+++ b/src/lib/app-fns/tx/migrate.tsx
@@ -6,13 +6,13 @@ import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import type { ContractAddr, HumanAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { formatUFee } from "lib/utils";
 
+import { catchTxError } from "./common";
 import { postTx } from "./common/post";
 import { sendingTx } from "./common/sending";
 
@@ -23,7 +23,6 @@ interface MigrateTxParams {
   migrateMsg: object;
   fee: StdFee;
   client: SigningCosmWasmClient;
-  catchTxError: CatchTxError;
   onTxSucceed?: (txHash: string) => void;
   onTxFailed?: () => void;
 }
@@ -35,7 +34,6 @@ export const migrateContractTx = ({
   migrateMsg,
   fee,
   client,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: MigrateTxParams): Observable<TxResultRendering> => {
diff --git a/src/lib/app-fns/tx/move/executeModule.tsx b/src/lib/app-fns/tx/move/executeModule.tsx
index c3888a1db..fb8f3cd67 100644
--- a/src/lib/app-fns/tx/move/executeModule.tsx
+++ b/src/lib/app-fns/tx/move/executeModule.tsx
@@ -4,9 +4,9 @@ import type { DeliverTxResponse, StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
+import { catchTxError } from "../common";
 import { postTx } from "../common/post";
 import { sendingTx } from "../common/sending";
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TxStreamPhase } from "lib/types";
@@ -18,7 +18,6 @@ interface ExecuteModuleTxParams {
   messages: EncodeObject[];
   fee: StdFee;
   client: SigningCosmWasmClient;
-  catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
 }
@@ -28,7 +27,6 @@ export const executeModuleTx = ({
   messages,
   fee,
   client,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: ExecuteModuleTxParams): Observable<TxResultRendering> => {
diff --git a/src/lib/app-fns/tx/publish.tsx b/src/lib/app-fns/tx/publish.tsx
index a78b792ee..e613418e4 100644
--- a/src/lib/app-fns/tx/publish.tsx
+++ b/src/lib/app-fns/tx/publish.tsx
@@ -4,19 +4,17 @@ import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import type { PublishSucceedCallback } from "lib/app-provider/tx/publish";
 import type { HumanAddr, TxResultRendering } from "lib/types";
 import { formatUFee } from "lib/utils";
 
-import { postTx, sendingTx } from "./common";
+import { catchTxError, postTx, sendingTx } from "./common";
 
 interface PublishModuleTxParams {
   address: HumanAddr;
   client: SigningCosmWasmClient;
   onTxSucceed?: PublishSucceedCallback;
   onTxFailed?: () => void;
-  catchTxError: CatchTxError;
   fee: StdFee;
   messages: EncodeObject[];
 }
@@ -24,7 +22,6 @@ interface PublishModuleTxParams {
 export const publishModuleTx = ({
   address,
   client,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
   fee,
diff --git a/src/lib/app-fns/tx/resend.tsx b/src/lib/app-fns/tx/resend.tsx
index 9463ecad2..9a652adbc 100644
--- a/src/lib/app-fns/tx/resend.tsx
+++ b/src/lib/app-fns/tx/resend.tsx
@@ -5,21 +5,19 @@ import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import type { HumanAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { formatUFee } from "lib/utils";
 
-import { postTx, sendingTx } from "./common";
+import { catchTxError, postTx, sendingTx } from "./common";
 
 interface ResendTxParams {
   address: HumanAddr;
   client: SigningCosmWasmClient;
   fee: StdFee;
   messages: EncodeObject[];
-  catchTxError: CatchTxError;
   onTxSucceed?: (txHash: string) => void;
   onTxFailed?: () => void;
 }
@@ -29,7 +27,6 @@ export const resendTx = ({
   client,
   fee,
   messages,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: ResendTxParams): Observable<TxResultRendering> => {
diff --git a/src/lib/app-fns/tx/script.tsx b/src/lib/app-fns/tx/script.tsx
index 666ea1a7c..11111b760 100644
--- a/src/lib/app-fns/tx/script.tsx
+++ b/src/lib/app-fns/tx/script.tsx
@@ -4,21 +4,19 @@ import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import type { HumanAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { formatUFee } from "lib/utils";
 
-import { postTx, sendingTx } from "./common";
+import { catchTxError, postTx, sendingTx } from "./common";
 
 interface DeployScriptTxParams {
   address: HumanAddr;
   client: SigningCosmWasmClient;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
-  catchTxError: CatchTxError;
   fee: StdFee;
   messages: EncodeObject[];
 }
@@ -26,7 +24,6 @@ interface DeployScriptTxParams {
 export const deployScriptTx = ({
   address,
   client,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
   fee,
diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
index f04e73560..678db085a 100644
--- a/src/lib/app-fns/tx/submitProposal.tsx
+++ b/src/lib/app-fns/tx/submitProposal.tsx
@@ -5,14 +5,13 @@ import { pipe } from "@rx-stream/pipe";
 import { capitalize } from "lodash";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import type { HumanAddr, Nullable, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { findAttr, formatUFee } from "lib/utils";
 
-import { postTx, sendingTx } from "./common";
+import { catchTxError, postTx, sendingTx } from "./common";
 
 interface SubmitWhitelistProposalTxParams {
   address: HumanAddr;
@@ -21,7 +20,6 @@ interface SubmitWhitelistProposalTxParams {
   messages: EncodeObject[];
   whitelistNumber: number;
   amountToVote: Nullable<string>;
-  catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
 }
@@ -33,7 +31,6 @@ export const submitWhitelistProposalTx = ({
   messages,
   whitelistNumber,
   amountToVote,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: SubmitWhitelistProposalTxParams): Observable<TxResultRendering> => {
@@ -110,7 +107,6 @@ interface SubmitStoreCodeProposalTxParams {
   wasmFileName: string;
   messages: EncodeObject[];
   amountToVote: Nullable<string>;
-  catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
 }
@@ -123,7 +119,6 @@ export const submitStoreCodeProposalTx = ({
   wasmFileName,
   messages,
   amountToVote,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: SubmitStoreCodeProposalTxParams): Observable<TxResultRendering> => {
diff --git a/src/lib/app-fns/tx/updateAdmin.tsx b/src/lib/app-fns/tx/updateAdmin.tsx
index 13cc11326..5b9678b86 100644
--- a/src/lib/app-fns/tx/updateAdmin.tsx
+++ b/src/lib/app-fns/tx/updateAdmin.tsx
@@ -6,7 +6,6 @@ import type { StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import type {
@@ -18,7 +17,7 @@ import type {
 import { TxStreamPhase } from "lib/types";
 import { formatUFee } from "lib/utils";
 
-import { postTx, sendingTx } from "./common";
+import { catchTxError, postTx, sendingTx } from "./common";
 
 interface UpdateAdminTxParams {
   address: HumanAddr;
@@ -26,7 +25,6 @@ interface UpdateAdminTxParams {
   newAdmin: Addr;
   fee: StdFee;
   client: SigningCosmWasmClient;
-  catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
 }
@@ -37,7 +35,6 @@ export const updateAdminTx = ({
   newAdmin,
   fee,
   client,
-  catchTxError,
   onTxSucceed,
   onTxFailed,
 }: UpdateAdminTxParams): Observable<TxResultRendering> => {
diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
index 31ba50340..37ef8e831 100644
--- a/src/lib/app-fns/tx/upload.tsx
+++ b/src/lib/app-fns/tx/upload.tsx
@@ -4,7 +4,6 @@ import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
 import type { UploadSucceedCallback } from "lib/app-provider";
-import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TxStreamPhase } from "lib/types";
@@ -12,6 +11,7 @@ import type { HumanAddr, TxResultRendering, ComposedMsg } from "lib/types";
 import { findAttr } from "lib/utils";
 import { formatUFee } from "lib/utils/formatter/denom";
 
+import { catchTxError } from "./common";
 import { postTx } from "./common/post";
 import { sendingTx } from "./common/sending";
 
@@ -24,7 +24,6 @@ interface UploadTxParams {
   memo?: string;
   client: SigningCosmWasmClient;
   isMigrate: boolean;
-  catchTxError: CatchTxError;
   onTxSucceed: UploadSucceedCallback;
 }
 
@@ -37,7 +36,6 @@ export const uploadContractTx = ({
   memo,
   client,
   isMigrate,
-  catchTxError,
   onTxSucceed,
 }: UploadTxParams): Observable<TxResultRendering> => {
   return pipe(
diff --git a/src/lib/app-provider/contexts/nav.tsx b/src/lib/app-provider/contexts/nav.tsx
index 260c34744..c3f52a521 100644
--- a/src/lib/app-provider/contexts/nav.tsx
+++ b/src/lib/app-provider/contexts/nav.tsx
@@ -1,33 +1,48 @@
 import type { Dispatch, ReactNode, SetStateAction } from "react";
 import { useContext, createContext, useMemo } from "react";
 
-import { usePreviousPathname } from "../hooks/usePreviousPathname";
 import { StorageKeys } from "lib/data";
 import { useLocalStorage } from "lib/hooks/useLocalStorage";
-import type { Nullable } from "lib/types";
 
 interface NavContextInterface {
   isExpand: boolean;
-  prevPathname: Nullable<string>;
   setIsExpand: Dispatch<SetStateAction<boolean>>;
+  submenus: Record<string, [boolean, Dispatch<SetStateAction<boolean>>]>;
 }
 const NavContext = createContext<NavContextInterface>({
   isExpand: false,
-  prevPathname: null,
   setIsExpand: () => {},
+  submenus: {},
 });
 
 export const NavProvider = ({ children }: { children: ReactNode }) => {
   const [isExpand, setIsExpand] = useLocalStorage(StorageKeys.NavSidebar, true);
-  const prevPathname = usePreviousPathname();
+  const [isDevExpand, setIsDevExpand] = useLocalStorage(
+    StorageKeys.DevSidebar,
+    true
+  );
+  const [isProjectExpand, setIsProjectExpand] = useLocalStorage(
+    StorageKeys.ProjectSidebar,
+    true
+  );
 
   const states = useMemo<NavContextInterface>(
     () => ({
       isExpand,
-      prevPathname,
       setIsExpand,
+      submenus: {
+        [StorageKeys.DevSidebar]: [isDevExpand, setIsDevExpand],
+        [StorageKeys.ProjectSidebar]: [isProjectExpand, setIsProjectExpand],
+      },
     }),
-    [isExpand, prevPathname, setIsExpand]
+    [
+      isExpand,
+      setIsExpand,
+      isDevExpand,
+      setIsDevExpand,
+      isProjectExpand,
+      setIsProjectExpand,
+    ]
   );
 
   return <NavContext.Provider value={states}>{children}</NavContext.Provider>;
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index adec0f195..4e3b8f29b 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -13,5 +13,4 @@ export * from "./useRPCEndpoint";
 export * from "./useConfig";
 export * from "./useCurrentChain";
 export * from "./useConvertHexAddress";
-export * from "./usePreviousPathname";
 export * from "./usePlatform";
diff --git a/src/lib/app-provider/hooks/usePreviousPathname.ts b/src/lib/app-provider/hooks/usePreviousPathname.ts
deleted file mode 100644
index da9819492..000000000
--- a/src/lib/app-provider/hooks/usePreviousPathname.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useRouter } from "next/router";
-import { useEffect, useRef } from "react";
-
-import type { Nullable } from "lib/types";
-
-export const usePreviousPathname = () => {
-  const { pathname } = useRouter();
-
-  const ref = useRef<Nullable<string>>(null);
-
-  useEffect(() => {
-    ref.current = pathname;
-  }, [pathname]);
-
-  return ref.current;
-};
diff --git a/src/lib/app-provider/tx/catchTxError.ts b/src/lib/app-provider/tx/catchTxError.ts
deleted file mode 100644
index fe0409ea3..000000000
--- a/src/lib/app-provider/tx/catchTxError.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useCallback } from "react";
-
-import { useTrack } from "lib/amplitude";
-import { catchTxError } from "lib/app-fns/tx/common";
-
-// HACK: This shouldn't be here. It should be in src/lib/app-fns/tx/common/catchTxError.ts
-export type CatchTxError = ReturnType<typeof useCatchTxError>;
-
-export const useCatchTxError = () => {
-  const { trackTxFailed, trackTxRejected } = useTrack();
-
-  return useCallback(
-    (onTxFailed?: () => void) =>
-      catchTxError(trackTxFailed, trackTxRejected, onTxFailed),
-    [trackTxFailed, trackTxRejected]
-  );
-};
diff --git a/src/lib/app-provider/tx/clearAdmin.ts b/src/lib/app-provider/tx/clearAdmin.ts
index 1f9cbbcf2..2881a260a 100644
--- a/src/lib/app-provider/tx/clearAdmin.ts
+++ b/src/lib/app-provider/tx/clearAdmin.ts
@@ -3,12 +3,10 @@ import { useCallback } from "react";
 
 import { CELATONE_QUERY_KEYS } from "../env";
 import { useCurrentChain, useFabricateFee, useWasmConfig } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { clearAdminTx } from "lib/app-fns/tx/clearAdmin";
 import type { ContractAddr, HumanAddr } from "lib/types";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface ClearAdminStreamParams {
   onTxSucceed?: () => void;
 }
@@ -18,8 +16,6 @@ export const useClearAdminTx = (contractAddress: ContractAddr) => {
   const queryClient = useQueryClient();
   const fabricateFee = useFabricateFee();
   const wasm = useWasmConfig({ shouldRedirect: false });
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({ onTxSucceed }: ClearAdminStreamParams) => {
@@ -51,13 +47,10 @@ export const useClearAdminTx = (contractAddress: ContractAddr) => {
             }),
           ]);
         },
-        catchTxError,
       });
     },
     [
       getSigningCosmWasmClient,
-      trackTxSucceed,
-      catchTxError,
       address,
       wasm,
       fabricateFee,
diff --git a/src/lib/app-provider/tx/execute.ts b/src/lib/app-provider/tx/execute.ts
index c39c4df81..cf1de6790 100644
--- a/src/lib/app-provider/tx/execute.ts
+++ b/src/lib/app-provider/tx/execute.ts
@@ -2,13 +2,11 @@ import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { executeContractTx } from "lib/app-fns/tx/execute";
 import type { Activity } from "lib/stores/contract";
 import type { ContractAddr, HumanAddr } from "lib/types";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface ExecuteStreamParams {
   onTxSucceed?: (activity: Activity) => void;
   onTxFailed?: () => void;
@@ -20,8 +18,6 @@ export interface ExecuteStreamParams {
 
 export const useExecuteContractTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -44,7 +40,6 @@ export const useExecuteContractTx = () => {
         msg,
         funds,
         client,
-        catchTxError,
         onTxSucceed: (activity) => {
           trackTxSucceed();
           onTxSucceed?.(activity);
@@ -52,6 +47,6 @@ export const useExecuteContractTx = () => {
         onTxFailed,
       });
     },
-    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/instantiate.ts b/src/lib/app-provider/tx/instantiate.ts
index 34370e0b1..d081f2330 100644
--- a/src/lib/app-provider/tx/instantiate.ts
+++ b/src/lib/app-provider/tx/instantiate.ts
@@ -3,11 +3,9 @@ import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { instantiateContractTx } from "lib/app-fns/tx/instantiate";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface InstantiateStreamParams {
   estimatedFee: StdFee | undefined;
   codeId: number;
@@ -21,8 +19,6 @@ export interface InstantiateStreamParams {
 
 export const useInstantiateTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -49,7 +45,6 @@ export const useInstantiateTx = () => {
         admin,
         funds,
         client,
-        catchTxError,
         onTxSucceed: (txResult, contractLabel) => {
           trackTxSucceed();
           onTxSucceed?.(txResult, contractLabel);
@@ -57,6 +52,6 @@ export const useInstantiateTx = () => {
         onTxFailed,
       });
     },
-    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/migrate.ts b/src/lib/app-provider/tx/migrate.ts
index ba65ebb90..cef562c7a 100644
--- a/src/lib/app-provider/tx/migrate.ts
+++ b/src/lib/app-provider/tx/migrate.ts
@@ -2,12 +2,10 @@ import type { StdFee } from "@cosmjs/stargate";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { migrateContractTx } from "lib/app-fns/tx/migrate";
 import type { ContractAddr, HumanAddr, Option } from "lib/types";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface MigrateStreamParams {
   contractAddress: ContractAddr;
   codeId: number;
@@ -19,8 +17,6 @@ export interface MigrateStreamParams {
 
 export const useMigrateTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -43,7 +39,6 @@ export const useMigrateTx = () => {
         migrateMsg,
         fee: estimatedFee,
         client,
-        catchTxError,
         onTxSucceed: (txHash) => {
           trackTxSucceed();
           onTxSucceed?.(txHash);
@@ -51,6 +46,6 @@ export const useMigrateTx = () => {
         onTxFailed,
       });
     },
-    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/move/executeModule.ts b/src/lib/app-provider/tx/move/executeModule.ts
index 6ab05881c..2d7b3babc 100644
--- a/src/lib/app-provider/tx/move/executeModule.ts
+++ b/src/lib/app-provider/tx/move/executeModule.ts
@@ -2,8 +2,7 @@ import type { StdFee } from "@cosmjs/stargate";
 import { MsgExecute as MsgExecuteModule } from "@initia/initia.js";
 import { useCallback } from "react";
 
-import { useCatchTxError } from "../catchTxError";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { executeModuleTx } from "lib/app-fns/tx/move/executeModule";
 import { useCurrentChain } from "lib/app-provider/hooks";
 import type { HexAddr, HumanAddr } from "lib/types";
@@ -22,8 +21,6 @@ export interface ExecuteModuleStreamParams {
 
 export const useExecuteModuleTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -57,7 +54,6 @@ export const useExecuteModuleTx = () => {
         messages,
         fee: estimatedFee,
         client,
-        catchTxError,
         onTxSucceed: () => {
           trackTxSucceed();
           onTxSucceed?.();
@@ -65,6 +61,6 @@ export const useExecuteModuleTx = () => {
         onTxFailed,
       });
     },
-    [address, catchTxError, getSigningCosmWasmClient, trackTxSucceed]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/publish.tsx b/src/lib/app-provider/tx/publish.tsx
index 5370ef71c..4f1a1f5c0 100644
--- a/src/lib/app-provider/tx/publish.tsx
+++ b/src/lib/app-provider/tx/publish.tsx
@@ -3,12 +3,10 @@ import type { StdFee } from "@cosmjs/stargate";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { publishModuleTx } from "lib/app-fns/tx/publish";
 import type { HumanAddr } from "lib/types";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface PublishTxInternalResult {
   txHash: string;
   formattedFee: string;
@@ -27,8 +25,6 @@ export interface PublishModuleStreamParams {
 
 export const usePublishModuleTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -49,11 +45,10 @@ export const usePublishModuleTx = () => {
           onTxSucceed?.(txResult);
         },
         onTxFailed,
-        catchTxError,
         fee: estimatedFee,
         messages,
       });
     },
-    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/resend.ts b/src/lib/app-provider/tx/resend.ts
index a2f623484..7dc4379e0 100644
--- a/src/lib/app-provider/tx/resend.ts
+++ b/src/lib/app-provider/tx/resend.ts
@@ -3,12 +3,10 @@ import type { StdFee } from "@cosmjs/stargate";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { resendTx } from "lib/app-fns/tx/resend";
 import type { HumanAddr } from "lib/types";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface ResendStreamParams {
   onTxSucceed?: (txHash: string) => void;
   onTxFailed?: () => void;
@@ -18,8 +16,6 @@ export interface ResendStreamParams {
 
 export const useResendTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -37,7 +33,6 @@ export const useResendTx = () => {
         client,
         fee: estimatedFee,
         messages,
-        catchTxError,
         onTxSucceed: (txHash) => {
           trackTxSucceed();
           onTxSucceed?.(txHash);
@@ -45,6 +40,6 @@ export const useResendTx = () => {
         onTxFailed,
       });
     },
-    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/script.tsx b/src/lib/app-provider/tx/script.tsx
index d750a71be..689a48689 100644
--- a/src/lib/app-provider/tx/script.tsx
+++ b/src/lib/app-provider/tx/script.tsx
@@ -3,12 +3,10 @@ import type { StdFee } from "@cosmjs/stargate";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { deployScriptTx } from "lib/app-fns/tx/script";
 import type { HumanAddr } from "lib/types";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface DeployScriptStreamParams {
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
@@ -18,8 +16,6 @@ export interface DeployScriptStreamParams {
 
 export const useDeployScriptTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -40,11 +36,10 @@ export const useDeployScriptTx = () => {
           onTxSucceed?.();
         },
         onTxFailed,
-        catchTxError,
         fee: estimatedFee,
         messages,
       });
     },
-    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/submitProposal.ts b/src/lib/app-provider/tx/submitProposal.ts
index 8a2258e7c..159bda2c5 100644
--- a/src/lib/app-provider/tx/submitProposal.ts
+++ b/src/lib/app-provider/tx/submitProposal.ts
@@ -3,15 +3,13 @@ import type { StdFee } from "@cosmjs/stargate";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import {
   submitStoreCodeProposalTx,
   submitWhitelistProposalTx,
 } from "lib/app-fns/tx/submitProposal";
 import type { HumanAddr, Nullable } from "lib/types";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface SubmitWhitelistProposalStreamParams {
   estimatedFee?: StdFee;
   messages: EncodeObject[];
@@ -23,8 +21,6 @@ export interface SubmitWhitelistProposalStreamParams {
 
 export const useSubmitWhitelistProposalTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -46,7 +42,6 @@ export const useSubmitWhitelistProposalTx = () => {
         messages,
         whitelistNumber,
         amountToVote,
-        catchTxError,
         onTxSucceed: () => {
           trackTxSucceed();
           onTxSucceed?.();
@@ -54,7 +49,7 @@ export const useSubmitWhitelistProposalTx = () => {
         onTxFailed,
       });
     },
-    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient]
   );
 };
 
@@ -69,8 +64,6 @@ interface SubmitStoreCodeProposalStreamParams {
 
 export const useSubmitStoreCodeProposalTx = () => {
   const { address, getSigningCosmWasmClient, chain } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -93,7 +86,6 @@ export const useSubmitStoreCodeProposalTx = () => {
         messages,
         wasmFileName,
         amountToVote,
-        catchTxError,
         onTxSucceed: () => {
           trackTxSucceed();
           onTxSucceed?.();
@@ -101,12 +93,6 @@ export const useSubmitStoreCodeProposalTx = () => {
         onTxFailed,
       });
     },
-    [
-      address,
-      chain.chain_name,
-      getSigningCosmWasmClient,
-      trackTxSucceed,
-      catchTxError,
-    ]
+    [address, chain.chain_name, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/updateAdmin.ts b/src/lib/app-provider/tx/updateAdmin.ts
index 567534040..008c46d99 100644
--- a/src/lib/app-provider/tx/updateAdmin.ts
+++ b/src/lib/app-provider/tx/updateAdmin.ts
@@ -2,12 +2,10 @@ import type { StdFee } from "@cosmjs/stargate";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { updateAdminTx } from "lib/app-fns/tx/updateAdmin";
 import type { Addr, ContractAddr, HumanAddr, Option } from "lib/types";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface UpdateAdminStreamParams {
   contractAddress: ContractAddr;
   newAdmin: Addr;
@@ -18,8 +16,6 @@ export interface UpdateAdminStreamParams {
 
 export const useUpdateAdminTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -40,7 +36,6 @@ export const useUpdateAdminTx = () => {
         newAdmin,
         fee: estimatedFee,
         client,
-        catchTxError,
         onTxSucceed: () => {
           trackTxSucceed();
           onTxSucceed?.();
@@ -48,6 +43,6 @@ export const useUpdateAdminTx = () => {
         onTxFailed,
       });
     },
-    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/upload.ts b/src/lib/app-provider/tx/upload.ts
index 4f11e8a8b..7e121872f 100644
--- a/src/lib/app-provider/tx/upload.ts
+++ b/src/lib/app-provider/tx/upload.ts
@@ -3,13 +3,11 @@ import { gzip } from "node-gzip";
 import { useCallback } from "react";
 
 import { useCurrentChain } from "../hooks";
-import { useTrack } from "lib/amplitude";
+import { trackTxSucceed } from "lib/amplitude";
 import { uploadContractTx } from "lib/app-fns/tx/upload";
 import type { AccessType, Addr, HumanAddr, Option } from "lib/types";
 import { composeStoreCodeMsg } from "lib/utils";
 
-import { useCatchTxError } from "./catchTxError";
-
 export interface UploadTxInternalResult {
   codeDisplayName: string;
   codeId: string;
@@ -32,8 +30,6 @@ export interface UploadStreamParams {
 
 export const useUploadContractTx = (isMigrate: boolean) => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
-  const { trackTxSucceed } = useTrack();
-  const catchTxError = useCatchTxError();
 
   return useCallback(
     async ({
@@ -65,13 +61,12 @@ export const useUploadContractTx = (isMigrate: boolean) => {
         fee: estimatedFee,
         client,
         isMigrate,
-        catchTxError,
         onTxSucceed: (txResult) => {
           trackTxSucceed();
           onTxSucceed(txResult);
         },
       });
     },
-    [address, getSigningCosmWasmClient, isMigrate, trackTxSucceed, catchTxError]
+    [address, getSigningCosmWasmClient, isMigrate]
   );
 };
diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
index 5aa209dcd..7141dae95 100644
--- a/src/lib/components/ConnectWalletAlert.tsx
+++ b/src/lib/components/ConnectWalletAlert.tsx
@@ -9,7 +9,7 @@ import {
 import type { AlertProps } from "@chakra-ui/react";
 import type { MouseEventHandler } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseClickWallet } from "lib/amplitude";
 import { useCurrentChain } from "lib/app-provider";
 
 import { CustomIcon } from "./icon";
@@ -25,7 +25,6 @@ export const ConnectWalletAlert = ({
   ...alertProps
 }: ConnectWalletAlertProps) => {
   const { address, connect } = useCurrentChain();
-  const { trackUseClickWallet } = useTrack();
 
   const onClickConnect: MouseEventHandler = async (e) => {
     trackUseClickWallet("alert");
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index c7985ab9d..4f180b601 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -2,7 +2,7 @@ import type { FlexProps, IconProps } from "@chakra-ui/react";
 import { Flex, Text, useClipboard } from "@chakra-ui/react";
 import { useEffect, useMemo, useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseCopier } from "lib/amplitude";
 import { useCurrentChain } from "lib/app-provider";
 import { truncate } from "lib/utils";
 
@@ -28,7 +28,6 @@ export const CopyLink = ({
   ...flexProps
 }: CopyLinkProps) => {
   const { address } = useCurrentChain();
-  const { trackUseCopier } = useTrack();
   const { onCopy, hasCopied, setValue } = useClipboard(value);
   const [isHover, setIsHover] = useState(false);
 
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index a7883c9f4..bf6974a28 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -2,7 +2,7 @@ import type { BoxProps, TextProps } from "@chakra-ui/react";
 import { Box, Text, Flex } from "@chakra-ui/react";
 
 import type { ExplorerConfig } from "config/chain/types";
-import { useTrack } from "lib/amplitude";
+import { trackMintScan } from "lib/amplitude";
 import { type AddressReturnType } from "lib/app-provider";
 import { useCelatoneApp } from "lib/app-provider/contexts";
 import { useBaseApiRoute } from "lib/app-provider/hooks/useBaseApiRoute";
@@ -126,7 +126,6 @@ const LinkRender = ({
   textVariant: TextProps["variant"];
   openNewTab: Option<boolean>;
 }) => {
-  const { trackMintScan } = useTrack();
   const { currentChainId } = useCelatoneApp();
   const textElement = (
     <Text
diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
index e815bf70d..cdb11c2eb 100644
--- a/src/lib/components/InputWithIcon.tsx
+++ b/src/lib/components/InputWithIcon.tsx
@@ -7,7 +7,7 @@ import {
 } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 
 import { CustomIcon } from "./icon";
 
@@ -33,40 +33,33 @@ const InputWithIcon = ({
   iconPosition = "end",
   autoFocus = false,
   onChange,
-}: InputWithIconProps) => {
-  const { track } = useTrack();
-
-  return (
-    <InputGroup my={my}>
-      <Input
-        placeholder={placeholder}
-        value={value}
-        size={size}
-        p={`8px ${iconPosition === "end" ? "40px" : "12px"} 8px ${
-          iconPosition === "start" ? "40px" : "12px"
-        } !important`}
-        onChange={onChange}
-        autoFocus={autoFocus}
-        onClick={action ? () => track(AmpEvent.USE_SEARCH_INPUT) : undefined}
-      />
-      {iconPosition === "end" ? (
-        <InputRightElement
-          h={size === "lg" ? "56px" : "full"}
-          alignItems="center"
-          mr={1}
-        >
-          <SearchIcon />
-        </InputRightElement>
-      ) : (
-        <InputLeftElement
-          h={size === "lg" ? "56px" : "full"}
-          alignItems="center"
-        >
-          <SearchIcon />
-        </InputLeftElement>
-      )}
-    </InputGroup>
-  );
-};
+}: InputWithIconProps) => (
+  <InputGroup my={my}>
+    <Input
+      placeholder={placeholder}
+      value={value}
+      size={size}
+      p={`8px ${iconPosition === "end" ? "40px" : "12px"} 8px ${
+        iconPosition === "start" ? "40px" : "12px"
+      } !important`}
+      onChange={onChange}
+      autoFocus={autoFocus}
+      onClick={action ? () => track(AmpEvent.USE_SEARCH_INPUT) : undefined}
+    />
+    {iconPosition === "end" ? (
+      <InputRightElement
+        h={size === "lg" ? "56px" : "full"}
+        alignItems="center"
+        mr={1}
+      >
+        <SearchIcon />
+      </InputRightElement>
+    ) : (
+      <InputLeftElement h={size === "lg" ? "56px" : "full"} alignItems="center">
+        <SearchIcon />
+      </InputLeftElement>
+    )}
+  </InputGroup>
+);
 
 export default InputWithIcon;
diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
index 670d58b93..76c91d8fc 100644
--- a/src/lib/components/StickySidebar.tsx
+++ b/src/lib/components/StickySidebar.tsx
@@ -12,7 +12,7 @@ import {
 } from "@chakra-ui/react";
 import Link from "next/link";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseRightHelperPanel } from "lib/amplitude";
 import { useInternalNavigate } from "lib/app-provider";
 
 import { CustomIcon } from "./icon";
@@ -64,7 +64,6 @@ export const StickySidebar = ({
   hasForumAlert = false,
   ...boxProps
 }: StickySidebarProps) => {
-  const { trackUseRightHelperPanel } = useTrack();
   const navigate = useInternalNavigate();
   const { title, description, toPagePath, toPageTitle, toPage, page } =
     metadata;
diff --git a/src/lib/components/ViewPermissionAddresses.tsx b/src/lib/components/ViewPermissionAddresses.tsx
index 99cdf9ad5..8775d7b30 100644
--- a/src/lib/components/ViewPermissionAddresses.tsx
+++ b/src/lib/components/ViewPermissionAddresses.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@chakra-ui/react";
 import { useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseExpand } from "lib/amplitude";
 import { useGetAddressType } from "lib/app-provider";
 import type { PermissionAddresses } from "lib/types";
 
@@ -17,7 +17,6 @@ export const ViewPermissionAddresses = ({
 }) => {
   const [viewAll, setViewAll] = useState(false);
   const getAddressType = useGetAddressType();
-  const { trackUseExpand } = useTrack();
   const showAddressses =
     viewAll ||
     (typeof permissionAddresses === "object" &&
diff --git a/src/lib/components/Wallet.tsx b/src/lib/components/Wallet.tsx
index cb23ea8b0..025342ef1 100644
--- a/src/lib/components/Wallet.tsx
+++ b/src/lib/components/Wallet.tsx
@@ -1,6 +1,6 @@
 import type { MouseEventHandler } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCurrentChain } from "lib/app-provider";
 import { truncate } from "lib/utils";
 
@@ -14,7 +14,6 @@ import {
 
 export const WalletSection = () => {
   const { address, connect, openView, status } = useCurrentChain();
-  const { track } = useTrack();
 
   // Events
   const onClickConnect: MouseEventHandler = async (e) => {
diff --git a/src/lib/components/button/BackButton.tsx b/src/lib/components/button/BackButton.tsx
index 56cfc36ab..fec1551c3 100644
--- a/src/lib/components/button/BackButton.tsx
+++ b/src/lib/components/button/BackButton.tsx
@@ -3,11 +3,10 @@ import type { ButtonProps } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
 import { CustomIcon } from "../icon";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 
 export const BackButton = (props: ButtonProps) => {
   const router = useRouter();
-  const { track } = useTrack();
 
   return (
     <Button
diff --git a/src/lib/components/button/ConnectWallet.tsx b/src/lib/components/button/ConnectWallet.tsx
index bc523691a..6835630b2 100644
--- a/src/lib/components/button/ConnectWallet.tsx
+++ b/src/lib/components/button/ConnectWallet.tsx
@@ -2,12 +2,11 @@ import { Button } from "@chakra-ui/react";
 import type { MouseEventHandler } from "react";
 
 import { CustomIcon } from "../icon";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCurrentChain } from "lib/app-provider";
 
 export const ConnectWalletBtn = () => {
   const { connect } = useCurrentChain();
-  const { track } = useTrack();
 
   const onClickConnect: MouseEventHandler = async (e) => {
     track(AmpEvent.USE_CLICK_WALLET);
diff --git a/src/lib/components/button/NewProposalButton.tsx b/src/lib/components/button/NewProposalButton.tsx
index 1ba8eb436..c88b466fc 100644
--- a/src/lib/components/button/NewProposalButton.tsx
+++ b/src/lib/components/button/NewProposalButton.tsx
@@ -1,14 +1,13 @@
 import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
 
 import { Tooltip } from "../Tooltip";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate, useGovConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 // import { useGovParams } from "lib/services/proposalService";
 // import { AccessConfigPermission } from "lib/types";
 
 export const NewProposalButton = () => {
-  const { track } = useTrack();
   const navigate = useInternalNavigate();
   const govConfig = useGovConfig({ shouldRedirect: false });
   // const { data: govParams } = useGovParams();
diff --git a/src/lib/components/button/ResendButton.tsx b/src/lib/components/button/ResendButton.tsx
index be7556c8b..8408df9a2 100644
--- a/src/lib/components/button/ResendButton.tsx
+++ b/src/lib/components/button/ResendButton.tsx
@@ -2,7 +2,7 @@ import { Button } from "@chakra-ui/react";
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import { useCallback, useState } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useFabricateFee,
   useResendTx,
@@ -32,7 +32,6 @@ const formatMsgs = (messages: Message[]) =>
   }, []);
 
 export const ResendButton = ({ messages }: ResendButtonProps) => {
-  const { track } = useTrack();
   const fabricateFee = useFabricateFee();
   const resendTx = useResendTx();
   const { broadcast } = useTxBroadcast();
@@ -53,7 +52,7 @@ export const ResendButton = ({ messages }: ResendButtonProps) => {
       });
       if (stream) broadcast(stream);
     },
-    [broadcast, composedMsgs, fabricateFee, resendTx, track]
+    [broadcast, composedMsgs, fabricateFee, resendTx]
   );
 
   const { isFetching: isSimulating } = useSimulateFeeQuery({
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index 936c21431..5f62d6023 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -1,7 +1,7 @@
 import type { IconProps, LayoutProps } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
-import { useTrack } from "lib/amplitude";
+import { trackUseCopier } from "lib/amplitude";
 
 import { CopyTemplate } from "./CopyTemplate";
 
@@ -21,27 +21,23 @@ export const Copier = ({
   display = "inline",
   ml = 2,
   amptrackSection,
-}: CopierProps) => {
-  const { trackUseCopier } = useTrack();
-
-  return (
-    <CopyTemplate
-      value={value}
-      copyLabel={copyLabel}
-      triggerElement={
-        <CustomIcon
-          id={type}
-          className="copier"
-          display={display}
-          cursor="pointer"
-          m={0}
-          marginLeft={ml}
-          onClick={() => trackUseCopier(type, amptrackSection)}
-          name="copy"
-          boxSize={3}
-          color="gray.600"
-        />
-      }
-    />
-  );
-};
+}: CopierProps) => (
+  <CopyTemplate
+    value={value}
+    copyLabel={copyLabel}
+    triggerElement={
+      <CustomIcon
+        id={type}
+        className="copier"
+        display={display}
+        cursor="pointer"
+        m={0}
+        marginLeft={ml}
+        onClick={() => trackUseCopier(type, amptrackSection)}
+        name="copy"
+        boxSize={3}
+        color="gray.600"
+      />
+    }
+  />
+);
diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index cf07bb4bf..19d1dae39 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -2,7 +2,7 @@ import { Button } from "@chakra-ui/react";
 import type { ButtonProps } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 
 import { CopyTemplate } from "./CopyTemplate";
 
@@ -28,37 +28,33 @@ export const CopyButton = ({
   ml,
   iconGap,
   ...buttonProps
-}: CopyButtonProps) => {
-  const { track } = useTrack();
-
-  return (
-    <CopyTemplate
-      value={value}
-      copyLabel={copyLabel}
-      isDisabled={isDisable}
-      ml={ml}
-      triggerElement={
-        <Button
-          isDisabled={isDisable}
-          variant={variant}
-          size={size}
-          float="right"
-          onClick={() =>
-            track(AmpEvent.USE_COPY_BUTTON, { section: amptrackSection })
-          }
-          {...buttonProps}
-          borderRadius={size === "xs" ? 6 : 8}
-        >
-          {hasIcon && (
-            <CustomIcon
-              name="copy"
-              boxSize={size === "xs" ? 3 : 4}
-              mr={iconGap}
-            />
-          )}
-          {buttonText}
-        </Button>
-      }
-    />
-  );
-};
+}: CopyButtonProps) => (
+  <CopyTemplate
+    value={value}
+    copyLabel={copyLabel}
+    isDisabled={isDisable}
+    ml={ml}
+    triggerElement={
+      <Button
+        isDisabled={isDisable}
+        variant={variant}
+        size={size}
+        float="right"
+        onClick={() =>
+          track(AmpEvent.USE_COPY_BUTTON, { section: amptrackSection })
+        }
+        {...buttonProps}
+        borderRadius={size === "xs" ? 6 : 8}
+      >
+        {hasIcon && (
+          <CustomIcon
+            name="copy"
+            boxSize={size === "xs" ? 3 : 4}
+            mr={iconGap}
+          />
+        )}
+        {buttonText}
+      </Button>
+    }
+  />
+);
diff --git a/src/lib/components/json-schema/AttachSchemaCard.tsx b/src/lib/components/json-schema/AttachSchemaCard.tsx
index 8d0dc0863..0b4dfe83f 100644
--- a/src/lib/components/json-schema/AttachSchemaCard.tsx
+++ b/src/lib/components/json-schema/AttachSchemaCard.tsx
@@ -2,7 +2,7 @@ import { Button, Flex, IconButton, Text } from "@chakra-ui/react";
 import { useCallback } from "react";
 
 import { RemoveSchemaModal } from "../modal/RemoveSchemaModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import type { CodeSchema } from "lib/stores/schema";
 import type { Option } from "lib/types";
@@ -24,17 +24,15 @@ export const AttachSchemaCard = ({
   schema,
   openModal,
 }: AttachSchemaCardProps) => {
-  const { track } = useTrack();
-
   const handleAttach = useCallback(() => {
     openModal();
     track(AmpEvent.USE_ATTACHED_JSON_MODAL);
-  }, [track, openModal]);
+  }, [openModal]);
 
   const handleReattach = useCallback(() => {
     openModal();
     track(AmpEvent.USE_EDIT_ATTACHED_JSON);
-  }, [track, openModal]);
+  }, [openModal]);
 
   return (
     <Flex
diff --git a/src/lib/components/json-schema/EditSchemaButtons.tsx b/src/lib/components/json-schema/EditSchemaButtons.tsx
index 9044722a6..1a3fca5e6 100644
--- a/src/lib/components/json-schema/EditSchemaButtons.tsx
+++ b/src/lib/components/json-schema/EditSchemaButtons.tsx
@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { CustomIcon } from "../icon";
 import { RemoveSchemaModal } from "../modal/RemoveSchemaModal";
 import { Tooltip } from "../Tooltip";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 
 interface EditSchemaButtonsProps {
   codeId: string;
@@ -17,12 +17,10 @@ export const EditSchemaButtons = ({
   codeHash,
   openModal,
 }: EditSchemaButtonsProps) => {
-  const { track } = useTrack();
-
   const handleReattach = useCallback(() => {
     track(AmpEvent.USE_EDIT_ATTACHED_JSON);
     openModal();
-  }, [openModal, track]);
+  }, [openModal]);
 
   return (
     <Flex gap={1}>
diff --git a/src/lib/components/json-schema/MessageInputSwitch.tsx b/src/lib/components/json-schema/MessageInputSwitch.tsx
index 8cf24eadb..be9089a8b 100644
--- a/src/lib/components/json-schema/MessageInputSwitch.tsx
+++ b/src/lib/components/json-schema/MessageInputSwitch.tsx
@@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react";
 import type { CSSProperties, Dispatch, SetStateAction } from "react";
 
 import { Tooltip } from "../Tooltip";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { MotionBox } from "lib/components/MotionBox";
 import type { Option } from "lib/types";
 
@@ -41,7 +41,6 @@ export const MessageInputSwitch = <
   isOutput = false,
   onTabChange: onTabChangeProps,
 }: MessageInputSwitchProps<T>) => {
-  const { track } = useTrack();
   const tabs = useMemo<T[]>(
     () => Object.values(isOutput ? OutputMessageTabs : MessageTabs),
     [isOutput]
@@ -53,7 +52,7 @@ export const MessageInputSwitch = <
       track(AmpEvent.USE_SCHEMA_TOGGLE, { tab });
       onTabChangeProps(tab);
     },
-    [onTabChangeProps, track]
+    [onTabChangeProps]
   );
 
   /**
diff --git a/src/lib/components/json-schema/UploadTemplate.tsx b/src/lib/components/json-schema/UploadTemplate.tsx
index 8941172b9..aee383888 100644
--- a/src/lib/components/json-schema/UploadTemplate.tsx
+++ b/src/lib/components/json-schema/UploadTemplate.tsx
@@ -11,7 +11,7 @@ import type { Dispatch } from "react";
 import { useMemo, useCallback, useReducer, useState } from "react";
 
 import { CustomIcon } from "../icon";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { DropZone } from "lib/components/dropzone";
 import type { ResponseState } from "lib/components/forms";
 import { TextInput } from "lib/components/forms";
@@ -200,7 +200,6 @@ export const UploadTemplate = ({
   closeDrawer,
   onSchemaSave,
 }: UploadTemplateInterface) => {
-  const { track } = useTrack();
   const { saveNewSchema } = useSchemaStore();
   const [method, setMethod] = useState<Method>(Method.UPLOAD_FILE);
   const [jsonState, dispatchJsonState] = useReducer(reducer, initialJsonState);
@@ -273,7 +272,6 @@ export const UploadTemplate = ({
     method,
     isReattach,
     onSchemaSave,
-    track,
     saveNewSchema,
     toast,
   ]);
diff --git a/src/lib/components/json-schema/section/SchemaInputSection.tsx b/src/lib/components/json-schema/section/SchemaInputSection.tsx
index 9a954f160..b6f3aeae5 100644
--- a/src/lib/components/json-schema/section/SchemaInputSection.tsx
+++ b/src/lib/components/json-schema/section/SchemaInputSection.tsx
@@ -8,7 +8,7 @@ import { AttachSchemaCard } from "../AttachSchemaCard";
 import { JsonSchemaForm } from "../form";
 import { JsonSchemaModal } from "../JsonSchemaModal";
 import { ViewSchemaModal } from "../view/ViewSchemaModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import type { CodeSchema } from "lib/stores/schema";
 import type { Option } from "lib/types";
@@ -34,14 +34,13 @@ export const SchemaInputSection = observer(
     onSchemaSave,
   }: SchemaSectionProps) => {
     const { isOpen, onClose, onOpen } = useDisclosure();
-    const { track } = useTrack();
     const msgSchema = jsonSchema?.[type];
     const prettyType = capitalize(type);
 
     const handleReattach = useCallback(() => {
       onOpen();
       track(AmpEvent.USE_EDIT_ATTACHED_JSON);
-    }, [onOpen, track]);
+    }, [onOpen]);
 
     return (
       <>
diff --git a/src/lib/components/json-schema/upload/UploadSchemaSection.tsx b/src/lib/components/json-schema/upload/UploadSchemaSection.tsx
index da5469436..24163f8cc 100644
--- a/src/lib/components/json-schema/upload/UploadSchemaSection.tsx
+++ b/src/lib/components/json-schema/upload/UploadSchemaSection.tsx
@@ -19,50 +19,59 @@ export const UploadSchemaSection = ({
   codeId,
   codeHash,
   title = `You haven't attached the JSON Schema for code ${codeId} yet`,
-}: UploadSchemaSectionProps) => (
-  <Flex
-    p="24px 16px"
-    direction="column"
-    alignItems="center"
-    bgColor="gray.900"
-    borderRadius="8px"
-  >
-    <Flex direction="column" alignItems="center">
+}: UploadSchemaSectionProps) => {
+  const sectionHeader =
+    typeof title === "string" ? (
       <Text variant="body1" fontWeight={700}>
         {title}
       </Text>
-      <Text
-        variant="body2"
-        textColor="text.disabled"
-        fontWeight={500}
-        mt={2}
-        mb={4}
-      >
-        Your attached JSON schema will be stored locally on your device
-      </Text>
-      <Flex direction="column" w="full" gap={10} position="relative">
-        <Flex
-          bgColor="gray.800"
-          borderRadius={4}
-          p={2}
-          gap={2}
-          w="full"
-          justifyContent="center"
+    ) : (
+      title
+    );
+
+  return (
+    <Flex
+      p="24px 16px"
+      direction="column"
+      alignItems="center"
+      bgColor="gray.900"
+      borderRadius="8px"
+    >
+      <Flex direction="column" alignItems="center">
+        {sectionHeader}
+        <Text
+          variant="body2"
+          textColor="text.disabled"
+          fontWeight={500}
+          mt={2}
+          mb={4}
         >
-          <CustomIcon name="code" color="gray.400" />
-          Code ID: {codeId}
+          Your attached JSON schema will be stored locally on your device
+        </Text>
+        <Flex direction="column" w="full" gap={10} position="relative">
+          <Flex
+            bgColor="gray.800"
+            borderRadius={4}
+            p={2}
+            gap={2}
+            w="full"
+            justifyContent="center"
+          >
+            <CustomIcon name="code" color="gray.400" />
+            Code ID: {codeId}
+          </Flex>
+          <ConnectingLine
+            isFilled={false}
+            style={{ left: "calc(50% - 6px)", top: "36px" }}
+          />
+          <UploadSchema
+            attached={false}
+            schema={schema}
+            codeId={codeId}
+            codeHash={codeHash}
+          />
         </Flex>
-        <ConnectingLine
-          isFilled={false}
-          style={{ left: "calc(50% - 6px)", top: "36px" }}
-        />
-        <UploadSchema
-          attached={false}
-          schema={schema}
-          codeId={codeId}
-          codeHash={codeHash}
-        />
       </Flex>
     </Flex>
-  </Flex>
-);
+  );
+};
diff --git a/src/lib/components/json-schema/view/ViewSchemaModal.tsx b/src/lib/components/json-schema/view/ViewSchemaModal.tsx
index a88428606..7efa8b201 100644
--- a/src/lib/components/json-schema/view/ViewSchemaModal.tsx
+++ b/src/lib/components/json-schema/view/ViewSchemaModal.tsx
@@ -19,7 +19,7 @@ import {
 import { capitalize } from "lodash";
 import { useCallback } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackUseViewJSON, track } from "lib/amplitude";
 import { AppLink } from "lib/components/AppLink";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
@@ -65,26 +65,17 @@ export const ViewSchemaModal = ({
   isIcon = false,
 }: ViewSchemaModalProps) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
-  const { track } = useTrack();
 
   const handleView = useCallback(() => {
     onOpen();
     track(AmpEvent.USE_VIEW_ATTACHED_JSON, { tab: ALL_TABS[0] });
-  }, [onOpen, track]);
+  }, [onOpen]);
 
-  const trackTabOnChange = useCallback(
-    (index: number) => {
-      track(AmpEvent.USE_VIEW_ATTACHED_JSON, {
-        tab: ALL_TABS[index],
-      });
-    },
-    [track]
-  );
-
-  const trackUseViewJsonInCodeDetail = useCallback(
-    () => track(AmpEvent.USE_VIEW_JSON_IN_CODE_DETAIL),
-    [track]
-  );
+  const trackTabOnChange = (index: number) => {
+    track(AmpEvent.USE_VIEW_ATTACHED_JSON, {
+      tab: ALL_TABS[index],
+    });
+  };
 
   return (
     <>
@@ -122,7 +113,7 @@ export const ViewSchemaModal = ({
             </Flex>
             <AppLink
               href={`/codes/${codeId}/schema`}
-              onClick={trackUseViewJsonInCodeDetail}
+              onClick={() => trackUseViewJSON("code_details_schema")}
             >
               <Button mr={8} gap={1} size="sm" variant="outline-gray">
                 <CustomIcon name="view" />
diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index 5e9b68882..53ffc8d13 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -3,7 +3,7 @@ import dynamic from "next/dynamic";
 import { useMemo, useState } from "react";
 
 import { CopyButton } from "../copy";
-import { useTrack } from "lib/amplitude";
+import { trackUseExpand } from "lib/amplitude";
 import { jsonLineCount, jsonValidate } from "lib/utils";
 
 import { ViewFullMsgButton } from "./ViewFullMsgButton";
@@ -36,7 +36,6 @@ const JsonReadOnly = ({
   amptrackSection,
 }: JsonReadOnlyProps) => {
   const [viewFull, setViewFull] = useState(false);
-  const { trackUseExpand } = useTrack();
 
   const isJsonValid = useMemo(() => {
     return jsonValidate(text) === null || text.length === 0;
diff --git a/src/lib/components/links/GitHubLink.tsx b/src/lib/components/links/GitHubLink.tsx
index 3ecf7324f..e71c54d68 100644
--- a/src/lib/components/links/GitHubLink.tsx
+++ b/src/lib/components/links/GitHubLink.tsx
@@ -1,14 +1,13 @@
 import { Flex, Text } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
-import { useTrack } from "lib/amplitude";
+import { trackSocial } from "lib/amplitude";
 
 interface GitHubLinkProps {
   github: string;
 }
 
 export const GitHubLink = ({ github }: GitHubLinkProps) => {
-  const { trackSocial } = useTrack();
   const [, , , org, repo] = github.split("/");
   return (
     <Flex gap={{ base: 0, md: 2 }} direction={{ base: "column", md: "row" }}>
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 3b671ee47..f5ec56487 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -18,7 +18,7 @@ import { useCallback } from "react";
 
 import type { IconKeys } from "../icon";
 import { CustomIcon } from "../icon";
-import { useTrack } from "lib/amplitude";
+import { trackUseOtherModal } from "lib/amplitude";
 
 export interface ActionModalProps {
   icon?: IconKeys;
@@ -57,7 +57,6 @@ export function ActionModal({
   closeOnOverlayClick = true,
 }: ActionModalProps) {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { trackUseOtherModal } = useTrack();
 
   const handleOnMain = useCallback(() => {
     mainAction();
diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
index cffde936c..014fa5c80 100644
--- a/src/lib/components/modal/MoveCodeSnippet.tsx
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -21,7 +21,7 @@ import AceEditor from "react-ace";
 import { CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
 import { CURR_THEME } from "env";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCelatoneApp,
   useCurrentChain,
@@ -72,7 +72,6 @@ const MoveCodeSnippet = ({
   const {
     chain: { daemon_name: daemonName },
   } = useCurrentChain();
-  const { track } = useTrack();
   const lcdEndpoint = useLCDEndpoint();
   const rpcEndpoint = useRPCEndpoint();
   const {
diff --git a/src/lib/components/modal/RemoveSchemaModal.tsx b/src/lib/components/modal/RemoveSchemaModal.tsx
index b6d76c967..57f57181d 100644
--- a/src/lib/components/modal/RemoveSchemaModal.tsx
+++ b/src/lib/components/modal/RemoveSchemaModal.tsx
@@ -1,7 +1,7 @@
 import { useToast, Text } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import { useSchemaStore } from "lib/providers/store";
 
@@ -19,7 +19,6 @@ export function RemoveSchemaModal({
   trigger,
 }: RemoveSchemaModalProps) {
   const { deleteSchema } = useSchemaStore();
-  const { track } = useTrack();
 
   const toast = useToast();
   const handleRemove = () => {
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index ef6cd3a96..dfc91f306 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -18,7 +18,7 @@ import { ExplorerLink } from "../ExplorerLink";
 import type { IconKeys } from "../icon";
 import { CustomIcon } from "../icon";
 import { Tooltip } from "../Tooltip";
-import { useTrack } from "lib/amplitude";
+import { trackUseUnsupportedToken } from "lib/amplitude";
 import { useGetAddressType, useGetAddressTypeByLength } from "lib/app-provider";
 import type { AddressReturnType } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
@@ -147,7 +147,6 @@ export const UnsupportedTokensModal = ({
 }: UnsupportedTokensModalProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const getAddressTypeByLength = useGetAddressTypeByLength();
-  const { trackUseUnsupportedToken } = useTrack();
 
   if (unsupportedAssets.length === 0) return null;
 
diff --git a/src/lib/components/modal/WasmCodeSnippet.tsx b/src/lib/components/modal/WasmCodeSnippet.tsx
index 3fe879471..da506635c 100644
--- a/src/lib/components/modal/WasmCodeSnippet.tsx
+++ b/src/lib/components/modal/WasmCodeSnippet.tsx
@@ -21,7 +21,7 @@ import AceEditor from "react-ace";
 import { CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
 import { CURR_THEME } from "env";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCelatoneApp,
   useCurrentChain,
@@ -59,7 +59,6 @@ const WasmCodeSnippet = ({
   const {
     chain: { chain_name: chainName, daemon_name: daemonName },
   } = useCurrentChain();
-  const { track } = useTrack();
   const isDisabled = !contractAddress || !message.length;
   const lcdEndpoint = useLCDEndpoint();
   const rpcEndpoint = useRPCEndpoint();
diff --git a/src/lib/components/modal/code/CodeDetailsTemplate.tsx b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
index 1d1be6c53..82b41be2a 100644
--- a/src/lib/components/modal/code/CodeDetailsTemplate.tsx
+++ b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
@@ -2,7 +2,7 @@ import { Flex, Text, useToast } from "@chakra-ui/react";
 import { useCallback, useEffect, useState } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCelatoneApp, useGetAddressType } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TextInput } from "lib/components/forms";
@@ -31,7 +31,6 @@ export const CodeDetailsTemplateModal = ({
   triggerElement,
   icon = "bookmark-solid",
 }: CodeDetailsTemplateModalProps) => {
-  const { track } = useTrack();
   const { constants } = useCelatoneApp();
   const { saveNewCode, updateCodeInfo } = useCodeStore();
   const toast = useToast();
@@ -69,7 +68,6 @@ export const CodeDetailsTemplateModal = ({
     title,
     toast,
     updateCodeInfo,
-    track,
   ]);
 
   // fix prefilling blank space problem (e.g. name saved as "     ")
diff --git a/src/lib/components/modal/code/RemoveCode.tsx b/src/lib/components/modal/code/RemoveCode.tsx
index 68b2cdb73..11f6efe62 100644
--- a/src/lib/components/modal/code/RemoveCode.tsx
+++ b/src/lib/components/modal/code/RemoveCode.tsx
@@ -2,7 +2,7 @@ import { useToast, Text, chakra, IconButton } from "@chakra-ui/react";
 import { useCallback } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import { useCodeStore } from "lib/providers/store";
 import { getNameAndDescriptionDefault, shortenName } from "lib/utils";
@@ -33,7 +33,6 @@ export function RemoveCodeModal({
   ),
 }: RemoveCodeModalProps) {
   const { removeSavedCode } = useCodeStore();
-  const { track } = useTrack();
   const toast = useToast();
 
   const handleRemove = useCallback(() => {
@@ -51,7 +50,7 @@ export function RemoveCodeModal({
       position: "bottom-right",
       icon: <CustomIcon name="check-circle-solid" color="success.main" />,
     });
-  }, [codeId, name, removeSavedCode, toast, track]);
+  }, [codeId, name, removeSavedCode, toast]);
 
   return (
     <ActionModal
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index 77d6e1450..8c0fa7af9 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
@@ -26,7 +26,6 @@ interface SaveNewCodeModalProps {
 
 export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   const { address } = useCurrentChain();
-  const { track } = useTrack();
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
 
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index d2cd30257..3e3635974 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { ListSelection } from "lib/components/ListSelection";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
@@ -18,7 +18,6 @@ interface AddToOtherListModalProps {
 export const AddToOtherListModal = observer(
   ({ contractLocalInfo, triggerElement }: AddToOtherListModalProps) => {
     const [contractLists, setContractLists] = useState<LVPair[]>([]);
-    const { track } = useTrack();
 
     const handleSave = useHandleContractSave({
       title: "Action Complete!",
diff --git a/src/lib/components/modal/contract/ClearAdmin.tsx b/src/lib/components/modal/contract/ClearAdmin.tsx
index c1ea80fbd..68ac5afab 100644
--- a/src/lib/components/modal/contract/ClearAdmin.tsx
+++ b/src/lib/components/modal/contract/ClearAdmin.tsx
@@ -2,7 +2,7 @@ import { Text } from "@chakra-ui/react";
 import { useCallback } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useClearAdminTx } from "lib/app-provider";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import type { ContractAddr } from "lib/types";
@@ -16,7 +16,6 @@ export const ClearAdminModal = ({
   contractAddress,
   triggerElement,
 }: ClearAdminModalProps) => {
-  const { track } = useTrack();
   const { broadcast } = useTxBroadcast();
   const clearAdminTx = useClearAdminTx(contractAddress);
 
@@ -24,7 +23,7 @@ export const ClearAdminModal = ({
     track(AmpEvent.ACTION_ADMIN_CLEAR);
     const stream = await clearAdminTx({});
     if (stream) broadcast(stream);
-  }, [broadcast, clearAdminTx, track]);
+  }, [broadcast, clearAdminTx]);
 
   return (
     <ActionModal
diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
index 2a635ecc5..8548eea62 100644
--- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
+++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
@@ -3,7 +3,7 @@ import { Flex, Text } from "@chakra-ui/react";
 import { useCallback, useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { IconKeys } from "lib/components/icon";
 import { ActionModal } from "lib/components/modal/ActionModal";
@@ -32,7 +32,6 @@ export const ContractDetailsTemplateModal = ({
   defaultList = [],
   isSave = false,
 }: ContractDetailsTemplateModalProps) => {
-  const { track } = useTrack();
   const defaultValues = useMemo(() => {
     return {
       name: contractLocalInfo.name ?? "",
diff --git a/src/lib/components/modal/contract/RemoveContract.tsx b/src/lib/components/modal/contract/RemoveContract.tsx
index 14ec4b3b9..4cf9e94fb 100644
--- a/src/lib/components/modal/contract/RemoveContract.tsx
+++ b/src/lib/components/modal/contract/RemoveContract.tsx
@@ -1,7 +1,7 @@
 import type { MenuItemProps } from "@chakra-ui/react";
 import { MenuItem, Text, Highlight } from "@chakra-ui/react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { ActionModal } from "lib/components/modal/ActionModal";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
 import type { ContractLocalInfo } from "lib/stores/contract";
@@ -19,7 +19,6 @@ export function RemoveContractModal({
   contractRemovalInfo,
   menuItemProps,
 }: RemoveContractModalProps) {
-  const { track } = useTrack();
   const displayName = contractLocalInfo.name
     ? contractLocalInfo.name
     : truncate(contractLocalInfo.contractAddress);
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index ab0601433..82fef803d 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import { ActionModal } from "../ActionModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useExampleAddresses, useValidateAddress } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { ControllerInput } from "lib/components/forms";
@@ -35,7 +35,6 @@ export function SaveNewContractModal({
   list,
   buttonProps,
 }: SaveNewContractModalProps) {
-  const { track } = useTrack();
   const { getContractLocalInfo } = useContractStore();
   const { validateContractAddress } = useValidateAddress();
 
diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx
index 95a7c1fe1..5ae9bee56 100644
--- a/src/lib/components/modal/list/CreateNewList.tsx
+++ b/src/lib/components/modal/list/CreateNewList.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import type { ReactNode } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCelatoneApp } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms";
@@ -28,7 +28,6 @@ export function CreateNewListModal({
   onCreate,
   onClose,
 }: CreateNewListModalProps) {
-  const { track } = useTrack();
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
   const userKey = useUserKey();
@@ -86,7 +85,6 @@ export function CreateNewListModal({
     userKey,
     listName,
     resetListName,
-    track,
     onCreate,
     onClose,
     toast,
diff --git a/src/lib/components/modal/list/EditListName.tsx b/src/lib/components/modal/list/EditListName.tsx
index e5f648d93..c6b82600c 100644
--- a/src/lib/components/modal/list/EditListName.tsx
+++ b/src/lib/components/modal/list/EditListName.tsx
@@ -2,7 +2,7 @@ import type { MenuItemProps } from "@chakra-ui/react";
 import { MenuItem, useToast } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCelatoneApp, useInternalNavigate } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms/TextInput";
@@ -23,7 +23,6 @@ export function EditListNameModal({
   menuItemProps,
   reroute = false,
 }: EditListNameModalProps) {
-  const { track } = useTrack();
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
   const userKey = useUserKey();
diff --git a/src/lib/components/modal/list/RemoveList.tsx b/src/lib/components/modal/list/RemoveList.tsx
index 4b2aa2751..86283ec2d 100644
--- a/src/lib/components/modal/list/RemoveList.tsx
+++ b/src/lib/components/modal/list/RemoveList.tsx
@@ -2,7 +2,7 @@ import type { MenuItemProps } from "@chakra-ui/react";
 import { MenuItem, useToast, Text } from "@chakra-ui/react";
 
 import { ActionModal } from "../ActionModal";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { useUserKey } from "lib/hooks";
@@ -18,7 +18,6 @@ interface RemoveListModalProps {
 export function RemoveListModal({ list, menuItemProps }: RemoveListModalProps) {
   const userKey = useUserKey();
   const { removeList } = useContractStore();
-  const { track } = useTrack();
   const toast = useToast();
   const navigate = useInternalNavigate();
   const handleRemove = () => {
diff --git a/src/lib/components/pagination/Next.tsx b/src/lib/components/pagination/Next.tsx
index 5e529cf70..9cb380c6c 100644
--- a/src/lib/components/pagination/Next.tsx
+++ b/src/lib/components/pagination/Next.tsx
@@ -2,7 +2,7 @@ import type { ButtonProps } from "@chakra-ui/react";
 import { Button } from "@chakra-ui/react";
 import { useContext } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUsePaginationNavigate } from "lib/amplitude";
 
 import { PaginatorContext } from "./PaginatorProvider";
 
@@ -13,7 +13,6 @@ interface NextProps extends ButtonProps {
 
 export const Next = ({ children, pageSize, ...buttonProps }: NextProps) => {
   const { actions, state } = useContext(PaginatorContext);
-  const { trackUsePaginationNavigate } = useTrack();
 
   const { changePage } = actions;
   const { currentPage, pagesQuantity, isDisabled } = state;
diff --git a/src/lib/components/pagination/PageDetail.tsx b/src/lib/components/pagination/PageDetail.tsx
index 21df09d1d..a45590d51 100644
--- a/src/lib/components/pagination/PageDetail.tsx
+++ b/src/lib/components/pagination/PageDetail.tsx
@@ -2,7 +2,7 @@ import { Flex, Select, Text } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { CustomIcon } from "../icon";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 
 interface PageDetailProps {
   pageSize: number;
@@ -18,46 +18,42 @@ export const PageDetail = ({
   lastDataInPage,
   totalData,
   onPageSizeChange,
-}: PageDetailProps) => {
-  const { track } = useTrack();
-
-  return (
-    <Flex
-      align="center"
-      justify="center"
-      direction={{ base: "column", md: "row" }}
-      gap={2}
-    >
-      <Flex align="center" justify="center">
-        <Text variant="body3" color="text.dark" minW="fit-content">
-          Items per page:
-        </Text>
-        <Select
-          border="none"
-          minW="70px"
-          w="fit-content"
-          h="fit-content"
-          fontSize="12px"
-          focusBorderColor="none"
-          cursor="pointer"
-          value={pageSize}
-          onChange={(e) => {
-            track(AmpEvent.USE_PAGINATION_PAGE_SIZE, {
-              pageSize: e.target.value,
-            });
-            onPageSizeChange(e);
-          }}
-        >
-          <option value="10">10</option>
-          <option value="20">20</option>
-          <option value="50">50</option>
-          <option value="100">100</option>
-          <CustomIcon name="chevron-down" color="gray.600" />
-        </Select>
-      </Flex>
-      <Text variant="body3" minW="fit-content" ml={7}>
-        {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()} items`}
+}: PageDetailProps) => (
+  <Flex
+    align="center"
+    justify="center"
+    direction={{ base: "column", md: "row" }}
+    gap={2}
+  >
+    <Flex align="center" justify="center">
+      <Text variant="body3" color="text.dark" minW="fit-content">
+        Items per page:
       </Text>
+      <Select
+        border="none"
+        minW="70px"
+        w="fit-content"
+        h="fit-content"
+        fontSize="12px"
+        focusBorderColor="none"
+        cursor="pointer"
+        value={pageSize}
+        onChange={(e) => {
+          track(AmpEvent.USE_PAGINATION_PAGE_SIZE, {
+            pageSize: e.target.value,
+          });
+          onPageSizeChange(e);
+        }}
+      >
+        <option value="10">10</option>
+        <option value="20">20</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+        <CustomIcon name="chevron-down" color="gray.600" />
+      </Select>
     </Flex>
-  );
-};
+    <Text variant="body3" minW="fit-content" ml={7}>
+      {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()} items`}
+    </Text>
+  </Flex>
+);
diff --git a/src/lib/components/pagination/Previous.tsx b/src/lib/components/pagination/Previous.tsx
index 3a86bf611..2df7953b5 100644
--- a/src/lib/components/pagination/Previous.tsx
+++ b/src/lib/components/pagination/Previous.tsx
@@ -3,7 +3,7 @@ import { Button } from "@chakra-ui/react";
 import { useContext } from "react";
 import type { ReactNode } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUsePaginationNavigate } from "lib/amplitude";
 
 import { PaginatorContext } from "./PaginatorProvider";
 
@@ -17,7 +17,6 @@ export const Previous = ({
   ...buttonProps
 }: PreviousProps) => {
   const { actions, state } = useContext(PaginatorContext);
-  const { trackUsePaginationNavigate } = useTrack();
 
   const { changePage } = actions;
   const { currentPage, isDisabled } = state;
diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
index 2918c9104..184582051 100644
--- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx
+++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
@@ -22,7 +22,7 @@ import { FilterByPermission } from "../forms";
 import { CustomIcon } from "../icon";
 import InputWithIcon from "../InputWithIcon";
 import { MySavedCodesTable, MyStoredCodesTable } from "../table";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import type { PermissionFilterValue } from "lib/hooks";
 import { useMyCodesData } from "lib/model/code";
 
@@ -55,7 +55,6 @@ export const CodeSelectDrawerButton = ({
   // ------------------------------------------//
   // ---------------DEPENDENCIES---------------//
   // ------------------------------------------//
-  const { track } = useTrack();
   const {
     storedCodesCount,
     storedCodes: stored,
diff --git a/src/lib/components/select-code/CodeSelectSection.tsx b/src/lib/components/select-code/CodeSelectSection.tsx
index 7ad857e91..fa617b9f2 100644
--- a/src/lib/components/select-code/CodeSelectSection.tsx
+++ b/src/lib/components/select-code/CodeSelectSection.tsx
@@ -2,7 +2,7 @@ import { Flex, Radio, RadioGroup } from "@chakra-ui/react";
 import { useState } from "react";
 import type { Control, FieldPath, FieldValues } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { ControllerInput } from "lib/components/forms";
 import type { FormStatus } from "lib/components/forms";
 import type { LCDCodeInfoSuccessCallback } from "lib/services/codeService";
@@ -29,7 +29,6 @@ export const CodeSelectSection = <T extends FieldValues>({
   setCodeHash,
   status,
 }: CodeSelectSectionProps<T>) => {
-  const { track } = useTrack();
   const [method, setMethod] = useState<"select-existing" | "fill-manually">(
     "select-existing"
   );
diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx
index 494727bbd..0cc8da772 100644
--- a/src/lib/components/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/select-contract/SelectContractAdmin.tsx
@@ -10,7 +10,7 @@ import {
   DrawerBody,
 } from "@chakra-ui/react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCurrentChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { ADMIN_SPECIAL_SLUG } from "lib/data";
@@ -31,7 +31,6 @@ export const SelectContractAdmin = ({
   notSelected,
   onContractSelect,
 }: SelectContractAdminProps) => {
-  const { track } = useTrack();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { address } = useCurrentChain();
   const { getContractLocalInfo } = useContractStore();
diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
index 26c66aa49..6962c9618 100644
--- a/src/lib/components/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -19,7 +19,7 @@ import { useState } from "react";
 import type { KeyboardEvent } from "react";
 
 import { CustomIcon } from "../icon";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
@@ -49,7 +49,6 @@ export const SelectContractInstantiator = ({
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [listSlug, setListSlug] = useState("");
   const { validateContractAddress } = useValidateAddress();
-  const { track } = useTrack();
 
   const [searchContract, setSearchContract] = useState<ContractAddr>(
     "" as ContractAddr
diff --git a/src/lib/components/state/InvalidState.tsx b/src/lib/components/state/InvalidState.tsx
index 240af3544..ad19a113b 100644
--- a/src/lib/components/state/InvalidState.tsx
+++ b/src/lib/components/state/InvalidState.tsx
@@ -2,7 +2,7 @@ import { Flex, Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackInvalidState } from "lib/amplitude";
 
 import { StateImage } from "./StateImage";
 
@@ -12,11 +12,10 @@ interface InvalidStateProps {
 
 export const InvalidState = ({ title }: InvalidStateProps) => {
   const router = useRouter();
-  const { trackInvalidState } = useTrack();
 
   useEffect(() => {
     if (router.isReady) trackInvalidState(title);
-  }, [router.isReady, title, trackInvalidState]);
+  }, [router.isReady, title]);
 
   return (
     <Flex
diff --git a/src/lib/components/table/ViewMore.tsx b/src/lib/components/table/ViewMore.tsx
index 65584acdd..ad7775133 100644
--- a/src/lib/components/table/ViewMore.tsx
+++ b/src/lib/components/table/ViewMore.tsx
@@ -1,30 +1,27 @@
 import { Button, Flex } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 
 interface ViewMoreProps {
   onClick: () => void;
 }
 
-export const ViewMore = ({ onClick }: ViewMoreProps) => {
-  const { track } = useTrack();
-  return (
-    <Flex w="full" justifyContent="center" textAlign="center">
-      <Button
-        w="full"
-        borderRadius="0"
-        minH="64px"
-        variant="ghost-gray"
-        gap={2}
-        onClick={() => {
-          track(AmpEvent.USE_VIEW_MORE);
-          onClick();
-        }}
-      >
-        View More
-        <CustomIcon name="chevron-right" boxSize="12px" />
-      </Button>
-    </Flex>
-  );
-};
+export const ViewMore = ({ onClick }: ViewMoreProps) => (
+  <Flex w="full" justifyContent="center" textAlign="center">
+    <Button
+      w="full"
+      borderRadius="0"
+      minH="64px"
+      variant="ghost-gray"
+      gap={2}
+      onClick={() => {
+        track(AmpEvent.USE_VIEW_MORE);
+        onClick();
+      }}
+    >
+      View More
+      <CustomIcon name="chevron-right" boxSize="12px" />
+    </Button>
+  </Flex>
+);
diff --git a/src/lib/components/table/codes/CodeNameCell.tsx b/src/lib/components/table/codes/CodeNameCell.tsx
index 03304e0f8..efed7ddb3 100644
--- a/src/lib/components/table/codes/CodeNameCell.tsx
+++ b/src/lib/components/table/codes/CodeNameCell.tsx
@@ -1,7 +1,7 @@
 import { useToast } from "@chakra-ui/react";
 
 import { EditableCell } from "../EditableCell";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCelatoneApp } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { useCodeStore } from "lib/providers/store";
@@ -16,7 +16,6 @@ export const CodeNameCell = ({
   code,
   isReadOnly = false,
 }: CodeNameCellProps) => {
-  const { track } = useTrack();
   const { constants } = useCelatoneApp();
   const toast = useToast();
   const { updateCodeInfo } = useCodeStore();
diff --git a/src/lib/components/table/contracts/ContractNameCell.tsx b/src/lib/components/table/contracts/ContractNameCell.tsx
index b10fba429..59476482d 100644
--- a/src/lib/components/table/contracts/ContractNameCell.tsx
+++ b/src/lib/components/table/contracts/ContractNameCell.tsx
@@ -1,5 +1,5 @@
 import { EditableCell } from "../EditableCell";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCelatoneApp } from "lib/app-provider";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
 import type { ContractLocalInfo } from "lib/stores/contract";
@@ -13,7 +13,6 @@ export const ContractNameCell = ({
   contractLocalInfo,
   isReadOnly = false,
 }: ContractNameCellProps) => {
-  const { track } = useTrack();
   const { constants } = useCelatoneApp();
   const onSave = useHandleContractSave({
     title: "Changed name successfully!",
@@ -22,6 +21,7 @@ export const ContractNameCell = ({
     label: contractLocalInfo.label,
     actions: () => track(AmpEvent.USE_QUICK_EDIT_CONTRACT),
   });
+
   return (
     <EditableCell
       initialValue={contractLocalInfo.name}
diff --git a/src/lib/components/table/contracts/EditTags.tsx b/src/lib/components/table/contracts/EditTags.tsx
index 76ba73b3d..9d6cd30ee 100644
--- a/src/lib/components/table/contracts/EditTags.tsx
+++ b/src/lib/components/table/contracts/EditTags.tsx
@@ -1,7 +1,7 @@
 import { Flex, FormControl, Box, Text } from "@chakra-ui/react";
 import { useState } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { ActionModal } from "lib/components/modal";
@@ -15,7 +15,6 @@ interface EditTagsProps {
 }
 
 export function EditTags({ contractLocalInfo }: EditTagsProps) {
-  const { track } = useTrack();
   const [tagResult, setTagResult] = useState<string[]>(
     getTagsDefault(contractLocalInfo.tags)
   );
diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index c4489b6b6..4c71295f2 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -2,7 +2,7 @@ import type { DividerProps, GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
 import { TableRow, TableRowFreeze } from "../tableComponents";
-import { useTrack } from "lib/amplitude";
+import { trackMintScan } from "lib/amplitude";
 import { useBaseApiRoute, useCelatoneApp } from "lib/app-provider";
 import { ExplorerLink, getNavigationUrl } from "lib/components/ExplorerLink";
 import { StopPropagationBox } from "lib/components/StopPropagationBox";
@@ -31,7 +31,6 @@ export const ProposalsTableRow = ({
     chainConfig: { explorerLink },
   } = useCelatoneApp();
   const lcdEndpoint = useBaseApiRoute("rest");
-  const { trackMintScan } = useTrack();
 
   // TODO - Revisit split columnsWidth
   const columnsWidth = templateColumns?.toString().split(" ");
diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index 0e4f1b086..bdec4a7a1 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -5,7 +5,7 @@ import { useController, useFieldArray, useWatch } from "react-hook-form";
 
 import { AddressInput } from "../AddressInput";
 import { AssignMe } from "../AssignMe";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackUseInstantiatePermission, track } from "lib/amplitude";
 import { useCelatoneApp, useCurrentChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import type { Addr, UploadSectionState } from "lib/types";
@@ -34,7 +34,6 @@ export const InstantiatePermissionRadio = ({
   setValue,
   trigger,
 }: InstantiatePermissionRadioProps) => {
-  const { track, trackUseInstantiatePermission } = useTrack();
   const { address: walletAddress } = useCurrentChain();
   const {
     chainConfig: {
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 9a85f6db3..55cbae2a3 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -5,7 +5,7 @@ import { useForm } from "react-hook-form";
 
 import { DropZone } from "../dropzone";
 import { ControllerInput } from "../forms";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import type {
   UploadSucceedCallback,
   UploadTxInternalResult,
@@ -48,7 +48,6 @@ export const UploadSection = ({
   onComplete,
   isMigrate = false,
 }: UploadSectionProps) => {
-  const { track } = useTrack();
   const {
     constants,
     chainConfig: {
@@ -175,7 +174,6 @@ export const UploadSection = ({
   }, [
     address,
     postUploadTx,
-    track,
     wasmFile,
     addresses,
     permission,
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index e3c0f2aa5..ccb964ca1 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -3,7 +3,7 @@ import { Flex, Text, Image } from "@chakra-ui/react";
 import Link from "next/link";
 
 import { CURR_THEME } from "env";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackSocial, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import type { IconKeys } from "lib/components/icon";
 
@@ -65,60 +65,53 @@ const SocialMenuRender = ({
 }: {
   isThemed?: boolean;
   iconSize: IconProps["boxSize"];
-}) => {
-  const { trackSocial } = useTrack();
-  return (
-    <>
-      {(isThemed ? themedSocial : socialMenu).map((item) => (
-        <Link
-          key={`${isThemed ? "themed" : "social"}-${item.slug}`}
-          href={item.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={() => {
-            trackSocial(item.url);
-          }}
+}) => (
+  <>
+    {(isThemed ? themedSocial : socialMenu).map((item) => (
+      <Link
+        key={`${isThemed ? "themed" : "social"}-${item.slug}`}
+        href={item.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={() => {
+          trackSocial(item.url);
+        }}
+      >
+        <Flex
+          borderRadius="8px"
+          transition="all 0.25s ease-in-out"
+          _hover={{ backgroundColor: "gray.800" }}
         >
-          <Flex
-            borderRadius="8px"
-            transition="all 0.25s ease-in-out"
-            _hover={{ backgroundColor: "gray.800" }}
-          >
-            <CustomIcon name={item.icon} boxSize={iconSize} color="gray.600" />
-          </Flex>
-        </Link>
-      ))}
-    </>
-  );
-};
-
-const AllesFeedback = () => {
-  const { track } = useTrack();
+          <CustomIcon name={item.icon} boxSize={iconSize} color="gray.600" />
+        </Flex>
+      </Link>
+    ))}
+  </>
+);
 
-  return (
-    <Link
-      href="https://feedback.alleslabs.com"
-      target="_blank"
-      rel="noopener noreferrer"
-      onClick={() => track(AmpEvent.FEEDBACK)}
+const AllesFeedback = () => (
+  <Link
+    href="https://feedback.alleslabs.com"
+    target="_blank"
+    rel="noopener noreferrer"
+    onClick={() => track(AmpEvent.FEEDBACK)}
+  >
+    <Flex
+      gap={1}
+      pr={2}
+      pl={1}
+      borderRadius={8}
+      align="center"
+      _hover={{ background: "gray.800" }}
+      transition="all 0.25s ease-in-out"
     >
-      <Flex
-        gap={1}
-        pr={2}
-        pl={1}
-        borderRadius={8}
-        align="center"
-        _hover={{ background: "gray.800" }}
-        transition="all 0.25s ease-in-out"
-      >
-        <CustomIcon name="feedback" color="gray.600" />
-        <Text variant="body3" color="text.dark">
-          Feedback
-        </Text>
-      </Flex>
-    </Link>
-  );
-};
+      <CustomIcon name="feedback" color="gray.600" />
+      <Text variant="body3" color="text.dark">
+        Feedback
+      </Text>
+    </Flex>
+  </Link>
+);
 
 const IconLink = ({
   href,
@@ -130,51 +123,46 @@ const IconLink = ({
   icon: IconKeys;
   text1: string;
   text2: string;
-}) => {
-  const { track } = useTrack();
-
-  return (
-    <Link
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      onClick={() => track(AmpEvent.ALLESLABS)}
+}) => (
+  <Link
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    onClick={() => track(AmpEvent.ALLESLABS)}
+  >
+    <Flex
+      gap={1}
+      mr={{ base: 6, md: 0 }}
+      align="center"
+      _hover={{
+        "& svg": {
+          opacity: 1,
+        },
+      }}
     >
-      <Flex
-        gap={1}
-        mr={{ base: 6, md: 0 }}
-        align="center"
-        _hover={{
-          "& svg": {
-            opacity: 1,
-          },
-        }}
-      >
-        <CustomIcon
-          name={icon}
-          opacity={0}
-          transition="opacity .25s ease-in-out"
-        />
-        <Text variant="body3" color="text.dark">
-          {text1}
-          <Text
-            as="span"
-            ml={1}
-            color="secondary.main"
-            transition="all 0.25s ease-in-out"
-            _hover={{ color: "secondary.light" }}
-          >
-            {text2}
-          </Text>
+      <CustomIcon
+        name={icon}
+        opacity={0}
+        transition="opacity .25s ease-in-out"
+      />
+      <Text variant="body3" color="text.dark">
+        {text1}
+        <Text
+          as="span"
+          ml={1}
+          color="secondary.main"
+          transition="all 0.25s ease-in-out"
+          _hover={{ color: "secondary.light" }}
+        >
+          {text2}
         </Text>
-      </Flex>
-    </Link>
-  );
-};
+      </Text>
+    </Flex>
+  </Link>
+);
 
 const Footer = () => {
   const isThemed = CURR_THEME.footer;
-
   return isThemed ? (
     <Flex
       as="footer"
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 5565ce4cf..e0584be39 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -10,7 +10,7 @@ import {
 
 import { CHAIN_CONFIGS } from "config/chain";
 import { CURR_THEME } from "env";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCelatoneApp, useSelectChain } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { FaucetBtn } from "lib/components/button";
@@ -20,7 +20,6 @@ import { WalletSection } from "lib/components/Wallet";
 import Searchbar from "./Searchbar";
 
 const Header = () => {
-  const { track } = useTrack();
   const { availableChainIds, currentChainId } = useCelatoneApp();
   const selectChain = useSelectChain();
 
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 2c1234831..a7e4f0d6f 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -22,7 +22,7 @@ import { useCallback, useRef, useState } from "react";
 import type { ChangeEvent, KeyboardEvent } from "react";
 
 import { CURR_THEME } from "env";
-import { useTrack } from "lib/amplitude";
+import { trackUseMainSearch } from "lib/amplitude";
 import {
   useCelatoneApp,
   useInternalNavigate,
@@ -241,7 +241,6 @@ const Searchbar = () => {
   const [displayResults, setDisplayResults] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const [cursor, setCursor] = useState<number>();
-  const { trackUseMainSearch } = useTrack();
 
   const {
     chainConfig: {
@@ -282,7 +281,7 @@ const Searchbar = () => {
         setKeyword("");
       }
     },
-    [trackUseMainSearch, navigate, metadata.icns.address, keyword]
+    [navigate, metadata.icns.address, keyword]
   );
 
   const handleOnKeyEnter = useCallback(
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index a01df1e6d..ac93107e2 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -1,7 +1,6 @@
 import { Flex, Text } from "@chakra-ui/react";
-import { useCallback } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { usePoolConfig, useGovConfig, useWasmConfig } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import type { IconKeys } from "lib/components/icon";
@@ -18,7 +17,6 @@ const SubHeader = () => {
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
   const poolConfig = usePoolConfig({ shouldRedirect: false });
   const govConfig = useGovConfig({ shouldRedirect: false });
-  const { track } = useTrack();
 
   const subHeaderMenu: SubHeaderMenuInfo[] = [
     { name: "Overview", slug: "/", icon: "home" },
@@ -53,12 +51,9 @@ const SubHeader = () => {
 
   const activeColor = "primary.light";
 
-  const trackOnClick = useCallback(
-    (tab: string) => {
-      track(AmpEvent.USE_TOPBAR, { tab });
-    },
-    [track]
-  );
+  const trackOnClick = (tab: string) => {
+    track(AmpEvent.USE_TOPBAR, { tab });
+  };
 
   return (
     <Flex px={6} alignItems="center" h="full" justifyContent="space-between">
diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index 403be8cae..8cbabc6f9 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -19,7 +19,7 @@ import {
 
 import type { MenuInfo } from "../navbar/type";
 import { CHAIN_CONFIGS } from "config/chain";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCelatoneApp,
   useMoveConfig,
@@ -34,7 +34,6 @@ import { useIsCurrentPage } from "lib/hooks";
 import { usePublicProjectStore } from "lib/providers/store";
 
 export const NavDrawer = () => {
-  const { track } = useTrack();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { currentChainId, availableChainIds } = useCelatoneApp();
   const isCurrentPage = useIsCurrentPage();
diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx
index 731681938..2d0836ce7 100644
--- a/src/lib/layout/navbar/Collapse.tsx
+++ b/src/lib/layout/navbar/Collapse.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, IconButton, Image } from "@chakra-ui/react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
@@ -59,7 +59,6 @@ export const CollapseNavMenu = ({
   setIsExpand,
 }: NavMenuProps) => {
   const isMobile = useMobile();
-  const { track } = useTrack();
 
   return (
     <Box overflowY="auto" overflowX="hidden">
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index a5c0c3fba..50f5edd0c 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -11,11 +11,11 @@ import {
   AccordionPanel,
 } from "@chakra-ui/react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
+import { useNavContext } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
-import { useLocalStorage } from "lib/hooks";
 
 import type { MenuInfo, NavMenuProps, SubmenuInfo } from "./type";
 
@@ -38,7 +38,7 @@ const NavInfo = ({ submenu, isCurrentPage }: NavInfoProps) => (
     bgColor={isCurrentPage(submenu.slug) ? "gray.800" : "transparent"}
     borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"}
   >
-    <Flex
+    <Box
       opacity={isCurrentPage(submenu.slug) ? 1 : 0}
       width="3px"
       height="20px"
@@ -72,34 +72,30 @@ interface SubMenuProps {
   isCurrentPage: (slug: string) => boolean;
 }
 
-const SubMenuRender = ({ isCurrentPage, submenu }: SubMenuProps) => {
-  const { track } = useTrack();
-
-  return (
-    <>
-      {submenu.map((subitem) =>
-        subitem.isDisable ? (
-          <Tooltip key={subitem.slug} label={subitem.tooltipText} maxW="240px">
-            <div>
-              <NavInfo submenu={subitem} isCurrentPage={isCurrentPage} />
-            </div>
-          </Tooltip>
-        ) : (
-          <AppLink
-            href={subitem.slug}
-            key={subitem.slug}
-            onClick={() => {
-              track(AmpEvent.USE_SIDEBAR);
-              subitem.trackEvent?.();
-            }}
-          >
+const SubMenuRender = ({ submenu, isCurrentPage }: SubMenuProps) => (
+  <>
+    {submenu.map((subitem) =>
+      subitem.isDisable ? (
+        <Tooltip key={subitem.slug} label={subitem.tooltipText} maxW="240px">
+          <div>
             <NavInfo submenu={subitem} isCurrentPage={isCurrentPage} />
-          </AppLink>
-        )
-      )}
-    </>
-  );
-};
+          </div>
+        </Tooltip>
+      ) : (
+        <AppLink
+          href={subitem.slug}
+          key={subitem.slug}
+          onClick={() => {
+            track(AmpEvent.USE_SIDEBAR);
+            subitem.trackEvent?.();
+          }}
+        >
+          <NavInfo submenu={subitem} isCurrentPage={isCurrentPage} />
+        </AppLink>
+      )
+    )}
+  </>
+);
 
 interface NavbarRenderProps {
   menuInfo: MenuInfo;
@@ -107,8 +103,9 @@ interface NavbarRenderProps {
 }
 
 const NavbarRender = ({ menuInfo, isCurrentPage }: NavbarRenderProps) => {
-  const { track } = useTrack();
-  const [isExpand, setIsExpand] = useLocalStorage(menuInfo.slug, true);
+  // Add slug to StorageKeys and NavContext
+  const { submenus } = useNavContext();
+  const [isExpand, setIsExpand] = submenus[menuInfo.slug];
   const defaultIndex = isExpand ? [0] : [];
 
   const handleChange = (index: number[]) => {
@@ -142,52 +139,21 @@ const NavbarRender = ({ menuInfo, isCurrentPage }: NavbarRenderProps) => {
         </AccordionButton>
         <AccordionPanel p={0}>
           <SubMenuRender
-            isCurrentPage={isCurrentPage}
             submenu={menuInfo.submenu}
+            isCurrentPage={isCurrentPage}
           />
-          {menuInfo.subSection && (
-            <Text py={2} variant="small" fontWeight={700} color="text.dark">
-              {menuInfo.subSection.map((subitem) => (
-                <div key={subitem.category}>
-                  <Text
-                    py={2}
-                    variant="small"
-                    fontWeight={700}
-                    color="text.dark"
-                  >
-                    {subitem.category}
-                  </Text>
-                  {subitem.submenu.map((submenu) =>
-                    submenu.isDisable ? (
-                      <Tooltip
-                        key={submenu.slug}
-                        label={submenu.tooltipText}
-                        maxW="240px"
-                      >
-                        <div>
-                          <NavInfo
-                            submenu={submenu}
-                            isCurrentPage={isCurrentPage}
-                          />
-                        </div>
-                      </Tooltip>
-                    ) : (
-                      <AppLink
-                        href={submenu.slug}
-                        key={submenu.slug}
-                        onClick={() => track(AmpEvent.USE_SIDEBAR)}
-                      >
-                        <NavInfo
-                          submenu={submenu}
-                          isCurrentPage={isCurrentPage}
-                        />
-                      </AppLink>
-                    )
-                  )}
-                </div>
-              ))}
-            </Text>
-          )}
+          {menuInfo.subSection &&
+            menuInfo.subSection.map((subitem) => (
+              <div key={subitem.category}>
+                <Text py={2} variant="small" fontWeight={700} color="text.dark">
+                  {subitem.category}
+                </Text>
+                <SubMenuRender
+                  submenu={subitem.submenu}
+                  isCurrentPage={isCurrentPage}
+                />
+              </div>
+            ))}
         </AccordionPanel>
       </AccordionItem>
     </Accordion>
@@ -220,8 +186,8 @@ export const ExpandNavMenu = ({
         </Button>
       </Flex>
       <SubMenuRender
-        isCurrentPage={isCurrentPage}
         submenu={yourAccountMenu.submenu}
+        isCurrentPage={isCurrentPage}
       />
 
       {restNavMenu.map((item) => (
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index df3f36d17..2962ebcc5 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -2,7 +2,7 @@ import { Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { type Dispatch, type SetStateAction } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   usePublicProjectConfig,
   useCurrentChain,
@@ -35,7 +35,6 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
   const isCurrentPage = useIsCurrentPage();
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
-  const { track } = useTrack();
 
   const { address } = useCurrentChain();
 
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index ba1ef4ca3..803e9eefa 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -2,7 +2,7 @@ import { Flex, Grid, Text, Button } from "@chakra-ui/react";
 import type { Big } from "big.js";
 import big from "big.js";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseViewJSON } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
@@ -75,7 +75,6 @@ const AssetCta = ({
   walletAddress,
 }: AssetCtaProps) => {
   const openAssetTab = useOpenAssetTab();
-  const { trackUseViewJSON } = useTrack();
 
   return (
     <Flex
diff --git a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
index 963afedac..c0591f92d 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
@@ -1,7 +1,7 @@
 import { Button, Flex, Heading } from "@chakra-ui/react";
 import type { MouseEventHandler } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 
@@ -20,7 +20,6 @@ export const DelegationInfo = ({
   onClickToggle,
   onViewMore,
 }: DelegationInfoProps) => {
-  const { track } = useTrack();
   const isMobile = useMobile();
 
   const isMobileOverview = isMobile && !!onViewMore;
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index 01c616e7f..fc36dc45b 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { DelegationsTable, UnbondingsTable } from "../tables";
-import { useTrack } from "lib/amplitude";
+import { trackUseRadio } from "lib/amplitude";
 import type { Delegation, Unbonding } from "lib/pages/account-details/data";
 import type { Option, TokenWithValue } from "lib/types";
 
@@ -33,7 +33,6 @@ export const DelegationsBody = ({
   // NOTE: set between "Delegated" and "Unbonding"
   const router = useRouter();
   const [value, setValue] = useState("Delegated");
-  const { trackUseRadio } = useTrack();
 
   useEffect(() => {
     setValue("Delegated");
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index dad8d4138..7c8715be8 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -2,7 +2,7 @@ import { Flex, useDisclosure } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { useUserDelegationInfos } from "lib/pages/account-details/data";
@@ -23,7 +23,6 @@ export const DelegationsSection = ({
   walletAddress,
   onViewMore,
 }: DelegationsSectionProps) => {
-  const { track } = useTrack();
   const { isOpen, onToggle, onClose } = useDisclosure();
   const router = useRouter();
   const {
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 9bf3f01fa..ca488a494 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -9,7 +9,7 @@ import {
 import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackUseTab, track } from "lib/amplitude";
 import {
   useInternalNavigate,
   useMoveConfig,
@@ -19,7 +19,6 @@ import {
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
 import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
@@ -85,7 +84,6 @@ const AccountDetailsBody = ({
   // const nft = useNftConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
   const router = useRouter();
-  const { trackUseTab } = useTrack();
   // TODO: remove assertion later
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
   const { data: publicInfo } = usePublicProjectByAccountAddress(accountAddress);
@@ -134,7 +132,7 @@ const AccountDetailsBody = ({
         },
       });
     },
-    [tab, trackUseTab, navigate, accountAddress]
+    [tab, navigate, accountAddress]
   );
 
   useEffect(() => {
@@ -425,7 +423,6 @@ const AccountDetailsBody = ({
 
 const AccountDetails = () => {
   const router = useRouter();
-  const { track } = useTrack();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const formatAddresses = useFormatAddresses();
   // TODO: change to `Addr` for correctness (i.e. interchain account)
@@ -438,9 +435,7 @@ const AccountDetails = () => {
 
   useEffect(() => {
     if (router.isReady && tab) track(AmpEvent.TO_ACCOUNT_DETAIL, { tab });
-  }, [router.isReady, tab, track]);
-
-  if (!router.isReady) return <Loading />;
+  }, [router.isReady, tab]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index 689419c5e..9ef13e5de 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -3,7 +3,7 @@ import type { StdFee } from "@cosmjs/stargate";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackToAdminUpdate, track } from "lib/amplitude";
 import {
   useFabricateFee,
   useInternalNavigate,
@@ -30,9 +30,7 @@ import { composeMsg, getFirstQueryParam } from "lib/utils";
 const UpdateAdmin = () => {
   useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
-  const { track } = useTrack();
   const { address } = useCurrentChain();
-  const { trackToAdminUpdate } = useTrack();
   const { validateContractAddress, validateUserAddress } = useValidateAddress();
   const getAddressType = useGetAddressType();
   const navigate = useInternalNavigate();
@@ -100,7 +98,6 @@ const UpdateAdmin = () => {
     contractAddressParam,
     updateAdminTx,
     broadcast,
-    track,
     estimatedFee,
   ]);
 
@@ -166,7 +163,7 @@ const UpdateAdmin = () => {
 
   useEffect(() => {
     if (router.isReady) trackToAdminUpdate(!!contractAddressParam);
-  }, [contractAddressParam, router.isReady, trackToAdminUpdate]);
+  }, [contractAddressParam, router.isReady]);
 
   return (
     <WasmPageContainer>
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index 2e25fd1bb..8d15955c1 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -12,14 +12,13 @@ import { getFirstQueryParam } from "lib/utils";
 import { BlockDetailsTop, BlockInfo, BlockTxsTable } from "./components";
 
 const BlockDetail = () => {
-  const { track } = useTrack();
   const router = useRouter();
   const heightParam = getFirstQueryParam(router.query.height);
   const { data: blockData, isLoading } = useBlockInfoQuery(heightParam);
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_BLOCK_DETAIL);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   if (isLoading) return <Loading withBorder />;
 
diff --git a/src/lib/pages/blocks/index.tsx b/src/lib/pages/blocks/index.tsx
index 2775fc7fb..2cbfbeb65 100644
--- a/src/lib/pages/blocks/index.tsx
+++ b/src/lib/pages/blocks/index.tsx
@@ -2,18 +2,17 @@ import { Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import PageContainer from "lib/components/PageContainer";
 
 import { BlocksTable } from "./components/BlocksTable";
 
 const BlocksPage = () => {
   const router = useRouter();
-  const { track } = useTrack();
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_BLOCKS);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/code-details/components/code-info/CodeInfoSection.tsx b/src/lib/pages/code-details/components/code-info/CodeInfoSection.tsx
index 2b6adbe59..484053b02 100644
--- a/src/lib/pages/code-details/components/code-info/CodeInfoSection.tsx
+++ b/src/lib/pages/code-details/components/code-info/CodeInfoSection.tsx
@@ -10,7 +10,7 @@ import {
 } from "@chakra-ui/react";
 import { useCallback } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useGetAddressType, useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
@@ -134,17 +134,16 @@ export const CodeInfoSection = ({
   );
   const uploaderType = getAddressType(uploader);
   const isMobile = useMobile();
-  const { track } = useTrack();
 
   const handleView = useCallback(() => {
     toJsonSchemaTab();
     track(AmpEvent.USE_VIEW_ATTACHED_JSON);
-  }, [toJsonSchemaTab, track]);
+  }, [toJsonSchemaTab]);
 
   const handleAttach = useCallback(() => {
     onOpen();
     track(AmpEvent.USE_ATTACHED_JSON_MODAL);
-  }, [onOpen, track]);
+  }, [onOpen]);
 
   return (
     <Box my={8}>
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index e44c226bf..cc0bed577 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useWasmConfig,
   useMobile,
@@ -48,7 +48,6 @@ const CodeDetailsBody = observer(
     const jsonSchema = codeHash ? getSchemaByCodeHash(codeHash) : undefined;
     const isMobile = useMobile();
     const tab = getFirstQueryParam(router.query.tab) as TabIndex;
-    const { track } = useTrack();
 
     useEffect(() => {
       if (router.isReady) track(AmpEvent.TO_CODE_DETAIL, { tab });
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index 850c66380..e79d8f9b9 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { FilterByPermission } from "lib/components/forms";
 import PageContainer from "lib/components/PageContainer";
@@ -21,7 +21,6 @@ interface RecentCodesState {
 
 const RecentCodes = observer(() => {
   useWasmConfig({ shouldRedirect: true });
-  const { track } = useTrack();
   const router = useRouter();
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
@@ -44,7 +43,7 @@ const RecentCodes = observer(() => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_RECENT_CODES);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   const emptyState = (
     <EmptyState
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 0ae4df597..a62d60008 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -11,7 +11,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useValidateAddress,
   useWasmConfig,
@@ -302,7 +302,6 @@ const ContractDetailsBody = observer(
 
 const ContractDetails = observer(() => {
   useWasmConfig({ shouldRedirect: true });
-  const { track } = useTrack();
   const router = useRouter();
   const { validateContractAddress } = useValidateAddress();
   const contractAddressParam = getFirstQueryParam(
@@ -312,7 +311,7 @@ const ContractDetails = observer(() => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_CONTRACT_DETAIL);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   if (contractData.isContractDetailLoading) return <Loading withBorder />;
   return (
diff --git a/src/lib/pages/contract-list/index.tsx b/src/lib/pages/contract-list/index.tsx
index ebf1cde50..f1d646766 100644
--- a/src/lib/pages/contract-list/index.tsx
+++ b/src/lib/pages/contract-list/index.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { CreateNewListModal } from "lib/components/modal";
@@ -14,7 +14,6 @@ import { useContractStore } from "lib/providers/store";
 
 const AllContractListsPage = observer(() => {
   useWasmConfig({ shouldRedirect: true });
-  const { track } = useTrack();
   const router = useRouter();
   const navigate = useInternalNavigate();
   const { getContractLists } = useContractStore();
@@ -26,7 +25,7 @@ const AllContractListsPage = observer(() => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_ALL_LISTS);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index c03a43ce2..55b9be257 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomIcon } from "lib/components/icon";
@@ -29,7 +29,6 @@ import { formatSlugName, getFirstQueryParam } from "lib/utils";
 
 const ContractsByList = observer(() => {
   useWasmConfig({ shouldRedirect: true });
-  const { track } = useTrack();
   const router = useRouter();
   const navigate = useInternalNavigate();
   const listSlug = getFirstQueryParam(router.query.slug);
@@ -73,7 +72,7 @@ const ContractsByList = observer(() => {
           track(AmpEvent.TO_LIST_OTHERS);
       }
     }
-  }, [router.isReady, listSlug, track]);
+  }, [router.isReady, listSlug]);
 
   if (!contractListInfo) return null;
 
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index b558742cb..3aedf9edb 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -14,7 +14,6 @@ import { useRecentContractsData } from "./data";
 
 const RecentContracts = observer(() => {
   useWasmConfig({ shouldRedirect: true });
-  const { track } = useTrack();
   const router = useRouter();
   const navigate = useInternalNavigate();
   const onRowSelect = (contract: ContractAddr) =>
@@ -27,7 +26,7 @@ const RecentContracts = observer(() => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_RECENT_CONTRACT);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index c5353a56a..142ec24e8 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -10,7 +10,7 @@ import {
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCelatoneApp,
   useCurrentChain,
@@ -60,7 +60,6 @@ const getAlertContent = (
       };
 
 const Deploy = () => {
-  const { track } = useTrack();
   const router = useRouter();
   const navigate = useInternalNavigate();
   const { address } = useCurrentChain();
@@ -80,7 +79,7 @@ const Deploy = () => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_DEPLOY);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   if (isFetching) return <Loading />;
 
diff --git a/src/lib/pages/execute/components/ExecuteArea.tsx b/src/lib/pages/execute/components/ExecuteArea.tsx
index 1f6dd6d82..b62e770a3 100644
--- a/src/lib/pages/execute/components/ExecuteArea.tsx
+++ b/src/lib/pages/execute/components/ExecuteArea.tsx
@@ -1,9 +1,9 @@
 import { Box, Flex, Heading, TabList, Tabs } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 import { observer } from "mobx-react-lite";
-import { useCallback, useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseTab } from "lib/amplitude";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
 import {
@@ -34,7 +34,6 @@ export const ExecuteArea = observer(
     codeHash,
     codeId,
   }: ExecuteAreaProps) => {
-    const { trackUseTab } = useTrack();
     const [tab, setTab] = useState<MessageTabs>();
     const { getExecuteSchema, getSchemaByCodeHash } = useSchemaStore();
     const schema = getExecuteSchema(codeHash);
@@ -43,10 +42,11 @@ export const ExecuteArea = observer(
 
     const handleTabChange = useCallback(
       (nextTab: MessageTabs) => {
+        if (nextTab === tab) return;
         trackUseTab(nextTab);
         setTab(nextTab);
       },
-      [trackUseTab]
+      [tab]
     );
 
     useEffect(() => {
diff --git a/src/lib/pages/execute/components/JsonExecute.tsx b/src/lib/pages/execute/components/JsonExecute.tsx
index e0675fffe..631286195 100644
--- a/src/lib/pages/execute/components/JsonExecute.tsx
+++ b/src/lib/pages/execute/components/JsonExecute.tsx
@@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm, useFormState } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackActionWithFunds } from "lib/amplitude";
 import {
   useFabricateFee,
   useExecuteContractTx,
@@ -70,7 +70,6 @@ export const JsonExecute = ({
   const { broadcast } = useTxBroadcast();
   const { addActivity } = useContractStore();
   const getAttachFunds = useAttachFunds();
-  const { trackActionWithFunds } = useTrack();
 
   // ------------------------------------------//
   // ------------------STATES------------------//
@@ -183,7 +182,6 @@ export const JsonExecute = ({
     contractAddress,
     msg,
     funds,
-    trackActionWithFunds,
     addActivity,
     broadcast,
   ]);
diff --git a/src/lib/pages/execute/components/MsgSuggestion.tsx b/src/lib/pages/execute/components/MsgSuggestion.tsx
index fb7bebadf..feedc98de 100644
--- a/src/lib/pages/execute/components/MsgSuggestion.tsx
+++ b/src/lib/pages/execute/components/MsgSuggestion.tsx
@@ -1,6 +1,6 @@
 import { Box, Text, ButtonGroup } from "@chakra-ui/react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import type { ContractAddr } from "lib/types";
 import { jsonPrettify } from "lib/utils";
@@ -15,45 +15,41 @@ export const MsgSuggestion = ({
   contractAddress,
   cmds,
   setMsg,
-}: MsgSuggestionProps) => {
-  const { track } = useTrack();
-
-  return (
-    <Box>
-      {contractAddress && (
-        <Text variant="body3" mb={4}>
-          Message Suggestions:
+}: MsgSuggestionProps) => (
+  <Box>
+    {contractAddress && (
+      <Text variant="body3" mb={4}>
+        Message Suggestions:
+      </Text>
+    )}
+    {cmds.length ? (
+      <ButtonGroup
+        flexWrap="wrap"
+        rowGap={4}
+        sx={{
+          "> button": {
+            marginInlineStart: "0 !important",
+            marginInlineEnd: "1",
+          },
+        }}
+      >
+        {cmds.sort().map(([cmd, queryMsg]) => (
+          <ContractCmdButton
+            key={`query-cmd-${cmd}`}
+            cmd={cmd}
+            onClickCmd={() => {
+              track(AmpEvent.USE_CMD_EXECUTE);
+              setMsg(jsonPrettify(queryMsg));
+            }}
+          />
+        ))}
+      </ButtonGroup>
+    ) : (
+      contractAddress && (
+        <Text mt={2} variant="body2" color="text.dark">
+          No ExecuteMsgs suggestion available
         </Text>
-      )}
-      {cmds.length ? (
-        <ButtonGroup
-          flexWrap="wrap"
-          rowGap={4}
-          sx={{
-            "> button": {
-              marginInlineStart: "0 !important",
-              marginInlineEnd: "1",
-            },
-          }}
-        >
-          {cmds.sort().map(([cmd, queryMsg]) => (
-            <ContractCmdButton
-              key={`query-cmd-${cmd}`}
-              cmd={cmd}
-              onClickCmd={() => {
-                track(AmpEvent.USE_CMD_EXECUTE);
-                setMsg(jsonPrettify(queryMsg));
-              }}
-            />
-          ))}
-        </ButtonGroup>
-      ) : (
-        contractAddress && (
-          <Text mt={2} variant="body2" color="text.dark">
-            No ExecuteMsgs suggestion available
-          </Text>
-        )
-      )}
-    </Box>
-  );
-};
+      )
+    )}
+  </Box>
+);
diff --git a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
index 03250dc92..55032f842 100644
--- a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
+++ b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
@@ -18,7 +18,7 @@ import dynamic from "next/dynamic";
 import { useCallback, useEffect, useState, useMemo } from "react";
 import { useForm, useFormState } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackActionWithFunds } from "lib/amplitude";
 import {
   useCurrentChain,
   useExecuteContractTx,
@@ -95,7 +95,6 @@ export const ExecuteBox = ({
   const { broadcast } = useTxBroadcast();
   const { addActivity } = useContractStore();
   const getAttachFunds = useAttachFunds();
-  const { trackActionWithFunds } = useTrack();
 
   // ------------------------------------------//
   // ------------------STATES------------------//
@@ -219,7 +218,6 @@ export const ExecuteBox = ({
     fee,
     contractAddress,
     msg,
-    trackActionWithFunds,
     funds,
     attachFundsOption,
     addActivity,
diff --git a/src/lib/pages/execute/components/schema-execute/index.tsx b/src/lib/pages/execute/components/schema-execute/index.tsx
index b5f53de36..4b2f5ec15 100644
--- a/src/lib/pages/execute/components/schema-execute/index.tsx
+++ b/src/lib/pages/execute/components/schema-execute/index.tsx
@@ -2,7 +2,7 @@ import { Accordion, Button, Flex, Text } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 import { useEffect, useMemo, useRef, useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseExpandAll } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { UploadSchema } from "lib/components/json-schema";
@@ -31,11 +31,6 @@ export const SchemaExecute = ({
   codeId,
   codeHash,
 }: SchemaExecuteProps) => {
-  // ------------------------------------------//
-  // ---------------DEPENDENCIES---------------//
-  // ------------------------------------------//
-  const { trackUseExpandAll } = useTrack();
-
   // ------------------------------------------//
   // -----------------REFERENCE----------------//
   // ------------------------------------------//
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 44901e4df..af3cc30b4 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -3,7 +3,7 @@ import type { Coin } from "@cosmjs/stargate";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackToExecute } from "lib/amplitude";
 import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -37,7 +37,6 @@ const Execute = () => {
   const [initialFunds, setInitialFunds] = useState<Coin[]>([]);
   const [codeHash, setCodeHash] = useState("");
   const [codeId, setCodeId] = useState("");
-  const { trackToExecute } = useTrack();
 
   // ------------------------------------------//
   // ----------------CALLBACKS-----------------//
@@ -91,7 +90,7 @@ const Execute = () => {
       setContractAddress(contractAddressParam);
       trackToExecute(!!contractAddressParam, !!msgParam);
     }
-  }, [router, onContractSelect, trackToExecute]);
+  }, [router, onContractSelect]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 408eb208c..8cb97ca1f 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -11,7 +11,7 @@ import axios from "axios";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCelatoneApp,
   useCurrentChain,
@@ -42,7 +42,6 @@ const STATUS_ICONS: Record<ResultStatus, IconKeys> = {
 };
 
 const Faucet = () => {
-  const { track } = useTrack();
   const { address: walletAddress = "" } = useCurrentChain();
   const [address, setAddress] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -78,7 +77,7 @@ const Faucet = () => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_FAUCET);
-  }, [router, track]);
+  }, [router]);
 
   useEffect(() => {
     if (address) {
diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx
index e1d3dda90..3dc88d255 100644
--- a/src/lib/pages/home/index.tsx
+++ b/src/lib/pages/home/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { CURR_THEME } from "env";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCelatoneApp,
   useInternalNavigate,
@@ -121,7 +121,6 @@ const Home = () => {
     isLoading: isLoadingLatestBlockInfo,
     error: latestBlockInfoError,
   } = useLatestBlockInfo();
-  const { track } = useTrack();
   const { data } = useAverageBlockTime();
   const averageBlockTime = calculateAverageBlockTime(
     data?.latest,
@@ -141,7 +140,7 @@ const Home = () => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_OVERVIEW);
-  }, [track, router.isReady]);
+  }, [router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx
index 50f281c2e..07aaea5f9 100644
--- a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx
+++ b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx
@@ -2,7 +2,7 @@ import { Text, Flex, Heading, Button } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCurrentChain, useInternalNavigate } from "lib/app-provider";
 import { OffChainForm } from "lib/components/OffChainForm";
 import type { OffchainDetail } from "lib/components/OffChainForm";
@@ -28,7 +28,6 @@ export const InstantiateOffChainForm = observer(
     contractAddress,
     contractLabel,
   }: InstantiateOffChainFormProps) => {
-    const { track } = useTrack();
     const { address = "" } = useCurrentChain();
     const navigate = useInternalNavigate();
     const { updateContractLocalInfo } = useContractStore();
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 0e9b2d20b..4207428f0 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -7,7 +7,12 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import {
+  AmpEvent,
+  trackActionWithFunds,
+  trackToInstantiate,
+  track,
+} from "lib/amplitude";
 import {
   useFabricateFee,
   useInstantiateTx,
@@ -87,7 +92,6 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const getAttachFunds = useAttachFunds();
   const { getSchemaByCodeHash } = useSchemaStore();
-  const { track, trackActionWithFunds, trackToInstantiate } = useTrack();
 
   // ------------------------------------------//
   // ------------------STATES------------------//
@@ -267,7 +271,6 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     tab,
     attachFundsOption,
     postInstantiateTx,
-    trackActionWithFunds,
     codeId,
     currentInput,
     label,
@@ -370,7 +373,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
 
   useEffect(() => {
     if (router.isReady) trackToInstantiate(!!msgQuery, !!codeIdQuery);
-  }, [router.isReady, msgQuery, codeIdQuery, trackToInstantiate]);
+  }, [router.isReady, msgQuery, codeIdQuery]);
 
   return (
     <>
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index 16d4413c8..cc4dbdd2d 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -5,7 +5,7 @@ import Long from "long";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackAction } from "lib/amplitude";
 import {
   useFabricateFee,
   useSimulateFeeQuery,
@@ -57,7 +57,6 @@ export const MigrateContract = ({
   const migrateTx = useMigrateTx();
   const fabricateFee = useFabricateFee();
   const { getSchemaByCodeHash } = useSchemaStore();
-  const { trackAction } = useTrack();
 
   // ------------------------------------------//
   // ----------------FORM HOOKS----------------//
@@ -192,7 +191,6 @@ export const MigrateContract = ({
     }
   }, [
     migrateTx,
-    trackAction,
     tab,
     contractAddress,
     codeId,
diff --git a/src/lib/pages/migrate/index.tsx b/src/lib/pages/migrate/index.tsx
index e62337124..10e481a02 100644
--- a/src/lib/pages/migrate/index.tsx
+++ b/src/lib/pages/migrate/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 import { useForm } from "react-hook-form";
 
-import { useTrack } from "lib/amplitude";
+import { trackToMigrate } from "lib/amplitude";
 import {
   useCurrentChain,
   useInternalNavigate,
@@ -36,7 +36,6 @@ const Migrate = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const { data: uploadAccess, isFetching } = useUploadAccessParams();
-  const { trackToMigrate } = useTrack();
 
   const { address = "" } = useCurrentChain();
 
@@ -94,7 +93,7 @@ const Migrate = () => {
 
   useEffect(() => {
     if (router.isReady) trackToMigrate(!!contractAddressParam, !!codeIdParam);
-  }, [router.isReady, codeIdParam, contractAddressParam, trackToMigrate]);
+  }, [router.isReady, codeIdParam, contractAddressParam]);
 
   const renderBody = () => {
     switch (migrateStep) {
diff --git a/src/lib/pages/module-details/index.tsx b/src/lib/pages/module-details/index.tsx
index 3b8bd1e02..8b03432a7 100644
--- a/src/lib/pages/module-details/index.tsx
+++ b/src/lib/pages/module-details/index.tsx
@@ -11,7 +11,7 @@ import { useRouter } from "next/router";
 import type { MouseEventHandler } from "react";
 import { useState, useCallback, useEffect } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseTab } from "lib/amplitude";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import type { IconKeys } from "lib/components/icon";
@@ -67,7 +67,6 @@ const InvalidModule = () => <InvalidState title="Module does not exist" />;
 export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { trackUseTab } = useTrack();
 
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
   const [overviewHistoryTabIndex, setOverviewHistoryTabIndex] = useState(0);
@@ -90,7 +89,7 @@ export const ModuleDetailsBody = ({ moduleData }: ModuleDetailsBodyProps) => {
         },
       });
     },
-    [moduleData.address, moduleData.moduleName, navigate, tab, trackUseTab]
+    [moduleData.address, moduleData.moduleName, navigate, tab]
   );
 
   const { data: moduleId } = useModuleId(
diff --git a/src/lib/pages/not-found/index.tsx b/src/lib/pages/not-found/index.tsx
index c28c4ff4e..7b276d819 100644
--- a/src/lib/pages/not-found/index.tsx
+++ b/src/lib/pages/not-found/index.tsx
@@ -3,16 +3,16 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { CURR_THEME } from "env";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { BackButton } from "lib/components/button";
 import PageContainer from "lib/components/PageContainer";
 
 const NotFoundPage = () => {
-  const { track } = useTrack();
   const router = useRouter();
+
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_NOT_FOUND);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index b90b8fd6a..ddb5ee307 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -10,7 +10,7 @@ import type { ChangeEvent } from "react";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCurrentChain, useWasmConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
@@ -35,7 +35,6 @@ interface PastTxsState {
 }
 
 const PastTxs = () => {
-  const { track } = useTrack();
   const router = useRouter();
   const {
     address,
@@ -123,7 +122,7 @@ const PastTxs = () => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_PAST_TXS);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   useEffect(() => {
     setPageSize(10);
diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
index 0053e9dd1..43535e375 100644
--- a/src/lib/pages/pools/components/FilterByPoolType.tsx
+++ b/src/lib/pages/pools/components/FilterByPoolType.tsx
@@ -6,7 +6,7 @@ import {
   STABLESWAP_ICON,
   CLP_ICON,
 } from "../constant";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackUseFilter } from "lib/amplitude";
 import { SelectInput } from "lib/components/forms";
 import type { PoolTypeFilter } from "lib/types";
 import { PoolType } from "lib/types";
@@ -60,20 +60,17 @@ export const FilterByPoolType = ({
   setPoolTypeValue,
   initialSelected,
   labelBgColor = "background.main",
-}: FilterByPoolTypeProps) => {
-  const { trackUseFilter } = useTrack();
-  return (
-    <Grid columnGap="16px" w="full" maxW="360px">
-      <SelectInput<PoolTypeFilter>
-        formLabel="Filter by Pool Type"
-        options={options}
-        onChange={(newVal) => {
-          trackUseFilter(AmpEvent.USE_FILTER_POOL_TYPE, [newVal], newVal);
-          setPoolTypeValue(newVal);
-        }}
-        initialSelected={initialSelected}
-        labelBgColor={labelBgColor}
-      />
-    </Grid>
-  );
-};
+}: FilterByPoolTypeProps) => (
+  <Grid columnGap="16px" w="full" maxW="360px">
+    <SelectInput<PoolTypeFilter>
+      formLabel="Filter by Pool Type"
+      options={options}
+      onChange={(newVal) => {
+        trackUseFilter(AmpEvent.USE_FILTER_POOL_TYPE, [newVal], newVal);
+        setPoolTypeValue(newVal);
+      }}
+      initialSelected={initialSelected}
+      labelBgColor={labelBgColor}
+    />
+  </Grid>
+);
diff --git a/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx b/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
index 16e720ab2..1c3cddbb7 100644
--- a/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
+++ b/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
@@ -11,7 +11,7 @@ import {
   Box,
 } from "@chakra-ui/react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseViewJSON } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import { jsonPrettify } from "lib/utils";
@@ -26,7 +26,6 @@ export const JsonModalButton = ({
   modalHeader,
 }: JsonModalButtonProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { trackUseViewJSON } = useTrack();
   return (
     <>
       <Button
diff --git a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
index 34017453b..6f1e4fb1f 100644
--- a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
@@ -3,7 +3,7 @@ import type { Big } from "big.js";
 import big from "big.js";
 import Link from "next/link";
 
-import { useTrack } from "lib/amplitude";
+import { trackWebsite } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
 import type { PoolDetail, USD } from "lib/types";
@@ -17,7 +17,6 @@ interface PoolAssetsProps {
 }
 
 export const PoolAssets = ({ pool }: PoolAssetsProps) => {
-  const { trackWebsite } = useTrack();
   const totalLiquidity = pool.poolLiquidity.reduce(
     (totalVal, token) => totalVal.add(token.value ?? 0),
     big(0)
diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index e75241de6..4fd15f975 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -7,21 +7,42 @@ import {
   TabPanels,
   TabPanel,
 } from "@chakra-ui/react";
+import { useCallback, useState } from "react";
 
 import { usePoolTxsCount } from "../../data";
-import { useTrack } from "lib/amplitude";
+import { trackUseTab } from "lib/amplitude";
 import { CustomTab } from "lib/components/CustomTab";
 import type { PoolDetail } from "lib/types";
 import { PoolType } from "lib/types";
 
 import { PoolRelatedTxsTable } from "./tables/pool-txs";
 
+enum TabIndex {
+  All = "all",
+  Swap = "swap",
+  CLP = "clp",
+  LP = "lp",
+  Bonding = "bonding",
+  Superfluid = "superfluid",
+  Collect = "collect",
+}
+
 interface PoolRelatedTxsProps {
   pool: PoolDetail;
 }
 
 export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
-  const { trackUseTab } = useTrack();
+  const [tab, setTab] = useState(TabIndex.All);
+
+  const handleTabChange = useCallback(
+    (nextTab: TabIndex) => {
+      if (nextTab === tab) return;
+      trackUseTab(nextTab);
+      setTab(nextTab);
+    },
+    [tab]
+  );
+
   const {
     count: countAllTxs,
     countDisplay: countDisplayAllTxs,
@@ -81,14 +102,14 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
           <CustomTab
             count={countDisplayAllTxs}
             isLoading={isLoadingAllTxs}
-            onClick={() => trackUseTab("All")}
+            onClick={() => handleTabChange(TabIndex.All)}
           >
             All
           </CustomTab>
           <CustomTab
             count={countDisplaySwapTxs}
             isLoading={isLoadingSwapTxs}
-            onClick={() => trackUseTab("Swap")}
+            onClick={() => handleTabChange(TabIndex.Swap)}
           >
             Swap
           </CustomTab>
@@ -96,7 +117,7 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
             <CustomTab
               count={countDisplayClpTxs}
               isLoading={isLoadingClpTxs}
-              onClick={() => trackUseTab("CLP")}
+              onClick={() => handleTabChange(TabIndex.CLP)}
             >
               CLP
             </CustomTab>
@@ -104,7 +125,7 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
             <CustomTab
               count={countDisplayLpTxs}
               isLoading={isLoadingLpTxs}
-              onClick={() => trackUseTab("LP")}
+              onClick={() => handleTabChange(TabIndex.LP)}
             >
               LP
             </CustomTab>
@@ -112,7 +133,7 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
           <CustomTab
             count={countDisplayBondTxs}
             isLoading={isLoadingBondTxs}
-            onClick={() => trackUseTab("Bonding")}
+            onClick={() => handleTabChange(TabIndex.Bonding)}
           >
             Bonding
           </CustomTab>
@@ -120,7 +141,7 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
             <CustomTab
               count={countDisplaySuperfluidTxs}
               isLoading={isLoadingSuperfluidTxs}
-              onClick={() => trackUseTab("Superfluid")}
+              onClick={() => handleTabChange(TabIndex.Superfluid)}
             >
               Superfluid
             </CustomTab>
@@ -129,7 +150,7 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
             <CustomTab
               count={countDisplayCollectTxs}
               isLoading={isLoadingCollectTxs}
-              onClick={() => trackUseTab("Collect")}
+              onClick={() => handleTabChange(TabIndex.Collect)}
             >
               Collect
             </CustomTab>
diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx
index c75c6545e..0decf3150 100644
--- a/src/lib/pages/pools/components/pool-details/header/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/index.tsx
@@ -1,7 +1,7 @@
 import { Button, Flex } from "@chakra-ui/react";
 
 import { PoolHeader } from "../../PoolHeader";
-import { useTrack } from "lib/amplitude";
+import { trackUseViewJSON, trackWebsite } from "lib/amplitude";
 import { useBaseApiRoute, usePoolConfig } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomIcon } from "lib/components/icon";
@@ -19,7 +19,6 @@ export const PoolTopSection = ({ pool }: PoolTopSectionProps) => {
   // Remark: the empty string has never been used when poolConfig is disabled
   const poolUrl = poolConfig.enabled ? poolConfig.url : "";
 
-  const { trackWebsite, trackUseViewJSON } = useTrack();
   const lcdEndpoint = useBaseApiRoute("rest");
   const openPoolLcd = () => {
     trackUseViewJSON("pool_page_pool_lcd");
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index dd1d48eb4..32a14d1de 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -1,6 +1,6 @@
 import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseExpand } from "lib/amplitude";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
@@ -34,7 +34,6 @@ export const PoolTxsMsg = ({
   templateColumns,
 }: PoolTxsMsgProps) => {
   const { isOpen, onToggle } = useDisclosure();
-  const { trackUseExpand } = useTrack();
   const msgDetailTemplateColumns = templateColumns
     .split(" ")
     .slice(0, 3)
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 48decd969..35c855848 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -4,7 +4,7 @@ import big from "big.js";
 import Link from "next/link";
 
 import { PoolHeader } from "../PoolHeader";
-import { useTrack } from "lib/amplitude";
+import { trackWebsite } from "lib/amplitude";
 import { useInternalNavigate, usePoolConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
@@ -27,7 +27,6 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
   // Remark: the empty string has never been used when poolConfig is disabled
   const poolUrl = poolConfig.enabled ? poolConfig.url : "";
 
-  const { trackWebsite } = useTrack();
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
     // First version, navigate to contract details page if pool type is CosmWasm
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index f16a2ca29..2eaf8b094 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -18,7 +18,7 @@ import { SUPERFLUID_ICON } from "../../constant";
 import { usePools } from "../../data";
 import type { PoolFilterState } from "../../types";
 import { FilterByPoolType } from "../FilterByPoolType";
-import { useTrack } from "lib/amplitude";
+import { trackUseSort, trackUseToggle, trackUseView } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { Pagination } from "lib/components/pagination";
@@ -52,7 +52,6 @@ export const SupportedSection = ({
   scrollComponentId,
 }: SupportedSectionProp) => {
   const { assetInfos } = useAssetInfos({ withPrices: true });
-  const { trackUseSort, trackUseView, trackUseToggle } = useTrack();
 
   const { watch, setValue } = useForm<PoolFilterState>({
     defaultValues: {
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 831f58bd0..d87aca9ec 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -12,7 +12,7 @@ import Link from "next/link";
 
 import { getUndefinedTokenIcon } from "../../utils";
 import { PoolHeader } from "../PoolHeader";
-import { useTrack } from "lib/amplitude";
+import { trackUseExpand, trackWebsite } from "lib/amplitude";
 import { useInternalNavigate, usePoolConfig } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
@@ -41,7 +41,6 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
   // Remark: the empty string has never been used when poolConfig is disabled
   const poolUrl = poolConfig.enabled ? poolConfig.url : "";
 
-  const { trackWebsite, trackUseExpand } = useTrack();
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
     // First version, navigate to contract details page if pool type is CosmWasm
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 5eb4d95e6..74470e7b3 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -17,7 +17,7 @@ import { SUPERFLUID_ICON } from "../../constant";
 import { usePools } from "../../data";
 import type { PoolFilterState } from "../../types";
 import { FilterByPoolType } from "../FilterByPoolType";
-import { useTrack } from "lib/amplitude";
+import { trackUseExpandAll, trackUseSort, trackUseToggle } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { Pagination } from "lib/components/pagination";
@@ -36,7 +36,6 @@ interface UnsupportedSectionProp {
 export const UnsupportedSection = ({
   scrollComponentId,
 }: UnsupportedSectionProp) => {
-  const { trackUseSort, trackUseToggle } = useTrack();
   const { watch, setValue } = useForm<PoolFilterState>({
     defaultValues: {
       poolTypeValue: PoolType.ALL,
@@ -55,8 +54,6 @@ export const UnsupportedSection = ({
     search,
   });
 
-  const { trackUseExpandAll } = useTrack();
-
   const [showNewest, setShowNewest] = useState(true);
 
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx
index 2b6a58cb5..7fe48edf7 100644
--- a/src/lib/pages/pools/index.tsx
+++ b/src/lib/pages/pools/index.tsx
@@ -2,7 +2,7 @@ import { Heading, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackUseTab, track } from "lib/amplitude";
 import { CustomTab } from "lib/components/CustomTab";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import PageContainer from "lib/components/PageContainer";
@@ -13,14 +13,12 @@ import { SupportedSection } from "./components/supportedSection";
 import { UnsupportedSection } from "./components/unsupportedSection";
 
 enum TabIndex {
-  Supported,
-  Unsupported,
+  Supported = "supported",
+  Unsupported = "unsupported",
 }
 
 export const PoolIndex = () => {
-  const { track } = useTrack();
   const router = useRouter();
-  const { trackUseTab } = useTrack();
   const [tabIndex, setTabIndex] = useState(TabIndex.Supported);
 
   const { data: supportedPoolCount, isLoading: isLoadingSupported } =
@@ -39,18 +37,19 @@ export const PoolIndex = () => {
     });
 
   const handleTabChange = useCallback(
-    (tab: TabIndex) => {
-      trackUseTab(TabIndex[tab]);
-      setTabIndex(tab);
+    (nextTab: TabIndex) => {
+      if (nextTab === tabIndex) return;
+      trackUseTab(nextTab);
+      setTabIndex(nextTab);
     },
-    [trackUseTab]
+    [tabIndex]
   );
 
   const sectionHeaderId = "poolListTab";
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_POOL_LIST);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   useEffect(() => {
     if (
@@ -69,7 +68,7 @@ export const PoolIndex = () => {
       <Heading variant="h5" as="h5">
         Osmosis Pools
       </Heading>
-      <Tabs index={tabIndex}>
+      <Tabs index={Object.values(TabIndex).indexOf(tabIndex)}>
         <TabList my={8} borderBottom="1px" borderColor="gray.800">
           <CustomTab
             count={supportedPoolCount ?? 0}
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index 2af3583ed..10a014446 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -15,7 +15,6 @@ import {
 import { usePool } from "./data";
 
 export const PoolId = () => {
-  const { track } = useTrack();
   const router = useRouter();
   const navigate = useInternalNavigate();
   const poolId = Number(getFirstQueryParam(router.query.poolId));
@@ -23,7 +22,7 @@ export const PoolId = () => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_POOL_DETAIL);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   if (isLoading) return <Loading />;
   if (!pool) return navigate({ pathname: `/pools` });
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index f75764b78..6d4eb09ec 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -1,4 +1,4 @@
-import { useTrack } from "lib/amplitude";
+import { trackUseRightHelperPanel } from "lib/amplitude";
 import { AppLink } from "lib/components/AppLink";
 import type { SidebarMetadata } from "lib/components/StickySidebar";
 
@@ -54,10 +54,8 @@ const storeCodePage = "proposal-store-code";
 export const SIDEBAR_STORE_CODE_DETAILS: (
   chainName: string,
   permission: NetworkPermission
-) => SidebarMetadata = (chainName, permission) => {
-  const { trackUseRightHelperPanel } = useTrack();
-
-  return {
+) => SidebarMetadata = (chainName, permission) =>
+  ({
     permissioned: {
       page: storeCodePage,
       title: "Why do I need to submit proposal?",
@@ -106,8 +104,7 @@ export const SIDEBAR_STORE_CODE_DETAILS: (
       toPagePath: "/deploy",
       toPageTitle: "Go To Deploy Contract",
     },
-  }[permission];
-};
+  })[permission];
 
 export const PROPOSAL_STORE_CODE_TEXT = {
   header: "Create Proposal to Store Code",
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 65562b394..2b36614a1 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -22,7 +22,13 @@ import {
   PROPOSAL_STORE_CODE_TEXT,
 } from "../constants";
 import { getAlert } from "../utils";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import {
+  AmpEvent,
+  trackUseDepositFill,
+  trackUseSubmitProposal,
+  trackUseUnpin,
+  track,
+} from "lib/amplitude";
 import {
   useCelatoneApp,
   useCurrentChain,
@@ -87,8 +93,6 @@ const defaultValues: StoreCodeProposalState = {
 
 const StoreCodeProposal = () => {
   useWasmConfig({ shouldRedirect: true });
-  const { track, trackUseUnpin, trackUseDepositFill, trackUseSubmitProposal } =
-    useTrack();
   const {
     constants,
     chainConfig: { prettyName },
@@ -154,7 +158,7 @@ const StoreCodeProposal = () => {
   const router = useRouter();
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_PROPOSAL_TO_STORE_CODE);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   const { variant, description, icon } = getAlert(
     initialDeposit.amount,
@@ -329,7 +333,6 @@ const StoreCodeProposal = () => {
     runAs,
     source,
     submitStoreCodeProposalTx,
-    trackUseSubmitProposal,
     title,
     unpinCode,
     walletAddress,
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index e362dc614..c7d810aa1 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -18,7 +18,13 @@ import { InitialDeposit } from "../components/InitialDeposit";
 import { PermissionlessAlert } from "../components/PermissionlessAlert";
 import { SIDEBAR_WHITELIST_DETAILS } from "../constants";
 import { getAlert } from "../utils";
-import { AmpEvent, useTrack } from "lib/amplitude";
+import {
+  AmpEvent,
+  trackUseDepositFill,
+  trackUseSubmitProposal,
+  trackUseWhitelistedAddress,
+  track,
+} from "lib/amplitude";
 import {
   useCelatoneApp,
   useCurrentChain,
@@ -59,12 +65,6 @@ const defaultValues: WhiteListState = {
 
 const ProposalToWhitelist = () => {
   useWasmConfig({ shouldRedirect: true });
-  const {
-    track,
-    trackUseDepositFill,
-    trackUseWhitelistedAddress,
-    trackUseSubmitProposal,
-  } = useTrack();
   const router = useRouter();
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
@@ -200,7 +200,6 @@ const ProposalToWhitelist = () => {
     addresses.length,
     minDeposit,
     submitProposalTx,
-    trackUseSubmitProposal,
     estimatedFee,
     submitWhitelistProposalMsg,
     addressesArray.length,
@@ -232,7 +231,7 @@ const ProposalToWhitelist = () => {
     if (router.isReady) {
       track(AmpEvent.TO_PROPOSAL_TO_WHITELIST);
     }
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   return (
     <>
diff --git a/src/lib/pages/proposals/components/ProposalStatusFilter.tsx b/src/lib/pages/proposals/components/ProposalStatusFilter.tsx
index cfb1bb795..4e0ada471 100644
--- a/src/lib/pages/proposals/components/ProposalStatusFilter.tsx
+++ b/src/lib/pages/proposals/components/ProposalStatusFilter.tsx
@@ -4,7 +4,7 @@ import { matchSorter } from "match-sorter";
 import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState, useRef, forwardRef } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackUseFilter } from "lib/amplitude";
 import {
   FilterChip,
   DropdownContainer,
@@ -38,7 +38,6 @@ export const ProposalStatusFilter = forwardRef<
     }: ProposalStatusFilterProps,
     ref
   ) => {
-    const { trackUseFilter } = useTrack();
     const [keyword, setKeyword] = useState("");
     const [isDropdown, setIsDropdown] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
diff --git a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
index 523d47c3d..5d4751386 100644
--- a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
+++ b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
@@ -10,7 +10,7 @@ import { matchSorter } from "match-sorter";
 import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState, useRef, forwardRef } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackUseFilter } from "lib/amplitude";
 import {
   FilterChip,
   DropdownContainer,
@@ -46,7 +46,6 @@ export const ProposalTypeFilter = forwardRef<
     }: ProposalTypeFilterProps,
     ref
   ) => {
-    const { trackUseFilter } = useTrack();
     const { data: proposalTypes } = useProposalTypes();
     const [keyword, setKeyword] = useState("");
     const [isDropdown, setIsDropdown] = useState(false);
diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx
index 0ab9c7d4d..337192ff2 100644
--- a/src/lib/pages/proposals/index.tsx
+++ b/src/lib/pages/proposals/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import type { ChangeEvent } from "react";
 import { useState, useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCelatoneApp,
   useCurrentChain,
@@ -27,7 +27,6 @@ import { ProposalStatusFilter } from "./components/ProposalStatusFilter";
 import { ProposalTypeFilter } from "./components/ProposalTypeFilter";
 
 const Proposals = () => {
-  const { track } = useTrack();
   const { currentChainId } = useCelatoneApp();
   useGovConfig({ shouldRedirect: true });
   const router = useRouter();
@@ -71,7 +70,7 @@ const Proposals = () => {
   );
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_PROPOSAL_LIST);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   useEffect(() => {
     setPageSize(10);
diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
index e38136391..576f99d0d 100644
--- a/src/lib/pages/public-project/components/AllProject.tsx
+++ b/src/lib/pages/public-project/components/AllProject.tsx
@@ -3,7 +3,7 @@ import { matchSorter } from "match-sorter";
 import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { TextInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
@@ -18,7 +18,6 @@ const sortByAtoZ = (projects: PublicProjectInfo[]) =>
   projects.sort((a, b) => a.details.name.localeCompare(b.details.name));
 
 export const AllProject = observer(() => {
-  const { track } = useTrack();
   const { data: publicProjectInfo, isLoading } = usePublicProjects();
   const [searchKeyword, setSearchKeyword] = useState("");
   const { getSavedPublicProjects } = usePublicProjectStore();
diff --git a/src/lib/pages/public-project/components/BookmarkButton.tsx b/src/lib/pages/public-project/components/BookmarkButton.tsx
index 9d781fc63..b82f8c2b3 100644
--- a/src/lib/pages/public-project/components/BookmarkButton.tsx
+++ b/src/lib/pages/public-project/components/BookmarkButton.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import type { CSSProperties, MouseEvent } from "react";
 import { useCallback } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import type { IconKeys } from "lib/components/icon";
 import { usePublicProjectStore } from "lib/providers/store";
@@ -67,7 +67,6 @@ const StyledButton = ({
 
 export const BookmarkButton = observer(
   ({ details, slug, hasText = true }: BookmarkButtonProps) => {
-    const { track } = useTrack();
     const { isPublicProjectSaved, savePublicProject, removePublicProject } =
       usePublicProjectStore();
     const toast = useToast({
@@ -88,7 +87,7 @@ export const BookmarkButton = observer(
       toast({
         title: `Bookmarked \u2018${details?.name}\u2019 successfully`,
       });
-    }, [track, savePublicProject, details?.name, details?.logo, slug, toast]);
+    }, [savePublicProject, details?.name, details?.logo, slug, toast]);
 
     const handleRemove = useCallback(() => {
       track(AmpEvent.PUBLIC_REMOVE);
@@ -96,7 +95,7 @@ export const BookmarkButton = observer(
       toast({
         title: `\u2018${details?.name}\u2019 is removed from bookmark`,
       });
-    }, [track, removePublicProject, slug, toast, details?.name]);
+    }, [removePublicProject, slug, toast, details?.name]);
 
     return (
       <Flex alignItems="center">
diff --git a/src/lib/pages/public-project/components/SocialMedia.tsx b/src/lib/pages/public-project/components/SocialMedia.tsx
index 50a172e87..049079151 100644
--- a/src/lib/pages/public-project/components/SocialMedia.tsx
+++ b/src/lib/pages/public-project/components/SocialMedia.tsx
@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 
-import { useTrack } from "lib/amplitude";
+import { trackSocial, trackWebsite } from "lib/amplitude";
 import { CustomIconButton } from "lib/components/button";
 import type { IconKeys } from "lib/components/icon";
 import type { Option, PublicDetail } from "lib/types";
@@ -22,8 +22,6 @@ interface SocialMediaProps {
   details: Option<PublicDetail>;
 }
 export const SocialMedia = ({ details }: SocialMediaProps) => {
-  const { trackWebsite, trackSocial } = useTrack();
-
   if (!details) return null;
   return (
     <Flex
diff --git a/src/lib/pages/public-project/index.tsx b/src/lib/pages/public-project/index.tsx
index d236bd41c..638b973ce 100644
--- a/src/lib/pages/public-project/index.tsx
+++ b/src/lib/pages/public-project/index.tsx
@@ -2,20 +2,19 @@ import { Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { usePublicProjectConfig } from "lib/app-provider";
 import PageContainer from "lib/components/PageContainer";
 
 import { AllProject } from "./components/AllProject";
 
 export const AllPublicProjectsPage = () => {
-  const { track } = useTrack();
   const router = useRouter();
 
   usePublicProjectConfig({ shouldRedirect: true });
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_ALL_PROJECTS);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 3f722559c..a651bdab7 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -2,7 +2,7 @@ import { Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   usePublicProjectConfig,
   useWasmConfig,
@@ -32,7 +32,6 @@ enum TabIndex {
 }
 
 const ProjectDetail = () => {
-  const { track } = useTrack();
   const router = useRouter();
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
@@ -83,7 +82,7 @@ const ProjectDetail = () => {
         });
       }
     }
-  }, [router.isReady, tab, slug, navigate, track]);
+  }, [router.isReady, tab, slug, navigate]);
 
   const overviewCount =
     publicAccounts.length +
diff --git a/src/lib/pages/query/components/JsonQuery.tsx b/src/lib/pages/query/components/JsonQuery.tsx
index 5f90618d8..8e92316fc 100644
--- a/src/lib/pages/query/components/JsonQuery.tsx
+++ b/src/lib/pages/query/components/JsonQuery.tsx
@@ -4,7 +4,7 @@ import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackActionQuery, track } from "lib/amplitude";
 import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
@@ -42,7 +42,6 @@ interface JsonQueryProps {
 }
 
 export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
-  const { track, trackAction } = useTrack();
   const { isFetching: cmdsFetching, queryCmds } = useQueryCmds(contractAddress);
   const lcdEndpoint = useBaseApiRoute("rest");
   const { addActivity } = useContractStore();
@@ -85,7 +84,7 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
   );
 
   const handleQuery = () => {
-    trackAction(AmpEvent.ACTION_QUERY, "json-input");
+    trackActionQuery(AmpEvent.ACTION_QUERY, "json-input", true);
     refetch();
   };
 
diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx
index f84f4ec7e..86e10b5f9 100644
--- a/src/lib/pages/query/components/QueryArea.tsx
+++ b/src/lib/pages/query/components/QueryArea.tsx
@@ -2,7 +2,7 @@ import { Box, Flex, Heading, TabList, Tabs } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useCallback, useEffect, useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseTab } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
@@ -27,7 +27,6 @@ interface QueryAreaProps {
 
 export const QueryArea = observer(
   ({ contractAddress, codeId, codeHash, initialMsg }: QueryAreaProps) => {
-    const { trackUseTab } = useTrack();
     const [tab, setTab] = useState<MessageTabs>();
 
     const { getQuerySchema, getSchemaByCodeHash } = useSchemaStore();
@@ -39,10 +38,11 @@ export const QueryArea = observer(
 
     const handleTabChange = useCallback(
       (nextTab: MessageTabs) => {
+        if (nextTab === tab) return;
         trackUseTab(nextTab);
         setTab(nextTab);
       },
-      [trackUseTab]
+      [tab]
     );
 
     useEffect(() => {
diff --git a/src/lib/pages/query/components/SchemaQuery.tsx b/src/lib/pages/query/components/SchemaQuery.tsx
index fa32fa1c1..c4e07fd61 100644
--- a/src/lib/pages/query/components/SchemaQuery.tsx
+++ b/src/lib/pages/query/components/SchemaQuery.tsx
@@ -1,7 +1,7 @@
 import { Accordion, Button, Flex, Text } from "@chakra-ui/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseExpandAll } from "lib/amplitude";
 import { useBaseApiRoute, useCurrentChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
@@ -32,7 +32,6 @@ export const SchemaQuery = ({
   const { addActivity } = useContractStore();
   const { address } = useCurrentChain();
   const lcdEndpoint = useBaseApiRoute("rest");
-  const { trackUseExpandAll } = useTrack();
 
   const { getSchemaByCodeHash } = useSchemaStore();
   const fullSchema = getSchemaByCodeHash(codeHash);
diff --git a/src/lib/pages/query/components/SchemaQueryComponent.tsx b/src/lib/pages/query/components/SchemaQueryComponent.tsx
index 7db160757..d60798430 100644
--- a/src/lib/pages/query/components/SchemaQueryComponent.tsx
+++ b/src/lib/pages/query/components/SchemaQueryComponent.tsx
@@ -17,7 +17,7 @@ import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
 import { useState, useEffect, useCallback } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, trackActionQuery, track } from "lib/amplitude";
 import { CELATONE_QUERY_KEYS } from "lib/app-provider";
 import { CopyButton } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
@@ -75,7 +75,6 @@ export const SchemaQueryComponent = ({
   opened,
   addActivity,
 }: SchemaQueryComponentProps) => {
-  const { trackActionQuery, track } = useTrack();
   const [resTab, setResTab] = useState<Option<OutputMessageTabs>>(
     OutputMessageTabs.YOUR_SCHEMA
   );
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index 49d7dbcd1..976f63152 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackToQuery } from "lib/amplitude";
 import {
   useInternalNavigate,
   useWasmConfig,
@@ -33,7 +33,6 @@ const Query = observer(() => {
   const [codeId, setCodeId] = useState("");
   const [initialMsg, setInitialMsg] = useState("");
   const isMobile = useMobile();
-  const { trackToQuery } = useTrack();
 
   const goToExecute = () => {
     navigate({
@@ -72,7 +71,7 @@ const Query = observer(() => {
 
       trackToQuery(!!contractAddressParam, !!msgParam);
     }
-  }, [router, onContractSelect, trackToQuery]);
+  }, [router, onContractSelect]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/saved-codes/index.tsx b/src/lib/pages/saved-codes/index.tsx
index 61f4858b5..036958dc5 100644
--- a/src/lib/pages/saved-codes/index.tsx
+++ b/src/lib/pages/saved-codes/index.tsx
@@ -5,7 +5,7 @@ import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate } from "lib/app-provider";
 import { FilterByPermission } from "lib/components/forms";
 import InputWithIcon from "lib/components/InputWithIcon";
@@ -22,7 +22,6 @@ interface CodeFilterState {
 }
 
 const SavedCodes = observer(() => {
-  const { track } = useTrack();
   const router = useRouter();
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
@@ -49,7 +48,7 @@ const SavedCodes = observer(() => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_MY_SAVED_CODES);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/stored-codes/index.tsx b/src/lib/pages/stored-codes/index.tsx
index ec8bc9b20..83dfcd823 100644
--- a/src/lib/pages/stored-codes/index.tsx
+++ b/src/lib/pages/stored-codes/index.tsx
@@ -5,7 +5,7 @@ import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCurrentChain,
   useGovConfig,
@@ -30,7 +30,6 @@ interface CodeFilterState {
 }
 
 const StoredCodes = observer(() => {
-  const { track } = useTrack();
   const router = useRouter();
   const govConfig = useGovConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
@@ -58,7 +57,7 @@ const StoredCodes = observer(() => {
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_MY_STORED_CODES);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
   const { data, isFetching: isUploadAccessFetching } = useUploadAccessParams();
   const { address } = useCurrentChain();
   const isAllowed = Boolean(data?.addresses?.includes(address as Addr));
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index 2666b82e6..4fe2e8686 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/src/lib/pages/tx-details/components/TxHeader.tsx
@@ -1,7 +1,7 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Button, Box, Flex, Heading, Text } from "@chakra-ui/react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseViewJSON } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
@@ -20,7 +20,7 @@ const DotSeparator = () => (
 export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
   const openLcdTab = useOpenTxTab("lcd");
   const isMobile = useMobile();
-  const { trackUseViewJSON } = useTrack();
+
   return (
     <Flex direction="column" gap={2} {...flexProps}>
       <Flex justify="space-between" align="center">
diff --git a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
index 5d414d1e6..8f9407a9a 100644
--- a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
@@ -4,7 +4,7 @@ import { isValidMotionProp, motion } from "framer-motion";
 import type { ReactNode } from "react";
 import { useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseExpand } from "lib/amplitude";
 import { useGetAddressType } from "lib/app-provider";
 import type { LinkType } from "lib/components/ExplorerLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -27,7 +27,6 @@ interface EventBoxProps {
 export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
   const getAddressType = useGetAddressType();
   const [expand, setExpand] = useState(true);
-  const { trackUseExpand } = useTrack();
 
   const receipts = event.attributes.map<TxReceipt>(({ key, value }) => {
     const addrType = getAddressType(value);
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
index 5927e3d63..02b486746 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
@@ -4,7 +4,7 @@ import type { Coin } from "@cosmjs/stargate";
 import { findAttribute } from "@cosmjs/stargate/build/logs";
 import type { ReactNode } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useGetAddressType, useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { IconKeys } from "lib/components/icon";
@@ -28,10 +28,10 @@ export const TxMsgExpand = ({
   assetInfos,
   onClick,
 }: TxMsgExpandProps) => {
+  const isMobile = useMobile();
   const getAddressType = useGetAddressType();
-  const { track } = useTrack();
+
   const { "@type": type, ...body } = msgBody;
-  const isMobile = useMobile();
   const isIBC =
     Boolean(log?.events?.find((event) => event.type === "send_packet")) ||
     type.startsWith("/ibc");
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
index e237e4949..9b59ab01b 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
@@ -2,7 +2,7 @@ import { Flex, Grid } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 import { useState } from "react";
 
-import { useTrack } from "lib/amplitude";
+import { trackUseExpand } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { ShowMoreButton } from "lib/components/button";
 import { UnsupportedTokensModal } from "lib/components/modal/UnsupportedTokensModal";
@@ -28,7 +28,6 @@ const MultiCoin = ({
     amount.filter((coin) => !assetInfos[coin.denom]),
   ];
   const [showMore, setShowMore] = useState(false);
-  const { trackUseExpand } = useTrack();
 
   const hasSupportedCoins = supportedCoins.length > 0;
   const isMobile = useMobile();
diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx
index a912d9f36..29997dc95 100644
--- a/src/lib/pages/tx-details/index.tsx
+++ b/src/lib/pages/tx-details/index.tsx
@@ -2,7 +2,7 @@ import { Flex } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { Loading } from "lib/components/Loading";
@@ -17,7 +17,6 @@ import { MessageSection } from "./components/MessageSection";
 
 const TxDetails = () => {
   const router = useRouter();
-  const { track } = useTrack();
   const hashParam = getFirstQueryParam(router.query.txHash);
   const isMobile = useMobile();
   const {
@@ -41,7 +40,7 @@ const TxDetails = () => {
           mapTxFailed[String(txData?.isTxFailed) as keyof typeof mapTxFailed],
       });
     }
-  }, [router.isReady, txData, txLoading, txFetching, track]);
+  }, [router.isReady, txData, txLoading, txFetching]);
 
   if ((txLoading && txFetching) || assetLoading || !hashParam)
     return <Loading withBorder />;
diff --git a/src/lib/pages/txs/index.tsx b/src/lib/pages/txs/index.tsx
index c175edef1..4dc77b6ef 100644
--- a/src/lib/pages/txs/index.tsx
+++ b/src/lib/pages/txs/index.tsx
@@ -2,18 +2,17 @@ import { Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import PageContainer from "lib/components/PageContainer";
 
 import { TxsTable } from "./components/TxsTable";
 
 const Txs = () => {
   const router = useRouter();
-  const { track } = useTrack();
 
   useEffect(() => {
     if (router.isReady) track(AmpEvent.TO_TXS);
-  }, [router.isReady, track]);
+  }, [router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/upload/upload.tsx b/src/lib/pages/upload/upload.tsx
index 874d56442..08ee4b764 100644
--- a/src/lib/pages/upload/upload.tsx
+++ b/src/lib/pages/upload/upload.tsx
@@ -2,7 +2,7 @@ import { Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AmpEvent, useTrack } from "lib/amplitude";
+import { AmpEvent, track } from "lib/amplitude";
 import type { UploadSucceedCallback } from "lib/app-provider";
 import { useCurrentChain, useInternalNavigate } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -19,7 +19,6 @@ export const Upload = ({
   onComplete: UploadSucceedCallback;
 }) => {
   const router = useRouter();
-  const { track } = useTrack();
   const { address } = useCurrentChain();
   const navigate = useInternalNavigate();
   const { data, isLoading } = useUploadAccessParams();
@@ -36,7 +35,7 @@ export const Upload = ({
     if (!enableUpload && !isLoading)
       navigate({ pathname: "/deploy", replace: true });
     else if (router.isReady) track(AmpEvent.TO_UPLOAD);
-  }, [enableUpload, isLoading, navigate, router.isReady, track]);
+  }, [enableUpload, isLoading, navigate, router.isReady]);
 
   return (
     <WasmPageContainer>
diff --git a/src/lib/providers/amplitude.tsx b/src/lib/providers/amplitude.tsx
index 00cd7e967..1cdc0f54f 100644
--- a/src/lib/providers/amplitude.tsx
+++ b/src/lib/providers/amplitude.tsx
@@ -1,11 +1,73 @@
-import { useAmplitudeInit } from "lib/amplitude";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+import { amp } from "lib/amplitude/Amplitude";
+import {
+  useCelatoneApp,
+  useCurrentChain,
+  useMobile,
+  useNavContext,
+} from "lib/app-provider";
+import { StorageKeys } from "lib/data";
+import { useLocalStorage } from "lib/hooks";
+import { hashAddress } from "lib/utils";
 
 export const AmplitudeProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  useAmplitudeInit();
+  const { pathname } = useRouter();
+  const { address } = useCurrentChain();
+  const { currentChainId } = useCelatoneApp();
+  const isMobile = useMobile();
+  const { isExpand, submenus } = useNavContext();
+  const isDevExpand = submenus[StorageKeys.DevSidebar][0];
+  const isProjectExpand = submenus[StorageKeys.ProjectSidebar][0];
+
+  const [wallets, setWallets] = useLocalStorage<string[]>(
+    StorageKeys.Wallets,
+    []
+  );
+  const [networks, setNetworks] = useLocalStorage<string[]>(
+    StorageKeys.Networks,
+    []
+  );
+  const rawAddressHash = hashAddress(address);
+  if (!!rawAddressHash && !wallets.includes(rawAddressHash))
+    setWallets([...wallets, rawAddressHash]);
+  if (!networks.includes(currentChainId))
+    setNetworks([...networks, currentChainId]);
+
+  useEffect(
+    () =>
+      amp.setUserIdentity(
+        wallets,
+        networks,
+        isExpand,
+        isDevExpand,
+        isProjectExpand
+      ),
+
+    [
+      JSON.stringify(wallets),
+      JSON.stringify(networks),
+      isExpand,
+      isDevExpand,
+      isProjectExpand,
+    ]
+  );
+
+  amp.setMandatoryProperties({
+    page: pathname,
+    rawAddressHash: hashAddress(address) ?? "Not Connected",
+    chain: currentChainId,
+    mobile: isMobile,
+    navSidebar: isExpand,
+    devSidebar: submenus[StorageKeys.DevSidebar][0],
+    projectSidebar: submenus[StorageKeys.ProjectSidebar][0],
+  });
 
   return <>{children}</>;
 };
diff --git a/src/lib/utils/address.ts b/src/lib/utils/address.ts
index 1aa396823..286a4e61b 100644
--- a/src/lib/utils/address.ts
+++ b/src/lib/utils/address.ts
@@ -1,7 +1,14 @@
 import { fromBech32, fromHex, toBech32, toHex } from "@cosmjs/encoding";
 
 import type { AddressReturnType } from "lib/app-provider";
-import type { HexAddr, HumanAddr } from "lib/types";
+import type { HexAddr, HumanAddr, Option } from "lib/types";
+
+import { sha256Hex } from "./sha256";
+
+export const hashAddress = (address: Option<string>): Option<string> => {
+  if (!address) return undefined;
+  return sha256Hex(fromBech32(address).data);
+};
 
 export const getAddressTypeText = (addressType: AddressReturnType) => {
   switch (addressType) {
diff --git a/yarn.lock b/yarn.lock
index c70c7a22c..5746c80ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,84 +7,65 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@amplitude/analytics-browser@^1.13.2", "@amplitude/analytics-browser@^1.8.0":
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@amplitude/analytics-browser/-/analytics-browser-1.13.2.tgz#c2e4d7b8af91873b3fffa06c16653a14ce833c15"
-  integrity sha512-7SUPWVNEXdDB2nTOYD+l5I9b38BfgRIkElPCxHdSYzdFMTid2WwmvmM2mL6O7ioeuRkkg/DdBou5zyOPRiWpJA==
-  dependencies:
-    "@amplitude/analytics-client-common" "^1.2.1"
-    "@amplitude/analytics-core" "^1.2.4"
-    "@amplitude/analytics-types" "^1.3.3"
-    "@amplitude/plugin-page-view-tracking-browser" "^1.0.11"
-    "@amplitude/plugin-web-attribution-browser" "^1.0.11"
-    "@amplitude/ua-parser-js" "^0.7.31"
+"@amplitude/analytics-browser@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-browser/-/analytics-browser-2.3.3.tgz#137d6e4663a75302113d6185aba5cec6e1c506cb"
+  integrity sha512-we1tw7fn+yyf2waAyw/XqBOTEwIEY19qXJ5B9d1Xc1SKNxb6HzU5IpD3zbTKwZLlCGKbkVY6wI3JxuuoYIAI2w==
+  dependencies:
+    "@amplitude/analytics-client-common" "^2.0.7"
+    "@amplitude/analytics-core" "^2.1.0"
+    "@amplitude/analytics-types" "^2.3.0"
+    "@amplitude/plugin-page-view-tracking-browser" "^2.0.13"
+    "@amplitude/plugin-web-attribution-browser" "^2.0.13"
     tslib "^2.4.1"
 
-"@amplitude/analytics-client-common@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@amplitude/analytics-client-common/-/analytics-client-common-1.2.1.tgz#9cb2b5b11f1a0fcb6f88e0004191ffbe858cbfa0"
-  integrity sha512-K4AUetwWMrSO5ON1Jft2ylvLUvCUctI5UWpG7SluqJJRs112ZwkUlRM9YxKVfJuWaCIQfIXhKbhzSrR0d9mXEg==
+"@amplitude/analytics-client-common@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-client-common/-/analytics-client-common-2.0.7.tgz#3fcb3e27fc7d41345396f69405e36b9cb9c024ed"
+  integrity sha512-2LqPMsY6ksS1OTda0EFPLUDFmIVTwU0bDN17+uY9WvpWTEWCAL616X2oNCQ6FTB9zWfCTr8X2I5jSS0y4rzPkw==
   dependencies:
-    "@amplitude/analytics-connector" "^1.5.0"
-    "@amplitude/analytics-core" "^1.2.4"
-    "@amplitude/analytics-types" "^1.3.3"
+    "@amplitude/analytics-connector" "^1.4.8"
+    "@amplitude/analytics-core" "^2.1.0"
+    "@amplitude/analytics-types" "^2.3.0"
     tslib "^2.4.1"
 
-"@amplitude/analytics-connector@^1.5.0":
+"@amplitude/analytics-connector@^1.4.8":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@amplitude/analytics-connector/-/analytics-connector-1.5.0.tgz#89a78b8c6463abe4de1d621db4af6c62f0d62b0a"
   integrity sha512-T8mOYzB9RRxckzhL0NTHwdge9xuFxXEOplC8B1Y3UX3NHa3BLh7DlBUZlCOwQgMc2nxDfnSweDL5S3bhC+W90g==
 
-"@amplitude/analytics-core@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@amplitude/analytics-core/-/analytics-core-1.2.4.tgz#d13ac0b7ce69d19e76ccdc22a6bd52317627e96c"
-  integrity sha512-i4wx7hhjx0vjpudx21UTIM0Uxn+yL7P82Uh4NHxIGVVrTmPG9f9lZvdLQRbYg229CwH9FnmLCAiicRtTTtnq7g==
+"@amplitude/analytics-core@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-core/-/analytics-core-2.1.0.tgz#0575368d1d9ea6473c576f56e4fac80409ae3dd1"
+  integrity sha512-a7/WUacF+R6J8NTYf93gaVd3OjOyF0db2K9Y6+uSZp/xIbsGyR/47WN1R3CYPm4IC9Y9/ukBAHd/p4FsNJbsNg==
   dependencies:
-    "@amplitude/analytics-types" "^1.3.3"
+    "@amplitude/analytics-types" "^2.3.0"
     tslib "^2.4.1"
 
-"@amplitude/analytics-types@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-1.3.3.tgz#c7b2a21e6ab0eb1670cce4d03127b62c373c6ed4"
-  integrity sha512-V4/h+izhG7NyVfIva1uhe6bToI/l5n+UnEomL3KEO9DkFoKiOG7KmXo/fmzfU6UmD1bUEWmy//hUFF16BfrEww==
-
-"@amplitude/marketing-analytics-browser@^1.0.7":
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/@amplitude/marketing-analytics-browser/-/marketing-analytics-browser-1.0.12.tgz#4b0f4c359b9885481f11e6c6222207c51cc65f77"
-  integrity sha512-LOvfQIWrQ7f6M47U6U6qHLRCHZVHxvnXV74apsMSpNhJUxCrqemsNHkp8UGsIXCQeWtVCa9WD9hD8xQkjGvgog==
-  dependencies:
-    "@amplitude/analytics-browser" "^1.13.2"
-    "@amplitude/analytics-client-common" "^1.2.1"
-    "@amplitude/analytics-core" "^1.2.4"
-    "@amplitude/analytics-types" "^1.3.3"
-    "@amplitude/plugin-page-view-tracking-browser" "^1.0.11"
-    "@amplitude/plugin-web-attribution-browser" "^1.0.11"
-    tslib "^2.4.1"
+"@amplitude/analytics-types@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-2.3.0.tgz#3a8c3c1c8eb6ad5bae0a77dcdecb7c590e1bd1dc"
+  integrity sha512-/sMCgimMzDjGZDh5ekHUrwKVi4IJc8/AFUXIxEuJn4wd9QVmThWNeKfszA36z6Ue+UOHhEUEZwruXo3PwXWz/g==
 
-"@amplitude/plugin-page-view-tracking-browser@^1.0.11":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@amplitude/plugin-page-view-tracking-browser/-/plugin-page-view-tracking-browser-1.0.11.tgz#06eb0a85390cbe10424b58c636848190437cb75c"
-  integrity sha512-u7dJ0zRutj3cqbIASDoi1vBLyCYF/N2V9UunJRL/tSCf93C0E+Jr8h1ewuiHCXVv1w85RDC956hebw5AT+mSzA==
+"@amplitude/plugin-page-view-tracking-browser@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@amplitude/plugin-page-view-tracking-browser/-/plugin-page-view-tracking-browser-2.0.13.tgz#7b4f6f9e37f3e037912f5ecb0872c8f0b663e55b"
+  integrity sha512-23X7tEublqLx6cs7o7KXyQ9UdfX0lSVNHDgurhuGdAV8yEeTdg9bRvVHGZETZtnbQj31avD7M2U31nXXaopX3A==
   dependencies:
-    "@amplitude/analytics-client-common" "^1.2.1"
-    "@amplitude/analytics-types" "^1.3.3"
+    "@amplitude/analytics-client-common" "^2.0.7"
+    "@amplitude/analytics-types" "^2.3.0"
     tslib "^2.4.1"
 
-"@amplitude/plugin-web-attribution-browser@^1.0.11":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@amplitude/plugin-web-attribution-browser/-/plugin-web-attribution-browser-1.0.11.tgz#0cbc0db28e7b92efc89b0061786572714aa48591"
-  integrity sha512-hwmGiv1N5YpKO8FU/lYdDIW8lSHl1j13om4W8jXYMfcur0LaEJ/HMhdYCK/MfJ7GzUvtgvCxBDFbYNopTFTVLw==
+"@amplitude/plugin-web-attribution-browser@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@amplitude/plugin-web-attribution-browser/-/plugin-web-attribution-browser-2.0.13.tgz#52dcbc833129e829b722d314f627240dacdc337d"
+  integrity sha512-oVsVxNk/twdcE5r5v+ALX3C443Q1NQGTaKNvbxyO/k3DiEGmKpgC8hSj9S5O7ZdrII63cS+u0IHevRXgmEnplg==
   dependencies:
-    "@amplitude/analytics-client-common" "^1.2.1"
-    "@amplitude/analytics-core" "^1.2.4"
-    "@amplitude/analytics-types" "^1.3.3"
+    "@amplitude/analytics-client-common" "^2.0.7"
+    "@amplitude/analytics-core" "^2.1.0"
+    "@amplitude/analytics-types" "^2.3.0"
     tslib "^2.4.1"
 
-"@amplitude/ua-parser-js@^0.7.31":
-  version "0.7.33"
-  resolved "https://registry.yarnpkg.com/@amplitude/ua-parser-js/-/ua-parser-js-0.7.33.tgz#26441a0fb2e956a64e4ede50fb80b848179bb5db"
-  integrity sha512-wKEtVR4vXuPT9cVEIJkYWnlF++Gx3BdLatPBM+SZ1ztVIvnhdGBZR/mn9x/PzyrMcRlZmyi6L56I2J3doVBnjA==
-
 "@ampproject/remapping@^2.2.0":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"

From 41fa76d45471e96b3f6fcad78eee4ad49e9f8f2e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 3 Nov 2023 15:28:39 +0700
Subject: [PATCH 305/368] fix: uncomment proxy

---
 src/lib/amplitude/Amplitude.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/amplitude/Amplitude.ts b/src/lib/amplitude/Amplitude.ts
index 24e79a117..e7b7f1e53 100644
--- a/src/lib/amplitude/Amplitude.ts
+++ b/src/lib/amplitude/Amplitude.ts
@@ -36,7 +36,7 @@ class Amplitude {
           language: false,
           platform: false,
         },
-        // serverUrl: "/amplitude",
+        serverUrl: "/amplitude",
       });
     }
 

From 4864fc6a98cc95d7a7b42030fd96bc4c3fd39faf Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:19:34 +0700
Subject: [PATCH 306/368] fix: dev tool

---
 src/lib/layout/navbar/Expand.tsx        | 23 +++++++++++------------
 src/lib/layout/navbar/index.tsx         |  5 +++--
 src/lib/pages/account-details/index.tsx | 11 +++++++----
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 50f5edd0c..43e75abb7 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -142,18 +142,17 @@ const NavbarRender = ({ menuInfo, isCurrentPage }: NavbarRenderProps) => {
             submenu={menuInfo.submenu}
             isCurrentPage={isCurrentPage}
           />
-          {menuInfo.subSection &&
-            menuInfo.subSection.map((subitem) => (
-              <div key={subitem.category}>
-                <Text py={2} variant="small" fontWeight={700} color="text.dark">
-                  {subitem.category}
-                </Text>
-                <SubMenuRender
-                  submenu={subitem.submenu}
-                  isCurrentPage={isCurrentPage}
-                />
-              </div>
-            ))}
+          {menuInfo.subSection?.map((subitem) => (
+            <div key={subitem.category}>
+              <Text py={2} variant="small" fontWeight={700} color="text.dark">
+                {subitem.category}
+              </Text>
+              <SubMenuRender
+                submenu={subitem.submenu}
+                isCurrentPage={isCurrentPage}
+              />
+            </div>
+          ))}
         </AccordionPanel>
       </AccordionItem>
     </Accordion>
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 2962ebcc5..d42036fe4 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -79,11 +79,12 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
           },
         ]
       : []),
+    // TODO: combine move and wasm after having This Wallet subsection in move
     ...(move.enabled
       ? [
           {
-            category: "Quick Actions",
-            slug: "quick-actions",
+            category: "Developer Tools",
+            slug: StorageKeys.DevSidebar,
             submenu: [
               {
                 name: "0x1 Page",
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index ca488a494..c4634f810 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -73,6 +73,9 @@ export interface AccountDetailsBodyProps {
   accountAddress: HumanAddr;
 }
 
+const getAddressOnPath = (hexAddress: HexAddr, accountAddress: HumanAddr) =>
+  hexAddress === "0x1" ? hexAddress : accountAddress;
+
 const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 
 const AccountDetailsBody = ({
@@ -124,7 +127,7 @@ const AccountDetailsBody = ({
       navigate({
         pathname: "/accounts/[accountAddress]/[tab]",
         query: {
-          accountAddress,
+          accountAddress: getAddressOnPath(hexAddress, accountAddress),
           tab: nextTab,
         },
         options: {
@@ -132,7 +135,7 @@ const AccountDetailsBody = ({
         },
       });
     },
-    [tab, navigate, accountAddress]
+    [accountAddress, hexAddress, navigate, tab]
   );
 
   useEffect(() => {
@@ -141,7 +144,7 @@ const AccountDetailsBody = ({
         replace: true,
         pathname: "/accounts/[accountAddress]/[tab]",
         query: {
-          accountAddress,
+          accountAddress: getAddressOnPath(hexAddress, accountAddress),
           tab: TabIndex.Overview,
         },
         options: {
@@ -149,7 +152,7 @@ const AccountDetailsBody = ({
         },
       });
     }
-  }, [router.isReady, tab, accountAddress, navigate]);
+  }, [accountAddress, hexAddress, navigate, router.isReady, tab]);
 
   return (
     <>

From bb7956887dc9e15627328ba0437e91d6be509050 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:49:53 +0700
Subject: [PATCH 307/368] fix: enable platform

---
 src/lib/amplitude/Amplitude.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/amplitude/Amplitude.ts b/src/lib/amplitude/Amplitude.ts
index e7b7f1e53..132ab0c27 100644
--- a/src/lib/amplitude/Amplitude.ts
+++ b/src/lib/amplitude/Amplitude.ts
@@ -29,12 +29,15 @@ class Amplitude {
       this.client.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? "", {
         defaultTracking: {
           attribution: true,
+          fileDownloads: true,
+          formInteractions: true,
           pageViews: false,
+          sessions: true,
         },
         trackingOptions: {
           ipAddress: false,
-          language: false,
-          platform: false,
+          language: true,
+          platform: true,
         },
         serverUrl: "/amplitude",
       });

From 8454ea26c2a3475ec567094b838824f7b57b8660 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:58:17 +0700
Subject: [PATCH 308/368] fix: turn off language

---
 src/lib/amplitude/Amplitude.ts                              | 2 +-
 src/lib/layout/Searchbar.tsx                                | 4 ++--
 src/lib/pages/account-details/components/AccountHeader.tsx  | 2 +-
 .../components/delegations/total-card/TotalCardModal.tsx    | 2 +-
 src/lib/services/searchService.ts                           | 6 +++---
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/amplitude/Amplitude.ts b/src/lib/amplitude/Amplitude.ts
index 132ab0c27..5a671d23d 100644
--- a/src/lib/amplitude/Amplitude.ts
+++ b/src/lib/amplitude/Amplitude.ts
@@ -36,7 +36,7 @@ class Amplitude {
         },
         trackingOptions: {
           ipAddress: false,
-          language: true,
+          language: false,
           platform: true,
         },
         serverUrl: "/amplitude",
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index a7e4f0d6f..711e1c961 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -68,7 +68,7 @@ const getRouteOptions = (
   type: Option<SearchResultType>
 ): Nullable<{ pathname: string; query: string[] }> => {
   switch (type) {
-    case "Wallet Address":
+    case "Account Address":
       return {
         pathname: "/accounts/[accountAddress]",
         query: ["accountAddress"],
@@ -232,7 +232,7 @@ const getPlaceholder = ({
   const wasmText = isWasm ? "/ Code ID / Contract Address" : "";
   const poolText = isPool ? "/ Pool ID" : "";
 
-  return `Search by Wallet Address / Tx Hash / Block ${wasmText} ${poolText}`;
+  return `Search by Account Address / Tx Hash / Block ${wasmText} ${poolText}`;
 };
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index f0fc553f6..f2211b70f 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -59,7 +59,7 @@ export const AccountHeader = ({
             direction={{ base: "column", md: "row" }}
           >
             <Text fontWeight={500} color="text.dark" variant="body2">
-              Wallet Address:
+              Account Address:
             </Text>
             <CopyLink
               value={accountAddress}
diff --git a/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx b/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
index 01a1aa973..eeafca660 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/TotalCardModal.tsx
@@ -99,7 +99,7 @@ export const TotalCardModal = ({
             <GridItem>
               <Flex direction="column" gap="2px">
                 <Text variant="body2" fontWeight={600} textColor="text.dark">
-                  Wallet Address
+                  Account Address
                 </Text>
                 <CopyLink value={address} type="user_address" isTruncate />
               </Flex>
diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index 69ecb2c9f..ccd63a44d 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -28,7 +28,7 @@ import { useTxData } from "./txService";
 export type SearchResultType =
   | "Code ID"
   | "Contract Address"
-  | "Wallet Address"
+  | "Account Address"
   | "Transaction Hash"
   | "Proposal ID"
   | "Block"
@@ -99,13 +99,13 @@ export const useSearchHandler = (
 
   const addressResult = useMemo(() => {
     if (isAddr) {
-      return contractData ? "Contract Address" : "Wallet Address";
+      return contractData ? "Contract Address" : "Account Address";
     }
     return (
       icnsAddressData?.address &&
       (icnsAddressData.addressType === "contract_address"
         ? "Contract Address"
-        : "Wallet Address")
+        : "Account Address")
     );
   }, [isAddr, contractData, icnsAddressData]);
 

From b0a0975cf6bc4caced86ef9ef8dc105775a33a02 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 3 Nov 2023 17:01:55 +0700
Subject: [PATCH 309/368] fix: add language

---
 src/lib/amplitude/Amplitude.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/amplitude/Amplitude.ts b/src/lib/amplitude/Amplitude.ts
index 5a671d23d..132ab0c27 100644
--- a/src/lib/amplitude/Amplitude.ts
+++ b/src/lib/amplitude/Amplitude.ts
@@ -36,7 +36,7 @@ class Amplitude {
         },
         trackingOptions: {
           ipAddress: false,
-          language: false,
+          language: true,
           platform: true,
         },
         serverUrl: "/amplitude",

From 7e3942ca0641bba7991838cbaae5aee4b662c829 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 3 Nov 2023 19:14:40 +0700
Subject: [PATCH 310/368] fix: add user agent

---
 package.json                   |  1 +
 src/lib/amplitude/Amplitude.ts | 10 ++++++++++
 yarn.lock                      | 19 +++++++++++++++++--
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 50d614007..7239d960b 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^2.3.3",
     "@amplitude/analytics-types": "^2.3.0",
+    "@amplitude/plugin-user-agent-enrichment-browser": "^1.0.0",
     "@chain-registry/types": "0.17.0",
     "@chakra-ui/anatomy": "^2.1.0",
     "@chakra-ui/card": "^2.1.1",
diff --git a/src/lib/amplitude/Amplitude.ts b/src/lib/amplitude/Amplitude.ts
index 132ab0c27..1a67db51a 100644
--- a/src/lib/amplitude/Amplitude.ts
+++ b/src/lib/amplitude/Amplitude.ts
@@ -1,5 +1,6 @@
 import { Identify, createInstance } from "@amplitude/analytics-browser";
 import type { BrowserClient } from "@amplitude/analytics-types";
+import { userAgentEnrichmentPlugin } from "@amplitude/plugin-user-agent-enrichment-browser";
 
 import type { Nullable } from "lib/types";
 
@@ -26,6 +27,15 @@ class Amplitude {
   private constructor() {
     if (typeof window !== "undefined") {
       this.client = createInstance();
+      this.client.add(
+        userAgentEnrichmentPlugin({
+          osName: true,
+          osVersion: true,
+          deviceManufacturer: true,
+          deviceModel: true,
+        })
+      );
+
       this.client.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? "", {
         defaultTracking: {
           attribution: true,
diff --git a/yarn.lock b/yarn.lock
index 5746c80ab..412bc0719 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,7 +19,7 @@
     "@amplitude/plugin-web-attribution-browser" "^2.0.13"
     tslib "^2.4.1"
 
-"@amplitude/analytics-client-common@^2.0.7":
+"@amplitude/analytics-client-common@^2.0.4", "@amplitude/analytics-client-common@^2.0.7":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@amplitude/analytics-client-common/-/analytics-client-common-2.0.7.tgz#3fcb3e27fc7d41345396f69405e36b9cb9c024ed"
   integrity sha512-2LqPMsY6ksS1OTda0EFPLUDFmIVTwU0bDN17+uY9WvpWTEWCAL616X2oNCQ6FTB9zWfCTr8X2I5jSS0y4rzPkw==
@@ -42,7 +42,7 @@
     "@amplitude/analytics-types" "^2.3.0"
     tslib "^2.4.1"
 
-"@amplitude/analytics-types@^2.3.0":
+"@amplitude/analytics-types@^2.1.1", "@amplitude/analytics-types@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-2.3.0.tgz#3a8c3c1c8eb6ad5bae0a77dcdecb7c590e1bd1dc"
   integrity sha512-/sMCgimMzDjGZDh5ekHUrwKVi4IJc8/AFUXIxEuJn4wd9QVmThWNeKfszA36z6Ue+UOHhEUEZwruXo3PwXWz/g==
@@ -56,6 +56,16 @@
     "@amplitude/analytics-types" "^2.3.0"
     tslib "^2.4.1"
 
+"@amplitude/plugin-user-agent-enrichment-browser@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@amplitude/plugin-user-agent-enrichment-browser/-/plugin-user-agent-enrichment-browser-1.0.1.tgz#17e1f5bd7f63b95092ac99cc071cc0f864ef8735"
+  integrity sha512-kBv4Fgd+EYeW+s8ePPzc7INx4TfC4aDnHjVe1Kd6skcw+eDOSVmJ8Bnfs4qw8gWBEBDNYAlrN0a7r000TsS3Ww==
+  dependencies:
+    "@amplitude/analytics-client-common" "^2.0.4"
+    "@amplitude/analytics-types" "^2.1.1"
+    "@amplitude/ua-parser-js" "^0.7.33"
+    tslib "^2.4.1"
+
 "@amplitude/plugin-web-attribution-browser@^2.0.13":
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/@amplitude/plugin-web-attribution-browser/-/plugin-web-attribution-browser-2.0.13.tgz#52dcbc833129e829b722d314f627240dacdc337d"
@@ -66,6 +76,11 @@
     "@amplitude/analytics-types" "^2.3.0"
     tslib "^2.4.1"
 
+"@amplitude/ua-parser-js@^0.7.33":
+  version "0.7.33"
+  resolved "https://registry.yarnpkg.com/@amplitude/ua-parser-js/-/ua-parser-js-0.7.33.tgz#26441a0fb2e956a64e4ede50fb80b848179bb5db"
+  integrity sha512-wKEtVR4vXuPT9cVEIJkYWnlF++Gx3BdLatPBM+SZ1ztVIvnhdGBZR/mn9x/PzyrMcRlZmyi6L56I2J3doVBnjA==
+
 "@ampproject/remapping@^2.2.0":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"

From ce60298c23a36947f2aa23e00ea73ca84f92326d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 3 Nov 2023 19:17:43 +0700
Subject: [PATCH 311/368] fix: import

---
 src/lib/providers/amplitude.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/providers/amplitude.tsx b/src/lib/providers/amplitude.tsx
index 1cdc0f54f..5ae4278e4 100644
--- a/src/lib/providers/amplitude.tsx
+++ b/src/lib/providers/amplitude.tsx
@@ -2,7 +2,7 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { amp } from "lib/amplitude/Amplitude";
+import { amp } from "lib/amplitude";
 import {
   useCelatoneApp,
   useCurrentChain,

From 89f39f7ee704ef03d234e79bdf459c40acdfc299 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 7 Nov 2023 10:43:15 +0700
Subject: [PATCH 312/368] fix: mintscan track

---
 CHANGELOG.md                        | 1 +
 src/lib/components/ExplorerLink.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bb50e275..c20be368a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -84,6 +84,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#607](https://github.com/alleslabs/celatone-frontend/pull/607) Fix mintscan tracking in internal
 - [#604](https://github.com/alleslabs/celatone-frontend/pull/604) Fix single delegation total card zero state
 - [#603](https://github.com/alleslabs/celatone-frontend/pull/603) Dynamically change returned data by isWasm, isMove
 - [#602](https://github.com/alleslabs/celatone-frontend/pull/602) Fix package version client error
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index bf6974a28..eeab9962d 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -153,7 +153,7 @@ const LinkRender = ({
       rel="noopener noreferrer"
       data-peer
       onClick={(e) => {
-        trackMintScan(type);
+        if (!isInternal) trackMintScan(type);
         e.stopPropagation();
       }}
     >

From 33e42277d1a423765517372f723f19ba455dfefe Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 7 Nov 2023 14:19:14 +0700
Subject: [PATCH 313/368] feat: deprecate stone-10

---
 CHANGELOG.md                                 |  1 +
 src/config/chain/initia.ts                   | 52 +-------------
 src/lib/chain-registry/initiatestnet.ts      | 74 +-------------------
 src/lib/components/modal/MoveCodeSnippet.tsx |  2 +-
 4 files changed, 6 insertions(+), 123 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a36d651f3..743d613e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#607](https://github.com/alleslabs/celatone-frontend/pull/607) Deprecate stone 10
 - [#601](https://github.com/alleslabs/celatone-frontend/pull/601) Add modules in public project
 - [#581](https://github.com/alleslabs/celatone-frontend/pull/581) Support new move input i.e., object, fixed_point, and decimal
 - [#583](https://github.com/alleslabs/celatone-frontend/pull/583) Support Move code snippets
diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index 155033f8c..a3802ec5f 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -3,60 +3,12 @@ import { wallets as keplrWallets } from "@cosmos-kit/keplr";
 import type { ChainConfigs } from "./types";
 
 export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
-  "stone-10": {
-    chain: "initia",
-    registryChainName: "initiatestnet",
-    prettyName: "Initia Testnet 10",
-    lcd: "https://stone-rest.initia.tech",
-    rpc: "https://stone-rpc.initia.tech:443",
-    indexer: "https://stone-10-graphql.alleslabs.dev/v1/graphql",
-    api: "https://celatone-api.alleslabs.dev",
-    wallets: [...keplrWallets],
-    features: {
-      faucet: {
-        enabled: false,
-      },
-      wasm: {
-        enabled: false,
-      },
-      move: {
-        enabled: true,
-        moduleMaxFileSize: 1_048_576,
-        decodeApi: "https://initia-api-jiod42ec2q-as.a.run.app/decode_module",
-      },
-      pool: {
-        enabled: false,
-      },
-      publicProject: {
-        enabled: true,
-      },
-      gov: {
-        enabled: true,
-      },
-      nft: {
-        enabled: true,
-      },
-    },
-    gas: {
-      gasPrice: {
-        tokenPerGas: 0.151,
-        denom: "uinit",
-      },
-      gasAdjustment: 1.5,
-      maxGasLimit: 25_000_000,
-    },
-    explorerLink: {
-      validator: "https://app.initia.tech/validator",
-      proposal: "https://app.initia.tech/proposal",
-    },
-    extra: {},
-  },
   "stone-11": {
     chain: "initia",
     registryChainName: "initiatestnet11",
     prettyName: "Initia Testnet 11",
-    lcd: "https://next-stone-rest.initia.tech",
-    rpc: "https://next-stone-rpc.initia.tech:443",
+    lcd: "https://stone-rest.initia.tech",
+    rpc: "https://stone-rpc.initia.tech:443",
     indexer: "https://stone-11-graphql.alleslabs.dev/v1/graphql",
     api: "https://celatone-api.alleslabs.dev",
     wallets: [...keplrWallets],
diff --git a/src/lib/chain-registry/initiatestnet.ts b/src/lib/chain-registry/initiatestnet.ts
index 7c4eaba91..0d8d02852 100644
--- a/src/lib/chain-registry/initiatestnet.ts
+++ b/src/lib/chain-registry/initiatestnet.ts
@@ -1,53 +1,6 @@
 import type { AssetList, Chain } from "@chain-registry/types";
 
 export const initiatestnet: Chain[] = [
-  {
-    $schema: "../chain.schema.json",
-    chain_name: "initiatestnet",
-    status: "live",
-    network_type: "testnet",
-    pretty_name: "Initia Testnet 10",
-    chain_id: "stone-10",
-    bech32_prefix: "init",
-    daemon_name: "initiad",
-    node_home: "$HOME/.init",
-    key_algos: ["secp256k1"],
-    slip44: 118,
-    fees: {
-      fee_tokens: [
-        {
-          denom: "uinit",
-          fixed_min_gas_price: 0,
-          low_gas_price: 0.151,
-          average_gas_price: 0.151,
-          high_gas_price: 0.151,
-        },
-      ],
-    },
-    staking: {
-      staking_tokens: [
-        {
-          denom: "uinit",
-        },
-      ],
-    },
-    logo_URIs: {
-      png: "",
-      svg: "",
-    },
-    apis: {
-      rpc: [
-        {
-          address: "https://stone-rpc.initia.tech:443",
-        },
-      ],
-      rest: [
-        {
-          address: "https://stone-rest.initia.tech",
-        },
-      ],
-    },
-  },
   {
     $schema: "../chain.schema.json",
     chain_name: "initiatestnet11",
@@ -85,12 +38,12 @@ export const initiatestnet: Chain[] = [
     apis: {
       rpc: [
         {
-          address: "https://next-stone-rpc.initia.tech:443",
+          address: "https://stone-rpc.initia.tech:443",
         },
       ],
       rest: [
         {
-          address: "https://next-stone-rest.initia.tech",
+          address: "https://stone-rest.initia.tech",
         },
       ],
     },
@@ -98,29 +51,6 @@ export const initiatestnet: Chain[] = [
 ];
 
 export const initiatestnetAssets: AssetList[] = [
-  {
-    $schema: "../assetlist.schema.json",
-    chain_name: "initiatestnet",
-    assets: [
-      {
-        description: "The native staking token of Initia.",
-        denom_units: [
-          {
-            denom: "uinit",
-            exponent: 0,
-          },
-          {
-            denom: "init",
-            exponent: 6,
-          },
-        ],
-        base: "uinit",
-        name: "Init",
-        display: "init",
-        symbol: "INIT",
-      },
-    ],
-  },
   {
     $schema: "../assetlist.schema.json",
     chain_name: "initiatestnet11",
diff --git a/src/lib/components/modal/MoveCodeSnippet.tsx b/src/lib/components/modal/MoveCodeSnippet.tsx
index cffde936c..0407a7024 100644
--- a/src/lib/components/modal/MoveCodeSnippet.tsx
+++ b/src/lib/components/modal/MoveCodeSnippet.tsx
@@ -189,7 +189,7 @@ viewModule(moduleAddress, moduleName, fnName);`,
         mode: "javascript",
         snippet: `import { LCDClient, Wallet, MnemonicKey, MsgExecute } from '@initia/initia.js';
 
-const lcd = new LCDClient('https://stone-rest.initia.tech/', {
+const lcd = new LCDClient('${lcdEndpoint}', {
     chainId: '${currentChainId}',
     gasPrices: '${gasPriceStr}',
     gasAdjustment: '2.0',

From c28a4688394b26a418821da049c21525f8eb65fb Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 7 Nov 2023 14:28:29 +0700
Subject: [PATCH 314/368] fix: remove .at

---
 CHANGELOG.md                                  |  1 +
 src/lib/app-fns/tx/common/catchTxError.tsx    |  2 +-
 src/lib/components/EstimatedFeeRender.tsx     |  2 +-
 .../components/table/contracts/TagsCell.tsx   |  2 +-
 src/lib/layout/Searchbar.tsx                  |  2 +-
 .../messages/lockup/MsgLockTokensDetail.tsx   |  3 +-
 .../messages/lp/components/PoolAssetsGrid.tsx |  4 +-
 .../messages/lp/components/PoolLPCard.tsx     |  3 +-
 .../MsgLockAndSuperfluidDelegateDetail.tsx    |  3 +-
 .../swap/MsgSwapExactAmountInAction.tsx       |  2 +-
 .../swap/MsgSwapExactAmountOutAction.tsx      |  2 +-
 .../swap/MsgSwapExactAmountOutDetail.tsx      |  2 +-
 .../messages/swap/components/PoolSwap.tsx     |  4 +-
 .../pages/tx-details/components/TxInfo.tsx    |  2 +-
 .../tx-details/components/TxInfoMobile.tsx    |  2 +-
 .../components/tx-message/TxMsgExpand.tsx     |  5 +--
 src/lib/services/contractService.ts           | 39 +++++++++----------
 src/lib/services/move/moduleService.ts        |  8 ++--
 src/lib/utils/codePermission.ts               |  2 +-
 src/lib/utils/extractMsgType.ts               |  4 +-
 20 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c20be368a..193e7eea5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -84,6 +84,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#610](https://github.com/alleslabs/celatone-frontend/pull/610) Remove `.at()` from code
 - [#607](https://github.com/alleslabs/celatone-frontend/pull/607) Fix mintscan tracking in internal
 - [#604](https://github.com/alleslabs/celatone-frontend/pull/604) Fix single delegation total card zero state
 - [#603](https://github.com/alleslabs/celatone-frontend/pull/603) Dynamically change returned data by isWasm, isMove
diff --git a/src/lib/app-fns/tx/common/catchTxError.tsx b/src/lib/app-fns/tx/common/catchTxError.tsx
index 7f30f616a..2bb94a5e9 100644
--- a/src/lib/app-fns/tx/common/catchTxError.tsx
+++ b/src/lib/app-fns/tx/common/catchTxError.tsx
@@ -42,7 +42,7 @@ export const catchTxError = (
   onTxFailed?: () => void
 ): OperatorFunction<TxResultRendering, TxResultRendering> => {
   return catchError((error: Error) => {
-    const txHash = error.message.match("(?:tx )(.*?)(?= at)")?.at(1);
+    const txHash = error.message.match("(?:tx )(.*?)(?= at)")?.[1];
     if (error.message === "Request rejected") {
       trackTxRejected();
     } else {
diff --git a/src/lib/components/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx
index a37624669..823efad1b 100644
--- a/src/lib/components/EstimatedFeeRender.tsx
+++ b/src/lib/components/EstimatedFeeRender.tsx
@@ -23,7 +23,7 @@ export const EstimatedFeeRender = ({
       </>
     );
 
-  const coin = estimatedFee?.amount.at(0);
+  const coin = estimatedFee?.amount[0];
   if (!coin) return <>--</>;
 
   const chainAssetInfo = assetInfos?.[coin.denom];
diff --git a/src/lib/components/table/contracts/TagsCell.tsx b/src/lib/components/table/contracts/TagsCell.tsx
index 96bbf997b..ef97a9828 100644
--- a/src/lib/components/table/contracts/TagsCell.tsx
+++ b/src/lib/components/table/contracts/TagsCell.tsx
@@ -42,7 +42,7 @@ export const TagsCell = ({
         }}
       >
         {tags.length ? (
-          <Tag size={tagSize}>{tags.at(0)}</Tag>
+          <Tag size={tagSize}>{tags[0]}</Tag>
         ) : (
           <Text variant="body2" color="text.dark">
             Not Tagged
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 711e1c961..49ef3629d 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -299,7 +299,7 @@ const Searchbar = () => {
           break;
         }
         case "Enter":
-          handleSelectResult(results.at(cursor ?? 0));
+          handleSelectResult(results[cursor ?? 0]);
           onClose?.();
           break;
         default:
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index 50cd0e1ba..679a2ec94 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -49,8 +49,7 @@ export const MsgLockTokensDetail = ({
       (event) =>
         event.type.includes("lock") &&
         event.attributes.some((attr) => attr.value.includes(poolDenom))
-    )
-    ?.attributes.at(0)?.value;
+    )?.attributes[0]?.value;
 
   return (
     <Flex w="full" direction="column" gap={6}>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
index ac9c1045f..3001117f9 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
@@ -37,14 +37,14 @@ export const PoolAssetsGrid = ({
     .find((log) => log.msg_index === msgIndex)
     ?.events?.find((event) => event.type === "coin_received");
 
-  const assetAttr = receivedEvent?.attributes.at(1)?.value;
+  const assetAttr = receivedEvent?.attributes[1]?.value;
   let eventAssets = assetAttr ? coinsFromStr(assetAttr) : undefined;
   if (msgSwapDenom) {
     const specifiedAsset = eventAssets?.find(
       (asset) => asset.denom === msgSwapDenom
     );
 
-    const swapAttr = receivedEvent?.attributes.at(-1)?.value;
+    const swapAttr = receivedEvent?.attributes[-1]?.value;
     const swapAsset = swapAttr ? coinsFromStr(swapAttr)[0] : undefined;
 
     eventAssets =
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
index 271dccd76..6deaf4516 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
@@ -35,8 +35,7 @@ export const PoolLPCard = ({
   const eventShareAmount = txData?.logs
     .find((log) => log.msg_index === msgIndex)
     ?.events?.find((event) => event.type === "coin_received")
-    ?.attributes.at(3)
-    ?.value.slice(0, -poolDenom.length);
+    ?.attributes[3]?.value.slice(0, -poolDenom.length);
 
   const shareAmount = msgShareAmount ?? eventShareAmount;
   if (!shareAmount)
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index 499ee29e3..8e5545473 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -59,8 +59,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
       (event) =>
         event.type.includes("lock") &&
         event.attributes.some((attr) => attr.value.includes(poolDenom))
-    )
-    ?.attributes.at(0)?.value;
+    )?.attributes[0]?.value;
 
   return (
     <Flex w="full" direction="column" gap={6}>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index 3be7362fe..baea2f806 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -17,7 +17,7 @@ export const MsgSwapExactAmountInAction = ({
   ampCopierSection,
 }: MsgSwapExactAmountInActionProps) => {
   const inAssetInfo = assetInfos?.[msg.token_in.denom];
-  const tokenOutDenom = msg.routes.at(-1)?.tokenOutDenom ?? "";
+  const tokenOutDenom = msg.routes[-1]?.tokenOutDenom ?? "";
   const outAssetInfo = assetInfos?.[tokenOutDenom];
   return (
     <Flex gap={1} alignItems="center" flexWrap="wrap">
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
index 8e549d288..9a8681652 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -16,7 +16,7 @@ export const MsgSwapExactAmountOutAction = ({
   assetInfos,
   ampCopierSection,
 }: MsgSwapExactAmountOutActionProps) => {
-  const tokenInDenom = msg.routes.at(0)?.tokenInDenom ?? "";
+  const tokenInDenom = msg.routes[0]?.tokenInDenom ?? "";
   const inAssetInfo = assetInfos?.[tokenInDenom];
   const outAssetInfo = assetInfos?.[msg.token_out.denom];
   return (
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index c4f147e33..1b98a0590 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -32,7 +32,7 @@ export const MsgSwapExactAmountOutDetail = ({
     .concat(msg.token_out.denom);
   const routes = msg.routes.map((route, index) => ({
     poolId: route.poolId,
-    tokenOutDenom: outDenoms.at(index + 1) ?? "",
+    tokenOutDenom: outDenoms[index + 1] ?? "",
   }));
 
   return (
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index d9bbe5f12..4bf1e911d 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -35,11 +35,11 @@ export const PoolSwap = ({
     );
 
   // Get the token-in from the third attribute of the event e.g. 10000utoken
-  const inAsset = swapEvent.attributes.at(3)?.value ?? "";
+  const inAsset = swapEvent.attributes[3]?.value ?? "";
   const { amount: inAmount, denom: inDenom } = coinsFromStr(inAsset)[0];
 
   // Get the token-out from the last attribute of the event e.g. 10000utoken
-  const outAsset = swapEvent.attributes.at(-1)?.value ?? "";
+  const outAsset = swapEvent.attributes[-1]?.value ?? "";
   const { amount: outAmount, denom: outDenom } = coinsFromStr(outAsset)[0];
 
   return (
diff --git a/src/lib/pages/tx-details/components/TxInfo.tsx b/src/lib/pages/tx-details/components/TxInfo.tsx
index 2950aa375..9ce4a19e0 100644
--- a/src/lib/pages/tx-details/components/TxInfo.tsx
+++ b/src/lib/pages/tx-details/components/TxInfo.tsx
@@ -22,7 +22,7 @@ const Container = chakra(Flex, {
 });
 
 export const TxInfo = ({ txData, assetInfos, ...flexProps }: TxInfoProps) => {
-  const feeCoin = txData.tx.auth_info.fee?.amount.at(0);
+  const feeCoin = txData.tx.auth_info.fee?.amount[0];
   const assetInfo = feeCoin ? assetInfos?.[feeCoin.denom] : undefined;
   return (
     <Container {...flexProps}>
diff --git a/src/lib/pages/tx-details/components/TxInfoMobile.tsx b/src/lib/pages/tx-details/components/TxInfoMobile.tsx
index a02fed8ee..9fe4e395a 100644
--- a/src/lib/pages/tx-details/components/TxInfoMobile.tsx
+++ b/src/lib/pages/tx-details/components/TxInfoMobile.tsx
@@ -28,7 +28,7 @@ export const TxInfoMobile = ({
   assetInfos,
   ...flexProps
 }: TxInfoMobileProps) => {
-  const feeCoin = txData.tx.auth_info.fee?.amount.at(0);
+  const feeCoin = txData.tx.auth_info.fee?.amount[0];
   const assetInfo = feeCoin ? assetInfos?.[feeCoin.denom] : undefined;
   return (
     <Container {...flexProps}>
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
index 02b486746..e7accd737 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
@@ -120,8 +120,7 @@ export const TxMsgExpand = ({
       content = (
         <Flex display="inline">
           Execute{" "}
-          <span style={{ fontWeight: 700 }}>{Object.keys(body.msg).at(0)}</span>{" "}
-          on{" "}
+          <span style={{ fontWeight: 700 }}>{Object.keys(body.msg)[0]}</span> on{" "}
           <ExplorerLink
             type="contract_address"
             value={body.contract}
@@ -196,7 +195,7 @@ export const TxMsgExpand = ({
     case "/cosmos.bank.v1beta1.MsgSend":
       {
         const toAddress = body.to_address as Addr;
-        const singleCoin = body.amount.at(0) as Coin;
+        const singleCoin = body.amount[0] as Coin;
         const assetInfo = assetInfos?.[singleCoin.denom];
         const assetText =
           body.amount.length > 1
diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts
index 4baab1faf..2aa1e1393 100644
--- a/src/lib/services/contractService.ts
+++ b/src/lib/services/contractService.ts
@@ -111,15 +111,15 @@ export const useInstantiateDetailByContractQuery = (
     return indexerGraphClient
       .request(getInstantiateDetailByContractQueryDocument, { contractAddress })
       .then<InstantiateDetail>(({ contracts_by_pk }) => ({
-        createdHeight: contracts_by_pk?.contract_histories?.at(0)?.block.height,
+        createdHeight: contracts_by_pk?.contract_histories?.[0]?.block.height,
         createdTime: parseDateOpt(
-          contracts_by_pk?.contract_histories?.at(0)?.block.timestamp
+          contracts_by_pk?.contract_histories?.[0]?.block.timestamp
         ),
         initMsg: contracts_by_pk?.init_msg,
         initTxHash: parseTxHashOpt(contracts_by_pk?.transaction?.hash),
-        initProposalId: contracts_by_pk?.contract_proposals.at(0)?.proposal.id,
+        initProposalId: contracts_by_pk?.contract_proposals[0]?.proposal.id,
         initProposalTitle:
-          contracts_by_pk?.contract_proposals.at(0)?.proposal.title,
+          contracts_by_pk?.contract_proposals[0]?.proposal.title,
       }));
   }, [contractAddress, indexerGraphClient]);
 
@@ -146,13 +146,11 @@ export const useContractListQuery = (): UseQueryResult<ContractInfo[]> => {
         .then(({ contracts }) =>
           contracts.map<ContractInfo>((contract) => ({
             contractAddress: contract.address as ContractAddr,
-            instantiator: contract.init_by.at(0)?.account.address as Addr,
+            instantiator: contract.init_by[0]?.account.address as Addr,
             label: contract.label,
             admin: contract.admin?.address as Addr,
             latestUpdater: undefined,
-            latestUpdated: parseDateOpt(
-              contract.init_by.at(0)?.block.timestamp
-            ),
+            latestUpdated: parseDateOpt(contract.init_by[0]?.block.timestamp),
             remark: undefined,
           }))
         ),
@@ -390,15 +388,15 @@ export const useContractListByCodeIdPagination = (
       .then(({ contracts }) =>
         contracts.map<ContractInfo>((contract) => ({
           contractAddress: contract.address as ContractAddr,
-          instantiator: contract.init_by.at(0)?.account.address as Addr,
+          instantiator: contract.init_by[0]?.account.address as Addr,
           label: contract.label,
           admin: contract.admin?.address as Addr,
-          latestUpdater: contract.contract_histories.at(0)?.account
+          latestUpdater: contract.contract_histories[0]?.account
             .address as Addr,
           latestUpdated: parseDateOpt(
-            contract.contract_histories.at(0)?.block.timestamp
+            contract.contract_histories[0]?.block.timestamp
           ),
-          remark: contract.contract_histories.at(0)?.remark,
+          remark: contract.contract_histories[0]?.remark,
         }))
       );
   }, [codeId, indexerGraphClient, offset, pageSize]);
@@ -471,16 +469,15 @@ export const useContractListByWalletAddressPagination = (
       .then(({ contracts }) =>
         contracts.map<ContractInfo>((contractFromWallet) => ({
           contractAddress: contractFromWallet.address as ContractAddr,
-          instantiator: contractFromWallet.init_by.at(0)?.account
-            .address as Addr,
+          instantiator: contractFromWallet.init_by[0]?.account.address as Addr,
           label: contractFromWallet.label,
           admin: contractFromWallet.admin?.address as Addr,
-          latestUpdater: contractFromWallet.contract_histories.at(0)?.account
+          latestUpdater: contractFromWallet.contract_histories[0]?.account
             .address as Addr,
           latestUpdated: parseDateOpt(
-            contractFromWallet.contract_histories.at(0)?.block.timestamp
+            contractFromWallet.contract_histories[0]?.block.timestamp
           ),
-          remark: contractFromWallet.contract_histories.at(0)?.remark,
+          remark: contractFromWallet.contract_histories[0]?.remark,
         }))
       );
   }, [indexerGraphClient, offset, pageSize, walletAddress]);
@@ -524,15 +521,15 @@ export const useContractListByAdminPagination = (
       .then(({ contracts }) =>
         contracts.map<ContractInfo>((contractAdmin) => ({
           contractAddress: contractAdmin.address as ContractAddr,
-          instantiator: contractAdmin.init_by.at(0)?.account.address as Addr,
+          instantiator: contractAdmin.init_by[0]?.account.address as Addr,
           label: contractAdmin.label,
           admin: contractAdmin.admin?.address as Addr,
-          latestUpdater: contractAdmin.contract_histories.at(0)?.account
+          latestUpdater: contractAdmin.contract_histories[0]?.account
             .address as Addr,
           latestUpdated: parseDateOpt(
-            contractAdmin.contract_histories.at(0)?.block.timestamp
+            contractAdmin.contract_histories[0]?.block.timestamp
           ),
-          remark: contractAdmin.contract_histories.at(0)?.remark,
+          remark: contractAdmin.contract_histories[0]?.remark,
         }))
       );
   }, [indexerGraphClient, offset, pageSize, walletAddress]);
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index cb0c73916..02ba086e4 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -336,13 +336,13 @@ export const useModuleDetailsQuery = (
         if (!target) throw new Error(`Cannot find module with id ${moduleId}`);
         return {
           publisherVmAddress: target.publisher_vm_address.vm_address as HexAddr,
-          createdHeight: target.module_histories?.at(0)?.block.height,
+          createdHeight: target.module_histories?.[0]?.block.height,
           createdTime: parseDateOpt(
-            target.module_histories?.at(0)?.block.timestamp
+            target.module_histories?.[0]?.block.timestamp
           ),
           initTxHash: parseTxHashOpt(target.publish_transaction?.hash),
-          initProposalId: target.module_proposals.at(0)?.proposal.id,
-          initProposalTitle: target.module_proposals.at(0)?.proposal.title,
+          initProposalId: target.module_proposals[0]?.proposal.id,
+          initProposalTitle: target.module_proposals[0]?.proposal.title,
         };
       });
   };
diff --git a/src/lib/utils/codePermission.ts b/src/lib/utils/codePermission.ts
index f2236fd8e..222867acc 100644
--- a/src/lib/utils/codePermission.ts
+++ b/src/lib/utils/codePermission.ts
@@ -33,7 +33,7 @@ export const getPermissionHelper = (
         return address && permissionAddresses.includes(address)
           ? "You are designated to instantiate contract from this code"
           : `This code can only be instantiated by ${truncate(
-              permissionAddresses.at(0)
+              permissionAddresses[0]
             )}`;
       default:
         return "Valid Code ID";
diff --git a/src/lib/utils/extractMsgType.ts b/src/lib/utils/extractMsgType.ts
index ba3363909..990469054 100644
--- a/src/lib/utils/extractMsgType.ts
+++ b/src/lib/utils/extractMsgType.ts
@@ -1,7 +1,7 @@
 import { ActionMsgType, type Option } from "lib/types";
 
 export const extractMsgType = (typePath: string): string =>
-  typePath.split(".").at(-1) || "";
+  typePath.split(".")[-1] || "";
 
 /**
  * Returns what action type to be render.
@@ -20,6 +20,8 @@ export const extractMsgType = (typePath: string): string =>
  * @param msgTypesSupportList - list of boolean of message type that celatone supported
  * @returns Returns action type
  *
+ *
+ *
  */
 export const getActionMsgType = (msgTypesSupportList: Option<boolean>[]) => {
   const existLength = msgTypesSupportList.filter((type) => type).length;

From db6bec33cfac7a7ad3e86b7e2d16ce315c6a7e22 Mon Sep 17 00:00:00 2001
From: Songwong Tasneeyapant <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 7 Nov 2023 14:31:21 +0700
Subject: [PATCH 315/368] fix: update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 743d613e2..04b3d09d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#607](https://github.com/alleslabs/celatone-frontend/pull/607) Deprecate stone 10
+- [#608](https://github.com/alleslabs/celatone-frontend/pull/608) Deprecate stone 10
 - [#601](https://github.com/alleslabs/celatone-frontend/pull/601) Add modules in public project
 - [#581](https://github.com/alleslabs/celatone-frontend/pull/581) Support new move input i.e., object, fixed_point, and decimal
 - [#583](https://github.com/alleslabs/celatone-frontend/pull/583) Support Move code snippets

From 29bf80b9c43d776382f4a9feade8e061b88320c9 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 7 Nov 2023 14:39:51 +0700
Subject: [PATCH 316/368] fix(components): add saved accounts page

---
 CHANGELOG.md                           |  1 +
 src/lib/layout/navbar/index.tsx        | 17 ++++++++++
 src/lib/pages/saved-accounts/index.tsx | 44 ++++++++++++++++++++++++++
 src/lib/providers/store.tsx            |  5 +++
 src/lib/stores/root.ts                 |  3 ++
 src/pages/[network]/saved-accounts.tsx |  3 ++
 src/pages/saved-accounts.tsx           |  3 ++
 7 files changed, 76 insertions(+)
 create mode 100644 src/lib/pages/saved-accounts/index.tsx
 create mode 100644 src/pages/[network]/saved-accounts.tsx
 create mode 100644 src/pages/saved-accounts.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bb50e275..9f799ca1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#611](https://github.com/alleslabs/celatone-frontend/pull/611) Add saved accounts page
 - [#601](https://github.com/alleslabs/celatone-frontend/pull/601) Add modules in public project
 - [#581](https://github.com/alleslabs/celatone-frontend/pull/581) Support new move input i.e., object, fixed_point, and decimal
 - [#583](https://github.com/alleslabs/celatone-frontend/pull/583) Support Move code snippets
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index d42036fe4..f158dda8d 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -107,6 +107,18 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
                 icon: "code" as IconKeys,
               },
             ],
+            subSection: [
+              {
+                category: "This Device",
+                submenu: [
+                  {
+                    name: "Saved Accounts",
+                    slug: "/saved-accounts",
+                    icon: "admin" as IconKeys,
+                  },
+                ],
+              },
+            ],
           },
         ]
       : []),
@@ -163,6 +175,11 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
               {
                 category: "This Device",
                 submenu: [
+                  {
+                    name: "Saved Accounts",
+                    slug: "/saved-accounts",
+                    icon: "admin" as IconKeys,
+                  },
                   {
                     name: "Saved Codes",
                     slug: "/saved-codes",
diff --git a/src/lib/pages/saved-accounts/index.tsx b/src/lib/pages/saved-accounts/index.tsx
new file mode 100644
index 000000000..2642669e2
--- /dev/null
+++ b/src/lib/pages/saved-accounts/index.tsx
@@ -0,0 +1,44 @@
+import { Badge, Button, Flex, Heading } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+
+import PageContainer from "lib/components/PageContainer";
+import { EmptyState } from "lib/components/state";
+
+const SavedAccounts = observer(() => {
+  return (
+    <PageContainer>
+      <Flex alignItems="center" justifyContent="space-between" mb={4}>
+        <Flex align="center">
+          <Heading
+            variant="h5"
+            as="h5"
+            minH="36px"
+            display="flex"
+            alignItems="center"
+          >
+            Saved Accounts
+          </Heading>
+          <Badge variant="primary" ml={2}>
+            0
+          </Badge>
+        </Flex>
+        <Button>save account button</Button>
+      </Flex>
+      {/* <InputWithIcon
+          placeholder="Search with Code ID or Code Name"
+          value={keyword}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            setValue("keyword", e.target.value)
+          }
+          size="lg"
+        /> */}
+      <EmptyState
+        imageVariant="empty"
+        message="Account saved using Celatone will display here. Saved accounts are stored locally on your device."
+        withBorder
+      />
+    </PageContainer>
+  );
+});
+
+export default SavedAccounts;
diff --git a/src/lib/providers/store.tsx b/src/lib/providers/store.tsx
index 298637b41..ffd557449 100644
--- a/src/lib/providers/store.tsx
+++ b/src/lib/providers/store.tsx
@@ -45,6 +45,11 @@ export function useContractStore() {
   return contractStore;
 }
 
+// export function useAccountStore() {
+//   const { accountStore } = useStore();
+//   return accountStore;
+// }
+
 export function usePublicProjectStore() {
   const { publicProjectStore } = useStore();
   return publicProjectStore;
diff --git a/src/lib/stores/root.ts b/src/lib/stores/root.ts
index 19696e075..a6a054d60 100644
--- a/src/lib/stores/root.ts
+++ b/src/lib/stores/root.ts
@@ -8,6 +8,8 @@ export class RootStore {
 
   contractStore: ContractStore;
 
+  // accountStore: AccountStore;
+
   publicProjectStore: PublicProjectStore;
 
   schemaStore: SchemaStore;
@@ -15,6 +17,7 @@ export class RootStore {
   constructor() {
     this.codeStore = new CodeStore();
     this.contractStore = new ContractStore();
+    // this.accountStore = new AccountStore();
     this.publicProjectStore = new PublicProjectStore();
     this.schemaStore = new SchemaStore();
   }
diff --git a/src/pages/[network]/saved-accounts.tsx b/src/pages/[network]/saved-accounts.tsx
new file mode 100644
index 000000000..8945363e0
--- /dev/null
+++ b/src/pages/[network]/saved-accounts.tsx
@@ -0,0 +1,3 @@
+import SavedAccounts from "lib/pages/saved-accounts";
+
+export default SavedAccounts;
diff --git a/src/pages/saved-accounts.tsx b/src/pages/saved-accounts.tsx
new file mode 100644
index 000000000..8945363e0
--- /dev/null
+++ b/src/pages/saved-accounts.tsx
@@ -0,0 +1,3 @@
+import SavedAccounts from "lib/pages/saved-accounts";
+
+export default SavedAccounts;

From e100d235775c8f0844aa23d4b8546174916e4b1e Mon Sep 17 00:00:00 2001
From: Songwong Tasneeyapant <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 7 Nov 2023 15:15:34 +0700
Subject: [PATCH 317/368] fix: update initia.ts

---
 src/config/chain/initia.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts
index a3802ec5f..5acb8edec 100644
--- a/src/config/chain/initia.ts
+++ b/src/config/chain/initia.ts
@@ -47,8 +47,8 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
       maxGasLimit: 25_000_000,
     },
     explorerLink: {
-      validator: "https://next.app.initia.tech/validator",
-      proposal: "https://next.app.initia.tech/proposal",
+      validator: "https://app.initia.tech/validator",
+      proposal: "https://app.initia.tech/proposal",
     },
     extra: {},
   },

From f09d96aed438ccf770d6b7fe2abda10b2f44f533 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 7 Nov 2023 15:59:35 +0700
Subject: [PATCH 318/368] fix: tx-ui-detail

---
 CHANGELOG.md                                               | 1 +
 src/lib/components/tx/TxReceiptRender.tsx                  | 7 +------
 .../tx-details/components/tx-message/TxMsgDetails.tsx      | 6 +++++-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d46200f9..72ab363cd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#612](https://github.com/alleslabs/celatone-frontend/pull/612) Add saved accounts page
 - [#607](https://github.com/alleslabs/celatone-frontend/pull/607) Fix mintscan tracking in internal
 - [#604](https://github.com/alleslabs/celatone-frontend/pull/604) Fix single delegation total card zero state
 - [#603](https://github.com/alleslabs/celatone-frontend/pull/603) Dynamically change returned data by isWasm, isMove
diff --git a/src/lib/components/tx/TxReceiptRender.tsx b/src/lib/components/tx/TxReceiptRender.tsx
index 62e50ba5d..463a7e95c 100644
--- a/src/lib/components/tx/TxReceiptRender.tsx
+++ b/src/lib/components/tx/TxReceiptRender.tsx
@@ -49,12 +49,7 @@ const variantStyle: Record<
 };
 
 const ReceiptRow = ({ title, value, html }: TxReceipt) => (
-  <Flex
-    fontSize="14px"
-    w="full"
-    gap={title.includes("Event Log") ? 2 : 0}
-    direction={{ base: "column", md: "row" }}
-  >
+  <Flex fontSize="14px" w="full" direction={{ base: "column", md: "row" }}>
     <Text variant="body2" mb={{ base: 1, md: 0 }}>
       {title}
     </Text>
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
index eb5d7b71a..e5dc3480e 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
@@ -49,7 +49,11 @@ export const TxMsgDetails = ({
       overflow="hidden"
       transition="all 0.25s ease-in-out"
     >
-      <TxReceiptRender variant="tx-page" receipts={receipts} gap={3} />
+      <TxReceiptRender
+        variant="tx-page"
+        receipts={receipts}
+        gap={{ base: 4, md: 3 }}
+      />
     </Flex>
   );
 };

From df1ea177bc337bbe01e8251e78c1ba0105c0fea9 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 7 Nov 2023 16:04:46 +0700
Subject: [PATCH 319/368] fix(components): add saved accounts modal ui

---
 CHANGELOG.md                                  |   1 +
 src/config/project/index.ts                   |   8 +-
 src/config/project/types.ts                   |   9 +-
 src/lib/components/modal/ActionModal.tsx      |  41 +++--
 .../modal/account/SaveNewAccount.tsx          | 161 ++++++++++++++++++
 src/lib/components/modal/account/index.ts     |   1 +
 src/lib/hooks/useGetMaxLengthError.ts         |  18 +-
 .../components/SaveAccountButton.tsx          |  12 ++
 src/lib/pages/saved-accounts/index.tsx        |  35 ++--
 src/lib/stores/account.ts                     |   7 +
 10 files changed, 254 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/components/modal/account/SaveNewAccount.tsx
 create mode 100644 src/lib/components/modal/account/index.ts
 create mode 100644 src/lib/pages/saved-accounts/components/SaveAccountButton.tsx
 create mode 100644 src/lib/stores/account.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f799ca1d..f328a4939 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#613](https://github.com/alleslabs/celatone-frontend/pull/613) Add saved accounts modal ui
 - [#611](https://github.com/alleslabs/celatone-frontend/pull/611) Add saved accounts page
 - [#601](https://github.com/alleslabs/celatone-frontend/pull/601) Add modules in public project
 - [#581](https://github.com/alleslabs/celatone-frontend/pull/581) Support new move input i.e., object, fixed_point, and decimal
diff --git a/src/config/project/index.ts b/src/config/project/index.ts
index 7bad4eea7..c4dcca27f 100644
--- a/src/config/project/index.ts
+++ b/src/config/project/index.ts
@@ -3,9 +3,11 @@ import type { ProjectConstants } from "./types";
 export * from "./types";
 
 export const PROJECT_CONSTANTS: ProjectConstants = {
-  maxListNameLength: 50,
+  maxAccountNameLength: 50,
+  maxAccountDescriptionLength: 250,
+  maxProposalTitleLength: 255,
+  maxCodeNameLength: 50,
   maxContractNameLength: 50,
   maxContractDescriptionLength: 250,
-  maxCodeNameLength: 50,
-  maxProposalTitleLength: 255,
+  maxListNameLength: 50,
 };
diff --git a/src/config/project/types.ts b/src/config/project/types.ts
index 2c986e4d3..e0960077e 100644
--- a/src/config/project/types.ts
+++ b/src/config/project/types.ts
@@ -1,10 +1,13 @@
 export interface ProjectConstants {
+  maxAccountNameLength: number;
+  maxAccountDescriptionLength: number;
+
+  // proposal
+  maxProposalTitleLength: number;
+
   // wasm
   maxListNameLength: number;
   maxContractNameLength: number;
   maxContractDescriptionLength: number;
   maxCodeNameLength: number;
-
-  // proposal
-  maxProposalTitleLength: number;
 }
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index f5ec56487..088d655e6 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -37,6 +37,7 @@ export interface ActionModalProps {
   otherVariant?: string;
   noCloseButton?: boolean;
   closeOnOverlayClick?: boolean;
+  buttonRemark?: string;
 }
 export function ActionModal({
   icon = "edit-solid",
@@ -55,6 +56,7 @@ export function ActionModal({
   otherVariant = "outline-primary",
   noCloseButton = false,
   closeOnOverlayClick = true,
+  buttonRemark = "Information will be stored locally on your device.",
 }: ActionModalProps) {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -105,18 +107,33 @@ export function ActionModal({
           {!noCloseButton && <ModalCloseButton color="gray.600" />}
           <ModalBody>{children}</ModalBody>
           <ModalFooter>
-            <Flex w="full" justifyContent="center" gap={2}>
-              <Button
-                w="200px"
-                onClick={handleOnMain}
-                variant={mainVariant}
-                isDisabled={disabledMain}
-              >
-                {mainBtnTitle}
-              </Button>
-              <Button w="200px" variant={otherVariant} onClick={handleOnOther}>
-                {otherBtnTitle}
-              </Button>
+            <Flex
+              alignItems="center"
+              w="full"
+              justifyContent="center"
+              direction="column"
+              gap={4}
+            >
+              <Flex gap={2}>
+                <Button
+                  w="200px"
+                  onClick={handleOnMain}
+                  variant={mainVariant}
+                  isDisabled={disabledMain}
+                >
+                  {mainBtnTitle}
+                </Button>
+                <Button
+                  w="200px"
+                  variant={otherVariant}
+                  onClick={handleOnOther}
+                >
+                  {otherBtnTitle}
+                </Button>
+              </Flex>
+              <Text variant="body3" color="text.dark">
+                {buttonRemark}
+              </Text>
             </Flex>
           </ModalFooter>
         </ModalContent>
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
new file mode 100644
index 000000000..09e18267f
--- /dev/null
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -0,0 +1,161 @@
+import type { ButtonProps } from "@chakra-ui/react";
+import { Button, Flex, useToast } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { ActionModal } from "../ActionModal";
+import {
+  useCelatoneApp,
+  useExampleAddresses,
+  useValidateAddress,
+} from "lib/app-provider";
+import type { FormStatus } from "lib/components/forms";
+import { ControllerInput, ControllerTextarea } from "lib/components/forms";
+import { CustomIcon } from "lib/components/icon";
+import { useGetMaxLengthError } from "lib/hooks";
+import type { HumanAddr } from "lib/types";
+
+interface SaveNewAccountDetail {
+  address: HumanAddr;
+  name: string;
+  description: string;
+}
+interface SaveNewAccountModalProps {
+  buttonProps: ButtonProps;
+}
+
+export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
+  const toast = useToast();
+  const { user: exampleUserAddress } = useExampleAddresses();
+  const { validateUserAddress, validateContractAddress } = useValidateAddress();
+  const { constants } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
+
+  const defaultValues: SaveNewAccountDetail = {
+    address: "" as HumanAddr,
+    name: "",
+    description: "",
+  };
+
+  const {
+    control,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm<SaveNewAccountDetail>({
+    defaultValues,
+    mode: "all",
+  });
+
+  const [status, setStatus] = useState<FormStatus>({ state: "init" });
+
+  const addressState = watch("address");
+  const nameState = watch("name");
+  const descriptionState = watch("description");
+  const resetForm = (resetAddress = true) => {
+    reset({
+      ...defaultValues,
+      address: resetAddress ? "" : addressState,
+    });
+  };
+
+  useEffect(() => {
+    if (addressState.trim().length === 0) {
+      setStatus({
+        state: "init",
+      });
+    } else {
+      setStatus({
+        state: "loading",
+      });
+      const timeoutId = setTimeout(() => {
+        const errUser = validateUserAddress(addressState);
+        const errContract = validateContractAddress(addressState);
+        if (errUser && errContract)
+          setStatus({
+            state: "error",
+            message: errUser,
+          });
+        else
+          setStatus({
+            state: "success",
+            message: "Valid Address",
+          });
+      }, 1000);
+      return () => clearTimeout(timeoutId);
+    }
+    return () => {};
+  }, [addressState, validateUserAddress, validateContractAddress]);
+
+  const handleSave = () => {
+    // TODO: abstract toast to template later
+    toast({
+      title: `Saved .. to Saved Codes`,
+      status: "success",
+      duration: 5000,
+      isClosable: false,
+      position: "bottom-right",
+      icon: <CustomIcon name="bookmark" />,
+    });
+  };
+
+  return (
+    <ActionModal
+      title="Save New Account"
+      icon="bookmark-solid"
+      trigger={<Button as="button" {...buttonProps} />}
+      mainBtnTitle="Save New Account"
+      mainAction={handleSave}
+      otherAction={resetForm}
+      disabledMain={
+        status.state !== "success" || !!errors.name || !!errors.description
+      }
+      otherBtnTitle="Cancel"
+      buttonRemark="Saved accounts are stored locally on your device."
+    >
+      {/* Save other stored codes to your &ldquo;Saved Codes&rdquo; list */}
+      <Flex direction="column" gap={6}>
+        <ControllerInput
+          name="address"
+          control={control}
+          label="Account Address"
+          variant="fixed-floating"
+          placeholder={`ex. ${exampleUserAddress}`}
+          status={status}
+          labelBgColor="gray.900"
+          isRequired
+        />
+        <ControllerInput
+          name="name"
+          control={control}
+          label="Account Name"
+          variant="fixed-floating"
+          placeholder="ex. Celatone Account 1"
+          labelBgColor="gray.900"
+          isRequired
+          rules={{
+            maxLength: constants.maxAccountNameLength,
+          }}
+          error={
+            errors.name && getMaxLengthError(nameState.length, "account_name")
+          }
+        />
+        <ControllerTextarea
+          name="description"
+          control={control}
+          label="Account Description"
+          placeholder="Help understanding what this account do ..."
+          variant="fixed-floating"
+          labelBgColor="gray.900"
+          rules={{
+            maxLength: constants.maxAccountDescriptionLength,
+          }}
+          error={
+            errors.description &&
+            getMaxLengthError(descriptionState.length, "contract_desc")
+          }
+        />
+      </Flex>
+    </ActionModal>
+  );
+}
diff --git a/src/lib/components/modal/account/index.ts b/src/lib/components/modal/account/index.ts
new file mode 100644
index 000000000..aa0c4ebf0
--- /dev/null
+++ b/src/lib/components/modal/account/index.ts
@@ -0,0 +1 @@
+export * from "./SaveNewAccount";
diff --git a/src/lib/hooks/useGetMaxLengthError.ts b/src/lib/hooks/useGetMaxLengthError.ts
index 02e15b5de..e7ae6043c 100644
--- a/src/lib/hooks/useGetMaxLengthError.ts
+++ b/src/lib/hooks/useGetMaxLengthError.ts
@@ -3,10 +3,12 @@ import { useCallback } from "react";
 import { useCelatoneApp } from "lib/app-provider";
 
 type MaxLengthType =
+  | "account_name"
+  | "account_desc"
+  | "proposal_title"
+  | "code_name"
   | "contract_name"
   | "contract_desc"
-  | "code_name"
-  | "proposal_title"
   | "list_name";
 
 export const useGetMaxLengthError = () => {
@@ -14,18 +16,22 @@ export const useGetMaxLengthError = () => {
   return useCallback(
     (currentLength: number, type: MaxLengthType) => {
       const maxLengthMap: Record<MaxLengthType, number> = {
+        account_name: constants.maxAccountNameLength,
+        account_desc: constants.maxAccountDescriptionLength,
+        proposal_title: constants.maxProposalTitleLength,
+        code_name: constants.maxCodeNameLength,
         contract_name: constants.maxContractNameLength,
         contract_desc: constants.maxContractDescriptionLength,
-        code_name: constants.maxCodeNameLength,
-        proposal_title: constants.maxProposalTitleLength,
         list_name: constants.maxListNameLength,
       };
 
       const fieldMap: Record<MaxLengthType, string> = {
+        account_name: "Account Name",
+        account_desc: "Account Description",
+        proposal_title: "Proposal title",
+        code_name: "Code name",
         contract_name: "Contract name",
         contract_desc: "Contract description",
-        code_name: "Code name",
-        proposal_title: "Proposal title",
         list_name: "List name",
       };
 
diff --git a/src/lib/pages/saved-accounts/components/SaveAccountButton.tsx b/src/lib/pages/saved-accounts/components/SaveAccountButton.tsx
new file mode 100644
index 000000000..cbec3c5e7
--- /dev/null
+++ b/src/lib/pages/saved-accounts/components/SaveAccountButton.tsx
@@ -0,0 +1,12 @@
+import { CustomIcon } from "lib/components/icon";
+import { SaveNewAccountModal } from "lib/components/modal/account";
+
+export const SaveAccountButton = () => (
+  <SaveNewAccountModal
+    buttonProps={{
+      variant: "outline-primary",
+      leftIcon: <CustomIcon name="bookmark" />,
+      children: "Save New Address",
+    }}
+  />
+);
diff --git a/src/lib/pages/saved-accounts/index.tsx b/src/lib/pages/saved-accounts/index.tsx
index 2642669e2..4ce030676 100644
--- a/src/lib/pages/saved-accounts/index.tsx
+++ b/src/lib/pages/saved-accounts/index.tsx
@@ -1,28 +1,33 @@
-import { Badge, Button, Flex, Heading } from "@chakra-ui/react";
+import { Badge, Text, Flex, Heading } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
 
+import { SaveAccountButton } from "./components/SaveAccountButton";
+
 const SavedAccounts = observer(() => {
   return (
     <PageContainer>
       <Flex alignItems="center" justifyContent="space-between" mb={4}>
-        <Flex align="center">
-          <Heading
-            variant="h5"
-            as="h5"
-            minH="36px"
-            display="flex"
-            alignItems="center"
-          >
-            Saved Accounts
-          </Heading>
-          <Badge variant="primary" ml={2}>
-            0
-          </Badge>
+        <Flex direction="column">
+          <Flex alignItems="center">
+            <Heading
+              variant="h5"
+              as="h5"
+              minH="36px"
+              display="flex"
+              alignItems="center"
+            >
+              Saved Accounts
+            </Heading>
+            <Badge variant="primary" ml={2}>
+              0
+            </Badge>
+          </Flex>
+          <Text>Your saved accounts will be stored locally</Text>
         </Flex>
-        <Button>save account button</Button>
+        <SaveAccountButton />
       </Flex>
       {/* <InputWithIcon
           placeholder="Search with Code ID or Code Name"
diff --git a/src/lib/stores/account.ts b/src/lib/stores/account.ts
new file mode 100644
index 000000000..4019fc3ad
--- /dev/null
+++ b/src/lib/stores/account.ts
@@ -0,0 +1,7 @@
+import type { HumanAddr } from "lib/types";
+
+export interface AccountLocalInfo {
+  address: HumanAddr;
+  name: string;
+  description?: string;
+}

From a25c26984f3236bc111a50fa70aeb7657748d5e6 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 7 Nov 2023 17:19:52 +0700
Subject: [PATCH 320/368] fix(components): wire up modal

---
 .../modal/account/SaveNewAccount.tsx          | 81 ++++++++++---------
 src/lib/hooks/useHandleSave.tsx               | 36 ++++++++-
 src/lib/providers/store.tsx                   |  8 +-
 src/lib/stores/account.ts                     | 80 +++++++++++++++++-
 src/lib/stores/root.ts                        |  5 +-
 5 files changed, 164 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index 09e18267f..13c975785 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -1,5 +1,5 @@
 import type { ButtonProps } from "@chakra-ui/react";
-import { Button, Flex, useToast } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 
@@ -11,12 +11,12 @@ import {
 } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { ControllerInput, ControllerTextarea } from "lib/components/forms";
-import { CustomIcon } from "lib/components/icon";
-import { useGetMaxLengthError } from "lib/hooks";
-import type { HumanAddr } from "lib/types";
+import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
+import { useAccountStore } from "lib/providers/store";
+import type { Addr } from "lib/types";
 
 interface SaveNewAccountDetail {
-  address: HumanAddr;
+  address: Addr;
   name: string;
   description: string;
 }
@@ -25,14 +25,14 @@ interface SaveNewAccountModalProps {
 }
 
 export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
-  const toast = useToast();
   const { user: exampleUserAddress } = useExampleAddresses();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
+  const { isAccountSaved } = useAccountStore();
 
   const defaultValues: SaveNewAccountDetail = {
-    address: "" as HumanAddr,
+    address: "" as Addr,
     name: "",
     description: "",
   };
@@ -68,36 +68,47 @@ export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
       setStatus({
         state: "loading",
       });
-      const timeoutId = setTimeout(() => {
-        const errUser = validateUserAddress(addressState);
-        const errContract = validateContractAddress(addressState);
-        if (errUser && errContract)
-          setStatus({
-            state: "error",
-            message: errUser,
-          });
-        else
-          setStatus({
-            state: "success",
-            message: "Valid Address",
-          });
-      }, 1000);
-      return () => clearTimeout(timeoutId);
+      if (isAccountSaved(addressState)) {
+        setStatus({
+          state: "error",
+          message: "You already saved this address",
+        });
+      } else {
+        const timeoutId = setTimeout(() => {
+          const errUser = validateUserAddress(addressState);
+          const errContract = validateContractAddress(addressState);
+          if (errUser && errContract)
+            setStatus({
+              state: "error",
+              message: errUser,
+            });
+          // TODO validate contract type online
+          else
+            setStatus({
+              state: "success",
+              message: "Valid Address",
+            });
+        }, 1000);
+        return () => clearTimeout(timeoutId);
+      }
     }
     return () => {};
-  }, [addressState, validateUserAddress, validateContractAddress]);
+  }, [
+    addressState,
+    isAccountSaved,
+    validateUserAddress,
+    validateContractAddress,
+  ]);
 
-  const handleSave = () => {
-    // TODO: abstract toast to template later
-    toast({
-      title: `Saved .. to Saved Codes`,
-      status: "success",
-      duration: 5000,
-      isClosable: false,
-      position: "bottom-right",
-      icon: <CustomIcon name="bookmark" />,
-    });
-  };
+  const handleSave = useHandleAccountSave({
+    title: `Saved ${nameState} `,
+    address: addressState,
+    name: nameState,
+    description: descriptionState,
+    actions: () => {
+      resetForm();
+    },
+  });
 
   return (
     <ActionModal
@@ -113,7 +124,6 @@ export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
       otherBtnTitle="Cancel"
       buttonRemark="Saved accounts are stored locally on your device."
     >
-      {/* Save other stored codes to your &ldquo;Saved Codes&rdquo; list */}
       <Flex direction="column" gap={6}>
         <ControllerInput
           name="address"
@@ -132,7 +142,6 @@ export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
           variant="fixed-floating"
           placeholder="ex. Celatone Account 1"
           labelBgColor="gray.900"
-          isRequired
           rules={{
             maxLength: constants.maxAccountNameLength,
           }}
diff --git a/src/lib/hooks/useHandleSave.tsx b/src/lib/hooks/useHandleSave.tsx
index ebecc7da5..cbd1cc431 100644
--- a/src/lib/hooks/useHandleSave.tsx
+++ b/src/lib/hooks/useHandleSave.tsx
@@ -1,7 +1,7 @@
 import { useToast } from "@chakra-ui/react";
 
 import { CustomIcon } from "lib/components/icon";
-import { useContractStore } from "lib/providers/store";
+import { useAccountStore, useContractStore } from "lib/providers/store";
 import type { Addr, ContractAddr, LVPair, Option } from "lib/types";
 
 import { useUserKey } from "./useUserKey";
@@ -18,6 +18,14 @@ interface UseHandleContractSaveProps {
   actions?: () => void;
 }
 
+interface UseHandleAccountSaveProps {
+  title: string;
+  address: Addr;
+  name: string;
+  description?: string;
+  actions?: () => void;
+}
+
 export const useHandleContractSave = ({
   title,
   contractAddress,
@@ -57,3 +65,29 @@ export const useHandleContractSave = ({
     });
   };
 };
+
+export const useHandleAccountSave = ({
+  title,
+  address,
+  name,
+  description,
+  actions,
+}: UseHandleAccountSaveProps) => {
+  const toast = useToast();
+  const userKey = useUserKey();
+  const { updateAccountLocalInfo } = useAccountStore();
+  return (inputName?: string) => {
+    updateAccountLocalInfo(userKey, address, inputName ?? name, description);
+
+    actions?.();
+
+    toast({
+      title,
+      status: "success",
+      duration: 5000,
+      isClosable: false,
+      position: "bottom-right",
+      icon: <CustomIcon name="check-circle-solid" color="success.main" />,
+    });
+  };
+};
diff --git a/src/lib/providers/store.tsx b/src/lib/providers/store.tsx
index ffd557449..f62afd2b1 100644
--- a/src/lib/providers/store.tsx
+++ b/src/lib/providers/store.tsx
@@ -45,10 +45,10 @@ export function useContractStore() {
   return contractStore;
 }
 
-// export function useAccountStore() {
-//   const { accountStore } = useStore();
-//   return accountStore;
-// }
+export function useAccountStore() {
+  const { accountStore } = useStore();
+  return accountStore;
+}
 
 export function usePublicProjectStore() {
   const { publicProjectStore } = useStore();
diff --git a/src/lib/stores/account.ts b/src/lib/stores/account.ts
index 4019fc3ad..a35570452 100644
--- a/src/lib/stores/account.ts
+++ b/src/lib/stores/account.ts
@@ -1,7 +1,81 @@
-import type { HumanAddr } from "lib/types";
+import { makeAutoObservable } from "mobx";
+import { isHydrated, makePersistable } from "mobx-persist-store";
+
+import type { Addr, Dict } from "lib/types";
 
 export interface AccountLocalInfo {
-  address: HumanAddr;
-  name: string;
+  address: Addr;
+  name?: string;
   description?: string;
 }
+export class AccountStore {
+  private userKey: string;
+
+  savedAccounts: Dict<string, Addr[]>;
+
+  accountLocalInfo: Dict<
+    string, // user key
+    Record<string, AccountLocalInfo>
+  >;
+
+  constructor() {
+    this.savedAccounts = {};
+    this.accountLocalInfo = {};
+    this.userKey = "";
+    makeAutoObservable(this, {}, { autoBind: true });
+    makePersistable(this, {
+      name: "AccountStore",
+      properties: ["savedAccounts", "accountLocalInfo"],
+    });
+  }
+
+  get isHydrated(): boolean {
+    return isHydrated(this);
+  }
+
+  isAccountUserKeyExist(): boolean {
+    return !!this.userKey;
+  }
+
+  setAccountUserKey(userKey: string) {
+    this.userKey = userKey;
+  }
+
+  getAccountLocalInfo(address: Addr): AccountLocalInfo | undefined {
+    return this.accountLocalInfo[this.userKey]?.[address];
+  }
+
+  updateAccountLocalInfo(
+    userKey: string,
+    address: Addr,
+    name?: string,
+    description?: string
+  ) {
+    const savedAccounts = this.savedAccounts[this.userKey];
+    if (!savedAccounts) this.savedAccounts[this.userKey] = [address];
+    else if (!savedAccounts.includes(address)) savedAccounts.push(address);
+
+    const accountLocalInfo = this.accountLocalInfo[userKey]?.[address] ?? {
+      address,
+      name,
+      description,
+    };
+
+    if (name !== undefined)
+      accountLocalInfo.name = name.trim().length ? name.trim() : undefined;
+
+    if (description !== undefined)
+      accountLocalInfo.description = description.trim().length
+        ? description.trim()
+        : undefined;
+
+    this.accountLocalInfo[userKey] = {
+      ...this.accountLocalInfo[userKey],
+      [address]: accountLocalInfo,
+    };
+  }
+
+  isAccountSaved(address: Addr): boolean {
+    return this.savedAccounts[this.userKey]?.includes(address) ?? false;
+  }
+}
diff --git a/src/lib/stores/root.ts b/src/lib/stores/root.ts
index a6a054d60..cd49cc149 100644
--- a/src/lib/stores/root.ts
+++ b/src/lib/stores/root.ts
@@ -1,3 +1,4 @@
+import { AccountStore } from "./account";
 import { CodeStore } from "./code";
 import { ContractStore } from "./contract";
 import { PublicProjectStore } from "./project";
@@ -8,7 +9,7 @@ export class RootStore {
 
   contractStore: ContractStore;
 
-  // accountStore: AccountStore;
+  accountStore: AccountStore;
 
   publicProjectStore: PublicProjectStore;
 
@@ -17,7 +18,7 @@ export class RootStore {
   constructor() {
     this.codeStore = new CodeStore();
     this.contractStore = new ContractStore();
-    // this.accountStore = new AccountStore();
+    this.accountStore = new AccountStore();
     this.publicProjectStore = new PublicProjectStore();
     this.schemaStore = new SchemaStore();
   }

From 094156c7020611707ba3afa9074cdeb5780606b2 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 8 Nov 2023 10:45:49 +0700
Subject: [PATCH 321/368] fix: -1 indexing

---
 src/lib/utils/extractMsgType.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/utils/extractMsgType.ts b/src/lib/utils/extractMsgType.ts
index 990469054..c602ec768 100644
--- a/src/lib/utils/extractMsgType.ts
+++ b/src/lib/utils/extractMsgType.ts
@@ -1,7 +1,7 @@
 import { ActionMsgType, type Option } from "lib/types";
 
 export const extractMsgType = (typePath: string): string =>
-  typePath.split(".")[-1] || "";
+  typePath.split(".").pop() || "";
 
 /**
  * Returns what action type to be render.

From a24c90697a4bceeb0ee0d4501504e3c6f2105734 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 8 Nov 2023 11:05:23 +0700
Subject: [PATCH 322/368] fix: -1 indexing

---
 .../tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx  | 3 ++-
 .../pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx      | 2 +-
 .../tables/pool-txs/messages/swap/components/PoolSwap.tsx      | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
index 3001117f9..a1cfef505 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
@@ -44,7 +44,8 @@ export const PoolAssetsGrid = ({
       (asset) => asset.denom === msgSwapDenom
     );
 
-    const swapAttr = receivedEvent?.attributes[-1]?.value;
+    const swapAttr =
+      receivedEvent?.attributes[receivedEvent.attributes.length - 1]?.value;
     const swapAsset = swapAttr ? coinsFromStr(swapAttr)[0] : undefined;
 
     eventAssets =
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index baea2f806..91837c4fc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -17,7 +17,7 @@ export const MsgSwapExactAmountInAction = ({
   ampCopierSection,
 }: MsgSwapExactAmountInActionProps) => {
   const inAssetInfo = assetInfos?.[msg.token_in.denom];
-  const tokenOutDenom = msg.routes[-1]?.tokenOutDenom ?? "";
+  const tokenOutDenom = msg.routes[msg.routes.length - 1]?.tokenOutDenom ?? "";
   const outAssetInfo = assetInfos?.[tokenOutDenom];
   return (
     <Flex gap={1} alignItems="center" flexWrap="wrap">
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index 4bf1e911d..2d1bbeddc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -39,7 +39,8 @@ export const PoolSwap = ({
   const { amount: inAmount, denom: inDenom } = coinsFromStr(inAsset)[0];
 
   // Get the token-out from the last attribute of the event e.g. 10000utoken
-  const outAsset = swapEvent.attributes[-1]?.value ?? "";
+  const outAsset =
+    swapEvent.attributes[swapEvent.attributes.length - 1]?.value ?? "";
   const { amount: outAmount, denom: outDenom } = coinsFromStr(outAsset)[0];
 
   return (

From 5f6bef4f557f2396565dda1a0639878e08be2d43 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 8 Nov 2023 11:34:35 +0700
Subject: [PATCH 323/368] fix: disable saved acc

---
 src/lib/layout/navbar/index.tsx | 34 ++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index f158dda8d..1ca6ee8f9 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -107,18 +107,18 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
                 icon: "code" as IconKeys,
               },
             ],
-            subSection: [
-              {
-                category: "This Device",
-                submenu: [
-                  {
-                    name: "Saved Accounts",
-                    slug: "/saved-accounts",
-                    icon: "admin" as IconKeys,
-                  },
-                ],
-              },
-            ],
+            // subSection: [
+            //   {
+            //     category: "This Device",
+            //     submenu: [
+            //       {
+            //         name: "Saved Accounts",
+            //         slug: "/saved-accounts",
+            //         icon: "admin" as IconKeys,
+            //       },
+            //     ],
+            //   },
+            // ],
           },
         ]
       : []),
@@ -175,11 +175,11 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
               {
                 category: "This Device",
                 submenu: [
-                  {
-                    name: "Saved Accounts",
-                    slug: "/saved-accounts",
-                    icon: "admin" as IconKeys,
-                  },
+                  // {
+                  //   name: "Saved Accounts",
+                  //   slug: "/saved-accounts",
+                  //   icon: "admin" as IconKeys,
+                  // },
                   {
                     name: "Saved Codes",
                     slug: "/saved-codes",

From fcf69e183020a87df3f9241011287a1486b826bd Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 8 Nov 2023 11:36:22 +0700
Subject: [PATCH 324/368] fix: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d46200f9..68a5277c5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#614](https://github.com/alleslabs/celatone-frontend/pull/614) Disabled saved account for now
 - [#607](https://github.com/alleslabs/celatone-frontend/pull/607) Fix mintscan tracking in internal
 - [#604](https://github.com/alleslabs/celatone-frontend/pull/604) Fix single delegation total card zero state
 - [#603](https://github.com/alleslabs/celatone-frontend/pull/603) Dynamically change returned data by isWasm, isMove

From 500220d135ea25657156c7365e8d1715eba496e6 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 8 Nov 2023 13:58:07 +0700
Subject: [PATCH 325/368] fix: useEffect in pool page

---
 CHANGELOG.md                  |  1 +
 src/lib/pages/pools/index.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 152d4aed0..a776d3644 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#615](https://github.com/alleslabs/celatone-frontend/pull/615) Fix useEffect on pool page
 - [#612](https://github.com/alleslabs/celatone-frontend/pull/612) Add saved accounts page
 - [#614](https://github.com/alleslabs/celatone-frontend/pull/614) Disabled saved account for now
 - [#607](https://github.com/alleslabs/celatone-frontend/pull/607) Fix mintscan tracking in internal
diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx
index 7fe48edf7..405904931 100644
--- a/src/lib/pages/pools/index.tsx
+++ b/src/lib/pages/pools/index.tsx
@@ -53,12 +53,12 @@ export const PoolIndex = () => {
 
   useEffect(() => {
     if (
-      supportedPoolCount !== undefined &&
-      unsupportedPoolCount !== undefined
+      supportedPoolCount &&
+      unsupportedPoolCount &&
+      supportedPoolCount === 0 &&
+      unsupportedPoolCount > 0
     ) {
-      if (supportedPoolCount === 0 && unsupportedPoolCount > 0)
-        handleTabChange(TabIndex.Unsupported);
-      else handleTabChange(TabIndex.Supported);
+      handleTabChange(TabIndex.Unsupported);
     }
   }, [handleTabChange, supportedPoolCount, unsupportedPoolCount]);
 

From 0a8663e2e0f3212fa0ffbe19d675d55dcb74bf32 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 8 Nov 2023 17:02:50 +0700
Subject: [PATCH 326/368] fix(components): add saved accounts table and crud

---
 CHANGELOG.md                                  |   2 +-
 src/lib/app-provider/contexts/app.tsx         |  12 +-
 .../json-schema/EditSchemaButtons.tsx         |   3 +-
 src/lib/components/modal/ActionModal.tsx      |  10 +-
 .../modal/account/EditSavedAccount.tsx        | 117 ++++++++++++++++++
 .../modal/account/RemoveSavedAccount.tsx      |  65 ++++++++++
 .../modal/account/SaveNewAccount.tsx          |   6 +-
 src/lib/components/state/ZeroState.tsx        |  24 ++++
 .../table/accounts/SavedAccountsNameCell.tsx  |  28 +++++
 .../table/accounts/SavedAccountsTable.tsx     |  37 ++++++
 .../accounts/SavedAccountsTableHeader.tsx     |  17 +++
 .../table/accounts/SavedAccountsTableRow.tsx  |  86 +++++++++++++
 .../components/SavedAccountsSection.tsx       |   0
 src/lib/pages/saved-accounts/index.tsx        |  59 ++++++---
 src/lib/stores/account.ts                     |  11 ++
 src/lib/styles/theme/components/button.ts     |  16 +++
 16 files changed, 468 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/components/modal/account/EditSavedAccount.tsx
 create mode 100644 src/lib/components/modal/account/RemoveSavedAccount.tsx
 create mode 100644 src/lib/components/table/accounts/SavedAccountsNameCell.tsx
 create mode 100644 src/lib/components/table/accounts/SavedAccountsTable.tsx
 create mode 100644 src/lib/components/table/accounts/SavedAccountsTableHeader.tsx
 create mode 100644 src/lib/components/table/accounts/SavedAccountsTableRow.tsx
 create mode 100644 src/lib/pages/saved-accounts/components/SavedAccountsSection.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f328a4939..29e9dbc32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#613](https://github.com/alleslabs/celatone-frontend/pull/613) Add saved accounts modal ui
+- [#613](https://github.com/alleslabs/celatone-frontend/pull/613) Add table for saved accounts and add save, remove and edit modal
 - [#611](https://github.com/alleslabs/celatone-frontend/pull/611) Add saved accounts page
 - [#601](https://github.com/alleslabs/celatone-frontend/pull/601) Add modules in public project
 - [#581](https://github.com/alleslabs/celatone-frontend/pull/581) Support new move input i.e., object, fixed_point, and decimal
diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx
index cc66c6315..8d1f25fcd 100644
--- a/src/lib/app-provider/contexts/app.tsx
+++ b/src/lib/app-provider/contexts/app.tsx
@@ -24,6 +24,7 @@ import {
   useCodeStore,
   useContractStore,
   usePublicProjectStore,
+  useAccountStore,
 } from "lib/providers/store";
 import { formatUserKey } from "lib/utils";
 
@@ -51,6 +52,7 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
   const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
   const { setContractUserKey, isContractUserKeyExist } = useContractStore();
   const { setProjectUserKey, isProjectUserKeyExist } = usePublicProjectStore();
+  const { setAccountUserKey, isAccountUserKeyExist } = useAccountStore();
   const { setModalTheme } = useModalTheme();
 
   const [currentChainName, setCurrentChainName] = useState<string>();
@@ -85,8 +87,15 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
       setCodeUserKey(userKey);
       setContractUserKey(userKey);
       setProjectUserKey(userKey);
+      setAccountUserKey(userKey);
     }
-  }, [currentChainName, setCodeUserKey, setContractUserKey, setProjectUserKey]);
+  }, [
+    currentChainName,
+    setCodeUserKey,
+    setContractUserKey,
+    setProjectUserKey,
+    setAccountUserKey,
+  ]);
 
   // Disable "Leave page" alert
   useEffect(() => {
@@ -113,6 +122,7 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
     !isCodeUserKeyExist() ||
     !isContractUserKeyExist() ||
     !isProjectUserKeyExist() ||
+    !isAccountUserKeyExist() ||
     !currentChainId
   )
     return <LoadingOverlay />;
diff --git a/src/lib/components/json-schema/EditSchemaButtons.tsx b/src/lib/components/json-schema/EditSchemaButtons.tsx
index 1a3fca5e6..fe7f70f47 100644
--- a/src/lib/components/json-schema/EditSchemaButtons.tsx
+++ b/src/lib/components/json-schema/EditSchemaButtons.tsx
@@ -40,9 +40,8 @@ export const EditSchemaButtons = ({
         trigger={
           <Tooltip label="Delete your attached schema">
             <IconButton
-              variant="ghost-gray"
+              variant="ghost-gray-icon"
               size="sm"
-              color="gray.600"
               icon={<CustomIcon name="delete" boxSize={4} />}
               aria-label="delete schema"
             />
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 088d655e6..9ae9c9585 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -56,7 +56,7 @@ export function ActionModal({
   otherVariant = "outline-primary",
   noCloseButton = false,
   closeOnOverlayClick = true,
-  buttonRemark = "Information will be stored locally on your device.",
+  buttonRemark,
 }: ActionModalProps) {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -131,9 +131,11 @@ export function ActionModal({
                   {otherBtnTitle}
                 </Button>
               </Flex>
-              <Text variant="body3" color="text.dark">
-                {buttonRemark}
-              </Text>
+              {buttonRemark && (
+                <Text variant="body3" color="text.dark">
+                  {buttonRemark}
+                </Text>
+              )}
             </Flex>
           </ModalFooter>
         </ModalContent>
diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
new file mode 100644
index 000000000..c44f51e28
--- /dev/null
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -0,0 +1,117 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { useCallback, useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+
+import { ActionModal } from "../ActionModal";
+import { useCelatoneApp } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { ControllerInput, ControllerTextarea } from "lib/components/forms";
+import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
+import type { AccountLocalInfo } from "lib/stores/account";
+
+import type { SaveAccountDetail } from "./SaveNewAccount";
+
+interface EditSavedAccountModalProps {
+  account: AccountLocalInfo;
+  triggerElement: JSX.Element;
+}
+
+export const EditSavedAccountModal = ({
+  account,
+  triggerElement,
+}: EditSavedAccountModalProps) => {
+  const { constants } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
+  const defaultValues = useMemo(() => {
+    return {
+      address: account.address,
+      name: account.name ?? "",
+      description: account.description ?? "",
+    };
+  }, [account]);
+
+  const {
+    control,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm<SaveAccountDetail>({
+    defaultValues,
+    mode: "all",
+  });
+
+  const addressState = watch("address");
+  const nameState = watch("name");
+  const descriptionState = watch("description");
+
+  const resetForm = useCallback(
+    () => reset(defaultValues),
+    [defaultValues, reset]
+  );
+
+  useEffect(() => {
+    resetForm();
+  }, [resetForm]);
+
+  const handleSave = useHandleAccountSave({
+    title: `Updated Saved Account!`,
+    address: addressState,
+    name: nameState,
+    description: descriptionState,
+    actions: () => {},
+  });
+
+  return (
+    <ActionModal
+      title="Edit account"
+      icon="edit-solid"
+      headerContent={
+        <Flex gap={4} alignItems="center" pt={6}>
+          <Text variant="body2" fontWeight={500} color="text.dark">
+            Account Address
+          </Text>
+          <ExplorerLink value={account.address} type="user_address" />
+        </Flex>
+      }
+      trigger={triggerElement}
+      mainBtnTitle="Save"
+      mainAction={handleSave}
+      disabledMain={!!errors.name || !!errors.description}
+      otherBtnTitle="Cancel"
+      otherAction={resetForm}
+      closeOnOverlayClick={false}
+    >
+      <Flex direction="column" gap={6}>
+        <ControllerInput
+          name="name"
+          control={control}
+          label="Account Name"
+          variant="fixed-floating"
+          //   placeholder="ex. Celatone Account 1"
+          labelBgColor="gray.900"
+          rules={{
+            maxLength: constants.maxAccountNameLength,
+          }}
+          error={
+            errors.name && getMaxLengthError(nameState.length, "account_name")
+          }
+        />
+        <ControllerTextarea
+          name="description"
+          control={control}
+          label="Account Description"
+          //   placeholder="Help understanding what this account do ..."
+          variant="fixed-floating"
+          labelBgColor="gray.900"
+          rules={{
+            maxLength: constants.maxAccountDescriptionLength,
+          }}
+          error={
+            errors.description &&
+            getMaxLengthError(descriptionState.length, "contract_desc")
+          }
+        />
+      </Flex>
+    </ActionModal>
+  );
+};
diff --git a/src/lib/components/modal/account/RemoveSavedAccount.tsx b/src/lib/components/modal/account/RemoveSavedAccount.tsx
new file mode 100644
index 000000000..f41b64dba
--- /dev/null
+++ b/src/lib/components/modal/account/RemoveSavedAccount.tsx
@@ -0,0 +1,65 @@
+import { useToast, Text, chakra, IconButton } from "@chakra-ui/react";
+import { useCallback } from "react";
+
+import { ActionModal } from "../ActionModal";
+import { CustomIcon } from "lib/components/icon";
+import type { AccountLocalInfo } from "lib/stores/account";
+import { truncate } from "lib/utils";
+
+const StyledIconButton = chakra(IconButton, {
+  baseStyle: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: "22px",
+    borderRadius: "36px",
+  },
+});
+
+interface RemoveSavedAccountModalProps {
+  account: AccountLocalInfo;
+  trigger?: JSX.Element;
+}
+export function RemoveSavedAccountModal({
+  account,
+  trigger = (
+    <StyledIconButton
+      icon={<CustomIcon name="delete" />}
+      variant="ghost-gray"
+    />
+  ),
+}: RemoveSavedAccountModalProps) {
+  const toast = useToast();
+  const handleRemove = useCallback(() => {
+    // removeSavedCode(codeId);
+
+    toast({
+      title: `Removed \u2018${account.name}\u2019 from Saved Codes`,
+      status: "success",
+      duration: 5000,
+      isClosable: false,
+      position: "bottom-right",
+      icon: <CustomIcon name="check-circle-solid" color="success.main" />,
+    });
+  }, [account.name, toast]);
+  return (
+    <ActionModal
+      title={
+        account.name
+          ? `Remove account \u2018${account.name}\u2019?`
+          : `Remove account \u2018${truncate(account.address)}\u2019 ?`
+      }
+      icon="delete-solid"
+      iconColor="error.light"
+      mainVariant="error"
+      mainBtnTitle="Yes, Remove It"
+      mainAction={handleRemove}
+      otherBtnTitle="No, Keep It"
+      trigger={trigger}
+    >
+      <Text>
+        You can save this account again later, but you will need to add its new
+        account name and description.
+      </Text>
+    </ActionModal>
+  );
+}
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index 13c975785..aae9af3c3 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -15,7 +15,7 @@ import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
 import { useAccountStore } from "lib/providers/store";
 import type { Addr } from "lib/types";
 
-interface SaveNewAccountDetail {
+export interface SaveAccountDetail {
   address: Addr;
   name: string;
   description: string;
@@ -31,7 +31,7 @@ export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
   const getMaxLengthError = useGetMaxLengthError();
   const { isAccountSaved } = useAccountStore();
 
-  const defaultValues: SaveNewAccountDetail = {
+  const defaultValues: SaveAccountDetail = {
     address: "" as Addr,
     name: "",
     description: "",
@@ -42,7 +42,7 @@ export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
     watch,
     reset,
     formState: { errors },
-  } = useForm<SaveNewAccountDetail>({
+  } = useForm<SaveAccountDetail>({
     defaultValues,
     mode: "all",
   });
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index 16c5e6e74..5ae680efe 100644
--- a/src/lib/components/state/ZeroState.tsx
+++ b/src/lib/components/state/ZeroState.tsx
@@ -4,6 +4,7 @@ import { CustomIcon } from "../icon";
 import { useInternalNavigate } from "lib/app-provider";
 import { SaveNewContractModal } from "lib/components/modal/contract";
 import { ADMIN_SPECIAL_SLUG, INSTANTIATED_LIST_NAME } from "lib/data";
+import { SaveAccountButton } from "lib/pages/saved-accounts/components/SaveAccountButton";
 import type { LVPair } from "lib/types";
 import { formatSlugName } from "lib/utils";
 
@@ -86,3 +87,26 @@ export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => {
     </Flex>
   );
 };
+
+export const AccountZeroState = () => (
+  <Flex
+    alignItems="center"
+    gap={4}
+    color="text.dark"
+    direction="column"
+    my={12}
+    py={8}
+    borderY="1px solid"
+    borderColor="gray.700"
+  >
+    <StateImage imageVariant="empty" />
+    <Flex align="center">You don’t have any saved accounts.</Flex>
+    <Flex align="center" gap={4}>
+      Save an account and entering the account address through
+      <SaveAccountButton />
+    </Flex>
+    <Flex align="center">
+      Saved accounts are stored locally on your device..
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/components/table/accounts/SavedAccountsNameCell.tsx b/src/lib/components/table/accounts/SavedAccountsNameCell.tsx
new file mode 100644
index 000000000..e5dc18422
--- /dev/null
+++ b/src/lib/components/table/accounts/SavedAccountsNameCell.tsx
@@ -0,0 +1,28 @@
+import { EditableCell } from "../EditableCell";
+import { useCelatoneApp } from "lib/app-provider";
+import { useHandleAccountSave } from "lib/hooks";
+import type { AccountLocalInfo } from "lib/stores/account";
+
+interface SaveAccountsNameCellProps {
+  account: AccountLocalInfo;
+}
+export const SaveAccountsNameCell = ({
+  account,
+}: SaveAccountsNameCellProps) => {
+  const { constants } = useCelatoneApp();
+  const onSave = useHandleAccountSave({
+    title: "Changed name successfully!",
+    address: account.address,
+    name: account.name ?? "",
+    description: account.description,
+    actions: () => {},
+  });
+  return (
+    <EditableCell
+      initialValue={account.name}
+      defaultValue="Untitled Name"
+      maxLength={constants.maxAccountNameLength}
+      onSave={onSave}
+    />
+  );
+};
diff --git a/src/lib/components/table/accounts/SavedAccountsTable.tsx b/src/lib/components/table/accounts/SavedAccountsTable.tsx
new file mode 100644
index 000000000..4782df7f1
--- /dev/null
+++ b/src/lib/components/table/accounts/SavedAccountsTable.tsx
@@ -0,0 +1,37 @@
+import { TableContainer } from "@chakra-ui/react";
+
+import { Loading } from "lib/components/Loading";
+import type { AccountLocalInfo } from "lib/stores/account";
+import type { Option } from "lib/types";
+
+import { SavedAccountsTableHeader } from "./SavedAccountsTableHeader";
+import { SavedAccountsTableRow } from "./SavedAccountsTableRow";
+
+interface SavedAccountsTableProps {
+  accounts: Option<AccountLocalInfo[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
+}
+export const SavedAccountsTable = ({
+  accounts,
+  isLoading,
+  emptyState,
+}: SavedAccountsTableProps) => {
+  if (isLoading) return <Loading withBorder />;
+  if (!accounts?.length) return emptyState;
+
+  const templateColumns =
+    "max(160px) minmax(200px, 1fr) minmax(250px, 1fr) max(100px)";
+
+  return (
+    <TableContainer>
+      <SavedAccountsTableHeader templateColumns={templateColumns} />
+      {accounts.map((account) => (
+        <SavedAccountsTableRow
+          accountInfo={account}
+          templateColumns={templateColumns}
+        />
+      ))}
+    </TableContainer>
+  );
+};
diff --git a/src/lib/components/table/accounts/SavedAccountsTableHeader.tsx b/src/lib/components/table/accounts/SavedAccountsTableHeader.tsx
new file mode 100644
index 000000000..ce6d2259c
--- /dev/null
+++ b/src/lib/components/table/accounts/SavedAccountsTableHeader.tsx
@@ -0,0 +1,17 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
+
+import { TableHeader } from "../tableComponents";
+
+export const SavedAccountsTableHeader = ({
+  templateColumns,
+}: {
+  templateColumns: GridProps["templateColumns"];
+}) => (
+  <Grid templateColumns={templateColumns} minW="min-content">
+    <TableHeader>Account Address</TableHeader>
+    <TableHeader>Account Name</TableHeader>
+    <TableHeader>Account Description</TableHeader>
+    <TableHeader />
+  </Grid>
+);
diff --git a/src/lib/components/table/accounts/SavedAccountsTableRow.tsx b/src/lib/components/table/accounts/SavedAccountsTableRow.tsx
new file mode 100644
index 000000000..e779320aa
--- /dev/null
+++ b/src/lib/components/table/accounts/SavedAccountsTableRow.tsx
@@ -0,0 +1,86 @@
+import { Grid, IconButton, Text } from "@chakra-ui/react";
+
+import { TableRow } from "../tableComponents";
+import { useInternalNavigate } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { EditSavedAccountModal } from "lib/components/modal/account/EditSavedAccount";
+import { RemoveSavedAccountModal } from "lib/components/modal/account/RemoveSavedAccount";
+import type { AccountLocalInfo } from "lib/stores/account";
+import type { Addr } from "lib/types";
+
+import { SaveAccountsNameCell } from "./SavedAccountsNameCell";
+
+interface SavedAccountsTableRowProps {
+  accountInfo: AccountLocalInfo;
+  templateColumns: string;
+}
+
+export const SavedAccountsTableRow = ({
+  accountInfo,
+  templateColumns,
+}: SavedAccountsTableRowProps) => {
+  const navigate = useInternalNavigate();
+
+  const onRowSelect = (address: Addr) =>
+    navigate({
+      pathname: "/accounts/[accountAddress]",
+      query: { accountAddress: address },
+    });
+  return (
+    <Grid
+      templateColumns={templateColumns}
+      onClick={() => onRowSelect(accountInfo.address)}
+      _hover={{ bg: "gray.900" }}
+      transition="all 0.25s ease-in-out"
+      cursor="pointer"
+      minW="min-content"
+    >
+      <TableRow>
+        <ExplorerLink
+          type="user_address"
+          value={accountInfo.address}
+          showCopyOnHover
+        />
+      </TableRow>
+      <TableRow>
+        <SaveAccountsNameCell account={accountInfo} />
+      </TableRow>
+      <TableRow>
+        <Text
+          color={accountInfo.description ? "text.dark" : "text.disabled"}
+          textOverflow="ellipsis"
+          maxW="450px"
+          overflow="hidden"
+          whiteSpace="nowrap"
+        >
+          {accountInfo.description ?? "No description"}
+        </Text>
+      </TableRow>
+      <TableRow gap={2} justifyContent="center">
+        <EditSavedAccountModal
+          account={accountInfo}
+          triggerElement={
+            <IconButton
+              variant="ghost-gray-icon"
+              size="sm"
+              icon={<CustomIcon name="edit" boxSize={4} />}
+              aria-label="edit account"
+            />
+          }
+        />
+        <RemoveSavedAccountModal
+          account={accountInfo}
+          trigger={
+            <IconButton
+              variant="ghost-gray-icon"
+              size="sm"
+              icon={<CustomIcon name="delete" boxSize={4} />}
+              aria-label="remove account"
+            />
+          }
+        />
+      </TableRow>
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/saved-accounts/components/SavedAccountsSection.tsx b/src/lib/pages/saved-accounts/components/SavedAccountsSection.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/pages/saved-accounts/index.tsx b/src/lib/pages/saved-accounts/index.tsx
index 4ce030676..15b037372 100644
--- a/src/lib/pages/saved-accounts/index.tsx
+++ b/src/lib/pages/saved-accounts/index.tsx
@@ -1,12 +1,34 @@
 import { Badge, Text, Flex, Heading } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
+import { useMemo, useState } from "react";
 
+import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
-import { EmptyState } from "lib/components/state";
+import { AccountZeroState, EmptyState } from "lib/components/state";
+import { SavedAccountsTable } from "lib/components/table/accounts/SavedAccountsTable";
+import { useAccountStore } from "lib/providers/store";
 
 import { SaveAccountButton } from "./components/SaveAccountButton";
 
 const SavedAccounts = observer(() => {
+  const { getSavedAccounts, isHydrated } = useAccountStore();
+  const savedAccounts = getSavedAccounts();
+  const accountsCount = savedAccounts.length;
+
+  const [keyword, setKeyword] = useState("");
+
+  const isSearching = !!keyword;
+
+  const filteredsavedAccounts = useMemo(() => {
+    if (!keyword) return savedAccounts;
+    return savedAccounts.filter(
+      (account) =>
+        account.address.includes(keyword.toLowerCase()) ||
+        account.name?.toLowerCase().includes(keyword.toLowerCase()) ||
+        account.description?.toLowerCase().includes(keyword.toLowerCase())
+    );
+  }, [keyword, savedAccounts]);
+
   return (
     <PageContainer>
       <Flex alignItems="center" justifyContent="space-between" mb={4}>
@@ -22,25 +44,34 @@ const SavedAccounts = observer(() => {
               Saved Accounts
             </Heading>
             <Badge variant="primary" ml={2}>
-              0
+              {accountsCount}
             </Badge>
           </Flex>
           <Text>Your saved accounts will be stored locally</Text>
         </Flex>
         <SaveAccountButton />
       </Flex>
-      {/* <InputWithIcon
-          placeholder="Search with Code ID or Code Name"
-          value={keyword}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            setValue("keyword", e.target.value)
-          }
-          size="lg"
-        /> */}
-      <EmptyState
-        imageVariant="empty"
-        message="Account saved using Celatone will display here. Saved accounts are stored locally on your device."
-        withBorder
+      <InputWithIcon
+        placeholder="Search with account name, address, or description ..."
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        size="lg"
+      />
+
+      <SavedAccountsTable
+        accounts={filteredsavedAccounts}
+        isLoading={!isHydrated}
+        emptyState={
+          isSearching ? (
+            <EmptyState
+              imageVariant="not-found"
+              message="No accounts match found. Make sure you are searching with account address, name, or description."
+              withBorder
+            />
+          ) : (
+            <AccountZeroState />
+          )
+        }
       />
     </PageContainer>
   );
diff --git a/src/lib/stores/account.ts b/src/lib/stores/account.ts
index a35570452..a86960f86 100644
--- a/src/lib/stores/account.ts
+++ b/src/lib/stores/account.ts
@@ -78,4 +78,15 @@ export class AccountStore {
   isAccountSaved(address: Addr): boolean {
     return this.savedAccounts[this.userKey]?.includes(address) ?? false;
   }
+
+  getSavedAccounts(): AccountLocalInfo[] {
+    const savedAccountsByUserKey = this.savedAccounts[this.userKey] ?? [];
+    return savedAccountsByUserKey
+      .map((address) => ({
+        address,
+        name: this.getAccountLocalInfo(address)?.name,
+        description: this.getAccountLocalInfo(address)?.description,
+      }))
+      .reverse();
+  }
 }
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index c77f4e84e..46d645110 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -326,6 +326,22 @@ export const Button: ComponentStyleConfig = {
       hoverBg: gray800,
       activeBg: "transparent",
     }),
+    "ghost-gray-icon": generateStyle({
+      basic: {
+        color: "gray.400",
+        "> svg": {
+          color: "gray.600",
+        },
+      },
+      disabled: {
+        color: gray500,
+        "> svg": {
+          color: gray500,
+        },
+      },
+      hoverBg: gray800,
+      activeBg: "transparent",
+    }),
     "ghost-error": generateStyle({
       basic: { color: "error.main" },
       disabled: { color: "error.light" },

From 9663a041bd4a7e8ae7296beb401b85076256eba9 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 8 Nov 2023 17:04:04 +0700
Subject: [PATCH 327/368] fix(components): adjust changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29e9dbc32..6a8fcd7a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#613](https://github.com/alleslabs/celatone-frontend/pull/613) Add table for saved accounts and add save, remove and edit modal
+- [#616](https://github.com/alleslabs/celatone-frontend/pull/616) Add table for saved accounts and add save, remove and edit modal
+- [#613](https://github.com/alleslabs/celatone-frontend/pull/613) Add saved accounts modal ui
 - [#611](https://github.com/alleslabs/celatone-frontend/pull/611) Add saved accounts page
 - [#601](https://github.com/alleslabs/celatone-frontend/pull/601) Add modules in public project
 - [#581](https://github.com/alleslabs/celatone-frontend/pull/581) Support new move input i.e., object, fixed_point, and decimal

From b7ae9ebe4919435b84d34506d07fcdbc84eb3cae Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 8 Nov 2023 17:40:51 +0700
Subject: [PATCH 328/368] fix(components): change label to account desc

---
 src/lib/components/modal/account/EditSavedAccount.tsx | 2 +-
 src/lib/components/modal/account/SaveNewAccount.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
index c44f51e28..ea84a3d52 100644
--- a/src/lib/components/modal/account/EditSavedAccount.tsx
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -108,7 +108,7 @@ export const EditSavedAccountModal = ({
           }}
           error={
             errors.description &&
-            getMaxLengthError(descriptionState.length, "contract_desc")
+            getMaxLengthError(descriptionState.length, "account_desc")
           }
         />
       </Flex>
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index aae9af3c3..21ec4edac 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -161,7 +161,7 @@ export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
           }}
           error={
             errors.description &&
-            getMaxLengthError(descriptionState.length, "contract_desc")
+            getMaxLengthError(descriptionState.length, "account_desc")
           }
         />
       </Flex>

From 2ced7d76a85e83d8b3d88c97bbc8a90af3f0b0a3 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 8 Nov 2023 17:57:24 +0700
Subject: [PATCH 329/368] fix(components): fix remove saved account modal title
 length

---
 src/lib/components/modal/ActionModal.tsx      |  6 ++++-
 .../modal/account/RemoveSavedAccount.tsx      | 23 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 9ae9c9585..6e1b23b9a 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -92,7 +92,11 @@ export function ActionModal({
             <Box w="full">
               <Flex alignItems="center" gap={3}>
                 <CustomIcon name={icon} color={iconColor} boxSize={5} />
-                <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
+                <Heading
+                  as="h5"
+                  variant={{ base: "h6", md: "h5" }}
+                  wordBreak="break-word"
+                >
                   {title}
                 </Heading>
               </Flex>
diff --git a/src/lib/components/modal/account/RemoveSavedAccount.tsx b/src/lib/components/modal/account/RemoveSavedAccount.tsx
index f41b64dba..461285d3f 100644
--- a/src/lib/components/modal/account/RemoveSavedAccount.tsx
+++ b/src/lib/components/modal/account/RemoveSavedAccount.tsx
@@ -1,4 +1,10 @@
-import { useToast, Text, chakra, IconButton } from "@chakra-ui/react";
+import {
+  useToast,
+  Text,
+  chakra,
+  IconButton,
+  Highlight,
+} from "@chakra-ui/react";
 import { useCallback } from "react";
 
 import { ActionModal } from "../ActionModal";
@@ -57,8 +63,19 @@ export function RemoveSavedAccountModal({
       trigger={trigger}
     >
       <Text>
-        You can save this account again later, but you will need to add its new
-        account name and description.
+        <Highlight
+          query={[
+            account.name ?? "",
+            truncate(account.address),
+            "Saved Accounts",
+          ]}
+          styles={{ fontWeight: "bold", color: "inherit" }}
+        >
+          {`This action will remove \u2018${
+            account.name ?? truncate(account.address)
+          }\u2019 from Saved Accounts. 
+          You can save this address again later, but you will need to add its new account name and description.`}
+        </Highlight>
       </Text>
     </ActionModal>
   );

From 30ea16a004b0b982478e641cfd66cc5f78302144 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 8 Nov 2023 18:01:44 +0700
Subject: [PATCH 330/368] fix: bug overall

---
 CHANGELOG.md                                       |  1 +
 src/lib/components/LoadingOverlay.tsx              |  2 +-
 .../pages/module-details/components/ModuleTop.tsx  |  2 +-
 .../tx-details/components/tx-message/EventBox.tsx  | 14 ++++++--------
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0da5960ac..810e590ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#616](https://github.com/alleslabs/celatone-frontend/pull/616) Fix textwrap module path on module detail, framer motion incorrect transition prop, loadingoverlay not centered
 - [#610](https://github.com/alleslabs/celatone-frontend/pull/610) Remove `.at()` from code
 - [#615](https://github.com/alleslabs/celatone-frontend/pull/615) Fix useEffect on pool page
 - [#612](https://github.com/alleslabs/celatone-frontend/pull/612) Add saved accounts page
diff --git a/src/lib/components/LoadingOverlay.tsx b/src/lib/components/LoadingOverlay.tsx
index 7545efc2e..5b8a87c55 100644
--- a/src/lib/components/LoadingOverlay.tsx
+++ b/src/lib/components/LoadingOverlay.tsx
@@ -9,7 +9,7 @@ export const LoadingOverlay = () => (
     direction="column"
     gap={3}
     bgColor="background.overlay"
-    position="absolute"
+    position="fixed"
     top={0}
     left={0}
     zIndex="overlay"
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 64d3f3160..fdd2c5047 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -90,7 +90,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             <Text {...baseTextStyle} color="text.main">
               Module Path:
             </Text>
-            <Text {...baseTextStyle}>
+            <Text {...baseTextStyle} whiteSpace="normal">
               {moduleData.parsedAbi.address}::{moduleData.parsedAbi.name}
             </Text>
           </Flex>
diff --git a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
index 8f9407a9a..118e33f89 100644
--- a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
@@ -1,6 +1,5 @@
-import { Box, Flex, chakra, shouldForwardProp } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import type { Event } from "@cosmjs/stargate";
-import { isValidMotionProp, motion } from "framer-motion";
 import type { ReactNode } from "react";
 import { useState } from "react";
 
@@ -10,15 +9,11 @@ import type { LinkType } from "lib/components/ExplorerLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { MotionBox } from "lib/components/MotionBox";
 import { TxReceiptRender } from "lib/components/tx";
 import type { TxReceipt } from "lib/types";
 import { jsonPrettify, jsonValidate } from "lib/utils";
 
-const MotionBox = chakra(motion.div, {
-  shouldForwardProp: (prop) =>
-    isValidMotionProp(prop) || shouldForwardProp(prop),
-});
-
 interface EventBoxProps {
   event: Event;
   msgIndex: number;
@@ -145,7 +140,10 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
         overflow="hidden"
         initial="collapsed"
         animate={expand ? "expanded" : "collapsed"}
-        transition="all 0.25s ease-in-out"
+        transition={{
+          duration: "0.25",
+          ease: "easeInOut",
+        }}
       >
         <Box borderTop="1px solid var(--chakra-colors-gray-700)" mx={4} />
         <TxReceiptRender

From 49937709fed736dbb95f6b42ae9d9869a5511fa4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 8 Nov 2023 18:21:54 +0700
Subject: [PATCH 331/368] fix: viewmore under module list

---
 .../components/modules/ModuleListsBody.tsx    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
index 200580d12..3563f1c1a 100644
--- a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -1,4 +1,4 @@
-import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { Box, SimpleGrid } from "@chakra-ui/react";
 import { useMemo, useState } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
@@ -58,16 +58,18 @@ export const ModuleListsBody = ({
       />
     );
   return (
-    <Flex direction="column" gap={8}>
+    <div>
       {!onViewMore && (
-        <InputWithIcon
-          placeholder="Search with Module Name..."
-          value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
-          action="execute-message-search"
-        />
+        <Box mb={8}>
+          <InputWithIcon
+            placeholder="Search with Module Name..."
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            action="execute-message-search"
+          />
+        </Box>
       )}
-      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
+      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={4}>
         {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
           (item) => (
             <ModuleCard
@@ -83,6 +85,6 @@ export const ModuleListsBody = ({
       {onViewMore && filteredModules.length > 9 && (
         <ViewMore onClick={onViewMore} />
       )}
-    </Flex>
+    </div>
   );
 };

From 7b20e3243f8ecaec586a8e39db70f245582fe199 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 8 Nov 2023 19:05:07 +0700
Subject: [PATCH 332/368] fix(components): add save account in detail page

---
 CHANGELOG.md                                  |   1 +
 .../modal/account/EditSavedAccount.tsx        |   2 +-
 .../modal/account/RemoveSavedAccount.tsx      |   6 +-
 .../modal/account/SaveNewAccount.tsx          |  21 +-
 .../components/AccountHeader.tsx              | 225 +++++++++++-------
 src/lib/stores/account.ts                     |   6 +
 6 files changed, 163 insertions(+), 98 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a8fcd7a3..96517a355 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#618](https://github.com/alleslabs/celatone-frontend/pull/618) Add save account function in account detail page
 - [#616](https://github.com/alleslabs/celatone-frontend/pull/616) Add table for saved accounts and add save, remove and edit modal
 - [#613](https://github.com/alleslabs/celatone-frontend/pull/613) Add saved accounts modal ui
 - [#611](https://github.com/alleslabs/celatone-frontend/pull/611) Add saved accounts page
diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
index ea84a3d52..e20b63dbc 100644
--- a/src/lib/components/modal/account/EditSavedAccount.tsx
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -67,7 +67,7 @@ export const EditSavedAccountModal = ({
       icon="edit-solid"
       headerContent={
         <Flex gap={4} alignItems="center" pt={6}>
-          <Text variant="body2" fontWeight={500} color="text.dark">
+          <Text variant="body2" fontWeight={500} color="text.main">
             Account Address
           </Text>
           <ExplorerLink value={account.address} type="user_address" />
diff --git a/src/lib/components/modal/account/RemoveSavedAccount.tsx b/src/lib/components/modal/account/RemoveSavedAccount.tsx
index 461285d3f..1e16443c6 100644
--- a/src/lib/components/modal/account/RemoveSavedAccount.tsx
+++ b/src/lib/components/modal/account/RemoveSavedAccount.tsx
@@ -9,6 +9,7 @@ import { useCallback } from "react";
 
 import { ActionModal } from "../ActionModal";
 import { CustomIcon } from "lib/components/icon";
+import { useAccountStore } from "lib/providers/store";
 import type { AccountLocalInfo } from "lib/stores/account";
 import { truncate } from "lib/utils";
 
@@ -35,8 +36,9 @@ export function RemoveSavedAccountModal({
   ),
 }: RemoveSavedAccountModalProps) {
   const toast = useToast();
+  const { removeSavedAccount } = useAccountStore();
   const handleRemove = useCallback(() => {
-    // removeSavedCode(codeId);
+    removeSavedAccount(account.address);
 
     toast({
       title: `Removed \u2018${account.name}\u2019 from Saved Codes`,
@@ -46,7 +48,7 @@ export function RemoveSavedAccountModal({
       position: "bottom-right",
       icon: <CustomIcon name="check-circle-solid" color="success.main" />,
     });
-  }, [account.name, toast]);
+  }, [removeSavedAccount, account.address, account.name, toast]);
   return (
     <ActionModal
       title={
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index 21ec4edac..9367f2f89 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -1,6 +1,6 @@
 import type { ButtonProps } from "@chakra-ui/react";
 import { Button, Flex } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { ActionModal } from "../ActionModal";
@@ -22,20 +22,26 @@ export interface SaveAccountDetail {
 }
 interface SaveNewAccountModalProps {
   buttonProps: ButtonProps;
+  accountAddress?: Addr;
 }
 
-export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
+export function SaveNewAccountModal({
+  buttonProps,
+  accountAddress,
+}: SaveNewAccountModalProps) {
   const { user: exampleUserAddress } = useExampleAddresses();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
   const { isAccountSaved } = useAccountStore();
 
-  const defaultValues: SaveAccountDetail = {
-    address: "" as Addr,
-    name: "",
-    description: "",
-  };
+  const defaultValues: SaveAccountDetail = useMemo(() => {
+    return {
+      address: accountAddress ?? ("" as Addr),
+      name: "",
+      description: "",
+    };
+  }, [accountAddress]);
 
   const {
     control,
@@ -134,6 +140,7 @@ export function SaveNewAccountModal({ buttonProps }: SaveNewAccountModalProps) {
           status={status}
           labelBgColor="gray.900"
           isRequired
+          isReadOnly={!!addressState}
         />
         <ControllerInput
           name="name"
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index f2211b70f..76b666f83 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -1,9 +1,14 @@
-import { Flex, Heading, Image, Text } from "@chakra-ui/react";
+import { Flex, Heading, IconButton, Image, Text } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
 
 import { useMoveConfig } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
+import { SaveNewAccountModal } from "lib/components/modal/account";
+import { EditSavedAccountModal } from "lib/components/modal/account/EditSavedAccount";
+import { RemoveSavedAccountModal } from "lib/components/modal/account/RemoveSavedAccount";
 import { PrimaryNameMark } from "lib/components/PrimaryNameMark";
+import { useAccountStore } from "lib/providers/store";
 import type { ICNSNamesResponse } from "lib/services/ns";
 import type { HexAddr, HumanAddr, Option, PublicDetail } from "lib/types";
 
@@ -17,106 +22,150 @@ interface AccounHeaderProps {
   hexAddress: HexAddr;
 }
 
-export const AccountHeader = ({
-  publicName,
-  publicDetail,
-  icnsName,
-  accountAddress,
-  hexAddress,
-}: AccounHeaderProps) => {
-  const displayName = icnsName?.primary_name || "Account Details";
-  const move = useMoveConfig({ shouldRedirect: false });
-  return (
-    <Flex
-      justifyContent="space-between"
-      alignItems="center"
-      flexDirection={{ base: "column", lg: "row" }}
-    >
-      <Flex direction="column" gap={2} w={{ base: "full", lg: "auto" }}>
-        <Flex gap={1} minH="36px" align="center">
-          {publicDetail?.logo || icnsName?.primary_name ? (
-            <Image
-              src={
-                publicDetail?.logo ??
-                "https://celatone-api.alleslabs.dev/images/entities/icns"
-              }
-              borderRadius="full"
-              alt={publicDetail?.name ?? icnsName?.primary_name}
-              width={7}
-              height={7}
-            />
-          ) : (
-            <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
-          )}
-          <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
-            {publicName ?? displayName}
-          </Heading>
-        </Flex>
-        <Flex direction="column" gap={1}>
-          <Flex
-            gap={{ base: 0, md: 2 }}
-            mt={{ base: 1, md: 0 }}
-            direction={{ base: "column", md: "row" }}
-          >
-            <Text fontWeight={500} color="text.dark" variant="body2">
-              Account Address:
-            </Text>
-            <CopyLink
-              value={accountAddress}
-              amptrackSection="account_top"
-              type="user_address"
-            />
+export const AccountHeader = observer(
+  ({
+    publicName,
+    publicDetail,
+    icnsName,
+    accountAddress,
+    hexAddress,
+  }: AccounHeaderProps) => {
+    const displayName = icnsName?.primary_name || "Account Details";
+    const move = useMoveConfig({ shouldRedirect: false });
+    const { isAccountSaved, getAccountLocalInfo } = useAccountStore();
+
+    const isSaved = isAccountSaved(accountAddress);
+    const localAccountInfo = getAccountLocalInfo(accountAddress);
+    return (
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        flexDirection={{ base: "column", lg: "row" }}
+      >
+        <Flex direction="column" gap={2} w={{ base: "full", lg: "auto" }}>
+          <Flex gap={4} align="center" minH="36px">
+            <Flex gap={1} align="center">
+              {publicDetail?.logo || icnsName?.primary_name ? (
+                <Image
+                  src={
+                    publicDetail?.logo ??
+                    "https://celatone-api.alleslabs.dev/images/entities/icns"
+                  }
+                  borderRadius="full"
+                  alt={publicDetail?.name ?? icnsName?.primary_name}
+                  width={7}
+                  height={7}
+                />
+              ) : (
+                <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
+              )}
+              <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
+                {localAccountInfo?.name ?? publicName ?? displayName}
+              </Heading>
+            </Flex>
+            {isSaved && localAccountInfo ? (
+              <Flex gap={2}>
+                <EditSavedAccountModal
+                  account={localAccountInfo}
+                  triggerElement={
+                    <IconButton
+                      variant="ghost-gray-icon"
+                      size="sm"
+                      icon={<CustomIcon name="edit" boxSize={4} />}
+                      aria-label="edit account"
+                    />
+                  }
+                />
+                <RemoveSavedAccountModal
+                  account={localAccountInfo}
+                  trigger={
+                    <IconButton
+                      variant="ghost-gray-icon"
+                      size="sm"
+                      icon={<CustomIcon name="bookmark-solid" boxSize={4} />}
+                      aria-label="remove account"
+                    />
+                  }
+                />
+              </Flex>
+            ) : (
+              <SaveNewAccountModal
+                accountAddress={accountAddress}
+                buttonProps={{
+                  size: "sm",
+                  variant: "outline-gray",
+                  leftIcon: <CustomIcon name="bookmark" boxSize={3} mr={0} />,
+                  children: "Save Account",
+                }}
+              />
+            )}
           </Flex>
-          {move.enabled && (
+          <Flex direction="column" gap={1}>
             <Flex
               gap={{ base: 0, md: 2 }}
               mt={{ base: 1, md: 0 }}
               direction={{ base: "column", md: "row" }}
             >
               <Text fontWeight={500} color="text.dark" variant="body2">
-                HEX:
+                Account Address:
               </Text>
               <CopyLink
-                value={hexAddress}
+                value={accountAddress}
                 amptrackSection="account_top"
                 type="user_address"
               />
             </Flex>
+            {move.enabled && (
+              <Flex
+                gap={{ base: 0, md: 2 }}
+                mt={{ base: 1, md: 0 }}
+                direction={{ base: "column", md: "row" }}
+              >
+                <Text fontWeight={500} color="text.dark" variant="body2">
+                  HEX:
+                </Text>
+                <CopyLink
+                  value={hexAddress}
+                  amptrackSection="account_top"
+                  type="user_address"
+                />
+              </Flex>
+            )}
+          </Flex>
+          {icnsName?.primary_name && (
+            <Flex gap={2} align="center">
+              <Text fontWeight={500} color="text.dark" variant="body2">
+                Registered ICNS names:
+              </Text>
+              <Flex gap={1} align="center">
+                {icnsName.names.map((name) => (
+                  <Flex
+                    key={name}
+                    align="center"
+                    direction="row"
+                    _after={{
+                      content: '"/"',
+                      fontSize: "14px",
+                    }}
+                    _last={{
+                      _after: {
+                        display: "none",
+                      },
+                    }}
+                    gap={1}
+                  >
+                    {name === icnsName.primary_name && <PrimaryNameMark />}
+                    <CopyLink value={name} type="icns_names" withoutIcon />
+                  </Flex>
+                ))}
+              </Flex>
+            </Flex>
           )}
         </Flex>
-        {icnsName?.primary_name && (
-          <Flex gap={2} align="center">
-            <Text fontWeight={500} color="text.dark" variant="body2">
-              Registered ICNS names:
-            </Text>
-            <Flex gap={1} align="center">
-              {icnsName.names.map((name) => (
-                <Flex
-                  key={name}
-                  align="center"
-                  direction="row"
-                  _after={{
-                    content: '"/"',
-                    fontSize: "14px",
-                  }}
-                  _last={{
-                    _after: {
-                      display: "none",
-                    },
-                  }}
-                  gap={1}
-                >
-                  {name === icnsName.primary_name && <PrimaryNameMark />}
-                  <CopyLink value={name} type="icns_names" withoutIcon />
-                </Flex>
-              ))}
-            </Flex>
-          </Flex>
-        )}
-      </Flex>
-      <Flex mt={{ base: 4, lg: 0 }} w={{ base: "full", lg: "auto" }}>
-        <TotalAccountValue accountAddress={accountAddress} />
+        <Flex mt={{ base: 4, lg: 0 }} w={{ base: "full", lg: "auto" }}>
+          <TotalAccountValue accountAddress={accountAddress} />
+        </Flex>
       </Flex>
-    </Flex>
-  );
-};
+    );
+  }
+);
diff --git a/src/lib/stores/account.ts b/src/lib/stores/account.ts
index a86960f86..6e2415fa4 100644
--- a/src/lib/stores/account.ts
+++ b/src/lib/stores/account.ts
@@ -79,6 +79,12 @@ export class AccountStore {
     return this.savedAccounts[this.userKey]?.includes(address) ?? false;
   }
 
+  removeSavedAccount(address: Addr): void {
+    this.savedAccounts[this.userKey] = this.savedAccounts[this.userKey]?.filter(
+      (each) => each !== address
+    );
+  }
+
   getSavedAccounts(): AccountLocalInfo[] {
     const savedAccountsByUserKey = this.savedAccounts[this.userKey] ?? [];
     return savedAccountsByUserKey

From 89315cc0ed23fe5a0bce3bff9f241ed322c56202 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 8 Nov 2023 19:06:24 +0700
Subject: [PATCH 333/368] fix(components): add remove saved account function

---
 src/lib/components/modal/account/RemoveSavedAccount.tsx | 6 ++++--
 src/lib/stores/account.ts                               | 6 ++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/modal/account/RemoveSavedAccount.tsx b/src/lib/components/modal/account/RemoveSavedAccount.tsx
index 461285d3f..1e16443c6 100644
--- a/src/lib/components/modal/account/RemoveSavedAccount.tsx
+++ b/src/lib/components/modal/account/RemoveSavedAccount.tsx
@@ -9,6 +9,7 @@ import { useCallback } from "react";
 
 import { ActionModal } from "../ActionModal";
 import { CustomIcon } from "lib/components/icon";
+import { useAccountStore } from "lib/providers/store";
 import type { AccountLocalInfo } from "lib/stores/account";
 import { truncate } from "lib/utils";
 
@@ -35,8 +36,9 @@ export function RemoveSavedAccountModal({
   ),
 }: RemoveSavedAccountModalProps) {
   const toast = useToast();
+  const { removeSavedAccount } = useAccountStore();
   const handleRemove = useCallback(() => {
-    // removeSavedCode(codeId);
+    removeSavedAccount(account.address);
 
     toast({
       title: `Removed \u2018${account.name}\u2019 from Saved Codes`,
@@ -46,7 +48,7 @@ export function RemoveSavedAccountModal({
       position: "bottom-right",
       icon: <CustomIcon name="check-circle-solid" color="success.main" />,
     });
-  }, [account.name, toast]);
+  }, [removeSavedAccount, account.address, account.name, toast]);
   return (
     <ActionModal
       title={
diff --git a/src/lib/stores/account.ts b/src/lib/stores/account.ts
index a86960f86..6e2415fa4 100644
--- a/src/lib/stores/account.ts
+++ b/src/lib/stores/account.ts
@@ -79,6 +79,12 @@ export class AccountStore {
     return this.savedAccounts[this.userKey]?.includes(address) ?? false;
   }
 
+  removeSavedAccount(address: Addr): void {
+    this.savedAccounts[this.userKey] = this.savedAccounts[this.userKey]?.filter(
+      (each) => each !== address
+    );
+  }
+
   getSavedAccounts(): AccountLocalInfo[] {
     const savedAccountsByUserKey = this.savedAccounts[this.userKey] ?? [];
     return savedAccountsByUserKey

From 53104a0a9777847ab7ce23843e35ecca66952c8e Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 8 Nov 2023 19:32:25 +0700
Subject: [PATCH 334/368] fix(components): add account description

---
 .../modal/account/SaveNewAccount.tsx          | 10 +-
 .../components/AccountHeader.tsx              |  4 +
 .../components/UserAccountDesc.tsx            | 95 +++++++++++++++++++
 src/lib/pages/account-details/index.tsx       | 53 ++++++-----
 4 files changed, 137 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/pages/account-details/components/UserAccountDesc.tsx

diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index 9367f2f89..9837fe861 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -23,11 +23,15 @@ export interface SaveAccountDetail {
 interface SaveNewAccountModalProps {
   buttonProps: ButtonProps;
   accountAddress?: Addr;
+  publicName?: string;
+  publicDescription?: string;
 }
 
 export function SaveNewAccountModal({
   buttonProps,
   accountAddress,
+  publicName,
+  publicDescription,
 }: SaveNewAccountModalProps) {
   const { user: exampleUserAddress } = useExampleAddresses();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
@@ -38,10 +42,10 @@ export function SaveNewAccountModal({
   const defaultValues: SaveAccountDetail = useMemo(() => {
     return {
       address: accountAddress ?? ("" as Addr),
-      name: "",
-      description: "",
+      name: publicName ?? "",
+      description: publicDescription ?? "",
     };
-  }, [accountAddress]);
+  }, [accountAddress, publicName, publicDescription]);
 
   const {
     control,
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index 76b666f83..43294533c 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -20,6 +20,7 @@ interface AccounHeaderProps {
   icnsName: Option<ICNSNamesResponse>;
   accountAddress: HumanAddr;
   hexAddress: HexAddr;
+  publicDescription?: string;
 }
 
 export const AccountHeader = observer(
@@ -29,6 +30,7 @@ export const AccountHeader = observer(
     icnsName,
     accountAddress,
     hexAddress,
+    publicDescription,
   }: AccounHeaderProps) => {
     const displayName = icnsName?.primary_name || "Account Details";
     const move = useMoveConfig({ shouldRedirect: false });
@@ -91,6 +93,8 @@ export const AccountHeader = observer(
             ) : (
               <SaveNewAccountModal
                 accountAddress={accountAddress}
+                publicName={publicName ?? icnsName?.primary_name}
+                publicDescription={publicDescription}
                 buttonProps={{
                   size: "sm",
                   variant: "outline-gray",
diff --git a/src/lib/pages/account-details/components/UserAccountDesc.tsx b/src/lib/pages/account-details/components/UserAccountDesc.tsx
new file mode 100644
index 000000000..55fb5e624
--- /dev/null
+++ b/src/lib/pages/account-details/components/UserAccountDesc.tsx
@@ -0,0 +1,95 @@
+import { Button, Flex, Text, Box } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import { useMemo, useState } from "react";
+import Linkify from "react-linkify";
+import { useClampText } from "use-clamp-text";
+
+import { ShowMoreButton } from "lib/components/button";
+import { CustomIcon } from "lib/components/icon";
+import { EditSavedAccountModal } from "lib/components/modal/account/EditSavedAccount";
+import { useAccountStore } from "lib/providers/store";
+import type { Addr } from "lib/types";
+
+interface UserAccountDescProps {
+  address: Addr;
+  publicAccount?: boolean;
+}
+
+export const UserAccountDesc = observer(
+  ({ address, publicAccount = false }: UserAccountDescProps) => {
+    const { getAccountLocalInfo } = useAccountStore();
+    const accountLocalInfo = getAccountLocalInfo(address);
+    const [showMore, setShowMore] = useState(false);
+    const description = accountLocalInfo?.description;
+    const [ref, { noClamp, clampedText, key }] = useClampText({
+      text: description || "No Contract description",
+      ellipsis: "...",
+      lines: publicAccount ? 4 : 2,
+    });
+
+    const renderEditAccountButton = () => {
+      if (!accountLocalInfo) return null;
+      return (
+        <EditSavedAccountModal
+          account={accountLocalInfo}
+          triggerElement={
+            <Button
+              size="xs"
+              variant="ghost-secondary"
+              color="secondary.main"
+              leftIcon={<CustomIcon name="edit" boxSize={3} />}
+            >
+              {description ? "Edit" : "Add Description"}
+            </Button>
+          }
+        />
+      );
+    };
+
+    const displayDescription = useMemo(() => {
+      if (!description) {
+        return "No Account Description";
+      }
+      return showMore ? description : clampedText;
+    }, [clampedText, description, showMore]);
+
+    return (
+      <Flex
+        direction="column"
+        bg="gray.900"
+        maxW="100%"
+        borderRadius="8px"
+        p={4}
+        minH="full"
+        flex="1"
+        role="group"
+      >
+        <Flex justify="space-between" align="center" h="32px">
+          <Text variant="body2" fontWeight={500} color="text.dark">
+            Your Account Description
+          </Text>
+          <Box display="none" _groupHover={{ display: "flex" }}>
+            {renderEditAccountButton()}
+          </Box>
+        </Flex>
+        <Text
+          variant="body2"
+          whiteSpace="pre-wrap"
+          ref={ref as React.MutableRefObject<HTMLParagraphElement>}
+          key={key}
+        >
+          <Linkify>{displayDescription}</Linkify>
+        </Text>
+
+        {!noClamp && description && (
+          <ShowMoreButton
+            showMoreText="View Full Description"
+            showLessText="View Less Description"
+            toggleShowMore={showMore}
+            setToggleShowMore={() => setShowMore(!showMore)}
+          />
+        )}
+      </Flex>
+    );
+  }
+);
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index c4634f810..bb2dffbc8 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -52,6 +52,7 @@ import {
   StoredCodesTable,
   TxsTable,
 } from "./components/tables";
+import { UserAccountDesc } from "./components/UserAccountDesc";
 
 const tableHeaderId = "accountDetailsTab";
 
@@ -176,30 +177,9 @@ const AccountDetailsBody = ({
           icnsName={icnsName}
           accountAddress={accountAddress}
           hexAddress={hexAddress}
+          publicDescription={publicInfo?.description}
         />
       </Flex>
-      {publicInfo?.description && (
-        <Flex
-          direction="column"
-          bg="gray.900"
-          maxW="100%"
-          borderRadius="8px"
-          py={4}
-          px={4}
-          my={6}
-          flex="1"
-        >
-          <Flex alignItems="center" gap={1} minH="32px">
-            <CustomIcon name="website" ml={0} mb={2} color="gray.600" />
-            <Text variant="body2" fontWeight={500} color="text.dark">
-              Public Account Description
-            </Text>
-          </Flex>
-          <Text variant="body2" color="text.main" mb={1}>
-            {publicInfo?.description}
-          </Text>
-        </Flex>
-      )}
 
       <Tabs
         index={Object.values(TabIndex).indexOf(tab)}
@@ -290,6 +270,35 @@ const AccountDetailsBody = ({
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
+            <Flex
+              direction={{ base: "column", md: "row" }}
+              gap={{ base: 4, md: 6 }}
+              my={{ base: 0, md: 8 }}
+            >
+              {publicInfo?.description && (
+                <Flex
+                  direction="column"
+                  bg="gray.900"
+                  maxW="100%"
+                  borderRadius="8px"
+                  py={4}
+                  px={4}
+                  flex="1"
+                >
+                  <Flex alignItems="center" gap={1} minH="32px">
+                    <CustomIcon name="website" ml={0} mb={2} color="gray.600" />
+                    <Text variant="body2" fontWeight={500} color="text.dark">
+                      Public Account Description
+                    </Text>
+                  </Flex>
+                  <Text variant="body2" color="text.main" mb={1}>
+                    {publicInfo?.description}
+                  </Text>
+                </Flex>
+              )}
+              <UserAccountDesc address={accountAddress} />
+            </Flex>
+
             <Flex borderBottom="1px solid" borderBottomColor="gray.700">
               <AssetsSection
                 walletAddress={accountAddress}

From 7ca01bb5413a89bd71f891db745b25c3106e6156 Mon Sep 17 00:00:00 2001
From: Songwong Tasneeyapant <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 9 Nov 2023 11:04:17 +0700
Subject: [PATCH 335/368] fix: update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 810e590ae..3382ade41 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,7 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#616](https://github.com/alleslabs/celatone-frontend/pull/616) Fix textwrap module path on module detail, framer motion incorrect transition prop, loadingoverlay not centered
+- [#617](https://github.com/alleslabs/celatone-frontend/pull/617) Fix textwrap module path on module detail, framer motion incorrect transition prop, loadingoverlay not centered
 - [#610](https://github.com/alleslabs/celatone-frontend/pull/610) Remove `.at()` from code
 - [#615](https://github.com/alleslabs/celatone-frontend/pull/615) Fix useEffect on pool page
 - [#612](https://github.com/alleslabs/celatone-frontend/pull/612) Add saved accounts page

From d3f6b62f9f4600da7b569e2d4d2355f3a0ba7d4b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:00:33 +0700
Subject: [PATCH 336/368] fix: refactoring and unnecessary files

---
 src/lib/app-provider/contexts/app.tsx         | 10 +++---
 .../modal/account/EditSavedAccount.tsx        | 14 ++++-----
 .../modal/account/RemoveSavedAccount.tsx      | 31 ++++++++-----------
 .../modal/account/SaveNewAccount.tsx          |  3 +-
 src/lib/components/modal/account/index.ts     |  2 ++
 src/lib/components/modal/index.ts             |  1 +
 src/lib/components/state/ZeroState.tsx        |  9 +++---
 ...countsNameCell.tsx => AccountNameCell.tsx} | 16 +++++-----
 .../table/accounts/SavedAccountsTable.tsx     |  4 ++-
 .../table/accounts/SavedAccountsTableRow.tsx  | 16 +++++-----
 src/lib/components/table/accounts/index.ts    |  1 +
 src/lib/components/table/index.ts             |  1 +
 src/lib/hooks/useHandleSave.tsx               |  3 +-
 .../components/AccountHeader.tsx              | 18 ++++++-----
 .../components/UserAccountDesc.tsx            |  6 ++--
 .../components/SaveAccountButton.tsx          |  2 +-
 .../components/SavedAccountsSection.tsx       |  0
 .../pages/saved-accounts/components/index.ts  |  1 +
 src/lib/pages/saved-accounts/index.tsx        |  6 ++--
 src/lib/providers/store.tsx                   | 10 +++---
 src/lib/stores/account.ts                     | 16 +++++-----
 src/lib/stores/root.ts                        |  6 ++--
 22 files changed, 89 insertions(+), 87 deletions(-)
 rename src/lib/components/table/accounts/{SavedAccountsNameCell.tsx => AccountNameCell.tsx} (61%)
 create mode 100644 src/lib/components/table/accounts/index.ts
 delete mode 100644 src/lib/pages/saved-accounts/components/SavedAccountsSection.tsx
 create mode 100644 src/lib/pages/saved-accounts/components/index.ts

diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx
index 8d1f25fcd..ef94c1d73 100644
--- a/src/lib/app-provider/contexts/app.tsx
+++ b/src/lib/app-provider/contexts/app.tsx
@@ -21,10 +21,10 @@ import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import { NetworkErrorState } from "lib/components/state/NetworkErrorState";
 import { DEFAULT_ADDRESS } from "lib/data";
 import {
+  useAccountStore,
   useCodeStore,
   useContractStore,
   usePublicProjectStore,
-  useAccountStore,
 } from "lib/providers/store";
 import { formatUserKey } from "lib/utils";
 
@@ -49,10 +49,10 @@ const AppContext = createContext<AppContextInterface>({
 });
 
 export const AppProvider = observer(({ children }: AppProviderProps) => {
+  const { setAccountUserKey, isAccountUserKeyExist } = useAccountStore();
   const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
   const { setContractUserKey, isContractUserKeyExist } = useContractStore();
   const { setProjectUserKey, isProjectUserKeyExist } = usePublicProjectStore();
-  const { setAccountUserKey, isAccountUserKeyExist } = useAccountStore();
   const { setModalTheme } = useModalTheme();
 
   const [currentChainName, setCurrentChainName] = useState<string>();
@@ -84,17 +84,17 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
   useEffect(() => {
     if (currentChainName) {
       const userKey = formatUserKey(currentChainName, DEFAULT_ADDRESS);
+      setAccountUserKey(userKey);
       setCodeUserKey(userKey);
       setContractUserKey(userKey);
       setProjectUserKey(userKey);
-      setAccountUserKey(userKey);
     }
   }, [
     currentChainName,
+    setAccountUserKey,
     setCodeUserKey,
     setContractUserKey,
     setProjectUserKey,
-    setAccountUserKey,
   ]);
 
   // Disable "Leave page" alert
@@ -119,10 +119,10 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
     return <NetworkErrorState />;
 
   if (
+    !isAccountUserKeyExist() ||
     !isCodeUserKeyExist() ||
     !isContractUserKeyExist() ||
     !isProjectUserKeyExist() ||
-    !isAccountUserKeyExist() ||
     !currentChainId
   )
     return <LoadingOverlay />;
diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
index e20b63dbc..55323f82c 100644
--- a/src/lib/components/modal/account/EditSavedAccount.tsx
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -12,23 +12,23 @@ import type { AccountLocalInfo } from "lib/stores/account";
 import type { SaveAccountDetail } from "./SaveNewAccount";
 
 interface EditSavedAccountModalProps {
-  account: AccountLocalInfo;
+  accountLocalInfo: AccountLocalInfo;
   triggerElement: JSX.Element;
 }
 
 export const EditSavedAccountModal = ({
-  account,
+  accountLocalInfo,
   triggerElement,
 }: EditSavedAccountModalProps) => {
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
   const defaultValues = useMemo(() => {
     return {
-      address: account.address,
-      name: account.name ?? "",
-      description: account.description ?? "",
+      address: accountLocalInfo.address,
+      name: accountLocalInfo.name ?? "",
+      description: accountLocalInfo.description ?? "",
     };
-  }, [account]);
+  }, [accountLocalInfo]);
 
   const {
     control,
@@ -70,7 +70,7 @@ export const EditSavedAccountModal = ({
           <Text variant="body2" fontWeight={500} color="text.main">
             Account Address
           </Text>
-          <ExplorerLink value={account.address} type="user_address" />
+          <ExplorerLink value={accountLocalInfo.address} type="user_address" />
         </Flex>
       }
       trigger={triggerElement}
diff --git a/src/lib/components/modal/account/RemoveSavedAccount.tsx b/src/lib/components/modal/account/RemoveSavedAccount.tsx
index 1e16443c6..335f911a8 100644
--- a/src/lib/components/modal/account/RemoveSavedAccount.tsx
+++ b/src/lib/components/modal/account/RemoveSavedAccount.tsx
@@ -23,11 +23,12 @@ const StyledIconButton = chakra(IconButton, {
 });
 
 interface RemoveSavedAccountModalProps {
-  account: AccountLocalInfo;
+  accountLocalInfo: AccountLocalInfo;
   trigger?: JSX.Element;
 }
+
 export function RemoveSavedAccountModal({
-  account,
+  accountLocalInfo,
   trigger = (
     <StyledIconButton
       icon={<CustomIcon name="delete" />}
@@ -37,25 +38,25 @@ export function RemoveSavedAccountModal({
 }: RemoveSavedAccountModalProps) {
   const toast = useToast();
   const { removeSavedAccount } = useAccountStore();
+  const displayName =
+    accountLocalInfo.name ?? truncate(accountLocalInfo.address);
+
   const handleRemove = useCallback(() => {
-    removeSavedAccount(account.address);
+    removeSavedAccount(accountLocalInfo.address);
 
     toast({
-      title: `Removed \u2018${account.name}\u2019 from Saved Codes`,
+      title: `Removed \u2018${displayName}\u2019 from Saved Accounts`,
       status: "success",
       duration: 5000,
       isClosable: false,
       position: "bottom-right",
       icon: <CustomIcon name="check-circle-solid" color="success.main" />,
     });
-  }, [removeSavedAccount, account.address, account.name, toast]);
+  }, [accountLocalInfo.address, displayName, removeSavedAccount, toast]);
+
   return (
     <ActionModal
-      title={
-        account.name
-          ? `Remove account \u2018${account.name}\u2019?`
-          : `Remove account \u2018${truncate(account.address)}\u2019 ?`
-      }
+      title={`Remove account \u2018${displayName}\u2019?`}
       icon="delete-solid"
       iconColor="error.light"
       mainVariant="error"
@@ -66,16 +67,10 @@ export function RemoveSavedAccountModal({
     >
       <Text>
         <Highlight
-          query={[
-            account.name ?? "",
-            truncate(account.address),
-            "Saved Accounts",
-          ]}
+          query={[displayName, "Saved Accounts"]}
           styles={{ fontWeight: "bold", color: "inherit" }}
         >
-          {`This action will remove \u2018${
-            account.name ?? truncate(account.address)
-          }\u2019 from Saved Accounts. 
+          {`This action will remove \u2018${displayName}\u2019 from Saved Accounts. 
           You can save this address again later, but you will need to add its new account name and description.`}
         </Highlight>
       </Text>
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index 9837fe861..eddb41d76 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -20,6 +20,7 @@ export interface SaveAccountDetail {
   name: string;
   description: string;
 }
+
 interface SaveNewAccountModalProps {
   buttonProps: ButtonProps;
   accountAddress?: Addr;
@@ -111,7 +112,7 @@ export function SaveNewAccountModal({
   ]);
 
   const handleSave = useHandleAccountSave({
-    title: `Saved ${nameState} `,
+    title: `Saved ${nameState}`,
     address: addressState,
     name: nameState,
     description: descriptionState,
diff --git a/src/lib/components/modal/account/index.ts b/src/lib/components/modal/account/index.ts
index aa0c4ebf0..a820292b1 100644
--- a/src/lib/components/modal/account/index.ts
+++ b/src/lib/components/modal/account/index.ts
@@ -1 +1,3 @@
+export * from "./EditSavedAccount";
+export * from "./RemoveSavedAccount";
 export * from "./SaveNewAccount";
diff --git a/src/lib/components/modal/index.ts b/src/lib/components/modal/index.ts
index a0c7be837..eebb7400a 100644
--- a/src/lib/components/modal/index.ts
+++ b/src/lib/components/modal/index.ts
@@ -1,3 +1,4 @@
+export * from "./account";
 export * from "./code";
 export * from "./contract";
 export * from "./list";
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index 5ae680efe..1e275e928 100644
--- a/src/lib/components/state/ZeroState.tsx
+++ b/src/lib/components/state/ZeroState.tsx
@@ -4,7 +4,6 @@ import { CustomIcon } from "../icon";
 import { useInternalNavigate } from "lib/app-provider";
 import { SaveNewContractModal } from "lib/components/modal/contract";
 import { ADMIN_SPECIAL_SLUG, INSTANTIATED_LIST_NAME } from "lib/data";
-import { SaveAccountButton } from "lib/pages/saved-accounts/components/SaveAccountButton";
 import type { LVPair } from "lib/types";
 import { formatSlugName } from "lib/utils";
 
@@ -88,7 +87,7 @@ export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => {
   );
 };
 
-export const AccountZeroState = () => (
+export const AccountZeroState = ({ button }: { button: JSX.Element }) => (
   <Flex
     alignItems="center"
     gap={4}
@@ -102,11 +101,11 @@ export const AccountZeroState = () => (
     <StateImage imageVariant="empty" />
     <Flex align="center">You don’t have any saved accounts.</Flex>
     <Flex align="center" gap={4}>
-      Save an account and entering the account address through
-      <SaveAccountButton />
+      Save an account and access the account address through
+      {button}
     </Flex>
     <Flex align="center">
-      Saved accounts are stored locally on your device..
+      Saved accounts are stored locally on your device.
     </Flex>
   </Flex>
 );
diff --git a/src/lib/components/table/accounts/SavedAccountsNameCell.tsx b/src/lib/components/table/accounts/AccountNameCell.tsx
similarity index 61%
rename from src/lib/components/table/accounts/SavedAccountsNameCell.tsx
rename to src/lib/components/table/accounts/AccountNameCell.tsx
index e5dc18422..4c94bf249 100644
--- a/src/lib/components/table/accounts/SavedAccountsNameCell.tsx
+++ b/src/lib/components/table/accounts/AccountNameCell.tsx
@@ -3,23 +3,21 @@ import { useCelatoneApp } from "lib/app-provider";
 import { useHandleAccountSave } from "lib/hooks";
 import type { AccountLocalInfo } from "lib/stores/account";
 
-interface SaveAccountsNameCellProps {
-  account: AccountLocalInfo;
+interface AccountNameCellProps {
+  accountLocalInfo: AccountLocalInfo;
 }
-export const SaveAccountsNameCell = ({
-  account,
-}: SaveAccountsNameCellProps) => {
+export const AccountNameCell = ({ accountLocalInfo }: AccountNameCellProps) => {
   const { constants } = useCelatoneApp();
   const onSave = useHandleAccountSave({
     title: "Changed name successfully!",
-    address: account.address,
-    name: account.name ?? "",
-    description: account.description,
+    address: accountLocalInfo.address,
+    name: accountLocalInfo.name ?? "",
+    description: accountLocalInfo.description,
     actions: () => {},
   });
   return (
     <EditableCell
-      initialValue={account.name}
+      initialValue={accountLocalInfo.name}
       defaultValue="Untitled Name"
       maxLength={constants.maxAccountNameLength}
       onSave={onSave}
diff --git a/src/lib/components/table/accounts/SavedAccountsTable.tsx b/src/lib/components/table/accounts/SavedAccountsTable.tsx
index 4782df7f1..3458b43eb 100644
--- a/src/lib/components/table/accounts/SavedAccountsTable.tsx
+++ b/src/lib/components/table/accounts/SavedAccountsTable.tsx
@@ -12,6 +12,7 @@ interface SavedAccountsTableProps {
   isLoading: boolean;
   emptyState: JSX.Element;
 }
+
 export const SavedAccountsTable = ({
   accounts,
   isLoading,
@@ -24,10 +25,11 @@ export const SavedAccountsTable = ({
     "max(160px) minmax(200px, 1fr) minmax(250px, 1fr) max(100px)";
 
   return (
-    <TableContainer>
+    <TableContainer pb={6}>
       <SavedAccountsTableHeader templateColumns={templateColumns} />
       {accounts.map((account) => (
         <SavedAccountsTableRow
+          key={account.address}
           accountInfo={account}
           templateColumns={templateColumns}
         />
diff --git a/src/lib/components/table/accounts/SavedAccountsTableRow.tsx b/src/lib/components/table/accounts/SavedAccountsTableRow.tsx
index e779320aa..38c046ca9 100644
--- a/src/lib/components/table/accounts/SavedAccountsTableRow.tsx
+++ b/src/lib/components/table/accounts/SavedAccountsTableRow.tsx
@@ -4,12 +4,14 @@ import { TableRow } from "../tableComponents";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
-import { EditSavedAccountModal } from "lib/components/modal/account/EditSavedAccount";
-import { RemoveSavedAccountModal } from "lib/components/modal/account/RemoveSavedAccount";
+import {
+  EditSavedAccountModal,
+  RemoveSavedAccountModal,
+} from "lib/components/modal";
 import type { AccountLocalInfo } from "lib/stores/account";
 import type { Addr } from "lib/types";
 
-import { SaveAccountsNameCell } from "./SavedAccountsNameCell";
+import { AccountNameCell } from "./AccountNameCell";
 
 interface SavedAccountsTableRowProps {
   accountInfo: AccountLocalInfo;
@@ -21,12 +23,12 @@ export const SavedAccountsTableRow = ({
   templateColumns,
 }: SavedAccountsTableRowProps) => {
   const navigate = useInternalNavigate();
-
   const onRowSelect = (address: Addr) =>
     navigate({
       pathname: "/accounts/[accountAddress]",
       query: { accountAddress: address },
     });
+
   return (
     <Grid
       templateColumns={templateColumns}
@@ -44,7 +46,7 @@ export const SavedAccountsTableRow = ({
         />
       </TableRow>
       <TableRow>
-        <SaveAccountsNameCell account={accountInfo} />
+        <AccountNameCell accountLocalInfo={accountInfo} />
       </TableRow>
       <TableRow>
         <Text
@@ -59,7 +61,7 @@ export const SavedAccountsTableRow = ({
       </TableRow>
       <TableRow gap={2} justifyContent="center">
         <EditSavedAccountModal
-          account={accountInfo}
+          accountLocalInfo={accountInfo}
           triggerElement={
             <IconButton
               variant="ghost-gray-icon"
@@ -70,7 +72,7 @@ export const SavedAccountsTableRow = ({
           }
         />
         <RemoveSavedAccountModal
-          account={accountInfo}
+          accountLocalInfo={accountInfo}
           trigger={
             <IconButton
               variant="ghost-gray-icon"
diff --git a/src/lib/components/table/accounts/index.ts b/src/lib/components/table/accounts/index.ts
new file mode 100644
index 000000000..88f1ec8c6
--- /dev/null
+++ b/src/lib/components/table/accounts/index.ts
@@ -0,0 +1 @@
+export * from "./SavedAccountsTable";
diff --git a/src/lib/components/table/index.ts b/src/lib/components/table/index.ts
index 49837d97b..eb59fed37 100644
--- a/src/lib/components/table/index.ts
+++ b/src/lib/components/table/index.ts
@@ -1,4 +1,5 @@
 export * from "./AccordionTx";
+export * from "./accounts";
 export * from "./codes";
 export * from "./contracts";
 export * from "./proposals";
diff --git a/src/lib/hooks/useHandleSave.tsx b/src/lib/hooks/useHandleSave.tsx
index cbd1cc431..fb32ab6af 100644
--- a/src/lib/hooks/useHandleSave.tsx
+++ b/src/lib/hooks/useHandleSave.tsx
@@ -74,10 +74,9 @@ export const useHandleAccountSave = ({
   actions,
 }: UseHandleAccountSaveProps) => {
   const toast = useToast();
-  const userKey = useUserKey();
   const { updateAccountLocalInfo } = useAccountStore();
   return (inputName?: string) => {
-    updateAccountLocalInfo(userKey, address, inputName ?? name, description);
+    updateAccountLocalInfo(address, inputName ?? name, description);
 
     actions?.();
 
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index 43294533c..568b0d301 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -4,9 +4,11 @@ import { observer } from "mobx-react-lite";
 import { useMoveConfig } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
-import { SaveNewAccountModal } from "lib/components/modal/account";
-import { EditSavedAccountModal } from "lib/components/modal/account/EditSavedAccount";
-import { RemoveSavedAccountModal } from "lib/components/modal/account/RemoveSavedAccount";
+import {
+  SaveNewAccountModal,
+  EditSavedAccountModal,
+  RemoveSavedAccountModal,
+} from "lib/components/modal";
 import { PrimaryNameMark } from "lib/components/PrimaryNameMark";
 import { useAccountStore } from "lib/providers/store";
 import type { ICNSNamesResponse } from "lib/services/ns";
@@ -37,7 +39,7 @@ export const AccountHeader = observer(
     const { isAccountSaved, getAccountLocalInfo } = useAccountStore();
 
     const isSaved = isAccountSaved(accountAddress);
-    const localAccountInfo = getAccountLocalInfo(accountAddress);
+    const accountLocalInfo = getAccountLocalInfo(accountAddress);
     return (
       <Flex
         justifyContent="space-between"
@@ -62,13 +64,13 @@ export const AccountHeader = observer(
                 <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
               )}
               <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
-                {localAccountInfo?.name ?? publicName ?? displayName}
+                {accountLocalInfo?.name ?? publicName ?? displayName}
               </Heading>
             </Flex>
-            {isSaved && localAccountInfo ? (
+            {isSaved && accountLocalInfo ? (
               <Flex gap={2}>
                 <EditSavedAccountModal
-                  account={localAccountInfo}
+                  accountLocalInfo={accountLocalInfo}
                   triggerElement={
                     <IconButton
                       variant="ghost-gray-icon"
@@ -79,7 +81,7 @@ export const AccountHeader = observer(
                   }
                 />
                 <RemoveSavedAccountModal
-                  account={localAccountInfo}
+                  accountLocalInfo={accountLocalInfo}
                   trigger={
                     <IconButton
                       variant="ghost-gray-icon"
diff --git a/src/lib/pages/account-details/components/UserAccountDesc.tsx b/src/lib/pages/account-details/components/UserAccountDesc.tsx
index 55fb5e624..d5d0dbd02 100644
--- a/src/lib/pages/account-details/components/UserAccountDesc.tsx
+++ b/src/lib/pages/account-details/components/UserAccountDesc.tsx
@@ -6,7 +6,7 @@ import { useClampText } from "use-clamp-text";
 
 import { ShowMoreButton } from "lib/components/button";
 import { CustomIcon } from "lib/components/icon";
-import { EditSavedAccountModal } from "lib/components/modal/account/EditSavedAccount";
+import { EditSavedAccountModal } from "lib/components/modal";
 import { useAccountStore } from "lib/providers/store";
 import type { Addr } from "lib/types";
 
@@ -17,9 +17,9 @@ interface UserAccountDescProps {
 
 export const UserAccountDesc = observer(
   ({ address, publicAccount = false }: UserAccountDescProps) => {
+    const [showMore, setShowMore] = useState(false);
     const { getAccountLocalInfo } = useAccountStore();
     const accountLocalInfo = getAccountLocalInfo(address);
-    const [showMore, setShowMore] = useState(false);
     const description = accountLocalInfo?.description;
     const [ref, { noClamp, clampedText, key }] = useClampText({
       text: description || "No Contract description",
@@ -31,7 +31,7 @@ export const UserAccountDesc = observer(
       if (!accountLocalInfo) return null;
       return (
         <EditSavedAccountModal
-          account={accountLocalInfo}
+          accountLocalInfo={accountLocalInfo}
           triggerElement={
             <Button
               size="xs"
diff --git a/src/lib/pages/saved-accounts/components/SaveAccountButton.tsx b/src/lib/pages/saved-accounts/components/SaveAccountButton.tsx
index cbec3c5e7..730cb091c 100644
--- a/src/lib/pages/saved-accounts/components/SaveAccountButton.tsx
+++ b/src/lib/pages/saved-accounts/components/SaveAccountButton.tsx
@@ -1,5 +1,5 @@
 import { CustomIcon } from "lib/components/icon";
-import { SaveNewAccountModal } from "lib/components/modal/account";
+import { SaveNewAccountModal } from "lib/components/modal";
 
 export const SaveAccountButton = () => (
   <SaveNewAccountModal
diff --git a/src/lib/pages/saved-accounts/components/SavedAccountsSection.tsx b/src/lib/pages/saved-accounts/components/SavedAccountsSection.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/lib/pages/saved-accounts/components/index.ts b/src/lib/pages/saved-accounts/components/index.ts
new file mode 100644
index 000000000..c10e20838
--- /dev/null
+++ b/src/lib/pages/saved-accounts/components/index.ts
@@ -0,0 +1 @@
+export * from "./SaveAccountButton";
diff --git a/src/lib/pages/saved-accounts/index.tsx b/src/lib/pages/saved-accounts/index.tsx
index 15b037372..4f24766db 100644
--- a/src/lib/pages/saved-accounts/index.tsx
+++ b/src/lib/pages/saved-accounts/index.tsx
@@ -5,10 +5,10 @@ import { useMemo, useState } from "react";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
 import { AccountZeroState, EmptyState } from "lib/components/state";
-import { SavedAccountsTable } from "lib/components/table/accounts/SavedAccountsTable";
+import { SavedAccountsTable } from "lib/components/table";
 import { useAccountStore } from "lib/providers/store";
 
-import { SaveAccountButton } from "./components/SaveAccountButton";
+import { SaveAccountButton } from "./components";
 
 const SavedAccounts = observer(() => {
   const { getSavedAccounts, isHydrated } = useAccountStore();
@@ -69,7 +69,7 @@ const SavedAccounts = observer(() => {
               withBorder
             />
           ) : (
-            <AccountZeroState />
+            <AccountZeroState button={<SaveAccountButton />} />
           )
         }
       />
diff --git a/src/lib/providers/store.tsx b/src/lib/providers/store.tsx
index f62afd2b1..15ce8e6a6 100644
--- a/src/lib/providers/store.tsx
+++ b/src/lib/providers/store.tsx
@@ -35,6 +35,11 @@ export function StoreProvider({ children }: { children: ReactNode }) {
   );
 }
 
+export function useAccountStore() {
+  const { accountStore } = useStore();
+  return accountStore;
+}
+
 export function useCodeStore() {
   const { codeStore } = useStore();
   return codeStore;
@@ -45,11 +50,6 @@ export function useContractStore() {
   return contractStore;
 }
 
-export function useAccountStore() {
-  const { accountStore } = useStore();
-  return accountStore;
-}
-
 export function usePublicProjectStore() {
   const { publicProjectStore } = useStore();
   return publicProjectStore;
diff --git a/src/lib/stores/account.ts b/src/lib/stores/account.ts
index 6e2415fa4..6312f63ee 100644
--- a/src/lib/stores/account.ts
+++ b/src/lib/stores/account.ts
@@ -22,7 +22,9 @@ export class AccountStore {
     this.savedAccounts = {};
     this.accountLocalInfo = {};
     this.userKey = "";
+
     makeAutoObservable(this, {}, { autoBind: true });
+
     makePersistable(this, {
       name: "AccountStore",
       properties: ["savedAccounts", "accountLocalInfo"],
@@ -45,17 +47,12 @@ export class AccountStore {
     return this.accountLocalInfo[this.userKey]?.[address];
   }
 
-  updateAccountLocalInfo(
-    userKey: string,
-    address: Addr,
-    name?: string,
-    description?: string
-  ) {
+  updateAccountLocalInfo(address: Addr, name?: string, description?: string) {
     const savedAccounts = this.savedAccounts[this.userKey];
     if (!savedAccounts) this.savedAccounts[this.userKey] = [address];
     else if (!savedAccounts.includes(address)) savedAccounts.push(address);
 
-    const accountLocalInfo = this.accountLocalInfo[userKey]?.[address] ?? {
+    const accountLocalInfo = this.accountLocalInfo[this.userKey]?.[address] ?? {
       address,
       name,
       description,
@@ -69,8 +66,8 @@ export class AccountStore {
         ? description.trim()
         : undefined;
 
-    this.accountLocalInfo[userKey] = {
-      ...this.accountLocalInfo[userKey],
+    this.accountLocalInfo[this.userKey] = {
+      ...this.accountLocalInfo[this.userKey],
       [address]: accountLocalInfo,
     };
   }
@@ -83,6 +80,7 @@ export class AccountStore {
     this.savedAccounts[this.userKey] = this.savedAccounts[this.userKey]?.filter(
       (each) => each !== address
     );
+    delete this.accountLocalInfo[this.userKey]?.[address];
   }
 
   getSavedAccounts(): AccountLocalInfo[] {
diff --git a/src/lib/stores/root.ts b/src/lib/stores/root.ts
index cd49cc149..03f5c71e5 100644
--- a/src/lib/stores/root.ts
+++ b/src/lib/stores/root.ts
@@ -5,20 +5,20 @@ import { PublicProjectStore } from "./project";
 import { SchemaStore } from "./schema";
 
 export class RootStore {
+  accountStore: AccountStore;
+
   codeStore: CodeStore;
 
   contractStore: ContractStore;
 
-  accountStore: AccountStore;
-
   publicProjectStore: PublicProjectStore;
 
   schemaStore: SchemaStore;
 
   constructor() {
+    this.accountStore = new AccountStore();
     this.codeStore = new CodeStore();
     this.contractStore = new ContractStore();
-    this.accountStore = new AccountStore();
     this.publicProjectStore = new PublicProjectStore();
     this.schemaStore = new SchemaStore();
   }

From a7a477f672df23c1f4dde7ec98ed8445ca704307 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 9 Nov 2023 17:20:34 +0700
Subject: [PATCH 337/368] feat(components): add hex addr in save account
 feature initia

---
 CHANGELOG.md                                  |  3 +-
 .../modal/account/EditSavedAccount.tsx        | 15 ++----
 .../modal/account/SaveNewAccount.tsx          | 49 ++++++++++++++-----
 .../modal/account/SavedAccountModalHeader.tsx | 37 ++++++++++++++
 .../table/accounts/SavedAccountsTable.tsx     | 10 ++--
 .../accounts/SavedAccountsTableHeader.tsx     | 21 +++++---
 .../table/accounts/SavedAccountsTableRow.tsx  | 17 ++++++-
 src/lib/hooks/useHandleSave.tsx               | 25 +++++++++-
 src/lib/pages/saved-accounts/index.tsx        |  1 -
 9 files changed, 138 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/components/modal/account/SavedAccountModalHeader.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 96517a355..70ea6da54 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#618](https://github.com/alleslabs/celatone-frontend/pull/618) Add save account function in account detail page
+- [#620](https://github.com/alleslabs/celatone-frontend/pull/620) Add hex address in save account feature in initia
+- [#618](https://github.com/alleslabs/celatone-frontend/pull/618) Add save account feature in account detail page
 - [#616](https://github.com/alleslabs/celatone-frontend/pull/616) Add table for saved accounts and add save, remove and edit modal
 - [#613](https://github.com/alleslabs/celatone-frontend/pull/613) Add saved accounts modal ui
 - [#611](https://github.com/alleslabs/celatone-frontend/pull/611) Add saved accounts page
diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
index 55323f82c..6707780e0 100644
--- a/src/lib/components/modal/account/EditSavedAccount.tsx
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -1,14 +1,14 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { useCallback, useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
 import { ActionModal } from "../ActionModal";
 import { useCelatoneApp } from "lib/app-provider";
-import { ExplorerLink } from "lib/components/ExplorerLink";
 import { ControllerInput, ControllerTextarea } from "lib/components/forms";
 import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
 import type { AccountLocalInfo } from "lib/stores/account";
 
+import { SavedAccountModalHeader } from "./SavedAccountModalHeader";
 import type { SaveAccountDetail } from "./SaveNewAccount";
 
 interface EditSavedAccountModalProps {
@@ -66,12 +66,7 @@ export const EditSavedAccountModal = ({
       title="Edit account"
       icon="edit-solid"
       headerContent={
-        <Flex gap={4} alignItems="center" pt={6}>
-          <Text variant="body2" fontWeight={500} color="text.main">
-            Account Address
-          </Text>
-          <ExplorerLink value={accountLocalInfo.address} type="user_address" />
-        </Flex>
+        <SavedAccountModalHeader address={accountLocalInfo.address} />
       }
       trigger={triggerElement}
       mainBtnTitle="Save"
@@ -87,7 +82,7 @@ export const EditSavedAccountModal = ({
           control={control}
           label="Account Name"
           variant="fixed-floating"
-          //   placeholder="ex. Celatone Account 1"
+          placeholder="ex. Celatone Account 1"
           labelBgColor="gray.900"
           rules={{
             maxLength: constants.maxAccountNameLength,
@@ -100,7 +95,7 @@ export const EditSavedAccountModal = ({
           name="description"
           control={control}
           label="Account Description"
-          //   placeholder="Help understanding what this account do ..."
+          placeholder="Help understanding what this account do ..."
           variant="fixed-floating"
           labelBgColor="gray.900"
           rules={{
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index eddb41d76..d60153e84 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -7,6 +7,7 @@ import { ActionModal } from "../ActionModal";
 import {
   useCelatoneApp,
   useExampleAddresses,
+  useMoveConfig,
   useValidateAddress,
 } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
@@ -15,6 +16,8 @@ import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
 import { useAccountStore } from "lib/providers/store";
 import type { Addr } from "lib/types";
 
+import { SavedAccountModalHeader } from "./SavedAccountModalHeader";
+
 export interface SaveAccountDetail {
   address: Addr;
   name: string;
@@ -35,8 +38,15 @@ export function SaveNewAccountModal({
   publicDescription,
 }: SaveNewAccountModalProps) {
   const { user: exampleUserAddress } = useExampleAddresses();
-  const { validateUserAddress, validateContractAddress } = useValidateAddress();
+  const {
+    validateUserAddress,
+    validateContractAddress,
+    validateHexWalletAddress,
+    validateHexModuleAddress,
+  } = useValidateAddress();
   const { constants } = useCelatoneApp();
+  const move = useMoveConfig({ shouldRedirect: false });
+
   const getMaxLengthError = useGetMaxLengthError();
   const { isAccountSaved } = useAccountStore();
 
@@ -88,7 +98,13 @@ export function SaveNewAccountModal({
         const timeoutId = setTimeout(() => {
           const errUser = validateUserAddress(addressState);
           const errContract = validateContractAddress(addressState);
-          if (errUser && errContract)
+          const isHex = validateHexWalletAddress(addressState);
+          const isHexModule = validateHexModuleAddress(addressState);
+
+          if (
+            (!move.enabled && errUser && errContract) ||
+            (move.enabled && errUser && errContract && !isHex && !isHexModule)
+          )
             setStatus({
               state: "error",
               message: errUser,
@@ -109,6 +125,9 @@ export function SaveNewAccountModal({
     isAccountSaved,
     validateUserAddress,
     validateContractAddress,
+    validateHexWalletAddress,
+    validateHexModuleAddress,
+    move.enabled,
   ]);
 
   const handleSave = useHandleAccountSave({
@@ -132,21 +151,25 @@ export function SaveNewAccountModal({
       disabledMain={
         status.state !== "success" || !!errors.name || !!errors.description
       }
+      headerContent={
+        accountAddress && <SavedAccountModalHeader address={accountAddress} />
+      }
       otherBtnTitle="Cancel"
       buttonRemark="Saved accounts are stored locally on your device."
     >
       <Flex direction="column" gap={6}>
-        <ControllerInput
-          name="address"
-          control={control}
-          label="Account Address"
-          variant="fixed-floating"
-          placeholder={`ex. ${exampleUserAddress}`}
-          status={status}
-          labelBgColor="gray.900"
-          isRequired
-          isReadOnly={!!addressState}
-        />
+        {!accountAddress && (
+          <ControllerInput
+            name="address"
+            control={control}
+            label="Account Address"
+            variant="fixed-floating"
+            placeholder={`ex. ${exampleUserAddress}`}
+            status={status}
+            labelBgColor="gray.900"
+            isRequired
+          />
+        )}
         <ControllerInput
           name="name"
           control={control}
diff --git a/src/lib/components/modal/account/SavedAccountModalHeader.tsx b/src/lib/components/modal/account/SavedAccountModalHeader.tsx
new file mode 100644
index 000000000..721b473a6
--- /dev/null
+++ b/src/lib/components/modal/account/SavedAccountModalHeader.tsx
@@ -0,0 +1,37 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { useMoveConfig } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { Addr, HumanAddr } from "lib/types";
+import { bech32AddressToHex, unpadHexAddress } from "lib/utils";
+
+interface SavedAccountModalHeaderProps {
+  address: Addr;
+}
+
+export const SavedAccountModalHeader = ({
+  address,
+}: SavedAccountModalHeaderProps) => {
+  const move = useMoveConfig({ shouldRedirect: false });
+  return (
+    <Flex direction="column" gap={1}>
+      <Flex gap={4} alignItems="center" pt={6}>
+        <Text variant="body2" fontWeight={500} color="text.main" minW={32}>
+          Account Address
+        </Text>
+        <ExplorerLink value={address} type="user_address" />
+      </Flex>
+      {move.enabled && (
+        <Flex gap={4} alignItems="center">
+          <Text variant="body2" fontWeight={500} color="text.main" minW={32}>
+            Hex Address
+          </Text>
+          <ExplorerLink
+            value={unpadHexAddress(bech32AddressToHex(address as HumanAddr))}
+            type="user_address"
+          />
+        </Flex>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/table/accounts/SavedAccountsTable.tsx b/src/lib/components/table/accounts/SavedAccountsTable.tsx
index 3458b43eb..a864a4167 100644
--- a/src/lib/components/table/accounts/SavedAccountsTable.tsx
+++ b/src/lib/components/table/accounts/SavedAccountsTable.tsx
@@ -1,5 +1,6 @@
 import { TableContainer } from "@chakra-ui/react";
 
+import { useMoveConfig } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import type { AccountLocalInfo } from "lib/stores/account";
 import type { Option } from "lib/types";
@@ -18,14 +19,17 @@ export const SavedAccountsTable = ({
   isLoading,
   emptyState,
 }: SavedAccountsTableProps) => {
+  const move = useMoveConfig({ shouldRedirect: false });
+
   if (isLoading) return <Loading withBorder />;
   if (!accounts?.length) return emptyState;
 
-  const templateColumns =
-    "max(160px) minmax(200px, 1fr) minmax(250px, 1fr) max(100px)";
+  const templateColumns = move.enabled
+    ? "max(160px) max(160px) minmax(200px, 1fr) minmax(250px, 1fr) max(100px)"
+    : "max(160px) minmax(200px, 1fr) minmax(250px, 1fr) max(100px)";
 
   return (
-    <TableContainer pb={6}>
+    <TableContainer py={6}>
       <SavedAccountsTableHeader templateColumns={templateColumns} />
       {accounts.map((account) => (
         <SavedAccountsTableRow
diff --git a/src/lib/components/table/accounts/SavedAccountsTableHeader.tsx b/src/lib/components/table/accounts/SavedAccountsTableHeader.tsx
index ce6d2259c..6989d3013 100644
--- a/src/lib/components/table/accounts/SavedAccountsTableHeader.tsx
+++ b/src/lib/components/table/accounts/SavedAccountsTableHeader.tsx
@@ -2,16 +2,21 @@ import type { GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
 import { TableHeader } from "../tableComponents";
+import { useMoveConfig } from "lib/app-provider";
 
 export const SavedAccountsTableHeader = ({
   templateColumns,
 }: {
   templateColumns: GridProps["templateColumns"];
-}) => (
-  <Grid templateColumns={templateColumns} minW="min-content">
-    <TableHeader>Account Address</TableHeader>
-    <TableHeader>Account Name</TableHeader>
-    <TableHeader>Account Description</TableHeader>
-    <TableHeader />
-  </Grid>
-);
+}) => {
+  const move = useMoveConfig({ shouldRedirect: false });
+  return (
+    <Grid templateColumns={templateColumns} minW="min-content">
+      <TableHeader>Account Address</TableHeader>
+      {move.enabled && <TableHeader>Hex Address</TableHeader>}
+      <TableHeader>Account Name</TableHeader>
+      <TableHeader>Account Description</TableHeader>
+      <TableHeader />
+    </Grid>
+  );
+};
diff --git a/src/lib/components/table/accounts/SavedAccountsTableRow.tsx b/src/lib/components/table/accounts/SavedAccountsTableRow.tsx
index 38c046ca9..a261a787f 100644
--- a/src/lib/components/table/accounts/SavedAccountsTableRow.tsx
+++ b/src/lib/components/table/accounts/SavedAccountsTableRow.tsx
@@ -1,7 +1,7 @@
 import { Grid, IconButton, Text } from "@chakra-ui/react";
 
 import { TableRow } from "../tableComponents";
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useMoveConfig } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import {
@@ -9,7 +9,8 @@ import {
   RemoveSavedAccountModal,
 } from "lib/components/modal";
 import type { AccountLocalInfo } from "lib/stores/account";
-import type { Addr } from "lib/types";
+import type { Addr, HumanAddr } from "lib/types";
+import { bech32AddressToHex, unpadHexAddress } from "lib/utils";
 
 import { AccountNameCell } from "./AccountNameCell";
 
@@ -22,6 +23,7 @@ export const SavedAccountsTableRow = ({
   accountInfo,
   templateColumns,
 }: SavedAccountsTableRowProps) => {
+  const move = useMoveConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
   const onRowSelect = (address: Addr) =>
     navigate({
@@ -45,6 +47,17 @@ export const SavedAccountsTableRow = ({
           showCopyOnHover
         />
       </TableRow>
+      {move.enabled && (
+        <TableRow>
+          <ExplorerLink
+            type="user_address"
+            value={unpadHexAddress(
+              bech32AddressToHex(accountInfo.address as HumanAddr)
+            )}
+            showCopyOnHover
+          />
+        </TableRow>
+      )}
       <TableRow>
         <AccountNameCell accountLocalInfo={accountInfo} />
       </TableRow>
diff --git a/src/lib/hooks/useHandleSave.tsx b/src/lib/hooks/useHandleSave.tsx
index fb32ab6af..d828b0463 100644
--- a/src/lib/hooks/useHandleSave.tsx
+++ b/src/lib/hooks/useHandleSave.tsx
@@ -1,8 +1,10 @@
 import { useToast } from "@chakra-ui/react";
+import { useMemo } from "react";
 
+import { useConvertHexAddress, useValidateAddress } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { useAccountStore, useContractStore } from "lib/providers/store";
-import type { Addr, ContractAddr, LVPair, Option } from "lib/types";
+import type { Addr, ContractAddr, HexAddr, LVPair, Option } from "lib/types";
 
 import { useUserKey } from "./useUserKey";
 
@@ -75,8 +77,27 @@ export const useHandleAccountSave = ({
 }: UseHandleAccountSaveProps) => {
   const toast = useToast();
   const { updateAccountLocalInfo } = useAccountStore();
+  const { validateHexWalletAddress, validateHexModuleAddress } =
+    useValidateAddress();
+  const { convertHexWalletAddress, convertHexModuleAddress } =
+    useConvertHexAddress();
+
+  const bech32Address = useMemo(() => {
+    if (validateHexWalletAddress(address))
+      return convertHexWalletAddress(address as HexAddr);
+    if (validateHexModuleAddress(address))
+      return convertHexModuleAddress(address as HexAddr);
+    return address;
+  }, [
+    address,
+    convertHexModuleAddress,
+    convertHexWalletAddress,
+    validateHexModuleAddress,
+    validateHexWalletAddress,
+  ]);
+
   return (inputName?: string) => {
-    updateAccountLocalInfo(address, inputName ?? name, description);
+    updateAccountLocalInfo(bech32Address, inputName ?? name, description);
 
     actions?.();
 
diff --git a/src/lib/pages/saved-accounts/index.tsx b/src/lib/pages/saved-accounts/index.tsx
index 4f24766db..881c2a2a7 100644
--- a/src/lib/pages/saved-accounts/index.tsx
+++ b/src/lib/pages/saved-accounts/index.tsx
@@ -57,7 +57,6 @@ const SavedAccounts = observer(() => {
         onChange={(e) => setKeyword(e.target.value)}
         size="lg"
       />
-
       <SavedAccountsTable
         accounts={filteredsavedAccounts}
         isLoading={!isHydrated}

From 12e6eac25fa32f87a62f092ef8a1805a056cd7a1 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 9 Nov 2023 17:28:48 +0700
Subject: [PATCH 338/368] fix(components): hide menu in nav

---
 src/lib/layout/navbar/index.tsx | 34 ++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index f158dda8d..1ca6ee8f9 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -107,18 +107,18 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
                 icon: "code" as IconKeys,
               },
             ],
-            subSection: [
-              {
-                category: "This Device",
-                submenu: [
-                  {
-                    name: "Saved Accounts",
-                    slug: "/saved-accounts",
-                    icon: "admin" as IconKeys,
-                  },
-                ],
-              },
-            ],
+            // subSection: [
+            //   {
+            //     category: "This Device",
+            //     submenu: [
+            //       {
+            //         name: "Saved Accounts",
+            //         slug: "/saved-accounts",
+            //         icon: "admin" as IconKeys,
+            //       },
+            //     ],
+            //   },
+            // ],
           },
         ]
       : []),
@@ -175,11 +175,11 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
               {
                 category: "This Device",
                 submenu: [
-                  {
-                    name: "Saved Accounts",
-                    slug: "/saved-accounts",
-                    icon: "admin" as IconKeys,
-                  },
+                  // {
+                  //   name: "Saved Accounts",
+                  //   slug: "/saved-accounts",
+                  //   icon: "admin" as IconKeys,
+                  // },
                   {
                     name: "Saved Codes",
                     slug: "/saved-codes",

From 79099ab1235598a050c59aa6d99a1b56a1b83331 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 9 Nov 2023 18:39:32 +0700
Subject: [PATCH 339/368] fix: module search and abi

---
 .../components/modules/ModuleLists.tsx        | 69 +++++++++++--------
 .../components/modules/ModuleListsBody.tsx    | 46 ++++---------
 src/lib/pages/account-details/index.tsx       |  2 +-
 src/lib/styles/theme/components/form.ts       |  2 +-
 src/lib/utils/abi.ts                          | 19 +++--
 5 files changed, 67 insertions(+), 71 deletions(-)

diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 441f3a2e0..62c819254 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -1,8 +1,10 @@
 import { Flex } from "@chakra-ui/react";
+import { useState } from "react";
 
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { TableTitle } from "lib/components/table";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { TableTitle, ViewMore } from "lib/components/table";
 import { type IndexedModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
 
@@ -23,41 +25,52 @@ export const ModuleLists = ({
   isLoading,
   onViewMore,
 }: ModuleListsProps) => {
+  const [keyword, setKeyword] = useState("");
   const isMobile = useMobile();
   const isMobileOverview = isMobile && !!onViewMore;
-  return (
+  return isMobileOverview ? (
+    <Flex
+      justify="space-between"
+      w="full"
+      bg="gray.900"
+      borderRadius="8px"
+      p={4}
+      onClick={onViewMore}
+    >
+      <TableTitle title="Modules" count={totalCount} mb={0} />
+      <CustomIcon name="chevron-right" color="gray.600" />
+    </Flex>
+  ) : (
     <Flex
       direction="column"
       mt={{ base: 4, md: 8 }}
       mb={{ base: 0, md: 8 }}
       width="full"
+      gap={6}
     >
-      {isMobileOverview ? (
-        <Flex
-          justify="space-between"
-          w="full"
-          bg="gray.900"
-          borderRadius="8px"
-          p={4}
-          onClick={onViewMore}
-        >
-          <TableTitle title="Modules" count={totalCount} mb={0} />
-          <CustomIcon name="chevron-right" color="gray.600" />
-        </Flex>
-      ) : (
-        <>
-          <TableTitle
-            title="Module Instances"
-            helperText="Modules are ‘smart contracts’ deployed by this account"
-            count={totalCount}
-          />
-          <ModuleListsBody
-            selectedAddress={selectedAddress}
-            modules={modules}
-            isLoading={isLoading}
-            onViewMore={onViewMore}
-          />
-        </>
+      <TableTitle
+        title="Module Instances"
+        helperText="Modules are ‘smart contracts’ deployed by this account"
+        count={totalCount}
+        mb={0}
+      />
+      {!onViewMore && (
+        <InputWithIcon
+          placeholder="Search with Module Name..."
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          action="execute-message-search"
+        />
+      )}
+      <ModuleListsBody
+        selectedAddress={selectedAddress}
+        keyword={keyword}
+        modules={modules}
+        isLoading={isLoading}
+        onViewMore={onViewMore}
+      />
+      {onViewMore && totalCount && totalCount > 9 && (
+        <ViewMore onClick={onViewMore} />
       )}
     </Flex>
   );
diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
index 3563f1c1a..ab1a85d96 100644
--- a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -1,18 +1,17 @@
-import { Box, SimpleGrid } from "@chakra-ui/react";
-import { useMemo, useState } from "react";
+import { SimpleGrid } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
-import InputWithIcon from "lib/components/InputWithIcon";
 import { Loading } from "lib/components/Loading";
 import { ModuleCard } from "lib/components/module";
 import { EmptyState } from "lib/components/state";
-import { ViewMore } from "lib/components/table";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
 
 interface ModuleListsBodyProps {
   selectedAddress: MoveAccountAddr;
+  keyword: string;
   modules: Option<IndexedModule[]>;
   isLoading: boolean;
   onViewMore?: () => void;
@@ -20,12 +19,12 @@ interface ModuleListsBodyProps {
 
 export const ModuleListsBody = ({
   selectedAddress,
+  keyword,
   modules,
   isLoading,
   onViewMore,
 }: ModuleListsBodyProps) => {
   const navigate = useInternalNavigate();
-  const [keyword, setKeyword] = useState("");
 
   const filteredModules = useMemo(() => {
     if (!keyword) return modules;
@@ -58,33 +57,18 @@ export const ModuleListsBody = ({
       />
     );
   return (
-    <div>
-      {!onViewMore && (
-        <Box mb={8}>
-          <InputWithIcon
-            placeholder="Search with Module Name..."
-            value={keyword}
-            onChange={(e) => setKeyword(e.target.value)}
-            action="execute-message-search"
+    <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4}>
+      {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
+        (item) => (
+          <ModuleCard
+            key={item.moduleName}
+            selectedAddress={selectedAddress}
+            module={item}
+            selectedModule={undefined}
+            setSelectedModule={handleOnSelect}
           />
-        </Box>
+        )
       )}
-      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={4}>
-        {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
-          (item) => (
-            <ModuleCard
-              key={item.moduleName}
-              selectedAddress={selectedAddress}
-              module={item}
-              selectedModule={undefined}
-              setSelectedModule={handleOnSelect}
-            />
-          )
-        )}
-      </SimpleGrid>
-      {onViewMore && filteredModules.length > 9 && (
-        <ViewMore onClick={onViewMore} />
-      )}
-    </div>
+    </SimpleGrid>
   );
 };
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index c4634f810..185454876 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -404,8 +404,8 @@ const AccountDetailsBody = ({
           </TabPanel>
           <TabPanel p={0}>
             <ModuleLists
-              selectedAddress={accountAddress}
               totalCount={modulesData?.length}
+              selectedAddress={accountAddress}
               modules={modulesData}
               isLoading={isModulesLoading}
             />
diff --git a/src/lib/styles/theme/components/form.ts b/src/lib/styles/theme/components/form.ts
index 6885f926e..618a33983 100644
--- a/src/lib/styles/theme/components/form.ts
+++ b/src/lib/styles/theme/components/form.ts
@@ -10,7 +10,7 @@ const errorMain = "error.main";
 const labelStyles = {
   top: 0,
   left: 0,
-  zIndex: 2,
+  zIndex: 1,
   position: "absolute",
   pointerEvents: "none",
   mx: 3,
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 897aabd07..c17487be5 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -55,16 +55,15 @@ export const getAbiInitialData = (length: number) =>
 // ------------------------------------------//
 // -----------------MOVE ARGS----------------//
 // ------------------------------------------//
-export const getArgType = (argType: string) => {
-  if (argType === "0x1::string::String") return BCS.STRING;
-  if (argType.startsWith("0x1::option::Option")) return BCS.OPTION;
-  if (argType.startsWith("0x1::object::Object")) return BCS.OBJECT;
-  if (argType === "0x1::fixed_point32::FixedPoint32") return BCS.FIXED_POINT32;
-  if (argType === "0x1::fixed_point64::FixedPoint64") return BCS.FIXED_POINT64;
-  if (argType === "0x1::decimal128::Decimal128") return BCS.DECIMAL128;
-  if (argType === "0x1::decimal256::Decimal256") return BCS.DECIMAL256;
-  return argType;
-};
+export const getArgType = (argType: string) =>
+  argType
+    .replace("0x1::string::String", BCS.STRING)
+    .replace("0x1::option::Option", BCS.OPTION)
+    .replace("0x1::object::Object", BCS.OBJECT)
+    .replace("0x1::fixed_point32::FixedPoint32", BCS.FIXED_POINT32)
+    .replace("0x1::fixed_point64::FixedPoint64", BCS.FIXED_POINT64)
+    .replace("0x1::decimal128::Decimal128", BCS.DECIMAL128)
+    .replace("0x1::decimal256::Decimal256", BCS.DECIMAL256);
 
 const getArgValue = ({
   type,

From bd98e9e6323730bdc6fe6c438fe5ee670c11d049 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 9 Nov 2023 13:49:59 +0700
Subject: [PATCH 340/368] fix: add disable delegation, fix logo, observer

---
 src/config/chain/neutron.ts                   |   4 +-
 src/config/chain/types.ts                     |   1 +
 .../components/resources/ResourceOverview.tsx |   1 +
 .../components/tables/AdminContractsTable.tsx | 193 +++++++++---------
 .../tables/InstantiatedContractsTable.tsx     | 193 +++++++++---------
 .../components/tables/StoredCodesTable.tsx    | 193 +++++++++---------
 .../NonRedelegatableTableMobileCard.tsx       |   5 +-
 .../RedelegationTableMobileCard.tsx           |  12 +-
 src/lib/pages/account-details/data.ts         |  20 +-
 src/lib/pages/account-details/index.tsx       |  31 ++-
 10 files changed, 337 insertions(+), 316 deletions(-)

diff --git a/src/config/chain/neutron.ts b/src/config/chain/neutron.ts
index ef10ae209..cba0f18c9 100644
--- a/src/config/chain/neutron.ts
+++ b/src/config/chain/neutron.ts
@@ -49,7 +49,7 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/neutron/validators",
       proposal: "",
     },
-    extra: {},
+    extra: { disableDelegation: true },
   },
   "pion-1": {
     chain: "neutron",
@@ -97,6 +97,6 @@ export const NEUTRON_CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/neutron/validators",
       proposal: "",
     },
-    extra: {},
+    extra: { disableDelegation: true },
   },
 };
diff --git a/src/config/chain/types.ts b/src/config/chain/types.ts
index c83e2203f..502eabb55 100644
--- a/src/config/chain/types.ts
+++ b/src/config/chain/types.ts
@@ -77,6 +77,7 @@ export interface ChainConfig {
   explorerLink: ExplorerConfig;
   extra: {
     disableAnyOfAddresses?: boolean;
+    disableDelegation?: boolean;
   };
 }
 
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
index 0c12c6f18..1328ec988 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -30,6 +30,7 @@ export const ResourceOverview = ({
       w="full"
       bg="gray.900"
       borderRadius="8px"
+      mt={{ base: 4, md: 8 }}
       p={4}
       onClick={onViewMore}
     >
diff --git a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
index 002615d7b..0a097ff4f 100644
--- a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
@@ -1,4 +1,5 @@
 import { Box } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
 import type { ChangeEvent } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
@@ -23,105 +24,107 @@ interface AdminContractsTableProps {
   onViewMore?: () => void;
 }
 
-export const AdminContractsTable = ({
-  walletAddress,
-  scrollComponentId,
-  totalData,
-  refetchCount,
-  onViewMore,
-}: AdminContractsTableProps) => {
-  const isMobile = useMobile();
-  const navigate = useInternalNavigate();
-  const onRowSelect = (contract: ContractAddr) =>
-    navigate({
-      pathname: "/contracts/[contract]",
-      query: { contract },
-    });
-
-  const {
-    pagesQuantity,
-    currentPage,
-    setCurrentPage,
-    pageSize,
-    setPageSize,
-    offset,
-  } = usePaginator({
-    total: totalData,
-    initialState: {
-      pageSize: 10,
-      currentPage: 1,
-      isDisabled: false,
-    },
-  });
-  const { contracts, isLoading } = useAccountAdminContracts(
+export const AdminContractsTable = observer(
+  ({
     walletAddress,
-    offset,
-    onViewMore ? 5 : pageSize
-  );
+    scrollComponentId,
+    totalData,
+    refetchCount,
+    onViewMore,
+  }: AdminContractsTableProps) => {
+    const isMobile = useMobile();
+    const navigate = useInternalNavigate();
+    const onRowSelect = (contract: ContractAddr) =>
+      navigate({
+        pathname: "/contracts/[contract]",
+        query: { contract },
+      });
 
-  const onPageChange = (nextPage: number) => {
-    refetchCount();
-    setCurrentPage(nextPage);
-  };
+    const {
+      pagesQuantity,
+      currentPage,
+      setCurrentPage,
+      pageSize,
+      setPageSize,
+      offset,
+    } = usePaginator({
+      total: totalData,
+      initialState: {
+        pageSize: 10,
+        currentPage: 1,
+        isDisabled: false,
+      },
+    });
+    const { contracts, isLoading } = useAccountAdminContracts(
+      walletAddress,
+      offset,
+      onViewMore ? 5 : pageSize
+    );
 
-  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const size = Number(e.target.value);
-    refetchCount();
-    setPageSize(size);
-    setCurrentPage(1);
-  };
+    const onPageChange = (nextPage: number) => {
+      refetchCount();
+      setCurrentPage(nextPage);
+    };
 
-  const isMobileOverview = isMobile && !!onViewMore;
-  return (
-    <Box mt={{ base: 4, md: 8 }}>
-      {isMobileOverview ? (
-        <MobileTitle
-          title="Contract Admins"
-          count={totalData ?? 0}
-          onViewMore={onViewMore}
-        />
-      ) : (
-        <>
-          <TableTitle
+    const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+      const size = Number(e.target.value);
+      refetchCount();
+      setPageSize(size);
+      setCurrentPage(1);
+    };
+
+    const isMobileOverview = isMobile && !!onViewMore;
+    return (
+      <Box mt={{ base: 4, md: 8 }}>
+        {isMobileOverview ? (
+          <MobileTitle
             title="Contract Admins"
             count={totalData ?? 0}
-            helperText="This account is the admin for following contracts"
-            mb={2}
-          />
-          <ContractsTable
-            contracts={contracts}
-            isLoading={isLoading}
-            emptyState={
-              <EmptyState
-                message={
-                  !contracts ? (
-                    <ErrorFetching />
-                  ) : (
-                    "This account does not have any admin access for any contracts."
-                  )
-                }
-                withBorder
-              />
-            }
-            onRowSelect={onRowSelect}
+            onViewMore={onViewMore}
           />
-        </>
-      )}
-      {!!totalData &&
-        (onViewMore
-          ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
-          : totalData > 10 && (
-              <Pagination
-                currentPage={currentPage}
-                pagesQuantity={pagesQuantity}
-                offset={offset}
-                totalData={totalData}
-                scrollComponentId={scrollComponentId}
-                pageSize={pageSize}
-                onPageChange={onPageChange}
-                onPageSizeChange={onPageSizeChange}
-              />
-            ))}
-    </Box>
-  );
-};
+        ) : (
+          <>
+            <TableTitle
+              title="Contract Admins"
+              count={totalData ?? 0}
+              helperText="This account is the admin for following contracts"
+              mb={2}
+            />
+            <ContractsTable
+              contracts={contracts}
+              isLoading={isLoading}
+              emptyState={
+                <EmptyState
+                  message={
+                    !contracts ? (
+                      <ErrorFetching />
+                    ) : (
+                      "This account does not have any admin access for any contracts."
+                    )
+                  }
+                  withBorder
+                />
+              }
+              onRowSelect={onRowSelect}
+            />
+          </>
+        )}
+        {!!totalData &&
+          (onViewMore
+            ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
+            : totalData > 10 && (
+                <Pagination
+                  currentPage={currentPage}
+                  pagesQuantity={pagesQuantity}
+                  offset={offset}
+                  totalData={totalData}
+                  scrollComponentId={scrollComponentId}
+                  pageSize={pageSize}
+                  onPageChange={onPageChange}
+                  onPageSizeChange={onPageSizeChange}
+                />
+              ))}
+      </Box>
+    );
+  }
+);
diff --git a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
index c0ddc3cb7..672e5fe8b 100644
--- a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
@@ -1,4 +1,5 @@
 import { Box } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
 import type { ChangeEvent } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
@@ -23,105 +24,107 @@ interface InstantiatedContractsTableProps {
   onViewMore?: () => void;
 }
 
-export const InstantiatedContractsTable = ({
-  walletAddress,
-  scrollComponentId,
-  totalData,
-  refetchCount,
-  onViewMore,
-}: InstantiatedContractsTableProps) => {
-  const isMobile = useMobile();
-  const navigate = useInternalNavigate();
-  const onRowSelect = (contract: ContractAddr) =>
-    navigate({
-      pathname: "/contracts/[contract]",
-      query: { contract },
-    });
-
-  const {
-    pagesQuantity,
-    currentPage,
-    setCurrentPage,
-    pageSize,
-    setPageSize,
-    offset,
-  } = usePaginator({
-    total: totalData,
-    initialState: {
-      pageSize: 10,
-      currentPage: 1,
-      isDisabled: false,
-    },
-  });
-  const { contracts, isLoading } = useAccountContracts(
+export const InstantiatedContractsTable = observer(
+  ({
     walletAddress,
-    offset,
-    onViewMore ? 5 : pageSize
-  );
+    scrollComponentId,
+    totalData,
+    refetchCount,
+    onViewMore,
+  }: InstantiatedContractsTableProps) => {
+    const isMobile = useMobile();
+    const navigate = useInternalNavigate();
+    const onRowSelect = (contract: ContractAddr) =>
+      navigate({
+        pathname: "/contracts/[contract]",
+        query: { contract },
+      });
 
-  const onPageChange = (nextPage: number) => {
-    refetchCount();
-    setCurrentPage(nextPage);
-  };
+    const {
+      pagesQuantity,
+      currentPage,
+      setCurrentPage,
+      pageSize,
+      setPageSize,
+      offset,
+    } = usePaginator({
+      total: totalData,
+      initialState: {
+        pageSize: 10,
+        currentPage: 1,
+        isDisabled: false,
+      },
+    });
+    const { contracts, isLoading } = useAccountContracts(
+      walletAddress,
+      offset,
+      onViewMore ? 5 : pageSize
+    );
 
-  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const size = Number(e.target.value);
-    refetchCount();
-    setPageSize(size);
-    setCurrentPage(1);
-  };
+    const onPageChange = (nextPage: number) => {
+      refetchCount();
+      setCurrentPage(nextPage);
+    };
 
-  const isMobileOverview = isMobile && !!onViewMore;
-  return (
-    <Box mt={{ base: 4, md: 8 }}>
-      {isMobileOverview ? (
-        <MobileTitle
-          title="Contract Instances"
-          count={totalData ?? 0}
-          onViewMore={onViewMore}
-        />
-      ) : (
-        <>
-          <TableTitle
+    const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+      const size = Number(e.target.value);
+      refetchCount();
+      setPageSize(size);
+      setCurrentPage(1);
+    };
+
+    const isMobileOverview = isMobile && !!onViewMore;
+    return (
+      <Box mt={{ base: 4, md: 8 }}>
+        {isMobileOverview ? (
+          <MobileTitle
             title="Contract Instances"
             count={totalData ?? 0}
-            helperText="This account instantiated the following contracts"
-            mb={2}
-          />
-          <ContractsTable
-            contracts={contracts}
-            isLoading={isLoading}
-            emptyState={
-              <EmptyState
-                message={
-                  !contracts ? (
-                    <ErrorFetching />
-                  ) : (
-                    "This account did not instantiate any contracts before."
-                  )
-                }
-                withBorder
-              />
-            }
-            onRowSelect={onRowSelect}
+            onViewMore={onViewMore}
           />
-        </>
-      )}
-      {!!totalData &&
-        (onViewMore
-          ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
-          : totalData > 10 && (
-              <Pagination
-                currentPage={currentPage}
-                pagesQuantity={pagesQuantity}
-                offset={offset}
-                totalData={totalData}
-                scrollComponentId={scrollComponentId}
-                pageSize={pageSize}
-                onPageChange={onPageChange}
-                onPageSizeChange={onPageSizeChange}
-              />
-            ))}
-    </Box>
-  );
-};
+        ) : (
+          <>
+            <TableTitle
+              title="Contract Instances"
+              count={totalData ?? 0}
+              helperText="This account instantiated the following contracts"
+              mb={2}
+            />
+            <ContractsTable
+              contracts={contracts}
+              isLoading={isLoading}
+              emptyState={
+                <EmptyState
+                  message={
+                    !contracts ? (
+                      <ErrorFetching />
+                    ) : (
+                      "This account did not instantiate any contracts before."
+                    )
+                  }
+                  withBorder
+                />
+              }
+              onRowSelect={onRowSelect}
+            />
+          </>
+        )}
+        {!!totalData &&
+          (onViewMore
+            ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
+            : totalData > 10 && (
+                <Pagination
+                  currentPage={currentPage}
+                  pagesQuantity={pagesQuantity}
+                  offset={offset}
+                  totalData={totalData}
+                  scrollComponentId={scrollComponentId}
+                  pageSize={pageSize}
+                  onPageChange={onPageChange}
+                  onPageSizeChange={onPageSizeChange}
+                />
+              ))}
+      </Box>
+    );
+  }
+);
diff --git a/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx b/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx
index ec5383e42..6c2827893 100644
--- a/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx
+++ b/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx
@@ -1,4 +1,5 @@
 import { Box } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
 import type { ChangeEvent } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
@@ -23,105 +24,107 @@ interface StoredCodesTableProps {
   onViewMore?: () => void;
 }
 
-export const StoredCodesTable = ({
-  walletAddress,
-  scrollComponentId,
-  totalData,
-  refetchCount,
-  onViewMore,
-}: StoredCodesTableProps) => {
-  const isMobile = useMobile();
-  const navigate = useInternalNavigate();
-  const onRowSelect = (codeId: number) =>
-    navigate({
-      pathname: "/codes/[codeId]",
-      query: { codeId },
-    });
-
-  const {
-    pagesQuantity,
-    currentPage,
-    setCurrentPage,
-    pageSize,
-    setPageSize,
-    offset,
-  } = usePaginator({
-    total: totalData,
-    initialState: {
-      pageSize: 10,
-      currentPage: 1,
-      isDisabled: false,
-    },
-  });
-  const { codes, isLoading } = useAccountCodes(
+export const StoredCodesTable = observer(
+  ({
     walletAddress,
-    offset,
-    onViewMore ? 5 : pageSize
-  );
+    scrollComponentId,
+    totalData,
+    refetchCount,
+    onViewMore,
+  }: StoredCodesTableProps) => {
+    const isMobile = useMobile();
+    const navigate = useInternalNavigate();
+    const onRowSelect = (codeId: number) =>
+      navigate({
+        pathname: "/codes/[codeId]",
+        query: { codeId },
+      });
 
-  const onPageChange = (nextPage: number) => {
-    refetchCount();
-    setCurrentPage(nextPage);
-  };
+    const {
+      pagesQuantity,
+      currentPage,
+      setCurrentPage,
+      pageSize,
+      setPageSize,
+      offset,
+    } = usePaginator({
+      total: totalData,
+      initialState: {
+        pageSize: 10,
+        currentPage: 1,
+        isDisabled: false,
+      },
+    });
+    const { codes, isLoading } = useAccountCodes(
+      walletAddress,
+      offset,
+      onViewMore ? 5 : pageSize
+    );
 
-  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const size = Number(e.target.value);
-    refetchCount();
-    setPageSize(size);
-    setCurrentPage(1);
-  };
+    const onPageChange = (nextPage: number) => {
+      refetchCount();
+      setCurrentPage(nextPage);
+    };
 
-  const isMobileOverview = isMobile && !!onViewMore;
-  return (
-    <Box mt={{ base: 4, md: 8 }}>
-      {isMobileOverview ? (
-        <MobileTitle
-          title="Stored Codes"
-          count={totalData ?? 0}
-          onViewMore={onViewMore}
-        />
-      ) : (
-        <>
-          <TableTitle
+    const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+      const size = Number(e.target.value);
+      refetchCount();
+      setPageSize(size);
+      setCurrentPage(1);
+    };
+
+    const isMobileOverview = isMobile && !!onViewMore;
+    return (
+      <Box mt={{ base: 4, md: 8 }}>
+        {isMobileOverview ? (
+          <MobileTitle
             title="Stored Codes"
             count={totalData ?? 0}
-            mb={2}
-            helperText="This account stored the following codes"
-          />
-          <CodesTable
-            codes={codes}
-            isLoading={isLoading}
-            emptyState={
-              <EmptyState
-                message={
-                  !codes ? (
-                    <ErrorFetching />
-                  ) : (
-                    "This account did not stored any codes before."
-                  )
-                }
-                withBorder
-              />
-            }
-            onRowSelect={onRowSelect}
+            onViewMore={onViewMore}
           />
-        </>
-      )}
-      {!!totalData &&
-        (onViewMore
-          ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
-          : totalData > 10 && (
-              <Pagination
-                currentPage={currentPage}
-                pagesQuantity={pagesQuantity}
-                offset={offset}
-                totalData={totalData}
-                scrollComponentId={scrollComponentId}
-                pageSize={pageSize}
-                onPageChange={onPageChange}
-                onPageSizeChange={onPageSizeChange}
-              />
-            ))}
-    </Box>
-  );
-};
+        ) : (
+          <>
+            <TableTitle
+              title="Stored Codes"
+              count={totalData ?? 0}
+              mb={2}
+              helperText="This account stored the following codes"
+            />
+            <CodesTable
+              codes={codes}
+              isLoading={isLoading}
+              emptyState={
+                <EmptyState
+                  message={
+                    !codes ? (
+                      <ErrorFetching />
+                    ) : (
+                      "This account did not stored any codes before."
+                    )
+                  }
+                  withBorder
+                />
+              }
+              onRowSelect={onRowSelect}
+            />
+          </>
+        )}
+        {!!totalData &&
+          (onViewMore
+            ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
+            : totalData > 10 && (
+                <Pagination
+                  currentPage={currentPage}
+                  pagesQuantity={pagesQuantity}
+                  offset={offset}
+                  totalData={totalData}
+                  scrollComponentId={scrollComponentId}
+                  pageSize={pageSize}
+                  onPageChange={onPageChange}
+                  onPageSizeChange={onPageSizeChange}
+                />
+              ))}
+      </Box>
+    );
+  }
+);
diff --git a/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx
index 2dc705e7a..dad952c0e 100644
--- a/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx
+++ b/src/lib/pages/account-details/components/tables/non-redelegatable/NonRedelegatableTableMobileCard.tsx
@@ -22,10 +22,7 @@ export const NonRedelegatablesTableMobileCard = ({
     my={3}
   >
     <MobileLabel label="Cannot Redelegate From" />
-    <ValidatorBadge
-      badgeSize={{ sm: 8, md: 6 }}
-      validator={nonRedelegatable.dstValidator}
-    />
+    <ValidatorBadge validator={nonRedelegatable.dstValidator} />
     <MobileLabel label="Cannot Redelegate Until" />
     <Flex direction="column">
       <Text variant="body2">{formatUTC(nonRedelegatable.completionTime)}</Text>
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
index c813eff7c..c345fce3c 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableMobileCard.tsx
@@ -31,20 +31,12 @@ export const RedelegationTableMobileCard = ({
     >
       <Flex direction="column" gap={1}>
         <MobileLabel label="From validator" />
-        <ValidatorBadge
-          maxWidth="100px"
-          badgeSize={{ sm: 8, md: 6 }}
-          validator={redelegation.srcValidator}
-        />
+        <ValidatorBadge validator={redelegation.srcValidator} />
       </Flex>
       <CustomIcon name="arrow-right" boxSize={3} color="gray.600" />
       <Flex direction="column" gap={1}>
         <MobileLabel label="To validator" />
-        <ValidatorBadge
-          maxWidth="100px"
-          badgeSize={{ sm: 8, md: 6 }}
-          validator={redelegation.dstValidator}
-        />
+        <ValidatorBadge validator={redelegation.dstValidator} />
       </Flex>
     </Grid>
     <Flex direction="column" gap={1}>
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index ec96f3e4b..bce6b826e 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -2,6 +2,7 @@ import type { Big } from "big.js";
 import big from "big.js";
 import { isUndefined } from "lodash";
 
+import { useCelatoneApp } from "lib/app-provider";
 import { useCodeStore, useContractStore } from "lib/providers/store";
 import { useAccountBalances } from "lib/services/accountService";
 import { useAssetInfos } from "lib/services/assetService";
@@ -423,6 +424,11 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
 };
 
 export const useAccountTotalValue = (walletAddress: HumanAddr) => {
+  const {
+    chainConfig: {
+      extra: { disableDelegation },
+    },
+  } = useCelatoneApp();
   const { supportedAssets, isLoading } = useUserAssetInfos(walletAddress);
   const {
     stakingParams,
@@ -435,6 +441,15 @@ export const useAccountTotalValue = (walletAddress: HumanAddr) => {
     isLoadingTotalCommission,
   } = useUserDelegationInfos(walletAddress);
 
+  const defaultValue = big(0) as USD<Big>;
+
+  const totalAssetValue = supportedAssets
+    ? calTotalValue(supportedAssets)
+    : defaultValue;
+
+  if (disableDelegation)
+    return { totalAccountValue: totalAssetValue, isLoading: false };
+
   if (
     isLoading ||
     isLoadingStakingParams ||
@@ -448,11 +463,6 @@ export const useAccountTotalValue = (walletAddress: HumanAddr) => {
   if (!stakingParams || !totalBonded || !totalRewards || !totalCommission)
     return { totalAccountValue: undefined, isLoading: false };
 
-  const defaultValue = big(0) as USD<Big>;
-
-  const totalAssetValue = supportedAssets
-    ? calTotalValue(supportedAssets)
-    : defaultValue;
   return {
     totalAccountValue: totalAssetValue
       .add(totalValueTokenWithValue(totalBonded, defaultValue))
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 185454876..6f76964c8 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -11,6 +11,7 @@ import { useCallback, useEffect } from "react";
 
 import { AmpEvent, trackUseTab, track } from "lib/amplitude";
 import {
+  useCelatoneApp,
   useInternalNavigate,
   useMoveConfig,
   useValidateAddress,
@@ -82,6 +83,11 @@ const AccountDetailsBody = ({
   hexAddress,
   accountAddress,
 }: AccountDetailsBodyProps) => {
+  const {
+    chainConfig: {
+      extra: { disableDelegation },
+    },
+  } = useCelatoneApp();
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
   // const nft = useNftConfig({ shouldRedirect: false });
@@ -222,7 +228,10 @@ const AccountDetailsBody = ({
           >
             Assets
           </CustomTab>
-          <CustomTab onClick={handleTabChange(TabIndex.Delegations)}>
+          <CustomTab
+            onClick={handleTabChange(TabIndex.Delegations)}
+            hidden={disableDelegation}
+          >
             Delegations
           </CustomTab>
           {/* <CustomTab
@@ -296,15 +305,17 @@ const AccountDetailsBody = ({
                 onViewMore={handleTabChange(TabIndex.Assets)}
               />
             </Flex>
-            <Flex
-              borderBottom={{ base: "0px", md: "1px solid" }}
-              borderBottomColor={{ base: "transparent", md: "gray.700" }}
-            >
-              <DelegationsSection
-                walletAddress={accountAddress}
-                onViewMore={handleTabChange(TabIndex.Delegations)}
-              />
-            </Flex>
+            {disableDelegation ? null : (
+              <Flex
+                borderBottom={{ base: "0px", md: "1px solid" }}
+                borderBottomColor={{ base: "transparent", md: "gray.700" }}
+              >
+                <DelegationsSection
+                  walletAddress={accountAddress}
+                  onViewMore={handleTabChange(TabIndex.Delegations)}
+                />
+              </Flex>
+            )}
             <TxsTable
               accountId={accountId}
               scrollComponentId={tableHeaderId}

From 5228282ac2a63f57a4362a1695fb272daf37c8e5 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 9 Nov 2023 13:51:13 +0700
Subject: [PATCH 341/368] docs: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8f8c6c07..e773e7147 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -88,6 +88,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#619](https://github.com/alleslabs/celatone-frontend/pull/619) Fix observer, logo and disable delegation in Account Detail Page
 - [#617](https://github.com/alleslabs/celatone-frontend/pull/617) Fix textwrap module path on module detail, framer motion incorrect transition prop, loadingoverlay not centered
 - [#610](https://github.com/alleslabs/celatone-frontend/pull/610) Remove `.at()` from code
 - [#615](https://github.com/alleslabs/celatone-frontend/pull/615) Fix useEffect on pool page

From de1883ea27f9d25369d0d897813d974ae6dc5195 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 9 Nov 2023 19:14:37 +0700
Subject: [PATCH 342/368] fix: use MobileTitle on Resource, Modules

---
 src/lib/components/table/MobileTitle.tsx      |  5 +-
 .../components/modules/ModuleLists.tsx        | 82 ++++++++-----------
 .../components/modules/ModuleListsBody.tsx    |  2 +-
 .../components/resources/ResourceOverview.tsx | 61 ++++++--------
 4 files changed, 65 insertions(+), 85 deletions(-)

diff --git a/src/lib/components/table/MobileTitle.tsx b/src/lib/components/table/MobileTitle.tsx
index d1f441a36..0526769d9 100644
--- a/src/lib/components/table/MobileTitle.tsx
+++ b/src/lib/components/table/MobileTitle.tsx
@@ -13,7 +13,6 @@ interface MobileTitleProps {
 const cardProps = {
   width: "100%",
   justifyContent: "space-between",
-  background: "gray.900",
   padding: "16px",
   borderRadius: "8px",
 };
@@ -21,9 +20,9 @@ const cardProps = {
 export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => (
   <Flex
     style={cardProps}
-    onClick={count === 0 ? undefined : onViewMore}
+    onClick={!count ? undefined : onViewMore}
+    opacity={!count ? 0.5 : 1}
     bg="gray.900"
-    opacity={count === 0 ? 0.5 : 1}
   >
     <TableTitle title={title} count={count} mb={0} />
     <CustomIcon name="chevron-right" color="gray.600" />
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 62c819254..60f60b511 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -1,10 +1,9 @@
-import { Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { useState } from "react";
 
 import { useMobile } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
-import { TableTitle, ViewMore } from "lib/components/table";
+import { MobileTitle, TableTitle, ViewMore } from "lib/components/table";
 import { type IndexedModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
 
@@ -28,50 +27,41 @@ export const ModuleLists = ({
   const [keyword, setKeyword] = useState("");
   const isMobile = useMobile();
   const isMobileOverview = isMobile && !!onViewMore;
-  return isMobileOverview ? (
-    <Flex
-      justify="space-between"
-      w="full"
-      bg="gray.900"
-      borderRadius="8px"
-      p={4}
-      onClick={onViewMore}
-    >
-      <TableTitle title="Modules" count={totalCount} mb={0} />
-      <CustomIcon name="chevron-right" color="gray.600" />
-    </Flex>
-  ) : (
-    <Flex
-      direction="column"
-      mt={{ base: 4, md: 8 }}
-      mb={{ base: 0, md: 8 }}
-      width="full"
-      gap={6}
-    >
-      <TableTitle
-        title="Module Instances"
-        helperText="Modules are ‘smart contracts’ deployed by this account"
-        count={totalCount}
-        mb={0}
-      />
-      {!onViewMore && (
-        <InputWithIcon
-          placeholder="Search with Module Name..."
-          value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
-          action="execute-message-search"
+  return (
+    <Box mt={{ base: 4, md: 8 }}>
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Modules"
+          count={totalCount}
+          onViewMore={onViewMore}
         />
+      ) : (
+        <>
+          <TableTitle
+            title="Module Instances"
+            helperText="Modules are ‘smart contracts’ deployed by this account"
+            count={totalCount}
+          />
+          {!onViewMore && (
+            <InputWithIcon
+              placeholder="Search with Module Name..."
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              action="execute-message-search"
+            />
+          )}
+          <ModuleListsBody
+            selectedAddress={selectedAddress}
+            keyword={keyword}
+            modules={modules}
+            isLoading={isLoading}
+            onViewMore={onViewMore}
+          />
+          {onViewMore && !!totalCount && totalCount > 9 && (
+            <ViewMore onClick={onViewMore} />
+          )}
+        </>
       )}
-      <ModuleListsBody
-        selectedAddress={selectedAddress}
-        keyword={keyword}
-        modules={modules}
-        isLoading={isLoading}
-        onViewMore={onViewMore}
-      />
-      {onViewMore && totalCount && totalCount > 9 && (
-        <ViewMore onClick={onViewMore} />
-      )}
-    </Flex>
+    </Box>
   );
 };
diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
index ab1a85d96..0be07dd4f 100644
--- a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -57,7 +57,7 @@ export const ModuleListsBody = ({
       />
     );
   return (
-    <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4}>
+    <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} my={4} spacing={4}>
       {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
         (item) => (
           <ModuleCard
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
index 1328ec988..df631caee 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -1,8 +1,7 @@
-import { Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import { TableTitle } from "lib/components/table";
+import { MobileTitle, TableTitle } from "lib/components/table";
 import type { MoveAccountAddr, Option, ResourceGroup } from "lib/types";
 
 import { ResourceOverviewBody } from "./ResourceOverviewBody";
@@ -24,37 +23,29 @@ export const ResourceOverview = ({
 }: ResourceOverviewProps) => {
   const isMobile = useMobile();
 
-  return isMobile ? (
-    <Flex
-      justify="space-between"
-      w="full"
-      bg="gray.900"
-      borderRadius="8px"
-      mt={{ base: 4, md: 8 }}
-      p={4}
-      onClick={onViewMore}
-    >
-      <TableTitle title="Resources" count={totalCount} mb={0} />
-      <CustomIcon name="chevron-right" color="gray.600" />
-    </Flex>
-  ) : (
-    <Flex
-      direction="column"
-      mt={{ base: 4, md: 8 }}
-      mb={{ base: 0, md: 8 }}
-      width="full"
-    >
-      <TableTitle
-        title="Resources"
-        helperText="Resources stored in this account"
-        count={totalCount}
-      />
-      <ResourceOverviewBody
-        address={address}
-        resourcesByName={resourcesByName}
-        isLoading={isLoading}
-        onViewMore={onViewMore}
-      />
-    </Flex>
+  return (
+    <Box mt={{ base: 4, md: 8 }}>
+      {isMobile ? (
+        <MobileTitle
+          title="Resources"
+          count={totalCount}
+          onViewMore={onViewMore}
+        />
+      ) : (
+        <>
+          <TableTitle
+            title="Resources"
+            helperText="Resources stored in this account"
+            count={totalCount}
+          />
+          <ResourceOverviewBody
+            address={address}
+            resourcesByName={resourcesByName}
+            isLoading={isLoading}
+            onViewMore={onViewMore}
+          />
+        </>
+      )}
+    </Box>
   );
 };

From 751ee703ffaedaac235c982021416848b77e7d96 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 9 Nov 2023 19:25:27 +0700
Subject: [PATCH 343/368] chore: refactor asset list

---
 .../components/asset/index.tsx                | 30 ++++++++-----------
 src/lib/pages/account-details/index.tsx       |  5 +++-
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index 803e9eefa..64e174996 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -137,13 +137,16 @@ export const AssetsSection = ({
   walletAddress,
   onViewMore,
 }: AssetsSectionProps) => {
+  const isMobile = useMobile();
   const { supportedAssets, unsupportedAssets, isLoading, error } =
     useUserAssetInfos(walletAddress);
+  const isMobileOverview = isMobile && !!onViewMore;
 
-  let totalValue = big(0) as USD<Big>;
-  if (supportedAssets) totalValue = calTotalValue(supportedAssets);
+  if (isLoading) return <Loading withBorder />;
 
-  const isMobile = useMobile();
+  const totalValue = supportedAssets
+    ? calTotalValue(supportedAssets)
+    : (big(0) as USD<Big>);
   const TotalAssetValueInfo = (
     <UserAssetInfoCard
       value={totalValue && supportedAssets ? formatPrice(totalValue) : "N/A"}
@@ -151,14 +154,6 @@ export const AssetsSection = ({
       helperText="Total Asset Value"
     />
   );
-  let isMobileDetail = null;
-  if (isMobile && onViewMore) {
-    isMobileDetail = false;
-  } else {
-    isMobileDetail = true;
-  }
-
-  if (isLoading) return <Loading withBorder />;
 
   const totalAsset =
     (supportedAssets?.length ?? 0) + (unsupportedAssets?.length ?? 0);
@@ -174,7 +169,7 @@ export const AssetsSection = ({
       <AssetTitle onViewMore={onViewMore} totalAsset={totalAsset}>
         {TotalAssetValueInfo}
       </AssetTitle>
-      {isMobileDetail && (
+      {!isMobileOverview && (
         <>
           <Flex
             justify={{ base: "flex-start", md: "space-between" }}
@@ -203,14 +198,13 @@ export const AssetsSection = ({
               totalAsset={totalAsset}
             />
           )}
+          {onViewMore &&
+            supportedAssets &&
+            supportedAssets.length > MAX_ASSETS_SHOW && (
+              <ViewMore onClick={onViewMore} />
+            )}
         </>
       )}
-      {!isMobile &&
-        supportedAssets &&
-        onViewMore &&
-        supportedAssets.length > MAX_ASSETS_SHOW && (
-          <ViewMore onClick={onViewMore} />
-        )}
     </Flex>
   );
 };
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 6f76964c8..731f05f65 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -299,7 +299,10 @@ const AccountDetailsBody = ({
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
-            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
+            <Flex
+              borderBottom={{ base: "0px", md: "1px solid" }}
+              borderBottomColor={{ base: "transparent", md: "gray.700" }}
+            >
               <AssetsSection
                 walletAddress={accountAddress}
                 onViewMore={handleTabChange(TabIndex.Assets)}

From b6cf343a16a9d2cfb7fc3610fca0ddc5ecc9b859 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 10 Nov 2023 10:56:02 +0700
Subject: [PATCH 344/368] fix: use format addresses instead

---
 src/lib/hooks/useHandleSave.tsx | 24 ++++--------------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/lib/hooks/useHandleSave.tsx b/src/lib/hooks/useHandleSave.tsx
index d828b0463..8911aa601 100644
--- a/src/lib/hooks/useHandleSave.tsx
+++ b/src/lib/hooks/useHandleSave.tsx
@@ -1,11 +1,10 @@
 import { useToast } from "@chakra-ui/react";
-import { useMemo } from "react";
 
-import { useConvertHexAddress, useValidateAddress } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { useAccountStore, useContractStore } from "lib/providers/store";
-import type { Addr, ContractAddr, HexAddr, LVPair, Option } from "lib/types";
+import type { Addr, ContractAddr, LVPair, Option } from "lib/types";
 
+import { useFormatAddresses } from "./useFormatAddresses";
 import { useUserKey } from "./useUserKey";
 
 interface UseHandleContractSaveProps {
@@ -77,24 +76,9 @@ export const useHandleAccountSave = ({
 }: UseHandleAccountSaveProps) => {
   const toast = useToast();
   const { updateAccountLocalInfo } = useAccountStore();
-  const { validateHexWalletAddress, validateHexModuleAddress } =
-    useValidateAddress();
-  const { convertHexWalletAddress, convertHexModuleAddress } =
-    useConvertHexAddress();
+  const formatAddresses = useFormatAddresses();
 
-  const bech32Address = useMemo(() => {
-    if (validateHexWalletAddress(address))
-      return convertHexWalletAddress(address as HexAddr);
-    if (validateHexModuleAddress(address))
-      return convertHexModuleAddress(address as HexAddr);
-    return address;
-  }, [
-    address,
-    convertHexModuleAddress,
-    convertHexWalletAddress,
-    validateHexModuleAddress,
-    validateHexWalletAddress,
-  ]);
+  const { address: bech32Address } = formatAddresses(address);
 
   return (inputName?: string) => {
     updateAccountLocalInfo(bech32Address, inputName ?? name, description);

From 4597062069c73b392149adc0b651bdbf45deffcc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 10 Nov 2023 11:07:25 +0700
Subject: [PATCH 345/368] fix: format on save

---
 src/lib/hooks/useHandleSave.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/hooks/useHandleSave.tsx b/src/lib/hooks/useHandleSave.tsx
index 8911aa601..83399bcba 100644
--- a/src/lib/hooks/useHandleSave.tsx
+++ b/src/lib/hooks/useHandleSave.tsx
@@ -78,9 +78,8 @@ export const useHandleAccountSave = ({
   const { updateAccountLocalInfo } = useAccountStore();
   const formatAddresses = useFormatAddresses();
 
-  const { address: bech32Address } = formatAddresses(address);
-
   return (inputName?: string) => {
+    const { address: bech32Address } = formatAddresses(address);
     updateAccountLocalInfo(bech32Address, inputName ?? name, description);
 
     actions?.();

From 5a872d85e6a3eeb63879b491fa4907537f6af1fb Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 10 Nov 2023 11:29:22 +0700
Subject: [PATCH 346/368] fix: grammar

---
 src/lib/components/modal/account/EditSavedAccount.tsx | 2 +-
 src/lib/components/modal/account/SaveNewAccount.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
index 6707780e0..ce14cc4d6 100644
--- a/src/lib/components/modal/account/EditSavedAccount.tsx
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -95,7 +95,7 @@ export const EditSavedAccountModal = ({
           name="description"
           control={control}
           label="Account Description"
-          placeholder="Help understanding what this account do ..."
+          placeholder="Help understanding what this account does ..."
           variant="fixed-floating"
           labelBgColor="gray.900"
           rules={{
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index d60153e84..07b8b4ee1 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -188,7 +188,7 @@ export function SaveNewAccountModal({
           name="description"
           control={control}
           label="Account Description"
-          placeholder="Help understanding what this account do ..."
+          placeholder="Help understanding what this account does ..."
           variant="fixed-floating"
           labelBgColor="gray.900"
           rules={{

From 37353b34bcb746b8b1c8b816f8e573be0a3f33eb Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 10 Nov 2023 16:18:29 +0700
Subject: [PATCH 347/368] fix: contract placeholder

---
 src/lib/components/OffChainForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/OffChainForm.tsx b/src/lib/components/OffChainForm.tsx
index a56a333d0..0d173d3e7 100644
--- a/src/lib/components/OffChainForm.tsx
+++ b/src/lib/components/OffChainForm.tsx
@@ -59,7 +59,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         name={"description" as FieldPath<T>}
         control={control}
         label="Description"
-        placeholder="Help understanding what this contract do and how it works ..."
+        placeholder="Help understanding what this contract does and how it works ..."
         variant="fixed-floating"
         rules={{
           maxLength: constants.maxContractDescriptionLength,

From 08313623df5669702226d4934fb82c51eb4b585e Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 13 Nov 2023 11:50:23 +0700
Subject: [PATCH 348/368] fix: dependencies, refactor displayName

---
 src/lib/components/modal/account/EditSavedAccount.tsx    | 6 +++++-
 .../pages/account-details/components/AccountHeader.tsx   | 9 +++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
index 55323f82c..a411da2e6 100644
--- a/src/lib/components/modal/account/EditSavedAccount.tsx
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -28,7 +28,11 @@ export const EditSavedAccountModal = ({
       name: accountLocalInfo.name ?? "",
       description: accountLocalInfo.description ?? "",
     };
-  }, [accountLocalInfo]);
+  }, [
+    accountLocalInfo.address,
+    accountLocalInfo.description,
+    accountLocalInfo.name,
+  ]);
 
   const {
     control,
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index 568b0d301..e707e7da1 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -34,12 +34,17 @@ export const AccountHeader = observer(
     hexAddress,
     publicDescription,
   }: AccounHeaderProps) => {
-    const displayName = icnsName?.primary_name || "Account Details";
     const move = useMoveConfig({ shouldRedirect: false });
     const { isAccountSaved, getAccountLocalInfo } = useAccountStore();
 
     const isSaved = isAccountSaved(accountAddress);
     const accountLocalInfo = getAccountLocalInfo(accountAddress);
+    const displayName =
+      accountLocalInfo?.name ??
+      publicName ??
+      icnsName?.primary_name ??
+      "Account Details";
+
     return (
       <Flex
         justifyContent="space-between"
@@ -64,7 +69,7 @@ export const AccountHeader = observer(
                 <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
               )}
               <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
-                {accountLocalInfo?.name ?? publicName ?? displayName}
+                {displayName}
               </Heading>
             </Flex>
             {isSaved && accountLocalInfo ? (

From 362af77597906396557aafa49fe862cb862a0c8d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 13 Nov 2023 12:14:00 +0700
Subject: [PATCH 349/368] fix: enable saved acc and refactor

---
 src/lib/layout/mobile/NavDrawer.tsx         |   2 +-
 src/lib/layout/navbar/Collapse.tsx          |   2 +-
 src/lib/layout/navbar/Expand.tsx            |   2 +-
 src/lib/layout/navbar/index.tsx             | 126 +++-----------------
 src/lib/layout/navbar/{type.ts => types.ts} |   0
 src/lib/layout/navbar/utils.ts              |  81 +++++++++++++
 6 files changed, 98 insertions(+), 115 deletions(-)
 rename src/lib/layout/navbar/{type.ts => types.ts} (100%)
 create mode 100644 src/lib/layout/navbar/utils.ts

diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index 8cbabc6f9..9e92c503b 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -17,7 +17,7 @@ import {
   IconButton,
 } from "@chakra-ui/react";
 
-import type { MenuInfo } from "../navbar/type";
+import type { MenuInfo } from "../navbar/types";
 import { CHAIN_CONFIGS } from "config/chain";
 import { AmpEvent, track } from "lib/amplitude";
 import {
diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx
index 2d0836ce7..4d22c9387 100644
--- a/src/lib/layout/navbar/Collapse.tsx
+++ b/src/lib/layout/navbar/Collapse.tsx
@@ -6,7 +6,7 @@ import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
 
-import type { NavMenuProps, SubmenuInfo } from "./type";
+import type { NavMenuProps, SubmenuInfo } from "./types";
 
 interface CollapseNavInfoProps {
   submenu: SubmenuInfo;
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 43e75abb7..2a55d8504 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -17,7 +17,7 @@ import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
 
-import type { MenuInfo, NavMenuProps, SubmenuInfo } from "./type";
+import type { MenuInfo, NavMenuProps, SubmenuInfo } from "./types";
 
 interface NavInfoProps {
   submenu: SubmenuInfo;
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 1ca6ee8f9..644ff7424 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -10,19 +10,18 @@ import {
   useMoveConfig,
 } from "lib/app-provider";
 import type { IconKeys } from "lib/components/icon";
-import {
-  INSTANTIATED_LIST_NAME,
-  SAVED_LIST_NAME,
-  StorageKeys,
-  UNDEFINED_ICON_LIST,
-} from "lib/data";
+import { StorageKeys, UNDEFINED_ICON_LIST } from "lib/data";
 import { useIsCurrentPage } from "lib/hooks";
 import { usePublicProjectStore } from "lib/providers/store";
-import { formatSlugName, getListIcon } from "lib/utils";
 
 import { CollapseNavMenu } from "./Collapse";
 import { ExpandNavMenu } from "./Expand";
-import type { MenuInfo } from "./type";
+import type { MenuInfo } from "./types";
+import {
+  getDevSubmenuMove,
+  getDevSubmenuWasm,
+  getDeviceSubmenuWasm,
+} from "./utils";
 
 interface NavbarProps {
   isExpand: boolean;
@@ -79,122 +78,25 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
           },
         ]
       : []),
-    // TODO: combine move and wasm after having This Wallet subsection in move
-    ...(move.enabled
+    ...(move.enabled || wasm.enabled
       ? [
           {
             category: "Developer Tools",
             slug: StorageKeys.DevSidebar,
             submenu: [
-              {
-                name: "0x1 Page",
-                slug: "/accounts/0x1",
-                icon: "hex" as IconKeys,
-              },
-              {
-                name: "Publish Module",
-                slug: "/publish-module",
-                icon: "add-new" as IconKeys,
-              },
-              {
-                name: "View / Execute",
-                slug: "/interact",
-                icon: "execute" as IconKeys,
-              },
-              {
-                name: "Deploy Script",
-                slug: "/deploy-script",
-                icon: "code" as IconKeys,
-              },
-            ],
-            // subSection: [
-            //   {
-            //     category: "This Device",
-            //     submenu: [
-            //       {
-            //         name: "Saved Accounts",
-            //         slug: "/saved-accounts",
-            //         icon: "admin" as IconKeys,
-            //       },
-            //     ],
-            //   },
-            // ],
-          },
-        ]
-      : []),
-    ...(wasm.enabled
-      ? [
-          {
-            category: "Developer Tools",
-            slug: StorageKeys.DevSidebar,
-            submenu: [
-              {
-                name: "Deploy Contract",
-                slug: "/deploy",
-                icon: "add-new" as IconKeys,
-              },
-              {
-                name: "Query",
-                slug: "/query",
-                icon: "query" as IconKeys,
-              },
-              {
-                name: "Execute",
-                slug: "/execute",
-                icon: "execute" as IconKeys,
-              },
-              {
-                name: "Migrate",
-                slug: "/migrate",
-                icon: "migrate" as IconKeys,
-              },
-              // {
-              //   name: "Recent Activities",
-              //   slug: "/",
-              //   icon: "list" as IconKeys,
-              // },
+              ...getDevSubmenuMove(move.enabled),
+              ...getDevSubmenuWasm(wasm.enabled),
             ],
             subSection: [
-              {
-                category: "This Wallet",
-                submenu: [
-                  {
-                    name: "My Stored Codes",
-                    slug: "/stored-codes",
-                    icon: "code" as IconKeys,
-                  },
-                  {
-                    name: INSTANTIATED_LIST_NAME,
-                    slug: `/contract-lists/${formatSlugName(
-                      INSTANTIATED_LIST_NAME
-                    )}`,
-                    icon: getListIcon(INSTANTIATED_LIST_NAME),
-                  },
-                ],
-              },
               {
                 category: "This Device",
                 submenu: [
-                  // {
-                  //   name: "Saved Accounts",
-                  //   slug: "/saved-accounts",
-                  //   icon: "admin" as IconKeys,
-                  // },
-                  {
-                    name: "Saved Codes",
-                    slug: "/saved-codes",
-                    icon: "code" as IconKeys,
-                  },
-                  {
-                    name: SAVED_LIST_NAME,
-                    slug: `/contract-lists/${formatSlugName(SAVED_LIST_NAME)}`,
-                    icon: "contract-address" as IconKeys,
-                  },
                   {
-                    name: "View All Contract List",
-                    slug: "/contract-lists",
-                    icon: "more" as IconKeys,
+                    name: "Saved Accounts",
+                    slug: "/saved-accounts",
+                    icon: "admin" as IconKeys,
                   },
+                  ...getDeviceSubmenuWasm(wasm.enabled),
                 ],
               },
             ],
diff --git a/src/lib/layout/navbar/type.ts b/src/lib/layout/navbar/types.ts
similarity index 100%
rename from src/lib/layout/navbar/type.ts
rename to src/lib/layout/navbar/types.ts
diff --git a/src/lib/layout/navbar/utils.ts b/src/lib/layout/navbar/utils.ts
new file mode 100644
index 000000000..518f94838
--- /dev/null
+++ b/src/lib/layout/navbar/utils.ts
@@ -0,0 +1,81 @@
+import type { IconKeys } from "lib/components/icon";
+import { SAVED_LIST_NAME } from "lib/data";
+import { formatSlugName } from "lib/utils";
+
+export const getDevSubmenuMove = (isMove: boolean) =>
+  isMove
+    ? [
+        {
+          name: "0x1 Page",
+          slug: "/accounts/0x1",
+          icon: "hex" as IconKeys,
+        },
+        {
+          name: "Publish Module",
+          slug: "/publish-module",
+          icon: "add-new" as IconKeys,
+        },
+        {
+          name: "View / Execute",
+          slug: "/interact",
+          icon: "execute" as IconKeys,
+        },
+        {
+          name: "Deploy Script",
+          slug: "/deploy-script",
+          icon: "code" as IconKeys,
+        },
+      ]
+    : [];
+
+export const getDevSubmenuWasm = (isWasm: boolean) =>
+  isWasm
+    ? [
+        {
+          name: "Deploy Contract",
+          slug: "/deploy",
+          icon: "add-new" as IconKeys,
+        },
+        {
+          name: "Query",
+          slug: "/query",
+          icon: "query" as IconKeys,
+        },
+        {
+          name: "Execute",
+          slug: "/execute",
+          icon: "execute" as IconKeys,
+        },
+        {
+          name: "Migrate",
+          slug: "/migrate",
+          icon: "migrate" as IconKeys,
+        },
+        // {
+        //   name: "Recent Activities",
+        //   slug: "/",
+        //   icon: "list" as IconKeys,
+        // },
+      ]
+    : [];
+
+export const getDeviceSubmenuWasm = (isWasm: boolean) =>
+  isWasm
+    ? [
+        {
+          name: "Saved Codes",
+          slug: "/saved-codes",
+          icon: "code" as IconKeys,
+        },
+        {
+          name: SAVED_LIST_NAME,
+          slug: `/contract-lists/${formatSlugName(SAVED_LIST_NAME)}`,
+          icon: "contract-address" as IconKeys,
+        },
+        {
+          name: "View All Contract List",
+          slug: "/contract-lists",
+          icon: "more" as IconKeys,
+        },
+      ]
+    : [];

From 4e1acfb38b949d222a22bbe83918101faad0b966 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 13 Nov 2023 13:31:04 +0700
Subject: [PATCH 350/368] fix: abi empty vector

---
 CHANGELOG.md         |  1 +
 src/lib/utils/abi.ts | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91c81eddf..003500df8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -89,6 +89,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#623](https://github.com/alleslabs/celatone-frontend/pull/623) Fix abi empty vector serialization
 - [#619](https://github.com/alleslabs/celatone-frontend/pull/619) Fix observer, logo and disable delegation in Account Detail Page
 - [#617](https://github.com/alleslabs/celatone-frontend/pull/617) Fix textwrap module path on module detail, framer motion incorrect transition prop, loadingoverlay not centered
 - [#610](https://github.com/alleslabs/celatone-frontend/pull/610) Remove `.at()` from code
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index c17487be5..9a6ebe233 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -15,7 +15,7 @@ export const parseJsonABI = <T>(jsonString: string): T => {
 
 const sortByAvailability = (a: ExposedFunction, b: ExposedFunction) => {
   if (checkAvailability(a) === checkAvailability(b))
-    return a.name < b.name ? -1 : 1;
+    return a.name.localeCompare(b.name);
   return checkAvailability(a) ? -1 : 1;
 };
 
@@ -76,13 +76,13 @@ const getArgValue = ({
     if (value === null) return null;
     if (type.startsWith("vector")) {
       const [, elementType] = type.split(/<(.*)>/);
-      const values = value
-        .split(/\[(.*)\]/)[1]
-        .split(",")
-        .map((element) => element.trim());
+      const values = value.split(/\[(.*)\]/)[1].trim();
+      if (values.length === 0) return [];
+
+      const elements = values.split(",").map((element) => element.trim());
       return elementType === "bool"
-        ? values.map((element) => element.toLowerCase() === "true")
-        : values;
+        ? elements.map((element) => element.toLowerCase() === "true")
+        : elements;
     }
     if (type === "bool") return value.toLowerCase() === "true";
     return value.trim();

From acdc8477e84716ca2c75c16b41627740ca55d313 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 13 Nov 2023 13:54:46 +0700
Subject: [PATCH 351/368] fix: vector rule

---
 .../components/abi/args-form/field/utils/rules.ts   | 13 +++++--------
 src/lib/utils/abi.ts                                | 11 +++++++----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/abi/args-form/field/utils/rules.ts b/src/lib/components/abi/args-form/field/utils/rules.ts
index 5b9b151be..0f64da128 100644
--- a/src/lib/components/abi/args-form/field/utils/rules.ts
+++ b/src/lib/components/abi/args-form/field/utils/rules.ts
@@ -10,7 +10,7 @@ import {
   UINT_TYPES,
 } from "../constants";
 import type { Nullable, Option } from "lib/types";
-import { getArgType } from "lib/utils";
+import { getArgType, getVectorElements } from "lib/utils";
 
 const validateNull = (v: Option<string>) =>
   v !== null ? undefined : "cannot be null";
@@ -96,13 +96,10 @@ const validateVector = (
   // TODO: handle Vector?
 
   let error: Option<string>;
-  value
-    .slice(1, -1)
-    .split(",")
-    .forEach((elementValue) => {
-      const res = validateElement(elementValue.trim());
-      if (res !== undefined) error = `Invalid element: ${res}`;
-    });
+  getVectorElements(value).forEach((elementValue) => {
+    const res = validateElement(elementValue.trim());
+    if (res !== undefined) error = `Invalid element: ${res}`;
+  });
 
   return error;
 };
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index 9a6ebe233..40fe04b14 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -55,6 +55,12 @@ export const getAbiInitialData = (length: number) =>
 // ------------------------------------------//
 // -----------------MOVE ARGS----------------//
 // ------------------------------------------//
+export const getVectorElements = (value: string) => {
+  const trimmed = value.split(/\[(.*)\]/)[1].trim();
+  if (trimmed.length === 0) return [];
+  return trimmed.split(",").map((element) => element.trim());
+};
+
 export const getArgType = (argType: string) =>
   argType
     .replace("0x1::string::String", BCS.STRING)
@@ -76,10 +82,7 @@ const getArgValue = ({
     if (value === null) return null;
     if (type.startsWith("vector")) {
       const [, elementType] = type.split(/<(.*)>/);
-      const values = value.split(/\[(.*)\]/)[1].trim();
-      if (values.length === 0) return [];
-
-      const elements = values.split(",").map((element) => element.trim());
+      const elements = getVectorElements(value);
       return elementType === "bool"
         ? elements.map((element) => element.toLowerCase() === "true")
         : elements;

From 0a466c7487a0170899259dbbfdcc28961a6f5d3c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:30:37 +0700
Subject: [PATCH 352/368] fix: icns

---
 src/lib/pages/account-details/components/AccountHeader.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index e707e7da1..5679ae130 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -42,8 +42,7 @@ export const AccountHeader = observer(
     const displayName =
       accountLocalInfo?.name ??
       publicName ??
-      icnsName?.primary_name ??
-      "Account Details";
+      (icnsName?.primary_name || "Account Details");
 
     return (
       <Flex

From b3181070605457f2da0d81a4f0b3a01381bd55dc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 13 Nov 2023 18:25:50 +0700
Subject: [PATCH 353/368] fix: saved account type check

---
 CHANGELOG.md                                  |   1 +
 src/lib/app-provider/env.ts                   |   1 +
 src/lib/app-provider/hooks/useAddress.ts      |  89 ++++++++-------
 .../components/abi/args-form/field/index.tsx  |  24 ++--
 src/lib/components/forms/ControllerInput.tsx  |   4 +
 .../modal/account/SaveNewAccount.tsx          | 107 ++++++++++--------
 .../modal/account/ToContractButton.tsx        |  34 ++++++
 src/lib/gql/fragment-masking.ts               |   5 +-
 src/lib/gql/gql.ts                            |   8 ++
 src/lib/gql/graphql.ts                        |  63 +++++++++++
 src/lib/gql/index.ts                          |   2 +-
 src/lib/hooks/useFormatAddresses.ts           |  22 ++--
 src/lib/pages/account-details/index.tsx       |  40 +++----
 src/lib/query/account.ts                      |   8 ++
 src/lib/services/accountService.ts            |  43 ++++++-
 src/lib/types/account.ts                      |  11 ++
 src/lib/types/index.ts                        |   1 +
 17 files changed, 321 insertions(+), 142 deletions(-)
 create mode 100644 src/lib/components/modal/account/ToContractButton.tsx
 create mode 100644 src/lib/types/account.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed58d1c06..f6deae92e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -71,6 +71,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#625](https://github.com/alleslabs/celatone-frontend/pull/625) Fix abi empty vector serialization
 - [#605](https://github.com/alleslabs/celatone-frontend/pull/605) Apply singleton class style to Amplitude structure
 - [#591](https://github.com/alleslabs/celatone-frontend/pull/591) Bump initia.js due to decimal serialization and dynamic buffer
 - [#564](https://github.com/alleslabs/celatone-frontend/pull/564) Handle multi bond denoms data in the delegation section
diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 6539517ea..0c73f1f68 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -16,6 +16,7 @@ export enum CELATONE_QUERY_KEYS {
   // ACCOUNT
   ACCOUNT_BALANCES_INFO = "CELATONE_QUERY_ACCOUNT_BALANCES_INFO",
   ACCOUNT_ID = "CELATONE_QUERY_ACCOUNT_ID",
+  ACCOUNT_TYPE = "CELATONE_QUERY_ACCOUNT_TYPE",
   // ASSET
   ASSET_INFOS = "CELATONE_QUERY_ASSET_INFOS",
   ASSET_INFO_LIST = "CELATONE_QUERY_ASSET_INFO_LIST",
diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index f4d7d0a37..4f5ad05cd 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -2,8 +2,9 @@ import { fromBech32 } from "@cosmjs/encoding";
 import { useCallback, useMemo } from "react";
 
 import type { Option } from "lib/types";
-import { isHexWalletAddress, isHexModuleAddress } from "lib/utils";
+import { isHexModuleAddress, isHexWalletAddress } from "lib/utils";
 
+import { useMoveConfig } from "./useConfig";
 import { useCurrentChain } from "./useCurrentChain";
 import { useExampleAddresses } from "./useExampleAddresses";
 
@@ -103,47 +104,55 @@ export const useValidateAddress = () => {
     chain: { bech32_prefix: bech32Prefix },
   } = useCurrentChain();
   const getAddressTypeByLength = useGetAddressTypeByLength();
+  const move = useMoveConfig({ shouldRedirect: false });
+
+  const validateContractAddress = useCallback(
+    (address: string) =>
+      validateAddress(
+        bech32Prefix,
+        address,
+        "contract_address",
+        getAddressTypeByLength
+      ),
+    [bech32Prefix, getAddressTypeByLength]
+  );
+  const validateUserAddress = useCallback(
+    (address: string) =>
+      validateAddress(
+        bech32Prefix,
+        address,
+        "user_address",
+        getAddressTypeByLength
+      ),
+    [bech32Prefix, getAddressTypeByLength]
+  );
+  const validateValidatorAddress = useCallback(
+    (address: string) =>
+      validateAddress(
+        bech32Prefix,
+        address,
+        "validator_address",
+        getAddressTypeByLength
+      ),
+    [bech32Prefix, getAddressTypeByLength]
+  );
 
   return {
-    validateContractAddress: useCallback(
-      (address: string) =>
-        validateAddress(
-          bech32Prefix,
-          address,
-          "contract_address",
-          getAddressTypeByLength
-        ),
-      [bech32Prefix, getAddressTypeByLength]
-    ),
-    validateUserAddress: useCallback(
-      (address: string) =>
-        validateAddress(
-          bech32Prefix,
-          address,
-          "user_address",
-          getAddressTypeByLength
-        ),
-      [bech32Prefix, getAddressTypeByLength]
-    ),
-    validateValidatorAddress: useCallback(
-      (address: string) =>
-        validateAddress(
-          bech32Prefix,
-          address,
-          "validator_address",
-          getAddressTypeByLength
-        ),
-      [bech32Prefix, getAddressTypeByLength]
-    ),
-    validateHexWalletAddress: useCallback(
-      (address: string) =>
-        !address.startsWith(bech32Prefix) && isHexWalletAddress(address),
-      [bech32Prefix]
-    ),
-    validateHexModuleAddress: useCallback(
-      (address: string) =>
-        !address.startsWith(bech32Prefix) && isHexModuleAddress(address),
-      [bech32Prefix]
+    validateContractAddress,
+    validateUserAddress,
+    validateValidatorAddress,
+    isSomeValidAddress: useCallback(
+      (address: string) => {
+        const errUser = validateUserAddress(address);
+        const errContract = validateContractAddress(address);
+        const isHex = isHexWalletAddress(address);
+        const isHexModule = isHexModuleAddress(address);
+
+        return (
+          !errUser || !errContract || (move.enabled && (isHex || isHexModule))
+        );
+      },
+      [move.enabled, validateContractAddress, validateUserAddress]
     ),
   };
 };
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
index cff3e12f7..ce2360045 100644
--- a/src/lib/components/abi/args-form/field/index.tsx
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -13,6 +13,7 @@ import { type Control, useController } from "react-hook-form";
 
 import { useValidateAddress } from "lib/app-provider";
 import type { AbiFormData } from "lib/types";
+import { isHexModuleAddress, isHexWalletAddress } from "lib/utils";
 
 import { ArgFieldWidget } from "./ArgFieldWidget";
 import { OBJECT_TYPE, STRING_TYPE } from "./constants";
@@ -30,31 +31,20 @@ export const ArgFieldTemplate = ({
   control,
 }: ArgFieldTemplateProps) => {
   const [isEditted, setIsEditted] = useState(false);
-  const {
-    validateUserAddress,
-    validateContractAddress,
-    validateHexWalletAddress,
-    validateHexModuleAddress,
-  } = useValidateAddress();
+  const { validateUserAddress, validateContractAddress } = useValidateAddress();
 
   const isValidArgAddress = useCallback(
     (input: string) =>
       validateUserAddress(input) === null ||
       validateContractAddress(input) === null ||
-      validateHexWalletAddress(input) ||
-      validateHexModuleAddress(input),
-    [
-      validateContractAddress,
-      validateHexModuleAddress,
-      validateHexWalletAddress,
-      validateUserAddress,
-    ]
+      isHexWalletAddress(input) ||
+      isHexModuleAddress(input),
+    [validateContractAddress, validateUserAddress]
   );
   const isValidArgObject = useCallback(
     (input: string) =>
-      validateContractAddress(input) === null ||
-      validateHexModuleAddress(input),
-    [validateContractAddress, validateHexModuleAddress]
+      validateContractAddress(input) === null || isHexModuleAddress(input),
+    [validateContractAddress]
   );
 
   const isOptional = param.startsWith("0x1::option::Option");
diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
index 75fd4f95a..4eb559ec2 100644
--- a/src/lib/components/forms/ControllerInput.tsx
+++ b/src/lib/components/forms/ControllerInput.tsx
@@ -45,6 +45,8 @@ export const ControllerInput = <T extends FieldValues>({
   rules = {},
   status,
   maxLength,
+  autoFocus,
+  cursor,
   helperAction,
   ...componentProps
 }: ControllerInputProps<T>) => {
@@ -94,6 +96,8 @@ export const ControllerInput = <T extends FieldValues>({
           value={watcher}
           onChange={field.onChange}
           maxLength={maxLength}
+          autoFocus={autoFocus}
+          cursor={cursor}
         />
         <InputRightElement h="full">
           {status && getStatusIcon(status.state)}
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index 07b8b4ee1..0eb09f28c 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -9,14 +9,16 @@ import {
   useExampleAddresses,
   useMoveConfig,
   useValidateAddress,
+  useWasmConfig,
 } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { ControllerInput, ControllerTextarea } from "lib/components/forms";
 import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
 import { useAccountStore } from "lib/providers/store";
+import { useAccountType } from "lib/services/accountService";
 import type { Addr } from "lib/types";
 
-import { SavedAccountModalHeader } from "./SavedAccountModalHeader";
+import { ToContractButton } from "./ToContractButton";
 
 export interface SaveAccountDetail {
   address: Addr;
@@ -24,6 +26,11 @@ export interface SaveAccountDetail {
   description: string;
 }
 
+const statusSuccess: FormStatus = {
+  state: "success",
+  message: "Valid Address",
+};
+
 interface SaveNewAccountModalProps {
   buttonProps: ButtonProps;
   accountAddress?: Addr;
@@ -37,26 +44,23 @@ export function SaveNewAccountModal({
   publicName,
   publicDescription,
 }: SaveNewAccountModalProps) {
-  const { user: exampleUserAddress } = useExampleAddresses();
-  const {
-    validateUserAddress,
-    validateContractAddress,
-    validateHexWalletAddress,
-    validateHexModuleAddress,
-  } = useValidateAddress();
   const { constants } = useCelatoneApp();
+  const { user: exampleUserAddress } = useExampleAddresses();
+  const { isSomeValidAddress } = useValidateAddress();
   const move = useMoveConfig({ shouldRedirect: false });
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   const getMaxLengthError = useGetMaxLengthError();
   const { isAccountSaved } = useAccountStore();
 
+  const defaultAddress = accountAddress ?? ("" as Addr);
   const defaultValues: SaveAccountDetail = useMemo(() => {
     return {
-      address: accountAddress ?? ("" as Addr),
+      address: defaultAddress,
       name: publicName ?? "",
       description: publicDescription ?? "",
     };
-  }, [accountAddress, publicName, publicDescription]);
+  }, [defaultAddress, publicDescription, publicName]);
 
   const {
     control,
@@ -69,6 +73,7 @@ export function SaveNewAccountModal({
   });
 
   const [status, setStatus] = useState<FormStatus>({ state: "init" });
+  const [isContract, setIsContract] = useState<boolean>(false);
 
   const addressState = watch("address");
   const nameState = watch("name");
@@ -76,10 +81,32 @@ export function SaveNewAccountModal({
   const resetForm = (resetAddress = true) => {
     reset({
       ...defaultValues,
-      address: resetAddress ? "" : addressState,
+      address: resetAddress ? defaultAddress : addressState,
     });
   };
 
+  const { refetch } = useAccountType(
+    addressState as Addr,
+    false,
+    (type) => {
+      if (type !== "ContractAccount") setStatus(statusSuccess);
+      else {
+        setStatus({
+          state: "error",
+          message: "Cannot save contract",
+        });
+        setIsContract(true);
+      }
+    },
+    (err) => {
+      resetForm(false);
+      setStatus({
+        state: "error",
+        message: err.message,
+      });
+    }
+  );
+
   useEffect(() => {
     if (addressState.trim().length === 0) {
       setStatus({
@@ -89,6 +116,7 @@ export function SaveNewAccountModal({
       setStatus({
         state: "loading",
       });
+      setIsContract(false);
       if (isAccountSaved(addressState)) {
         setStatus({
           state: "error",
@@ -96,25 +124,13 @@ export function SaveNewAccountModal({
         });
       } else {
         const timeoutId = setTimeout(() => {
-          const errUser = validateUserAddress(addressState);
-          const errContract = validateContractAddress(addressState);
-          const isHex = validateHexWalletAddress(addressState);
-          const isHexModule = validateHexModuleAddress(addressState);
-
-          if (
-            (!move.enabled && errUser && errContract) ||
-            (move.enabled && errUser && errContract && !isHex && !isHexModule)
-          )
+          if (!isSomeValidAddress(addressState))
             setStatus({
               state: "error",
-              message: errUser,
-            });
-          // TODO validate contract type online
-          else
-            setStatus({
-              state: "success",
-              message: "Valid Address",
+              message: "Invalid Address",
             });
+          else if (wasm.enabled) refetch();
+          else setStatus(statusSuccess);
         }, 1000);
         return () => clearTimeout(timeoutId);
       }
@@ -123,11 +139,10 @@ export function SaveNewAccountModal({
   }, [
     addressState,
     isAccountSaved,
-    validateUserAddress,
-    validateContractAddress,
-    validateHexWalletAddress,
-    validateHexModuleAddress,
+    isSomeValidAddress,
+    refetch,
     move.enabled,
+    wasm.enabled,
   ]);
 
   const handleSave = useHandleAccountSave({
@@ -151,25 +166,24 @@ export function SaveNewAccountModal({
       disabledMain={
         status.state !== "success" || !!errors.name || !!errors.description
       }
-      headerContent={
-        accountAddress && <SavedAccountModalHeader address={accountAddress} />
-      }
       otherBtnTitle="Cancel"
       buttonRemark="Saved accounts are stored locally on your device."
     >
       <Flex direction="column" gap={6}>
-        {!accountAddress && (
-          <ControllerInput
-            name="address"
-            control={control}
-            label="Account Address"
-            variant="fixed-floating"
-            placeholder={`ex. ${exampleUserAddress}`}
-            status={status}
-            labelBgColor="gray.900"
-            isRequired
-          />
-        )}
+        <ControllerInput
+          name="address"
+          control={control}
+          label="Account Address"
+          variant="fixed-floating"
+          placeholder={`ex. ${exampleUserAddress}`}
+          status={status}
+          labelBgColor="gray.900"
+          isRequired
+          autoFocus={!accountAddress}
+          isReadOnly={!!accountAddress}
+          cursor={accountAddress ? "not-allowed" : "pointer"}
+          helperAction={isContract && <ToContractButton />}
+        />
         <ControllerInput
           name="name"
           control={control}
@@ -183,6 +197,7 @@ export function SaveNewAccountModal({
           error={
             errors.name && getMaxLengthError(nameState.length, "account_name")
           }
+          autoFocus={!!accountAddress}
         />
         <ControllerTextarea
           name="description"
diff --git a/src/lib/components/modal/account/ToContractButton.tsx b/src/lib/components/modal/account/ToContractButton.tsx
new file mode 100644
index 000000000..b9831dfcc
--- /dev/null
+++ b/src/lib/components/modal/account/ToContractButton.tsx
@@ -0,0 +1,34 @@
+import { Text } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+import { useInternalNavigate } from "lib/app-provider";
+
+export const ToContractButton = () => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+
+  const isSavedAccounts = router.pathname === "/[network]/saved-accounts";
+  return (
+    <Text
+      textAlign="right"
+      mr={3}
+      color="accent.main"
+      fontWeight={700}
+      variant="body3"
+      cursor="pointer"
+      minW={16}
+      onClick={() =>
+        navigate(
+          isSavedAccounts
+            ? { pathname: "/contract-lists/saved-contracts" }
+            : {
+                pathname: "/contracts/[contractAddress]",
+                query: { contractAddress: router.query.accountAddress },
+              }
+        )
+      }
+    >
+      {isSavedAccounts ? "To Saved Contracts" : "To Contract Details"}
+    </Text>
+  );
+};
diff --git a/src/lib/gql/fragment-masking.ts b/src/lib/gql/fragment-masking.ts
index c6c2ca9cf..24ea25266 100644
--- a/src/lib/gql/fragment-masking.ts
+++ b/src/lib/gql/fragment-masking.ts
@@ -1,5 +1,6 @@
-/* eslint-disable */
-import {
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
   ResultOf,
   TypedDocumentNode as DocumentNode,
 } from "@graphql-typed-document-node/core";
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index fcb2974ca..3ad01976b 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -15,6 +15,8 @@ import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/
 const documents = {
   "\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n":
     types.GetAccountIdByAddressQueryDocumentDocument,
+  "\n  query getAccountTypeByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      type\n    }\n  }\n":
+    types.GetAccountTypeByAddressQueryDocumentDocument,
   "\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n":
     types.GetBlockTimestampByHeightQueryDocument,
   "\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n        identity\n      }\n    }\n  }\n":
@@ -143,6 +145,12 @@ export function graphql(source: string): unknown;
 export function graphql(
   source: "\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"
 ): (typeof documents)["\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "\n  query getAccountTypeByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      type\n    }\n  }\n"
+): (typeof documents)["\n  query getAccountTypeByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      type\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index fa91b7875..f82b77014 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -14834,6 +14834,15 @@ export type GetAccountIdByAddressQueryDocumentQuery = {
   accounts_by_pk?: { __typename?: "accounts"; id: number } | null;
 };
 
+export type GetAccountTypeByAddressQueryDocumentQueryVariables = Exact<{
+  address: Scalars["String"];
+}>;
+
+export type GetAccountTypeByAddressQueryDocumentQuery = {
+  __typename?: "query_root";
+  accounts_by_pk?: { __typename?: "accounts"; type?: any | null } | null;
+};
+
 export type GetBlockTimestampByHeightQueryQueryVariables = Exact<{
   height: Scalars["Int"];
 }>;
@@ -15884,6 +15893,60 @@ export const GetAccountIdByAddressQueryDocumentDocument = {
   GetAccountIdByAddressQueryDocumentQuery,
   GetAccountIdByAddressQueryDocumentQueryVariables
 >;
+export const GetAccountTypeByAddressQueryDocumentDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getAccountTypeByAddressQueryDocument" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "address" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "String" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "accounts_by_pk" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "address" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "address" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "type" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetAccountTypeByAddressQueryDocumentQuery,
+  GetAccountTypeByAddressQueryDocumentQueryVariables
+>;
 export const GetBlockTimestampByHeightQueryDocument = {
   kind: "Document",
   definitions: [
diff --git a/src/lib/gql/index.ts b/src/lib/gql/index.ts
index b3c7f85b8..0ea4a91cf 100644
--- a/src/lib/gql/index.ts
+++ b/src/lib/gql/index.ts
@@ -1,2 +1,2 @@
-export * from "./gql";
 export * from "./fragment-masking";
+export * from "./gql";
diff --git a/src/lib/hooks/useFormatAddresses.ts b/src/lib/hooks/useFormatAddresses.ts
index 5fe55401e..2336fe2c4 100644
--- a/src/lib/hooks/useFormatAddresses.ts
+++ b/src/lib/hooks/useFormatAddresses.ts
@@ -1,23 +1,26 @@
 import { useCallback } from "react";
 
-import { useConvertHexAddress, useValidateAddress } from "lib/app-provider";
+import { useConvertHexAddress } from "lib/app-provider";
 import type { HexAddr, HumanAddr } from "lib/types";
-import { bech32AddressToHex, unpadHexAddress } from "lib/utils";
+import {
+  bech32AddressToHex,
+  isHexModuleAddress,
+  isHexWalletAddress,
+  unpadHexAddress,
+} from "lib/utils";
 
 export const useFormatAddresses = () => {
   const { convertHexWalletAddress, convertHexModuleAddress } =
     useConvertHexAddress();
-  const { validateHexWalletAddress, validateHexModuleAddress } =
-    useValidateAddress();
 
   return useCallback(
     (address: string) => {
-      if (validateHexWalletAddress(address))
+      if (isHexWalletAddress(address))
         return {
           address: convertHexWalletAddress(address as HexAddr),
           hex: unpadHexAddress(address as HexAddr),
         };
-      if (validateHexModuleAddress(address))
+      if (isHexModuleAddress(address))
         return {
           address: convertHexModuleAddress(address as HexAddr),
           hex: unpadHexAddress(address as HexAddr),
@@ -27,11 +30,6 @@ export const useFormatAddresses = () => {
         hex: unpadHexAddress(bech32AddressToHex(address as HumanAddr)),
       };
     },
-    [
-      convertHexModuleAddress,
-      convertHexWalletAddress,
-      validateHexModuleAddress,
-      validateHexWalletAddress,
-    ]
+    [convertHexModuleAddress, convertHexWalletAddress]
   );
 };
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index b96e75d58..5d3160d61 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -33,13 +33,8 @@ import {
   usePublicProjectByAccountAddress,
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
-import type { HexAddr, HumanAddr, MoveAccountAddr, Option } from "lib/types";
-import {
-  getFirstQueryParam,
-  isHexWalletAddress,
-  isHexModuleAddress,
-  truncate,
-} from "lib/utils";
+import type { Addr, HexAddr, HumanAddr, Option } from "lib/types";
+import { getFirstQueryParam, truncate } from "lib/utils";
 
 import { AccountHeader } from "./components/AccountHeader";
 import { AssetsSection } from "./components/asset";
@@ -71,8 +66,8 @@ enum TabIndex {
 }
 
 export interface AccountDetailsBodyProps {
-  hexAddress: HexAddr;
-  accountAddress: HumanAddr;
+  accountAddressParam: string;
+  tab: TabIndex;
 }
 
 const getAddressOnPath = (hexAddress: HexAddr, accountAddress: HumanAddr) =>
@@ -81,21 +76,23 @@ const getAddressOnPath = (hexAddress: HexAddr, accountAddress: HumanAddr) =>
 const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 
 const AccountDetailsBody = ({
-  hexAddress,
-  accountAddress,
+  accountAddressParam,
+  tab,
 }: AccountDetailsBodyProps) => {
   const {
     chainConfig: {
       extra: { disableDelegation },
     },
   } = useCelatoneApp();
+  const formatAddresses = useFormatAddresses();
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
   // const nft = useNftConfig({ shouldRedirect: false });
   const navigate = useInternalNavigate();
   const router = useRouter();
-  // TODO: remove assertion later
-  const tab = getFirstQueryParam(router.query.tab) as TabIndex;
+
+  const { address: accountAddress, hex: hexAddress } =
+    formatAddresses(accountAddressParam);
   const { data: publicInfo } = usePublicProjectByAccountAddress(accountAddress);
   const { data: publicInfoBySlug } = usePublicProjectBySlug(publicInfo?.slug);
   const { data: accountId } = useAccountId(accountAddress);
@@ -446,13 +443,12 @@ const AccountDetailsBody = ({
 
 const AccountDetails = () => {
   const router = useRouter();
-  const { validateUserAddress, validateContractAddress } = useValidateAddress();
-  const formatAddresses = useFormatAddresses();
+  const { isSomeValidAddress } = useValidateAddress();
+
   // TODO: change to `Addr` for correctness (i.e. interchain account)
   const accountAddressParam = getFirstQueryParam(
     router.query.accountAddress
-  ).toLowerCase() as MoveAccountAddr;
-  const { address, hex } = formatAddresses(accountAddressParam);
+  ).toLowerCase() as Addr;
   // TODO: fix assertion later
   const tab = getFirstQueryParam(router.query.tab) as TabIndex;
 
@@ -462,13 +458,13 @@ const AccountDetails = () => {
 
   return (
     <PageContainer>
-      {!isHexWalletAddress(accountAddressParam) &&
-      !isHexModuleAddress(accountAddressParam) &&
-      validateUserAddress(accountAddressParam) &&
-      validateContractAddress(accountAddressParam) ? (
+      {!isSomeValidAddress(accountAddressParam) ? (
         <InvalidAccount />
       ) : (
-        <AccountDetailsBody hexAddress={hex} accountAddress={address} />
+        <AccountDetailsBody
+          accountAddressParam={accountAddressParam}
+          tab={tab}
+        />
       )}
     </PageContainer>
   );
diff --git a/src/lib/query/account.ts b/src/lib/query/account.ts
index 1d945ff89..94e73885a 100644
--- a/src/lib/query/account.ts
+++ b/src/lib/query/account.ts
@@ -7,3 +7,11 @@ export const getAccountIdByAddressQueryDocument = graphql(`
     }
   }
 `);
+
+export const getAccountTypeByAddressQueryDocument = graphql(`
+  query getAccountTypeByAddressQueryDocument($address: String!) {
+    accounts_by_pk(address: $address) {
+      type
+    }
+  }
+`);
diff --git a/src/lib/services/accountService.ts b/src/lib/services/accountService.ts
index 66fa7e702..5c154d5a2 100644
--- a/src/lib/services/accountService.ts
+++ b/src/lib/services/accountService.ts
@@ -7,8 +7,11 @@ import {
   useBaseApiRoute,
   CELATONE_QUERY_KEYS,
 } from "lib/app-provider";
-import { getAccountIdByAddressQueryDocument } from "lib/query";
-import type { Addr, Balance, Nullable, Option } from "lib/types";
+import {
+  getAccountIdByAddressQueryDocument,
+  getAccountTypeByAddressQueryDocument,
+} from "lib/query";
+import type { AccountType, Addr, Balance, Nullable, Option } from "lib/types";
 
 import { getAccountBalanceInfo } from "./account";
 
@@ -49,3 +52,39 @@ export const useAccountId = (
     }
   );
 };
+
+export const useAccountType = (
+  walletAddress: Option<Addr>,
+  enabled: boolean,
+  onSuccess?: (type: AccountType) => void,
+  onError?: (err: Error) => void
+): UseQueryResult<AccountType> => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = useCallback(async () => {
+    if (!walletAddress)
+      throw new Error(
+        "Error fetching account type: failed to retrieve address."
+      );
+    return indexerGraphClient
+      .request(getAccountTypeByAddressQueryDocument, {
+        address: walletAddress,
+      })
+      .then(
+        ({ accounts_by_pk }) =>
+          (accounts_by_pk?.type ?? "BaseAccount") as AccountType
+      );
+  }, [indexerGraphClient, walletAddress]);
+
+  return useQuery(
+    [CELATONE_QUERY_KEYS.ACCOUNT_TYPE, indexerGraphClient, walletAddress],
+    queryFn,
+    {
+      enabled: enabled && Boolean(walletAddress),
+      retry: 1,
+      refetchOnWindowFocus: false,
+      onSuccess,
+      onError,
+    }
+  );
+};
diff --git a/src/lib/types/account.ts b/src/lib/types/account.ts
new file mode 100644
index 000000000..3f412428c
--- /dev/null
+++ b/src/lib/types/account.ts
@@ -0,0 +1,11 @@
+export type AccountType =
+  | "BaseAccount"
+  | "InterchainAccount"
+  | "ModuleAccount"
+  | "ContinuousVestingAccount"
+  | "DelayedVestingAccount"
+  | "ClawbackVestingAccount"
+  | "ContractAccount"
+  | "PeriodicVestingAccount"
+  | "PermanentLockedAccount"
+  | "BaseVestingAccount";
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 90d56faab..bb50c6593 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -1,6 +1,7 @@
 export * from "./currency";
 export * from "./move";
 export * from "./tx";
+export * from "./account";
 export * from "./addrs";
 export * from "./asset";
 export * from "./block";

From 3197d808cbb7bf7e8e03a5bbecb687e788eb2714 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 14 Nov 2023 12:00:37 +0700
Subject: [PATCH 354/368] fix: wording

---
 src/lib/components/modal/account/SaveNewAccount.tsx   | 2 +-
 src/lib/components/modal/account/ToContractButton.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index 0eb09f28c..5ebb3ef1e 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -93,7 +93,7 @@ export function SaveNewAccountModal({
       else {
         setStatus({
           state: "error",
-          message: "Cannot save contract",
+          message: "You need to save contract through Contract Details.",
         });
         setIsContract(true);
       }
diff --git a/src/lib/components/modal/account/ToContractButton.tsx b/src/lib/components/modal/account/ToContractButton.tsx
index b9831dfcc..833c942ba 100644
--- a/src/lib/components/modal/account/ToContractButton.tsx
+++ b/src/lib/components/modal/account/ToContractButton.tsx
@@ -28,7 +28,7 @@ export const ToContractButton = () => {
         )
       }
     >
-      {isSavedAccounts ? "To Saved Contracts" : "To Contract Details"}
+      Go to {isSavedAccounts ? "Saved Contracts" : "Contract Details"}
     </Text>
   );
 };

From 568c4aef3f26e23d20304eb0dc567a140f133521 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 14 Nov 2023 15:04:16 +0700
Subject: [PATCH 355/368] fix: comment

---
 src/lib/app-provider/hooks/useAddress.ts      |  1 -
 .../modal/account/SaveNewAccount.tsx          | 19 ++++++++-------
 src/lib/pages/account-details/index.tsx       |  1 -
 src/lib/services/accountService.ts            | 13 +++++------
 src/lib/types/account.ts                      | 23 ++++++++++---------
 5 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index 4f5ad05cd..47af439c8 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -98,7 +98,6 @@ export const useGetAddressType = () => {
   );
 };
 
-// TODO: refactor
 export const useValidateAddress = () => {
   const {
     chain: { bech32_prefix: bech32Prefix },
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index 5ebb3ef1e..ffa47c5ef 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -16,7 +16,7 @@ import { ControllerInput, ControllerTextarea } from "lib/components/forms";
 import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
 import { useAccountStore } from "lib/providers/store";
 import { useAccountType } from "lib/services/accountService";
-import type { Addr } from "lib/types";
+import { AccountType, type Addr } from "lib/types";
 
 import { ToContractButton } from "./ToContractButton";
 
@@ -85,27 +85,26 @@ export function SaveNewAccountModal({
     });
   };
 
-  const { refetch } = useAccountType(
-    addressState as Addr,
-    false,
-    (type) => {
-      if (type !== "ContractAccount") setStatus(statusSuccess);
+  const { refetch } = useAccountType(addressState as Addr, {
+    enabled: false,
+    onSuccess: (type) => {
+      if (type !== AccountType.ContractAccount) setStatus(statusSuccess);
       else {
         setStatus({
           state: "error",
-          message: "You need to save contract through Contract Details.",
+          message: "You need to save contract through Contract page.",
         });
         setIsContract(true);
       }
     },
-    (err) => {
+    onError: (err) => {
       resetForm(false);
       setStatus({
         state: "error",
         message: err.message,
       });
-    }
-  );
+    },
+  });
 
   useEffect(() => {
     if (addressState.trim().length === 0) {
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 5d3160d61..4542e684f 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -445,7 +445,6 @@ const AccountDetails = () => {
   const router = useRouter();
   const { isSomeValidAddress } = useValidateAddress();
 
-  // TODO: change to `Addr` for correctness (i.e. interchain account)
   const accountAddressParam = getFirstQueryParam(
     router.query.accountAddress
   ).toLowerCase() as Addr;
diff --git a/src/lib/services/accountService.ts b/src/lib/services/accountService.ts
index 5c154d5a2..1be2a1740 100644
--- a/src/lib/services/accountService.ts
+++ b/src/lib/services/accountService.ts
@@ -1,4 +1,4 @@
-import type { UseQueryResult } from "@tanstack/react-query";
+import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
@@ -55,9 +55,10 @@ export const useAccountId = (
 
 export const useAccountType = (
   walletAddress: Option<Addr>,
-  enabled: boolean,
-  onSuccess?: (type: AccountType) => void,
-  onError?: (err: Error) => void
+  options: Pick<
+    UseQueryOptions<AccountType, Error>,
+    "enabled" | "onSuccess" | "onError"
+  > = {}
 ): UseQueryResult<AccountType> => {
   const { indexerGraphClient } = useCelatoneApp();
 
@@ -80,11 +81,9 @@ export const useAccountType = (
     [CELATONE_QUERY_KEYS.ACCOUNT_TYPE, indexerGraphClient, walletAddress],
     queryFn,
     {
-      enabled: enabled && Boolean(walletAddress),
+      ...options,
       retry: 1,
       refetchOnWindowFocus: false,
-      onSuccess,
-      onError,
     }
   );
 };
diff --git a/src/lib/types/account.ts b/src/lib/types/account.ts
index 3f412428c..e24662efb 100644
--- a/src/lib/types/account.ts
+++ b/src/lib/types/account.ts
@@ -1,11 +1,12 @@
-export type AccountType =
-  | "BaseAccount"
-  | "InterchainAccount"
-  | "ModuleAccount"
-  | "ContinuousVestingAccount"
-  | "DelayedVestingAccount"
-  | "ClawbackVestingAccount"
-  | "ContractAccount"
-  | "PeriodicVestingAccount"
-  | "PermanentLockedAccount"
-  | "BaseVestingAccount";
+export enum AccountType {
+  BaseAccount = "BaseAccount",
+  InterchainAccount = "InterchainAccount",
+  ModuleAccount = "ModuleAccount",
+  ContinuousVestingAccount = "ContinuousVestingAccount",
+  DelayedVestingAccount = "DelayedVestingAccount",
+  ClawbackVestingAccount = "ClawbackVestingAccount",
+  ContractAccount = "ContractAccount",
+  PeriodicVestingAccount = "PeriodicVestingAccount",
+  PermanentLockedAccount = "PermanentLockedAccount",
+  BaseVestingAccount = "BaseVestingAccount",
+}

From e084e089f1b6bc2d681d21140d5ab0402e0d4c90 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 14 Nov 2023 15:19:16 +0700
Subject: [PATCH 356/368] fix: as comment

---
 .../components/modal/account/EditSavedAccount.tsx   |  1 +
 src/lib/components/modal/account/SaveNewAccount.tsx | 10 +++++++---
 .../components/modal/account/ToContractButton.tsx   | 13 +++++++++----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
index 3f6334c88..68903b873 100644
--- a/src/lib/components/modal/account/EditSavedAccount.tsx
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -94,6 +94,7 @@ export const EditSavedAccountModal = ({
           error={
             errors.name && getMaxLengthError(nameState.length, "account_name")
           }
+          autoFocus
         />
         <ControllerTextarea
           name="description"
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index ffa47c5ef..e571861ed 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -73,7 +73,7 @@ export function SaveNewAccountModal({
   });
 
   const [status, setStatus] = useState<FormStatus>({ state: "init" });
-  const [isContract, setIsContract] = useState<boolean>(false);
+  const [isContract, setIsContract] = useState(false);
 
   const addressState = watch("address");
   const nameState = watch("name");
@@ -85,7 +85,7 @@ export function SaveNewAccountModal({
     });
   };
 
-  const { refetch } = useAccountType(addressState as Addr, {
+  const { refetch } = useAccountType(addressState, {
     enabled: false,
     onSuccess: (type) => {
       if (type !== AccountType.ContractAccount) setStatus(statusSuccess);
@@ -181,7 +181,11 @@ export function SaveNewAccountModal({
           autoFocus={!accountAddress}
           isReadOnly={!!accountAddress}
           cursor={accountAddress ? "not-allowed" : "pointer"}
-          helperAction={isContract && <ToContractButton />}
+          helperAction={
+            isContract && (
+              <ToContractButton isAccountPrefilled={!accountAddress} />
+            )
+          }
         />
         <ControllerInput
           name="name"
diff --git a/src/lib/components/modal/account/ToContractButton.tsx b/src/lib/components/modal/account/ToContractButton.tsx
index 833c942ba..ca67c7876 100644
--- a/src/lib/components/modal/account/ToContractButton.tsx
+++ b/src/lib/components/modal/account/ToContractButton.tsx
@@ -3,11 +3,16 @@ import { useRouter } from "next/router";
 
 import { useInternalNavigate } from "lib/app-provider";
 
-export const ToContractButton = () => {
+interface ToContractButtonProps {
+  isAccountPrefilled: boolean;
+}
+
+export const ToContractButton = ({
+  isAccountPrefilled,
+}: ToContractButtonProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
 
-  const isSavedAccounts = router.pathname === "/[network]/saved-accounts";
   return (
     <Text
       textAlign="right"
@@ -19,7 +24,7 @@ export const ToContractButton = () => {
       minW={16}
       onClick={() =>
         navigate(
-          isSavedAccounts
+          isAccountPrefilled
             ? { pathname: "/contract-lists/saved-contracts" }
             : {
                 pathname: "/contracts/[contractAddress]",
@@ -28,7 +33,7 @@ export const ToContractButton = () => {
         )
       }
     >
-      Go to {isSavedAccounts ? "Saved Contracts" : "Contract Details"}
+      Go to {isAccountPrefilled ? "Saved Contracts" : "Contract Details"}
     </Text>
   );
 };

From 02f0cf90104110d389113b25ac5145a7e4f63bff Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 14 Nov 2023 17:17:28 +0700
Subject: [PATCH 357/368] fix: val image

---
 CHANGELOG.md                          | 1 +
 src/lib/components/ValidatorBadge.tsx | 2 +-
 src/lib/services/validator.ts         | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6deae92e..3ea493c2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -188,6 +188,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#626](https://github.com/alleslabs/celatone-frontend/pull/626) Fix handle validator image
 - [#570](https://github.com/alleslabs/celatone-frontend/pull/570) Use native tokens in attached funds
 - [#567](https://github.com/alleslabs/celatone-frontend/pull/567) Fix attached funds in code snippet
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx
index a120e6a73..eecf409f5 100644
--- a/src/lib/components/ValidatorBadge.tsx
+++ b/src/lib/components/ValidatorBadge.tsx
@@ -56,7 +56,7 @@ export const ValidatorBadge = ({
               alt={validator.moniker}
               borderRadius="50%"
               fallbackSrc={validatorDefaultImg.src}
-              fallbackStrategy="onError"
+              fallbackStrategy="beforeLoadOrError"
             />
           )}
           <Flex direction="column">
diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts
index 83f761cf8..a6a0cc91c 100644
--- a/src/lib/services/validator.ts
+++ b/src/lib/services/validator.ts
@@ -73,7 +73,7 @@ export const resolveValIdentity = async (
       .catch(async (_) => {
         if (validator.identity) {
           const { data } = await axios.get(keybaseUrl);
-          return data.them[0].pictures.primary.url;
+          if (data.them.length) return data.them[0].pictures.primary.url;
         }
         return uiAvatarsUrl;
       })

From 320f18fceee845a20f7a4d15bbfe60c1ec81bc4d Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 16 Nov 2023 14:30:06 +0700
Subject: [PATCH 358/368] fix(components): add mobile card for published events

---
 CHANGELOG.md                                  |  1 +
 .../history/PublishedEventsMobileCard.tsx     | 57 +++++++++++++++++++
 .../tables/history/PublishedEventsTable.tsx   | 42 ++++++++++++++
 .../components/tables/history/index.tsx       | 22 +++----
 4 files changed, 107 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx
 create mode 100644 src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ea493c2f..0f376ceea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -71,6 +71,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#627](https://github.com/alleslabs/celatone-frontend/pull/627) Add responsive for published event in module detail
 - [#625](https://github.com/alleslabs/celatone-frontend/pull/625) Fix abi empty vector serialization
 - [#605](https://github.com/alleslabs/celatone-frontend/pull/605) Apply singleton class style to Amplitude structure
 - [#591](https://github.com/alleslabs/celatone-frontend/pull/591) Bump initia.js due to decimal serialization and dynamic buffer
diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx
new file mode 100644
index 000000000..fd664f67b
--- /dev/null
+++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx
@@ -0,0 +1,57 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
+import type { ModuleHistory } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { PolicyChanges, RemarkRender } from "./ModuleHistoryRow";
+
+interface PublishedEventsMobileCardProps {
+  history: ModuleHistory;
+}
+
+export const PublishedEventsMobileCard = ({
+  history,
+}: PublishedEventsMobileCardProps) => {
+  return (
+    <MobileCardTemplate
+      topContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column">
+            <MobileLabel label="Upgrade Policy Changes" />
+            <PolicyChanges history={history} />
+          </Flex>
+          <Flex direction="column">
+            <MobileLabel label="Remark" />
+            {history.remark && <RemarkRender remark={history.remark} />}
+          </Flex>
+        </Flex>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Block Height" />
+            {history.height === 0 ? (
+              <Text variant="body2" color="text.dark">
+                Genesis
+              </Text>
+            ) : (
+              <ExplorerLink
+                value={history.height.toString()}
+                type="block_height"
+                showCopyOnHover
+              />
+            )}
+          </Flex>
+          <Flex direction="column">
+            <Text variant="body3">{formatUTC(history.timestamp)}</Text>
+            <Text variant="body3" color="text.dark">
+              {`(${dateFromNow(history.timestamp)})`}
+            </Text>
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx
new file mode 100644
index 000000000..852e49234
--- /dev/null
+++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx
@@ -0,0 +1,42 @@
+import { TableContainer } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { MobileTableContainer } from "lib/components/table";
+import type { ModuleHistory } from "lib/types";
+
+import { ModuleHistoryHeader } from "./ModuleHistoryHeader";
+import { ModuleHistoryRow } from "./ModuleHistoryRow";
+import { PublishedEventsMobileCard } from "./PublishedEventsMobileCard";
+
+interface PublishedEventsTableProps {
+  moduleHistories: ModuleHistory[];
+  pageSize: number;
+  templateColumns: string;
+}
+
+export const PublishedEventsTable = ({
+  moduleHistories,
+  templateColumns,
+  pageSize,
+}: PublishedEventsTableProps) => {
+  const isMobile = useMobile();
+
+  return isMobile ? (
+    <MobileTableContainer>
+      {moduleHistories.slice(0, pageSize).map((history) => (
+        <PublishedEventsMobileCard key={history.height} history={history} />
+      ))}
+    </MobileTableContainer>
+  ) : (
+    <TableContainer>
+      <ModuleHistoryHeader templateColumns={templateColumns} />
+      {moduleHistories.slice(0, pageSize).map((history) => (
+        <ModuleHistoryRow
+          key={JSON.stringify(history)}
+          templateColumns={templateColumns}
+          history={history}
+        />
+      ))}
+    </TableContainer>
+  );
+};
diff --git a/src/lib/pages/module-details/components/tables/history/index.tsx b/src/lib/pages/module-details/components/tables/history/index.tsx
index f8a18d253..54c47aa96 100644
--- a/src/lib/pages/module-details/components/tables/history/index.tsx
+++ b/src/lib/pages/module-details/components/tables/history/index.tsx
@@ -6,12 +6,11 @@ import { Loading } from "lib/components/Loading";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { TableContainer, ViewMore } from "lib/components/table";
+import { ViewMore } from "lib/components/table";
 import { useModuleHistoriesByPagination } from "lib/services/move/moduleService";
 import type { Nullable, Option } from "lib/types";
 
-import { ModuleHistoryHeader } from "./ModuleHistoryHeader";
-import { ModuleHistoryRow } from "./ModuleHistoryRow";
+import { PublishedEventsTable } from "./PublishedEventsTable";
 
 const TEMPLATE_COLUMNS = "40px 180px minmax(300px, 1fr) 140px 260px";
 
@@ -115,20 +114,13 @@ export const ModuleHistoryTable = ({
       />
     );
 
-  // TODO: Mobile card version
-
   return (
     <>
-      <TableContainer>
-        <ModuleHistoryHeader templateColumns={TEMPLATE_COLUMNS} />
-        {moduleHistories.slice(0, pageSize).map((history) => (
-          <ModuleHistoryRow
-            key={JSON.stringify(history)}
-            templateColumns={TEMPLATE_COLUMNS}
-            history={history}
-          />
-        ))}
-      </TableContainer>
+      <PublishedEventsTable
+        moduleHistories={moduleHistories}
+        pageSize={pageSize}
+        templateColumns={TEMPLATE_COLUMNS}
+      />
       {onViewMore && Number(historyCount) > 5 && (
         <ViewMore onClick={onViewMore} />
       )}

From 2f8a18c3a606aa2f607d569e29637e70b5fd2e53 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 16 Nov 2023 15:02:33 +0700
Subject: [PATCH 359/368] fix(components): fix minor mobile issue

---
 src/lib/layout/mobile/NavDrawer.tsx                    |  2 +-
 .../components/delegations/DelegationInfo.tsx          | 10 +++++++---
 .../components/delegations/DelegationsBody.tsx         |  8 +++++++-
 .../components/delegations/total-card/index.tsx        |  2 +-
 src/lib/pages/account-details/index.tsx                |  8 +++++---
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index 9e92c503b..9dbcfaddb 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -83,7 +83,7 @@ export const NavDrawer = () => {
               {
                 name: "0x1 Page",
                 slug: "/account/0x1",
-                icon: "home" as IconKeys,
+                icon: "hex" as IconKeys,
               },
             ]
           : []),
diff --git a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
index c0591f92d..d8671622a 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
@@ -43,7 +43,7 @@ export const DelegationInfo = ({
           <CustomIcon name="chevron-right" color="gray.600" />
         </Flex>
       ) : (
-        <>
+        <Flex direction="column" gap={4}>
           <Heading
             variant="h6"
             as="h6"
@@ -59,7 +59,11 @@ export const DelegationInfo = ({
             justify="space-between"
             overflowX="scroll"
           >
-            <Flex gap={8} direction={{ base: "column", md: "row" }}>
+            <Flex
+              gap={{ base: 4, md: 8 }}
+              direction={{ base: "column", md: "row" }}
+              w="full"
+            >
               {totalBondedCard}
               {otherInfoCards}
             </Flex>
@@ -94,7 +98,7 @@ export const DelegationInfo = ({
               </Flex>
             )}
           </Flex>
-        </>
+        </Flex>
       )}
     </>
   );
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index fc36dc45b..113b7b6ad 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -39,7 +39,13 @@ export const DelegationsBody = ({
   }, [router.query.accountAddress]);
 
   return (
-    <Flex direction="column" gap={8} p={8} borderRadius="8px" bg="gray.900">
+    <Flex
+      direction="column"
+      gap={8}
+      p={{ base: 4, md: 8 }}
+      borderRadius="8px"
+      bg="gray.900"
+    >
       <RadioGroup
         onChange={(newValue) => {
           trackUseRadio(newValue.toLocaleLowerCase());
diff --git a/src/lib/pages/account-details/components/delegations/total-card/index.tsx b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
index ced0b9631..0bde51656 100644
--- a/src/lib/pages/account-details/components/delegations/total-card/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/total-card/index.tsx
@@ -27,7 +27,7 @@ export const TotalCard = ({
 }: TotalCardProps) => {
   if (isLoading)
     return (
-      <Box minW="233px">
+      <Box minW={48}>
         <Spinner mt={2} alignSelf="center" size="xl" />
       </Box>
     );
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 4542e684f..62ea0aa1c 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -275,7 +275,7 @@ const AccountDetailsBody = ({
           </CustomTab>
         </TabList>
         <TabPanels>
-          <TabPanel p={0}>
+          <TabPanel p={0} pt={{ base: 4, md: 0 }}>
             <Flex
               direction={{ base: "column", md: "row" }}
               gap={{ base: 4, md: 6 }}
@@ -304,8 +304,10 @@ const AccountDetailsBody = ({
               )}
               <UserAccountDesc address={accountAddress} />
             </Flex>
-
-            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
+            <Flex
+              borderBottom={{ base: "0px", md: "1px solid" }}
+              borderBottomColor="gray.700"
+            >
               <AssetsSection
                 walletAddress={accountAddress}
                 onViewMore={handleTabChange(TabIndex.Assets)}

From 699b7a0ffa8004c0b91af70d62cea0ea6c61406c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 21 Nov 2023 11:54:57 +0700
Subject: [PATCH 360/368] fix: refactor module tables

---
 .../{txs/index.tsx => ModuleTxsTable.tsx}     |  80 ++++++--------
 .../history/PublishedEventsMobileCard.tsx     |  57 ----------
 .../tables/history/PublishedEventsTable.tsx   |  37 ++++---
 ...der.tsx => PublishedEventsTableHeader.tsx} |   2 +-
 .../PublishedEventsTableMobileCard.tsx        |  55 ++++++++++
 ...oryRow.tsx => PublishedEventsTableRow.tsx} |   6 +-
 .../components/tables/history/index.tsx       | 101 +++++++-----------
 .../module-details/components/tables/index.ts |   2 +-
 src/lib/services/move/moduleService.ts        |  24 +++--
 9 files changed, 164 insertions(+), 200 deletions(-)
 rename src/lib/pages/module-details/components/tables/{txs/index.tsx => ModuleTxsTable.tsx} (55%)
 delete mode 100644 src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx
 rename src/lib/pages/module-details/components/tables/history/{ModuleHistoryHeader.tsx => PublishedEventsTableHeader.tsx} (91%)
 create mode 100644 src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx
 rename src/lib/pages/module-details/components/tables/history/{ModuleHistoryRow.tsx => PublishedEventsTableRow.tsx} (96%)

diff --git a/src/lib/pages/module-details/components/tables/txs/index.tsx b/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx
similarity index 55%
rename from src/lib/pages/module-details/components/tables/txs/index.tsx
rename to src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx
index 0b05b0351..30d654f08 100644
--- a/src/lib/pages/module-details/components/tables/txs/index.tsx
+++ b/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx
@@ -1,8 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
-import { useCelatoneApp, useMobile } from "lib/app-provider";
-import { Loading } from "lib/components/Loading";
+import { useCelatoneApp } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -65,39 +64,10 @@ export const ModuleTxsTable = ({
     setCurrentPage(1);
   };
 
-  const isMobile = useMobile();
-
   useEffect(() => {
     if (!onViewMore) setPageSize(10);
     setCurrentPage(1);
   }, [currentChainId, onViewMore, setCurrentPage, setPageSize]);
-  // TODO - Might consider adding this state in all transaction table
-  if (!moduleId || error)
-    return (
-      <EmptyState
-        withBorder
-        imageVariant="not-found"
-        message="There is an error during fetching transactions."
-      />
-    );
-  if (isMobile && isLoading)
-    return (
-      <>
-        <Loading />
-        {txCount && (
-          <Pagination
-            currentPage={currentPage}
-            pagesQuantity={pagesQuantity}
-            offset={offset}
-            totalData={txCount}
-            pageSize={pageSize}
-            onPageChange={onPageChange}
-            onPageSizeChange={onPageSizeChange}
-            scrollComponentId={scrollComponentId}
-          />
-        )}
-      </>
-    );
 
   return (
     <>
@@ -105,28 +75,40 @@ export const ModuleTxsTable = ({
         transactions={moduleTxs}
         isLoading={isLoading}
         emptyState={
-          <EmptyState
-            withBorder
-            imageVariant="empty"
-            message="There are no transactions on this module."
-          />
+          !moduleId || error ? (
+            <EmptyState
+              withBorder
+              imageVariant="not-found"
+              message="There is an error during fetching transactions."
+            />
+          ) : (
+            <EmptyState
+              withBorder
+              imageVariant="empty"
+              message="There are no transactions on this module."
+            />
+          )
         }
         showAction={false}
         showRelations={false}
       />
-      {onViewMore && <ViewMore onClick={onViewMore} />}
-      {!onViewMore && txCount !== undefined && Number(txCount) > 10 && (
-        <Pagination
-          currentPage={currentPage}
-          pagesQuantity={pagesQuantity}
-          offset={offset}
-          totalData={txCount}
-          pageSize={pageSize}
-          onPageChange={onPageChange}
-          onPageSizeChange={onPageSizeChange}
-          scrollComponentId={scrollComponentId}
-        />
-      )}
+      {!!txCount &&
+        (onViewMore ? (
+          <ViewMore onClick={onViewMore} />
+        ) : (
+          txCount > 10 && (
+            <Pagination
+              currentPage={currentPage}
+              pagesQuantity={pagesQuantity}
+              offset={offset}
+              totalData={txCount}
+              pageSize={pageSize}
+              onPageChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+              scrollComponentId={scrollComponentId}
+            />
+          )
+        ))}
     </>
   );
 };
diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx
deleted file mode 100644
index fd664f67b..000000000
--- a/src/lib/pages/module-details/components/tables/history/PublishedEventsMobileCard.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Flex, Text } from "@chakra-ui/react";
-
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { MobileCardTemplate, MobileLabel } from "lib/components/table";
-import type { ModuleHistory } from "lib/types";
-import { dateFromNow, formatUTC } from "lib/utils";
-
-import { PolicyChanges, RemarkRender } from "./ModuleHistoryRow";
-
-interface PublishedEventsMobileCardProps {
-  history: ModuleHistory;
-}
-
-export const PublishedEventsMobileCard = ({
-  history,
-}: PublishedEventsMobileCardProps) => {
-  return (
-    <MobileCardTemplate
-      topContent={
-        <Flex direction="column" gap={3}>
-          <Flex direction="column">
-            <MobileLabel label="Upgrade Policy Changes" />
-            <PolicyChanges history={history} />
-          </Flex>
-          <Flex direction="column">
-            <MobileLabel label="Remark" />
-            {history.remark && <RemarkRender remark={history.remark} />}
-          </Flex>
-        </Flex>
-      }
-      middleContent={
-        <Flex direction="column" gap={3}>
-          <Flex direction="column" flex="1">
-            <MobileLabel label="Block Height" />
-            {history.height === 0 ? (
-              <Text variant="body2" color="text.dark">
-                Genesis
-              </Text>
-            ) : (
-              <ExplorerLink
-                value={history.height.toString()}
-                type="block_height"
-                showCopyOnHover
-              />
-            )}
-          </Flex>
-          <Flex direction="column">
-            <Text variant="body3">{formatUTC(history.timestamp)}</Text>
-            <Text variant="body3" color="text.dark">
-              {`(${dateFromNow(history.timestamp)})`}
-            </Text>
-          </Flex>
-        </Flex>
-      }
-    />
-  );
-};
diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx
index 852e49234..677fb9684 100644
--- a/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx
+++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx
@@ -1,37 +1,46 @@
 import { TableContainer } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
+import { Loading } from "lib/components/Loading";
 import { MobileTableContainer } from "lib/components/table";
-import type { ModuleHistory } from "lib/types";
+import type { ModuleHistory, Option } from "lib/types";
 
-import { ModuleHistoryHeader } from "./ModuleHistoryHeader";
-import { ModuleHistoryRow } from "./ModuleHistoryRow";
-import { PublishedEventsMobileCard } from "./PublishedEventsMobileCard";
+import { PublishedEventsTableHeader } from "./PublishedEventsTableHeader";
+import { PublishedEventsTableMobileCard } from "./PublishedEventsTableMobileCard";
+import { PublishedEventsTableRow } from "./PublishedEventsTableRow";
 
 interface PublishedEventsTableProps {
-  moduleHistories: ModuleHistory[];
-  pageSize: number;
-  templateColumns: string;
+  moduleHistories: Option<ModuleHistory[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
 }
 
 export const PublishedEventsTable = ({
   moduleHistories,
-  templateColumns,
-  pageSize,
+  isLoading,
+  emptyState,
 }: PublishedEventsTableProps) => {
   const isMobile = useMobile();
 
+  if (isLoading) return <Loading withBorder />;
+  if (!moduleHistories?.length) return emptyState;
+
+  const templateColumns = "40px 180px minmax(300px, 1fr) 140px 260px";
+
   return isMobile ? (
     <MobileTableContainer>
-      {moduleHistories.slice(0, pageSize).map((history) => (
-        <PublishedEventsMobileCard key={history.height} history={history} />
+      {moduleHistories.map((history) => (
+        <PublishedEventsTableMobileCard
+          key={history.height}
+          history={history}
+        />
       ))}
     </MobileTableContainer>
   ) : (
     <TableContainer>
-      <ModuleHistoryHeader templateColumns={templateColumns} />
-      {moduleHistories.slice(0, pageSize).map((history) => (
-        <ModuleHistoryRow
+      <PublishedEventsTableHeader templateColumns={templateColumns} />
+      {moduleHistories.map((history) => (
+        <PublishedEventsTableRow
           key={JSON.stringify(history)}
           templateColumns={templateColumns}
           history={history}
diff --git a/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableHeader.tsx
similarity index 91%
rename from src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
rename to src/lib/pages/module-details/components/tables/history/PublishedEventsTableHeader.tsx
index 79cd72574..2dfa1ff0e 100644
--- a/src/lib/pages/module-details/components/tables/history/ModuleHistoryHeader.tsx
+++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableHeader.tsx
@@ -3,7 +3,7 @@ import { Grid } from "@chakra-ui/react";
 
 import { TableHeader } from "lib/components/table";
 
-export const ModuleHistoryHeader = ({
+export const PublishedEventsTableHeader = ({
   templateColumns,
 }: {
   templateColumns: GridProps["templateColumns"];
diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx
new file mode 100644
index 000000000..f02032dd3
--- /dev/null
+++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx
@@ -0,0 +1,55 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileCardTemplate, MobileLabel } from "lib/components/table";
+import type { ModuleHistory } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { PolicyChanges, RemarkRender } from "./PublishedEventsTableRow";
+
+interface PublishedEventsTableMobileCardProps {
+  history: ModuleHistory;
+}
+
+export const PublishedEventsTableMobileCard = ({
+  history,
+}: PublishedEventsTableMobileCardProps) => (
+  <MobileCardTemplate
+    topContent={
+      <Flex direction="column" gap={3}>
+        <Flex direction="column">
+          <MobileLabel label="Upgrade Policy Changes" />
+          <PolicyChanges history={history} />
+        </Flex>
+        <Flex direction="column">
+          <MobileLabel label="Remark" />
+          {history.remark && <RemarkRender remark={history.remark} />}
+        </Flex>
+      </Flex>
+    }
+    middleContent={
+      <Flex direction="column" gap={3}>
+        <Flex direction="column" flex="1">
+          <MobileLabel label="Block Height" />
+          {history.height === 0 ? (
+            <Text variant="body2" color="text.dark">
+              Genesis
+            </Text>
+          ) : (
+            <ExplorerLink
+              value={history.height.toString()}
+              type="block_height"
+              showCopyOnHover
+            />
+          )}
+        </Flex>
+        <Flex direction="column">
+          <Text variant="body3">{formatUTC(history.timestamp)}</Text>
+          <Text variant="body3" color="text.dark">
+            {`(${dateFromNow(history.timestamp)})`}
+          </Text>
+        </Flex>
+      </Flex>
+    }
+  />
+);
diff --git a/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableRow.tsx
similarity index 96%
rename from src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
rename to src/lib/pages/module-details/components/tables/history/PublishedEventsTableRow.tsx
index b9e26b450..517c3dbbb 100644
--- a/src/lib/pages/module-details/components/tables/history/ModuleHistoryRow.tsx
+++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableRow.tsx
@@ -8,7 +8,7 @@ import { TableRow } from "lib/components/table";
 import type { ModuleHistory } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
-interface ModuleHistoriesRowProps {
+interface PublishedEventsTableRowProps {
   templateColumns: GridProps["templateColumns"];
   history: ModuleHistory;
 }
@@ -88,10 +88,10 @@ export const PolicyChanges = ({ history }: { history: ModuleHistory }) => {
   }
 };
 
-export const ModuleHistoryRow = ({
+export const PublishedEventsTableRow = ({
   templateColumns,
   history,
-}: ModuleHistoriesRowProps) => (
+}: PublishedEventsTableRowProps) => (
   <Grid templateColumns={templateColumns}>
     <TableRow />
     <TableRow>
diff --git a/src/lib/pages/module-details/components/tables/history/index.tsx b/src/lib/pages/module-details/components/tables/history/index.tsx
index 54c47aa96..698805eae 100644
--- a/src/lib/pages/module-details/components/tables/history/index.tsx
+++ b/src/lib/pages/module-details/components/tables/history/index.tsx
@@ -1,8 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
-import { useCelatoneApp, useMobile } from "lib/app-provider";
-import { Loading } from "lib/components/Loading";
+import { useCelatoneApp } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -12,9 +11,7 @@ import type { Nullable, Option } from "lib/types";
 
 import { PublishedEventsTable } from "./PublishedEventsTable";
 
-const TEMPLATE_COLUMNS = "40px 180px minmax(300px, 1fr) 140px 260px";
-
-interface ModuleTxsTableProps {
+interface ModuleHistoryTableProps {
   moduleId: Option<Nullable<number>>;
   historyCount: Option<number>;
   scrollComponentId?: string;
@@ -28,7 +25,7 @@ export const ModuleHistoryTable = ({
   onViewMore,
   scrollComponentId,
   refetchCount,
-}: ModuleTxsTableProps) => {
+}: ModuleHistoryTableProps) => {
   const { currentChainId } = useCelatoneApp();
 
   const {
@@ -53,7 +50,7 @@ export const ModuleHistoryTable = ({
     error,
   } = useModuleHistoriesByPagination({
     moduleId,
-    pageSize: pageSize + 1,
+    pageSize,
     offset,
   });
 
@@ -69,73 +66,49 @@ export const ModuleHistoryTable = ({
     setCurrentPage(1);
   };
 
-  const isMobile = useMobile();
-
   useEffect(() => {
     if (!onViewMore) setPageSize(10);
     setCurrentPage(1);
   }, [currentChainId, onViewMore, setCurrentPage, setPageSize]);
 
-  if (!moduleId || error)
-    return (
-      <EmptyState
-        withBorder
-        imageVariant="not-found"
-        message="There is an error fetching module published events history."
-      />
-    );
-  if (isLoading)
-    return isMobile ? (
-      <>
-        <Loading />
-        {historyCount && (
-          <Pagination
-            currentPage={currentPage}
-            pagesQuantity={pagesQuantity}
-            offset={offset}
-            totalData={historyCount}
-            pageSize={pageSize}
-            onPageChange={onPageChange}
-            onPageSizeChange={onPageSizeChange}
-            scrollComponentId={scrollComponentId}
-          />
-        )}
-      </>
-    ) : (
-      <Loading withBorder />
-    );
-
-  if (!moduleHistories?.length)
-    return (
-      <EmptyState
-        imageVariant="empty"
-        message="This module does not have any published events yet."
-        withBorder
-      />
-    );
-
   return (
     <>
       <PublishedEventsTable
         moduleHistories={moduleHistories}
-        pageSize={pageSize}
-        templateColumns={TEMPLATE_COLUMNS}
+        isLoading={isLoading}
+        emptyState={
+          !moduleId || error ? (
+            <EmptyState
+              withBorder
+              imageVariant="not-found"
+              message="There is an error fetching module published events history."
+            />
+          ) : (
+            <EmptyState
+              imageVariant="empty"
+              message="This module does not have any published events yet."
+              withBorder
+            />
+          )
+        }
       />
-      {onViewMore && Number(historyCount) > 5 && (
-        <ViewMore onClick={onViewMore} />
-      )}
-      {!onViewMore && historyCount !== undefined && historyCount > 10 && (
-        <Pagination
-          currentPage={currentPage}
-          pagesQuantity={pagesQuantity}
-          offset={offset}
-          totalData={historyCount}
-          pageSize={pageSize}
-          onPageChange={onPageChange}
-          onPageSizeChange={onPageSizeChange}
-          scrollComponentId={scrollComponentId}
-        />
-      )}
+      {!!historyCount &&
+        (onViewMore ? (
+          <ViewMore onClick={onViewMore} />
+        ) : (
+          historyCount > 10 && (
+            <Pagination
+              currentPage={currentPage}
+              pagesQuantity={pagesQuantity}
+              offset={offset}
+              totalData={historyCount}
+              pageSize={pageSize}
+              onPageChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+              scrollComponentId={scrollComponentId}
+            />
+          )
+        ))}
     </>
   );
 };
diff --git a/src/lib/pages/module-details/components/tables/index.ts b/src/lib/pages/module-details/components/tables/index.ts
index 8867dd4c9..56b319d64 100644
--- a/src/lib/pages/module-details/components/tables/index.ts
+++ b/src/lib/pages/module-details/components/tables/index.ts
@@ -1,2 +1,2 @@
 export * from "./history";
-export * from "./txs";
+export * from "./ModuleTxsTable";
diff --git a/src/lib/services/move/moduleService.ts b/src/lib/services/move/moduleService.ts
index 02ba086e4..aa5195192 100644
--- a/src/lib/services/move/moduleService.ts
+++ b/src/lib/services/move/moduleService.ts
@@ -253,20 +253,22 @@ export const useModuleHistoriesByPagination = ({
     return indexerGraphClient
       .request(getModuleHistoriesQueryDocument, {
         moduleId,
-        pageSize,
+        pageSize: pageSize + 1,
         offset,
       })
       .then(({ module_histories }) =>
-        module_histories.map<ModuleHistory>((history, idx) => ({
-          remark: history.remark,
-          upgradePolicy: history.upgrade_policy,
-          height: history.block.height,
-          timestamp: parseDate(history.block.timestamp),
-          previousPolicy:
-            idx === module_histories.length - 1
-              ? undefined
-              : module_histories[idx + 1].upgrade_policy,
-        }))
+        module_histories
+          .map<ModuleHistory>((history, idx) => ({
+            remark: history.remark,
+            upgradePolicy: history.upgrade_policy,
+            height: history.block.height,
+            timestamp: parseDate(history.block.timestamp),
+            previousPolicy:
+              idx === module_histories.length - 1
+                ? undefined
+                : module_histories[idx + 1].upgrade_policy,
+          }))
+          .slice(0, pageSize)
       );
   };
 

From b2c6568d7cf5b73b06e8fb3c877922e1c87fc967 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 21 Nov 2023 15:02:08 +0700
Subject: [PATCH 361/368] fix: handle module viewmore

---
 .../components/tables/ModuleTxsTable.tsx      | 30 +++++++++----------
 .../components/tables/history/index.tsx       | 30 +++++++++----------
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx b/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx
index 30d654f08..0a2409ccb 100644
--- a/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx
+++ b/src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx
@@ -93,22 +93,20 @@ export const ModuleTxsTable = ({
         showRelations={false}
       />
       {!!txCount &&
-        (onViewMore ? (
-          <ViewMore onClick={onViewMore} />
-        ) : (
-          txCount > 10 && (
-            <Pagination
-              currentPage={currentPage}
-              pagesQuantity={pagesQuantity}
-              offset={offset}
-              totalData={txCount}
-              pageSize={pageSize}
-              onPageChange={onPageChange}
-              onPageSizeChange={onPageSizeChange}
-              scrollComponentId={scrollComponentId}
-            />
-          )
-        ))}
+        (onViewMore
+          ? txCount > 5 && <ViewMore onClick={onViewMore} />
+          : txCount > 10 && (
+              <Pagination
+                currentPage={currentPage}
+                pagesQuantity={pagesQuantity}
+                offset={offset}
+                totalData={txCount}
+                pageSize={pageSize}
+                onPageChange={onPageChange}
+                onPageSizeChange={onPageSizeChange}
+                scrollComponentId={scrollComponentId}
+              />
+            ))}
     </>
   );
 };
diff --git a/src/lib/pages/module-details/components/tables/history/index.tsx b/src/lib/pages/module-details/components/tables/history/index.tsx
index 698805eae..1fb6a0b16 100644
--- a/src/lib/pages/module-details/components/tables/history/index.tsx
+++ b/src/lib/pages/module-details/components/tables/history/index.tsx
@@ -93,22 +93,20 @@ export const ModuleHistoryTable = ({
         }
       />
       {!!historyCount &&
-        (onViewMore ? (
-          <ViewMore onClick={onViewMore} />
-        ) : (
-          historyCount > 10 && (
-            <Pagination
-              currentPage={currentPage}
-              pagesQuantity={pagesQuantity}
-              offset={offset}
-              totalData={historyCount}
-              pageSize={pageSize}
-              onPageChange={onPageChange}
-              onPageSizeChange={onPageSizeChange}
-              scrollComponentId={scrollComponentId}
-            />
-          )
-        ))}
+        (onViewMore
+          ? historyCount > 5 && <ViewMore onClick={onViewMore} />
+          : historyCount > 10 && (
+              <Pagination
+                currentPage={currentPage}
+                pagesQuantity={pagesQuantity}
+                offset={offset}
+                totalData={historyCount}
+                pageSize={pageSize}
+                onPageChange={onPageChange}
+                onPageSizeChange={onPageSizeChange}
+                scrollComponentId={scrollComponentId}
+              />
+            ))}
     </>
   );
 };

From 8a26e5d5be7c102ed1960e6b5ff294e22b2f3f17 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 21 Nov 2023 15:43:39 +0700
Subject: [PATCH 362/368] fix: remove check

---
 .../tables/history/PublishedEventsTableMobileCard.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx
index f02032dd3..73d3889ce 100644
--- a/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx
+++ b/src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx
@@ -23,7 +23,7 @@ export const PublishedEventsTableMobileCard = ({
         </Flex>
         <Flex direction="column">
           <MobileLabel label="Remark" />
-          {history.remark && <RemarkRender remark={history.remark} />}
+          <RemarkRender remark={history.remark} />
         </Flex>
       </Flex>
     }

From 95b6d49732b18b77eb598d58d4dd800c37757ebc Mon Sep 17 00:00:00 2001
From: Pakin Rattanasanghirun <pakin@Pakins-MacBook-Air.local>
Date: Tue, 21 Nov 2023 16:39:58 +0700
Subject: [PATCH 363/368] feat(utils): amp contract states

---
 src/lib/amplitude/track-event/index.ts        |   1 +
 .../track-event/trackContractStates.ts        |  13 ++
 src/lib/amplitude/types.ts                    |   9 +-
 src/lib/components/InputWithIcon.tsx          |   4 +-
 src/lib/components/pagination/PageGoTo.tsx    |   9 +-
 src/lib/components/pagination/PageList.tsx    | 138 ++++++++++--------
 .../components/contract-state/index.tsx       |  25 +++-
 src/lib/pages/contract-details/index.tsx      |  11 +-
 8 files changed, 140 insertions(+), 70 deletions(-)
 create mode 100644 src/lib/amplitude/track-event/trackContractStates.ts

diff --git a/src/lib/amplitude/track-event/index.ts b/src/lib/amplitude/track-event/index.ts
index 5281d9158..0c4256926 100644
--- a/src/lib/amplitude/track-event/index.ts
+++ b/src/lib/amplitude/track-event/index.ts
@@ -8,6 +8,7 @@ export const track = (
 
 export * from "./trackAction";
 export * from "./trackComponent";
+export * from "./trackContractStates";
 export * from "./trackExternal";
 export * from "./trackInteraction";
 export * from "./trackToPage";
diff --git a/src/lib/amplitude/track-event/trackContractStates.ts b/src/lib/amplitude/track-event/trackContractStates.ts
new file mode 100644
index 000000000..433eecf78
--- /dev/null
+++ b/src/lib/amplitude/track-event/trackContractStates.ts
@@ -0,0 +1,13 @@
+import { amp } from "../Amplitude";
+import type { AmpEvent } from "../types";
+
+export const trackContractStatesLoad = (
+  event:
+    | AmpEvent.USE_CONTRACT_STATES_LOAD_MORE
+    | AmpEvent.USE_CONTRACT_STATES_DOWNLOAD,
+  properties: {
+    current_states: number;
+    namespaces_count: number;
+    namespaces: string[];
+  }
+) => amp.track(event, properties);
diff --git a/src/lib/amplitude/types.ts b/src/lib/amplitude/types.ts
index 5e880ad29..1a8f9b10e 100644
--- a/src/lib/amplitude/types.ts
+++ b/src/lib/amplitude/types.ts
@@ -117,6 +117,8 @@ export enum AmpEvent {
   USE_FILTER_POOL_TYPE = "Use Filter Pool Types",
   USE_PAGINATION_PAGE_SIZE = "Use Pagination Page Size",
   USE_PAGINATION_NAVIGATION = "Use Pagination Navigation",
+  USE_PAGINATION_PAGE_BUTTON = "Use Pagination Page Button",
+  USE_PAGINATION_GO_TO_PAGE = "Use Pagination Go To Page",
   USE_CREATE_NEW_PROPOSAL = "Use Create New Proposal",
   USE_SORT = "Use Sort",
   USE_VIEW = "Use View",
@@ -124,6 +126,9 @@ export enum AmpEvent {
   USE_SCHEMA_TOGGLE = "Use Schema Toggle",
   USE_JSON_QUERY_AGAIN = "Use Json Query Again",
   USE_TO_YOUR_ACCOUNT = "Use To Your Account",
+  USE_CONTRACT_STATES_LOAD_MORE = "Use Contract States Load More",
+  USE_CONTRACT_STATES_DOWNLOAD = "Use Contract States Download",
+  USE_NAMESPACE_TAB = "Use Namespace Tab",
   // TX
   TX_SUCCEED = "Tx Succeed",
   TX_FAILED = "Tx Failed",
@@ -172,4 +177,6 @@ export type SpecialAmpEvent =
   | AmpEvent.USE_FILTER_POOL_TYPE
   | AmpEvent.USE_SORT
   | AmpEvent.USE_VIEW
-  | AmpEvent.USE_TOGGLE;
+  | AmpEvent.USE_TOGGLE
+  | AmpEvent.USE_CONTRACT_STATES_LOAD_MORE
+  | AmpEvent.USE_CONTRACT_STATES_DOWNLOAD;
diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
index cdb11c2eb..ec864530f 100644
--- a/src/lib/components/InputWithIcon.tsx
+++ b/src/lib/components/InputWithIcon.tsx
@@ -44,7 +44,9 @@ const InputWithIcon = ({
       } !important`}
       onChange={onChange}
       autoFocus={autoFocus}
-      onClick={action ? () => track(AmpEvent.USE_SEARCH_INPUT) : undefined}
+      onClick={
+        action ? () => track(AmpEvent.USE_SEARCH_INPUT, { action }) : undefined
+      }
     />
     {iconPosition === "end" ? (
       <InputRightElement
diff --git a/src/lib/components/pagination/PageGoTo.tsx b/src/lib/components/pagination/PageGoTo.tsx
index f623fa9e9..40619e068 100644
--- a/src/lib/components/pagination/PageGoTo.tsx
+++ b/src/lib/components/pagination/PageGoTo.tsx
@@ -2,6 +2,7 @@ import { Button, Flex, Input, Text } from "@chakra-ui/react";
 import { useState } from "react";
 
 import { CustomIcon } from "../icon";
+import { AmpEvent, track } from "lib/amplitude";
 
 interface PageGoToProps {
   lastPage: number;
@@ -12,7 +13,13 @@ export const PageGoTo = ({ lastPage, onPageChange }: PageGoToProps) => {
   const [newPage, setNewPage] = useState<string>("");
   const handleGoTo = () => {
     const newPageValue = Number(newPage);
-    if (newPageValue) onPageChange(newPageValue);
+    if (newPageValue) {
+      track(AmpEvent.USE_PAGINATION_GO_TO_PAGE, {
+        page: newPageValue,
+        lastPage,
+      });
+      onPageChange(newPageValue);
+    }
   };
 
   return (
diff --git a/src/lib/components/pagination/PageList.tsx b/src/lib/components/pagination/PageList.tsx
index 23ab6dce1..f9f2f7b5b 100644
--- a/src/lib/components/pagination/PageList.tsx
+++ b/src/lib/components/pagination/PageList.tsx
@@ -1,6 +1,8 @@
 import { Flex, Text } from "@chakra-ui/react";
+import { useCallback } from "react";
 
 import { CustomIcon } from "../icon";
+import { AmpEvent, track } from "lib/amplitude";
 
 import { Next } from "./Next";
 import { PageButton } from "./PageButton";
@@ -18,64 +20,78 @@ export const PageList = ({
   currentPage,
   lastPage,
   onPageChange,
-}: PageListProps) => (
-  <Flex align="center" gap={1} justifyContent="center">
-    <Previous pageSize={pageSize} variant="unstyled" display="flex">
-      <CustomIcon name="chevron-left" color="text.dark" />
-    </Previous>
-    {currentPage > 1 && (
-      <>
-        <PageButton
-          pageNumber={1}
-          currentPage={currentPage}
-          onPageChange={onPageChange}
-        />
-        {currentPage > 2 && (
-          <>
-            {currentPage > 3 && (
-              <Text mx="2px" px={2}>
-                ...
-              </Text>
-            )}
-            <PageButton
-              pageNumber={currentPage - 1}
-              currentPage={currentPage}
-              onPageChange={onPageChange}
-            />
-          </>
-        )}
-      </>
-    )}
-    <PageButton
-      pageNumber={currentPage}
-      currentPage={currentPage}
-      onPageChange={onPageChange}
-    />
-    {currentPage < lastPage && (
-      <>
-        {currentPage < lastPage - 1 && (
-          <>
-            <PageButton
-              pageNumber={currentPage + 1}
-              currentPage={currentPage}
-              onPageChange={onPageChange}
-            />
-            {currentPage < lastPage - 2 && (
-              <Text mx="2px" px={2}>
-                ...
-              </Text>
-            )}
-          </>
-        )}
-        <PageButton
-          pageNumber={lastPage}
-          currentPage={currentPage}
-          onPageChange={onPageChange}
-        />
-      </>
-    )}
-    <Next pageSize={pageSize} variant="unstyled" display="flex">
-      <CustomIcon name="chevron-right" color="text.dark" />
-    </Next>
-  </Flex>
-);
+}: PageListProps) => {
+  const handlePageChange = useCallback(
+    (pageNumber: number) => {
+      track(AmpEvent.USE_PAGINATION_PAGE_BUTTON, {
+        page: pageNumber,
+        lastPage,
+        pageSize,
+      });
+      onPageChange(pageNumber);
+    },
+    [lastPage, onPageChange, pageSize]
+  );
+
+  return (
+    <Flex align="center" gap={1} justifyContent="center">
+      <Previous pageSize={pageSize} variant="unstyled" display="flex">
+        <CustomIcon name="chevron-left" color="text.dark" />
+      </Previous>
+      {currentPage > 1 && (
+        <>
+          <PageButton
+            pageNumber={1}
+            currentPage={currentPage}
+            onPageChange={handlePageChange}
+          />
+          {currentPage > 2 && (
+            <>
+              {currentPage > 3 && (
+                <Text mx="2px" px={2}>
+                  ...
+                </Text>
+              )}
+              <PageButton
+                pageNumber={currentPage - 1}
+                currentPage={currentPage}
+                onPageChange={handlePageChange}
+              />
+            </>
+          )}
+        </>
+      )}
+      <PageButton
+        pageNumber={currentPage}
+        currentPage={currentPage}
+        onPageChange={handlePageChange}
+      />
+      {currentPage < lastPage && (
+        <>
+          {currentPage < lastPage - 1 && (
+            <>
+              <PageButton
+                pageNumber={currentPage + 1}
+                currentPage={currentPage}
+                onPageChange={handlePageChange}
+              />
+              {currentPage < lastPage - 2 && (
+                <Text mx="2px" px={2}>
+                  ...
+                </Text>
+              )}
+            </>
+          )}
+          <PageButton
+            pageNumber={lastPage}
+            currentPage={currentPage}
+            onPageChange={handlePageChange}
+          />
+        </>
+      )}
+      <Next pageSize={pageSize} variant="unstyled" display="flex">
+        <CustomIcon name="chevron-right" color="text.dark" />
+      </Next>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index ed323e6a7..ca1bfdd67 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -9,6 +9,7 @@ import {
 import { saveAs } from "file-saver";
 import { useMemo, useState } from "react";
 
+import { AmpEvent, track, trackContractStatesLoad } from "lib/amplitude";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { useContractStates } from "lib/services/contractStateService";
 import type { ContractAddr } from "lib/types";
@@ -98,8 +99,22 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
           isLoading={isFetching || isFetchingNextPage}
           totalData={totalData}
           isCompleted={!hasNextPage}
-          onLoadMore={fetchNextPage}
-          onDownload={handleDownload}
+          onLoadMore={() => {
+            trackContractStatesLoad(AmpEvent.USE_CONTRACT_STATES_LOAD_MORE, {
+              current_states: totalData,
+              namespaces_count: namespaces.length,
+              namespaces,
+            });
+            fetchNextPage();
+          }}
+          onDownload={() => {
+            trackContractStatesLoad(AmpEvent.USE_CONTRACT_STATES_DOWNLOAD, {
+              current_states: totalData,
+              namespaces_count: namespaces.length,
+              namespaces,
+            });
+            handleDownload();
+          }}
         />
       </Flex>
       {!!error && (
@@ -132,7 +147,10 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
             height="28px"
             borderRadius="16px"
             fontWeight={400}
-            onClick={() => setSelectedNamespace(namespace)}
+            onClick={() => {
+              track(AmpEvent.USE_NAMESPACE_TAB, { namespace });
+              setSelectedNamespace(namespace);
+            }}
           >
             {getDisplayName(namespace)}
           </Button>
@@ -147,6 +165,7 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
           const newVal = e.target.value;
           setKeyword(newVal);
         }}
+        action="contract-states-search"
       />
 
       {/* State List */}
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index a62d60008..ca53d3ab8 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -11,7 +11,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 
-import { AmpEvent, track } from "lib/amplitude";
+import { AmpEvent, track, trackUseTab } from "lib/amplitude";
 import {
   useValidateAddress,
   useWasmConfig,
@@ -135,6 +135,7 @@ const ContractDetailsBody = observer(
     const handleTabChange = useCallback(
       (nextTab: TabIndex) => () => {
         if (nextTab === tab) return;
+        trackUseTab(nextTab);
         navigate({
           pathname: "/contracts/[contractAddress]/[tab]",
           query: {
@@ -304,14 +305,18 @@ const ContractDetails = observer(() => {
   useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const { validateContractAddress } = useValidateAddress();
+
   const contractAddressParam = getFirstQueryParam(
     router.query.contractAddress
   ) as ContractAddr;
+  // TODO: fix assertion later
+  const tab = getFirstQueryParam(router.query.tab) as TabIndex;
+
   const contractData = useContractData(contractAddressParam);
 
   useEffect(() => {
-    if (router.isReady) track(AmpEvent.TO_CONTRACT_DETAIL);
-  }, [router.isReady]);
+    if (router.isReady && tab) track(AmpEvent.TO_CONTRACT_DETAIL, { tab });
+  }, [router.isReady, tab]);
 
   if (contractData.isContractDetailLoading) return <Loading withBorder />;
   return (

From 959f77c093bd5ffd77fb8cba6eb96eda00735a7a Mon Sep 17 00:00:00 2001
From: Pakin Rattanasanghirun <pakin@Pakins-MacBook-Air.local>
Date: Tue, 21 Nov 2023 17:47:29 +0700
Subject: [PATCH 364/368] fix: as comments

---
 CHANGELOG.md                                              | 1 +
 src/lib/amplitude/track-event/trackContractStates.ts      | 4 ++--
 .../contract-details/components/contract-state/index.tsx  | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ea493c2f..4aaca92d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#628](https://github.com/alleslabs/celatone-frontend/pull/628) Add Amplitude for contract states, pagination and contract details
 - [#620](https://github.com/alleslabs/celatone-frontend/pull/620) Add hex address in save account feature in initia
 - [#618](https://github.com/alleslabs/celatone-frontend/pull/618) Add save account feature in account detail page
 - [#616](https://github.com/alleslabs/celatone-frontend/pull/616) Add table for saved accounts and add save, remove and edit modal
diff --git a/src/lib/amplitude/track-event/trackContractStates.ts b/src/lib/amplitude/track-event/trackContractStates.ts
index 433eecf78..12167fbad 100644
--- a/src/lib/amplitude/track-event/trackContractStates.ts
+++ b/src/lib/amplitude/track-event/trackContractStates.ts
@@ -6,8 +6,8 @@ export const trackContractStatesLoad = (
     | AmpEvent.USE_CONTRACT_STATES_LOAD_MORE
     | AmpEvent.USE_CONTRACT_STATES_DOWNLOAD,
   properties: {
-    current_states: number;
-    namespaces_count: number;
+    currentStates: number;
+    namespacesCount: number;
     namespaces: string[];
   }
 ) => amp.track(event, properties);
diff --git a/src/lib/pages/contract-details/components/contract-state/index.tsx b/src/lib/pages/contract-details/components/contract-state/index.tsx
index ca1bfdd67..4bfe5c95a 100644
--- a/src/lib/pages/contract-details/components/contract-state/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-state/index.tsx
@@ -101,16 +101,16 @@ export const ContractStates = ({ contractAddress }: ContractStatesProps) => {
           isCompleted={!hasNextPage}
           onLoadMore={() => {
             trackContractStatesLoad(AmpEvent.USE_CONTRACT_STATES_LOAD_MORE, {
-              current_states: totalData,
-              namespaces_count: namespaces.length,
+              currentStates: totalData,
+              namespacesCount: namespaces.length,
               namespaces,
             });
             fetchNextPage();
           }}
           onDownload={() => {
             trackContractStatesLoad(AmpEvent.USE_CONTRACT_STATES_DOWNLOAD, {
-              current_states: totalData,
-              namespaces_count: namespaces.length,
+              currentStates: totalData,
+              namespacesCount: namespaces.length,
               namespaces,
             });
             handleDownload();

From 6897451344a7bc680f4400098104398ab148b8de Mon Sep 17 00:00:00 2001
From: Pakin Rattanasanghirun <pakin@Pakins-MacBook-Air.local>
Date: Tue, 21 Nov 2023 19:22:12 +0700
Subject: [PATCH 365/368] feat(utils): amp save account,to  save code page
 count, and to save contract count

---
 src/lib/amplitude/types.ts                    |  7 +++++
 .../modal/account/EditSavedAccount.tsx        |  6 ++++-
 .../modal/account/RemoveSavedAccount.tsx      |  6 ++++-
 .../modal/account/SaveNewAccount.tsx          | 27 ++++++++-----------
 .../modal/account/ToContractButton.tsx        |  8 +++---
 src/lib/pages/contract-list/slug.tsx          | 25 +++++++++--------
 src/lib/pages/saved-accounts/index.tsx        |  9 ++++++-
 src/lib/pages/saved-codes/index.tsx           |  4 +--
 8 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/src/lib/amplitude/types.ts b/src/lib/amplitude/types.ts
index 1a8f9b10e..3868c4087 100644
--- a/src/lib/amplitude/types.ts
+++ b/src/lib/amplitude/types.ts
@@ -11,6 +11,12 @@ export enum AmpEvent {
   CONTRACT_EDIT_TAGS = "Contract Edit Tags",
   CONTRACT_EDIT_LISTS = "Contract Edit Lists",
   CONTRACT_REMOVE = "Contract Remove",
+  // ACCOUNT
+  ACCOUNT_SAVE = "Account Save",
+  ACCOUNT_EDIT = "Account Edit",
+  ACCOUNT_REMOVE = "Account Remove",
+  ACCOUNT_FILLED_ERROR = "Account Filled Error",
+  ACCOUNT_TO_CONTRACT_BUTTON = "Account To Contract Button",
   // TAG
   TAG_CREATE = "Tag Create",
   // LIST
@@ -36,6 +42,7 @@ export enum AmpEvent {
   TO_ADMIN_UPDATE = "To Admin Update",
   TO_MY_SAVED_CODES = "To My Saved Codes",
   TO_MY_STORED_CODES = "To My Stored Codes",
+  TO_MY_SAVED_ACCOUNTS = "To My Saved Accounts",
   TO_RECENT_CODES = "To Recent Codes",
   TO_RECENT_CONTRACT = "To Recent Contract",
   TO_INSTANTIATED_BY_ME = "To Instantiated By Me",
diff --git a/src/lib/components/modal/account/EditSavedAccount.tsx b/src/lib/components/modal/account/EditSavedAccount.tsx
index 68903b873..79d3e570c 100644
--- a/src/lib/components/modal/account/EditSavedAccount.tsx
+++ b/src/lib/components/modal/account/EditSavedAccount.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
 import { ActionModal } from "../ActionModal";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCelatoneApp } from "lib/app-provider";
 import { ControllerInput, ControllerTextarea } from "lib/components/forms";
 import { useGetMaxLengthError, useHandleAccountSave } from "lib/hooks";
@@ -74,7 +75,10 @@ export const EditSavedAccountModal = ({
       }
       trigger={triggerElement}
       mainBtnTitle="Save"
-      mainAction={handleSave}
+      mainAction={() => {
+        track(AmpEvent.ACCOUNT_EDIT);
+        handleSave();
+      }}
       disabledMain={!!errors.name || !!errors.description}
       otherBtnTitle="Cancel"
       otherAction={resetForm}
diff --git a/src/lib/components/modal/account/RemoveSavedAccount.tsx b/src/lib/components/modal/account/RemoveSavedAccount.tsx
index 335f911a8..58d3abc31 100644
--- a/src/lib/components/modal/account/RemoveSavedAccount.tsx
+++ b/src/lib/components/modal/account/RemoveSavedAccount.tsx
@@ -8,6 +8,7 @@ import {
 import { useCallback } from "react";
 
 import { ActionModal } from "../ActionModal";
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import { useAccountStore } from "lib/providers/store";
 import type { AccountLocalInfo } from "lib/stores/account";
@@ -61,7 +62,10 @@ export function RemoveSavedAccountModal({
       iconColor="error.light"
       mainVariant="error"
       mainBtnTitle="Yes, Remove It"
-      mainAction={handleRemove}
+      mainAction={() => {
+        track(AmpEvent.ACCOUNT_REMOVE);
+        handleRemove();
+      }}
       otherBtnTitle="No, Keep It"
       trigger={trigger}
     >
diff --git a/src/lib/components/modal/account/SaveNewAccount.tsx b/src/lib/components/modal/account/SaveNewAccount.tsx
index e571861ed..6687b8e42 100644
--- a/src/lib/components/modal/account/SaveNewAccount.tsx
+++ b/src/lib/components/modal/account/SaveNewAccount.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { ActionModal } from "../ActionModal";
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCelatoneApp,
   useExampleAddresses,
@@ -85,24 +86,23 @@ export function SaveNewAccountModal({
     });
   };
 
+  const setErrorStatus = (message: string) => {
+    track(AmpEvent.ACCOUNT_FILLED_ERROR, { message });
+    setStatus({ state: "error", message });
+  };
+
   const { refetch } = useAccountType(addressState, {
     enabled: false,
     onSuccess: (type) => {
       if (type !== AccountType.ContractAccount) setStatus(statusSuccess);
       else {
-        setStatus({
-          state: "error",
-          message: "You need to save contract through Contract page.",
-        });
+        setErrorStatus("You need to save contract through Contract page.");
         setIsContract(true);
       }
     },
     onError: (err) => {
       resetForm(false);
-      setStatus({
-        state: "error",
-        message: err.message,
-      });
+      setErrorStatus(err.message);
     },
   });
 
@@ -117,17 +117,11 @@ export function SaveNewAccountModal({
       });
       setIsContract(false);
       if (isAccountSaved(addressState)) {
-        setStatus({
-          state: "error",
-          message: "You already saved this address",
-        });
+        setErrorStatus("You already saved this address");
       } else {
         const timeoutId = setTimeout(() => {
           if (!isSomeValidAddress(addressState))
-            setStatus({
-              state: "error",
-              message: "Invalid Address",
-            });
+            setErrorStatus("Invalid Address");
           else if (wasm.enabled) refetch();
           else setStatus(statusSuccess);
         }, 1000);
@@ -150,6 +144,7 @@ export function SaveNewAccountModal({
     name: nameState,
     description: descriptionState,
     actions: () => {
+      track(AmpEvent.ACCOUNT_SAVE, { isPrefilled: !!accountAddress });
       resetForm();
     },
   });
diff --git a/src/lib/components/modal/account/ToContractButton.tsx b/src/lib/components/modal/account/ToContractButton.tsx
index ca67c7876..47b615d08 100644
--- a/src/lib/components/modal/account/ToContractButton.tsx
+++ b/src/lib/components/modal/account/ToContractButton.tsx
@@ -1,6 +1,7 @@
 import { Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate } from "lib/app-provider";
 
 interface ToContractButtonProps {
@@ -22,7 +23,8 @@ export const ToContractButton = ({
       variant="body3"
       cursor="pointer"
       minW={16}
-      onClick={() =>
+      onClick={() => {
+        track(AmpEvent.ACCOUNT_TO_CONTRACT_BUTTON);
         navigate(
           isAccountPrefilled
             ? { pathname: "/contract-lists/saved-contracts" }
@@ -30,8 +32,8 @@ export const ToContractButton = ({
                 pathname: "/contracts/[contractAddress]",
                 query: { contractAddress: router.query.accountAddress },
               }
-        )
-      }
+        );
+      }}
     >
       Go to {isAccountPrefilled ? "Saved Contracts" : "Contract Details"}
     </Text>
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 55b9be257..cabd9912a 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -61,18 +61,21 @@ const ContractsByList = observer(() => {
 
   useEffect(() => {
     if (router.isReady) {
-      switch (listSlug) {
-        case formatSlugName(INSTANTIATED_LIST_NAME):
-          track(AmpEvent.TO_INSTANTIATED_BY_ME);
-          break;
-        case formatSlugName(SAVED_LIST_NAME):
-          track(AmpEvent.TO_SAVED_CONTRACT);
-          break;
-        default:
-          track(AmpEvent.TO_LIST_OTHERS);
-      }
+      const event = (() => {
+        switch (listSlug) {
+          case formatSlugName(INSTANTIATED_LIST_NAME):
+            return AmpEvent.TO_INSTANTIATED_BY_ME;
+          case formatSlugName(SAVED_LIST_NAME):
+            return AmpEvent.TO_SAVED_CONTRACT;
+          default:
+            return AmpEvent.TO_LIST_OTHERS;
+        }
+      })();
+      track(event, {
+        contractCounts: contractListInfo?.contracts.length ?? 0,
+      });
     }
-  }, [router.isReady, listSlug]);
+  }, [router.isReady, listSlug, contractListInfo?.contracts.length]);
 
   if (!contractListInfo) return null;
 
diff --git a/src/lib/pages/saved-accounts/index.tsx b/src/lib/pages/saved-accounts/index.tsx
index 881c2a2a7..a63d911f8 100644
--- a/src/lib/pages/saved-accounts/index.tsx
+++ b/src/lib/pages/saved-accounts/index.tsx
@@ -1,7 +1,9 @@
 import { Badge, Text, Flex, Heading } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
-import { useMemo, useState } from "react";
+import { useRouter } from "next/router";
+import { useEffect, useMemo, useState } from "react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
 import { AccountZeroState, EmptyState } from "lib/components/state";
@@ -11,6 +13,7 @@ import { useAccountStore } from "lib/providers/store";
 import { SaveAccountButton } from "./components";
 
 const SavedAccounts = observer(() => {
+  const router = useRouter();
   const { getSavedAccounts, isHydrated } = useAccountStore();
   const savedAccounts = getSavedAccounts();
   const accountsCount = savedAccounts.length;
@@ -29,6 +32,10 @@ const SavedAccounts = observer(() => {
     );
   }, [keyword, savedAccounts]);
 
+  useEffect(() => {
+    if (router.isReady) track(AmpEvent.TO_MY_SAVED_ACCOUNTS, { accountsCount });
+  }, [accountsCount, router.isReady]);
+
   return (
     <PageContainer>
       <Flex alignItems="center" justifyContent="space-between" mb={4}>
diff --git a/src/lib/pages/saved-codes/index.tsx b/src/lib/pages/saved-codes/index.tsx
index 036958dc5..def6971f6 100644
--- a/src/lib/pages/saved-codes/index.tsx
+++ b/src/lib/pages/saved-codes/index.tsx
@@ -47,8 +47,8 @@ const SavedCodes = observer(() => {
   const isSearching = !!keyword || permissionValue !== "all";
 
   useEffect(() => {
-    if (router.isReady) track(AmpEvent.TO_MY_SAVED_CODES);
-  }, [router.isReady]);
+    if (router.isReady) track(AmpEvent.TO_MY_SAVED_CODES, { savedCodesCount });
+  }, [router.isReady, savedCodesCount]);
 
   return (
     <PageContainer>

From 508c14ad0707bb8561d59aef2b946d2e6613e58f Mon Sep 17 00:00:00 2001
From: Pakin Rattanasanghirun <pakin@Pakins-MacBook-Air.local>
Date: Tue, 21 Nov 2023 19:39:20 +0700
Subject: [PATCH 366/368] fix(utils): add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4aaca92d7..71f60b93d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#629](https://github.com/alleslabs/celatone-frontend/pull/629) Add Amplitude for save account,to save code page count, and to save contract count
 - [#628](https://github.com/alleslabs/celatone-frontend/pull/628) Add Amplitude for contract states, pagination and contract details
 - [#620](https://github.com/alleslabs/celatone-frontend/pull/620) Add hex address in save account feature in initia
 - [#618](https://github.com/alleslabs/celatone-frontend/pull/618) Add save account feature in account detail page

From a24ee9906e5e9fc9845a921130b860dbac40bdff Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 22 Nov 2023 12:56:11 +0700
Subject: [PATCH 367/368] fix: send count to amp

---
 src/lib/model/code.ts                  | 8 ++++----
 src/lib/pages/contract-list/index.tsx  | 8 +++++---
 src/lib/pages/contract-list/slug.tsx   | 7 +++++--
 src/lib/pages/saved-accounts/index.tsx | 6 ++++--
 src/lib/pages/saved-codes/index.tsx    | 7 +++++--
 src/lib/stores/code.ts                 | 6 +++++-
 6 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/lib/model/code.ts b/src/lib/model/code.ts
index 602dda3c1..54cadbeb4 100644
--- a/src/lib/model/code.ts
+++ b/src/lib/model/code.ts
@@ -86,7 +86,7 @@ export const useCodeData = (codeId: string): CodeDataState => {
 
 const useStoredCodes = () => {
   const { address } = useCurrentChain();
-  const { getCodeLocalInfo, isCodeIdSaved } = useCodeStore();
+  const { getCodeLocalInfo, isCodeIdSaved, isHydrated } = useCodeStore();
 
   const { data: rawStoredCodes, isLoading } = useCodeListByWalletAddress(
     address as HumanAddr
@@ -99,12 +99,12 @@ const useStoredCodes = () => {
       isSaved: isCodeIdSaved(code.id),
     })) ?? [];
 
-  return { storedCodes, isLoading };
+  return { storedCodes, isLoading: isLoading && isHydrated };
 };
 
 const useSavedCodes = () => {
   const userKey = useUserKey();
-  const { lastSavedCodes, lastSavedCodeIds } = useCodeStore();
+  const { lastSavedCodes, lastSavedCodeIds, isHydrated } = useCodeStore();
 
   const savedCodeIds = lastSavedCodeIds(userKey);
   const { data: rawSavedCodes, isLoading } = useCodeListByCodeIds(savedCodeIds);
@@ -125,7 +125,7 @@ const useSavedCodes = () => {
     };
   });
 
-  return { savedCodes, isLoading };
+  return { savedCodes, isLoading: isLoading && isHydrated };
 };
 
 interface MyCodesData {
diff --git a/src/lib/pages/contract-list/index.tsx b/src/lib/pages/contract-list/index.tsx
index f1d646766..2628637cb 100644
--- a/src/lib/pages/contract-list/index.tsx
+++ b/src/lib/pages/contract-list/index.tsx
@@ -16,7 +16,7 @@ const AllContractListsPage = observer(() => {
   useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { getContractLists } = useContractStore();
+  const { getContractLists, isHydrated } = useContractStore();
   const contractLists = [useInstantiatedMockInfoByMe(), ...getContractLists()];
 
   const handleListSelect = (slug: string) => {
@@ -24,8 +24,10 @@ const AllContractListsPage = observer(() => {
   };
 
   useEffect(() => {
-    if (router.isReady) track(AmpEvent.TO_ALL_LISTS);
-  }, [router.isReady]);
+    if (router.isReady && isHydrated)
+      track(AmpEvent.TO_ALL_LISTS, { contractListCount: contractLists.length });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady, isHydrated]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index cabd9912a..22613a40a 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -27,6 +27,8 @@ import { useContractStore } from "lib/providers/store";
 import type { ContractAddr } from "lib/types";
 import { formatSlugName, getFirstQueryParam } from "lib/utils";
 
+// TODO: revisit again
+// eslint-disable-next-line sonarjs/cognitive-complexity
 const ContractsByList = observer(() => {
   useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
@@ -60,7 +62,7 @@ const ContractsByList = observer(() => {
   }, [contractListInfo, isHydrated, navigate]);
 
   useEffect(() => {
-    if (router.isReady) {
+    if (router.isReady && isHydrated) {
       const event = (() => {
         switch (listSlug) {
           case formatSlugName(INSTANTIATED_LIST_NAME):
@@ -75,7 +77,8 @@ const ContractsByList = observer(() => {
         contractCounts: contractListInfo?.contracts.length ?? 0,
       });
     }
-  }, [router.isReady, listSlug, contractListInfo?.contracts.length]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady, listSlug, isHydrated]);
 
   if (!contractListInfo) return null;
 
diff --git a/src/lib/pages/saved-accounts/index.tsx b/src/lib/pages/saved-accounts/index.tsx
index a63d911f8..62f93056c 100644
--- a/src/lib/pages/saved-accounts/index.tsx
+++ b/src/lib/pages/saved-accounts/index.tsx
@@ -33,8 +33,10 @@ const SavedAccounts = observer(() => {
   }, [keyword, savedAccounts]);
 
   useEffect(() => {
-    if (router.isReady) track(AmpEvent.TO_MY_SAVED_ACCOUNTS, { accountsCount });
-  }, [accountsCount, router.isReady]);
+    if (router.isReady && isHydrated)
+      track(AmpEvent.TO_MY_SAVED_ACCOUNTS, { accountsCount });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isHydrated, router.isReady]);
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/saved-codes/index.tsx b/src/lib/pages/saved-codes/index.tsx
index def6971f6..86426447c 100644
--- a/src/lib/pages/saved-codes/index.tsx
+++ b/src/lib/pages/saved-codes/index.tsx
@@ -47,8 +47,11 @@ const SavedCodes = observer(() => {
   const isSearching = !!keyword || permissionValue !== "all";
 
   useEffect(() => {
-    if (router.isReady) track(AmpEvent.TO_MY_SAVED_CODES, { savedCodesCount });
-  }, [router.isReady, savedCodesCount]);
+    if (router.isReady && isSavedCodesLoading) {
+      track(AmpEvent.TO_MY_SAVED_CODES, { savedCodesCount });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady, isSavedCodesLoading]);
 
   return (
     <PageContainer>
diff --git a/src/lib/stores/code.ts b/src/lib/stores/code.ts
index 719cc9ddd..d508f2e5c 100644
--- a/src/lib/stores/code.ts
+++ b/src/lib/stores/code.ts
@@ -1,5 +1,5 @@
 import { makeAutoObservable } from "mobx";
-import { makePersistable } from "mobx-persist-store";
+import { isHydrated, makePersistable } from "mobx-persist-store";
 
 import type { Addr, Dict } from "lib/types";
 
@@ -29,6 +29,10 @@ export class CodeStore {
     });
   }
 
+  get isHydrated(): boolean {
+    return isHydrated(this);
+  }
+
   isCodeUserKeyExist(): boolean {
     return !!this.userKey;
   }

From c18094bf6fbd873aba6f7b3f0697ed72f255240d Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 21 Nov 2023 18:19:15 +0700
Subject: [PATCH 368/368] docs: cut release v1.3.0

---
 CHANGELOG.md | 10 +++++++++-
 package.json |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a848a726f..cd10351a9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#629](https://github.com/alleslabs/celatone-frontend/pull/629) Add Amplitude for save account,to save code page count, and to save contract count
+### Improvements
+
+### Bug fixes
+
+## v1.3.0
+
+### Features
+
+- [#629](https://github.com/alleslabs/celatone-frontend/pull/629) Add Amplitude for save account,to save code page count, and to save
 - [#628](https://github.com/alleslabs/celatone-frontend/pull/628) Add Amplitude for contract states, pagination and contract details
 - [#620](https://github.com/alleslabs/celatone-frontend/pull/620) Add hex address in save account feature in initia
 - [#618](https://github.com/alleslabs/celatone-frontend/pull/618) Add save account feature in account detail page
diff --git a/package.json b/package.json
index 7239d960b..df883c946 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "celatone",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Alles Labs",
   "scripts": {
     "dev": "next dev",