Mp 2538 tab component (#157)

* add basic endpoint for vaultConfigs

* implement apy for vaults

* add tab + update routing

* fixed routing issues

* change structure tab component

src/app/earn/farm/page.tsx

@@ -0,0 +1,5 @@
+import FarmPage from 'components/pages/farm'
+
+export default async function page({ params }: { params: PageParams }) {
+  return <FarmPage params={params} />
+}

src/app/earn/lend/page.tsx

@@ -0,0 +1,5 @@
+import LendPage from 'components/pages/lend'
+
+export default function page({ params }: { params: PageParams }) {
+  return <LendPage params={params} />
+}

src/app/earn/page.tsx

@@ -1,5 +0,0 @@
-import EarnPage from 'components/pages/earn'
-
-export default async function page({ params }: PageProps) {
-  return <EarnPage params={params} />
-}

src/app/wallets/[address]/accounts/[accountId]/earn/farm/page.tsx

@@ -0,0 +1,5 @@
+import FarmPage from 'components/pages/farm'
+
+export default async function page({ params }: { params: PageParams }) {
+  return <FarmPage params={params} />
+}

src/app/wallets/[address]/accounts/[accountId]/earn/lend/page.tsx

@@ -0,0 +1,5 @@
+import LendPage from 'components/pages/lend'
+
+export default function page({ params }: { params: PageParams }) {
+  return <LendPage params={params} />
+}

src/app/wallets/[address]/accounts/[accountId]/earn/page.tsx

@@ -1,5 +0,0 @@
-import EarnPage from 'components/pages/earn'
-
-export default async function page({ params }: PageProps) {
-  return <EarnPage params={params} />
-}

src/app/wallets/[address]/earn/farm/page.tsx

@@ -0,0 +1,5 @@
+import FarmPage from 'components/pages/farm'
+
+export default async function page({ params }: { params: PageParams }) {
+  return <FarmPage params={params} />
+}

src/app/wallets/[address]/earn/lend/page.tsx

@@ -0,0 +1,5 @@
+import LendPage from 'components/pages/lend'
+
+export default function page({ params }: { params: PageParams }) {
+  return <LendPage params={params} />
+}

src/app/wallets/[address]/earn/page.tsx

@@ -1,5 +0,0 @@
-import EarnPage from 'components/pages/earn'
-
-export default async function page({ params }: PageProps) {
-  return <EarnPage params={params} />
-}

src/components/Earn/Tab.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames'
+import Link from 'next/link'
+
+import { getRoute } from 'utils/route'
+
+const underlineClasses =
+  'relative before:absolute before:h-[2px] before:-bottom-1 before:left-0 before:right-0 before:gradient-active-tab'
+
+interface Props {
+  params: PageParams
+  isFarm?: boolean
+}
+
+export default function Tab(props: Props) {
+  return (
+    <div className='mb-8 w-full'>
+      <div className='flex gap-2'>
+        <div className='relative'>
+          <Link
+            href={getRoute(props.params, { page: 'earn/farm' })}
+            className={classNames(
+              !props.isFarm ? 'text-white/20' : underlineClasses,
+              'relative mr-8 text-xl',
+            )}
+          >
+            Farm
+          </Link>
+        </div>
+        <Link
+          href={getRoute(props.params, { page: 'earn/lend' })}
+          className={classNames(
+            props.isFarm ? 'text-white/20' : underlineClasses,
+            'relative text-xl',
+          )}
+        >
+          Lend
+        </Link>
+      </div>
+    </div>
+  )
+}

src/components/Header/DesktopHeader.tsx

@@ -8,7 +8,7 @@ import { WalletConnectProvider } from 'components/Wallet/WalletConnectProvider'
 
 export const menuTree: { href: RouteSegment; label: string }[] = [
   { href: 'trade', label: 'Trade' },
-  { href: 'earn', label: 'Earn' },
+  { href: 'earn/farm', label: 'Earn' },
   { href: 'borrow', label: 'Borrow' },
   { href: 'portfolio', label: 'Portfolio' },
   { href: 'council', label: 'Council' },

src/components/Navigation/DesktopNavigation.tsx

@@ -10,6 +10,11 @@ import useParams, { getRoute } from 'utils/route'
 export default function DesktopNavigation() {
   const params = useParams()
 
+  function getIsActive(href: string) {
+    if (params.page.includes('earn') && href.includes('earn')) return true
+    return params.page === href
+  }
+
   return (
     <div className='flex flex-grow items-center'>
       <Link href={getRoute(params, { page: 'trade' })}>
@@ -22,7 +27,7 @@ export default function DesktopNavigation() {
           <NavLink
             key={index}
             href={getRoute(params, { page: item.href })}
-            isActive={params.page === item.href}
+            isActive={getIsActive(item.href)}
           >
             {item.label}
           </NavLink>

src/components/pages/borrow.tsx

@@ -5,7 +5,7 @@ interface Props {
   params: PageParams
 }
 
-export default function BorrowPage(props: Props) {
+export default function Borrowpage(props: Props) {
   return (
     <div className='flex w-full flex-col gap-4'>
       <ActiveBorrowings params={props.params} />

src/components/pages/council.tsx

@@ -4,6 +4,6 @@ interface Props {
   params: PageParams
 }
 
-export default function CouncilPage(props: Props) {
+export default function Councilpage(props: Props) {
   return <Overview params={props.params} />
 }

src/components/pages/earn.tsx

@@ -1,9 +0,0 @@
-import Overview from 'components/Earn/Overview'
-
-interface Props {
-  params: PageParams
-}
-
-export default function EarnPage(props: Props) {
-  return <Overview params={props.params} />
-}

src/components/pages/farm.tsx

@@ -0,0 +1,13 @@
+import Card from 'components/Card'
+import Tab from 'components/Earn/Tab'
+
+export default function Farmpage({ params }: { params: PageParams }) {
+  return (
+    <>
+      <Tab params={params} isFarm />
+      <Card title='Featured vaults'>
+        <></>
+      </Card>
+    </>
+  )
+}

src/components/pages/lend.tsx

@@ -0,0 +1,13 @@
+import Card from 'components/Card'
+import Tab from 'components/Earn/Tab'
+
+export default function Lendpage({ params }: { params: PageParams }) {
+  return (
+    <>
+      <Tab params={params} />
+      <Card title='Lend'>
+        <></>
+      </Card>
+    </>
+  )
+}

src/components/pages/portfolio.tsx

@@ -4,6 +4,6 @@ interface Props {
   params: PageParams
 }
 
-export default function PortfolioPage(props: Props) {
+export default function Portfoliopage(props: Props) {
   return <AccountOverview params={props.params} />
 }

src/components/pages/trade.tsx

@@ -6,7 +6,7 @@ interface Props {
   params: PageParams
 }
 
-export default function TradePage(props: Props) {
+export default function Tradepage(props: Props) {
   return (
     <div className='grid grid-flow-row grid-cols-3 grid-rows-2 gap-4'>
       <TradingView params={props.params} />

src/types/interfaces/route.d.ts

@@ -1 +1 @@
-type RouteSegment = 'trade' | 'borrow' | 'earn' | 'portfolio' | 'council'
+type RouteSegment = 'trade' | 'borrow' | 'earn/farm' | 'earn/lend' | 'portfolio' | 'council'

src/utils/route.ts

@@ -30,7 +30,13 @@ export function getParamsFromUrl(url: string) {
         params.accountId = segments[index + 1]
         break
       default:
-        if ([3, 5, 7].includes(index)) params.page = segment
+        if ([3, 5, 7].includes(index)) {
+          if (segment === 'earn') {
+            params.page = `${segment}/${segments[index + 1]}`
+            break
+          }
+          params.page = segment
+        }
     }
   })
 

tailwind.config.js

@@ -277,6 +277,10 @@ module.exports = {
             background:
               'linear-gradient(77.47deg, rgba(20, 24, 57, 0.9) 11.58%, rgba(34, 16, 57, 0.9) 93.89%)',
           },
+          '.gradient-active-tab': {
+            background:
+              'linear-gradient(270deg, rgba(186, 8, 189, 0.764896) 0%, rgba(255, 160, 187, 0.88641) 23.77%, rgba(48, 29, 24, 0.26) 99.2%)',
+          },
           '.number': {
             whiteSpace: 'nowrap',
             fontFeatureSettings: '"tnum" on',