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 1/5] 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 2/5] 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 3/5] 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 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 4/5] 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 5/5] 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]),