Fix/json schema empty state

CHANGELOG.md

@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#538](https://github.com/alleslabs/celatone-frontend/pull/538) Add empty state in query and execute with json schema
 - [#537](https://github.com/alleslabs/celatone-frontend/pull/537) Change json schema select widget null option wording for readability
 - [#535](https://github.com/alleslabs/celatone-frontend/pull/535) Improve json schema features
 - [#531](https://github.com/alleslabs/celatone-frontend/pull/531) Revise developer features and add accordion to sidebar navigation

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

@@ -33,6 +33,7 @@ export const AttachSchemaCard = ({
       align="center"
       p={4}
       w="full"
+      minW="480px"
       borderRadius="4px"
     >
       {!attached ? (

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

@@ -318,7 +318,7 @@ export const UploadTemplate = ({
         <Text variant="body2" color="text.dark">
           Your JSON schema will be
         </Text>
-        <Text variant="body2" color="text.dark" fontWeight={600}>
+        <Text variant="body2" color="text.dark" fontWeight={600} ml={1}>
           stored locally on your device
         </Text>
       </Flex>

src/lib/components/state/StateImage.tsx

@@ -12,12 +12,16 @@ const imageSourceMap: Record<ImageVariant, string> = {
 
 interface StateImageProps {
   imageVariant: ImageVariant;
+  width?: string;
 }
 
-export const StateImage = ({ imageVariant }: StateImageProps) => (
+export const StateImage = ({
+  imageVariant,
+  width = "200px",
+}: StateImageProps) => (
   <Image
     src={imageSourceMap[imageVariant]}
     alt="result not found"
-    width="200px"
+    width={width}
   />
 );

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

@@ -10,6 +10,7 @@ import {
   MessageTabs,
   UploadSchemaSection,
 } from "lib/components/json-schema";
+import { Tooltip } from "lib/components/Tooltip";
 import { useSchemaStore } from "lib/providers/store";
 import type { ContractAddr } from "lib/types";
 
@@ -33,9 +34,9 @@ export const ExecuteArea = observer(
     codeId,
   }: ExecuteAreaProps) => {
     const [tab, setTab] = useState<MessageTabs>();
-    const { getExecuteSchema } = useSchemaStore();
+    const { getExecuteSchema, getSchemaByCodeHash } = useSchemaStore();
     const schema = getExecuteSchema(codeHash);
-
+    const attached = Boolean(getSchemaByCodeHash(codeHash));
     const currentTabIdx = tab ? Object.values(MessageTabs).indexOf(tab) : 0;
 
     useEffect(() => {
@@ -58,7 +59,12 @@ export const ExecuteArea = observer(
               onClick={() => setTab(MessageTabs.YOUR_SCHEMA)}
               isDisabled={!contractAddress}
             >
-              Your Schema
+              <Tooltip
+                label="Please select contract first"
+                isDisabled={Boolean(contractAddress)}
+              >
+                Your Schema
+              </Tooltip>
             </CustomTab>
           </TabList>
         </Tabs>
@@ -72,8 +78,10 @@ export const ExecuteArea = observer(
             />
           }
           schemaContent={
-            codeHash && schema ? (
+            codeHash && attached ? (
               <SchemaExecute
+                codeId={codeId}
+                codeHash={codeHash}
                 schema={schema}
                 contractAddress={contractAddress}
                 initialFunds={initialFunds}
@@ -88,7 +96,7 @@ export const ExecuteArea = observer(
                     <Flex display="inline" textAlign="center">
                       You haven&#39;t attached the JSON Schema for
                       <CustomIcon name="code" mx={1} color="gray.400" />
-                      code {codeId} yet
+                      code {codeId}
                     </Flex>
                     <Flex textAlign="center">
                       from which this contract is instantiated yet.

src/lib/pages/execute/components/schema-execute/index.tsx

@@ -1,36 +1,42 @@
-import { Accordion, Button, Flex } from "@chakra-ui/react";
+import { Accordion, Button, Flex, Text } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
-import { EmptyState } from "lib/components/state";
+import { UploadSchema } from "lib/components/json-schema";
+import { EmptyState, StateImage } from "lib/components/state";
+import { useSchemaStore } from "lib/providers/store";
 import { AmpTrackExpandAll } from "lib/services/amplitude";
 import type { ExecuteSchema } from "lib/stores/schema";
-import type { ContractAddr } from "lib/types";
+import type { ContractAddr, Option } from "lib/types";
 import { getDefaultMsg, resolveInitialMsg } from "lib/utils";
 
 import { ExecuteBox } from "./ExecuteBox";
 
 interface SchemaExecuteProps {
+  schema: Option<ExecuteSchema>;
   contractAddress: ContractAddr;
-  schema: ExecuteSchema;
   initialMsg: string;
   initialFunds: Coin[];
+  codeId: string;
+  codeHash: string;
 }
 
-// TODO: add initialMsg and initialFunds
 export const SchemaExecute = ({
   contractAddress,
   schema,
   initialMsg,
   initialFunds,
+  codeId,
+  codeHash,
 }: SchemaExecuteProps) => {
   // ------------------------------------------//
   // --------------------REF-------------------//
   // ------------------------------------------//
   const accordionRef = useRef<HTMLDivElement>(null);
-
+  const { getSchemaByCodeHash } = useSchemaStore();
+  const fullSchema = getSchemaByCodeHash(codeHash);
   // ------------------------------------------//
   // -------------------STATES-----------------//
   // ------------------------------------------//
@@ -43,7 +49,7 @@ export const SchemaExecute = ({
   const filteredMsgs = useMemo(() => {
     if (!keyword) return schema;
 
-    return schema.filter((msg) => msg.title?.includes(keyword));
+    return schema?.filter((msg) => msg.title?.includes(keyword));
   }, [keyword, schema]);
 
   // ------------------------------------------//
@@ -73,6 +79,39 @@ export const SchemaExecute = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schema, initialMsg, accordionRef.current]);
 
+  if (!schema)
+    return (
+      <Flex
+        p="24px 16px"
+        direction="column"
+        alignItems="center"
+        bgColor="gray.900"
+        borderRadius="8px"
+      >
+        <Flex direction="column" alignItems="center">
+          <StateImage imageVariant="not-found" width="128px" />
+          <Text variant="body1" fontWeight={700} mt={2}>
+            Attached JSON Schema doesn’t have ExecuteMsg
+          </Text>
+          <Text
+            variant="body2"
+            textColor="text.disabled"
+            fontWeight={500}
+            mt={2}
+            mb={4}
+          >
+            Please fill in Execute Message manually or change the schema
+          </Text>
+          <UploadSchema
+            attached
+            schema={fullSchema}
+            codeId={codeId}
+            codeHash={codeHash}
+          />
+        </Flex>
+      </Flex>
+    );
+
   return (
     <>
       <Flex gap={6} mb={6}>

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

@@ -10,6 +10,7 @@ import {
   MessageTabs,
   UploadSchemaSection,
 } from "lib/components/json-schema";
+import { Tooltip } from "lib/components/Tooltip";
 import { useSchemaStore } from "lib/providers/store";
 import type { ContractAddr } from "lib/types";
 
@@ -27,8 +28,9 @@ export const QueryArea = observer(
   ({ contractAddress, codeId, codeHash, initialMsg }: QueryAreaProps) => {
     const [tab, setTab] = useState<MessageTabs>();
 
-    const { getQuerySchema } = useSchemaStore();
+    const { getQuerySchema, getSchemaByCodeHash } = useSchemaStore();
     const schema = getQuerySchema(codeHash);
+    const attached = Boolean(getSchemaByCodeHash(codeHash));
     const isMobile = useMobile();
 
     const currentTabIdx = tab ? Object.values(MessageTabs).indexOf(tab) : 0;
@@ -54,7 +56,12 @@ export const QueryArea = observer(
                 onClick={() => setTab(MessageTabs.YOUR_SCHEMA)}
                 isDisabled={!contractAddress}
               >
-                Your Schema
+                <Tooltip
+                  label="Please select contract first"
+                  isDisabled={Boolean(contractAddress)}
+                >
+                  Your Schema
+                </Tooltip>
               </CustomTab>
             </TabList>
           </Tabs>
@@ -68,8 +75,10 @@ export const QueryArea = observer(
             />
           }
           schemaContent={
-            codeHash && schema ? (
+            codeHash && attached ? (
               <SchemaQuery
+                codeId={codeId}
+                codeHash={codeHash}
                 schema={schema}
                 contractAddress={contractAddress}
                 initialMsg={initialMsg}
@@ -83,7 +92,7 @@ export const QueryArea = observer(
                     <Flex display="inline" textAlign="center">
                       You haven&#39;t attached the JSON Schema for
                       <CustomIcon name="code" mx={1} color="gray.400" />
-                      code {codeId} yet
+                      code {codeId}
                     </Flex>
                     <Flex textAlign="center">
                       from which this contract is instantiated yet.

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

@@ -1,37 +1,42 @@
-import { Accordion, Button, Flex } from "@chakra-ui/react";
+import { Accordion, Button, Flex, Text } from "@chakra-ui/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useBaseApiRoute, useCurrentChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
-import { EmptyState } from "lib/components/state";
-import { useContractStore } from "lib/providers/store";
+import { UploadSchema } from "lib/components/json-schema";
+import { EmptyState, StateImage } from "lib/components/state";
+import { useContractStore, useSchemaStore } from "lib/providers/store";
 import { AmpTrackExpandAll } from "lib/services/amplitude";
 import type { QuerySchema } from "lib/stores/schema";
-import type { ContractAddr } from "lib/types";
+import type { ContractAddr, Option } from "lib/types";
 import { resolveInitialMsg } from "lib/utils";
 
 import { SchemaQueryComponent } from "./SchemaQueryComponent";
 
 interface SchemaQueryProps {
-  schema: QuerySchema;
+  schema: Option<QuerySchema>;
   contractAddress: ContractAddr;
   initialMsg: string;
+  codeId: string;
+  codeHash: string;
 }
 
 export const SchemaQuery = ({
   schema,
   contractAddress,
   initialMsg,
+  codeId,
+  codeHash,
 }: SchemaQueryProps) => {
   const { addActivity } = useContractStore();
   const { address } = useCurrentChain();
   const lcdEndpoint = useBaseApiRoute("rest");
-
+  const { getSchemaByCodeHash } = useSchemaStore();
+  const fullSchema = getSchemaByCodeHash(codeHash);
   const accordionRef = useRef<HTMLDivElement>(null);
   const [keyword, setKeyword] = useState("");
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
-
   const filteredMsgs = useMemo(
     () =>
       schema?.filter((querySchema) => querySchema[0].title?.includes(keyword)),
@@ -62,6 +67,39 @@ export const SchemaQuery = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schema, initialMsg, accordionRef.current]);
 
+  if (!schema)
+    return (
+      <Flex
+        p="24px 16px"
+        direction="column"
+        alignItems="center"
+        bgColor="gray.900"
+        borderRadius="8px"
+      >
+        <Flex direction="column" alignItems="center">
+          <StateImage imageVariant="not-found" width="128px" />
+          <Text variant="body1" fontWeight={700} mt={2}>
+            Attached JSON Schema doesn’t have QueryMsg
+          </Text>
+          <Text
+            variant="body2"
+            textColor="text.disabled"
+            fontWeight={500}
+            mt={2}
+            mb={4}
+          >
+            Please fill in Query Message manually or change the schema
+          </Text>
+          <UploadSchema
+            attached
+            schema={fullSchema}
+            codeId={codeId}
+            codeHash={codeHash}
+          />
+        </Flex>
+      </Flex>
+    );
+
   return (
     <>
       <Flex gap={6} mb={6}>