Header component adjustements (#357)

Ref: #355 

## Goal:
To adjust `Header` component following latest design changes

## Done:
- Implement generic `Link` and `NavLink` components, a fusion of
Chakra's and Router's `Link` component
- Implement `Navigation` component with animated active item indicator
- Added conditional rendering for `ConnectWallet` component with
presence animation

dapp/src/components/Header/ConnectWallet.tsx

@@ -1,16 +1,22 @@
 import React from "react"
 import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react"
-import { useWallet } from "#/hooks"
+import { useIsHomeRouteActive, useWallet, 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 {
   isSupportedBTCAddressType,
   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,
@@ -28,53 +34,54 @@ const getCustomDataByAccount = (
 export default function ConnectWallet() {
   const {
     bitcoin: { account: btcAccount, requestAccount: requestBitcoinAccount },
-    ethereum: { account: ethAccount, requestAccount: requestEthereumAccount },
   } = useWallet()
+  // TODO: Move `isConnected` to useWallet hook
+  const { isConnected } = useWalletContext()
 
   const customDataBtcAccount = getCustomDataByAccount(btcAccount)
-  const customDataEthAccount = getCustomDataByAccount(ethAccount)
+
+  const isHomeRoute = useIsHomeRouteActive()
 
   const handleConnectBitcoinAccount = () => {
     logPromiseFailure(requestBitcoinAccount())
   }
 
-  const handleConnectEthereumAccount = () => {
-    logPromiseFailure(requestEthereumAccount())
-  }
-
   return (
-    <HStack spacing={4}>
-      <HStack display={{ base: "none", md: "flex" }}>
-        <TextMd color="grey.500">Balance</TextMd>
-        <CurrencyBalance
-          currency="bitcoin"
-          amount={btcAccount?.balance.toString()}
-        />
-      </HStack>
-      <Tooltip
-        label="Currently, we support only Legacy or Native SegWit addresses. Please try connecting another address."
-        placement="top"
-        isDisabled={
-          !(btcAccount && !isSupportedBTCAddressType(btcAccount.address))
-        }
-      >
-        <Button
-          variant="card"
-          colorScheme={customDataBtcAccount.colorScheme}
-          leftIcon={<Icon as={BitcoinIcon} boxSize={6} />}
-          onClick={handleConnectBitcoinAccount}
+    <AnimatePresence initial={false}>
+      {(isConnected || !isHomeRoute) && (
+        <HStack
+          as={motion.div}
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          exit="hidden"
+          spacing={4}
         >
-          {customDataBtcAccount.text}
-        </Button>
-      </Tooltip>
-      <Button
-        variant="card"
-        colorScheme={customDataEthAccount.colorScheme}
-        leftIcon={<Icon as={EthereumIcon} boxSize={6} />}
-        onClick={handleConnectEthereumAccount}
-      >
-        {customDataEthAccount.text}
-      </Button>
-    </HStack>
+          <HStack display={{ base: "none", md: "flex" }}>
+            <TextMd color="grey.500">Balance</TextMd>
+            <CurrencyBalance
+              currency="bitcoin"
+              amount={btcAccount?.balance.toString()}
+            />
+          </HStack>
+          <Tooltip
+            label="Currently, we support only Legacy or Native SegWit addresses. Please try connecting another address."
+            placement="top"
+            isDisabled={
+              !(btcAccount && !isSupportedBTCAddressType(btcAccount.address))
+            }
+          >
+            <Button
+              variant="card"
+              colorScheme={customDataBtcAccount.colorScheme}
+              leftIcon={<Icon as={BitcoinIcon} boxSize={6} />}
+              onClick={handleConnectBitcoinAccount}
+            >
+              {customDataBtcAccount.text}
+            </Button>
+          </Tooltip>
+        </HStack>
+      )}
+    </AnimatePresence>
   )
 }

dapp/src/components/Header/Navigation/Navigation.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { Box, BoxProps, HStack, List } from "@chakra-ui/react"
+import { NavigationItemType } from "#/types/navigation"
+import NavigationItem from "./NavigationItem"
+
+type NavigationProps = BoxProps & {
+  items: NavigationItemType[]
+}
+
+function Navigation(props: NavigationProps) {
+  const { items, ...restProps } = props
+
+  return (
+    <Box as="nav" {...restProps}>
+      <HStack as={List} spacing={5} ml={12}>
+        {items.map((item) => (
+          <NavigationItem key={item.href} {...item} />
+        ))}
+      </HStack>
+    </Box>
+  )
+}
+
+export default Navigation

dapp/src/components/Header/Navigation/NavigationItem.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import {
+  Box,
+  ListItem,
+  ListItemProps,
+  useMultiStyleConfig,
+} from "@chakra-ui/react"
+import { motion } from "framer-motion"
+import { NavigationItemType } from "#/types/navigation"
+import { NavLink } from "../../shared/NavLink"
+
+type NavigationItemProps = ListItemProps & NavigationItemType
+
+function NavigationItem(props: NavigationItemProps) {
+  const { label, href, ...restProps } = props
+  const styles = useMultiStyleConfig("Link", { variant: "navigation" })
+
+  return (
+    <ListItem pos="relative" {...restProps}>
+      <NavLink to={href} sx={styles.container}>
+        {({ isActive }) => (
+          <>
+            {label}
+            {isActive && (
+              <Box
+                as={motion.span}
+                layoutId="active-route-indicator"
+                sx={styles.indicator}
+              />
+            )}
+          </>
+        )}
+      </NavLink>
+    </ListItem>
+  )
+}
+
+export default NavigationItem

dapp/src/components/Header/Navigation/index.ts

@@ -0,0 +1 @@
+export { default as Navigation } from "./Navigation"

dapp/src/components/Header/index.tsx

@@ -1,12 +1,22 @@
 import React from "react"
-import { Flex, HStack, Icon } from "@chakra-ui/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 } from "./Navigation"
+
+// TODO: To be adjusted after project pivot/cleanup
+const NAVIGATION_ITEMS: NavigationItemType[] = [
+  { label: "Season 1", href: routerPath.home },
+  { label: "Dashboard", href: routerPath.dashboard },
+]
 
 export default function Header() {
   return (
-    <HStack as="header" p={6}>
+    <HStack as="header" px={10} py={7}>
       <Icon as={AcreLogo} w={20} h={12} />
+      <Navigation items={NAVIGATION_ITEMS} />
       <Flex ml="auto">
         <ConnectWallet />
       </Flex>

dapp/src/components/shared/Link.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import {
+  Link as ChakraLink,
+  LinkProps as ChakraLinkProps,
+} from "@chakra-ui/react"
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from "react-router-dom"
+
+type LinkProps = Omit<ChakraLinkProps, "as" | "href"> &
+  Pick<RouterLinkProps, "to">
+
+export function Link(props: LinkProps) {
+  return <ChakraLink as={RouterLink} {...props} />
+}

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<ChakraLinkProps, "as" | "href" | "children"> &
+  Pick<RouterNavLinkProps, "to" | "children">
+
+export function NavLink(props: NavLinkProps) {
+  const { children, ...restProps } = props
+  return (
+    <ChakraLink as={RouterNavLink} {...restProps}>
+      {children as React.ReactNode}
+    </ChakraLink>
+  )
+}

dapp/src/hooks/index.ts

@@ -23,3 +23,4 @@ export * from "./useTimeout"
 export * from "./useCountdown"
 export * from "./useActivities"
 export * from "./useSize"
+export * from "./router"

dapp/src/hooks/router/index.ts

@@ -0,0 +1 @@
+export * from "./useIsActiveRoute"

dapp/src/hooks/router/useIsActiveRoute.ts

@@ -0,0 +1,10 @@
+import { routerPath } from "#/router/path"
+import { useLocation } from "react-router-dom"
+
+export const useIsActiveRoute = (route: string) => {
+  const location = useLocation()
+
+  return location.pathname === route
+}
+
+export const useIsHomeRouteActive = () => useIsActiveRoute(routerPath.home)

dapp/src/router/index.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { BrowserRouter, Route, Routes } from "react-router-dom"
 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() {

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,
+    },
+  },
 })

dapp/src/types/navigation.ts

@@ -0,0 +1,4 @@
+export type NavigationItemType = {
+  label: string
+  href: string
+}