From 4af7e63c5f29ef7d93bb7249b33358f6fa5da278 Mon Sep 17 00:00:00 2001 From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com> Date: Sun, 16 Apr 2023 10:32:14 +0200 Subject: [PATCH] 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 | 5 +++ src/app/earn/lend/page.tsx | 5 +++ src/app/earn/page.tsx | 5 --- .../accounts/[accountId]/earn/farm/page.tsx | 5 +++ .../accounts/[accountId]/earn/lend/page.tsx | 5 +++ .../accounts/[accountId]/earn/page.tsx | 5 --- src/app/wallets/[address]/earn/farm/page.tsx | 5 +++ src/app/wallets/[address]/earn/lend/page.tsx | 5 +++ src/app/wallets/[address]/earn/page.tsx | 5 --- src/components/Earn/Tab.tsx | 41 +++++++++++++++++++ src/components/Header/DesktopHeader.tsx | 2 +- .../Navigation/DesktopNavigation.tsx | 7 +++- src/components/Tab.tsx | 0 src/components/pages/borrow.tsx | 2 +- src/components/pages/council.tsx | 2 +- src/components/pages/earn.tsx | 9 ---- src/components/pages/farm.tsx | 13 ++++++ src/components/pages/lend.tsx | 13 ++++++ src/components/pages/portfolio.tsx | 2 +- src/components/pages/trade.tsx | 2 +- src/types/interfaces/route.d.ts | 2 +- src/utils/route.ts | 8 +++- tailwind.config.js | 4 ++ 23 files changed, 120 insertions(+), 32 deletions(-) create mode 100644 src/app/earn/farm/page.tsx create mode 100644 src/app/earn/lend/page.tsx delete mode 100644 src/app/earn/page.tsx create mode 100644 src/app/wallets/[address]/accounts/[accountId]/earn/farm/page.tsx create mode 100644 src/app/wallets/[address]/accounts/[accountId]/earn/lend/page.tsx delete mode 100644 src/app/wallets/[address]/accounts/[accountId]/earn/page.tsx create mode 100644 src/app/wallets/[address]/earn/farm/page.tsx create mode 100644 src/app/wallets/[address]/earn/lend/page.tsx delete mode 100644 src/app/wallets/[address]/earn/page.tsx create mode 100644 src/components/Earn/Tab.tsx create mode 100644 src/components/Tab.tsx delete mode 100644 src/components/pages/earn.tsx create mode 100644 src/components/pages/farm.tsx create mode 100644 src/components/pages/lend.tsx diff --git a/src/app/earn/farm/page.tsx b/src/app/earn/farm/page.tsx new file mode 100644 index 00000000..2928f19a --- /dev/null +++ b/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 +} diff --git a/src/app/earn/lend/page.tsx b/src/app/earn/lend/page.tsx new file mode 100644 index 00000000..602bd297 --- /dev/null +++ b/src/app/earn/lend/page.tsx @@ -0,0 +1,5 @@ +import LendPage from 'components/pages/lend' + +export default function page({ params }: { params: PageParams }) { + return +} diff --git a/src/app/earn/page.tsx b/src/app/earn/page.tsx deleted file mode 100644 index 35771cc7..00000000 --- a/src/app/earn/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import EarnPage from 'components/pages/earn' - -export default async function page({ params }: PageProps) { - return -} diff --git a/src/app/wallets/[address]/accounts/[accountId]/earn/farm/page.tsx b/src/app/wallets/[address]/accounts/[accountId]/earn/farm/page.tsx new file mode 100644 index 00000000..2928f19a --- /dev/null +++ b/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 +} diff --git a/src/app/wallets/[address]/accounts/[accountId]/earn/lend/page.tsx b/src/app/wallets/[address]/accounts/[accountId]/earn/lend/page.tsx new file mode 100644 index 00000000..602bd297 --- /dev/null +++ b/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 +} diff --git a/src/app/wallets/[address]/accounts/[accountId]/earn/page.tsx b/src/app/wallets/[address]/accounts/[accountId]/earn/page.tsx deleted file mode 100644 index 35771cc7..00000000 --- a/src/app/wallets/[address]/accounts/[accountId]/earn/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import EarnPage from 'components/pages/earn' - -export default async function page({ params }: PageProps) { - return -} diff --git a/src/app/wallets/[address]/earn/farm/page.tsx b/src/app/wallets/[address]/earn/farm/page.tsx new file mode 100644 index 00000000..2928f19a --- /dev/null +++ b/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 +} diff --git a/src/app/wallets/[address]/earn/lend/page.tsx b/src/app/wallets/[address]/earn/lend/page.tsx new file mode 100644 index 00000000..602bd297 --- /dev/null +++ b/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 +} diff --git a/src/app/wallets/[address]/earn/page.tsx b/src/app/wallets/[address]/earn/page.tsx deleted file mode 100644 index 35771cc7..00000000 --- a/src/app/wallets/[address]/earn/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import EarnPage from 'components/pages/earn' - -export default async function page({ params }: PageProps) { - return -} diff --git a/src/components/Earn/Tab.tsx b/src/components/Earn/Tab.tsx new file mode 100644 index 00000000..2cfac6d5 --- /dev/null +++ b/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 ( +
+
+
+ + Farm + +
+ + Lend + +
+
+ ) +} diff --git a/src/components/Header/DesktopHeader.tsx b/src/components/Header/DesktopHeader.tsx index 7748e7f8..0ab3026b 100644 --- a/src/components/Header/DesktopHeader.tsx +++ b/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' }, diff --git a/src/components/Navigation/DesktopNavigation.tsx b/src/components/Navigation/DesktopNavigation.tsx index 8a15d0bd..b0662c5c 100644 --- a/src/components/Navigation/DesktopNavigation.tsx +++ b/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 (
@@ -22,7 +27,7 @@ export default function DesktopNavigation() { {item.label} diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/pages/borrow.tsx b/src/components/pages/borrow.tsx index b4c5b531..e7102898 100644 --- a/src/components/pages/borrow.tsx +++ b/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 (
diff --git a/src/components/pages/council.tsx b/src/components/pages/council.tsx index 551c85c9..94624d2c 100644 --- a/src/components/pages/council.tsx +++ b/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 } diff --git a/src/components/pages/earn.tsx b/src/components/pages/earn.tsx deleted file mode 100644 index 101e50f8..00000000 --- a/src/components/pages/earn.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Overview from 'components/Earn/Overview' - -interface Props { - params: PageParams -} - -export default function EarnPage(props: Props) { - return -} diff --git a/src/components/pages/farm.tsx b/src/components/pages/farm.tsx new file mode 100644 index 00000000..e2818a12 --- /dev/null +++ b/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 ( + <> + + + <> + + + ) +} diff --git a/src/components/pages/lend.tsx b/src/components/pages/lend.tsx new file mode 100644 index 00000000..6c8f40c7 --- /dev/null +++ b/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 ( + <> + + + <> + + + ) +} diff --git a/src/components/pages/portfolio.tsx b/src/components/pages/portfolio.tsx index 0d9e5c18..d1135b69 100644 --- a/src/components/pages/portfolio.tsx +++ b/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 } diff --git a/src/components/pages/trade.tsx b/src/components/pages/trade.tsx index b7090d9e..052a5a58 100644 --- a/src/components/pages/trade.tsx +++ b/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 (
diff --git a/src/types/interfaces/route.d.ts b/src/types/interfaces/route.d.ts index ac7ef883..d3ef13e4 100644 --- a/src/types/interfaces/route.d.ts +++ b/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' diff --git a/src/utils/route.ts b/src/utils/route.ts index 14b1f2bc..db36660b 100644 --- a/src/utils/route.ts +++ b/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 + } } }) diff --git a/tailwind.config.js b/tailwind.config.js index 91d0d71d..8e0907b6 100644 --- a/tailwind.config.js +++ b/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',