Merge pull request #82 from balancer/feat/make-navbar-shared

feat: make navbar/footer shared

apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx

@@ -7,7 +7,6 @@ import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-serv
 import { GetPoolDocument } from '@repo/lib/shared/services/api/generated/graphql'
 import { Metadata } from 'next'
 import { PoolProvider } from '@repo/lib/modules/pool/PoolProvider'
-import { getProjectConfig } from '@repo/lib/config/getProjectConfig'
 import { arrayToSentence } from '@repo/lib/shared/utils/strings'
 import { ensureError } from '@repo/lib/shared/utils/errors'
 import { notFound } from 'next/navigation'
@@ -16,8 +15,6 @@ type Props = PropsWithChildren<{
   params: Omit<FetchPoolProps, 'chain'> & { chain: ChainSlug }
 }>
 
-const { projectName } = getProjectConfig()
-
 async function getPoolQuery(chain: ChainSlug, id: string) {
   const _chain = slugToChainMap[chain]
   const variables = { id: id.toLowerCase(), chain: _chain }
@@ -50,8 +47,8 @@ export async function generateMetadata({
 
   return {
     title: `Liquidity Pool (${variant}): ${pool.name}`,
-    description: `${pool.symbol} is a ${projectName} ${variant} ${getPoolTypeLabel(
-      pool.type
+    description: `${pool.symbol} is a Balancer ${variant} ${getPoolTypeLabel(
+      pool.type,
     )} liquidity pool which contains ${poolTokenString}.`,
   }
 }
@@ -73,7 +70,7 @@ export default async function PoolLayout({ params: { id, chain, variant }, child
 
   return (
     <Suspense fallback={<PoolDetailSkeleton />}>
-      <PoolProvider id={id} chain={_chain} variant={variant} data={data}>
+      <PoolProvider chain={_chain} data={data} id={id} variant={variant}>
         {children}
       </PoolProvider>
     </Suspense>

apps/beets-frontend-v3/app/(app)/pools/cow/page.tsx

@@ -4,7 +4,7 @@ import { GqlPoolType } from '@repo/lib/shared/services/api/generated/graphql'
 import { Box, Skeleton } from '@chakra-ui/react'
 import { Suspense } from 'react'
 import { Metadata } from 'next'
-import { CowFooter } from '../../../../../../packages/lib/shared/components/navs/CowFooter'
+import { CowFooter } from '@repo/lib/shared/components/navs/CowFooter'
 import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
 import { CowHeader } from '@repo/lib/shared/components/navs/CowHeader'
 

apps/beets-frontend-v3/app/(app)/pools/layout.tsx

@@ -1,11 +1,8 @@
-import { getProjectConfig } from '@repo/lib/config/getProjectConfig'
 import { Metadata } from 'next'
 import { PropsWithChildren } from 'react'
 
-const { projectName } = getProjectConfig()
-
 export const metadata: Metadata = {
-  title: `${projectName} DeFi Liquidity Pools`,
+  title: 'Beets DeFi Liquidity Pools',
   description: `
     Explore DeFi liquidity pools or create your own.
     Provide liquidity to accumulate yield from swap fees

apps/beets-frontend-v3/app/(marketing)/layout.tsx

@@ -1,13 +1,10 @@
 /* eslint-disable max-len */
-import { getProjectConfig } from '@repo/lib/config/getProjectConfig'
 import { Box } from '@chakra-ui/react'
 import { Metadata } from 'next'
 import { PropsWithChildren } from 'react'
 
-const { projectName } = getProjectConfig()
-
 export const metadata: Metadata = {
-  title: `${projectName} DeFi AMMs made easy`,
+  title: 'Beets DeFi AMMs made easy',
   description: `DeFi's most extensive AMM product suite—Balancer is a decentralized Automated Market Maker protocol built on Ethereum with a clear focus on fungible and yield-bearing liquidity.`,
 }
 

apps/beets-frontend-v3/app/layout.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable max-len */
 import { Metadata } from 'next'
-import { Providers } from './providers'
-import { Navbar } from '@repo/lib/shared/components/navs/Navbar'
-import { Footer } from '@repo/lib/shared/components/navs/Footer'
 import { satoshiFont } from '@repo/lib/assets/fonts/satoshi/satoshi'
 import NextTopLoader from 'nextjs-toploader'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 import '@repo/lib/assets/css/global.css'
 import { GlobalAlerts } from '@repo/lib/shared/components/navs/GlobalAlerts'
 import { PropsWithChildren } from 'react'
+import { Providers } from '@repo/lib/shared/components/site/providers'
+import { NavBarContainer } from '@/lib/components/navs/NavBarContainer'
+import { FooterContainer } from '@/lib/components/footer/FooterContainer'
 
 export const metadata: Metadata = {
   title: 'Beets DeFi Liquidity Pools',
@@ -41,9 +41,9 @@ export default function RootLayout({ children }: PropsWithChildren) {
         <NextTopLoader showSpinner={false} color="#7f6ae8" />
         <Providers>
           <GlobalAlerts />
-          <Navbar />
+          <NavBarContainer />
           {children}
-          <Footer />
+          <FooterContainer />
           <SpeedInsights />
         </Providers>
       </body>

apps/beets-frontend-v3/lib/components/footer/FooterContainer.tsx

@@ -0,0 +1,20 @@
+import { BeetsLogoType } from '../imgs/BeetsLogoType'
+import { useNavData } from '../navs/useNavData'
+import { useFooterData } from './useFooterData'
+import { Footer } from '@repo/lib/shared/components/navs/Footer'
+
+export function FooterContainer() {
+  const { linkSections, legalLinks } = useFooterData()
+  const { getSocialLinks } = useNavData()
+
+  return (
+    <Footer
+      linkSections={linkSections}
+      socialLinks={getSocialLinks()}
+      legalLinks={legalLinks}
+      title="AMMs made easy"
+      subTitle="Beets is a battle-tested toolkit for true AMM experimentation and innovation."
+      logoType={<BeetsLogoType />}
+    />
+  )
+}

apps/beets-frontend-v3/lib/components/footer/useFooterData.tsx

@@ -0,0 +1,49 @@
+import { LinkSection } from '@repo/lib/shared/components/navs/footer.types'
+
+export function useFooterData() {
+  const linkSections: LinkSection[] = [
+    {
+      title: 'Build on Beets',
+      links: [
+        { label: 'Home', href: '/' },
+
+        { label: 'Docs', href: 'https://docs.beets.fi', isExternal: true },
+        {
+          label: 'Prototype on v3',
+          href: 'https://github.com/balancer/scaffold-balancer-v3',
+          isExternal: true,
+        },
+      ],
+    },
+    {
+      title: 'Use Beets protocol',
+      links: [
+        { label: 'Explore pools', href: '/pools' },
+        { label: 'Swap tokens', href: '/swap' },
+        { label: 'View portfolio', href: '/portfolio' },
+        { label: 'Get maBEETS', href: 'https://beets.fi/mabeets', isExternal: true },
+      ],
+    },
+    {
+      title: 'Ecosystem',
+      links: [
+        { label: 'Governance', href: 'https://snapshot.org/#/beets.eth', isExternal: true },
+        {
+          label: 'Bug bounties',
+          href: 'https://immunefi.com/bug-bounty/balancer',
+          isExternal: true,
+        },
+        { label: 'Analytics', href: 'https://beets.defilytica.com', isExternal: true },
+        {
+          label: 'Brand assets',
+          href: 'https://brand.beets.fi/',
+          isExternal: true,
+        },
+      ],
+    },
+  ]
+
+  const legalLinks = [{ label: 'Terms of use', href: '/terms-of-use' }]
+
+  return { linkSections, legalLinks }
+}