From 895ea5a34735e186a949e5c9a8424ce70eb8d64f Mon Sep 17 00:00:00 2001
From: Daniel <danielBeets@protonmail.com>
Date: Thu, 19 Dec 2024 18:52:05 +0800
Subject: [PATCH 1/2] Add network dropdown for pools

---
 .../lib/components/navs/NavBarContainer.tsx   | 12 ++-
 .../lib/components/navs/PoolsLink.tsx         | 80 +++++++++++++++++++
 .../lib/components/navs/NavBarContainer.tsx   |  2 +-
 .../lib/shared/components/navs/NavBar.tsx     | 21 +++--
 4 files changed, 106 insertions(+), 9 deletions(-)
 create mode 100644 apps/beets-frontend-v3/lib/components/navs/PoolsLink.tsx

diff --git a/apps/beets-frontend-v3/lib/components/navs/NavBarContainer.tsx b/apps/beets-frontend-v3/lib/components/navs/NavBarContainer.tsx
index 0574447a..29699ebe 100644
--- a/apps/beets-frontend-v3/lib/components/navs/NavBarContainer.tsx
+++ b/apps/beets-frontend-v3/lib/components/navs/NavBarContainer.tsx
@@ -14,6 +14,7 @@ import { MaBeetsNavLink } from './MaBeetsNavLink'
 import { SonicMigrationLink } from './SonicMigrationLink'
 import Image from 'next/image'
 import { FantomToSonicSvg } from '../imgs/FantomToSonicSvg'
