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 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 = () => {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 ? (
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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%">
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)}
|
||||||
|
|
|
@ -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 }
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue