From a92356f094a28660f401dc59dd93d3a13a364072 Mon Sep 17 00:00:00 2001 From: Kanisorn Peach Date: Tue, 17 Oct 2023 15:47:46 +0700 Subject: [PATCH] Merge pull request #575 from alleslabs/fix/suggestion-msg-sylvia feat: support contract from Sylvia --- CHANGELOG.md | 1 + src/lib/hooks/useExecuteCmds.ts | 20 +- src/lib/hooks/useQueryCmds.ts | 18 +- src/lib/layout/navbar/index.tsx | 237 +++++++++--------- .../components/CommandSection.tsx | 116 +++++---- 5 files changed, 212 insertions(+), 180 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 62d3b5aa7..fe5c56f16 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -72,6 +72,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#575](https://github.com/alleslabs/celatone-frontend/pull/575) Support message suggestion for contract from Sylvia framework - [#564](https://github.com/alleslabs/celatone-frontend/pull/564) Update cosmjs version to latest and bump terra testnet gas price - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure diff --git a/src/lib/hooks/useExecuteCmds.ts b/src/lib/hooks/useExecuteCmds.ts index 4ca91b76e..2ce3ed65a 100644 --- a/src/lib/hooks/useExecuteCmds.ts +++ b/src/lib/hooks/useExecuteCmds.ts @@ -26,16 +26,26 @@ export const useExecuteCmds = (contractAddress: ContractAddr) => { ], retry: false, onError: (e) => { - if (e.message.includes("contract: ")) { - setExecCmds([]); + const executeCmds: string[] = []; + + // Check if Sylvia framework + const sylviaRegex = + /Messages supported by this contract: (.*?): execute wasm contract failed: invalid request/; + const contentMatch = e.message?.match(sylviaRegex); + + if (contentMatch && contentMatch[1]) { + const content = contentMatch[1].split(","); + content.forEach((each) => executeCmds.push(each.trim())); } else if (e.message.includes("Error parsing into type")) { - const executeCmds: string[] = []; Array.from(e.message?.matchAll(/`(.*?)`/g) || []) .slice(1) .forEach((match) => executeCmds.push(match[1])); - setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`])); - } else { + } + + if (executeCmds.length === 0) { setExecCmds([["", "{}"]]); + } else { + setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`])); } }, }); diff --git a/src/lib/hooks/useQueryCmds.ts b/src/lib/hooks/useQueryCmds.ts index dc46d26a7..4e7425b8c 100644 --- a/src/lib/hooks/useQueryCmds.ts +++ b/src/lib/hooks/useQueryCmds.ts @@ -32,9 +32,21 @@ export const useQueryCmds = (contractAddress: ContractAddr) => { refetchOnWindowFocus: false, onError: (e: AxiosError) => { const cmds: string[] = []; - Array.from(e.response?.data.message?.matchAll(/`(.*?)`/g) || []) - .slice(1) - .forEach((match) => cmds.push(match[1])); + const resMsg = e.response?.data.message; + + // Check if Sylvia framework + const sylviaRegex = + /Messages supported by this contract: (.*?): query wasm contract failed: invalid request/; + const contentMatch = resMsg?.match(sylviaRegex); + + if (contentMatch && contentMatch[1]) { + const content = contentMatch[1].split(","); + content.forEach((each) => cmds.push(each.trim())); + } else { + Array.from(resMsg?.matchAll(/`(.*?)`/g) || []) + .slice(1) + .forEach((match) => cmds.push(match[1])); + } setQueryCmds(cmds.map((cmd) => [cmd, `{"${cmd}": {}}`])); }, } diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx index c9ad548a2..4a3dd4630 100644 --- a/src/lib/layout/navbar/index.tsx +++ b/src/lib/layout/navbar/index.tsx @@ -1,6 +1,6 @@ import { Flex } from "@chakra-ui/react"; import { observer } from "mobx-react-lite"; -import { useMemo, type Dispatch, type SetStateAction } from "react"; +import { type Dispatch, type SetStateAction } from "react"; import { AmpEvent, useTrack } from "lib/amplitude"; import { @@ -32,133 +32,122 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => { const { address } = useCurrentChain(); - const navMenu: MenuInfo[] = useMemo( - () => [ - { - category: "Your Account", - slug: "your-account", - submenu: [ + const navMenu: MenuInfo[] = [ + { + category: "Your Account", + slug: "your-account", + submenu: [ + { + name: "Past Transactions", + slug: "/past-txs", + icon: "history" as IconKeys, + }, + { + name: "Your Account Details", + slug: `/accounts/${address}`, + icon: "admin" as IconKeys, + isDisable: !address, + tooltipText: + "You need to connect wallet to view your account details.", + trackEvent: () => track(AmpEvent.USE_TO_YOUR_ACCOUNT), + }, + ], + }, + ...(publicProject.enabled + ? [ { - name: "Past Transactions", - slug: "/past-txs", - icon: "history" as IconKeys, + category: "Public Projects", + slug: StorageKeys.ProjectSidebar, + submenu: [ + ...getSavedPublicProjects().map((list) => ({ + name: list.name, + slug: `/projects/${list.slug}`, + logo: list.logo as IconKeys, + })), + { + name: "View All Projects", + slug: "/projects", + icon: "public-project" as IconKeys, + }, + ], }, + ] + : []), + ...(wasm.enabled + ? [ { - name: "Your Account Details", - slug: `/accounts/${address}`, - icon: "admin" as IconKeys, - isDisable: !address, - tooltipText: - "You need to connect wallet to view your account details.", - trackEvent: () => track(AmpEvent.USE_TO_YOUR_ACCOUNT), + category: "Developer Tools", + slug: StorageKeys.DevSidebar, + submenu: [ + { + name: "Deploy Contract", + slug: "/deploy", + icon: "add-new" as IconKeys, + }, + { + name: "Query", + slug: "/query", + icon: "query" as IconKeys, + }, + { + name: "Execute", + slug: "/execute", + icon: "execute" as IconKeys, + }, + { + name: "Migrate", + slug: "/migrate", + icon: "migrate" as IconKeys, + }, + // { + // name: "Recent Activities", + // slug: "/", + // icon: "list" as IconKeys, + // }, + ], + subSection: [ + { + category: "This Wallet", + submenu: [ + { + name: "My Stored Codes", + slug: "/stored-codes", + icon: "code" as IconKeys, + }, + { + name: INSTANTIATED_LIST_NAME, + slug: `/contract-lists/${formatSlugName( + INSTANTIATED_LIST_NAME + )}`, + icon: getListIcon(INSTANTIATED_LIST_NAME), + }, + ], + }, + { + category: "This Device", + submenu: [ + { + name: "Saved Codes", + slug: "/saved-codes", + icon: "code" as IconKeys, + }, + { + name: SAVED_LIST_NAME, + slug: `/contract-lists/${formatSlugName(SAVED_LIST_NAME)}`, + icon: "contract-address" as IconKeys, + }, + { + name: "View All Contract List", + slug: "/contract-lists", + icon: "more" as IconKeys, + }, + ], + }, + ], }, - ], - }, - ...(publicProject.enabled - ? [ - { - category: "Public Projects", - slug: StorageKeys.ProjectSidebar, - submenu: [ - ...getSavedPublicProjects().map((list) => ({ - name: list.name, - slug: `/projects/${list.slug}`, - logo: list.logo as IconKeys, - })), - { - name: "View All Projects", - slug: "/projects", - icon: "public-project" as IconKeys, - }, - ], - }, - ] - : []), - ...(wasm.enabled - ? [ - { - category: "Developer Tools", - slug: StorageKeys.DevSidebar, - submenu: [ - { - name: "Deploy Contract", - slug: "/deploy", - icon: "add-new" as IconKeys, - }, - { - name: "Query", - slug: "/query", - icon: "query" as IconKeys, - }, - { - name: "Execute", - slug: "/execute", - icon: "execute" as IconKeys, - }, - { - name: "Migrate", - slug: "/migrate", - icon: "migrate" as IconKeys, - }, - // { - // name: "Recent Activities", - // slug: "/", - // icon: "list" as IconKeys, - // }, - ], - subSection: [ - { - category: "This Wallet", - submenu: [ - { - name: "My Stored Codes", - slug: "/stored-codes", - icon: "code" as IconKeys, - }, - { - name: INSTANTIATED_LIST_NAME, - slug: `/contract-lists/${formatSlugName( - INSTANTIATED_LIST_NAME - )}`, - icon: getListIcon(INSTANTIATED_LIST_NAME), - }, - ], - }, - { - category: "This Device", - submenu: [ - { - name: "Saved Codes", - slug: "/saved-codes", - icon: "code" as IconKeys, - }, - { - name: SAVED_LIST_NAME, - slug: `/contract-lists/${formatSlugName( - SAVED_LIST_NAME - )}`, - icon: "contract-address" as IconKeys, - }, - { - name: "View All Contract List", - slug: "/contract-lists", - icon: "more" as IconKeys, - }, - ], - }, - ], - }, - ] - : []), - ], - [ - address, - getSavedPublicProjects, - publicProject.enabled, - track, - wasm.enabled, - ] - ); + ] + : []), + ]; return ( diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx index 34a9907f8..af1f5e16f 100644 --- a/src/lib/pages/contract-details/components/CommandSection.tsx +++ b/src/lib/pages/contract-details/components/CommandSection.tsx @@ -24,15 +24,70 @@ import { useSchemaStore } from "lib/providers/store"; import type { ContractAddr } from "lib/types"; import { encode, jsonPrettify } from "lib/utils"; +interface RenderCmdsProps { + isFetching: boolean; + cmds: [string, string][]; + contractAddress: ContractAddr; + type: string; +} + interface CommandSectionProps { contractAddress: ContractAddr; codeHash: string; codeId: string; } +const RenderCmds = ({ + isFetching, + cmds, + contractAddress, + type, +}: RenderCmdsProps) => { + const navigate = useInternalNavigate(); + + if (isFetching) { + return ; + } + if (cmds.length) { + return ( + button": { + marginInlineStart: "0 !important", + marginInlineEnd: "1", + }, + }} + > + {cmds.sort().map(([cmd, msg]) => ( + { + navigate({ + pathname: `/${type}`, + query: { + contract: contractAddress, + msg: encode(jsonPrettify(msg)), + }, + }); + }} + /> + ))} + + ); + } + return ( + + No messages available + + ); +}; + export const CommandSection = observer( ({ contractAddress, codeHash, codeId }: CommandSectionProps) => { - const navigate = useInternalNavigate(); const { isOpen, onClose, onOpen } = useDisclosure(); const { getSchemaByCodeHash } = useSchemaStore(); @@ -43,51 +98,6 @@ export const CommandSection = observer( useQueryCmds(contractAddress); const { isFetching: isExecuteCmdsFetching, execCmds } = useExecuteCmds(contractAddress); - const renderCmds = ( - isFetching: boolean, - cmds: [string, string][], - type: string - ) => { - if (isFetching) { - return ; - } - if (cmds.length) { - return ( - button": { - marginInlineStart: "0 !important", - marginInlineEnd: "1", - }, - }} - > - {cmds.sort().map(([cmd, msg]) => ( - { - navigate({ - pathname: `/${type}`, - query: { - contract: contractAddress, - msg: encode(jsonPrettify(msg)), - }, - }); - }} - /> - ))} - - ); - } - return ( - - No messages available - - ); - }; return ( @@ -145,7 +155,12 @@ export const CommandSection = observer( Query Shortcuts - {renderCmds(isQueryCmdsFetching, queryCmds, "query")} + Execute Shortcuts - {renderCmds(isExecuteCmdsFetching, execCmds, "execute")} +