refactor isMobile
This commit is contained in:
parent
d5d6c99743
commit
82946353d3
|
@ -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 = () => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 ? (
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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%">
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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 }
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue