diff --git a/CHANGELOG.md b/CHANGELOG.md index ea12d3201..6ba5b99a2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/lib/components/json-schema/AttachSchemaCard.tsx b/src/lib/components/json-schema/AttachSchemaCard.tsx index ecaccfb98..6510f91bb 100644 --- a/src/lib/components/json-schema/AttachSchemaCard.tsx +++ b/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 ? ( diff --git a/src/lib/components/json-schema/UploadTemplate.tsx b/src/lib/components/json-schema/UploadTemplate.tsx index 4a0a037e8..d714b673c 100644 --- a/src/lib/components/json-schema/UploadTemplate.tsx +++ b/src/lib/components/json-schema/UploadTemplate.tsx @@ -318,7 +318,7 @@ export const UploadTemplate = ({ Your JSON schema will be - + stored locally on your device diff --git a/src/lib/components/state/StateImage.tsx b/src/lib/components/state/StateImage.tsx index 182f79d78..6095edcec 100644 --- a/src/lib/components/state/StateImage.tsx +++ b/src/lib/components/state/StateImage.tsx @@ -12,12 +12,16 @@ const imageSourceMap: Record = { interface StateImageProps { imageVariant: ImageVariant; + width?: string; } -export const StateImage = ({ imageVariant }: StateImageProps) => ( +export const StateImage = ({ + imageVariant, + width = "200px", +}: StateImageProps) => ( result not found ); diff --git a/src/lib/pages/execute/components/ExecuteArea.tsx b/src/lib/pages/execute/components/ExecuteArea.tsx index 3e0996961..d4dd3754f 100644 --- a/src/lib/pages/execute/components/ExecuteArea.tsx +++ b/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(); - 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 + + Your Schema + @@ -72,8 +78,10 @@ export const ExecuteArea = observer( /> } schemaContent={ - codeHash && schema ? ( + codeHash && attached ? ( You haven't attached the JSON Schema for - code {codeId} yet + code {codeId} from which this contract is instantiated yet. diff --git a/src/lib/pages/execute/components/schema-execute/index.tsx b/src/lib/pages/execute/components/schema-execute/index.tsx index 7eebfc9a1..f0b4f8135 100644 --- a/src/lib/pages/execute/components/schema-execute/index.tsx +++ b/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; 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(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 ( + + + + + Attached JSON Schema doesn’t have ExecuteMsg + + + Please fill in Execute Message manually or change the schema + + + + + ); + return ( <> diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx index 68577726f..9464cc312 100644 --- a/src/lib/pages/query/components/QueryArea.tsx +++ b/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(); - 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 + + Your Schema + @@ -68,8 +75,10 @@ export const QueryArea = observer( /> } schemaContent={ - codeHash && schema ? ( + codeHash && attached ? ( You haven't attached the JSON Schema for - code {codeId} yet + code {codeId} from which this contract is instantiated yet. diff --git a/src/lib/pages/query/components/SchemaQuery.tsx b/src/lib/pages/query/components/SchemaQuery.tsx index 5d187caba..c26a451de 100644 --- a/src/lib/pages/query/components/SchemaQuery.tsx +++ b/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; 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(null); const [keyword, setKeyword] = useState(""); const [expandedIndexes, setExpandedIndexes] = useState([]); - 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 ( + + + + + Attached JSON Schema doesn’t have QueryMsg + + + Please fill in Query Message manually or change the schema + + + + + ); + return ( <>