From efe5698af4362788e6b3aab928df4166a92f2826 Mon Sep 17 00:00:00 2001
From: Tyler Shipe <tjshipe@gmail.com>
Date: Thu, 15 Apr 2021 15:05:48 -0400
Subject: [PATCH] Fix pnl display and better err handling on fetching fills

---
 components/MarginInfo.tsx |  9 ++++++---
 hooks/useHydrateStore.tsx | 20 ++++++++++----------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/components/MarginInfo.tsx b/components/MarginInfo.tsx
index 0b4d539..b2a6b8f 100644
--- a/components/MarginInfo.tsx
+++ b/components/MarginInfo.tsx
@@ -1,5 +1,5 @@
+import { useEffect, useState, useMemo } from 'react'
 import { Popover } from 'antd'
-import { useEffect, useState } from 'react'
 import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils'
 import { groupBy } from '../utils'
 import useTradeHistory from '../hooks/useTradeHistory'
@@ -7,6 +7,8 @@ import useMangoStore from '../stores/useMangoStore'
 import FloatingElement from './FloatingElement'
 
 const calculatePNL = (tradeHistory, prices, mangoGroup) => {
+  console.log('calculate pnl, trade history:', tradeHistory)
+
   if (!tradeHistory.length) return '0.00'
   const profitAndLoss = {}
   const groupedTrades = groupBy(tradeHistory, (trade) => trade.marketName)
@@ -68,6 +70,7 @@ export default function MarginInfo() {
     | null
   >(null)
   const tradeHistory = useTradeHistory()
+  const tradeHistoryLength = useMemo(() => tradeHistory.length, [tradeHistory])
 
   useEffect(() => {
     if (selectedMangoGroup) {
@@ -145,8 +148,8 @@ export default function MarginInfo() {
         ])
       })
     }
-    // eslint-disable-next-line
-  }, [selectedMarginAccount, selectedMangoGroup])
+  }, [selectedMarginAccount, selectedMangoGroup, tradeHistoryLength])
+
   return (
     <FloatingElement>
       <>
diff --git a/hooks/useHydrateStore.tsx b/hooks/useHydrateStore.tsx
index 5246eef..06748a9 100644
--- a/hooks/useHydrateStore.tsx
+++ b/hooks/useHydrateStore.tsx
@@ -143,17 +143,17 @@ const useHydrateStore = () => {
       if (!market || !connection) {
         return null
       }
-      const loadedFills = await market.loadFills(connection, 10000)
+      try {
+        const loadedFills = await market.loadFills(connection, 10000)
+        setSerumStore((state) => {
+          state.fills = loadedFills
+        })
+      } catch (err) {
+        console.log('Error fetching fills:', err)
+      }
+    }
 
-      setSerumStore((state) => {
-        state.fills = loadedFills
-      })
-    }
-    try {
-      fetchFills()
-    } catch (err) {
-      console.error('Error fetching fills:', err)
-    }
+    fetchFills()
   }, _SLOW_REFRESH_INTERVAL)
 }