alleslabs · songwongtp · Aug 20, 2024 · Aug 15, 2024 · Aug 15, 2024 · Aug 15, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1090](https://github.com/alleslabs/celatone-frontend/pull/1090) Change query page layout in mobile and adjust code snippet copy button
 - [#1080](https://github.com/alleslabs/celatone-frontend/pull/1080) Adjust color and remove accent color
 - [#1088](https://github.com/alleslabs/celatone-frontend/pull/1088) Remove userKey from network store and add test for it
 - [#1034](https://github.com/alleslabs/celatone-frontend/pull/1034) Clean up custom icon file

diff --git a/src/lib/components/button/SubmitButton.tsx b/src/lib/components/button/SubmitButton.tsx
@@ -9,13 +9,15 @@ interface SubmitButtonProps {
   isLoading: boolean;
   onSubmit: () => void;
   isDisabled: boolean;
+  isFullWidth?: boolean;
 }
 
 export const SubmitButton = ({
   text,
   isLoading,
   onSubmit,
   isDisabled,
+  isFullWidth = false,
 }: SubmitButtonProps) => {
   const isMobile = useMobile();
   const isMac = useIsMac();
@@ -36,6 +38,7 @@ export const SubmitButton = ({
 
   return (
     <Button
+      w={isFullWidth ? "full" : "auto"}
       variant="primary"
       fontSize="14px"
       p="6px 16px"

diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
@@ -3,6 +3,7 @@ import dynamic from "next/dynamic";
 import { useEffect, useMemo, useState } from "react";
 
 import { CustomIcon } from "../icon";
+import { useMobile } from "lib/app-provider";
 import type { Nullable } from "lib/types";
 import { jsonLineCount, jsonPrettify, jsonValidate } from "lib/utils";
 
@@ -80,8 +81,8 @@ const JsonInput = ({
   setText,
   validateFn = jsonValidate,
 }: JsonInputProps) => {
+  const isMobile = useMobile();
   const [jsonState, setJsonState] = useState<JsonState>({ state: "empty" });
-
   const handleChange = (value: string) => {
     setJsonState({ state: "loading" });
     setText(value);
@@ -142,22 +143,22 @@ const JsonInput = ({
             {topic}
           </Text>
         )}
-        <Button
-          position="absolute"
-          top="10px"
-          right="10px"
-          p="4px 10px"
-          variant="outline-white"
-          fontSize="12px"
-          background="background.main"
-          float="right"
-          isDisabled={!isValidJson}
-          onClick={() => {
-            setText(jsonPrettify(text));
-          }}
-        >
-          Format JSON
-        </Button>
+        {!isMobile && (
+          <Button
+            position="absolute"
+            top="10px"
+            right="10px"
+            p="4px 10px"
+            variant="outline-white"
+            fontSize="12px"
+            background="background.main"
+            float="right"
+            isDisabled={!isValidJson}
+            onClick={() => setText(jsonPrettify(text))}
+          >
+            Format JSON
+          </Button>
+        )}
       </Box>
       <Flex
         my={response ? "16px" : undefined}

diff --git a/src/lib/components/modal/WasmCodeSnippet.tsx b/src/lib/components/modal/WasmCodeSnippet.tsx
@@ -1,12 +1,14 @@
-import type { ButtonProps } from "@chakra-ui/react";
+import type { ButtonProps, FlexProps } from "@chakra-ui/react";
 import {
   Box,
   Button,
+  Flex,
   Heading,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
+  ModalFooter,
   ModalHeader,
   ModalOverlay,
   TabList,
@@ -16,6 +18,7 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
+import { useState } from "react";
 import AceEditor from "react-ace";
 
 import { CopyButton } from "../copy";
@@ -25,6 +28,7 @@ import {
   useCelatoneApp,
   useCurrentChain,
   useLcdEndpoint,
+  useMobile,
   useRpcEndpoint,
 } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
@@ -45,15 +49,18 @@ interface WasmCodeSnippetProps {
   type: "query" | "execute";
   ml?: ButtonProps["ml"];
   funds?: Coin[];
+  w?: FlexProps["width"];
 }
 
 const WasmCodeSnippet = ({
   contractAddress,
   message,
   type = "query",
   ml,
+  w,
   funds = [],
 }: WasmCodeSnippetProps) => {
+  const isMobile = useMobile();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const {
     chain: { chain_name: chainName, daemon_name: daemonName },
@@ -69,6 +76,9 @@ const WasmCodeSnippet = ({
     theme,
   } = useCelatoneApp();
 
+  const [activeSnippet, setActiveSnippet] = useState("");
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
   const gasPriceStr = `${gasPrice.tokenPerGas}${gasPrice.denom}`;
   const fundsFlags = funds.length ? `\n  --amount ${coinsToStr(funds)} \\` : "";
 
@@ -202,11 +212,17 @@ execute();
     ],
   };
 
+  const handleTabChange = (index: number) => {
+    setActiveTabIndex(index);
+    setActiveSnippet(codeSnippets[type][index].snippet);
+  };
+
   return (
     <>
       <Button
         isDisabled={isDisabled}
         variant="outline-white"
+        w={w}
         size="sm"
         ml={ml}
         gap={1}
@@ -221,19 +237,24 @@ execute();
 
       <Modal isOpen={isOpen} onClose={onClose} isCentered size="4xl">
         <ModalOverlay />
-        <ModalContent w="840px">
+        <ModalContent w="840px" maxH="95vh">
           <ModalHeader>
             <CustomIcon name="code" boxSize={6} color="gray.600" />
             <Heading as="h5" variant="h5">
               Code Snippet
             </Heading>
           </ModalHeader>
           <ModalCloseButton color="gray.600" />
-          <ModalBody px={4} maxH="640px" overflow="scroll">
-            <Tabs>
+          <ModalBody px={4} overflow="scroll">
+            <Tabs index={activeTabIndex} onChange={handleTabChange}>
               <TabList borderBottom="1px solid" borderColor="gray.700">
-                {codeSnippets[type].map((item) => (
-                  <CustomTab key={`menu-${item.name}`}>{item.name}</CustomTab>
+                {codeSnippets[type].map((item, index) => (
+                  <CustomTab
+                    key={`menu-${item.name}`}
+                    onClick={() => handleTabChange(index)}
+                  >
+                    {item.name}
+                  </CustomTab>
                 ))}
               </TabList>
               <TabPanels>
@@ -262,20 +283,35 @@ execute();
                           wrap: true,
                         }}
                       />
-                      <Box position="absolute" top={4} right={4}>
-                        <CopyButton
-                          value={item.snippet}
-                          amptrackSection="code_snippet"
-                          amptrackSubSection={item.name}
-                          amptrackInfo={type}
-                        />
-                      </Box>
+                      {!isMobile && (
+                        <Box position="absolute" top={4} right={4}>
+                          <CopyButton
+                            value={item.snippet}
+                            amptrackSection="code_snippet"
+                            amptrackSubSection={item.name}
+                            amptrackInfo={type}
+                          />
+                        </Box>
+                      )}
                     </Box>
                   </TabPanel>
                 ))}
               </TabPanels>
             </Tabs>
           </ModalBody>
+          {isMobile && (
+            <ModalFooter>
+              <Flex w="full" justifyContent="flex-end">
+                <CopyButton
+                  buttonText="Copy Code Snippet"
+                  value={activeSnippet}
+                  amptrackSection="code_snippet"
+                  amptrackSubSection={type}
+                  amptrackInfo={type}
+                />
+              </Flex>
+            </ModalFooter>
+          )}
         </ModalContent>
       </Modal>
     </>

diff --git a/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx b/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
@@ -1,10 +1,18 @@
-import { Box, ButtonGroup, Flex, Spacer, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Flex,
+  Grid,
+  Spacer,
+  Text,
+} from "@chakra-ui/react";
 import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
 import { AmpEvent, track, trackActionQuery } from "lib/amplitude";
-import { useCurrentChain } from "lib/app-provider";
+import { useCurrentChain, useMobile } from "lib/app-provider";
 import { SubmitButton } from "lib/components/button";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
@@ -39,6 +47,7 @@ interface JsonQueryProps {
 }
 
 export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
+  const isMobile = useMobile();
   const { data: queryCmds = [], isFetching: isCmdsFetching } =
     useContractQueryMsgsLcd(contractAddress);
   const { addActivity } = useContractStore();
@@ -124,24 +133,48 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
       <Flex gap={4} direction={{ base: "column", md: "row" }}>
         <Box w="full">
           <JsonInput topic="Query Msg" text={msg} setText={setMsg} />
-          <Flex align="center" justify="space-between" gap={{ base: 1, md: 0 }}>
-            <Flex gap={{ base: 1, md: 2 }}>
+          <Flex
+            direction={{ base: "column", md: "row" }}
+            justify="space-between"
+            alignItems="center"
+            gap={{ base: 1, md: 0 }}
+          >
+            <Grid
+              w={{ base: "full", md: "auto" }}
+              columnGap={2}
+              mb={{ base: 2, md: 0 }}
+              templateColumns={{ base: "repeat(3, 1fr)", md: "repeat(2, 1fr)" }}
+            >
               <CopyButton
+                w="full"
                 isDisable={!msg.length}
                 value={msg}
                 amptrackSection="query_msg"
               />
               <WasmCodeSnippet
+                w="full"
                 type="query"
                 contractAddress={contractAddress}
                 message={msg}
               />
-            </Flex>
+              {isMobile && (
+                <Button
+                  variant="outline-white"
+                  size="sm"
+                  background="background.main"
+                  isDisabled={isButtonDisabled}
+                  onClick={() => setMsg(jsonPrettify(msg))}
+                >
+                  Format JSON
+                </Button>
+              )}
+            </Grid>
             <SubmitButton
               text="Query"
               isLoading={isFetching}
               onSubmit={handleQuery}
               isDisabled={isButtonDisabled}
+              isFullWidth={isMobile}
             />
           </Flex>
         </Box>