add lastUpdatedAt to improve useMangoAccount rerendering trigger

components/AccountInfo.tsx

@@ -34,8 +34,7 @@ export default function AccountInfo() {
   const connected = useMangoStore((s) => s.wallet.connected)
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
-  const mangoAccount = useMangoAccount()
+  const { mangoAccount, initialLoad } = useMangoAccount()
-  const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const mangoClient = useMangoStore((s) => s.connection.client)
   const actions = useMangoStore((s) => s.actions)
@@ -164,7 +163,7 @@ export default function AccountInfo() {
                 {t('equity')}
               </div>
               <div className="text-th-fgd-1">
-                {isLoading ? <DataLoader /> : formatUsdValue(+equity)}
+                {initialLoad ? <DataLoader /> : formatUsdValue(+equity)}
               </div>
             </div>
             <div className="flex justify-between pb-3">
@@ -172,7 +171,7 @@ export default function AccountInfo() {
                 {t('leverage')}
               </div>
               <div className="text-th-fgd-1">
-                {isLoading ? (
+                {initialLoad ? (
                   <DataLoader />
                 ) : mangoAccount ? (
                   `${mangoAccount
@@ -188,7 +187,7 @@ export default function AccountInfo() {
                 {t('collateral-available')}
               </div>
               <div className={`text-th-fgd-1`}>
-                {isLoading ? (
+                {initialLoad ? (
                   <DataLoader />
                 ) : mangoAccount ? (
                   usdFormatter(
@@ -252,7 +251,7 @@ export default function AccountInfo() {
                 </div>
               </Tooltip>
               <div className={`flex items-center text-th-fgd-1`}>
-                {isLoading ? (
+                {initialLoad ? (
                   <DataLoader />
                 ) : mangoGroup ? (
                   nativeToUi(

components/BalancesTable.tsx

@@ -21,10 +21,8 @@ import WithdrawModal from './WithdrawModal'
 import { ExpandableRow } from './TableElements'
 import MobileTableHeader from './mobile/MobileTableHeader'
 import { useTranslation } from 'next-i18next'
-import useMangoAccount from '../hooks/useMangoAccount'
 
 const BalancesTable = ({ showZeroBalances = false }) => {
-  useMangoAccount()
   const { t } = useTranslation('common')
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)

components/MarketPosition.tsx

@@ -67,11 +67,10 @@ export default function MarketPosition() {
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
-  const mangoAccount = useMangoAccount()
+  const { mangoAccount, initialLoad } = useMangoAccount()
   const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const connected = useMangoStore((s) => s.wallet.connected)
-  const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
   const setMangoStore = useMangoStore((s) => s.set)
   const price = useMangoStore((s) => s.tradeForm.price)
   const baseSymbol = marketConfig.baseSymbol
@@ -164,7 +163,7 @@ export default function MarketPosition() {
         ) : null}
         <div className="flex items-center justify-between pb-3">
           <div className="font-normal text-th-fgd-3 leading-4">{t('size')}</div>
-          {isLoading ? (
+          {initialLoad ? (
             <DataLoader />
           ) : (
             <PerpSideBadge perpAccount={perpAccount}></PerpSideBadge>
@@ -175,7 +174,7 @@ export default function MarketPosition() {
             {t('position-size')}
           </div>
           <div className="text-th-fgd-1">
-            {isLoading ? (
+            {initialLoad ? (
               <DataLoader />
             ) : basePosition ? (
               <span
@@ -199,7 +198,7 @@ export default function MarketPosition() {
             {t('notional-size')}
           </div>
           <div className="text-th-fgd-1">
-            {isLoading ? (
+            {initialLoad ? (
               <DataLoader />
             ) : notionalSize ? (
               formatUsdValue(Math.abs(notionalSize))
@@ -213,7 +212,7 @@ export default function MarketPosition() {
             {t('average-entry')}
           </div>
           <div className="text-th-fgd-1">
-            {isLoading ? (
+            {initialLoad ? (
               <DataLoader />
             ) : avgEntryPrice ? (
               formatUsdValue(avgEntryPrice)
@@ -227,7 +226,7 @@ export default function MarketPosition() {
             {t('break-even')}
           </div>
           <div className="text-th-fgd-1">
-            {isLoading ? (
+            {initialLoad ? (
               <DataLoader />
             ) : breakEvenPrice ? (
               formatUsdValue(breakEvenPrice)
@@ -243,7 +242,7 @@ export default function MarketPosition() {
             </Tooltip.Content>
           </Tooltip>
           <div className="flex items-center">
-            {isLoading ? <DataLoader /> : <PnlText pnl={unsettledPnl} />}
+            {initialLoad ? <DataLoader /> : <PnlText pnl={unsettledPnl} />}
             {settling ? (
               <Loading className="ml-2" />
             ) : (

components/Orderbook.tsx

@@ -208,7 +208,7 @@ export default function Orderbook({ depth = 8 }) {
         setOrderbookData(null)
       }
     }
-  }, 250)
+  }, 500)
 
   useEffect(() => {
     lastOrderbookData.current = {

components/UserInfo.tsx

@@ -10,6 +10,7 @@ import TradeHistoryTable from './TradeHistoryTable'
 import ManualRefresh from './ManualRefresh'
 import Tabs from './Tabs'
 import FeeDiscountsTable from './FeeDiscountsTable'
+import useMangoAccount from '../hooks/useMangoAccount'
 
 const TABS = [
   'Balances',
@@ -22,8 +23,9 @@ const TABS = [
 const UserInfoTabs = ({ activeTab, setActiveTab }) => {
   const openOrders = useOpenOrders()
   const { openPositions } = usePerpPositions()
+  const { mangoAccount } = useMangoAccount()
   const connected = useMangoStore((s) => s.connection.current)
-  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+
   const handleTabChange = (tabName) => {
     setActiveTab(tabName)
   }

hooks/useBalances.tsx

@@ -9,11 +9,12 @@ import useMangoStore from '../stores/useMangoStore'
 import { i80f48ToPercent } from '../utils/index'
 import { sumBy } from 'lodash'
 import { I80F48 } from '@blockworks-foundation/mango-client/lib/src/fixednum'
+import useMangoAccount from './useMangoAccount'
 
 export function useBalances(): Balances[] {
   const balances = []
+  const { mangoAccount } = useMangoAccount()
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
-  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
 

hooks/useMangoAccount.tsx

@@ -1,11 +1,19 @@
 import useMangoStore from '../stores/useMangoStore'
 import { MangoAccount } from '@blockworks-foundation/mango-client'
+import shallow from 'zustand/shallow'
 
-export default function useMangoAccount(): MangoAccount {
+export default function useMangoAccount(): {
-  const mangoAccount = useMangoStore(
+  mangoAccount: MangoAccount
-    (state) => state.selectedMangoAccount.current,
+  initialLoad: boolean
-    () => false
+} {
+  const { mangoAccount, initialLoad } = useMangoStore(
+    (state) => ({
+      mangoAccount: state.selectedMangoAccount.current,
+      lastUpdatedAt: state.selectedMangoAccount.lastUpdatedAt,
+      initialLoad: state.selectedMangoAccount.initialLoad,
+    }),
+    shallow
   )
 
-  return mangoAccount
+  return { mangoAccount, initialLoad }
 }

hooks/usePerpPositions.tsx

@@ -79,7 +79,7 @@ export const collectPerpPosition = (
 }
 
 const usePerpPositions = () => {
-  const mangoAccount = useMangoAccount()
+  const { mangoAccount } = useMangoAccount()
   const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)

stores/useMangoStore.tsx

@@ -144,6 +144,7 @@ interface MangoStore extends State {
   selectedMangoAccount: {
     current: MangoAccount | null
     initialLoad: boolean
+    lastUpdatedAt: number
   }
   tradeForm: {
     side: 'buy' | 'sell'
@@ -226,6 +227,7 @@ const useMangoStore = create<MangoStore>((set, get) => {
     selectedMangoAccount: {
       current: null,
       initialLoad: true,
+      lastUpdatedAt: 0,
     },
     tradeForm: {
       side: 'buy',
@@ -468,9 +470,11 @@ const useMangoStore = create<MangoStore>((set, get) => {
           connection,
           mangoClient.lastSlot
         )
+        console.log('reloading mango account')
 
         set((state) => {
           state.selectedMangoAccount.current = reloadedMangoAccount
+          state.selectedMangoAccount.lastUpdatedAt = new Date().toISOString()
         })
       },
       async reloadOrders() {