Merge pull request #872 from alleslabs/feat/cfe-393-combine-query-exe…

…cute Feat/cfe 393 combine query execute
alleslabs · Apr 29, 2024 · b062897 · b062897
2 parents 524222f + c56b800
commit b062897
Show file tree

Hide file tree

Showing 36 changed files with 479 additions and 354 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#872](https://github.com/alleslabs/celatone-frontend/pull/872) Change Query/Execute page to Interact Contract
 - [#895](https://github.com/alleslabs/celatone-frontend/pull/895) Show collection address and creator on the collection list page
 
 ### Bug fixes

diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
@@ -167,9 +167,7 @@ export const ContractSelectSection = observer(
           label: data.label,
         });
       },
-      () => {
-        reset(defaultValues);
-      }
+      () => reset(defaultValues)
     );
 
     useEffect(() => {

diff --git a/src/lib/components/MobileGuard.tsx b/src/lib/components/MobileGuard.tsx
@@ -20,7 +20,7 @@ export const MobileGuard = ({ children }: MobileGuardProps) => {
     pathName.includes(`/txs`) ||
     pathName.includes(`/blocks`) ||
     pathName.includes(`/projects`) ||
-    pathName.includes(`/query`) ||
+    pathName.includes(`/interact-contract`) ||
     pathName.includes(`/404`) ||
     pathName.includes(`/proposals`) ||
     pathName.includes(`/nft-collections`) ||

diff --git a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
@@ -27,6 +27,7 @@ import {
   RemoveContractModal,
   SaveContractDetailsModal,
 } from "lib/components/modal";
+import { ContractInteractionTabs } from "lib/types";
 import type { ContractInfo, LVPair, Option } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
@@ -67,12 +68,16 @@ export const ContractsTableRowCTA = ({
           justifyContent="flex-end"
           onClick={(e) => e.stopPropagation()}
         >
-          <AppLink href={`/execute?contract=${contractInfo.contractAddress}`}>
+          <AppLink
+            href={`/interact-contract?selectedType=${ContractInteractionTabs.Execute}&contract=${contractInfo.contractAddress}`}
+          >
             <Button variant="outline-gray" size="sm">
               Execute
             </Button>
           </AppLink>
-          <AppLink href={`/query?contract=${contractInfo.contractAddress}`}>
+          <AppLink
+            href={`/interact-contract?selectedType=${ContractInteractionTabs.Query}&contract=${contractInfo.contractAddress}`}
+          >
             <Button variant="outline-gray" size="sm">
               Query
             </Button>

diff --git a/src/lib/hooks/useRedo.ts b/src/lib/hooks/useRedo.ts
@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
+import { ContractInteractionTabs } from "lib/types";
 import type { Msg, Option } from "lib/types";
 import { camelToSnake, libEncode } from "lib/utils";
 
@@ -19,8 +20,13 @@ export const useRedo = () => {
       if (type === "MsgExecuteContract") {
         const encodeMsg = libEncode(JSON.stringify(camelToSnake(msg)));
         navigate({
-          pathname: "/execute",
-          query: { chainName, contract: msg.contract, msg: encodeMsg },
+          pathname: "/interact-contract",
+          query: {
+            chainName,
+            selectedType: ContractInteractionTabs.Execute,
+            contract: msg.contract,
+            msg: encodeMsg,
+          },
         });
       } else if (
         type === "MsgInstantiateContract" ||

diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
@@ -83,7 +83,7 @@ export const NavDrawer = () => {
               },
               {
                 name: "Query",
-                slug: "/query",
+                slug: "/interact-contract",
                 icon: "query" as IconKeys,
               },
             ]

diff --git a/src/lib/layout/navbar/utils.ts b/src/lib/layout/navbar/utils.ts
@@ -39,15 +39,10 @@ export const getDevSubmenuWasm = (isWasm: boolean) =>
           icon: "add-new" as IconKeys,
         },
         {
-          name: "Query",
-          slug: "/query",
+          name: "Query / Execute",
+          slug: "/interact-contract",
           icon: "query" as IconKeys,
         },
-        {
-          name: "Execute",
-          slug: "/execute",
-          icon: "execute" as IconKeys,
-        },
         {
           name: "Migrate",
           slug: "/migrate",

diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -5,6 +5,7 @@ import {
   IconButton,
   Image,
   Text,
+  Tooltip,
 } from "@chakra-ui/react";
 
 import { useInternalNavigate, useMobile } from "lib/app-provider";
@@ -21,6 +22,7 @@ import {
 import { TotalValue } from "lib/components/TotalValue";
 import type { Contract } from "lib/services/contract";
 import type { ContractLocalInfo } from "lib/stores/contract";
+import { ContractInteractionTabs } from "lib/types";
 import type {
   BechAddr32,
   Nullable,
@@ -32,12 +34,12 @@ import { truncate } from "lib/utils";
 
 interface ContractTopProps {
   contractAddress: BechAddr32;
-
   projectInfo: Nullable<ProjectInfo>;
   publicInfo: Nullable<PublicContractInfo>;
   contract: Contract;
   contractLocalInfo: Option<ContractLocalInfo>;
 }
+
 export const ContractTop = ({
   contractAddress,
   projectInfo,
@@ -52,16 +54,13 @@ export const ContractTop = ({
     contractLocalInfo?.name || publicInfo?.name || contract.label;
   const projectName = projectInfo?.name;
 
-  const goToQuery = () => {
-    navigate({
-      pathname: "/query",
-      query: { ...(contractAddress && { contract: contractAddress }) },
-    });
-  };
-  const goToExecute = () => {
+  const goToInteractContract = (type: ContractInteractionTabs) => {
     navigate({
-      pathname: "/execute",
-      query: { ...(contractAddress && { contract: contractAddress }) },
+      pathname: "/interact-contract",
+      query: {
+        selectedType: type,
+        ...(contractAddress && { contract: contractAddress }),
+      },
     });
   };
 
@@ -237,7 +236,9 @@ export const ContractTop = ({
               variant="outline-primary"
               w={{ base: "full", md: "auto" }}
               leftIcon={<CustomIcon name="query" />}
-              onClick={goToQuery}
+              onClick={() =>
+                goToInteractContract(ContractInteractionTabs.Query)
+              }
               size={{ base: "sm", md: "md" }}
             >
               Query
@@ -246,10 +247,19 @@ export const ContractTop = ({
               variant="outline-primary"
               w={{ base: "full", md: "auto" }}
               leftIcon={<CustomIcon name="execute" />}
-              onClick={goToExecute}
+              onClick={() => {
+                goToInteractContract(ContractInteractionTabs.Execute);
+              }}
               size={{ base: "sm", md: "md" }}
+              isDisabled={isMobile}
             >
-              Execute
+              {isMobile ? (
+                <Tooltip label="Sorry, this feature is currently not supported on mobile.">
+                  <span>Execute</span>
+                </Tooltip>
+              ) : (
+                "Execute"
+              )}
             </Button>
             {!isMobile && (
               <Flex>

diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
diff --git a/src/lib/pages/instantiate/completed.tsx b/src/lib/pages/instantiate/completed.tsx
@@ -6,6 +6,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TxReceiptRender } from "lib/components/tx";
 import WasmPageContainer from "lib/components/WasmPageContainer";
+import { ContractInteractionTabs } from "lib/types";
 import type { BechAddr32 } from "lib/types";
 import { feeFromStr } from "lib/utils";
 
@@ -76,8 +77,11 @@ const Completed = ({ txInfo }: CompletedProps) => {
           variant="outline-gray"
           onClick={() =>
             navigate({
-              pathname: "/execute",
-              query: { contract: txInfo.contractAddress },
+              pathname: "/interact-contract",
+              query: {
+                selectedType: ContractInteractionTabs.Execute,
+                contract: txInfo.contractAddress,
+              },
             })
           }
         >
@@ -88,8 +92,11 @@ const Completed = ({ txInfo }: CompletedProps) => {
           variant="outline-gray"
           onClick={() =>
             navigate({
-              pathname: "/query",
-              query: { contract: txInfo.contractAddress },
+              pathname: "/interact-contract",
+              query: {
+                selectedType: ContractInteractionTabs.Query,
+                contract: txInfo.contractAddress,
+              },
             })
           }
         >