feat: submit button

CHANGELOG.md

@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#593](https://github.com/alleslabs/celatone-frontend/pull/593) Refactor submit button to a common component
 - [#574](https://github.com/alleslabs/celatone-frontend/pull/574) Add min height to wasm page container to properly align footer
 - [#569](https://github.com/alleslabs/celatone-frontend/pull/569) Add move config to dev shortcuts in homepage
 - [#559](https://github.com/alleslabs/celatone-frontend/pull/559) Restructure and refactor responsive tables

src/lib/components/button/SubmitButton.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@chakra-ui/react";
+import { useEffect } from "react";
+
+import { CustomIcon } from "../icon";
+import { useIsMac, useMobile } from "lib/app-provider";
+
+interface SubmitButtonProps {
+  text: string;
+  isLoading: boolean;
+  onSubmit: () => void;
+  isDisabled: boolean;
+}
+
+export const SubmitButton = ({
+  text,
+  isLoading,
+  onSubmit,
+  isDisabled,
+}: SubmitButtonProps) => {
+  const isMobile = useMobile();
+  const isMac = useIsMac();
+
+  useEffect(() => {
+    const keydownHandler = (e: KeyboardEvent) => {
+      // TODO: problem with safari if focusing in the textarea
+      const specialKey = isMac ? e.metaKey : e.ctrlKey;
+      if (!isDisabled && specialKey && e.key === "Enter") {
+        onSubmit();
+      }
+    };
+    document.addEventListener("keydown", keydownHandler);
+    return () => {
+      document.removeEventListener("keydown", keydownHandler);
+    };
+  });
+
+  return (
+    <Button
+      variant="primary"
+      fontSize="14px"
+      p="6px 16px"
+      onClick={onSubmit}
+      isDisabled={isDisabled}
+      leftIcon={<CustomIcon name="execute" />}
+      isLoading={isLoading}
+      sx={{ pointerEvents: isLoading && "none" }}
+    >
+      {text} {!isMobile && `(${isMac ? "⌘" : "Ctrl"} + Enter)`}
+    </Button>
+  );
+};

src/lib/components/button/index.ts

@@ -7,3 +7,4 @@ export * from "./ResendButton";
 export * from "./ShowMoreButton";
 export * from "./CustomIconButton";
 export * from "./FaucetButton";
+export * from "./SubmitButton";

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

@@ -1,4 +1,4 @@
-import { Box, Flex, Button } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -9,11 +9,10 @@ import {
   useFabricateFee,
   useExecuteContractTx,
   useCurrentChain,
-  useMobile,
-  useIsMac,
 } from "lib/app-provider";
 import { useAttachFunds } from "lib/app-provider/hooks/useAttachFunds";
 import { useSimulateFeeQuery } from "lib/app-provider/queries";
+import { SubmitButton } from "lib/components/button";
 import { CopyButton } from "lib/components/copy";
 import { ErrorMessageRender } from "lib/components/ErrorMessageRender";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -26,7 +25,6 @@ import {
 } from "lib/components/fund/data";
 import type { AttachFundsState } from "lib/components/fund/types";
 import { AttachFundsType } from "lib/components/fund/types";
-import { CustomIcon } from "lib/components/icon";
 import JsonInput from "lib/components/json/JsonInput";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import { useExecuteCmds } from "lib/hooks";
@@ -66,8 +64,6 @@ export const JsonExecute = ({
   // ------------------------------------------//
   // --------------DEPENDENCIES----------------//
   // ------------------------------------------//
-  const isMobile = useMobile();
-  const isMac = useIsMac();
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const executeTx = useExecuteContractTx();
@@ -243,20 +239,6 @@ export const JsonExecute = ({
   ]);
 
   const isButtonDisabled = !enableExecute || !fee || isFetching;
-  useEffect(() => {
-    const keydownHandler = (e: KeyboardEvent) => {
-      // TODO: problem with safari if focusing in the textarea
-      const specialKey = isMac ? e.metaKey : e.ctrlKey;
-      if (!isButtonDisabled && specialKey && e.key === "Enter") {
-        proceed();
-      }
-    };
-    document.addEventListener("keydown", keydownHandler);
-    return () => {
-      document.removeEventListener("keydown", keydownHandler);
-    };
-  });
-
   return (
     <>
       {cmdsFetching && <LoadingOverlay />}
@@ -296,18 +278,12 @@ export const JsonExecute = ({
             Transaction Fee:{" "}
             <EstimatedFeeRender estimatedFee={fee} loading={isFetching} />
           </Flex>
-          <Button
-            variant="primary"
-            fontSize="14px"
-            p="6px 16px"
-            onClick={proceed}
-            isDisabled={isButtonDisabled}
-            leftIcon={<CustomIcon name="execute" />}
+          <SubmitButton
+            text="Execute"
             isLoading={processing}
-            sx={{ pointerEvents: processing && "none" }}
-          >
-            Execute {!isMobile && ` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
-          </Button>
+            onSubmit={proceed}
+            isDisabled={isButtonDisabled}
+          />
         </Flex>
       </Flex>
     </>

src/lib/pages/interact/component/form/ExecuteArea.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertDescription, Button, Flex } from "@chakra-ui/react";
+import { Alert, AlertDescription, Flex } from "@chakra-ui/react";
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import type { StdFee } from "@cosmjs/stargate";
 import { MsgExecute as MsgExecuteModule } from "@initia/initia.js";
@@ -10,9 +10,9 @@ import {
   useSimulateFeeQuery,
   useExecuteModuleTx,
   useCurrentChain,
-  useIsMac,
 } from "lib/app-provider";
 import { AbiForm } from "lib/components/abi";
+import { SubmitButton } from "lib/components/button";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { CustomIcon } from "lib/components/icon";
@@ -44,7 +44,6 @@ export const ExecuteArea = ({
       ? fn.params.slice(1)
       : fn.params;
 
-  const isMac = useIsMac();
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const executeModuleTx = useExecuteModuleTx();
@@ -133,20 +132,6 @@ export const ExecuteArea = ({
   }, [address, data, enableExecute, executeFn, moduleAddress, moduleName]);
 
   const isButtonDisabled = !enableExecute || !fee || isFetching;
-  useEffect(() => {
-    const keydownHandler = (e: KeyboardEvent) => {
-      // TODO: problem with safari if focusing in the textarea
-      const specialKey = isMac ? e.metaKey : e.ctrlKey;
-      if (!isButtonDisabled && specialKey && e.key === "Enter") {
-        proceed();
-      }
-    };
-    document.addEventListener("keydown", keydownHandler);
-    return () => {
-      document.removeEventListener("keydown", keydownHandler);
-    };
-  });
-
   return (
     <Flex direction="column">
       {fn.is_entry ? (
@@ -195,18 +180,12 @@ export const ExecuteArea = ({
             Transaction Fee:{" "}
             <EstimatedFeeRender estimatedFee={fee} loading={isFetching} />
           </Flex>
-          <Button
-            variant="primary"
-            fontSize="14px"
-            p="6px 16px"
-            onClick={proceed}
-            isDisabled={isButtonDisabled}
-            leftIcon={<CustomIcon name="execute" />}
+          <SubmitButton
+            text="Execute"
             isLoading={processing}
-            sx={{ pointerEvents: processing && "none" }}
-          >
-            Execute{` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
-          </Button>
+            onSubmit={proceed}
+            isDisabled={isButtonDisabled}
+          />
         </Flex>
       </Flex>
     </Flex>

src/lib/pages/interact/component/form/ViewArea.tsx

@@ -1,7 +1,6 @@
 import {
   Alert,
   AlertDescription,
-  Button,
   Flex,
   Grid,
   GridItem,
@@ -10,10 +9,10 @@ import {
   Text,
 } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
-import { useIsMac } from "lib/app-provider";
 import { AbiForm } from "lib/components/abi";
+import { SubmitButton } from "lib/components/button";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import { DEFAULT_RPC_ERROR } from "lib/data";
@@ -43,7 +42,6 @@ export const ViewArea = ({
   moduleName: string;
   fn: ExposedFunction;
 }) => {
-  const isMac = useIsMac();
   const [abiData, setAbiData] = useState<AbiFormData>({
     typeArgs: getAbiInitialData(fn.generic_type_params.length),
     args: getAbiInitialData(fn.params.length),
@@ -74,18 +72,6 @@ export const ViewArea = ({
   const isButtonDisabled = Boolean(
     Object.values(abiData.typeArgs).some((v) => !v.length) || !!abiErrors.length
   );
-  useEffect(() => {
-    const keydownHandler = (e: KeyboardEvent) => {
-      // TODO: problem with safari if focusing in the textarea
-      const specialKey = isMac ? e.metaKey : e.ctrlKey;
-      if (!isButtonDisabled && specialKey && e.key === "Enter") handleQuery();
-    };
-    document.addEventListener("keydown", keydownHandler);
-    return () => {
-      document.removeEventListener("keydown", keydownHandler);
-    };
-  });
-
   return (
     <Grid templateColumns="1fr 1fr" gap={6}>
       <GridItem>
@@ -103,18 +89,12 @@ export const ViewArea = ({
             abiData={abiData}
             type="view"
           />
-          <Button
-            variant="primary"
-            fontSize="14px"
-            p="6px 16px"
-            size={{ base: "sm", md: "md" }}
-            onClick={handleQuery}
-            isDisabled={isButtonDisabled}
+          <SubmitButton
+            text="View"
             isLoading={isLoading}
-            leftIcon={<CustomIcon name="query" />}
-          >
-            View{` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
-          </Button>
+            onSubmit={handleQuery}
+            isDisabled={isButtonDisabled}
+          />
         </Flex>
       </GridItem>
       <GridItem>

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

@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex, Button, Spacer, Box, Text } from "@chakra-ui/react";
+import { ButtonGroup, Flex, Spacer, Box, Text } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
@@ -9,12 +9,10 @@ import {
   CELATONE_QUERY_KEYS,
   useBaseApiRoute,
   useCurrentChain,
-  useIsMac,
-  useMobile,
 } from "lib/app-provider";
+import { SubmitButton } from "lib/components/button";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
-import { CustomIcon } from "lib/components/icon";
 import JsonInput from "lib/components/json/JsonInput";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
@@ -45,8 +43,6 @@ interface JsonQueryProps {
 
 export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
   const { track, trackAction } = useTrack();
-  const isMobile = useMobile();
-  const isMac = useIsMac();
   const { isFetching: cmdsFetching, queryCmds } = useQueryCmds(contractAddress);
   const lcdEndpoint = useBaseApiRoute("rest");
   const { addActivity } = useContractStore();
@@ -94,18 +90,6 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
   };
 
   const isButtonDisabled = jsonValidate(msg) !== null;
-  useEffect(() => {
-    const keydownHandler = (e: KeyboardEvent) => {
-      // TODO: problem with safari if focusing in the textarea
-      const specialKey = isMac ? e.metaKey : e.ctrlKey;
-      if (!isButtonDisabled && specialKey && e.key === "Enter") handleQuery();
-    };
-    document.addEventListener("keydown", keydownHandler);
-    return () => {
-      document.removeEventListener("keydown", keydownHandler);
-    };
-  });
-
   return (
     <>
       {cmdsFetching && <LoadingOverlay />}
@@ -162,18 +146,12 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
                 message={msg}
               />
             </Flex>
-            <Button
-              variant="primary"
-              fontSize="14px"
-              p="6px 16px"
-              size={{ base: "sm", md: "md" }}
-              onClick={handleQuery}
-              isDisabled={isButtonDisabled}
+            <SubmitButton
+              text="Query"
               isLoading={queryFetching || queryRefetching}
-              leftIcon={<CustomIcon name="query" />}
-            >
-              Query{!isMobile && ` (${isMac ? "⌘" : "Ctrl"} + Enter)`}
-            </Button>
+              onSubmit={handleQuery}
+              isDisabled={isButtonDisabled}
+            />
           </Flex>
         </Box>
         <Spacer