refactor isMobile

This commit is contained in:
saml33 2023-09-01 13:22:50 +10:00
parent d5d6c99743
commit 82946353d3
18 changed files with 45 additions and 82 deletions

View File

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

View File

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

View File

@ -4,7 +4,6 @@ import TokenList from '../TokenList'
import UnsettledTrades from '@components/trade/UnsettledTrades' import UnsettledTrades from '@components/trade/UnsettledTrades'
import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances' import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
import { useViewport } from 'hooks/useViewport' import { useViewport } from 'hooks/useViewport'
import { breakpoints } from 'utils/theme'
import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions' import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
import mangoStore from '@store/mangoStore' import mangoStore from '@store/mangoStore'
import PerpPositions from '@components/trade/PerpPositions' import PerpPositions from '@components/trade/PerpPositions'
@ -19,12 +18,11 @@ import SwapOrders from '@components/swap/SwapOrders'
const AccountTabs = () => { const AccountTabs = () => {
const [activeTab, setActiveTab] = useState('balances') const [activeTab, setActiveTab] = useState('balances')
const { mangoAccount } = useMangoAccount() const { mangoAccount } = useMangoAccount()
const { width } = useViewport() const { isMobile, isTablet } = useViewport()
const unsettledSpotBalances = useUnsettledSpotBalances() const unsettledSpotBalances = useUnsettledSpotBalances()
const unsettledPerpPositions = useUnsettledPerpPositions() const unsettledPerpPositions = useUnsettledPerpPositions()
const openPerpPositions = useOpenPerpPositions() const openPerpPositions = useOpenPerpPositions()
const openOrders = mangoStore((s) => s.mangoAccount.openOrders) const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
const isMobile = width ? width < breakpoints.md : false
const { data: isWhiteListed } = useIsWhiteListed() const { data: isWhiteListed } = useIsWhiteListed()
const tabsWithCount: [string, number][] = useMemo(() => { const tabsWithCount: [string, number][] = useMemo(() => {
@ -63,12 +61,12 @@ const AccountTabs = () => {
onChange={(v) => setActiveTab(v)} onChange={(v) => setActiveTab(v)}
values={tabsWithCount} values={tabsWithCount}
showBorders showBorders
fillWidth={isMobile} fillWidth={isMobile || isTablet}
/> />
<ManualRefresh <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" 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} hideBg={isMobile || isTablet}
size={isMobile ? 'large' : 'small'} size={isTablet ? 'large' : 'small'}
/> />
</div> </div>
<TabContent activeTab={activeTab} /> <TabContent activeTab={activeTab} />

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,6 @@ import MedalIcon from '@components/icons/MedalIcon'
import ProfileImage from '@components/profile/ProfileImage' import ProfileImage from '@components/profile/ProfileImage'
import { ArrowLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid' import { ArrowLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
import { useViewport } from 'hooks/useViewport' import { useViewport } from 'hooks/useViewport'
import { breakpoints } from 'utils/theme'
import { import {
Badge, Badge,
RewardsLeaderboardItem, RewardsLeaderboardItem,
@ -126,8 +125,7 @@ const LeaderboardCard = ({
rank: number rank: number
wallet: RewardsLeaderboardItem wallet: RewardsLeaderboardItem
}) => { }) => {
const { width } = useViewport() const { isTablet } = useViewport()
const isMobile = width ? width < breakpoints.md : false
return ( return (
<a <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" 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} {rank < 4 ? <MedalIcon className="absolute" rank={rank} /> : null}
</div> </div>
<ProfileImage <ProfileImage
imageSize={isMobile ? '32' : '40'} imageSize={isTablet ? '32' : '40'}
imageUrl={''} imageUrl={''}
placeholderSize={isMobile ? '20' : '24'} placeholderSize={isTablet ? '20' : '24'}
/> />
<div className="text-left"> <div className="text-left">
<p className="capitalize text-th-fgd-2 md:text-base"> <p className="capitalize text-th-fgd-2 md:text-base">

View File

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

View File

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

View File

@ -5,16 +5,14 @@ import SwapHistoryTable from './SwapHistoryTable'
import useMangoAccount from 'hooks/useMangoAccount' import useMangoAccount from 'hooks/useMangoAccount'
import ManualRefresh from '@components/shared/ManualRefresh' import ManualRefresh from '@components/shared/ManualRefresh'
import { useViewport } from 'hooks/useViewport' import { useViewport } from 'hooks/useViewport'
import { breakpoints } from 'utils/theme'
import SwapOrders from './SwapOrders' import SwapOrders from './SwapOrders'
import { useIsWhiteListed } from 'hooks/useIsWhiteListed' import { useIsWhiteListed } from 'hooks/useIsWhiteListed'
const SwapInfoTabs = () => { const SwapInfoTabs = () => {
const [selectedTab, setSelectedTab] = useState('balances') const [selectedTab, setSelectedTab] = useState('balances')
const { mangoAccount } = useMangoAccount() const { mangoAccount } = useMangoAccount()
const { width } = useViewport() const { isMobile, isTablet } = useViewport()
const { data: isWhiteListed } = useIsWhiteListed() const { data: isWhiteListed } = useIsWhiteListed()
const isMobile = width ? width < breakpoints.md : false
const tabsWithCount: [string, number][] = useMemo(() => { const tabsWithCount: [string, number][] = useMemo(() => {
const tabs: [string, number][] = [ const tabs: [string, number][] = [
@ -43,8 +41,8 @@ const SwapInfoTabs = () => {
</div> </div>
<ManualRefresh <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" 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} hideBg={isMobile || isTablet}
size={isMobile ? 'large' : 'small'} size={isTablet ? 'large' : 'small'}
/> />
</div> </div>
{selectedTab === 'balances' ? <SwapTradeBalances /> : null} {selectedTab === 'balances' ? <SwapTradeBalances /> : null}

View File

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

View File

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

View File

@ -20,7 +20,7 @@ const TradeInfoTabs = () => {
const unsettledSpotBalances = useUnsettledSpotBalances() const unsettledSpotBalances = useUnsettledSpotBalances()
const unsettledPerpPositions = useUnsettledPerpPositions() const unsettledPerpPositions = useUnsettledPerpPositions()
const openPerpPositions = useOpenPerpPositions() const openPerpPositions = useOpenPerpPositions()
const { isMobile, width } = useViewport() const { isMobile, isTablet, width } = useViewport()
const fillTabWidth = width ? width < breakpoints['2xl'] : false const fillTabWidth = width ? width < breakpoints['2xl'] : false
useEffect(() => { useEffect(() => {
@ -61,8 +61,8 @@ const TradeInfoTabs = () => {
</div> </div>
<ManualRefresh <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" 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} hideBg={isMobile || isTablet}
size={isMobile ? 'large' : 'small'} size={isTablet ? 'large' : 'small'}
/> />
</div> </div>
<TabContent selectedTab={selectedTab} /> <TabContent selectedTab={selectedTab} />

View File

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

View File

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

View File

@ -6,9 +6,13 @@ export const useViewport = () => {
const width = mangoStore((s) => s.window.width) const width = mangoStore((s) => s.window.width)
const height = mangoStore((s) => s.window.height) const height = mangoStore((s) => s.window.height)
const isMobile = useMemo(() => { const [isMobile, isTablet, isDesktop] = useMemo(() => {
return width ? width < breakpoints.sm : false 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]) }, [width])
return { width, height, isMobile } return { width, height, isMobile, isTablet, isDesktop }
} }