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 ? (