Merge pull request #547 from alleslabs/fix/refetch-module

Fix/abi form

CHANGELOG.md

@@ -117,6 +117,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#547](https://github.com/alleslabs/celatone-frontend/pull/547) Fix form null and sort modules when submit an address
 - [#543](https://github.com/alleslabs/celatone-frontend/pull/543) Fix Initia testnet chain config
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link

src/lib/app-fns/tx/submitProposal.tsx

@@ -8,7 +8,7 @@ import type { Observable } from "rxjs";
 import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
-import type { HumanAddr, TxResultRendering } from "lib/types";
+import type { HumanAddr, Nullable, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { findAttr, formatUFee } from "lib/utils";
 
@@ -20,7 +20,7 @@ interface SubmitWhitelistProposalTxParams {
   fee: StdFee;
   messages: EncodeObject[];
   whitelistNumber: number;
-  amountToVote: string | null;
+  amountToVote: Nullable<string>;
   catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
@@ -109,7 +109,7 @@ interface SubmitStoreCodeProposalTxParams {
   chainName: string;
   wasmFileName: string;
   messages: EncodeObject[];
-  amountToVote: string | null;
+  amountToVote: Nullable<string>;
   catchTxError: CatchTxError;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;

src/lib/app-provider/contexts/nav.tsx

@@ -4,10 +4,11 @@ import { useContext, createContext, useMemo } from "react";
 import { usePreviousPathname } from "../hooks/usePreviousPathname";
 import { StorageKeys } from "lib/data";
 import { useLocalStorage } from "lib/hooks/useLocalStorage";
+import type { Nullable } from "lib/types";
 
 interface NavContextInterface {
   isExpand: boolean;
-  prevPathname: string | null;
+  prevPathname: Nullable<string>;
   setIsExpand: Dispatch<SetStateAction<boolean>>;
 }
 const NavContext = createContext<NavContextInterface>({

src/lib/app-provider/hooks/usePreviousPathname.ts

@@ -1,10 +1,12 @@
 import { useRouter } from "next/router";
 import { useEffect, useRef } from "react";
 
+import type { Nullable } from "lib/types";
+
 export const usePreviousPathname = () => {
   const { pathname } = useRouter();
 
-  const ref = useRef<string | null>(null);
+  const ref = useRef<Nullable<string>>(null);
 
   useEffect(() => {
     ref.current = pathname;

src/lib/app-provider/tx/submitProposal.ts

@@ -8,15 +8,15 @@ import {
   submitStoreCodeProposalTx,
   submitWhitelistProposalTx,
 } from "lib/app-fns/tx/submitProposal";
-import type { HumanAddr } from "lib/types";
+import type { HumanAddr, Nullable } from "lib/types";
 
 import { useCatchTxError } from "./catchTxError";
 
 export interface SubmitWhitelistProposalStreamParams {
   estimatedFee?: StdFee;
   messages: EncodeObject[];
   whitelistNumber: number;
-  amountToVote: string | null;
+  amountToVote: Nullable<string>;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
 }
@@ -61,7 +61,7 @@ export const useSubmitWhitelistProposalTx = () => {
 interface SubmitStoreCodeProposalStreamParams {
   wasmFileName: string;
   messages: EncodeObject[];
-  amountToVote: string | null;
+  amountToVote: Nullable<string>;
   estimatedFee?: StdFee;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;

src/lib/components/ValidatorBadge.tsx

@@ -6,10 +6,10 @@ import { useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
 import { useValidatorImage } from "lib/services/validatorService";
-import type { ValidatorInfo } from "lib/types";
+import type { Nullable, ValidatorInfo } from "lib/types";
 
 interface ValidatorBadgeProps {
-  validator: ValidatorInfo | null;
+  validator: Nullable<ValidatorInfo>;
   badgeSize?: ImageProps["boxSize"];
   ampCopierSection?: string;
   maxWidth?: string;

src/lib/components/abi/args-form/field/ArgFieldWidget.tsx

@@ -2,7 +2,7 @@ import { Input, Textarea } from "@chakra-ui/react";
 import { Select } from "chakra-react-select";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import type { Option } from "lib/types";
+import type { Nullable } from "lib/types";
 
 import { UintTypes } from "./utils";
 
@@ -19,7 +19,7 @@ const boolOptions = [
 
 interface ArgFieldWidgetProps {
   type: string;
-  value: Option<string>;
+  value: Nullable<string>;
   onChange: ControllerRenderProps["onChange"];
 }
 
@@ -36,7 +36,7 @@ export const ArgFieldWidget = ({
     return (
       <Input
         size="md"
-        placeholder={getInputPlaceholder(type, value === undefined)}
+        placeholder={getInputPlaceholder(type, value === null)}
         value={value ?? ""}
         onChange={onChange}
       />

src/lib/components/abi/args-form/field/index.tsx

@@ -55,7 +55,7 @@ export const ArgFieldTemplate = ({
   const isError = isTouched && !!error;
 
   const size = "md";
-  const isNull = value === undefined;
+  const isNull = value === null;
   return (
     <Box>
       <FormControl
@@ -85,8 +85,11 @@ export const ArgFieldTemplate = ({
         <Checkbox
           pt="2px"
           pl={2}
-          isChecked={value === undefined}
-          onChange={(e) => onChange(e.target.checked ? undefined : "")}
+          isChecked={isNull}
+          onChange={(e) => {
+            const newValue = e.target.checked;
+            onChange(newValue ? null : "");
+          }}
         >
           <Text variant="body3">Send as null</Text>
         </Checkbox>

src/lib/components/abi/args-form/field/utils.ts

@@ -17,11 +17,13 @@ const validateUint = (uintType: string) => (v: string) => {
     : `Input must be ‘${uintType}’`;
 };
 const validateBool = (v: string) =>
-  v === "true" || v === "false" ? undefined : "Input must be ‘boolean’";
+  v.toLowerCase() === "true" || v.toLowerCase() === "false"
+    ? undefined
+    : "Input must be ‘boolean’";
 
 const validateAddress =
   (isValidArgAddress: (input: string) => boolean) => (v: string) =>
-    isValidArgAddress(v) ? undefined : "invalid address";
+    isValidArgAddress(v) ? undefined : "Invalid address";
 
 const validateVector = (
   v: string,
@@ -44,10 +46,13 @@ const validateVector = (
   // TODO: handle Vector?
 
   let error: Option<string>;
-  value.split(",").forEach((elementValue) => {
-    const res = validateElement(elementValue);
-    if (res !== undefined) error = `invalid element: ${res}`;
-  });
+  value
+    .slice(1, -1)
+    .split(",")
+    .forEach((elementValue) => {
+      const res = validateElement(elementValue.trim());
+      if (res !== undefined) error = `Invalid element: ${res}`;
+    });
 
   return error;
 };

src/lib/components/abi/args-form/index.tsx

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import type { FormState } from "react-hook-form";
 import { useForm } from "react-hook-form";
 
-import type { AbiFormData, Option } from "lib/types";
+import type { AbiFormData, Nullable } from "lib/types";
 
 import { ArgFieldTemplate } from "./field";
 
@@ -33,7 +33,7 @@ export const ArgsForm = ({
     control,
     getValues,
     formState: { errors },
-  } = useForm<Record<string, Option<string>>>({
+  } = useForm<Record<string, Nullable<string>>>({
     defaultValues: initialData,
     mode: "all",
   });

src/lib/components/forms/FormStatus.tsx

@@ -1,12 +1,13 @@
 import { Spinner, Text } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
+import type { Nullable } from "lib/types";
 
 export type ResponseState = "init" | "loading" | "success" | "error";
 
 export interface FormStatus {
   state: ResponseState;
-  message?: string | null;
+  message?: Nullable<string>;
   messageColor?: string;
 }
 

src/lib/components/json-schema/UploadTemplate.tsx

@@ -18,6 +18,7 @@ import { TextInput } from "lib/components/forms";
 import JsonInput from "lib/components/json/JsonInput";
 import { UploadCard } from "lib/components/upload/UploadCard";
 import { useSchemaStore } from "lib/providers/store";
+import type { Nullable } from "lib/types";
 import { jsonValidate } from "lib/utils";
 
 enum Method {
@@ -26,7 +27,10 @@ enum Method {
   FILL_MANUALLY = "fill-manually",
 }
 
-type JsonState = Record<Method, { schemaString: string; error: string | null }>;
+type JsonState = Record<
+  Method,
+  { schemaString: string; error: Nullable<string> }
+>;
 
 enum ActionType {
   SET_SCHEMA = "set-schema",
@@ -38,7 +42,7 @@ type Action = {
   type: ActionType;
   method: Method;
   schemaString?: string;
-  error?: string | null;
+  error?: Nullable<string>;
 };
 
 const initialJsonState: JsonState = {
@@ -68,7 +72,7 @@ const reducer = (state: JsonState, action: Action): JsonState => {
   }
 };
 
-const validateSchema = (schemaString: string): string | null => {
+const validateSchema = (schemaString: string): Nullable<string> => {
   return (
     jsonValidate(schemaString) ??
     ("instantiate" in JSON.parse(schemaString)

src/lib/components/json-schema/view/ViewSchemaPanel.tsx

@@ -2,11 +2,11 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 import { jsonPrettify } from "lib/utils";
 
 interface ViewSchemaPanelProps {
-  jsonSchema: Option<object | null>;
+  jsonSchema: Option<Nullable<object>>;
   codeId: string;
 }
 

src/lib/components/json/JsonInput.tsx

@@ -3,6 +3,7 @@ import dynamic from "next/dynamic";
 import { useState, useEffect, useMemo } from "react";
 
 import { CustomIcon } from "../icon";
+import type { Nullable } from "lib/types";
 import { jsonLineCount, jsonPrettify, jsonValidate } from "lib/utils";
 
 const JsonEditor = dynamic(() => import("./JsonEditor"), {
@@ -15,7 +16,7 @@ interface JsonInputProps {
   minLines?: number;
   maxLines?: number;
   setText: (value: string) => void;
-  validateFn?: (value: string) => string | null;
+  validateFn?: (value: string) => Nullable<string>;
 }
 
 interface JsonState {

src/lib/components/upload/UploadCard.tsx

@@ -2,7 +2,7 @@ import { Flex, Text } from "@chakra-ui/react";
 import big from "big.js";
 
 import { CustomIcon, UploadIcon } from "lib/components/icon";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 
 type CardTheme = "primary" | "secondary";
 
@@ -13,7 +13,7 @@ interface UploadCardProps {
   deleteFile: () => void;
   theme?: CardTheme;
   status?: Status;
-  statusText?: string | null;
+  statusText?: Nullable<string>;
 }
 
 const getTheme = (theme: CardTheme) => {

src/lib/layout/Searchbar.tsx

@@ -35,7 +35,7 @@ import type {
   SearchResultType,
 } from "lib/services/searchService";
 import { useSearchHandler } from "lib/services/searchService";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 
 const NOT_FOUND_MSG =
   "Matches not found. Please check your spelling or make sure you have selected the correct network.";
@@ -60,7 +60,7 @@ interface ResultItemProps {
 
 const getRouteOptions = (
   type: Option<SearchResultType>
-): { pathname: string; query: string } | null => {
+): Nullable<{ pathname: string; query: string }> => {
   switch (type) {
     case "Wallet Address":
       return {

src/lib/model/account.ts

@@ -8,15 +8,15 @@ import {
 } from "lib/services/contractService";
 import { useProposalsCountByWalletAddress } from "lib/services/proposalService";
 import { useTxsCountByAddress } from "lib/services/txService";
-import type { HumanAddr, Option } from "lib/types";
+import type { HumanAddr, Nullable, Option } from "lib/types";
 
 /**
  * @remark
  * Counts for stored codes, contract admin, contract instances, transactions, and opened proposals tables
  */
 export const useAccountDetailsTableCounts = (
   walletAddress: HumanAddr,
-  accountId: Option<number | null>
+  accountId: Option<Nullable<number>>
 ) => {
   const { data: codesCount, refetch: refetchCodesCount } =
     useCodeListCountByWalletAddress(walletAddress);

src/lib/model/contract.ts

@@ -17,6 +17,7 @@ import type {
   HumanAddr,
   ContractInfo,
   Option,
+  Nullable,
 } from "lib/types";
 import { formatSlugName, getCurrentDate, getDefaultDate } from "lib/utils";
 
@@ -75,7 +76,7 @@ export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
  */
 export const useContractDetailsTableCounts = (
   contractAddress: ContractAddr,
-  contractAccountId: Option<number | null>
+  contractAccountId: Option<Nullable<number>>
 ) => {
   const { data: migrationCount, refetch: refetchMigration } =
     useMigrationHistoriesCountByContractAddress(contractAddress);

src/lib/pages/account-details/components/tables/txs/TxsTable.tsx

@@ -17,14 +17,14 @@ import {
   useTxsByAddressPagination,
   useTxsCountByAddress,
 } from "lib/services/txService";
-import type { Option, Transaction, TxFilters } from "lib/types";
+import type { Nullable, Option, Transaction, TxFilters } from "lib/types";
 
 import { TxsAlert } from "./TxsAlert";
 import { TxsBody } from "./TxsBody";
 import { TxsTop } from "./TxsTop";
 
 interface TxsTableProps {
-  accountId: Option<number | null>;
+  accountId: Option<Nullable<number>>;
   scrollComponentId: string;
   onViewMore?: () => void;
 }

src/lib/pages/code-details/components/json-schema/SchemaPanel.tsx

@@ -1,12 +1,12 @@
 import { UploadSchemaSection } from "lib/components/json-schema";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
-import type { Option } from "lib/types";
+import type { Nullable, Option } from "lib/types";
 import { jsonPrettify } from "lib/utils";
 
 interface SchemaPanelProps {
   codeId: string;
   codeHash: string;
-  schema: Option<object | null>;
+  schema: Option<Nullable<object>>;
 }
 
 export const SchemaPanel = ({ codeId, codeHash, schema }: SchemaPanelProps) =>