From 5d8343a8ad5def16e616d00e995bbdf42f1b78f0 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 15 Apr 2024 18:36:11 +0200 Subject: [PATCH 01/20] Implement `Navigation` component Implemented `Layout` component to account `Header` into router's scope for `NavLink` component support used in `Navigation` component --- dapp/src/DApp.tsx | 16 +------ dapp/src/components/Header/Navigation.tsx | 58 +++++++++++++++++++++++ dapp/src/components/Header/index.tsx | 11 ++++- dapp/src/components/shared/Layout.tsx | 21 ++++++++ dapp/src/components/shared/Link.tsx | 24 ++++++++++ dapp/src/pages/ActivityPage/index.tsx | 35 +++++++------- dapp/src/pages/OverviewPage/index.tsx | 53 +++++++++++---------- 7 files changed, 162 insertions(+), 56 deletions(-) create mode 100644 dapp/src/components/Header/Navigation.tsx create mode 100644 dapp/src/components/shared/Layout.tsx create mode 100644 dapp/src/components/shared/Link.tsx diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 71db1bc16..6dfaf1b43 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Box, ChakraProvider } from "@chakra-ui/react" +import { ChakraProvider } from "@chakra-ui/react" import { Provider as ReduxProvider } from "react-redux" import { RouterProvider } from "react-router-dom" import { useInitApp } from "./hooks" @@ -12,25 +12,13 @@ import { WalletContextProvider, } from "./contexts" import { AcreSdkProvider } from "./acre-react/contexts" -import Header from "./components/Header" -import Sidebar from "./components/Sidebar" -import DocsDrawer from "./components/DocsDrawer" import GlobalStyles from "./components/GlobalStyles" import { router } from "./router" function DApp() { useInitApp() - return ( - <> -
- - - - - - - ) + return } function DAppProviders() { diff --git a/dapp/src/components/Header/Navigation.tsx b/dapp/src/components/Header/Navigation.tsx new file mode 100644 index 000000000..b528ac297 --- /dev/null +++ b/dapp/src/components/Header/Navigation.tsx @@ -0,0 +1,58 @@ +import React from "react" +import { List, ListItem, StackProps, HStack, Box } from "@chakra-ui/react" +import { useLocation } from "react-router-dom" +import { motion } from "framer-motion" +import Link from "../shared/Link" + +export type NavigationItemType = { + label: string + href: string +} +type NavigationProps = StackProps & { + items: NavigationItemType[] +} + +function ActiveItemIndicator() { + return ( + + ) +} + +function Navigation(props: NavigationProps) { + const { items, ...restProps } = props + const { pathname } = useLocation() + + return ( + + {items.map((item) => ( + + + {item.label} + + {pathname === item.href && } + + ))} + + ) +} + +export default Navigation diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx index df0a2eb53..870964a98 100644 --- a/dapp/src/components/Header/index.tsx +++ b/dapp/src/components/Header/index.tsx @@ -1,12 +1,21 @@ import React from "react" -import { Flex, HStack, Icon } from "@chakra-ui/react" import { AcreLogo } from "#/assets/icons" +import { Flex, HStack, Icon } from "@chakra-ui/react" +import { routerPath } from "#/router/path" import ConnectWallet from "./ConnectWallet" +import Navigation, { NavigationItemType } from "./Navigation" + +// TODO: To be adjusted after project cleanup +const NAVIGATION_ITEMS: NavigationItemType[] = [ + { label: "Home", href: routerPath.home }, + { label: "Activity", href: `${routerPath.activity}/1` }, +] export default function Header() { return ( + diff --git a/dapp/src/components/shared/Layout.tsx b/dapp/src/components/shared/Layout.tsx new file mode 100644 index 000000000..efd50bb3c --- /dev/null +++ b/dapp/src/components/shared/Layout.tsx @@ -0,0 +1,21 @@ +import React from "react" +import { Box, BoxProps } from "@chakra-ui/react" +import Header from "../Header" +import DocsDrawer from "../DocsDrawer" +import Sidebar from "../Sidebar" + +function Layout(props: BoxProps) { + const { children, ...restProps } = props + return ( + <> + +
+ {children} + + + + + ) +} + +export default Layout diff --git a/dapp/src/components/shared/Link.tsx b/dapp/src/components/shared/Link.tsx new file mode 100644 index 000000000..eaff11ebc --- /dev/null +++ b/dapp/src/components/shared/Link.tsx @@ -0,0 +1,24 @@ +import React from "react" +import { + Link as ChakraLink, + LinkProps as ChakraLinkProps, +} from "@chakra-ui/react" +import { + Link as RouterLink, + NavLink as RouterNavLink, + NavLinkProps, +} from "react-router-dom" + +type LinkProps = Omit & + Pick & { + isNavLink?: boolean + } + +function Link(props: LinkProps) { + const { isNavLink = false, ...restProps } = props + return ( + + ) +} + +export default Link diff --git a/dapp/src/pages/ActivityPage/index.tsx b/dapp/src/pages/ActivityPage/index.tsx index 8d61143c2..ff2174520 100644 --- a/dapp/src/pages/ActivityPage/index.tsx +++ b/dapp/src/pages/ActivityPage/index.tsx @@ -4,6 +4,7 @@ import { Flex, Link as ChakraLink, Icon } from "@chakra-ui/react" import { Link as ReactRouterLink } from "react-router-dom" import { useSidebar } from "#/hooks" import { ArrowLeft } from "#/assets/icons" +import Layout from "#/components/shared/Layout" import ActivityDetails from "./ActivityDetails" import { ActivityBar } from "./ActivityBar" @@ -16,22 +17,24 @@ export default function ActivityPage() { }, [closeSidebar, openSideBar]) return ( - - - - - - - + + + + + + + + + - + ) } diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index 2a7433b92..fa96a63e0 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -3,6 +3,7 @@ import { Flex, Grid, HStack, Switch } from "@chakra-ui/react" import { TextSm } from "#/components/shared/Typography" import { USD } from "#/constants" import { chakraUnitToPx } from "#/theme/utils" +import Layout from "#/components/shared/Layout" import PositionDetails from "./PositionDetails" import Statistics from "./Statistics" import TransactionHistory from "./TransactionHistory" @@ -11,32 +12,34 @@ import { ActivityCarousel } from "./ActivityCarousel" export default function OverviewPage() { return ( - - - {/* TODO: Handle click actions */} - - Show values in {USD.symbol} - + + + + {/* TODO: Handle click actions */} + + Show values in {USD.symbol} + - - - - - + + + + - - - - - + gridTemplateColumns={{ base: "30% 1fr", xl: "20% 1fr" }} + gridTemplateRows={{ base: "55% 1fr", xl: "45% 1fr" }} + h="80vh" + gap={6} + > + + + + + + ) } From 06596badf510ea524cb71b6248bbaa0769d0b9f6 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 16 Apr 2024 00:56:21 +0200 Subject: [PATCH 02/20] Define `Layout` as wrapper route With proposed approach it's redundant to wrap each page with `Layout` component - it's handled by the wrapper route. --- dapp/src/components/shared/Layout.tsx | 6 +-- dapp/src/pages/ActivityPage/index.tsx | 35 ++++++++---------- dapp/src/pages/OverviewPage/index.tsx | 53 +++++++++++++-------------- dapp/src/router/index.tsx | 19 +++++++--- 4 files changed, 57 insertions(+), 56 deletions(-) diff --git a/dapp/src/components/shared/Layout.tsx b/dapp/src/components/shared/Layout.tsx index efd50bb3c..20e34bf85 100644 --- a/dapp/src/components/shared/Layout.tsx +++ b/dapp/src/components/shared/Layout.tsx @@ -1,16 +1,16 @@ import React from "react" import { Box, BoxProps } from "@chakra-ui/react" +import { Outlet } from "react-router-dom" import Header from "../Header" import DocsDrawer from "../DocsDrawer" import Sidebar from "../Sidebar" function Layout(props: BoxProps) { - const { children, ...restProps } = props return ( <> - +
- {children} + diff --git a/dapp/src/pages/ActivityPage/index.tsx b/dapp/src/pages/ActivityPage/index.tsx index ff2174520..8d61143c2 100644 --- a/dapp/src/pages/ActivityPage/index.tsx +++ b/dapp/src/pages/ActivityPage/index.tsx @@ -4,7 +4,6 @@ import { Flex, Link as ChakraLink, Icon } from "@chakra-ui/react" import { Link as ReactRouterLink } from "react-router-dom" import { useSidebar } from "#/hooks" import { ArrowLeft } from "#/assets/icons" -import Layout from "#/components/shared/Layout" import ActivityDetails from "./ActivityDetails" import { ActivityBar } from "./ActivityBar" @@ -17,24 +16,22 @@ export default function ActivityPage() { }, [closeSidebar, openSideBar]) return ( - - - - - - - - - + + + + + + + - + ) } diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index fa96a63e0..2a7433b92 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -3,7 +3,6 @@ import { Flex, Grid, HStack, Switch } from "@chakra-ui/react" import { TextSm } from "#/components/shared/Typography" import { USD } from "#/constants" import { chakraUnitToPx } from "#/theme/utils" -import Layout from "#/components/shared/Layout" import PositionDetails from "./PositionDetails" import Statistics from "./Statistics" import TransactionHistory from "./TransactionHistory" @@ -12,34 +11,32 @@ import { ActivityCarousel } from "./ActivityCarousel" export default function OverviewPage() { return ( - - - - {/* TODO: Handle click actions */} - - Show values in {USD.symbol} - + + + {/* TODO: Handle click actions */} + + Show values in {USD.symbol} + - - - - - + + + + - - - - - - + gridTemplateColumns={{ base: "30% 1fr", xl: "20% 1fr" }} + gridTemplateRows={{ base: "55% 1fr", xl: "45% 1fr" }} + h="80vh" + gap={6} + > + + + + + ) } diff --git a/dapp/src/router/index.tsx b/dapp/src/router/index.tsx index 5d280ad22..34c149547 100644 --- a/dapp/src/router/index.tsx +++ b/dapp/src/router/index.tsx @@ -1,16 +1,23 @@ import React from "react" import { createBrowserRouter } from "react-router-dom" import OverviewPage from "#/pages/OverviewPage" +import Layout from "#/components/shared/Layout" import ActivityPage from "#/pages/ActivityPage" import { routerPath } from "./path" export const router = createBrowserRouter([ { - path: routerPath.home, - element: , - }, - { - path: `${routerPath.activity}/:activityId`, - element: , + element: , + children: [ + { + path: routerPath.home, + element: , + index: true, + }, + { + path: `${routerPath.activity}/:activityId`, + element: , + }, + ], }, ]) From c0b0df30383d5c209695ee903a999496c2abaca3 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 16 Apr 2024 00:56:21 +0200 Subject: [PATCH 03/20] Implement conditional `ConnectWallet` rendering --- dapp/src/components/Header/ConnectWallet.tsx | 6 +++++- dapp/src/hooks/index.ts | 1 + dapp/src/hooks/router/index.ts | 1 + dapp/src/hooks/router/useIsRoute.ts | 10 ++++++++++ 4 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 dapp/src/hooks/router/index.ts create mode 100644 dapp/src/hooks/router/useIsRoute.ts diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index 9aee57748..e4ce79a44 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -1,6 +1,7 @@ import React from "react" import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react" import { + useIsHomeRoute, useRequestBitcoinAccount, useRequestEthereumAccount, useWalletContext, @@ -32,11 +33,14 @@ const getCustomDataByAccount = ( export default function ConnectWallet() { const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount() const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount() - const { btcAccount, ethAccount } = useWalletContext() + const { btcAccount, ethAccount, isConnected } = useWalletContext() const customDataBtcAccount = getCustomDataByAccount(btcAccount) const customDataEthAccount = getCustomDataByAccount(ethAccount) + const isHomeRoute = useIsHomeRoute() + if (!isConnected && isHomeRoute) return null + const handleConnectBitcoinAccount = () => { logPromiseFailure(requestBitcoinAccount()) } diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 8cbe7c13b..e475a1ac2 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -21,3 +21,4 @@ export * from "./useCountdown" export * from "./useActivities" export * from "./useFetchBTCBalance" export * from "./useSize" +export * from "./router" diff --git a/dapp/src/hooks/router/index.ts b/dapp/src/hooks/router/index.ts new file mode 100644 index 000000000..9383a1a37 --- /dev/null +++ b/dapp/src/hooks/router/index.ts @@ -0,0 +1 @@ +export * from "./useIsRoute" diff --git a/dapp/src/hooks/router/useIsRoute.ts b/dapp/src/hooks/router/useIsRoute.ts new file mode 100644 index 000000000..3367a35aa --- /dev/null +++ b/dapp/src/hooks/router/useIsRoute.ts @@ -0,0 +1,10 @@ +import { routerPath } from "#/router/path" +import { useLocation } from "react-router-dom" + +export const useIsRoute = (route: string) => { + const location = useLocation() + + return location.pathname === route +} + +export const useIsHomeRoute = () => useIsRoute(routerPath.home) From 0c707f7cdd12872288140d377815c777ff1bb4d2 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 16 Apr 2024 01:14:27 +0200 Subject: [PATCH 04/20] Remove Ethereum wallet connection button --- dapp/src/components/Header/ConnectWallet.tsx | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index e4ce79a44..8c6eed8d3 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -3,12 +3,11 @@ import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react" import { useIsHomeRoute, useRequestBitcoinAccount, - useRequestEthereumAccount, useWalletContext, } from "#/hooks" import { CurrencyBalance } from "#/components/shared/CurrencyBalance" import { TextMd } from "#/components/shared/Typography" -import { BitcoinIcon, EthereumIcon } from "#/assets/icons" +import { BitcoinIcon } from "#/assets/icons" import { Account } from "@ledgerhq/wallet-api-client" import { CURRENCY_ID_BITCOIN } from "#/constants" import { @@ -32,11 +31,9 @@ const getCustomDataByAccount = ( export default function ConnectWallet() { const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount() - const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount() - const { btcAccount, ethAccount, isConnected } = useWalletContext() + const { btcAccount, isConnected } = useWalletContext() const customDataBtcAccount = getCustomDataByAccount(btcAccount) - const customDataEthAccount = getCustomDataByAccount(ethAccount) const isHomeRoute = useIsHomeRoute() if (!isConnected && isHomeRoute) return null @@ -45,10 +42,6 @@ export default function ConnectWallet() { logPromiseFailure(requestBitcoinAccount()) } - const handleConnectEthereumAccount = () => { - logPromiseFailure(requestEthereumAccount()) - } - return ( @@ -74,14 +67,6 @@ export default function ConnectWallet() { {customDataBtcAccount.text} - ) } From a06c1de8b995bcdd3886b7849f4df00e25748010 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 16 Apr 2024 01:21:26 +0200 Subject: [PATCH 05/20] Implement `ConnectWallet`'s presence animation --- dapp/src/components/Header/ConnectWallet.tsx | 66 ++++++++++++-------- 1 file changed, 41 insertions(+), 25 deletions(-) diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index 8c6eed8d3..bbb4b5087 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -15,6 +15,12 @@ import { logPromiseFailure, truncateAddress, } from "#/utils" +import { AnimatePresence, motion, Variants } from "framer-motion" + +const containerVariants: Variants = { + hidden: { opacity: 0, y: -48 }, + visible: { opacity: 1, y: 0 }, +} const getCustomDataByAccount = ( account?: Account, @@ -36,37 +42,47 @@ export default function ConnectWallet() { const customDataBtcAccount = getCustomDataByAccount(btcAccount) const isHomeRoute = useIsHomeRoute() - if (!isConnected && isHomeRoute) return null const handleConnectBitcoinAccount = () => { logPromiseFailure(requestBitcoinAccount()) } return ( - - - Balance - - - - - - + + Balance + + + + + + + ) : null} + ) } From e54282f816eec74f98f28e86a14c5b4d2c044ec0 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 16 Apr 2024 10:47:14 +0200 Subject: [PATCH 06/20] Adjust `Header`'s padding --- dapp/src/components/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx index 870964a98..888406aa5 100644 --- a/dapp/src/components/Header/index.tsx +++ b/dapp/src/components/Header/index.tsx @@ -13,7 +13,7 @@ const NAVIGATION_ITEMS: NavigationItemType[] = [ export default function Header() { return ( - + From 5cedbf28706c2423ef96f5574a1a1efcc18a8b4c Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 17 Apr 2024 12:52:24 +0200 Subject: [PATCH 07/20] Refactor `Navigation` component --- dapp/src/components/Header/Navigation.tsx | 17 ++++++++-------- dapp/src/components/shared/Link.tsx | 24 ++++++++++++++--------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/dapp/src/components/Header/Navigation.tsx b/dapp/src/components/Header/Navigation.tsx index b528ac297..fe02bae9b 100644 --- a/dapp/src/components/Header/Navigation.tsx +++ b/dapp/src/components/Header/Navigation.tsx @@ -1,8 +1,7 @@ import React from "react" import { List, ListItem, StackProps, HStack, Box } from "@chakra-ui/react" -import { useLocation } from "react-router-dom" import { motion } from "framer-motion" -import Link from "../shared/Link" +import { NavLink } from "../shared/Link" export type NavigationItemType = { label: string @@ -29,14 +28,12 @@ function ActiveItemIndicator() { function Navigation(props: NavigationProps) { const { items, ...restProps } = props - const { pathname } = useLocation() return ( {items.map((item) => ( - - {item.label} - - {pathname === item.href && } + {({ isActive }) => ( + <> + {item.label} + {isActive && } + + )} + ))} diff --git a/dapp/src/components/shared/Link.tsx b/dapp/src/components/shared/Link.tsx index eaff11ebc..9683b1ee0 100644 --- a/dapp/src/components/shared/Link.tsx +++ b/dapp/src/components/shared/Link.tsx @@ -5,20 +5,26 @@ import { } from "@chakra-ui/react" import { Link as RouterLink, + LinkProps as RouterLinkProps, NavLink as RouterNavLink, - NavLinkProps, + NavLinkProps as RouterNavLinkProps, } from "react-router-dom" type LinkProps = Omit & - Pick & { - isNavLink?: boolean - } + Pick -function Link(props: LinkProps) { - const { isNavLink = false, ...restProps } = props +type NavLinkProps = Omit & + Pick + +export function Link(props: LinkProps) { + return +} + +export function NavLink(props: NavLinkProps) { + const { children, ...restProps } = props return ( - + + {children as React.ReactNode} + ) } - -export default Link From dec2bcca1071adbc492f0bc833a3d89acb803d42 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 17 Apr 2024 12:55:20 +0200 Subject: [PATCH 08/20] Replace color values with semantic tokens --- dapp/src/components/Header/Navigation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dapp/src/components/Header/Navigation.tsx b/dapp/src/components/Header/Navigation.tsx index fe02bae9b..564e6a694 100644 --- a/dapp/src/components/Header/Navigation.tsx +++ b/dapp/src/components/Header/Navigation.tsx @@ -40,8 +40,8 @@ function Navigation(props: NavigationProps) { lineHeight="md" fontWeight="bold" mb={2} - color="hsl(347, 5%, 39%)" - _activeLink={{ color: "hsl(345, 6%, 13%)" }} + color="grey.500" + _activeLink={{ color: "grey.700" }} > {({ isActive }) => ( <> From bc41b76d62844b8dcc954c9d6abd3c5bf93be732 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 17 Apr 2024 12:57:34 +0200 Subject: [PATCH 09/20] Wrap `Navigation` component with `nav` element --- dapp/src/components/Header/Navigation.tsx | 52 ++++++++++++----------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/dapp/src/components/Header/Navigation.tsx b/dapp/src/components/Header/Navigation.tsx index 564e6a694..e185a5e5a 100644 --- a/dapp/src/components/Header/Navigation.tsx +++ b/dapp/src/components/Header/Navigation.tsx @@ -1,5 +1,5 @@ import React from "react" -import { List, ListItem, StackProps, HStack, Box } from "@chakra-ui/react" +import { List, ListItem, HStack, Box, BoxProps } from "@chakra-ui/react" import { motion } from "framer-motion" import { NavLink } from "../shared/Link" @@ -7,7 +7,7 @@ export type NavigationItemType = { label: string href: string } -type NavigationProps = StackProps & { +type NavigationProps = BoxProps & { items: NavigationItemType[] } @@ -30,29 +30,31 @@ function Navigation(props: NavigationProps) { const { items, ...restProps } = props return ( - - {items.map((item) => ( - - - {({ isActive }) => ( - <> - {item.label} - {isActive && } - - )} - - - ))} - + + + {items.map((item) => ( + + + {({ isActive }) => ( + <> + {item.label} + {isActive && } + + )} + + + ))} + + ) } From 5d25c89aa15453b56e5a265e85db88b476022c94 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 17 Apr 2024 12:59:21 +0200 Subject: [PATCH 10/20] Move `Header` outside `main` element --- dapp/src/components/shared/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/components/shared/Layout.tsx b/dapp/src/components/shared/Layout.tsx index 20e34bf85..3955ae92f 100644 --- a/dapp/src/components/shared/Layout.tsx +++ b/dapp/src/components/shared/Layout.tsx @@ -8,8 +8,8 @@ import Sidebar from "../Sidebar" function Layout(props: BoxProps) { return ( <> +
-
From b02de09c2d30566ac3472a642315db310fdc22b9 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 17 Apr 2024 13:04:34 +0200 Subject: [PATCH 11/20] Update comment to be more descriptive --- dapp/src/components/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx index 888406aa5..97cd93843 100644 --- a/dapp/src/components/Header/index.tsx +++ b/dapp/src/components/Header/index.tsx @@ -5,7 +5,7 @@ import { routerPath } from "#/router/path" import ConnectWallet from "./ConnectWallet" import Navigation, { NavigationItemType } from "./Navigation" -// TODO: To be adjusted after project cleanup +// TODO: Mock data, to be adjusted after project pivot/cleanup const NAVIGATION_ITEMS: NavigationItemType[] = [ { label: "Home", href: routerPath.home }, { label: "Activity", href: `${routerPath.activity}/1` }, From 7ce1664234bd638a3aa2fed3af2cce76b443f1a0 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 17 Apr 2024 13:05:55 +0200 Subject: [PATCH 12/20] Remove explicit null value in `ConnectWallet` --- dapp/src/components/Header/ConnectWallet.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index bbb4b5087..ba0c073a2 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -49,7 +49,7 @@ export default function ConnectWallet() { return ( - {isConnected || !isHomeRoute ? ( + {(isConnected || !isHomeRoute) && ( - ) : null} + )} ) } From 78b081418ec75afb6434903269289be69f0b044a Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Thu, 18 Apr 2024 13:03:23 +0200 Subject: [PATCH 13/20] Rename hook --- dapp/src/components/Header/ConnectWallet.tsx | 4 ++-- dapp/src/hooks/router/index.ts | 2 +- dapp/src/hooks/router/{useIsRoute.ts => useIsActiveRoute.ts} | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) rename dapp/src/hooks/router/{useIsRoute.ts => useIsActiveRoute.ts} (56%) diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index ba0c073a2..9a55eaa2b 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -1,7 +1,7 @@ import React from "react" import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react" import { - useIsHomeRoute, + useIsHomeRouteActive, useRequestBitcoinAccount, useWalletContext, } from "#/hooks" @@ -41,7 +41,7 @@ export default function ConnectWallet() { const customDataBtcAccount = getCustomDataByAccount(btcAccount) - const isHomeRoute = useIsHomeRoute() + const isHomeRoute = useIsHomeRouteActive() const handleConnectBitcoinAccount = () => { logPromiseFailure(requestBitcoinAccount()) diff --git a/dapp/src/hooks/router/index.ts b/dapp/src/hooks/router/index.ts index 9383a1a37..cb8162e91 100644 --- a/dapp/src/hooks/router/index.ts +++ b/dapp/src/hooks/router/index.ts @@ -1 +1 @@ -export * from "./useIsRoute" +export * from "./useIsActiveRoute" diff --git a/dapp/src/hooks/router/useIsRoute.ts b/dapp/src/hooks/router/useIsActiveRoute.ts similarity index 56% rename from dapp/src/hooks/router/useIsRoute.ts rename to dapp/src/hooks/router/useIsActiveRoute.ts index 3367a35aa..715c3702a 100644 --- a/dapp/src/hooks/router/useIsRoute.ts +++ b/dapp/src/hooks/router/useIsActiveRoute.ts @@ -1,10 +1,10 @@ import { routerPath } from "#/router/path" import { useLocation } from "react-router-dom" -export const useIsRoute = (route: string) => { +export const useIsActiveRoute = (route: string) => { const location = useLocation() return location.pathname === route } -export const useIsHomeRoute = () => useIsRoute(routerPath.home) +export const useIsHomeRouteActive = () => useIsActiveRoute(routerPath.home) From 66fc68003d3fba9024ab8d4f1880792ba750b7a3 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Thu, 18 Apr 2024 13:53:23 +0200 Subject: [PATCH 14/20] Adjust navigation items --- dapp/src/components/Header/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx index 97cd93843..13b61f287 100644 --- a/dapp/src/components/Header/index.tsx +++ b/dapp/src/components/Header/index.tsx @@ -5,10 +5,10 @@ import { routerPath } from "#/router/path" import ConnectWallet from "./ConnectWallet" import Navigation, { NavigationItemType } from "./Navigation" -// TODO: Mock data, to be adjusted after project pivot/cleanup +// TODO: To be adjusted after project pivot/cleanup const NAVIGATION_ITEMS: NavigationItemType[] = [ - { label: "Home", href: routerPath.home }, - { label: "Activity", href: `${routerPath.activity}/1` }, + { label: "Season 1", href: routerPath.home }, + { label: "Dashboard", href: routerPath.overview }, ] export default function Header() { From cc687129052cbac3e549d84e732175cd88688430 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 22 Apr 2024 17:34:36 +0200 Subject: [PATCH 15/20] Encaplsulate `NavigationItem` component --- dapp/src/components/Header/Navigation.tsx | 61 ------------------- .../Header/Navigation/Navigation.tsx | 23 +++++++ .../Header/Navigation/NavigationItem.tsx | 52 ++++++++++++++++ .../src/components/Header/Navigation/index.ts | 3 + dapp/src/components/Header/index.tsx | 4 +- 5 files changed, 80 insertions(+), 63 deletions(-) delete mode 100644 dapp/src/components/Header/Navigation.tsx create mode 100644 dapp/src/components/Header/Navigation/Navigation.tsx create mode 100644 dapp/src/components/Header/Navigation/NavigationItem.tsx create mode 100644 dapp/src/components/Header/Navigation/index.ts diff --git a/dapp/src/components/Header/Navigation.tsx b/dapp/src/components/Header/Navigation.tsx deleted file mode 100644 index e185a5e5a..000000000 --- a/dapp/src/components/Header/Navigation.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react" -import { List, ListItem, HStack, Box, BoxProps } from "@chakra-ui/react" -import { motion } from "framer-motion" -import { NavLink } from "../shared/Link" - -export type NavigationItemType = { - label: string - href: string -} -type NavigationProps = BoxProps & { - items: NavigationItemType[] -} - -function ActiveItemIndicator() { - return ( - - ) -} - -function Navigation(props: NavigationProps) { - const { items, ...restProps } = props - - return ( - - - {items.map((item) => ( - - - {({ isActive }) => ( - <> - {item.label} - {isActive && } - - )} - - - ))} - - - ) -} - -export default Navigation diff --git a/dapp/src/components/Header/Navigation/Navigation.tsx b/dapp/src/components/Header/Navigation/Navigation.tsx new file mode 100644 index 000000000..439e92f69 --- /dev/null +++ b/dapp/src/components/Header/Navigation/Navigation.tsx @@ -0,0 +1,23 @@ +import React from "react" +import { Box, BoxProps, HStack, List } from "@chakra-ui/react" +import NavigationItem, { NavigationItemProps } from "./NavigationItem" + +type NavigationProps = BoxProps & { + items: NavigationItemProps[] +} + +function Navigation(props: NavigationProps) { + const { items, ...restProps } = props + + return ( + + + {items.map((item) => ( + + ))} + + + ) +} + +export default Navigation diff --git a/dapp/src/components/Header/Navigation/NavigationItem.tsx b/dapp/src/components/Header/Navigation/NavigationItem.tsx new file mode 100644 index 000000000..02e8ac99c --- /dev/null +++ b/dapp/src/components/Header/Navigation/NavigationItem.tsx @@ -0,0 +1,52 @@ +import React from "react" +import { Box, ListItem, ListItemProps } from "@chakra-ui/react" +import { motion } from "framer-motion" +import { NavLink } from "../../shared/Link" + +export type NavigationItemProps = ListItemProps & { + label: string + href: string +} + +function ActiveItemIndicator() { + return ( + + ) +} + +function NavigationItem(props: NavigationItemProps) { + const { label, href, ...restProps } = props + + return ( + + + {({ isActive }) => ( + <> + {label} + {isActive && } + + )} + + + ) +} + +export default NavigationItem diff --git a/dapp/src/components/Header/Navigation/index.ts b/dapp/src/components/Header/Navigation/index.ts new file mode 100644 index 000000000..8eaa374cf --- /dev/null +++ b/dapp/src/components/Header/Navigation/index.ts @@ -0,0 +1,3 @@ +export { default as Navigation } from "./Navigation" +export { default as NavigationItem } from "./NavigationItem" +export type { NavigationItemProps as NavigationItemType } from "./NavigationItem" diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx index 13b61f287..1e9408f6c 100644 --- a/dapp/src/components/Header/index.tsx +++ b/dapp/src/components/Header/index.tsx @@ -1,9 +1,9 @@ import React from "react" import { AcreLogo } from "#/assets/icons" -import { Flex, HStack, Icon } from "@chakra-ui/react" import { routerPath } from "#/router/path" +import { Flex, HStack, Icon } from "@chakra-ui/react" import ConnectWallet from "./ConnectWallet" -import Navigation, { NavigationItemType } from "./Navigation" +import { Navigation, NavigationItemType } from "./Navigation" // TODO: To be adjusted after project pivot/cleanup const NAVIGATION_ITEMS: NavigationItemType[] = [ From bea88fc476e54fbfc2aa5a2c44c9b48dfece2057 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 22 Apr 2024 18:08:16 +0200 Subject: [PATCH 16/20] Define 'navigation' Link theme variant --- .../Header/Navigation/NavigationItem.tsx | 42 +++++++------------ dapp/src/theme/Link.ts | 38 +++++++++++++++-- 2 files changed, 49 insertions(+), 31 deletions(-) diff --git a/dapp/src/components/Header/Navigation/NavigationItem.tsx b/dapp/src/components/Header/Navigation/NavigationItem.tsx index 02e8ac99c..e6c59642d 100644 --- a/dapp/src/components/Header/Navigation/NavigationItem.tsx +++ b/dapp/src/components/Header/Navigation/NavigationItem.tsx @@ -1,5 +1,10 @@ import React from "react" -import { Box, ListItem, ListItemProps } from "@chakra-ui/react" +import { + Box, + ListItem, + ListItemProps, + useMultiStyleConfig, +} from "@chakra-ui/react" import { motion } from "framer-motion" import { NavLink } from "../../shared/Link" @@ -8,40 +13,23 @@ export type NavigationItemProps = ListItemProps & { href: string } -function ActiveItemIndicator() { - return ( - - ) -} - function NavigationItem(props: NavigationItemProps) { const { label, href, ...restProps } = props + const styles = useMultiStyleConfig("Link", { variant: "navigation" }) return ( - + {({ isActive }) => ( <> {label} - {isActive && } + {isActive && ( + + )} )} diff --git a/dapp/src/theme/Link.ts b/dapp/src/theme/Link.ts index 3c9d7c7aa..7c283559e 100644 --- a/dapp/src/theme/Link.ts +++ b/dapp/src/theme/Link.ts @@ -1,6 +1,9 @@ -import { defineStyle, defineStyleConfig } from "@chakra-ui/react" +import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react" -const baseStyle = defineStyle({ +const PARTS = ["container", "indicator"] +const multiStyleConfig = createMultiStyleConfigHelpers(PARTS) + +const containerBaseStyle = defineStyle({ fontWeight: "semibold", fontSize: "sm", lineHeight: "sm", @@ -10,6 +13,33 @@ const baseStyle = defineStyle({ }, }) -export const linkTheme = defineStyleConfig({ - baseStyle, +const navigationContainerStyles = defineStyle({ + display: "block", + fontSize: "md", + lineHeight: "md", + fontWeight: "bold", + marginBottom: 2, + color: "grey.500", + _activeLink: { color: "grey.700" }, +}) + +const navigationIndicatorStyles = defineStyle({ + pos: "absolute", + bottom: 0.5, + left: 0, + w: "full", + h: 0.5, + bg: "brand.400", +}) + +export const linkTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle: { + container: containerBaseStyle, + }, + variants: { + navigation: { + container: navigationContainerStyles, + indicator: navigationIndicatorStyles, + }, + }, }) From 4ffdb22aa41fb3c5f6ecd316cb67543d854d45c5 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 22 Apr 2024 18:10:44 +0200 Subject: [PATCH 17/20] Encapsulate `NavLink` component into separate file --- .../Header/Navigation/NavigationItem.tsx | 2 +- dapp/src/components/shared/Link.tsx | 14 ------------- dapp/src/components/shared/NavLink.tsx | 21 +++++++++++++++++++ 3 files changed, 22 insertions(+), 15 deletions(-) create mode 100644 dapp/src/components/shared/NavLink.tsx diff --git a/dapp/src/components/Header/Navigation/NavigationItem.tsx b/dapp/src/components/Header/Navigation/NavigationItem.tsx index e6c59642d..07797b0a8 100644 --- a/dapp/src/components/Header/Navigation/NavigationItem.tsx +++ b/dapp/src/components/Header/Navigation/NavigationItem.tsx @@ -6,7 +6,7 @@ import { useMultiStyleConfig, } from "@chakra-ui/react" import { motion } from "framer-motion" -import { NavLink } from "../../shared/Link" +import { NavLink } from "../../shared/NavLink" export type NavigationItemProps = ListItemProps & { label: string diff --git a/dapp/src/components/shared/Link.tsx b/dapp/src/components/shared/Link.tsx index 9683b1ee0..cc0185670 100644 --- a/dapp/src/components/shared/Link.tsx +++ b/dapp/src/components/shared/Link.tsx @@ -6,25 +6,11 @@ import { import { Link as RouterLink, LinkProps as RouterLinkProps, - NavLink as RouterNavLink, - NavLinkProps as RouterNavLinkProps, } from "react-router-dom" type LinkProps = Omit & Pick -type NavLinkProps = Omit & - Pick - export function Link(props: LinkProps) { return } - -export function NavLink(props: NavLinkProps) { - const { children, ...restProps } = props - return ( - - {children as React.ReactNode} - - ) -} diff --git a/dapp/src/components/shared/NavLink.tsx b/dapp/src/components/shared/NavLink.tsx new file mode 100644 index 000000000..1826af89a --- /dev/null +++ b/dapp/src/components/shared/NavLink.tsx @@ -0,0 +1,21 @@ +import React from "react" +import { + Link as ChakraLink, + LinkProps as ChakraLinkProps, +} from "@chakra-ui/react" +import { + NavLink as RouterNavLink, + NavLinkProps as RouterNavLinkProps, +} from "react-router-dom" + +type NavLinkProps = Omit & + Pick + +export function NavLink(props: NavLinkProps) { + const { children, ...restProps } = props + return ( + + {children as React.ReactNode} + + ) +} From 2a9b31a5d9462778bec06d5d1bdad3e08d0b974b Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 22 Apr 2024 18:23:14 +0200 Subject: [PATCH 18/20] Move navigation item type definition to types dir --- dapp/src/components/Header/Navigation/Navigation.tsx | 5 +++-- dapp/src/components/Header/Navigation/NavigationItem.tsx | 6 ++---- dapp/src/components/Header/Navigation/index.ts | 1 - dapp/src/components/Header/index.tsx | 3 ++- dapp/src/types/navigation.ts | 4 ++++ 5 files changed, 11 insertions(+), 8 deletions(-) create mode 100644 dapp/src/types/navigation.ts diff --git a/dapp/src/components/Header/Navigation/Navigation.tsx b/dapp/src/components/Header/Navigation/Navigation.tsx index 439e92f69..bcfe4357f 100644 --- a/dapp/src/components/Header/Navigation/Navigation.tsx +++ b/dapp/src/components/Header/Navigation/Navigation.tsx @@ -1,9 +1,10 @@ import React from "react" import { Box, BoxProps, HStack, List } from "@chakra-ui/react" -import NavigationItem, { NavigationItemProps } from "./NavigationItem" +import { NavigationItemType } from "#/types/navigation" +import NavigationItem from "./NavigationItem" type NavigationProps = BoxProps & { - items: NavigationItemProps[] + items: NavigationItemType[] } function Navigation(props: NavigationProps) { diff --git a/dapp/src/components/Header/Navigation/NavigationItem.tsx b/dapp/src/components/Header/Navigation/NavigationItem.tsx index 07797b0a8..ad5c4817f 100644 --- a/dapp/src/components/Header/Navigation/NavigationItem.tsx +++ b/dapp/src/components/Header/Navigation/NavigationItem.tsx @@ -6,12 +6,10 @@ import { useMultiStyleConfig, } from "@chakra-ui/react" import { motion } from "framer-motion" +import { NavigationItemType } from "#/types/navigation" import { NavLink } from "../../shared/NavLink" -export type NavigationItemProps = ListItemProps & { - label: string - href: string -} +type NavigationItemProps = ListItemProps & NavigationItemType function NavigationItem(props: NavigationItemProps) { const { label, href, ...restProps } = props diff --git a/dapp/src/components/Header/Navigation/index.ts b/dapp/src/components/Header/Navigation/index.ts index 8eaa374cf..a6896981a 100644 --- a/dapp/src/components/Header/Navigation/index.ts +++ b/dapp/src/components/Header/Navigation/index.ts @@ -1,3 +1,2 @@ export { default as Navigation } from "./Navigation" export { default as NavigationItem } from "./NavigationItem" -export type { NavigationItemProps as NavigationItemType } from "./NavigationItem" diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx index 1e9408f6c..efcdde6ac 100644 --- a/dapp/src/components/Header/index.tsx +++ b/dapp/src/components/Header/index.tsx @@ -2,8 +2,9 @@ import React from "react" import { AcreLogo } from "#/assets/icons" import { routerPath } from "#/router/path" import { Flex, HStack, Icon } from "@chakra-ui/react" +import { NavigationItemType } from "#/types/navigation" import ConnectWallet from "./ConnectWallet" -import { Navigation, NavigationItemType } from "./Navigation" +import { Navigation } from "./Navigation" // TODO: To be adjusted after project pivot/cleanup const NAVIGATION_ITEMS: NavigationItemType[] = [ diff --git a/dapp/src/types/navigation.ts b/dapp/src/types/navigation.ts new file mode 100644 index 000000000..058b095d0 --- /dev/null +++ b/dapp/src/types/navigation.ts @@ -0,0 +1,4 @@ +export type NavigationItemType = { + label: string + href: string +} From d286b0f430a4cf11ae2cf3353b8374a842a23df3 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 23 Apr 2024 15:31:55 +0200 Subject: [PATCH 19/20] Resolve merge errors --- dapp/src/DApp.tsx | 3 --- dapp/src/components/Header/index.tsx | 2 +- dapp/src/components/shared/Layout.tsx | 1 - dapp/src/router/index.tsx | 1 - 4 files changed, 1 insertion(+), 6 deletions(-) diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 714266352..5075b7d24 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -9,9 +9,6 @@ import { SidebarContextProvider, WalletContextProvider, } from "./contexts" -import { AcreSdkProvider } from "./acre-react/contexts" -import GlobalStyles from "./components/GlobalStyles" -import { router } from "./router" import { useInitApp } from "./hooks" import { Router } from "./router" import { store } from "./store" diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx index efcdde6ac..f633a9fdc 100644 --- a/dapp/src/components/Header/index.tsx +++ b/dapp/src/components/Header/index.tsx @@ -9,7 +9,7 @@ import { Navigation } from "./Navigation" // TODO: To be adjusted after project pivot/cleanup const NAVIGATION_ITEMS: NavigationItemType[] = [ { label: "Season 1", href: routerPath.home }, - { label: "Dashboard", href: routerPath.overview }, + { label: "Dashboard", href: routerPath.dashboard }, ] export default function Header() { diff --git a/dapp/src/components/shared/Layout.tsx b/dapp/src/components/shared/Layout.tsx index 6926a0a23..fd070bc36 100644 --- a/dapp/src/components/shared/Layout.tsx +++ b/dapp/src/components/shared/Layout.tsx @@ -1,5 +1,4 @@ import React, { useState } from "react" -import { Box, BoxProps } from "@chakra-ui/react" import { AnimatePresence, motion, Variants } from "framer-motion" import { useLocation, useOutlet } from "react-router-dom" import Header from "../Header" diff --git a/dapp/src/router/index.tsx b/dapp/src/router/index.tsx index bae60179d..7d72d8ee3 100644 --- a/dapp/src/router/index.tsx +++ b/dapp/src/router/index.tsx @@ -4,7 +4,6 @@ import LandingPage from "#/pages/LandingPage" import Layout from "#/components/shared/Layout" import ActivityPage from "#/pages/ActivityPage" import DashboardPage from "#/pages/DashboardPage" -import Layout from "#/components/shared/Layout" import { routerPath } from "./path" export function Router() { From 689154bc70bcacb6151d5f4a6009cf4c79d14f6a Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 30 Apr 2024 16:23:58 +0200 Subject: [PATCH 20/20] Remove `NavigationItem` export --- dapp/src/components/Header/Navigation/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/dapp/src/components/Header/Navigation/index.ts b/dapp/src/components/Header/Navigation/index.ts index a6896981a..168487f66 100644 --- a/dapp/src/components/Header/Navigation/index.ts +++ b/dapp/src/components/Header/Navigation/index.ts @@ -1,2 +1 @@ export { default as Navigation } from "./Navigation" -export { default as NavigationItem } from "./NavigationItem"