add positions count

components/NavTabs.tsx

@@ -3,7 +3,7 @@ type Values = string | number
 interface NavTabsProps<T extends Values> {
   activeValue: string
   onChange: (x: T) => void
-  values: T[]
+  values: [T, number][]
   names?: Array<string>
 }
 
@@ -15,9 +15,9 @@ const NavTabs = <T extends Values>({
 }: NavTabsProps<T>) => {
   return (
     <>
-      {values.map((value, i) => (
+      {values.map(([value, count], i) => (
         <button
-          className={`mx-auto w-full border-y-2 border-r border-th-fgd-1 py-3.5 font-bold first:rounded-l-lg first:border-l-2 last:rounded-r-lg last:border-r-2 ${
+          className={`mx-auto flex w-full items-center justify-center border-y-2 border-r border-th-fgd-1 py-3.5 font-bold first:rounded-l-lg first:border-l-2 last:rounded-r-lg last:border-r-2 ${
             activeValue === value
               ? 'inner-shadow-top-sm bg-th-active text-th-fgd-1'
               : 'inner-shadow-bottom-sm default-transition bg-th-bkg-1 text-th-fgd-1 md:hover:bg-th-bkg-2'
@@ -26,6 +26,15 @@ const NavTabs = <T extends Values>({
           onClick={() => onChange(value)}
         >
           {names ? names[i] : value}
+          {count ? (
+            <div
+              className={`ml-2 rounded ${
+                value === activeValue ? 'bg-th-bkg-1' : 'bg-th-bkg-3'
+              } px-1.5 py-0.5 text-sm text-th-fgd-2`}
+            >
+              {count}
+            </div>
+          ) : null}
         </button>
       ))}
     </>

components/Positions.tsx

@@ -1,13 +1,12 @@
 import useMangoGroup from 'hooks/useMangoGroup'
 import { useMemo } from 'react'
-import { SHOW_INACTIVE_POSITIONS_KEY, STAKEABLE_TOKENS } from 'utils/constants'
+import { BORROW_TOKEN, SHOW_INACTIVE_POSITIONS_KEY } from 'utils/constants'
 import TokenLogo from './shared/TokenLogo'
 import Button from './shared/Button'
 import { formatTokenSymbol } from 'utils/tokens'
 import mangoStore from '@store/mangoStore'
 import Switch from './forms/Switch'
 import useLocalStorageState from 'hooks/useLocalStorageState'
-import useStakeAccounts from 'hooks/useStakeAccounts'
 import FormatNumericValue from './shared/FormatNumericValue'
 import {
   Bank,
@@ -15,9 +14,9 @@ import {
   toUiDecimalsForQuote,
 } from '@blockworks-foundation/mango-v4'
 import useBankRates from 'hooks/useBankRates'
+import usePositions from 'hooks/usePositions'
 
 const set = mangoStore.getState().set
-const BORROW_TOKEN = 'SOL'
 
 type Position = {
   borrowBalance: number
@@ -43,43 +42,9 @@ const Positions = ({
 }: {
   setActiveTab: (tab: string) => void
 }) => {
-  const { group } = useMangoGroup()
   const [showInactivePositions, setShowInactivePositions] =
     useLocalStorageState(SHOW_INACTIVE_POSITIONS_KEY, true)
-  const { stakeAccounts } = useStakeAccounts()
-
-  const borrowBank = useMemo(() => {
-    return group?.banksMapByName.get(BORROW_TOKEN)?.[0]
-  }, [group])
-
-  const banks = useMemo(() => {
-    if (!group) return []
-    const positionBanks = []
-    for (const token of STAKEABLE_TOKENS) {
-      const bank = group.banksMapByName.get(token)?.[0]
-      positionBanks.push(bank)
-    }
-    return positionBanks
-  }, [group])
-
-  const positions = useMemo(() => {
-    const positions = []
-
-    for (const bank of banks) {
-      if (!bank) continue
-      const acct = stakeAccounts?.find((acc) => acc.getTokenBalanceUi(bank) > 0)
-      const stakeBalance = acct ? acct.getTokenBalanceUi(bank) : 0
-      const borrowBalance =
-        acct && borrowBank ? acct.getTokenBalanceUi(borrowBank) : 0
-      positions.push({ borrowBalance, stakeBalance, bank, acct })
-    }
-    const sortedPositions = positions.sort(
-      (a, b) => b.stakeBalance - a.stakeBalance,
-    )
-    return showInactivePositions
-      ? sortedPositions
-      : sortedPositions.filter((pos) => pos.stakeBalance > 0)
-  }, [banks, showInactivePositions, stakeAccounts, borrowBank])
+  const { borrowBank, positions } = usePositions(showInactivePositions)
 
   const numberOfPositions = useMemo(() => {
     if (!positions.length) return 0

hooks/usePositions.ts

@@ -0,0 +1,44 @@
+import { useMemo } from 'react'
+import { BORROW_TOKEN, STAKEABLE_TOKENS } from 'utils/constants'
+import useStakeAccounts from './useStakeAccounts'
+import useMangoGroup from './useMangoGroup'
+
+export default function usePositions(showInactive = false) {
+  const { stakeAccounts } = useStakeAccounts()
+  const { group } = useMangoGroup()
+
+  const borrowBank = useMemo(() => {
+    return group?.banksMapByName.get(BORROW_TOKEN)?.[0]
+  }, [group])
+
+  const banks = useMemo(() => {
+    if (!group) return []
+    const positionBanks = []
+    for (const token of STAKEABLE_TOKENS) {
+      const bank = group.banksMapByName.get(token)?.[0]
+      positionBanks.push(bank)
+    }
+    return positionBanks
+  }, [group])
+
+  const positions = useMemo(() => {
+    const positions = []
+
+    for (const bank of banks) {
+      if (!bank) continue
+      const acct = stakeAccounts?.find((acc) => acc.getTokenBalanceUi(bank) > 0)
+      const stakeBalance = acct ? acct.getTokenBalanceUi(bank) : 0
+      const borrowBalance =
+        acct && borrowBank ? acct.getTokenBalanceUi(borrowBank) : 0
+      positions.push({ borrowBalance, stakeBalance, bank, acct })
+    }
+    const sortedPositions = positions.sort(
+      (a, b) => b.stakeBalance - a.stakeBalance,
+    )
+    return showInactive
+      ? sortedPositions
+      : sortedPositions.filter((pos) => pos.stakeBalance > 0)
+  }, [banks, showInactive, stakeAccounts, borrowBank])
+
+  return { borrowBank, positions }
+}

pages/index.tsx

@@ -3,6 +3,7 @@ import Positions from '@components/Positions'
 import Stake from '@components/Stake'
 import TransactionHistory from '@components/TransactionHistory'
 import mangoStore from '@store/mangoStore'
+import usePositions from 'hooks/usePositions'
 import type { NextPage } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useEffect, useState } from 'react'
@@ -21,6 +22,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
 const Index: NextPage = () => {
   const [activeTab, setActiveTab] = useState('Boost!')
   const selectedToken = mangoStore((s) => s.selectedToken)
+  const { positions } = usePositions()
 
   useEffect(() => {
     const mangoAccounts = mangoStore.getState().mangoAccounts
@@ -45,7 +47,11 @@ const Index: NextPage = () => {
       <div className="mb-6 grid grid-cols-3">
         <NavTabs
           activeValue={activeTab}
-          values={['Boost!', 'Positions', 'Activity']}
+          values={[
+            ['Boost!', 0],
+            ['Positions', positions.length],
+            ['Activity', 0],
+          ]}
           onChange={setActiveTab}
         />
       </div>

utils/constants.ts

@@ -1,6 +1,8 @@
 import { PublicKey } from '@metaplex-foundation/js'
 
 // lev stake
+export const BORROW_TOKEN = 'SOL'
+
 export const STAKEABLE_TOKENS_DATA = [
   { name: 'MSOL', id: 1, active: true },
   { name: 'JitoSOL', id: 2, active: true },