show current market event queue fills

components/TradeHistoryTable.tsx

@@ -6,11 +6,13 @@ 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)
+  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
 
   const renderTradeDateTime = (timestamp) => {
     const date = new Date(timestamp)
@@ -263,7 +265,7 @@ const TradeHistoryTable = () => {
             <div
               className={`w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md`}
             >
-              No trade history.
+              No {marketConfig.name} trade history.
               {asPath === '/account' ? (
                 <Link href={'/'}>
                   <a

hooks/useHydrateStore.tsx

@@ -99,6 +99,11 @@ const useHydrateStore = () => {
         } catch (err) {
           console.log('Error fetching fills:', err)
         }
+      } else {
+        // Load perp market fills
+        setMangoStore((state) => {
+          state.selectedMarket.fills = []
+        })
       }
     }
 

hooks/useTradeHistory.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'react'
 import useMangoStore from '../stores/useMangoStore'
 
 const byTimestamp = (a, b) => {
@@ -25,20 +24,10 @@ const formatTradeHistory = (newTradeHistory) => {
 }
 
 const useFills = () => {
-  const fillsRef = useRef(useMangoStore.getState().selectedMarket.fills)
-  const fills = fillsRef.current
-  useEffect(
-    () =>
-      useMangoStore.subscribe(
-        (fills) => (fillsRef.current = fills as []),
-        (state) => state.selectedMarket.fills
-      ),
-    []
-  )
-
+  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
+  const fills = useMangoStore((s) => s.selectedMarket.fills)
   const marginAccount = useMangoStore((s) => s.selectedMarginAccount.current)
   const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
-  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
 
   if (!marginAccount || !selectedMangoGroup) return null
 

stores/useMangoStore.tsx

@@ -367,7 +367,6 @@ const useMangoStore = create<MangoStore>((set, get) => ({
             allMarketAccountInfos
               .concat(allBidsAndAsksAccountInfos)
               .forEach(({ publicKey, accountInfo }) => {
-                console.log(publicKey.toBase58(), accountInfo)
                 state.accountInfos[publicKey.toBase58()] = accountInfo
               })
           })