Merge branch 'beets/merged' into beets/merge-main

balancer · Dec 19, 2024 · fb5f882 · fb5f882
2 parents b8809a1 + 038245b
commit fb5f882
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 20 deletions.
diff --git 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 }
 }
diff --git a/apps/beets-frontend-v3/lib/components/navs/NavBarContainer.tsx b/apps/beets-frontend-v3/lib/components/navs/NavBarContainer.tsx
@@ -12,8 +12,8 @@ import { motion } from 'framer-motion'
 import { fadeIn } from '@repo/lib/shared/utils/animations'
 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()
@@ -24,8 +24,6 @@ export function NavBarContainer() {
     <MobileNav
       LogoType={BeetsLogoType}
       appLinks={allAppLinks}
-      ecosystemLinks={ecosystemLinks}
-      socialLinks={getSocialLinks()}
       customLinks={
         <>
           <MaBeetsNavLink fontSize="xl" />
@@ -40,20 +38,15 @@ export function NavBarContainer() {
           />
         </>
       }
+      ecosystemLinks={ecosystemLinks}
+      socialLinks={getSocialLinks()}
     />
   )
 
   return (
     <NavBar
-      appLinks={allAppLinks}
-      navLogo={<NavLogo />}
-      rightSlot={
-        <>
-          <LzBeetsMigrator />
-          <NavActions hideDarkModeToggle mobileNav={mobileNav} />
-        </>
-      }
-      customLinks={
+      appLinks={allAppLinks.slice(1)} // we remove the pools link for the custom dropdown link
+      customLinksAfter={
         <>
           <Box as={motion.div} variants={fadeIn}>
             <MaBeetsNavLink />
@@ -63,6 +56,18 @@ export function NavBarContainer() {
           </Box>
         </>
       }
+      customLinksBefore={
+        <Box as={motion.div} variants={fadeIn}>
+          <PoolsLink />
+        </Box>
+      }
+      navLogo={<NavLogo />}
+      rightSlot={
+        <>
+          <LzBeetsMigrator />
+          <NavActions hideDarkModeToggle mobileNav={mobileNav} />
+        </>
+      }
     />
   )
 }
diff --git a/apps/beets-frontend-v3/lib/components/navs/PoolsLink.tsx b/apps/beets-frontend-v3/lib/components/navs/PoolsLink.tsx
@@ -0,0 +1,77 @@
+import {
+  Box,
+  Button,
+  Link,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+} 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} color="font.primary" href={href} onClick={onClose} variant="nav">
+      <Box
+        _hover={{ bg: 'background.level2' }}
+        alignItems="center"
+        borderBottomLeftRadius={isLast ? 'md' : '0'}
+        borderBottomRightRadius={isLast ? 'md' : '0'}
+        display="flex"
+        height="36px"
+        px="sm"
+        width="100%"
+      >
+        {text}
+      </Box>
+    </Link>
+  )
+}
+
+export function PoolsLink() {
+  const { linkColorFor } = useNav()
+
+  return (
+    <Popover>
+      {({ onClose }) => (
+        <>
+          <PopoverTrigger>
+            <Button
+              _hover={{ color: 'font.link' }}
+              color={linkColorFor('/pools')}
+              fontWeight="medium"
+              style={{ padding: '0px', height: '24px' }}
+              variant="nav"
+            >
+              Pools
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent w="220px">
+            <PopoverArrow bg="background.level3" />
+            <PopoverCloseButton />
+            <PopoverHeader fontWeight="bold">Select a network</PopoverHeader>
+            <PopoverBody p="0">
+              <PoolNetworkLink href="/pools?networks=SONIC" onClose={onClose} text="Sonic" />
+              <PoolNetworkLink href="/pools?networks=OPTIMISM" onClose={onClose} text="Optimism" />
+              <PoolNetworkLink href="/pools" isLast onClose={onClose} text="All Networks" />
+            </PopoverBody>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
+  )
+}
diff --git a/apps/frontend-v3/lib/components/navs/NavBarContainer.tsx b/apps/frontend-v3/lib/components/navs/NavBarContainer.tsx
@@ -25,7 +25,7 @@ export function NavBarContainer() {
       >
         <NavBar
           appLinks={allAppLinks}
-          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
@@ -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}
+                  customLinksAfter={customLinksAfter}
+                  customLinksBefore={customLinksBefore}
                   display={{ base: 'none', lg: 'flex' }}
                 />
               )}