refactor isMobile

components/account/AccountActions.tsx

@@ -28,7 +28,6 @@ import { Popover, Transition } from '@headlessui/react'
 import ActionsLinkButton from './ActionsLinkButton'
 import useUnownedAccount from 'hooks/useUnownedAccount'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import MangoAccountSizeModal from '@components/modals/MangoAccountSizeModal'
 import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
 import useLocalStorageState from 'hooks/useLocalStorageState'
@@ -58,8 +57,7 @@ const AccountActions = () => {
   const [privacyMode, setPrivacyMode] = useLocalStorageState(PRIVACY_MODE)
   const { connected } = useWallet()
   const { isDelegatedAccount, isUnownedAccount } = useUnownedAccount()
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.sm : false
+  const { isMobile } = useViewport()
   const { isAccountFull } = useMangoAccountAccounts()
 
   const handleBorrowModal = () => {

components/account/AccountPage.tsx

@@ -8,7 +8,6 @@ import useMangoAccount from '../../hooks/useMangoAccount'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import dayjs from 'dayjs'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import useMangoGroup from 'hooks/useMangoGroup'
 import PnlHistoryModal from '@components/modals/PnlHistoryModal'
 import AssetsLiabilities from './AssetsLiabilities'
@@ -38,8 +37,7 @@ const AccountPage = () => {
   const { group } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
   const [showPnlHistory, setShowPnlHistory] = useState<boolean>(false)
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.md : false
+  const { isTablet } = useViewport()
   const [activeTab, setActiveTab] = useLocalStorageState(
     'accountHeroKey-0.1',
     'account-value',
@@ -127,7 +125,7 @@ const AccountPage = () => {
               />
             ) : null}
             {activeTab === 'account:assets-liabilities' ? (
-              <AssetsLiabilities isMobile={isMobile} />
+              <AssetsLiabilities isMobile={isTablet} />
             ) : null}
           </div>
         </div>

components/account/AccountTabs.tsx

@@ -4,7 +4,6 @@ import TokenList from '../TokenList'
 import UnsettledTrades from '@components/trade/UnsettledTrades'
 import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
 import mangoStore from '@store/mangoStore'
 import PerpPositions from '@components/trade/PerpPositions'
@@ -19,12 +18,11 @@ import SwapOrders from '@components/swap/SwapOrders'
 const AccountTabs = () => {
   const [activeTab, setActiveTab] = useState('balances')
   const { mangoAccount } = useMangoAccount()
-  const { width } = useViewport()
+  const { isMobile, isTablet } = useViewport()
   const unsettledSpotBalances = useUnsettledSpotBalances()
   const unsettledPerpPositions = useUnsettledPerpPositions()
   const openPerpPositions = useOpenPerpPositions()
   const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
-  const isMobile = width ? width < breakpoints.md : false
   const { data: isWhiteListed } = useIsWhiteListed()
 
   const tabsWithCount: [string, number][] = useMemo(() => {
@@ -63,12 +61,12 @@ const AccountTabs = () => {
           onChange={(v) => setActiveTab(v)}
           values={tabsWithCount}
           showBorders
-          fillWidth={isMobile}
+          fillWidth={isMobile || isTablet}
         />
         <ManualRefresh
           classNames="fixed bottom-16 right-4 md:relative md:px-2 lg:px-0 lg:pr-6 md:bottom-0 md:right-0 z-10 shadow-lg md:shadow-none bg-th-bkg-3 md:bg-transparent"
-          hideBg={isMobile}
-          size={isMobile ? 'large' : 'small'}
+          hideBg={isMobile || isTablet}
+          size={isTablet ? 'large' : 'small'}
         />
       </div>
       <TabContent activeTab={activeTab} />

components/account/AccountValue.tsx

@@ -17,7 +17,6 @@ import { PerformanceDataItem } from 'types'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import { ViewToShow } from './AccountPage'
 import useAccountPerformanceData from 'hooks/useAccountPerformanceData'
 import useThemeWrapper from 'hooks/useThemeWrapper'
@@ -42,9 +41,8 @@ const AccountValue = ({
     ANIMATION_SETTINGS_KEY,
     INITIAL_ANIMATION_SETTINGS,
   )
-  const { width } = useViewport()
+  const { isTablet } = useViewport()
   const { performanceLoading: loading } = useAccountPerformanceData()
-  const isMobile = width ? width < breakpoints.md : false
 
   const accountValueChange = useMemo(() => {
     if (!accountValue || !rollingDailyData.length) return 0
@@ -118,7 +116,7 @@ const AccountValue = ({
             <Transition
               appear={true}
               className="absolute bottom-2 right-2"
-              show={showExpandChart || isMobile}
+              show={showExpandChart || isTablet}
               enter="transition ease-in duration-300"
               enterFrom="opacity-0 scale-75"
               enterTo="opacity-100 scale-100"

components/account/HealthContributionsChart.tsx

@@ -11,7 +11,6 @@ import { COLORS } from 'styles/colors'
 import { useMemo } from 'react'
 import { formatCurrencyValue } from 'utils/numbers'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import { HealthContribution } from 'types'
 import useThemeWrapper from 'hooks/useThemeWrapper'
 
@@ -26,8 +25,7 @@ const HealthContributionsChart = ({
 }) => {
   const { t } = useTranslation(['common', 'account'])
   const { theme } = useThemeWrapper()
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.sm : false
+  const { isMobile } = useViewport()
 
   const handleClick = (index: number) => {
     setActiveIndex(index)

components/account/MarketsHealthTable.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'next-i18next'
 import useMangoGroup from 'hooks/useMangoGroup'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import { MouseEventHandler } from 'react'
 import MarketLogos from '@components/trade/MarketLogos'
 import { HealthContribution } from 'types'
@@ -28,8 +27,7 @@ const MarketsHealthTable = ({
   const { t } = useTranslation(['common', 'account', 'trade'])
   const { group } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.sm : false
+  const { isMobile } = useViewport()
   return group && mangoAccount ? (
     !isMobile ? (
       <Table>

components/account/TokensHealthTable.tsx

@@ -8,7 +8,6 @@ import { useTranslation } from 'next-i18next'
 import useMangoGroup from 'hooks/useMangoGroup'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import { MouseEventHandler } from 'react'
 import { ContributionDetails, HealthContribution } from 'types'
 
@@ -28,8 +27,7 @@ const TokensHealthTable = ({
   const { t } = useTranslation(['common', 'account', 'trade'])
   const { group } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.sm : false
+  const { isMobile } = useViewport()
 
   return group && mangoAccount ? (
     !isMobile ? (

components/leaderboard/LeaderboardTable.tsx

@@ -4,7 +4,6 @@ import SheenLoader from '@components/shared/SheenLoader'
 import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useViewport } from 'hooks/useViewport'
 import { formatCurrencyValue } from 'utils/numbers'
-import { breakpoints } from 'utils/theme'
 import { LeaderboardRes } from './LeaderboardPage'
 
 const LeaderboardTable = ({
@@ -16,17 +15,6 @@ const LeaderboardTable = ({
 }) => {
   return (
     <>
-      {/* <div className="grid grid-cols-12 px-4 pb-2">
-        <div className="col-span-2 md:col-span-1">
-          <p className="text-xs text-th-fgd-4">{t('rank')}</p>
-        </div>
-        <div className="col-span-4 md:col-span-5">
-          <p className="text-xs text-th-fgd-4">{t('trader')}</p>
-        </div>
-        <div className="col-span-5 flex justify-end">
-          <p className="text-xs text-th-fgd-4">{t('pnl')}</p>
-        </div>
-      </div> */}
       <div className="space-y-2">
         {data.map((d, i) => (
           <LeaderboardRow
@@ -54,8 +42,7 @@ const LeaderboardRow = ({
 }) => {
   const { profile_name, profile_image_url, mango_account, pnl, wallet_pk } =
     item
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.md : false
+  const { isTablet } = useViewport()
 
   return !loading ? (
     <a
@@ -80,9 +67,9 @@ const LeaderboardRow = ({
           {rank < 4 ? <MedalIcon className="absolute" rank={rank} /> : null}
         </div>
         <ProfileImage
-          imageSize={isMobile ? '32' : '40'}
+          imageSize={isTablet ? '32' : '40'}
           imageUrl={profile_image_url}
-          placeholderSize={isMobile ? '20' : '24'}
+          placeholderSize={isTablet ? '20' : '24'}
         />
         <div className="text-left">
           <p className="capitalize text-th-fgd-2 md:text-base">

components/rewards/Leaderboards.tsx

@@ -2,7 +2,6 @@ import MedalIcon from '@components/icons/MedalIcon'
 import ProfileImage from '@components/profile/ProfileImage'
 import { ArrowLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import {
   Badge,
   RewardsLeaderboardItem,
@@ -126,8 +125,7 @@ const LeaderboardCard = ({
   rank: number
   wallet: RewardsLeaderboardItem
 }) => {
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.md : false
+  const { isTablet } = useViewport()
   return (
     <a
       className="flex w-full items-center justify-between rounded-md border border-th-bkg-3 px-3 py-3 md:px-4 md:hover:bg-th-bkg-2"
@@ -151,9 +149,9 @@ const LeaderboardCard = ({
           {rank < 4 ? <MedalIcon className="absolute" rank={rank} /> : null}
         </div>
         <ProfileImage
-          imageSize={isMobile ? '32' : '40'}
+          imageSize={isTablet ? '32' : '40'}
           imageUrl={''}
-          placeholderSize={isMobile ? '20' : '24'}
+          placeholderSize={isTablet ? '20' : '24'}
         />
         <div className="text-left">
           <p className="capitalize text-th-fgd-2 md:text-base">

components/settings/SettingsPage.tsx

@@ -6,16 +6,14 @@ import NotificationSettings from './NotificationSettings'
 import PreferredExplorerSettings from './PreferredExplorerSettings'
 import RpcSettings from './RpcSettings'
 import SoundSettings from './SoundSettings'
-import { breakpoints } from 'utils/theme'
 import AccountSettings from './AccountSettings'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useUnownedAccount from 'hooks/useUnownedAccount'
 
 const SettingsPage = () => {
-  const { width } = useViewport()
+  const { isDesktop } = useViewport()
   const { mangoAccountAddress } = useMangoAccount()
   const { isUnownedAccount } = useUnownedAccount()
-  const isMobile = width ? width < breakpoints.lg : false
   return (
     <div className="grid grid-cols-12">
       <div className="col-span-12 border-b border-th-bkg-3 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
@@ -32,7 +30,7 @@ const SettingsPage = () => {
       <div className="col-span-12 pt-8 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
         <NotificationSettings />
       </div>
-      {!isMobile ? (
+      {isDesktop ? (
         <div className="col-span-12 pt-8 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
           <HotKeysSettings />
         </div>

components/shared/BalancesTable.tsx

@@ -345,8 +345,7 @@ const Balance = ({ bank }: { bank: BankWithBalance }) => {
   const { selectedMarket } = useSelectedMarket()
   const { asPath } = useRouter()
   const { isUnownedAccount } = useUnownedAccount()
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.md : false
+  const { isDesktop } = useViewport()
 
   const tokenBank = bank.bank
 
@@ -456,7 +455,7 @@ const Balance = ({ bank }: { bank: BankWithBalance }) => {
 
   return (
     <p className="font-mono text-th-fgd-2 md:flex md:justify-end">
-      {!isUnownedAccount && !isMobile ? (
+      {!isUnownedAccount && isDesktop ? (
         asPath.includes('/trade') && isBaseOrQuote ? (
           <LinkButton
             className="font-normal underline underline-offset-2 md:underline-offset-4 md:hover:no-underline"

components/swap/SwapInfoTabs.tsx

@@ -5,16 +5,14 @@ import SwapHistoryTable from './SwapHistoryTable'
 import useMangoAccount from 'hooks/useMangoAccount'
 import ManualRefresh from '@components/shared/ManualRefresh'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 import SwapOrders from './SwapOrders'
 import { useIsWhiteListed } from 'hooks/useIsWhiteListed'
 
 const SwapInfoTabs = () => {
   const [selectedTab, setSelectedTab] = useState('balances')
   const { mangoAccount } = useMangoAccount()
-  const { width } = useViewport()
+  const { isMobile, isTablet } = useViewport()
   const { data: isWhiteListed } = useIsWhiteListed()
-  const isMobile = width ? width < breakpoints.md : false
 
   const tabsWithCount: [string, number][] = useMemo(() => {
     const tabs: [string, number][] = [
@@ -43,8 +41,8 @@ const SwapInfoTabs = () => {
         </div>
         <ManualRefresh
           classNames="fixed bottom-16 right-4 md:relative md:px-2 md:bottom-0 md:right-0 z-10 shadow-lg md:shadow-none bg-th-bkg-3 md:bg-transparent"
-          hideBg={isMobile}
-          size={isMobile ? 'large' : 'small'}
+          hideBg={isMobile || isTablet}
+          size={isTablet ? 'large' : 'small'}
         />
       </div>
       {selectedTab === 'balances' ? <SwapTradeBalances /> : null}

components/trade/DepthChart.tsx

@@ -74,9 +74,8 @@ const DepthChart = () => {
   const markPrice = useMarkPrice()
   const orderbook = mangoStore((s) => s.selectedMarket.orderbook)
   const [priceRangePercent, setPriceRangePercentPercent] = useState('10')
-  const { width } = useViewport()
+  const { isTablet, width } = useViewport()
   const increaseHeight = width ? width > breakpoints['3xl'] : false
-  const isMobile = width ? width < breakpoints.md : false
 
   const formatOrderbookData = (orderbook: RawOrderbook, markPrice: number) => {
     const maxPrice = markPrice * 4
@@ -318,7 +317,7 @@ const DepthChart = () => {
       </div>
       <div
         className={
-          increaseHeight ? 'h-[570px]' : isMobile ? 'h-[538px]' : 'h-[482px]'
+          increaseHeight ? 'h-[570px]' : isTablet ? 'h-[538px]' : 'h-[482px]'
         }
       >
         <ResponsiveContainer width="100%" height="100%">

components/trade/Orderbook.tsx

@@ -33,7 +33,6 @@ import {
 import { OrderbookData, OrderbookL2 } from 'types'
 import isEqual from 'lodash/isEqual'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'
 
 const sizeCompacter = Intl.NumberFormat('en', {
   maximumFractionDigits: 6,
@@ -57,14 +56,13 @@ const Orderbook = () => {
   //     ? localStorage.getItem(USE_ORDERBOOK_FEED_KEY) === 'true'
   //     : true
   // )
-  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.md : false
+  const { isTablet } = useViewport()
   const [orderbookData, setOrderbookData] = useState<OrderbookData | null>(null)
   const currentOrderbookData = useRef<OrderbookL2>()
 
   const depth = useMemo(() => {
-    return isMobile ? 12 : 30
-  }, [isMobile])
+    return isTablet ? 12 : 30
+  }, [isTablet])
 
   const depthArray: number[] = useMemo(() => {
     return Array(depth).fill(0)

components/trade/TradeInfoTabs.tsx

@@ -20,7 +20,7 @@ const TradeInfoTabs = () => {
   const unsettledSpotBalances = useUnsettledSpotBalances()
   const unsettledPerpPositions = useUnsettledPerpPositions()
   const openPerpPositions = useOpenPerpPositions()
-  const { isMobile, width } = useViewport()
+  const { isMobile, isTablet, width } = useViewport()
   const fillTabWidth = width ? width < breakpoints['2xl'] : false
 
   useEffect(() => {
@@ -61,8 +61,8 @@ const TradeInfoTabs = () => {
         </div>
         <ManualRefresh
           classNames="fixed bottom-16 right-4 md:relative md:px-2 md:bottom-0 md:right-0 z-10 shadow-lg md:shadow-none bg-th-bkg-3 md:bg-transparent"
-          hideBg={isMobile}
-          size={isMobile ? 'large' : 'small'}
+          hideBg={isMobile || isTablet}
+          size={isTablet ? 'large' : 'small'}
         />
       </div>
       <TabContent selectedTab={selectedTab} />

components/trade/TradingViewChart.tsx

@@ -19,7 +19,6 @@ import {
 import mangoStore from '@store/mangoStore'
 import { useViewport } from 'hooks/useViewport'
 import { SHOW_ORDER_LINES_KEY, TV_USER_ID_KEY } from 'utils/constants'
-import { breakpoints } from 'utils/theme'
 import { COLORS } from 'styles/colors'
 import { useTranslation } from 'next-i18next'
 import { notify } from 'utils/notifications'
@@ -74,7 +73,7 @@ function hexToRgb(hex: string) {
 const TradingViewChart = () => {
   const { t } = useTranslation(['common', 'tv-chart', 'trade'])
   const { theme } = useThemeWrapper()
-  const { width } = useViewport()
+  const { isMobile } = useViewport()
   const [chartReady, setChartReady] = useState(false)
   const [headerReady, setHeaderReady] = useState(false)
   const [orderToModify, setOrderToModify] = useState<Order | PerpOrder | null>(
@@ -96,7 +95,6 @@ const TradingViewChart = () => {
     useState(combinedTradeHistory)
   const [userId] = useLocalStorageState(TV_USER_ID_KEY, '')
   const selectedMarketName = mangoStore((s) => s.selectedMarket.current?.name)
-  const isMobile = width ? width < breakpoints.sm : false
 
   const defaultProps = useMemo(() => {
     const initialMktName = mangoStore.getState().selectedMarket.current?.name

components/wallet/ConnectedMenu.tsx

@@ -12,7 +12,6 @@ import { notify } from '../../utils/notifications'
 import ProfileImage from '../profile/ProfileImage'
 import { abbreviateAddress } from '../../utils/formatting'
 import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from '../../utils/theme'
 import EditProfileModal from '@components/modals/EditProfileModal'
 import MangoAccountsListModal from '@components/modals/MangoAccountsListModal'
 import { TV_USER_ID_KEY } from 'utils/constants'
@@ -25,7 +24,7 @@ const actions = mangoStore.getState().actions
 const ConnectedMenu = () => {
   const { t } = useTranslation('common')
   const { publicKey, disconnect, wallet } = useWallet()
-  const { width } = useViewport()
+  const { isTablet, isDesktop } = useViewport()
   const [tvUserId, setTvUserId] = useLocalStorageState(TV_USER_ID_KEY, '')
   const [showEditProfileModal, setShowEditProfileModal] = useState(false)
   const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
@@ -34,7 +33,6 @@ const ConnectedMenu = () => {
   const loadProfileDetails = mangoStore((s) => s.profile.loadDetails)
   const groupLoaded = mangoStore((s) => s.groupLoaded)
   const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
-  const isMobile = width ? width < breakpoints.md : false
 
   const handleDisconnect = useCallback(() => {
     set((state) => {
@@ -71,7 +69,7 @@ const ConnectedMenu = () => {
         <div className="relative">
           <Popover.Button
             className={`default-transition h-16 ${
-              !isMobile ? 'w-48 border-l border-th-bkg-3 px-4' : 'w-16'
+              isDesktop ? 'w-48 border-l border-th-bkg-3 px-4' : 'w-16'
             } hover:bg-th-bkg-2 focus:outline-none focus-visible:bg-th-bkg-3`}
           >
             <div
@@ -87,7 +85,7 @@ const ConnectedMenu = () => {
               ) : (
                 <Loading className="h-6 w-6" />
               )}
-              {!loadProfileDetails && !isMobile ? (
+              {!loadProfileDetails && isDesktop ? (
                 <div className="ml-2.5 overflow-hidden text-left">
                   <p className="text-xs text-th-fgd-3">
                     {wallet?.adapter.name}
@@ -123,7 +121,7 @@ const ConnectedMenu = () => {
                   {t('profile:edit-profile-pic')}
                 </div>
               </button>
-              {isMobile ? (
+              {isTablet ? (
                 <button
                   className="flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none focus-visible:text-th-active"
                   onClick={() => setShowMangoAccountsModal(true)}

hooks/useViewport.tsx

@@ -6,9 +6,13 @@ export const useViewport = () => {
   const width = mangoStore((s) => s.window.width)
   const height = mangoStore((s) => s.window.height)
 
-  const isMobile = useMemo(() => {
-    return width ? width < breakpoints.sm : false
+  const [isMobile, isTablet, isDesktop] = useMemo(() => {
+    if (!width) return [false, false, false]
+    const mobile = width < breakpoints.sm
+    const tablet = width >= breakpoints.sm && width < breakpoints.md
+    const desktop = width >= breakpoints.md
+    return [mobile, tablet, desktop]
   }, [width])
 
-  return { width, height, isMobile }
+  return { width, height, isMobile, isTablet, isDesktop }
 }