From 59cbdd015ff3835c13452968d60142215b945b7c Mon Sep 17 00:00:00 2001 From: Ramida J Date: Thu, 19 Jan 2023 10:18:33 +0700 Subject: [PATCH 1/7] feat(components): add new quick action --- src/lib/pages/home/components/QuickMenu.tsx | 35 ++++++++++++++++----- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx index dbd736b52..08dc11688 100644 --- a/src/lib/pages/home/components/QuickMenu.tsx +++ b/src/lib/pages/home/components/QuickMenu.tsx @@ -1,5 +1,11 @@ -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"; @@ -15,16 +21,28 @@ const cardProps = { const secondaryMenu = [ { title: "Query", - subtitle: "Query and get response from smart contract", + subtitle: "Query and get state data", slug: "query", icon: MdSearch, }, { title: "Execute", - subtitle: "Send execute messages to smart contract", + subtitle: "Send messages / transactions", 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 execute messages require a wallet connection." /> - + { - + + {secondaryMenu.map((item) => ( { ))} - + + {/* + */} ); From 5aa574d2aa2da6a4ec28502b49e49c8d71d6fdd3 Mon Sep 17 00:00:00 2001 From: Ramida J Date: Thu, 19 Jan 2023 11:23:10 +0700 Subject: [PATCH 2/7] feat(components): see current page highlighted in left sidebar --- CHANGELOG.md | 1 + src/lib/layout/Navbar.tsx | 29 ++++++++++++++++++++++++----- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 957c7200b..0bb8a3280 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 - [#100](https://github.com/alleslabs/celatone-frontend/pull/100) Fix contract instantiated time parsing - [#97](https://github.com/alleslabs/celatone-frontend/pull/97) Change label style to always afloat - [#96](https://github.com/alleslabs/celatone-frontend/pull/96) Fix incorrect instantiated block height explorer link diff --git a/src/lib/layout/Navbar.tsx b/src/lib/layout/Navbar.tsx index 8e4c5c59e..09ef791f1 100644 --- a/src/lib/layout/Navbar.tsx +++ b/src/lib/layout/Navbar.tsx @@ -1,6 +1,7 @@ -import { Flex, Box, Text, Icon, Button, Spacer } from "@chakra-ui/react"; +import { Flex, Box, Text, Icon } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; import { observer } from "mobx-react-lite"; +import { useRouter } from "next/router"; import { MdHome, MdCode, @@ -48,6 +49,11 @@ const Navbar = observer(() => { { category: "Quick Actions", submenu: [ + { + name: "Deploy contract", + slug: "/deploy", + icon: MdOutlineAdd, + }, { name: "Query", slug: "/query", @@ -111,7 +117,16 @@ const Navbar = observer(() => { // ], // }, ]; - + const router = useRouter(); + const isCurrentPage = (slug: string) => { + if (slug === "/") { + return router.asPath === `/${router.query.network}`; + } + if (slug) { + return router.asPath === `/${router.query.network}${slug}`; + } + return undefined; + }; return ( @@ -152,6 +167,10 @@ const Navbar = observer(() => { _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"} > @@ -163,8 +182,8 @@ const Navbar = observer(() => { ))} - - { Deploy new contract - + */} ); }); From 8836353e2210206772c1f39c5d8cc8e054fec966 Mon Sep 17 00:00:00 2001 From: Ramida J Date: Thu, 19 Jan 2023 11:57:31 +0700 Subject: [PATCH 3/7] fix(components): change execute subtitle --- src/lib/pages/home/components/QuickMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx index 08dc11688..3da6b3945 100644 --- a/src/lib/pages/home/components/QuickMenu.tsx +++ b/src/lib/pages/home/components/QuickMenu.tsx @@ -27,7 +27,7 @@ const secondaryMenu = [ }, { title: "Execute", - subtitle: "Send messages / transactions", + subtitle: "Send transactions to contracts", slug: "execute", icon: MdInput, }, From 54b1fd9c99491c0d6a8d212681fd22eb9aea21b8 Mon Sep 17 00:00:00 2001 From: Ramida J Date: Thu, 19 Jan 2023 12:03:27 +0700 Subject: [PATCH 4/7] fix(components): fix quick menu height --- src/lib/pages/home/components/QuickMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx index 3da6b3945..3b35582f5 100644 --- a/src/lib/pages/home/components/QuickMenu.tsx +++ b/src/lib/pages/home/components/QuickMenu.tsx @@ -10,12 +10,12 @@ import { 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 = [ From a82525afb1c1165ccc1242ad2b7942a24918d816 Mon Sep 17 00:00:00 2001 From: Ramida J Date: Thu, 19 Jan 2023 14:28:38 +0700 Subject: [PATCH 5/7] fix(components): adjust navbar padding and add condition for highlight if dont have network --- src/lib/data/constant.ts | 2 +- src/lib/layout/Navbar.tsx | 17 +++++++++-------- src/lib/pages/home/components/QuickMenu.tsx | 2 -- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts index 42eb4d9c0..ac8da06c8 100644 --- a/src/lib/data/constant.ts +++ b/src/lib/data/constant.ts @@ -2,7 +2,7 @@ import { MdBookmark, MdInbox, MdLibraryBooks } from "react-icons/md"; import { MsgType } from "lib/types"; -export const INSTANTIATED_LIST_NAME = "Instantiated by me"; +export const INSTANTIATED_LIST_NAME = "Instantiated Contracts"; export const SAVED_LIST_NAME = "Saved Contracts"; diff --git a/src/lib/layout/Navbar.tsx b/src/lib/layout/Navbar.tsx index 09ef791f1..83ca2f53b 100644 --- a/src/lib/layout/Navbar.tsx +++ b/src/lib/layout/Navbar.tsx @@ -119,17 +119,18 @@ const Navbar = observer(() => { ]; const router = useRouter(); const isCurrentPage = (slug: string) => { - if (slug === "/") { - return router.asPath === `/${router.query.network}`; + const { network } = router.query; + const pathName = router.asPath; + if (network) { + return slug === "/" + ? pathName === `/${network}` + : pathName === `/${network}${slug}`; } - if (slug) { - return router.asPath === `/${router.query.network}${slug}`; - } - return undefined; + return pathName === `${slug}`; }; return ( - + {navMenu.map((item) => ( { {item.submenu.map((submenu) => ( { ))} - {/* - */} ); From 0ec35cbba18ca9d7b420f522bb6d2420ad2eb0bc Mon Sep 17 00:00:00 2001 From: Ramida J Date: Thu, 19 Jan 2023 17:41:03 +0700 Subject: [PATCH 6/7] fix(components): change recent activities title to recent queries and executes --- src/lib/pages/home/components/RecentActivities.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx index 82d3620e8..581007bc5 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 ? ( From d66fb5ca08017930a409a3abc13a743ac34d72f9 Mon Sep 17 00:00:00 2001 From: evilpeach Date: Wed, 25 Jan 2023 11:49:28 +0700 Subject: [PATCH 7/7] fix: use callback --- src/lib/layout/Navbar.tsx | 46 +++++++++++++++------------------------ 1 file changed, 17 insertions(+), 29 deletions(-) diff --git a/src/lib/layout/Navbar.tsx b/src/lib/layout/Navbar.tsx index 0933ea5e0..2b863e762 100644 --- a/src/lib/layout/Navbar.tsx +++ b/src/lib/layout/Navbar.tsx @@ -2,6 +2,7 @@ import { Flex, Box, Text, Icon } 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 { MdHome, MdCode, @@ -117,17 +118,23 @@ const Navbar = observer(() => { // ], // }, ]; + const router = useRouter(); - const isCurrentPage = (slug: string) => { - const { network } = router.query; - const pathName = router.asPath; - if (network) { - return slug === "/" - ? pathName === `/${network}` - : pathName === `/${network}${slug}`; - } - return pathName === `${slug}`; - }; + 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 ( @@ -185,25 +192,6 @@ const Navbar = observer(() => { ))} - {/* Hide deploy new contract button for now */} - {/* - - - - */} ); });