feat(components): scrollable sidebar with fixed button

CHANGELOG.md

@@ -38,7 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Features
-
+- [#81](https://github.com/alleslabs/celatone-frontend/pull/81) Can scroll on side bar with fix deploy contract
 - [#70](https://github.com/alleslabs/celatone-frontend/pull/70) Change default token denom on contract detail
 - [#78](https://github.com/alleslabs/celatone-frontend/pull/78) Ignore building step when branch is not main
 - [#62](https://github.com/alleslabs/celatone-frontend/pull/62) Add footer

src/lib/components/CustomTab.tsx

@@ -2,7 +2,7 @@ import type { TabProps } from "@chakra-ui/react";
 import { Button, useTab, Badge, useMultiStyleConfig } from "@chakra-ui/react";
 
 interface CustomTabProps extends TabProps {
-  count: number;
+  count?: number;
 }
 
 export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
@@ -32,9 +32,11 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
     >
       {tabProps.children}
 
-      <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
-        {count}
-      </Badge>
+      {count && (
+        <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
+          {count}
+        </Badge>
+      )}
     </Button>
   );
 };

src/lib/components/modal/CodeSnippet.tsx

@@ -0,0 +1,89 @@
+import {
+  Modal,
+  ModalHeader,
+  Flex,
+  // Icon,
+  // Box,
+  // Text,
+  Tabs,
+  TabList,
+  TabPanel,
+  TabPanels,
+  ModalOverlay,
+  ModalContent,
+  ModalFooter,
+  ModalCloseButton,
+  useDisclosure,
+  ModalBody,
+  Button,
+} from "@chakra-ui/react";
+import type { ButtonProps } from "@chakra-ui/react";
+
+import { CustomTab } from "lib/components/CustomTab";
+
+interface ModalProps {
+  buttonProps: ButtonProps;
+}
+
+export function CodeSnippet({ buttonProps }: ModalProps) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Flex onClick={onOpen}>
+        <Button {...buttonProps} />
+      </Flex>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader borderBottomWidth={1} borderColor="divider.main">
+            Code Snippet
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Tabs>
+              <TabList border="none" mb="32px">
+                <CustomTab>All Codes</CustomTab>
+                <CustomTab>My Stored Codes</CustomTab>
+                <CustomTab>My Saved Codes </CustomTab>
+              </TabList>
+
+              <TabPanels mt="48px">
+                <TabPanel p="0px">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
+                  reiciendis odio reprehenderit obcaecati veniam delectus
+                  laboriosam, deserunt quaerat harum, a possimus, rerum ut
+                  distinctio quo officiis ad? Quas, cum voluptate. Lorem ipsum
+                  dolor sit amet consectetur adipisicing elit. Ipsum esse veniam
+                  recusandae minus consequuntur ducimus, asperiores rerum? Et
+                  inventore illo maiores pariatur in nobis, tempore ipsa
+                  assumenda tempora iure illum!
+                </TabPanel>
+                <TabPanel p="0px">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                  Explicabo doloribus tempora possimus voluptatem enim aut nobis
+                  quasi nisi ut deleniti ipsa sed nostrum sint ad excepturi,
+                  laborum, placeat aliquam laudantium.
+                </TabPanel>
+                <TabPanel p="0px">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Tempore repudiandae voluptas facilis dicta officiis
+                  consequuntur illum quasi voluptate optio, magnam corporis
+                  deleniti eveniet vero quo ea nostrum voluptatem facere
+                  architecto.
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Close
+            </Button>
+            <Button variant="ghost">Secondary Action</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/lib/layout/Navbar.tsx

@@ -107,8 +107,16 @@ const Navbar = observer(() => {
   ];
 
   return (
-    <Flex p={4} direction="column" h="full" overflow="hidden">
-      <Box>
+    <Flex
+      direction="column"
+      h="full"
+      overflow="hidden"
+      position="relative"
+
+      // bgColor="info.main"
+      // maxHeight="90%"
+    >
+      <Box p={4} overflowY="scroll" pb={12}>
         {navMenu.map((item) => (
           <Box
             pb="4"
@@ -158,12 +166,24 @@ const Navbar = observer(() => {
         ))}
       </Box>
       <Spacer />
-      <Link href="/deploy">
-        <Button w="full">
-          <Icon as={MdOutlineAdd} boxSize="4" />
-          Deploy new contract
-        </Button>
-      </Link>
+      <Flex
+        position="fixed"
+        bottom="0"
+        py={3}
+        bg="#212121"
+        display="flex"
+        width="full"
+        maxWidth="224px"
+        justifyContent="center"
+        borderTop="4px solid #121212"
+      >
+        <Link href="/deploy">
+          <Button>
+            <Icon as={MdOutlineAdd} boxSize="4" />
+            Deploy new contract
+          </Button>
+        </Link>
+      </Flex>
     </Flex>
   );
 });

src/lib/layout/index.tsx

@@ -32,7 +32,7 @@ const Layout = ({ children }: LayoutProps) => {
       <GridItem bg="#212121" area="header" mb="1">
         <Header />
       </GridItem>
-      <GridItem bg="#212121" area="nav">
+      <GridItem bg="#212121" area="nav" overflowY="auto">
         <Navbar />
       </GridItem>
       <GridItem area="main" overflowY="auto" id="content">

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

@@ -1,14 +1,24 @@
 import { SearchIcon } from "@chakra-ui/icons";
-import { Box, Flex, Spacer, Button, ButtonGroup, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Spacer,
+  Button,
+  ButtonGroup,
+  Text,
+  Icon,
+} from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { useEffect, useState } from "react";
+import { MdCode } from "react-icons/md";
 
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/CopyButton";
 import JsonInput from "lib/components/json/JsonInput";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { CodeSnippet } from "lib/components/modal/CodeSnippet";
 import { DEFAULT_RPC_ERROR } from "lib/data";
 import { useContractStore, useEndpoint, useUserKey } from "lib/hooks";
 import { queryData } from "lib/services/contract";
@@ -138,7 +148,18 @@ export const QueryArea = ({
         <Spacer />
         <Box w="full">
           <JsonReadOnly topic="Return Output" text={res} height="240px" />
-          <CopyButton isDisable={res.length === 0} value={res} />
+          <Flex justifyContent="flex-end" gap={2}>
+            <CodeSnippet
+              buttonProps={{
+                variant: "outline-info",
+                leftIcon: <Icon as={MdCode} boxSize="5" />,
+                children: "Get Code Snippet ",
+                size: "sm",
+                isDisabled: res.length === 0,
+              }}
+            />
+            <CopyButton isDisable={res.length === 0} value={res} />
+          </Flex>
         </Box>
       </Flex>
     </Flex>