diff --git a/CHANGELOG.md b/CHANGELOG.md index eede86bf1..b561451ae 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/lib/layout/Navbar.tsx b/src/lib/layout/Navbar.tsx index eb186d1e7..583eb70ea 100644 --- a/src/lib/layout/Navbar.tsx +++ b/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 ( - + {navMenu.map((item) => ( { sx={{ "&:last-of-type": { borderBottom: "none", + paddingBottom: "0px", + marginBottom: "0px", }, }} > @@ -168,12 +193,16 @@ const Navbar = observer(() => { {item.submenu.map((submenu) => ( {submenu.icon && ( @@ -195,25 +224,6 @@ const Navbar = observer(() => { ))} - - - - - - ); }); diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx index 92174c821..4236215b1 100644 --- a/src/lib/pages/home/components/QuickMenu.tsx +++ b/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" /> - + { - + + {secondaryMenu.map((item) => ( { ))} - + ); diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx index 2a23da538..e966e1e21 100644 --- a/src/lib/pages/home/components/RecentActivities.tsx +++ b/src/lib/pages/home/components/RecentActivities.tsx @@ -21,7 +21,7 @@ export const RecentActivities = observer(() => { return ( - Recent Activities on this device + Recent Queries and Executes on this device {activities.length ? (