fix: conflict

CHANGELOG.md

@@ -38,7 +38,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Features
-
+- [#44](https://github.com/alleslabs/celatone-frontend/pull/44) Render query cmds shortcut in contract detail page
+- [#38](https://github.com/alleslabs/celatone-frontend/pull/38) Show execute msg cmds when wallet is not connected
 - [#49](https://github.com/alleslabs/celatone-frontend/pull/49) Add `develop` branch to `main.yml`
 - [#39](https://github.com/alleslabs/celatone-frontend/pull/39) Render "Me" instead of user address
 - [#43](https://github.com/alleslabs/celatone-frontend/pull/43) Add code details page ui skeleton
@@ -48,6 +49,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#50](https://github.com/alleslabs/celatone-frontend/pull/50) Refactor offchain component to use react-form and remove redundant offchain components, and refactor edit contract details modal
+
 ### Bug fixes
 
 - [#42](https://github.com/alleslabs/celatone-frontend/pull/42) Properly show CTAs on contract-list page and edit zero/disconnected state

package.json

@@ -26,6 +26,7 @@
     "@chakra-ui/react": "^2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
     "@cosmjs/cosmwasm-stargate": "^0.29.3",
+    "@cosmjs/proto-signing": "^0.29.5",
     "@cosmjs/stargate": "^0.29.3",
     "@cosmos-kit/core": "^0.20.0",
     "@cosmos-kit/keplr": "^0.20.0",

src/env.ts

@@ -54,3 +54,5 @@ export const CELATONE_CONSTANTS: CelatoneConstants = {
   maxFileSize: MAX_FILE_SIZE,
   msgTypeUrl: MSG_TYPE_URL,
 };
+
+export const DUMMY_MNEMONIC = process.env.NEXT_PUBLIC_DUMMY_MNEMONIC;

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

@@ -2,3 +2,4 @@ export * from "./useFabricateFee";
 export * from "./useSimulateFee";
 export * from "./useRestrictedInput";
 export * from "./useCelatoneApp";
+export * from "./useQueryCmds";

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

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { useState } from "react";
+
+import { useEndpoint } from "lib/hooks";
+import { queryData } from "lib/services/contract";
+import type { ContractAddr, RpcQueryError } from "lib/types";
+
+interface UseQueryCmdsProps {
+  contractAddress: ContractAddr;
+}
+export const useQueryCmds = ({ contractAddress }: UseQueryCmdsProps) => {
+  const [queryCmds, setQueryCmds] = useState<[string, string][]>([]);
+  const endpoint = useEndpoint();
+
+  const { isFetching } = useQuery(
+    ["query", "cmds", endpoint, contractAddress, '{"": {}}'],
+    async () =>
+      queryData(endpoint, contractAddress as ContractAddr, '{"": {}}'),
+    {
+      enabled: !!contractAddress,
+      retry: false,
+      cacheTime: 0,
+      refetchOnWindowFocus: false,
+      onError: (e: AxiosError<RpcQueryError>) => {
+        const cmds: string[] = [];
+        Array.from(e.response?.data.message?.matchAll(/`(.*?)`/g) || [])
+          .slice(1)
+          .forEach((match) => cmds.push(match[1]));
+        setQueryCmds(cmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
+      },
+    }
+  );
+  return { isFetching, queryCmds };
+};

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

@@ -16,7 +16,7 @@ export const useSimulateFee = () => {
       const client = await getCosmWasmClient();
       if (!client || !address) {
         setLoading(false);
-        return Promise.resolve(undefined);
+        return undefined;
       }
       try {
         const fee = (await client.simulate(address, messages, memo)) as Gas;

src/lib/app-provider/index.ts

@@ -1,3 +1,4 @@
 export * from "./hooks";
 export * from "./tx";
 export * from "./contexts";
+export * from "./queries";

src/lib/app-provider/queries/simulateFee.ts

@@ -1,6 +1,8 @@
+import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
+import { useDummyWallet } from "lib/hooks";
 import type { ComposedMsg, Gas } from "lib/types";
 
 interface SimulateQueryParams {
@@ -16,21 +18,35 @@ export const useSimulateFeeQuery = ({
   onSuccess,
   onError,
 }: SimulateQueryParams) => {
-  const { address, getCosmWasmClient, currentChainName } = useWallet();
+  const { address, getCosmWasmClient, currentChainName, currentChainRecord } =
+    useWallet();
+  const { dummyWallet, dummyAddress } = useDummyWallet();
+
+  const userAddress = address || dummyAddress;
+
   const simulateFn = async (msgs: ComposedMsg[]) => {
-    const client = await getCosmWasmClient();
-    if (!client || !address) {
-      return Promise.resolve(undefined);
+    let client = await getCosmWasmClient();
+    if (!currentChainRecord?.preferredEndpoints?.rpc?.[0] || !userAddress) {
+      return undefined;
+    }
+
+    if (!client && !address && dummyWallet) {
+      client = await SigningCosmWasmClient.connectWithSigner(
+        currentChainRecord.preferredEndpoints.rpc[0],
+        dummyWallet
+      );
     }
-    return (await client.simulate(address, msgs, undefined)) as Gas;
+
+    if (!client) {
+      return undefined;
+    }
+
+    return (await client.simulate(userAddress, msgs, undefined)) as Gas;
   };
 
-  // TODO: make this as query key constant
   return useQuery({
-    queryKey: ["simulate", currentChainName, address, messages],
-    queryFn: async ({ queryKey }) => {
-      return simulateFn(queryKey[3] as ComposedMsg[]);
-    },
+    queryKey: ["simulate", currentChainName, userAddress, messages],
+    queryFn: async ({ queryKey }) => simulateFn(queryKey[3] as ComposedMsg[]),
     enabled,
     keepPreviousData: true,
     retry: false,

src/lib/components/ContractCmdButton.tsx

@@ -2,10 +2,12 @@ import { Button } from "@chakra-ui/react";
 
 interface ContractCmdButtonProps {
   cmd: string;
-  msg: string;
-  setMsg: (msg: string) => void;
+  onClickCmd: () => void;
 }
-const ContractCmdButton = ({ cmd, msg, setMsg }: ContractCmdButtonProps) => {
+export const ContractCmdButton = ({
+  cmd,
+  onClickCmd,
+}: ContractCmdButtonProps) => {
   return (
     <Button
       variant="outline-gray"
@@ -16,13 +18,9 @@ const ContractCmdButton = ({ cmd, msg, setMsg }: ContractCmdButtonProps) => {
       borderColor="rgba(255, 255, 255, 0.3)"
       borderRadius="16px"
       fontWeight="400"
-      onClick={() => {
-        setMsg(msg);
-      }}
+      onClick={onClickCmd}
     >
       {cmd}
     </Button>
   );
 };
-
-export default ContractCmdButton;

src/lib/components/OffChainForm.tsx

@@ -0,0 +1,93 @@
+import { VStack } from "@chakra-ui/react";
+import type { Control, FieldErrorsImpl, FieldPath } from "react-hook-form";
+
+import {
+  ControllerInput,
+  ListSelection,
+  TagSelection,
+  ControllerTextarea,
+} from "lib/components/forms";
+import {
+  getMaxContractDescriptionLengthError,
+  getMaxContractNameLengthError,
+  MAX_CONTRACT_DESCRIPTION_LENGTH,
+  MAX_CONTRACT_NAME_LENGTH,
+} from "lib/data";
+import type { Option } from "lib/types";
+
+export interface OffchainDetail {
+  name: string;
+  description: string;
+  tags: string[];
+  lists: Option[];
+}
+
+interface OffChainFormProps<T extends OffchainDetail> {
+  // TODO: find a way to remove nameField and descriptionField
+  nameField: FieldPath<T>;
+  descriptionField: FieldPath<T>;
+  state: OffchainDetail;
+  control: Control<T>;
+  setTagsValue: (options: string[]) => void;
+  setContractListsValue: (options: Option[]) => void;
+  errors: Partial<FieldErrorsImpl<T>>;
+  labelBgColor?: string;
+}
+
+export const OffChainForm = <T extends OffchainDetail>({
+  nameField,
+  descriptionField,
+  state,
+  control,
+  setTagsValue,
+  setContractListsValue,
+  errors,
+  labelBgColor = "background.main",
+}: OffChainFormProps<T>) => {
+  return (
+    <VStack gap="16px" w="full">
+      <ControllerInput
+        name={nameField}
+        control={control}
+        label="Name"
+        helperText="Set name for your contract"
+        variant="floating"
+        rules={{
+          maxLength: MAX_CONTRACT_NAME_LENGTH,
+        }}
+        error={errors.name && getMaxContractNameLengthError(state.name.length)}
+        labelBgColor={labelBgColor}
+      />
+      <ControllerTextarea
+        name={descriptionField}
+        control={control}
+        label="Description"
+        helperText="Help understanding what this contract do and how it works"
+        variant="floating"
+        rules={{
+          maxLength: MAX_CONTRACT_DESCRIPTION_LENGTH,
+        }}
+        error={
+          errors.description &&
+          getMaxContractDescriptionLengthError(state.description.length)
+        }
+        labelBgColor={labelBgColor}
+      />
+      <TagSelection
+        result={state.tags}
+        placeholder="Tags"
+        helperText="Add tag to organize and manage your contracts"
+        setResult={setTagsValue}
+        labelBgColor={labelBgColor}
+      />
+      <ListSelection
+        result={state.lists}
+        placeholder="Add to contract lists"
+        helperText="Grouping your contracts by adding to your existing list or create
+              a new list"
+        setResult={setContractListsValue}
+        labelBgColor={labelBgColor}
+      />
+    </VStack>
+  );
+};

src/lib/components/forms/ControllerInput.tsx

@@ -14,13 +14,16 @@ import type {
 } from "react-hook-form";
 import { useWatch, useController } from "react-hook-form";
 
+import type { FormStatus } from "./FormStatus";
+import { getResponseMsg } from "./FormStatus";
 import type { TextInputProps } from "./TextInput";
 
 interface ControllerInputProps<T extends FieldValues>
   extends Omit<TextInputProps, "value" | "setInputState"> {
   name: FieldPath<T>;
   control: Control<T>;
   rules?: UseControllerProps["rules"];
+  status?: FormStatus;
 }
 
 export const ControllerInput = <T extends FieldValues>({
@@ -34,6 +37,7 @@ export const ControllerInput = <T extends FieldValues>({
   size = "lg",
   type = "text",
   rules = {},
+  status,
   ...componentProps
 }: ControllerInputProps<T>) => {
   const watcher = useWatch({
@@ -71,11 +75,16 @@ export const ControllerInput = <T extends FieldValues>({
         value={watcher}
         onChange={field.onChange}
       />
+      {/* TODO: add status */}
       {isError ? (
         <FormErrorMessage className="error-text">{error}</FormErrorMessage>
       ) : (
         <FormHelperText className="helper-text">
-          <Text color="text.dark">{helperText}</Text>
+          {status?.message ? (
+            getResponseMsg(status, helperText)
+          ) : (
+            <Text color="text.dark">{helperText}</Text>
+          )}
         </FormHelperText>
       )}
     </FormControl>

src/lib/components/forms/ControllerTextarea.tsx

@@ -12,7 +12,7 @@ import type {
   FieldValues,
   UseControllerProps,
 } from "react-hook-form";
-import { useController } from "react-hook-form";
+import { useWatch, useController } from "react-hook-form";
 
 import type { TextAreaProps } from "./TextAreaInput";
 
@@ -34,6 +34,11 @@ export const ControllerTextarea = <T extends FieldValues>({
   rules = {},
   ...componentProps
 }: ControllerTextareaProps<T>) => {
+  const watcher = useWatch({
+    name,
+    control,
+  });
+
   const { field } = useController({ name, control, rules });
 
   const isError = !!error;
@@ -54,7 +59,12 @@ export const ControllerTextarea = <T extends FieldValues>({
           {label}
         </FormLabel>
       )}
-      <Textarea resize="none" placeholder={placeholder} />
+      <Textarea
+        resize="none"
+        placeholder={placeholder}
+        value={watcher}
+        onChange={field.onChange}
+      />
       {isError ? (
         <FormErrorMessage className="error-text">{error}</FormErrorMessage>
       ) : (

src/lib/components/forms/ListSelection.tsx

@@ -46,7 +46,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
       setResult,
       placeholder,
       helperText,
-      labelBgColor = "gray.800",
+      labelBgColor = "background.main",
       ...rest
     }: ListSelectionProps,
     ref