fix: edit wording, typing, form width

src/lib/components/json-schema/common/AttachSchemaCard.tsx → src/lib/components/json-schema/AttachSchemaCard.tsx

@@ -53,15 +53,9 @@ export const AttachSchemaCard = ({
           </Flex>
           <Flex align="center">
             <ViewSchemaButton codeId={codeId} schema={schema} mr={2} />
-            <IconButton
-              size="sm"
-              variant="gray"
-              aria-label="edit_schema"
-              onClick={openDrawer}
-              icon={
-                <CustomIcon name="edit" color="gray.600" boxSize={4} m={0} />
-              }
-            />
+            <Button variant="outline-gray" size="sm" onClick={openDrawer}>
+              Reattach
+            </Button>
             <IconButton
               size="sm"
               variant="gray"

src/lib/components/json-schema/form/index.tsx

@@ -154,44 +154,49 @@ export const JsonSchemaForm: FC<JsonSchemaFormProps> = ({
   );
 
   return (
-    <Form
-      id={formId}
-      formContext={formContext}
-      formData={formData}
-      schema={schema}
-      // we use no validate because the schemas are too complicated to be auto validated
-      // noValidate
-      uiSchema={{
-        "ui:submitButtonOptions": {
-          norender: true,
-        },
-        ...uiSchema,
-      }}
-      widgets={{
-        ...DefaultWidgets,
-        ...Widgets,
-        ...widgets,
-      }}
-      fields={{
-        ...Fields,
-        ...fields,
-      }}
-      templates={{
-        ...DefaultTemplates,
-        ...Templates,
-        ...templates,
-      }}
-      validator={v8Validator}
-      onChange={({ formData: values }) => {
-        // log.info(values)
-        onChange?.(values);
-      }}
-      onSubmit={({ formData: values }) => {
-        // log.info(values)
-        onSubmit(values);
-      }}
-      onError={() => console.error("errors")}
-    />
+    <Box w="full">
+      <Form
+        id={formId}
+        formContext={formContext}
+        formData={formData}
+        schema={schema}
+        // we use no validate because the schemas are too complicated to be auto validated
+        // noValidate
+        uiSchema={{
+          "ui:submitButtonOptions": {
+            norender: true,
+          },
+          "ui:form": {
+            width: "100%",
+          },
+          ...uiSchema,
+        }}
+        widgets={{
+          ...DefaultWidgets,
+          ...Widgets,
+          ...widgets,
+        }}
+        fields={{
+          ...Fields,
+          ...fields,
+        }}
+        templates={{
+          ...DefaultTemplates,
+          ...Templates,
+          ...templates,
+        }}
+        validator={v8Validator}
+        onChange={({ formData: values }) => {
+          // log.info(values)
+          onChange?.(values);
+        }}
+        onSubmit={({ formData: values }) => {
+          // log.info(values)
+          onSubmit(values);
+        }}
+        onError={() => console.error("errors")}
+      />
+    </Box>
   );
 };
 

src/lib/components/json-schema/index.ts

@@ -0,0 +1,5 @@
+export * from "./AttachSchemaCard";
+export * from "./JsonSchemaDrawer";
+export * from "./UploadTemplate";
+export * from "./ViewSchemaButton";
+export * from "./form";

src/lib/components/select-code/CodeSelect.tsx

@@ -6,16 +6,16 @@ import { PermissionChip } from "../PermissionChip";
 import type { FormStatus } from "lib/components/forms";
 import { UploadIcon } from "lib/components/icon";
 import { useCodeStore } from "lib/providers/store";
-import type { LcdCodeInfoSuccessCallback } from "lib/services/codeService";
-import { useLcdCodeInfo } from "lib/services/codeService";
+import type { LCDCodeInfoSuccessCallback } from "lib/services/codeService";
+import { useLCDCodeInfo } from "lib/services/codeService";
 import { AccessConfigPermission } from "lib/types";
 import { isCodeId } from "lib/utils";
 
 import { CodeSelectDrawerButton } from "./CodeSelectDrawerButton";
 
 interface CodeSelectProps extends Omit<FlexProps, "onSelect"> {
   onCodeSelect: (code: string) => void;
-  setCodeHash?: LcdCodeInfoSuccessCallback;
+  setCodeHash?: LCDCodeInfoSuccessCallback;
   codeId: string;
   status: FormStatus;
 }
@@ -29,7 +29,7 @@ export const CodeSelect = ({
 }: CodeSelectProps) => {
   const { getCodeLocalInfo } = useCodeStore();
   const name = getCodeLocalInfo(Number(codeId))?.name;
-  const { data: codeInfo } = useLcdCodeInfo(codeId, {
+  const { data: codeInfo } = useLCDCodeInfo(codeId, {
     onSuccess: setCodeHash,
     enabled: isCodeId(codeId),
   });

src/lib/components/select-code/CodeSelectSection.tsx

@@ -5,7 +5,7 @@ import type { Control, FieldPath, FieldValues } from "react-hook-form";
 import { ControllerInput } from "lib/components/forms";
 import type { FormStatus } from "lib/components/forms";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { LcdCodeInfoSuccessCallback } from "lib/services/codeService";
+import type { LCDCodeInfoSuccessCallback } from "lib/services/codeService";
 import type { Option } from "lib/types";
 
 import { CodeSelect } from "./CodeSelect";
@@ -16,7 +16,7 @@ interface CodeSelectSectionProps<T extends FieldValues> {
   control: Control<T>;
   error: Option<string>;
   onCodeSelect: (codeId: string) => void;
-  setCodeHash?: LcdCodeInfoSuccessCallback;
+  setCodeHash?: LCDCodeInfoSuccessCallback;
   status: FormStatus;
 }
 

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

@@ -7,12 +7,14 @@ import { MotionBox } from "lib/components/MotionBox";
 interface MessageInputSwitchProps<T> {
   currentTab: T;
   tabs: T[];
+  disabled?: boolean;
   onTabChange: Dispatch<SetStateAction<T>>;
 }
 
 export const MessageInputSwitch = <T extends string>({
   currentTab,
   tabs,
+  disabled = false,
   onTabChange,
 }: MessageInputSwitchProps<T>) => {
   const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -25,6 +27,7 @@ export const MessageInputSwitch = <T extends string>({
       direction="row"
       align="center"
       position="relative"
+      sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
     >
       {tabs.map((tab, idx) => (
         <MotionBox

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

@@ -1,5 +1,5 @@
-import type { BoxProps } from "@chakra-ui/react";
 import { Box, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import type { BoxProps } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
 import Long from "long";
 import { observer } from "mobx-react-lite";
@@ -17,10 +17,11 @@ import type { FormStatus } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
 import JsonInput from "lib/components/json/JsonInput";
 import { CodeSelectSection } from "lib/components/select-code";
+import { Tooltip } from "lib/components/Tooltip";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { LcdCodeInfoSuccessCallback } from "lib/services/codeService";
-import { useLcdCodeInfo } from "lib/services/codeService";
+import type { CodeIdInfoResponse } from "lib/services/code";
+import { useLCDCodeInfo } from "lib/services/codeService";
 import type { ComposedMsg, ContractAddr, HumanAddr } from "lib/types";
 import { MsgType } from "lib/types";
 import { composeMsg, jsonValidate, resolvePermission } from "lib/utils";
@@ -98,7 +99,7 @@ export const MigrateContract = observer(
       },
     });
 
-    const { refetch } = useLcdCodeInfo(codeId, {
+    const { refetch } = useLCDCodeInfo(codeId, {
       enabled: !!address && !!codeId.length,
       retry: false,
       cacheTime: 0,
@@ -151,6 +152,7 @@ export const MigrateContract = observer(
       currentInput,
       estimatedFee,
       broadcast,
+      setProcessing,
     ]);
 
     useEffect(() => {
@@ -196,7 +198,7 @@ export const MigrateContract = observer(
           onCodeSelect={(code: string) => {
             setValue("codeId", code);
           }}
-          setCodeHash={(data: Parameters<LcdCodeInfoSuccessCallback>[0]) => {
+          setCodeHash={(data: CodeIdInfoResponse) => {
             setValue("codeHash", data.code_info.data_hash.toLowerCase());
           }}
           codeId={codeId}
@@ -205,11 +207,19 @@ export const MigrateContract = observer(
           <Heading as="h6" variant="h6">
             Migrate Message
           </Heading>
-          <MessageInputSwitch
-            tabs={Object.values(MessageTabs)}
-            currentTab={tab}
-            onTabChange={setTab}
-          />
+          <Tooltip
+            label="Select or fill code id first"
+            isDisabled={Boolean(codeHash)}
+          >
+            <div>
+              <MessageInputSwitch
+                tabs={Object.values(MessageTabs)}
+                currentTab={tab}
+                onTabChange={setTab}
+                disabled={!codeHash}
+              />
+            </div>
+          </Tooltip>
         </Flex>
         <Box
           sx={{

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

@@ -1,9 +1,11 @@
 import { Button, Flex, Text, useDisclosure } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 
-import { ViewSchemaButton } from "lib/components/json-schema/common";
-import { AttachSchemaCard } from "lib/components/json-schema/common/AttachSchemaCard";
-import { JsonSchemaDrawer } from "lib/components/json-schema/common/JsonSchemaDrawer";
+import {
+  ViewSchemaButton,
+  AttachSchemaCard,
+  JsonSchemaDrawer,
+} from "lib/components/json-schema/";
 import { JsonSchemaForm } from "lib/components/json-schema/form";
 import { useSchemaStore } from "lib/providers/store";
 
@@ -36,7 +38,7 @@ export const SchemaSection = observer(
               <Flex gap={3}>
                 <ViewSchemaButton schema={jsonSchema} codeId={codeId} />
                 <Button variant="outline-gray" size="sm" onClick={onOpen}>
-                  Edit
+                  Reattach
                 </Button>
               </Flex>
             </Flex>

src/lib/pages/upload/components/UploadSchema.tsx

@@ -1,7 +1,6 @@
 import { useDisclosure } from "@chakra-ui/react";
 
-import { AttachSchemaCard } from "lib/components/json-schema/common/AttachSchemaCard";
-import { JsonSchemaDrawer } from "lib/components/json-schema/common/JsonSchemaDrawer";
+import { AttachSchemaCard, JsonSchemaDrawer } from "lib/components/json-schema";
 import type { CodeSchema } from "lib/stores/schema";
 import type { Option } from "lib/types";
 

src/lib/services/codeService.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/no-identical-functions */
-import type { UseQueryResult } from "@tanstack/react-query";
+import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
@@ -273,11 +273,11 @@ export const useCodeListCountByWalletAddress = (
   );
 };
 
-export type LcdCodeInfoSuccessCallback = (data: CodeIdInfoResponse) => void;
+export type LCDCodeInfoSuccessCallback = (data: CodeIdInfoResponse) => void;
 
-export const useLcdCodeInfo = (
+export const useLCDCodeInfo = (
   codeId: string,
-  options?: Parameters<typeof useQuery<CodeIdInfoResponse>>[2]
+  options?: Omit<UseQueryOptions<CodeIdInfoResponse>, "queryKey">
 ): UseQueryResult<CodeIdInfoResponse> => {
   const lcdEndpoint = useBaseApiRoute("rest");
   const queryFn = async () => getCodeIdInfo(lcdEndpoint, codeId);