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 01/11] 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 02/11] 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 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 03/11] 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 04/11] 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 05/11] 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 06/11] 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 07/11] 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 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 08/11] 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 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 09/11] 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 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 10/11] 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 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 11/11] 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}