hide perp positions table if none open

components/PositionsTable.tsx

@@ -35,10 +35,21 @@ const PositionsTable = () => {
     [mangoGroup]
   )
   const perpAccounts = mangoAccount
-    ? groupConfig.perpMarkets.map(
-        (m) => mangoAccount.perpAccounts[m.marketIndex]
-      )
+    ? groupConfig.perpMarkets.map((m) => {
+        return {
+          perpAccount: mangoAccount.perpAccounts[m.marketIndex],
+          marketIndex: m.marketIndex,
+        }
+      })
     : []
+  const filteredPerpAccounts = perpAccounts.filter(
+    ({ perpAccount }) =>
+      !(
+        perpAccount.quotePosition.eq(ZERO_I80F48) &&
+        perpAccount.basePosition.eq(new BN(0))
+      )
+  )
+  console.log('perp acc length', filteredPerpAccounts.length)
 
   const handleSettlePnl = async (
     perpMarket: PerpMarket,
@@ -81,7 +92,7 @@ const PositionsTable = () => {
     <div className="flex flex-col py-4">
       <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div className="align-middle inline-block min-w-full sm:px-6 lg:px-8">
-          {perpAccounts.length ? (
+          {filteredPerpAccounts.length ? (
             <div className="overflow-hidden border-b border-th-bkg-2 sm:rounded-m">
               <Table className="min-w-full divide-y divide-th-bkg-2">
                 <Thead>
@@ -110,94 +121,90 @@ const PositionsTable = () => {
                   </Tr>
                 </Thead>
                 <Tbody>
-                  {perpAccounts.map((perpAcc, index) => {
-                    const perpMarketInfo = perpMarkets[index]
-                    const marketConfig = getMarketByPublicKey(
-                      groupConfig,
-                      perpMarketInfo.perpMarket
-                    )
+                  {filteredPerpAccounts.map(
+                    ({ perpAccount, marketIndex }, index) => {
+                      const perpMarketInfo = perpMarkets[marketIndex]
+                      const marketConfig = getMarketByPublicKey(
+                        groupConfig,
+                        perpMarketInfo.perpMarket
+                      )
 
-                    const marketCache =
-                      mangoCache.perpMarketCache[marketConfig.marketIndex]
-                    const price =
-                      mangoCache.priceCache[marketConfig.marketIndex].price
-                    const perpMarket = allMarkets[
-                      marketConfig.publicKey.toString()
-                    ] as PerpMarket
+                      const marketCache =
+                        mangoCache.perpMarketCache[marketIndex]
+                      const price = mangoCache.priceCache[marketIndex].price
+                      const perpMarket = allMarkets[
+                        marketConfig.publicKey.toString()
+                      ] as PerpMarket
 
-                    if (
-                      perpAcc.quotePosition.eq(ZERO_I80F48) &&
-                      perpAcc.basePosition.eq(new BN(0))
-                    ) {
-                      return null
-                    }
-
-                    return (
-                      <Tr
-                        key={`${index}`}
-                        className={`border-b border-th-bkg-3
+                      return (
+                        <Tr
+                          key={`${marketIndex}`}
+                          className={`border-b border-th-bkg-3
                         ${index % 2 === 0 ? `bg-th-bkg-2` : `bg-th-bkg-3`}
                       `}
-                      >
-                        <Td className="px-6 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
-                          {marketConfig.name}
-                        </Td>
-                        <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
-                          <SideBadge
-                            side={
-                              perpAcc.basePosition.gt(new BN(0))
-                                ? 'long'
-                                : 'short'
-                            }
-                          />
-                        </Td>
-                        <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
-                          {perpMarket.baseLotsToNumber(perpAcc.basePosition)}
-                        </Td>
-                        <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
-                          {nativeI80F48ToUi(
-                            perpAcc.quotePosition,
-                            marketConfig.quoteDecimals
-                          ).toFixed()}
-                        </Td>
-                        <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
-                          $
-                          {nativeI80F48ToUi(
-                            perpAcc.getPnl(perpMarketInfo, price),
-                            marketConfig.quoteDecimals
-                          ).toFixed()}
-                        </Td>
-                        <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
-                          {perpAcc
-                            .getHealth(
-                              perpMarketInfo,
-                              price,
-                              perpMarketInfo.maintAssetWeight,
-                              perpMarketInfo.maintLiabWeight,
-                              marketCache.longFunding,
-                              marketCache.shortFunding
-                            )
-                            .toFixed(3)}
-                        </Td>
-                        <Td className="px-6 whitespace-nowrap text-sm text-th-fgd-1">
-                          <div className="flex justify-end">
-                            <Button
-                              onClick={() =>
-                                handleSettlePnl(perpMarket, perpAcc)
+                        >
+                          <Td className="px-6 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                            {marketConfig.name}
+                          </Td>
+                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                            <SideBadge
+                              side={
+                                perpAccount.basePosition.gt(new BN(0))
+                                  ? 'long'
+                                  : 'short'
                               }
-                              className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
-                            >
-                              {settlingPerpAcc == perpAcc ? (
-                                <Loading />
-                              ) : (
-                                <span>Settle PNL</span>
-                              )}
-                            </Button>
-                          </div>
-                        </Td>
-                      </Tr>
-                    )
-                  })}
+                            />
+                          </Td>
+                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                            {perpMarket.baseLotsToNumber(
+                              perpAccount.basePosition
+                            )}
+                          </Td>
+                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                            {nativeI80F48ToUi(
+                              perpAccount.quotePosition,
+                              marketConfig.quoteDecimals
+                            ).toFixed()}
+                          </Td>
+                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                            $
+                            {nativeI80F48ToUi(
+                              perpAccount.getPnl(perpMarketInfo, price),
+                              marketConfig.quoteDecimals
+                            ).toFixed()}
+                          </Td>
+                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                            {perpAccount
+                              .getHealth(
+                                perpMarketInfo,
+                                price,
+                                perpMarketInfo.maintAssetWeight,
+                                perpMarketInfo.maintLiabWeight,
+                                marketCache.longFunding,
+                                marketCache.shortFunding
+                              )
+                              .toFixed(3)}
+                          </Td>
+                          <Td className="px-6 whitespace-nowrap text-sm text-th-fgd-1">
+                            <div className="flex justify-end">
+                              <Button
+                                onClick={() =>
+                                  handleSettlePnl(perpMarket, perpAccount)
+                                }
+                                className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
+                              >
+                                {settlingPerpAcc == perpAccount ? (
+                                  <Loading />
+                                ) : (
+                                  <span>Settle PNL</span>
+                                )}
+                              </Button>
+                            </div>
+                          </Td>
+                        </Tr>
+                      )
+                    }
+                  )}
                 </Tbody>
               </Table>
             </div>

components/TradeHistoryTable.tsx

@@ -7,15 +7,11 @@ import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import SideBadge from './SideBadge'
 import { LinkButton } from './Button'
 import { useSortableData } from '../hooks/useSortableData'
-import useMangoStore from '../stores/useMangoStore'
 
 const TradeHistoryTable = () => {
   const { asPath } = useRouter()
   const tradeHistory = useTradeHistory()
   const { items, requestSort, sortConfig } = useSortableData(tradeHistory)
-  console.log('trade history items: ', items)
-
-  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
 
   const renderTradeDateTime = (timestamp: BN | string) => {
     let date
@@ -276,7 +272,7 @@ const TradeHistoryTable = () => {
             <div
               className={`w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md`}
             >
-              No {marketConfig.name} trade history.
+              No trade history.
               {asPath === '/account' ? (
                 <Link href={'/'}>
                   <a

hooks/useHydrateStore.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { AccountInfo } from '@solana/web3.js'
 import useMangoStore, {
   DEFAULT_CONNECTION,
@@ -78,28 +78,30 @@ const useHydrateStore = () => {
   }, [selectedMarket])
 
   // fetch filled trades for selected market
-  useInterval(() => {
-    async function fetchFills() {
-      const market = useMangoStore.getState().selectedMarket.current
-
-      if (!market) {
-        return null
-      }
-      try {
-        const loadedFills = await selectedMarket.loadFills(
-          DEFAULT_CONNECTION,
-          10000
-        )
-        setMangoStore((state) => {
-          state.selectedMarket.fills = loadedFills
-        })
-      } catch (err) {
-        console.log('Error fetching fills:', err)
-      }
+  const fetchFills = useCallback(async () => {
+    if (!selectedMarket) {
+      return null
     }
+    try {
+      const loadedFills = await selectedMarket.loadFills(
+        DEFAULT_CONNECTION,
+        10000
+      )
+      setMangoStore((state) => {
+        state.selectedMarket.fills = loadedFills
+      })
+    } catch (err) {
+      console.log('Error fetching fills:', err)
+    }
+  }, [selectedMarket, setMangoStore])
 
+  useInterval(() => {
     fetchFills()
   }, _SLOW_REFRESH_INTERVAL)
+
+  useEffect(() => {
+    fetchFills()
+  }, [fetchFills])
 }
 
 export default useHydrateStore