Merge pull request #102 from alleslabs/feat/overview-new-action

Feat/overview new action

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#102](https://github.com/alleslabs/celatone-frontend/pull/102) Add quick menu in overview and add highlighted in left sidebar
 - [#125](https://github.com/alleslabs/celatone-frontend/pull/125) Add connect wallet alert in instantiate page
 - [#126](https://github.com/alleslabs/celatone-frontend/pull/126) Add port id copier for IBC port id
 - [#76](https://github.com/alleslabs/celatone-frontend/pull/76) Add Public projects page

src/lib/layout/Navbar.tsx

@@ -1,6 +1,8 @@
-import { Flex, Box, Text, Icon, Button, Spacer, Image } from "@chakra-ui/react";
+import { Flex, Box, Text, Icon, Image } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { useCallback } from "react";
 import type { IconType } from "react-icons";
 import {
   MdHome,
@@ -64,6 +66,11 @@ const Navbar = observer(() => {
     {
       category: "Quick Actions",
       submenu: [
+        {
+          name: "Deploy contract",
+          slug: "/deploy",
+          icon: MdOutlineAdd,
+        },
         {
           name: "Query",
           slug: "/query",
@@ -134,9 +141,25 @@ const Navbar = observer(() => {
     },
   ];
 
+  const router = useRouter();
+  const { network } = router.query;
+  const pathName = router.asPath;
+
+  const isCurrentPage = useCallback(
+    (slug: string) => {
+      if (network) {
+        return slug === "/"
+          ? pathName === `/${network}`
+          : pathName === `/${network}${slug}`;
+      }
+      return pathName === `${slug}`;
+    },
+    [network, pathName]
+  );
+
   return (
     <Flex direction="column" h="full" overflow="hidden" position="relative">
-      <Box p={4} overflowY="scroll" pb={12}>
+      <Box px={4} py={2} overflowY="scroll">
         {navMenu.map((item) => (
           <Box
             pb="4"
@@ -147,6 +170,8 @@ const Navbar = observer(() => {
             sx={{
               "&:last-of-type": {
                 borderBottom: "none",
+                paddingBottom: "0px",
+                marginBottom: "0px",
               },
             }}
           >
@@ -168,12 +193,16 @@ const Navbar = observer(() => {
             {item.submenu.map((submenu) => (
               <AppLink href={submenu.slug} key={submenu.slug}>
                 <Flex
-                  gap="3"
+                  gap="2"
                   p={2}
                   cursor="pointer"
                   _hover={{ bg: "gray.800", borderRadius: "4px" }}
                   transition="all .25s ease-in-out"
                   alignItems="center"
+                  bgColor={
+                    isCurrentPage(submenu.slug) ? "gray.800" : "transparent"
+                  }
+                  borderRadius={isCurrentPage(submenu.slug) ? "4px" : "0px"}
                 >
                   {submenu.icon && (
                     <Icon as={submenu.icon} color="gray.600" boxSize="4" />
@@ -195,25 +224,6 @@ const Navbar = observer(() => {
           </Box>
         ))}
       </Box>
-      <Spacer />
-      <Flex
-        position="fixed"
-        bottom="0"
-        py={3}
-        bg="gray.900"
-        width="full"
-        maxWidth="224px"
-        justifyContent="center"
-        borderTop="4px solid"
-        borderTopColor="background.main"
-      >
-        <AppLink href="/deploy">
-          <Button>
-            <Icon as={MdOutlineAdd} boxSize="4" />
-            Deploy new contract
-          </Button>
-        </AppLink>
-      </Flex>
     </Flex>
   );
 });

src/lib/pages/home/components/QuickMenu.tsx

@@ -1,30 +1,48 @@
-import { Flex, Heading, Box, Text, Icon } from "@chakra-ui/react";
-import { MdChevronRight, MdSearch, MdInput } from "react-icons/md";
+import { Flex, Heading, Box, Text, Icon, SimpleGrid } from "@chakra-ui/react";
+import {
+  MdChevronRight,
+  MdSearch,
+  MdInput,
+  MdReadMore,
+  MdPerson,
+} from "react-icons/md";
 
 import { AppLink } from "lib/components/AppLink";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 
-// TODO remove link text-decoration underline
 const cardProps = {
   width: "100%",
   padding: "16px",
   borderRadius: "4px",
   justifyContent: "space-between",
+  height: "100%",
 };
 
 const secondaryMenu = [
   {
     title: "Query",
-    subtitle: "Query state data from smart contracts",
+    subtitle: "Query and get state data",
     slug: "query",
     icon: MdSearch,
   },
   {
     title: "Execute",
-    subtitle: "Send transactions to smart contracts",
+    subtitle: "Send transactions to contracts",
     slug: "execute",
     icon: MdInput,
   },
+  {
+    title: "Migrate",
+    subtitle: "Migrate to other Code ID",
+    slug: "migrate",
+    icon: MdReadMore,
+  },
+  {
+    title: "Update Admin",
+    subtitle: "Change contract admin",
+    slug: "admin",
+    icon: MdPerson,
+  },
 ];
 
 export const QuickMenu = () => {
@@ -38,7 +56,7 @@ export const QuickMenu = () => {
         subtitle="Actions such as deploying new contracts or sending transactions require a wallet connection"
       />
       <Flex gap={4}>
-        <AppLink href="/deploy" style={{ width: "100%" }}>
+        <AppLink href="/deploy" style={{ width: "55%" }}>
           <Flex
             bg="primary.main"
             _hover={{ bg: "primary.light" }}
@@ -58,7 +76,8 @@ export const QuickMenu = () => {
             <Icon as={MdChevronRight} color="gray.900" boxSize={9} />
           </Flex>
         </AppLink>
-        <Flex direction="column" gap={4} w="full">
+
+        <SimpleGrid columns={2} spacing={3} w="full">
           {secondaryMenu.map((item) => (
             <AppLink href={`/${item.slug}`} key={item.slug}>
               <Flex
@@ -87,7 +106,7 @@ export const QuickMenu = () => {
               </Flex>
             </AppLink>
           ))}
-        </Flex>
+        </SimpleGrid>
       </Flex>
     </Flex>
   );

src/lib/pages/home/components/RecentActivities.tsx

@@ -21,7 +21,7 @@ export const RecentActivities = observer(() => {
   return (
     <Box py={8}>
       <Heading px={12} as="h6" variant="h6" mb={4}>
-        Recent Activities on this device
+        Recent Queries and Executes on this device
       </Heading>
       {activities.length ? (
         <Flex px={12} gap={4} overflowX="scroll" w="100%">