Add usePerpsMarket hook and adjust routing (#680)

* Add usePerpsMarket hook and adjust routing

* fix: enable 7 links in the header

---------

Co-authored-by: Linkie Link <linkielink.dev@gmail.com>

src/components/Account/AccountBalancesTable/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
 import useAccountBalancesColumns from 'components/Account/AccountBalancesTable/Columns/useAccountBalancesColumns'
 import useAccountBalanceData from 'components/Account/AccountBalancesTable/useAccountBalanceData'
@@ -22,6 +22,7 @@ interface Props {
 }
 
 export default function AccountBalancesTable(props: Props) {
+  const [searchParams] = useSearchParams()
   const { account, lendingData, borrowingData, tableBodyClassName, hideCard } = props
   const currentAccount = useCurrentAccount()
   const navigate = useNavigate()
@@ -55,7 +56,7 @@ export default function AccountBalancesTable(props: Props) {
             color='tertiary'
             onClick={() => {
               if (currentAccount?.id !== account.id) {
-                navigate(getRoute(getPage(pathname), address, account.id))
+                navigate(getRoute(getPage(pathname), searchParams, address, account.id))
               }
               useStore.setState({
                 focusComponent: {

src/components/Account/AccountCreateFirst.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
 import AccountFundFullPage from 'components/Account/AccountFund/AccountFundFullPage'
 import FullOverlayContent from 'components/FullOverlayContent'
@@ -14,6 +14,7 @@ export default function AccountCreateFirst() {
   const address = useStore((s) => s.address)
   const createAccount = useStore((s) => s.createAccount)
   const [isCreating, setIsCreating] = useToggle(false)
+  const [searchParams] = useSearchParams()
 
   useEffect(() => {
     if (!address) useStore.setState({ focusComponent: { component: <WalletSelect /> } })
@@ -24,7 +25,7 @@ export default function AccountCreateFirst() {
     const accountId = await createAccount('default')
     setIsCreating(false)
     if (accountId) {
-      navigate(getRoute(getPage(pathname), address, accountId))
+      navigate(getRoute(getPage(pathname), searchParams, address, accountId))
       useStore.setState({
         focusComponent: {
           component: <AccountFundFullPage />,
@@ -34,7 +35,7 @@ export default function AccountCreateFirst() {
         },
       })
     }
-  }, [createAccount, navigate, pathname, address, setIsCreating])
+  }, [setIsCreating, createAccount, navigate, pathname, searchParams, address])
 
   return (
     <FullOverlayContent

src/components/Account/AccountList/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { useEffect } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
 import AccountStats from 'components/Account/AccountList/AccountStats'
 import Card from 'components/Card'
@@ -28,6 +28,7 @@ export default function AccountList(props: Props) {
   const currentAccountId = useAccountId()
   const address = useStore((s) => s.address)
   const { data: accountIds } = useAccountIds(address, true, true)
+  const [searchParams] = useSearchParams()
 
   useEffect(() => {
     if (!currentAccountId) return
@@ -54,7 +55,7 @@ export default function AccountList(props: Props) {
               onClick={() => {
                 if (isActive) return
                 useStore.setState({ accountDeleteModal: null })
-                navigate(getRoute(getPage(pathname), address, accountId))
+                navigate(getRoute(getPage(pathname), searchParams, address, accountId))
               }}
               title={
                 <div className={accountCardHeaderClasses} role={!isActive ? 'button' : undefined}>

src/components/Account/AccountMenuContent.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { useCallback } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
 import AccountCreateFirst from 'components/Account/AccountCreateFirst'
 import AccountFund from 'components/Account/AccountFund/AccountFundFullPage'
@@ -33,6 +33,7 @@ export default function AccountMenuContent() {
   const address = useStore((s) => s.address)
   const { data: accountIds } = useAccountIds(address, true, true)
   const accountId = useAccountId()
+  const [searchParams] = useSearchParams()
 
   const createAccount = useStore((s) => s.createAccount)
   const baseCurrency = useStore((s) => s.baseCurrency)
@@ -63,7 +64,7 @@ export default function AccountMenuContent() {
     setIsCreating(false)
 
     if (accountId) {
-      navigate(getRoute(getPage(pathname), address, accountId))
+      navigate(getRoute(getPage(pathname), searchParams, address, accountId))
       if (lendAssets) enableAutoLendAccountId(accountId)
       useStore.setState({
         focusComponent: {
@@ -80,6 +81,7 @@ export default function AccountMenuContent() {
     createAccount,
     navigate,
     pathname,
+    searchParams,
     address,
     lendAssets,
     enableAutoLendAccountId,

src/components/Asset/AssetSymbol.tsx

@@ -0,0 +1,16 @@
+import Text from 'components/Text'
+
+interface Props {
+  symbol: string
+}
+export default function AssetSymbol(props: Props) {
+  return (
+    <Text
+      size='xs'
+      tag='span'
+      className='rounded-sm bg-white/10 text-white/50 px-[6px] py-[2px] h-5'
+    >
+      {props.symbol}
+    </Text>
+  )
+}

src/components/Earn/Tab.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { NavLink, useParams } from 'react-router-dom'
+import { NavLink, useParams, useSearchParams } from 'react-router-dom'
 
 import useAccountId from 'hooks/useAccountId'
 import { getRoute } from 'utils/route'
@@ -15,13 +15,14 @@ interface Props {
 export default function Tab(props: Props) {
   const accountId = useAccountId()
   const { address } = useParams()
+  const [searchParams] = useSearchParams()
 
   return (
     <div className='relative w-full'>
       {props.tabs.map((tab, index) => (
         <NavLink
           key={tab.page}
-          to={getRoute(tab.page, address, accountId)}
+          to={getRoute(tab.page, searchParams, address, accountId)}
           className={classNames(
             props.activeTabIdx === index ? underlineClasses : 'text-white/40',
             'relative mr-8 text-xl ',

src/components/Modals/Account/AccountDeleteModal.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 
 import AssetBalanceRow from 'components/Asset/AssetBalanceRow'
 import { ArrowRight, ExclamationMarkCircled } from 'components/Icons'
@@ -30,6 +30,7 @@ function AccountDeleteModal(props: Props) {
   const { pathname } = useLocation()
   const { address } = useParams()
   const { debts, vaults, id: accountId } = modal || {}
+  const [searchParams] = useSearchParams()
 
   const closeDeleteAccountModal = useCallback(() => {
     useStore.setState({ accountDeleteModal: null })
@@ -38,9 +39,18 @@ function AccountDeleteModal(props: Props) {
   const deleteAccountHandler = useCallback(() => {
     const options = { accountId: modal.id, lends: modal.lends }
     deleteAccount(options)
-    navigate(getRoute(getPage(pathname), address))
+    navigate(getRoute(getPage(pathname), searchParams, address))
     closeDeleteAccountModal()
-  }, [modal, deleteAccount, navigate, pathname, address, closeDeleteAccountModal])
+  }, [
+    modal.id,
+    modal.lends,
+    deleteAccount,
+    navigate,
+    pathname,
+    searchParams,
+    address,
+    closeDeleteAccountModal,
+  ])
 
   const depositsAndLends = useMemo(
     () => combineBNCoins([...modal.deposits, ...modal.lends]),
@@ -58,7 +68,7 @@ function AccountDeleteModal(props: Props) {
           text: 'Repay Debts',
           icon: <ArrowRight />,
           onClick: () => {
-            navigate(getRoute('borrow', address, accountId))
+            navigate(getRoute('borrow', searchParams, address, accountId))
             closeDeleteAccountModal()
           },
         }}
@@ -75,7 +85,7 @@ function AccountDeleteModal(props: Props) {
           text: 'Close Positions',
           icon: <ArrowRight />,
           onClick: () => {
-            navigate(getRoute('farm', address, accountId))
+            navigate(getRoute('farm', searchParams, address, accountId))
             closeDeleteAccountModal()
           },
         }}

src/components/Navigation/DesktopNavigation.tsx

@@ -1,6 +1,7 @@
 import { useShuttle } from '@delphi-labs/shuttle-react'
 import classNames from 'classnames'
 import { useMemo } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
 import Button from 'components/Button'
 import { menuTree } from 'components/Header/DesktopHeader'
@@ -18,7 +19,7 @@ export default function DesktopNavigation() {
   const walletId = (recentWallet?.providerId as WalletID) ?? WalletID.Keplr
   const address = useStore((s) => s.address)
   const accountId = useAccountId()
-
+  const [searchParams] = useSearchParams()
   const focusComponent = useStore((s) => s.focusComponent)
 
   const menu = useMemo(() => menuTree(walletId), [walletId])
@@ -36,7 +37,7 @@ export default function DesktopNavigation() {
           : 'flex flex-1 items-center relative z-50',
       )}
     >
-      <NavLink href={getRoute('trade', address, accountId)}>
+      <NavLink href={getRoute('trade', searchParams, address, accountId)}>
         <span className='block w-10 h-10'>
           <Logo className='text-white' />
         </span>
@@ -47,7 +48,9 @@ export default function DesktopNavigation() {
             <NavLink
               key={index}
               href={
-                item.externalUrl ? item.externalUrl : getRoute(item.pages[0], address, accountId)
+                item.externalUrl
+                  ? item.externalUrl
+                  : getRoute(item.pages[0], searchParams, address, accountId)
               }
               isActive={getIsActive(item.pages)}
               className={`@nav-${index}/navigation:inline-block hidden whitespace-nowrap`}
@@ -84,7 +87,7 @@ export default function DesktopNavigation() {
                           href={
                             item.externalUrl
                               ? item.externalUrl
-                              : getRoute(item.pages[0], address, accountId)
+                              : getRoute(item.pages[0], searchParams, address, accountId)
                           }
                           onClick={() => setShowMenu(false)}
                           isActive={getIsActive(item.pages)}

src/components/Perps/PerpsInfo.tsx

@@ -1,19 +1,52 @@
 import React, { useMemo } from 'react'
 
+import AssetSymbol from 'components/Asset/AssetSymbol'
 import Card from 'components/Card'
+import DisplayCurrency from 'components/DisplayCurrency'
 import Divider from 'components/Divider'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Loading from 'components/Loading'
 import Text from 'components/Text'
+import usePerpsMarket from 'hooks/perps/usePerpsMarket'
+import usePrice from 'hooks/usePrice'
+import { BNCoin } from 'types/classes/BNCoin'
 
 export function PerpsInfo() {
+  const { data: market } = usePerpsMarket()
+  const assetPrice = usePrice(market?.asset.denom || '')
+
   const items = useMemo(
     () => [
-      <Text key='item1'>$6,735</Text>,
+      ...(!assetPrice.isZero()
-      <InfoItem key='item2' label='Label' item={<Text size='sm'>Value</Text>} />,
+        ? [<DisplayCurrency key='price' coin={BNCoin.fromDenomAndBigNumber('usd', assetPrice)} />]
-      <InfoItem key='item3' label='Label' item={<Text size='sm'>Value</Text>} />,
+        : [<Loading key='price' className='w-14 h-4' />]),
-      <InfoItem key='item4' label='Label' item={<Text size='sm'>Value</Text>} />,
+      <InfoItem
-      <InfoItem key='item5' label='Label' item={<Text size='sm'>Value</Text>} />,
+        key='openInterestLong'
+        label='Open Interest (L)'
+        item={<InterestItem market={market} type='long' />}
+      />,
+      <InfoItem
+        key='openInterestShort'
+        label='Open Interest (S)'
+        item={<InterestItem market={market} type='short' />}
+      />,
+      <InfoItem
+        key='fundingRate'
+        label='Funding rate'
+        item={
+          market ? (
+            <FormattedNumber
+              className='text-sm inline'
+              amount={market.fundingRate.toNumber()}
+              options={{ minDecimals: 6, maxDecimals: 6, suffix: '%' }}
+            />
+          ) : (
+            <Loading />
+          )
+        }
+      />,
     ],
-    [],
+    [assetPrice, market],
   )
 
   return (
@@ -45,3 +78,22 @@ function InfoItem(props: InfoItemProps) {
     </div>
   )
 }
+
+interface InterestItemProps {
+  market: PerpsMarket | null
+  type: 'long' | 'short'
+}
+function InterestItem(props: InterestItemProps) {
+  if (!props.market) return <Loading />
+
+  return (
+    <div className='flex gap-1 items-center'>
+      <FormattedNumber
+        className='text-sm inline'
+        amount={props.market.openInterest[props.type].toNumber()}
+        options={{ decimals: props.market.asset.decimals }}
+      />
+      <AssetSymbol symbol={props.market.asset.symbol} />
+    </div>
+  )
+}

src/components/Portfolio/Account/BreadCrumbs.tsx

@@ -1,4 +1,4 @@
-import { NavLink, useParams } from 'react-router-dom'
+import { NavLink, useParams, useSearchParams } from 'react-router-dom'
 
 import { ArrowRight } from 'components/Icons'
 import Text from 'components/Text'
@@ -12,10 +12,11 @@ interface Props {
 export default function PortfolioAccountPageHeader(props: Props) {
   const { address } = useParams()
   const selectedAccountId = useAccountId()
+  const [searchParams] = useSearchParams()
 
   return (
     <div className='flex items-center w-full gap-2 pt-2 pb-6 border-b border-white/20'>
-      <NavLink to={getRoute('portfolio', address, selectedAccountId)}>
+      <NavLink to={getRoute('portfolio', searchParams, address, selectedAccountId)}>
         <Text className='text-white/40'>Portfolio</Text>
       </NavLink>
       <ArrowRight className='h-3 text-white/60 ' />

src/components/Portfolio/Card/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { ReactNode, useMemo } from 'react'
-import { NavLink, useParams } from 'react-router-dom'
+import { NavLink, useParams, useSearchParams } from 'react-router-dom'
 
 import { FormattedNumber } from 'components/FormattedNumber'
 import Loading from 'components/Loading'
@@ -36,6 +36,7 @@ export default function PortfolioCard(props: Props) {
   const { allAssets: lendingAssets } = useLendingMarketAssetsTableData()
   const { data } = useBorrowMarketAssetsTableData(false)
   const { data: hlsStrategies } = useHLSStakingAssets()
+  const [searchParams] = useSearchParams()
 
   const borrowAssets = useMemo(() => data?.allAssets || [], [data])
   const [reduceMotion] = useLocalStorage<boolean>(
@@ -111,7 +112,12 @@ export default function PortfolioCard(props: Props) {
 
   return (
     <NavLink
-      to={getRoute(`portfolio/${props.accountId}` as Page, urlAddress, currentAccountId)}
+      to={getRoute(
+        `portfolio/${props.accountId}` as Page,
+        searchParams,
+        urlAddress,
+        currentAccountId,
+      )}
       className={classNames('w-full hover:bg-white/5', !reduceMotion && 'transition-all')}
     >
       <Skeleton

src/components/Trade/TradeChart/TVChartContainer.tsx

@@ -5,8 +5,8 @@ import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
 import Loading from 'components/Loading'
 import Text from 'components/Text'
-import { DataFeed, PAIR_SEPARATOR } from 'components/Trade/TradeChart/DataFeed'
 import { disabledFeatures, enabledFeatures, overrides } from 'components/Trade/TradeChart/constants'
+import { DataFeed, PAIR_SEPARATOR } from 'components/Trade/TradeChart/DataFeed'
 import { BN_ZERO } from 'constants/math'
 import usePrices from 'hooks/usePrices'
 import useStore from 'store'
@@ -156,7 +156,7 @@ export const TVChartContainer = (props: Props) => {
         </div>
       }
       contentClassName='px-0.5 pb-0.5 h-full'
-      className='min-h-[55vh]'
+      className='min-h-[55vh] h-full'
     >
       <div ref={chartContainerRef} className='h-full overflow-hidden rounded-b-base' />
     </Card>

src/components/Trade/TradeModule/AssetSelector/AssetItem.tsx

@@ -1,4 +1,5 @@
 import AssetImage from 'components/Asset/AssetImage'
+import AssetSymbol from 'components/Asset/AssetSymbol'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
 import { StarFilled, StarOutlined } from 'components/Icons'
@@ -53,9 +54,7 @@ export default function AssetItem(props: Props) {
               <Text size='sm' className='h-5 leading-5 text-left truncate '>
                 {asset.name}
               </Text>
-              <div className='rounded-sm bg-white/20 px-[6px] py-[2px] h-5 leading-5 '>
+              <AssetSymbol symbol={asset.symbol} />
-                <Text size='xs'>{asset.symbol}</Text>
-              </div>
             </div>
             {props.balances.length > 0 && (
               <div className='flex gap-1'>

src/components/Wallet/WalletConnectedButton.tsx

@@ -1,10 +1,10 @@
 import { useShuttle } from '@delphi-labs/shuttle-react'
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
-import { useCallback, useEffect, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
-import useClipboard from 'react-use-clipboard'
 import { resolvePrimaryDomainByAddress } from 'ibc-domains-sdk'
+import { useCallback, useEffect, useState } from 'react'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import useClipboard from 'react-use-clipboard'
 
 import Button from 'components/Button'
 import { CircularProgress } from 'components/CircularProgress'
@@ -44,6 +44,7 @@ export default function WalletConnectedButton() {
   const { data: icnsData, isLoading: isLoadingICNS } = useICNSDomain(address)
   const navigate = useNavigate()
   const { pathname } = useLocation()
+  const [searchParams] = useSearchParams()
 
   // ---------------
   // LOCAL STATE
@@ -87,7 +88,7 @@ export default function WalletConnectedButton() {
       })
     }
 
-    navigate(getRoute(getPage(pathname)))
+    navigate(getRoute(getPage(pathname), searchParams))
   }
 
   useEffect(() => {

src/components/Wallet/WalletFetchBalancesAndAccounts.tsx

@@ -1,5 +1,5 @@
 import { Suspense, useEffect, useMemo } from 'react'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 
 import AccountCreateFirst from 'components/Account/AccountCreateFirst'
 import { CircularProgress } from 'components/CircularProgress'
@@ -28,6 +28,8 @@ function FetchLoading() {
 
 function Content() {
   const address = useStore((s) => s.address)
+  const [searchParams] = useSearchParams()
+
   const { address: urlAddress } = useParams()
   const urlAccountId = useAccountId()
   const navigate = useNavigate()
@@ -48,7 +50,7 @@ function Content() {
   useEffect(() => {
     const page = getPage(pathname)
     if (page === 'portfolio' && urlAddress && urlAddress !== address) {
-      navigate(getRoute(page, urlAddress as string))
+      navigate(getRoute(page, searchParams, urlAddress as string))
       useStore.setState({ balances: walletBalances, focusComponent: null })
       return
     }
@@ -60,7 +62,7 @@ function Content() {
     ) {
       const currentAccountIsHLS = urlAccountId && !accountIds.includes(urlAccountId)
       const currentAccount = currentAccountIsHLS || !urlAccountId ? accountIds[0] : urlAccountId
-      navigate(getRoute(page, address, currentAccount))
+      navigate(getRoute(page, searchParams, address, currentAccount))
       useStore.setState({ balances: walletBalances, focusComponent: null })
     }
   }, [
@@ -72,6 +74,7 @@ function Content() {
     walletBalances,
     urlAddress,
     urlAccountId,
+    searchParams,
   ])
 
   if (isLoadingAccounts || isLoadingBalances) return <FetchLoading />

src/hooks/perps/usePerpsMarket.ts

@@ -0,0 +1,36 @@
+import { useSearchParams } from 'react-router-dom'
+import useSWR from 'swr'
+
+import { ASSETS } from 'constants/assets'
+import { getAssetBySymbol } from 'utils/assets'
+import { BN } from 'utils/helpers'
+
+export default function usePerpsMarket() {
+  const [searchParams] = useSearchParams()
+  const perpsMarket = searchParams.get('perpsMarket') || ASSETS[0].symbol
+
+  const asset = getAssetBySymbol(perpsMarket)
+
+  return useSWR(
+    `perpsMarket/${perpsMarket}`,
+    async () => {
+      await delay(3000)
+      if (!asset) return null
+      return {
+        asset,
+        fundingRate: BN(0.001432),
+        openInterest: {
+          long: BN(92901203),
+          short: BN(129891203),
+        },
+      } as PerpsMarket
+    },
+    {
+      fallbackData: null,
+    },
+  )
+}
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}

src/pages/PortfolioAccountPage.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 
 import MigrationBanner from 'components/MigrationBanner'
 import Balances from 'components/Portfolio/Account/Balances'
@@ -12,9 +12,10 @@ export default function PortfolioAccountPage() {
   const selectedAccountId = useAccountId()
   const { address, accountId } = useParams()
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
 
   if (!accountId) {
-    navigate(getRoute('portfolio', address, selectedAccountId))
+    navigate(getRoute('portfolio', searchParams, address, selectedAccountId))
     return null
   }
 

src/types/interfaces/asset.d.ts

@@ -144,3 +144,12 @@ interface StakingApr {
   unbondingDelay: number
   unbondingPeriod: number
 }
+
+interface PerpsMarket {
+  asset: Asset
+  fundingRate: BigNumber
+  openInterest: {
+    long: BigNumber
+    short: BigNumber
+  }
+}

src/utils/route.ts

@@ -1,4 +1,9 @@
-export function getRoute(page: Page, address?: string, accountId?: string | null) {
+export function getRoute(
+  page: Page,
+  searchParams: URLSearchParams,
+  address?: string,
+  accountId?: string | null,
+) {
   let nextUrl = ''
 
   if (address) {
@@ -9,10 +14,13 @@ export function getRoute(page: Page, address?: string, accountId?: string | null
 
   let url = new URL(nextUrl, 'https://app.marsprotocol.io')
 
+  Array.from(searchParams?.entries() || []).map(([key, value]) =>
+    url.searchParams.append(key, value),
+  )
+
   if (accountId) {
-    url.searchParams.append('accountId', accountId)
-  } else {
     url.searchParams.delete('accountId')
+    url.searchParams.append('accountId', accountId)
   }
 
   return url.pathname + url.search

tailwind.config.js

@@ -41,12 +41,14 @@ module.exports = {
     '@nav-3/navigation:inline-block',
     '@nav-4/navigation:inline-block',
     '@nav-5/navigation:inline-block',
+    '@nav-6/navigation:inline-block',
     '@nav-0/navigation:hidden',
     '@nav-1/navigation:hidden',
     '@nav-2/navigation:hidden',
     '@nav-3/navigation:hidden',
     '@nav-4/navigation:hidden',
     '@nav-5/navigation:hidden',
+    '@nav-6/navigation:hidden',
   ],
   theme: {
     extend: {
@@ -141,6 +143,7 @@ module.exports = {
         'nav-3': '400px',
         'nav-4': '500px',
         'nav-5': '600px',
+        'nav-6': '650px',
       },
       fontFamily: {
         sans: ['Inter', 'sans-serif'],