use mango store for tabs

components/HomePage.tsx

@@ -3,17 +3,23 @@ import NavTabs from './NavTabs'
 import Positions from './Positions'
 import Stake from './Stake'
 import TransactionHistory from './TransactionHistory'
-import mangoStore from '@store/mangoStore'
-import { useEffect, useState } from 'react'
+import mangoStore, { ActiveTab } from '@store/mangoStore'
+import { useCallback, useEffect } from 'react'
 import { BOOST_ACCOUNT_PREFIX } from 'utils/constants'
 
 const set = mangoStore.getState().set
 
 const HomePage = () => {
-  const [activeTab, setActiveTab] = useState('Boost!')
+  const activeTab = mangoStore((s) => s.activeTab)
   const selectedToken = mangoStore((s) => s.selectedToken)
   const { positions } = usePositions()
 
+  const setActiveTab = useCallback((tab: ActiveTab) => {
+    return set((s) => {
+      s.activeTab = tab
+    })
+  }, [])
+
   useEffect(() => {
     const mangoAccounts = mangoStore.getState().mangoAccounts
     const selectedMangoAccount = mangoAccounts.find(
@@ -56,7 +62,7 @@ const TabContent = ({
   setActiveTab,
 }: {
   activeTab: string
-  setActiveTab: (tab: string) => void
+  setActiveTab: (tab: ActiveTab) => void
 }) => {
   switch (activeTab) {
     case 'Boost!':

components/NavTabs.tsx

@@ -30,9 +30,9 @@ const NavTabs = <T extends Values>({
             <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`}
+              } px-1.5 py-0.5 `}
             >
-              {count}
+              <span className="text-sm text-th-fgd-2">{count}</span>
             </div>
           ) : null}
         </button>

components/Positions.tsx

@@ -4,7 +4,7 @@ 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 mangoStore, { ActiveTab } from '@store/mangoStore'
 import Switch from './forms/Switch'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import FormatNumericValue from './shared/FormatNumericValue'
@@ -40,7 +40,7 @@ const getLiquidationRatio = (
 const Positions = ({
   setActiveTab,
 }: {
-  setActiveTab: (tab: string) => void
+  setActiveTab: (tab: ActiveTab) => void
 }) => {
   const [showInactivePositions, setShowInactivePositions] =
     useLocalStorageState(SHOW_INACTIVE_POSITIONS_KEY, true)
@@ -92,7 +92,7 @@ const PositionItem = ({
   borrowBank,
 }: {
   position: Position
-  setActiveTab: (v: string) => void
+  setActiveTab: (v: ActiveTab) => void
   borrowBank: Bank | undefined
 }) => {
   const { group } = useMangoGroup()

store/mangoStore.ts

@@ -136,8 +136,11 @@ export const DEFAULT_TRADE_FORM: TradeForm = {
   reduceOnly: false,
 }
 
+export type ActiveTab = 'Boost!' | 'Positions' | 'Activity'
+
 export type MangoStore = {
   // leverage stake
+  activeTab: ActiveTab
   selectedToken: string
   estimatedMaxAPY: {
     current: number
@@ -301,6 +304,7 @@ const mangoStore = create<MangoStore>()(
 
     return {
       // leverage stake
+      activeTab: 'Boost!',
       selectedToken: STAKEABLE_TOKENS[0],
       estimatedMaxAPY: {
         current: 0,