From b5e28f0a83cf35749ad610f446125c8fd66155b8 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 15 Aug 2024 17:23:50 +0700
Subject: [PATCH 1/6] fix(components): change query page layout and code
 snippet copy btn in mobile

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/button/SubmitButton.tsx    |  3 +
 src/lib/components/json/JsonInput.tsx         | 37 ++++++------
 src/lib/components/modal/WasmCodeSnippet.tsx  | 59 +++++++++++++++----
 .../components/query-area/JsonQuery.tsx       | 34 +++++++++--
 5 files changed, 100 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9d8e7231c..5ada28446 100644
--- 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
index e6a090625..107a83f50 100644
--- a/src/lib/components/button/SubmitButton.tsx
+++ b/src/lib/components/button/SubmitButton.tsx
@@ -9,6 +9,7 @@ interface SubmitButtonProps {
   isLoading: boolean;
   onSubmit: () => void;
   isDisabled: boolean;
+  isFullWidth?: boolean;
 }
 
 export const SubmitButton = ({
@@ -16,6 +17,7 @@ export const SubmitButton = ({
   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
index 89c7cfee7..b20c87ec2 100644
--- 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,24 @@ 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
index c9700d076..b3bc6dcb8 100644
--- a/src/lib/components/modal/WasmCodeSnippet.tsx
+++ b/src/lib/components/modal/WasmCodeSnippet.tsx
@@ -2,11 +2,13 @@ import type { ButtonProps } 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";
@@ -54,6 +58,7 @@ const WasmCodeSnippet = ({
   ml,
   funds = [],
 }: WasmCodeSnippetProps) => {
+  const isMobile = useMobile();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const {
     chain: { chain_name: chainName, daemon_name: daemonName },
@@ -69,6 +74,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,6 +210,11 @@ execute();
     ],
   };
 
+  const handleTabChange = (index: number) => {
+    setActiveTabIndex(index);
+    setActiveSnippet(codeSnippets[type][index].snippet);
+  };
+
   return (
     <>
       <Button
@@ -221,7 +234,7 @@ 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">
@@ -229,11 +242,16 @@ execute();
             </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 +280,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
index f7db04034..3458a6173 100644
--- 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,10 @@
-import { Box, ButtonGroup, Flex, Spacer, Text } from "@chakra-ui/react";
+import { Box, Button, ButtonGroup, Flex, 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 +39,7 @@ interface JsonQueryProps {
 }
 
 export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
+  const isMobile = useMobile();
   const { data: queryCmds = [], isFetching: isCmdsFetching } =
     useContractQueryMsgsLcd(contractAddress);
   const { addActivity } = useContractStore();
@@ -124,8 +125,18 @@ 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" }}
+            align="center"
+            justify="space-between"
+            gap={{ base: 1, md: 0 }}
+          >
+            <Flex
+              gap={{ base: 1, md: 2 }}
+              justifyContent={{ base: "space-between", md: "flex-start" }}
+              w={{ base: "full", md: "auto" }}
+              mb={{ base: 2, md: 0 }}
+            >
               <CopyButton
                 isDisable={!msg.length}
                 value={msg}
@@ -136,12 +147,27 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
                 contractAddress={contractAddress}
                 message={msg}
               />
+              {isMobile && (
+                <Button
+                  variant="outline-white"
+                  fontSize="12px"
+                  size="sm"
+                  background="background.main"
+                  isDisabled={isButtonDisabled}
+                  onClick={() => {
+                    setMsg(jsonPrettify(msg));
+                  }}
+                >
+                  Format JSON
+                </Button>
+              )}
             </Flex>
             <SubmitButton
               text="Query"
               isLoading={isFetching}
               onSubmit={handleQuery}
               isDisabled={isButtonDisabled}
+              isFullWidth={isMobile}
             />
           </Flex>
         </Box>

From cdef386de10309fc9171dac36fb15f2b0c9b25e5 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 15 Aug 2024 17:48:56 +0700
Subject: [PATCH 2/6] fix(components): fix button width

---
 src/lib/components/modal/WasmCodeSnippet.tsx      |  5 ++++-
 .../components/query-area/JsonQuery.tsx           | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/modal/WasmCodeSnippet.tsx b/src/lib/components/modal/WasmCodeSnippet.tsx
index b3bc6dcb8..6acfdf954 100644
--- a/src/lib/components/modal/WasmCodeSnippet.tsx
+++ b/src/lib/components/modal/WasmCodeSnippet.tsx
@@ -1,4 +1,4 @@
-import type { ButtonProps } from "@chakra-ui/react";
+import type { ButtonProps, FlexProps } from "@chakra-ui/react";
 import {
   Box,
   Button,
@@ -49,6 +49,7 @@ interface WasmCodeSnippetProps {
   type: "query" | "execute";
   ml?: ButtonProps["ml"];
   funds?: Coin[];
+  w?: FlexProps["width"];
 }
 
 const WasmCodeSnippet = ({
@@ -56,6 +57,7 @@ const WasmCodeSnippet = ({
   message,
   type = "query",
   ml,
+  w,
   funds = [],
 }: WasmCodeSnippetProps) => {
   const isMobile = useMobile();
@@ -220,6 +222,7 @@ execute();
       <Button
         isDisabled={isDisabled}
         variant="outline-white"
+        w={w}
         size="sm"
         ml={ml}
         gap={1}
diff --git a/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx b/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
index 3458a6173..01d555a62 100644
--- a/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
+++ b/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
@@ -138,17 +138,22 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
               mb={{ base: 2, md: 0 }}
             >
               <CopyButton
+                minW={{ base: "100px", md: "auto" }}
                 isDisable={!msg.length}
                 value={msg}
                 amptrackSection="query_msg"
               />
-              <WasmCodeSnippet
-                type="query"
-                contractAddress={contractAddress}
-                message={msg}
-              />
+              <Flex flex="1">
+                <WasmCodeSnippet
+                  w="full"
+                  type="query"
+                  contractAddress={contractAddress}
+                  message={msg}
+                />
+              </Flex>
               {isMobile && (
                 <Button
+                  flex="1"
                   variant="outline-white"
                   fontSize="12px"
                   size="sm"

From bb55bf54ea3103292010e2d3e99b44b8cdce0260 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 15 Aug 2024 18:39:13 +0700
Subject: [PATCH 3/6] fix: refactor

---
 src/lib/components/json/JsonInput.tsx                      | 4 +---
 .../interact-contract/components/query-area/JsonQuery.tsx  | 7 ++-----
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
index b20c87ec2..8c30e98c2 100644
--- a/src/lib/components/json/JsonInput.tsx
+++ b/src/lib/components/json/JsonInput.tsx
@@ -154,9 +154,7 @@ const JsonInput = ({
             background="background.main"
             float="right"
             isDisabled={!isValidJson}
-            onClick={() => {
-              setText(jsonPrettify(text));
-            }}
+            onClick={() => setText(jsonPrettify(text))}
           >
             Format JSON
           </Button>
diff --git a/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx b/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
index 01d555a62..c897a9b57 100644
--- a/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
+++ b/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
@@ -153,15 +153,12 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
               </Flex>
               {isMobile && (
                 <Button
-                  flex="1"
+                  flex={1}
                   variant="outline-white"
-                  fontSize="12px"
                   size="sm"
                   background="background.main"
                   isDisabled={isButtonDisabled}
-                  onClick={() => {
-                    setMsg(jsonPrettify(msg));
-                  }}
+                  onClick={() => setMsg(jsonPrettify(msg))}
                 >
                   Format JSON
                 </Button>

From 4223f9c6af00af462bf3796157639e52e5b17e1b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 16 Aug 2024 16:21:40 +0700
Subject: [PATCH 4/6] fix: query message button layout

---
 .../components/query-area/JsonQuery.tsx       | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx b/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
index c897a9b57..83e406ccf 100644
--- a/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
+++ b/src/lib/pages/interact-contract/components/query-area/JsonQuery.tsx
@@ -1,4 +1,12 @@
-import { Box, Button, 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";
@@ -127,33 +135,30 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
           <JsonInput topic="Query Msg" text={msg} setText={setMsg} />
           <Flex
             direction={{ base: "column", md: "row" }}
-            align="center"
             justify="space-between"
+            alignItems="center"
             gap={{ base: 1, md: 0 }}
           >
-            <Flex
-              gap={{ base: 1, md: 2 }}
-              justifyContent={{ base: "space-between", md: "flex-start" }}
+            <Grid
               w={{ base: "full", md: "auto" }}
+              columnGap={2}
               mb={{ base: 2, md: 0 }}
+              templateColumns={{ base: "repeat(3, 1fr)", md: "repeat(2, 1fr)" }}
             >
               <CopyButton
-                minW={{ base: "100px", md: "auto" }}
+                w="full"
                 isDisable={!msg.length}
                 value={msg}
                 amptrackSection="query_msg"
               />
-              <Flex flex="1">
-                <WasmCodeSnippet
-                  w="full"
-                  type="query"
-                  contractAddress={contractAddress}
-                  message={msg}
-                />
-              </Flex>
+              <WasmCodeSnippet
+                w="full"
+                type="query"
+                contractAddress={contractAddress}
+                message={msg}
+              />
               {isMobile && (
                 <Button
-                  flex={1}
                   variant="outline-white"
                   size="sm"
                   background="background.main"
@@ -163,7 +168,7 @@ export const JsonQuery = ({ contractAddress, initialMsg }: JsonQueryProps) => {
                   Format JSON
                 </Button>
               )}
-            </Flex>
+            </Grid>
             <SubmitButton
               text="Query"
               isLoading={isFetching}

From e4a72cb30163bb9bbb6e213bb548804c5426e67e Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 19 Aug 2024 10:50:18 +0700
Subject: [PATCH 5/6] fix(components): fix button width for small screen

---
 src/lib/components/modal/WasmCodeSnippet.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/modal/WasmCodeSnippet.tsx b/src/lib/components/modal/WasmCodeSnippet.tsx
index 6acfdf954..dac607add 100644
--- a/src/lib/components/modal/WasmCodeSnippet.tsx
+++ b/src/lib/components/modal/WasmCodeSnippet.tsx
@@ -223,6 +223,7 @@ execute();
         isDisabled={isDisabled}
         variant="outline-white"
         w={w}
+        minW="128px"
         size="sm"
         ml={ml}
         gap={1}

From 48496f055589e4346573c15dbcfb5c5ec3f19364 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 19 Aug 2024 11:55:32 +0700
Subject: [PATCH 6/6] fix(components): add max height for code snippet modal

---
 src/lib/components/modal/WasmCodeSnippet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/modal/WasmCodeSnippet.tsx b/src/lib/components/modal/WasmCodeSnippet.tsx
index dac607add..7086ac1a6 100644
--- a/src/lib/components/modal/WasmCodeSnippet.tsx
+++ b/src/lib/components/modal/WasmCodeSnippet.tsx
@@ -238,7 +238,7 @@ execute();
 
       <Modal isOpen={isOpen} onClose={onClose} isCentered size="4xl">
         <ModalOverlay />
-        <ModalContent w="840px" maxH="95vh">
+        <ModalContent w="840px" maxH="80vh">
           <ModalHeader>
             <CustomIcon name="code" boxSize={6} color="gray.600" />
             <Heading as="h5" variant="h5">