+import { PoolsLink } from './PoolsLink'
 
 export function NavBarContainer() {
   const { appLinks, ecosystemLinks, getSocialLinks } = useNavData()
@@ -45,7 +46,7 @@ export function NavBarContainer() {
 
   return (
     <NavBar
-      appLinks={allAppLinks}
+      appLinks={allAppLinks.slice(1)} // we remove the pools link for the custom dropdown link
       navLogo={<NavLogo />}
       rightSlot={
         <>
@@ -53,7 +54,14 @@ export function NavBarContainer() {
           <NavActions hideDarkModeToggle mobileNav={mobileNav} />
         </>
       }
-      customLinks={
+      customLinksBefore={
+        <>
+          <Box as={motion.div} variants={fadeIn}>
+            <PoolsLink />
+          </Box>
+        </>
+      }
+      customLinksAfter={
         <>
           <Box as={motion.div} variants={fadeIn}>
             <MaBeetsNavLink />
diff --git a/apps/beets-frontend-v3/lib/components/navs/PoolsLink.tsx b/apps/beets-frontend-v3/lib/components/navs/PoolsLink.tsx
new file mode 100644
index 00000000..d0f60a7d
--- /dev/null
+++ b/apps/beets-frontend-v3/lib/components/navs/PoolsLink.tsx
@@ -0,0 +1,80 @@
+import {
+  Box,
+  Button,
+  Heading,
+  HStack,
+  Link,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  Text,
+} from '@chakra-ui/react'
+import { useNav } from '@repo/lib/shared/components/navs/useNav'
+import NextLink from 'next/link'
+
+function PoolNetworkLink({
+  text,
+  href,
+  isLast,
+  onClose,
+}: {
+  text: string
+  href: string
+  isLast?: boolean
+  onClose: () => void
+}) {
+  return (
+    <Link as={NextLink} href={href} color="font.primary" variant="nav" onClick={onClose}>
+      <Box
+        width="100%"
+        px="sm"
+        height="36px"
+        display="flex"
+        alignItems="center"
+        _hover={{ bg: 'background.level2' }}
+        borderBottomLeftRadius={isLast ? 'md' : '0'}
+        borderBottomRightRadius={isLast ? 'md' : '0'}
+      >
+        {text}
+      </Box>
+    </Link>
+  )
+}
+
+export function PoolsLink() {
+  const { linkColorFor } = useNav()
+
+  return (
+    <Popover>
+      {({ isOpen, onClose }) => (
+        <>
+          <PopoverTrigger>
+            <Button
+              color={linkColorFor('/pools')}
+              variant="nav"
+              style={{ padding: '0px', height: '24px' }}
+              fontWeight="medium"
+              _hover={{ color: 'font.link' }}
+            >
+              Pools
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent w="220px">
+            <PopoverArrow bg="background.level3" />
+            <PopoverCloseButton />
+            <PopoverHeader fontWeight="bold">Select a network</PopoverHeader>
+            <PopoverBody p="0">
+              <PoolNetworkLink text="Sonic" href="/pools?networks=SONIC" onClose={onClose} />
+              <PoolNetworkLink text="Optimism" href="/pools?networks=OPTIMISM" onClose={onClose} />
+              <PoolNetworkLink text="All Networks" href="/pools" isLast={true} onClose={onClose} />
+            </PopoverBody>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
+  )
+}
diff --git a/apps/frontend-v3/lib/components/navs/NavBarContainer.tsx b/apps/frontend-v3/lib/components/navs/NavBarContainer.tsx
index c7f0a28f..333f0300 100644
--- a/apps/frontend-v3/lib/components/navs/NavBarContainer.tsx
+++ b/apps/frontend-v3/lib/components/navs/NavBarContainer.tsx
@@ -35,7 +35,7 @@ export function NavBarContainer() {
             />
           }
           navLogo={<NavLogo />}
-          customLinks={
+          customLinksAfter={
             <Box as={motion.div} variants={fadeIn}>
               <VeBalLink />
             </Box>
diff --git a/packages/lib/shared/components/navs/NavBar.tsx b/packages/lib/shared/components/navs/NavBar.tsx
index 737d29c4..5d441347 100644
--- a/packages/lib/shared/components/navs/NavBar.tsx
+++ b/packages/lib/shared/components/navs/NavBar.tsx
@@ -21,7 +21,8 @@ type Props = {
   leftSlot?: ReactNode
   rightSlot?: ReactNode
   disableBlur?: boolean
-  customLinks?: ReactNode
+  customLinksBefore?: ReactNode
+  customLinksAfter?: ReactNode
 }
 
 const clamp = (number: number, min: number, max: number) => Math.min(Math.max(number, min), max)
@@ -46,13 +47,19 @@ function useBoundedScroll(threshold: number) {
 
 function NavLinks({
   appLinks,
-  customLinks,
+  customLinksBefore,
+  customLinksAfter,
   ...props
-}: BoxProps & { appLinks: AppLink[]; customLinks?: ReactNode }) {
+}: BoxProps & {
+  appLinks: AppLink[]
+  customLinksBefore?: ReactNode
+  customLinksAfter?: ReactNode
+}) {
   const { linkColorFor } = useNav()
 
   return (
     <HStack fontWeight="medium" spacing="lg" {...props}>
+      {customLinksBefore}
       {appLinks.map(link => (
         <Box as={motion.div} key={link.href} variants={fadeIn}>
           <Link
@@ -67,7 +74,7 @@ function NavLinks({
           </Link>
         </Box>
       ))}
-      {customLinks}
+      {customLinksAfter}
       {(isDev || isStaging) && (
         <Box as={motion.div} variants={fadeIn}>
           {/* <Link as={NextLink} color={linkColorFor('/debug')} href="/debug" prefetch variant="nav">
@@ -175,7 +182,8 @@ export function NavBar({
   appLinks,
   navLogo,
   mobileNav,
-  customLinks,
+  customLinksBefore,
+  customLinksAfter,
   ...rest
 }: Props & BoxProps) {
   const [showShadow, setShowShadow] = useState(false)
@@ -246,7 +254,8 @@ export function NavBar({
               {appLinks && (
                 <NavLinks
                   appLinks={appLinks}
-                  customLinks={customLinks}
+                  customLinksBefore={customLinksBefore}
+                  customLinksAfter={customLinksAfter}
                   display={{ base: 'none', lg: 'flex' }}
                 />
               )}

From 038245b08e7ad068bb8ac3254c779bd1631068ff Mon Sep 17 00:00:00 2001
From: Daniel <danielBeets@protonmail.com>
Date: Thu, 19 Dec 2024 19:39:16 +0800
Subject: [PATCH 2/2] fix link

---
 apps/beets-frontend-v3/lib/components/footer/useFooterData.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/beets-frontend-v3/lib/components/footer/useFooterData.tsx b/apps/beets-frontend-v3/lib/components/footer/useFooterData.tsx
index 2fc690b4..319a5a76 100644
--- a/apps/beets-frontend-v3/lib/components/footer/useFooterData.tsx
+++ b/apps/beets-frontend-v3/lib/components/footer/useFooterData.tsx
@@ -38,7 +38,7 @@ export function useFooterData() {
     },
   ]
 
-  const legalLinks = [{ label: 'Terms of use', href: '/terms-of-use' }]
+  const legalLinks = [{ label: 'Terms of use', href: '/terms-of-service' }]
 
   return { linkSections, legalLinks }
 }