move width and height into mangostore

components/MangoProvider.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import mangoStore from '@store/mangoStore'
 import { Keypair, PublicKey } from '@solana/web3.js'
 import { useRouter } from 'next/router'
@@ -23,6 +23,21 @@ const HydrateStore = () => {
 
   const [, setLastWalletName] = useLocalStorageState(LAST_WALLET_NAME, '')
 
+  const handleWindowResize = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      set((s) => {
+        s.window.width = window.innerWidth
+        s.window.height = window.innerHeight
+      })
+    }
+  }, [])
+  // store the window width and height on resize
+  useEffect(() => {
+    handleWindowResize()
+    window.addEventListener('resize', handleWindowResize)
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [handleWindowResize])
+
   useEffect(() => {
     if (wallet?.adapter) {
       setLastWalletName(wallet?.adapter.name)

components/TopBar.tsx

@@ -21,7 +21,6 @@ import useOnlineStatus from 'hooks/useOnlineStatus'
 import { abbreviateAddress } from 'utils/formatting'
 import DepositWithdrawModal from './modals/DepositWithdrawModal'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import AccountsButton from './AccountsButton'
 import useUnownedAccount from 'hooks/useUnownedAccount'
 import NotificationsButton from './notifications/NotificationsButton'
@@ -50,8 +49,7 @@ const TopBar = () => {
   const router = useRouter()
   const { query } = router
 
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.sm : false
+  const { isMobile } = useViewport()
 
   const { isUnownedAccount } = useUnownedAccount()
   const showUserSetup = mangoStore((s) => s.showUserSetup)

components/trade/TradeInfoTabs.tsx

@@ -20,8 +20,7 @@ const TradeInfoTabs = () => {
   const unsettledSpotBalances = useUnsettledSpotBalances()
   const unsettledPerpPositions = useUnsettledPerpPositions()
   const openPerpPositions = useOpenPerpPositions()
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.md : false
+  const { isMobile, width } = useViewport()
   const fillTabWidth = width ? width < breakpoints['2xl'] : false
 
   useEffect(() => {

hooks/useViewport.tsx

@@ -1,21 +1,14 @@
-import { useCallback, useEffect, useState } from 'react'
+import mangoStore from '@store/mangoStore'
+import { useMemo } from 'react'
+import { breakpoints } from 'utils/theme'
 
 export const useViewport = () => {
-  const [width, setWidth] = useState<number>(0)
-  const [height, setHeight] = useState<number>(0)
+  const width = mangoStore((s) => s.window.width)
+  const height = mangoStore((s) => s.window.height)
 
-  const handleWindowResize = useCallback(() => {
-    if (typeof window !== 'undefined') {
-      setWidth(window.innerWidth)
-      setHeight(window.innerHeight)
-    }
-  }, [])
+  const isMobile = useMemo(() => {
+    return width ? width < breakpoints.sm : false
+  }, [width])
 
-  useEffect(() => {
-    handleWindowResize()
-    window.addEventListener('resize', handleWindowResize)
-    return () => window.removeEventListener('resize', handleWindowResize)
-  }, [handleWindowResize])
-
-  return { width, height }
+  return { width, height, isMobile }
 }

store/mangoStore.ts

@@ -45,7 +45,6 @@ import {
   MAX_PRIORITY_FEE_KEYS,
   OUTPUT_TOKEN_DEFAULT,
   PAGINATION_PAGE_LENGTH,
-  PRIORITY_FEE_KEY,
   RPC_PROVIDER_KEY,
   SWAP_MARGIN_KEY,
 } from '../utils/constants'
@@ -253,6 +252,10 @@ export type MangoStore = {
       loading: boolean
     }
   }
+  window: {
+    width: number
+    height: number
+  }
   actions: {
     fetchAccountInterestTotals: (mangoAccountPk: string) => Promise<void>
     fetchActivityFeed: (
@@ -421,6 +424,10 @@ const mangoStore = create<MangoStore>()(
           loading: false,
         },
       },
+      window: {
+        width: 0,
+        height: 0,
+      },
       actions: {
         fetchAccountInterestTotals: async (mangoAccountPk: string) => {
           const set = get().set