fix icns bech32 prefix searchbar display and schema switch highlight

CHANGELOG.md

@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#496](https://github.com/alleslabs/celatone-frontend/pull/496) Fix icns bech32 prefix searchbar display and schema switch highlight on query page
 - [#499](https://github.com/alleslabs/celatone-frontend/pull/499) Fix sometimes select widget input not full, manual schema upload max lines, and expand/collapse all chevron
 - [#497](https://github.com/alleslabs/celatone-frontend/pull/497) Fix stored codes route and navbar behavior from dev to normal mode
 - [#470](https://github.com/alleslabs/celatone-frontend/pull/470) Fix json schema array field default behavior

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

@@ -2,16 +2,18 @@ import type { BoxProps } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 
+import type { Option } from "lib/types";
+
 import { MessageTabs } from "./MessageInputSwitch";
 
 interface MessageInputContentProps {
-  currentTab: MessageTabs;
+  currentTab: Option<MessageTabs>;
   jsonContent: ReactNode;
   schemaContent: ReactNode;
 }
 
 const resolveTabDisplay = (
-  current: MessageTabs,
+  current: Option<MessageTabs>,
   target: MessageTabs
 ): BoxProps["display"] => {
   return current === target ? "block" : "none";

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

@@ -4,6 +4,7 @@ import { useRef } from "react";
 
 import { Tooltip } from "../Tooltip";
 import { MotionBox } from "lib/components/MotionBox";
+import type { Option } from "lib/types";
 
 export enum MessageTabs {
   JSON_INPUT = "JSON Input",
@@ -14,10 +15,10 @@ export const jsonInputFormKey = MessageTabs.JSON_INPUT as "JSON Input";
 export const yourSchemaInputFormKey = MessageTabs.YOUR_SCHEMA as "Your Schema";
 
 interface MessageInputSwitchProps {
-  currentTab: MessageTabs;
+  currentTab: Option<MessageTabs>;
   disabled?: boolean;
   tooltipLabel?: string;
-  onTabChange: Dispatch<SetStateAction<MessageTabs>>;
+  onTabChange: Dispatch<SetStateAction<Option<MessageTabs>>>;
 }
 
 const tabs = Object.values(MessageTabs);
@@ -29,7 +30,7 @@ export const MessageInputSwitch = ({
   onTabChange,
 }: MessageInputSwitchProps) => {
   const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const activeIndex = tabs.indexOf(currentTab);
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : -1;
   return (
     <Tooltip label={tooltipLabel} isDisabled={!disabled}>
       <div>

src/lib/layout/Searchbar.tsx

@@ -96,6 +96,9 @@ const ResultItem = ({
   onClose,
 }: ResultItemProps) => {
   const route = getRouteOptions(type)?.pathname;
+  const normalizedIcnsValue = value.endsWith(`.${metadata.icns.bech32Prefix}`)
+    ? value
+    : `${value}.${metadata.icns.bech32Prefix}`;
   return (
     <StyledListItem id={`item-${index}`}>
       <Text variant="body2" fontWeight={500} color="text.dark" p={2}>
@@ -126,7 +129,8 @@ const ResultItem = ({
                 </Text>
               </Flex>
               {value !== metadata.icns.address &&
-                value !== metadata.icns.icnsNames?.primary_name && (
+                normalizedIcnsValue !==
+                  metadata.icns.icnsNames?.primary_name && (
                   <Text
                     variant="body3"
                     color="text.dark"
@@ -137,7 +141,7 @@ const ResultItem = ({
                       mr: 1,
                     }}
                   >
-                    {value}
+                    {normalizedIcnsValue}
                   </Text>
                 )}
             </Flex>

src/lib/pages/execute/components/ExecuteArea.tsx

@@ -29,7 +29,7 @@ export const ExecuteArea = ({
   codeHash,
   codeId,
 }: ExecuteAreaProps) => {
-  const [tab, setTab] = useState(MessageTabs.JSON_INPUT);
+  const [tab, setTab] = useState<MessageTabs>();
 
   const { getExecuteSchema, getSchemaByCodeHash } = useSchemaStore();
   const schema = getExecuteSchema(codeHash);

src/lib/pages/instantiate/instantiate.tsx

@@ -100,7 +100,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
   const [simulateError, setSimulateError] = useState("");
   const [processing, setProcessing] = useState(false);
-  const [tab, setTab] = useState(MessageTabs.JSON_INPUT);
+  const [tab, setTab] = useState<MessageTabs>();
   // ------------------------------------------//
   // ----------------FORM HOOKS----------------//
   // ------------------------------------------//
@@ -123,7 +123,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     },
   });
   const { codeId, codeHash, label, adminAddress, msgInput } = watch();
-  const currentInput = msgInput[tab];
+  const currentInput = tab ? msgInput[tab] : "{}";
 
   const {
     control: assetsControl,

src/lib/pages/migrate/components/MigrateContract.tsx

@@ -28,7 +28,7 @@ import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { CodeIdInfoResponse } from "lib/services/code";
 import { useLCDCodeInfo } from "lib/services/codeService";
-import type { ComposedMsg, ContractAddr, HumanAddr } from "lib/types";
+import type { ComposedMsg, ContractAddr, HumanAddr, Option } from "lib/types";
 import { MsgType } from "lib/types";
 import {
   composeMsg,
@@ -43,6 +43,17 @@ interface MigrateContractProps {
   handleBack: () => void;
 }
 
+const resolveEnable = (
+  address: Option<string>,
+  codeId: string,
+  currentInput: string,
+  status: FormStatus
+) =>
+  !!address &&
+  isCodeId(codeId) &&
+  jsonValidate(currentInput) === null &&
+  status.state === "success";
+
 export const MigrateContract = observer(
   ({ contractAddress, codeIdParam, handleBack }: MigrateContractProps) => {
     const { address } = useCurrentChain();
@@ -68,28 +79,24 @@ export const MigrateContract = observer(
     });
 
     const { codeId, codeHash, msgInput } = watch();
-    const [tab, setTab] = useState(MessageTabs.JSON_INPUT);
+    const [tab, setTab] = useState<MessageTabs>();
     const [status, setStatus] = useState<FormStatus>({ state: "init" });
     const [composedTxMsg, setComposedTxMsg] = useState<ComposedMsg[]>([]);
     const [estimatedFee, setEstimatedFee] = useState<StdFee>();
     const [simulateError, setSimulateError] = useState("");
     const [processing, setProcessing] = useState(false);
 
-    const currentInput = msgInput[tab];
+    const currentInput = tab ? msgInput[tab] : "{}";
 
-    const enableMigrate =
-      !!address &&
-      isCodeId(codeId) &&
-      jsonValidate(currentInput) === null &&
-      status.state === "success";
+    const enableMigrate = resolveEnable(address, codeId, currentInput, status);
 
     const { isFetching: isSimulating } = useSimulateFeeQuery({
       enabled: composedTxMsg.length > 0,
       messages: composedTxMsg,
-      onSuccess: (gasRes) => {
-        if (gasRes) setEstimatedFee(fabricateFee(gasRes));
-        else setEstimatedFee(undefined);
-      },
+      onSuccess: (gasRes) =>
+        gasRes
+          ? setEstimatedFee(fabricateFee(gasRes))
+          : setEstimatedFee(undefined),
       onError: (e) => {
         setSimulateError(e.message);
         setEstimatedFee(undefined);

src/lib/pages/query/components/QueryArea.tsx

@@ -26,7 +26,7 @@ export const QueryArea = ({
   codeHash,
   initialMsg,
 }: QueryAreaProps) => {
-  const [tab, setTab] = useState(MessageTabs.JSON_INPUT);
+  const [tab, setTab] = useState<MessageTabs>();
 
   const { getQuerySchema, getSchemaByCodeHash } = useSchemaStore();
   const schema = getQuerySchema(codeHash);

src/lib/services/searchService.ts

@@ -5,6 +5,7 @@ import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
   useCelatoneApp,
+  useCurrentChain,
   useGetAddressType,
 } from "lib/app-provider";
 import type { Addr, ContractAddr, Option } from "lib/types";
@@ -28,7 +29,11 @@ export type SearchResultType =
   | "Pool ID";
 
 export interface ResultMetadata {
-  icns: { icnsNames: Option<ICNSNamesResponse>; address: Option<Addr> };
+  icns: {
+    icnsNames: Option<ICNSNamesResponse>;
+    address: Option<Addr>;
+    bech32Prefix: string;
+  };
 }
 
 // TODO: Add Proposal ID
@@ -51,6 +56,9 @@ export const useSearchHandler = (
     },
   } = useCelatoneApp();
   const lcdEndpoint = useBaseApiRoute("rest");
+  const {
+    chain: { bech32_prefix: bech32Prefix },
+  } = useCurrentChain();
   const getAddressType = useGetAddressType();
   const addressType = getAddressType(debouncedKeyword);
   const { data: txData, isFetching: txFetching } = useTxData(debouncedKeyword);
@@ -125,6 +133,7 @@ export const useSearchHandler = (
       icns: {
         icnsNames,
         address: (isAddr ? debouncedKeyword : icnsAddressData?.address) as Addr,
+        bech32Prefix,
       },
     },
   };