diff --git a/src/App/App.tsx b/src/App/App.tsx index ec06267af0..14657cfbe8 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -17,7 +17,7 @@ import useKeyPress from './hooks/useKeyPress'; import FooterNav from '../components/Global/FooterNav/FooterNav'; import { FlexContainer } from '../styled/Common'; -import useMediaQuery from '../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../utils/hooks/useMediaQuery'; import Footer from '../components/Futa/Footer/Footer'; import Navbar from '../components/Futa/Navbar/Navbar'; diff --git a/src/App/components/PageHeader/ExchangeBalanceDropdown/ExchangeBalanceDropdown.tsx b/src/App/components/PageHeader/ExchangeBalanceDropdown/ExchangeBalanceDropdown.tsx index 97ddfc8f1f..165cb8afd0 100644 --- a/src/App/components/PageHeader/ExchangeBalanceDropdown/ExchangeBalanceDropdown.tsx +++ b/src/App/components/PageHeader/ExchangeBalanceDropdown/ExchangeBalanceDropdown.tsx @@ -3,7 +3,7 @@ import coins from '../../../../assets/images/coins.svg'; import Modal from '../../../../components/Global/Modal/Modal'; import ModalHeader from '../../../../components/Global/ModalHeader/ModalHeader'; import ExchangeBalance from '../../../../components/Portfolio/ExchangeBalance/ExchangeBalance'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import useKeyPress from '../../../hooks/useKeyPress'; import NavItem from '../NavItem/NavItem'; import styles from './ExchangeBalanceDropdown.module.css'; diff --git a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx index 6e37bca025..0ebec4fa35 100644 --- a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx +++ b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx @@ -31,7 +31,7 @@ import { linkGenMethodsIF, useLinkGen, } from '../../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import { ItemEnterAnimation } from '../../../../utils/others/FramerMotionAnimations'; import styles from './NetworkSelector.module.css'; interface propsIF { diff --git a/src/App/components/PageHeader/PageHeader.tsx b/src/App/components/PageHeader/PageHeader.tsx index db35ad1076..6c721de4e6 100644 --- a/src/App/components/PageHeader/PageHeader.tsx +++ b/src/App/components/PageHeader/PageHeader.tsx @@ -30,7 +30,7 @@ import { swapParamsIF, useLinkGen, } from '../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import NetworkSelector from './NetworkSelector/NetworkSelector'; import styles from './PageHeader.module.css'; import UserMenu from './UserMenu/UserMenu'; diff --git a/src/App/components/PageHeader/UserMenu/UserMenu.tsx b/src/App/components/PageHeader/UserMenu/UserMenu.tsx index e84a207c85..2e4ccaeb14 100644 --- a/src/App/components/PageHeader/UserMenu/UserMenu.tsx +++ b/src/App/components/PageHeader/UserMenu/UserMenu.tsx @@ -21,7 +21,7 @@ import NotificationCenter from '../../../../components/Global/NotificationCenter import { ChainDataContext } from '../../../../contexts/ChainDataContext'; import { UserDataContext } from '../../../../contexts/UserDataContext'; import { FlexContainer } from '../../../../styled/Common'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import LevelDropdown from './LevelDropdown/LevelDropdown'; import styles from './UserMenu.module.css'; // TODO: use user context instead of UseAccount diff --git a/src/App/components/Sidebar/SidebarAccordion.tsx b/src/App/components/Sidebar/SidebarAccordion.tsx index 5499352561..71110a6f71 100644 --- a/src/App/components/Sidebar/SidebarAccordion.tsx +++ b/src/App/components/Sidebar/SidebarAccordion.tsx @@ -7,7 +7,7 @@ import { AppStateContext } from '../../../contexts/AppStateContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; import { FlexContainer, Text } from '../../../styled/Common'; import { AccordionHeader, ArrowIcon } from '../../../styled/Components/Sidebar'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { sidebarMethodsIF } from '../../hooks/useSidebar'; // interface for React functional component props diff --git a/src/components/Futa/Footer/Footer.tsx b/src/components/Futa/Footer/Footer.tsx index 02a55372e1..378e51a881 100644 --- a/src/components/Futa/Footer/Footer.tsx +++ b/src/components/Futa/Footer/Footer.tsx @@ -7,7 +7,7 @@ import { Link, useLocation } from 'react-router-dom'; import { formSlugForPairParams } from '../../../App/functions/urlSlugs'; import { chainNumToString } from '../../../ambient-utils/dataLayer'; import { TradeDataContext } from '../../../contexts/TradeDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import DesktopFooter from './DesktopFooter'; import styles from './Footer.module.css'; diff --git a/src/components/Futa/Navbar/Navbar.tsx b/src/components/Futa/Navbar/Navbar.tsx index a37e006f3b..84697ff8e7 100644 --- a/src/components/Futa/Navbar/Navbar.tsx +++ b/src/components/Futa/Navbar/Navbar.tsx @@ -32,7 +32,7 @@ import { swapParamsIF, useLinkGen, } from '../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import useOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import Toggle from '../../Form/Toggle'; import NotificationCenter from '../../Global/NotificationCenter/NotificationCenter'; diff --git a/src/components/Futa/SearchableTicker/SearchableTicker.tsx b/src/components/Futa/SearchableTicker/SearchableTicker.tsx index 92031a2286..a24d10f4e0 100644 --- a/src/components/Futa/SearchableTicker/SearchableTicker.tsx +++ b/src/components/Futa/SearchableTicker/SearchableTicker.tsx @@ -13,7 +13,7 @@ import { sortedAuctionsIF, } from '../../../pages/platformFuta/Auctions/useSortedAuctions'; import { FlexContainer } from '../../../styled/Common'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import useOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import AuctionLoader from '../AuctionLoader/AuctionLoader'; import Chart from '../Chart/Chart'; diff --git a/src/components/Futa/TickerComponent/TickerComponent.tsx b/src/components/Futa/TickerComponent/TickerComponent.tsx index b4573cc6a3..81674ad7f7 100644 --- a/src/components/Futa/TickerComponent/TickerComponent.tsx +++ b/src/components/Futa/TickerComponent/TickerComponent.tsx @@ -39,7 +39,7 @@ import { MARKET_CAP_MULTIPLIER_BIG_INT, } from '../../../pages/platformFuta/mockAuctionData'; import { linkGenMethodsIF, useLinkGen } from '../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import BreadCrumb from '../Breadcrumb/Breadcrumb'; import Comments from '../Comments/Comments'; import FutaDivider2 from '../Divider/FutaDivider2'; diff --git a/src/components/Global/Account/AccountTabs/Exchange/ExchangeCard.tsx b/src/components/Global/Account/AccountTabs/Exchange/ExchangeCard.tsx index 9f2d771a28..b5c0ef708a 100644 --- a/src/components/Global/Account/AccountTabs/Exchange/ExchangeCard.tsx +++ b/src/components/Global/Account/AccountTabs/Exchange/ExchangeCard.tsx @@ -17,7 +17,7 @@ import { CrocEnvContext, } from '../../../../../contexts'; import { TokenContext } from '../../../../../contexts/TokenContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import { DefaultTooltip } from '../../../StyledTooltip/StyledTooltip'; import TokenIcon from '../../../TokenIcon/TokenIcon'; import styles from './ExchangeCard.module.css'; diff --git a/src/components/Global/Account/AccountTabs/Wallet/WalletCard.tsx b/src/components/Global/Account/AccountTabs/Wallet/WalletCard.tsx index 31276f5277..0b18795814 100644 --- a/src/components/Global/Account/AccountTabs/Wallet/WalletCard.tsx +++ b/src/components/Global/Account/AccountTabs/Wallet/WalletCard.tsx @@ -17,7 +17,7 @@ import { CrocEnvContext, } from '../../../../../contexts'; import { TokenContext } from '../../../../../contexts/TokenContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import { DefaultTooltip } from '../../../StyledTooltip/StyledTooltip'; import TokenIcon from '../../../TokenIcon/TokenIcon'; import styles from './WalletCard.module.css'; diff --git a/src/components/Global/BottomSheet/BottomSheet.tsx b/src/components/Global/BottomSheet/BottomSheet.tsx index 862ba0178a..f27a657190 100644 --- a/src/components/Global/BottomSheet/BottomSheet.tsx +++ b/src/components/Global/BottomSheet/BottomSheet.tsx @@ -2,7 +2,7 @@ import { motion, PanInfo, useAnimation } from 'framer-motion'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { RiCloseFill } from 'react-icons/ri'; import { useBottomSheet } from '../../../contexts/BottomSheetContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import useOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import styles from './BottomSheet.module.css'; diff --git a/src/components/Global/DetailModals/DetailsHeader/DetailsHeader.tsx b/src/components/Global/DetailModals/DetailsHeader/DetailsHeader.tsx index 7536e52b1e..6a7322ac36 100644 --- a/src/components/Global/DetailModals/DetailsHeader/DetailsHeader.tsx +++ b/src/components/Global/DetailModals/DetailsHeader/DetailsHeader.tsx @@ -5,7 +5,7 @@ import { RiScreenshot2Fill } from 'react-icons/ri'; import { TbListDetails } from 'react-icons/tb'; import logo from '../../../../assets/images/logos/logo_mark.svg'; import logoText from '../../../../assets/images/logos/logo_text.png'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import IconWithTooltip from '../../IconWithTooltip/IconWithTooltip'; import styles from './DetailsHeader.module.css'; interface DetailsHeaderPropsIF { diff --git a/src/components/Global/DetailModals/OrderDetails/OrderDetailsModal/OrderDetailsModal.tsx b/src/components/Global/DetailModals/OrderDetails/OrderDetailsModal/OrderDetailsModal.tsx index 426e216d9e..7ab996b85d 100644 --- a/src/components/Global/DetailModals/OrderDetails/OrderDetailsModal/OrderDetailsModal.tsx +++ b/src/components/Global/DetailModals/OrderDetails/OrderDetailsModal/OrderDetailsModal.tsx @@ -21,7 +21,7 @@ import { CrocEnvContext } from '../../../../../contexts/CrocEnvContext'; import { TokenContext } from '../../../../../contexts/TokenContext'; import { UserDataContext } from '../../../../../contexts/UserDataContext'; import useCopyToClipboard from '../../../../../utils/hooks/useCopyToClipboard'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import { useProcessOrder } from '../../../../../utils/hooks/useProcessOrder'; import Modal from '../../../../Global/Modal/Modal'; import ModalHeader from '../../../ModalHeader/ModalHeader'; diff --git a/src/components/Global/DetailModals/RangeDetails/PriceInfo/PriceInfo.tsx b/src/components/Global/DetailModals/RangeDetails/PriceInfo/PriceInfo.tsx index 61f413c064..cca880f378 100644 --- a/src/components/Global/DetailModals/RangeDetails/PriceInfo/PriceInfo.tsx +++ b/src/components/Global/DetailModals/RangeDetails/PriceInfo/PriceInfo.tsx @@ -9,7 +9,7 @@ import { } from '../../../../../ambient-utils/types'; import { ChainDataContext } from '../../../../../contexts/ChainDataContext'; import { TokenContext } from '../../../../../contexts/TokenContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import Apy from '../../../Tabs/Apy/Apy'; import TokenIcon from '../../../TokenIcon/TokenIcon'; diff --git a/src/components/Global/DetailModals/RangeDetails/RangeDetailsModal/RangeDetailsModal.tsx b/src/components/Global/DetailModals/RangeDetails/RangeDetailsModal/RangeDetailsModal.tsx index 26108e84aa..425dfcf7db 100644 --- a/src/components/Global/DetailModals/RangeDetails/RangeDetailsModal/RangeDetailsModal.tsx +++ b/src/components/Global/DetailModals/RangeDetails/RangeDetailsModal/RangeDetailsModal.tsx @@ -27,7 +27,7 @@ import { TokenContext } from '../../../../../contexts/TokenContext'; import { TradeDataContext } from '../../../../../contexts/TradeDataContext'; import { UserDataContext } from '../../../../../contexts/UserDataContext'; import useCopyToClipboard from '../../../../../utils/hooks/useCopyToClipboard'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import { useProcessRange } from '../../../../../utils/hooks/useProcessRange'; import Modal from '../../../Modal/Modal'; import ModalHeader from '../../../ModalHeader/ModalHeader'; diff --git a/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsModal.tsx b/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsModal.tsx index 77f445d53a..cdcf3bce82 100644 --- a/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsModal.tsx +++ b/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsModal.tsx @@ -18,7 +18,7 @@ import { import { CachedDataContext } from '../../../../contexts/CachedDataContext'; import { CrocEnvContext } from '../../../../contexts/CrocEnvContext'; import { TokenContext } from '../../../../contexts/TokenContext'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import Modal from '../../Modal/Modal'; import ModalHeader from '../../ModalHeader/ModalHeader'; import DetailsHeader from '../DetailsHeader/DetailsHeader'; diff --git a/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsPriceInfo/TransactionDetailsPriceInfo.tsx b/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsPriceInfo/TransactionDetailsPriceInfo.tsx index 491be54b51..614ebde8ca 100644 --- a/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsPriceInfo/TransactionDetailsPriceInfo.tsx +++ b/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsPriceInfo/TransactionDetailsPriceInfo.tsx @@ -10,7 +10,7 @@ import { TokenIF, TransactionIF } from '../../../../../ambient-utils/types'; import { CrocEnvContext } from '../../../../../contexts/CrocEnvContext'; import { TokenContext } from '../../../../../contexts/TokenContext'; import { UserDataContext } from '../../../../../contexts/UserDataContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import { DefaultTooltip } from '../../../StyledTooltip/StyledTooltip'; import Apy from '../../../Tabs/Apy/Apy'; import TokenIcon from '../../../TokenIcon/TokenIcon'; diff --git a/src/components/Global/DropdownMenu2/DropdownMenu2.tsx b/src/components/Global/DropdownMenu2/DropdownMenu2.tsx index 523f995bd2..51fd631aec 100644 --- a/src/components/Global/DropdownMenu2/DropdownMenu2.tsx +++ b/src/components/Global/DropdownMenu2/DropdownMenu2.tsx @@ -4,7 +4,7 @@ import { FaAngleDown } from 'react-icons/fa'; import useKeyPress from '../../../App/hooks/useKeyPress'; import { brand } from '../../../ambient-utils/constants'; import { AppStateContext } from '../../../contexts/AppStateContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import UseOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import { dropdownAnimation } from '../../../utils/others/FramerMotionAnimations'; import Modal from '../Modal/Modal'; diff --git a/src/components/Global/Explore/DexTokens/DexTokens.tsx b/src/components/Global/Explore/DexTokens/DexTokens.tsx index 12af5527ca..1adfff84d2 100644 --- a/src/components/Global/Explore/DexTokens/DexTokens.tsx +++ b/src/components/Global/Explore/DexTokens/DexTokens.tsx @@ -4,7 +4,7 @@ import { SinglePoolDataIF } from '../../../../ambient-utils/types'; import { ChainDataContext } from '../../../../contexts'; import { dexTokenData } from '../../../../pages/platformAmbient/Explore/useTokenStats'; import useIsPWA from '../../../../utils/hooks/useIsPWA'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import TooltipComponent from '../../TooltipComponent/TooltipComponent'; import AssignSort from '../AssignSort'; import ExploreToggle from '../ExploreToggle/ExploreToggle'; diff --git a/src/components/Global/Explore/PoolRow/PoolRow.tsx b/src/components/Global/Explore/PoolRow/PoolRow.tsx index 047aae6308..d4d0eceb37 100644 --- a/src/components/Global/Explore/PoolRow/PoolRow.tsx +++ b/src/components/Global/Explore/PoolRow/PoolRow.tsx @@ -10,7 +10,7 @@ import TokenIcon from '../../TokenIcon/TokenIcon'; import { useMemo } from 'react'; import { GrLineChart } from 'react-icons/gr'; import { FlexContainer } from '../../../../styled/Common'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import styles from './PoolRow.module.css'; interface propsIF { pool: PoolDataIF; diff --git a/src/components/Global/Explore/PoolRow/PoolRowSkeleton.tsx b/src/components/Global/Explore/PoolRow/PoolRowSkeleton.tsx index 94f6ed0001..5ca900b6f5 100644 --- a/src/components/Global/Explore/PoolRow/PoolRowSkeleton.tsx +++ b/src/components/Global/Explore/PoolRow/PoolRowSkeleton.tsx @@ -1,4 +1,4 @@ -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import styles from './PoolRow.module.css'; export default function PoolRowSkeleton() { diff --git a/src/components/Global/Explore/TokenRow/TokenRow.tsx b/src/components/Global/Explore/TokenRow/TokenRow.tsx index fb774ee732..adf2b9cfe1 100644 --- a/src/components/Global/Explore/TokenRow/TokenRow.tsx +++ b/src/components/Global/Explore/TokenRow/TokenRow.tsx @@ -4,7 +4,7 @@ import TokenIcon from '../../TokenIcon/TokenIcon'; import { GrLineChart } from 'react-icons/gr'; import { SinglePoolDataIF, TokenIF } from '../../../../ambient-utils/types'; import { dexTokenData } from '../../../../pages/platformAmbient/Explore/useTokenStats'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import styles from './TokenRow.module.css'; interface propsIF { token: dexTokenData; diff --git a/src/components/Global/Explore/TokenRow/TokenRowSkeleton.tsx b/src/components/Global/Explore/TokenRow/TokenRowSkeleton.tsx index f05f12ac96..e2f8118698 100644 --- a/src/components/Global/Explore/TokenRow/TokenRowSkeleton.tsx +++ b/src/components/Global/Explore/TokenRow/TokenRowSkeleton.tsx @@ -1,4 +1,4 @@ -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import styles from './TokenRow.module.css'; export default function TokenRowSkeleton() { const desktopView = useMediaQuery('(min-width: 768px)'); diff --git a/src/components/Global/Explore/TopPools/TopPools.tsx b/src/components/Global/Explore/TopPools/TopPools.tsx index ad259c9216..02ef87d3e8 100644 --- a/src/components/Global/Explore/TopPools/TopPools.tsx +++ b/src/components/Global/Explore/TopPools/TopPools.tsx @@ -3,7 +3,7 @@ import checkPoolForWETH from '../../../../App/functions/checkPoolForWETH'; import { PoolIF } from '../../../../ambient-utils/types'; import { PoolDataIF } from '../../../../contexts/ExploreContext'; import useIsPWA from '../../../../utils/hooks/useIsPWA'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import TooltipComponent from '../../TooltipComponent/TooltipComponent'; import AssignSort from '../AssignSort'; import ExploreToggle from '../ExploreToggle/ExploreToggle'; diff --git a/src/components/Global/LevelsCard/LevelsCard.tsx b/src/components/Global/LevelsCard/LevelsCard.tsx index 2db621e1aa..159239108a 100644 --- a/src/components/Global/LevelsCard/LevelsCard.tsx +++ b/src/components/Global/LevelsCard/LevelsCard.tsx @@ -7,7 +7,7 @@ import { AppStateContext } from '../../../contexts/AppStateContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; import { FlexContainer, Text } from '../../../styled/Common'; import useCopyToClipboard from '../../../utils/hooks/useCopyToClipboard'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import LevelLine from '../LevelLine/LevelLine'; import styles from './LevelsCard.module.css'; import PointsHistoryDisplay from './PointsHistoryDisplay/PointsHistoryDisplay'; diff --git a/src/components/Global/LevelsCard/PointsHistoryDisplay/PointsHistoryDisplay.tsx b/src/components/Global/LevelsCard/PointsHistoryDisplay/PointsHistoryDisplay.tsx index 6c3601be6f..cfb29d5cdb 100644 --- a/src/components/Global/LevelsCard/PointsHistoryDisplay/PointsHistoryDisplay.tsx +++ b/src/components/Global/LevelsCard/PointsHistoryDisplay/PointsHistoryDisplay.tsx @@ -2,7 +2,7 @@ import { Link } from 'react-router-dom'; import { FlexContainer, Text } from '../../../../styled/Common'; // import{ ViewMoreButton } from '../../../../styled/Components/TransactionTable'; import React from 'react'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import styles from './PointsHistoryDisplay.module.css'; interface PropsIF { diff --git a/src/components/Global/Modal/Modal.tsx b/src/components/Global/Modal/Modal.tsx index 509eb8a6b4..b0455a0eaf 100644 --- a/src/components/Global/Modal/Modal.tsx +++ b/src/components/Global/Modal/Modal.tsx @@ -8,7 +8,7 @@ import { } from '../../../ambient-utils/constants'; import { useBottomSheet } from '../../../contexts/BottomSheetContext'; import { Container } from '../../../styled/Common'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import GlobalModalPortal from '../../GlobalModalPortal'; import styles from './Modal.module.css'; diff --git a/src/components/Global/NotificationCenter/NotificationCenter.tsx b/src/components/Global/NotificationCenter/NotificationCenter.tsx index ce6637f920..519520c0f8 100644 --- a/src/components/Global/NotificationCenter/NotificationCenter.tsx +++ b/src/components/Global/NotificationCenter/NotificationCenter.tsx @@ -9,7 +9,7 @@ import { } from 'react'; import { getReceiptTxHashes } from '../../../ambient-utils/dataLayer'; import { ReceiptContext } from '../../../contexts/ReceiptContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import useOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import ActivityIndicator from './ActivityIndicator/ActivityIndicator'; import NotificationTable from './NotificationTable/NotificationTable'; diff --git a/src/components/Global/NotificationCenter/NotificationTable/NotificationTable.tsx b/src/components/Global/NotificationCenter/NotificationTable/NotificationTable.tsx index b80dbdd210..621ffc1531 100644 --- a/src/components/Global/NotificationCenter/NotificationTable/NotificationTable.tsx +++ b/src/components/Global/NotificationCenter/NotificationTable/NotificationTable.tsx @@ -4,7 +4,7 @@ import ReceiptDisplay from '../ReceiptDisplay/ReceiptDisplay'; import { BrandContext } from '../../../../contexts/BrandContext'; import { ReceiptContext } from '../../../../contexts/ReceiptContext'; import { FlexContainer } from '../../../../styled/Common'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import Modal from '../../Modal/Modal'; import ModalHeader from '../../ModalHeader/ModalHeader'; import styles from './NotificationTable.module.css'; diff --git a/src/components/Global/Sidebar/FavButton.tsx b/src/components/Global/Sidebar/FavButton.tsx index cdecba11ba..421f793532 100644 --- a/src/components/Global/Sidebar/FavButton.tsx +++ b/src/components/Global/Sidebar/FavButton.tsx @@ -1,5 +1,5 @@ import { HeaderButtons } from '../../../styled/Components/Chart'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; interface propsIF { isButtonFavorited: boolean; diff --git a/src/components/Global/Sidebar/PoolsListItem.tsx b/src/components/Global/Sidebar/PoolsListItem.tsx index c48497ef1d..e19c1618eb 100644 --- a/src/components/Global/Sidebar/PoolsListItem.tsx +++ b/src/components/Global/Sidebar/PoolsListItem.tsx @@ -18,7 +18,7 @@ import { pageNames, useLinkGen, } from '../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import TokenIcon from '../TokenIcon/TokenIcon'; import FavButton from './FavButton'; diff --git a/src/components/Global/SnackbarComponent/SnackbarComponent.tsx b/src/components/Global/SnackbarComponent/SnackbarComponent.tsx index a53b64169a..df33681ab9 100644 --- a/src/components/Global/SnackbarComponent/SnackbarComponent.tsx +++ b/src/components/Global/SnackbarComponent/SnackbarComponent.tsx @@ -11,7 +11,7 @@ import { } from 'react'; import { IoMdClose } from 'react-icons/io'; import { AppStateContext } from '../../../contexts/AppStateContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import useOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import styles from './SnackbarComponent.module.css'; diff --git a/src/components/Global/TabComponent/TabComponent.tsx b/src/components/Global/TabComponent/TabComponent.tsx index dd1d3b9af8..9ed104aba3 100644 --- a/src/components/Global/TabComponent/TabComponent.tsx +++ b/src/components/Global/TabComponent/TabComponent.tsx @@ -14,7 +14,7 @@ import { useNavigate } from 'react-router-dom'; import '../../../App/App.css'; import { ChartContext } from '../../../contexts/ChartContext'; import { TradeTableContext } from '../../../contexts/TradeTableContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { DefaultTooltip } from '../StyledTooltip/StyledTooltip'; import styles from './TabComponent.module.css'; diff --git a/src/components/Global/Tabs/TableMenu/TableMenuComponents/OrdersMenu.tsx b/src/components/Global/Tabs/TableMenu/TableMenuComponents/OrdersMenu.tsx index 3f401508b8..94b7c7e4cf 100644 --- a/src/components/Global/Tabs/TableMenu/TableMenuComponents/OrdersMenu.tsx +++ b/src/components/Global/Tabs/TableMenu/TableMenuComponents/OrdersMenu.tsx @@ -16,7 +16,7 @@ import { linkGenMethodsIF, useLinkGen, } from '../../../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import UseOnClickOutside from '../../../../../utils/hooks/useOnClickOutside'; import { Chip } from '../../../../Form/Chip'; import styles from './TableMenus.module.css'; diff --git a/src/components/Global/Tabs/TableMenu/TableMenuComponents/RangesMenu.tsx b/src/components/Global/Tabs/TableMenu/TableMenuComponents/RangesMenu.tsx index e04376cbbc..9e96efa917 100644 --- a/src/components/Global/Tabs/TableMenu/TableMenuComponents/RangesMenu.tsx +++ b/src/components/Global/Tabs/TableMenu/TableMenuComponents/RangesMenu.tsx @@ -6,7 +6,7 @@ import { PositionIF, RangeModalAction, } from '../../../../../ambient-utils/types'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import UseOnClickOutside from '../../../../../utils/hooks/useOnClickOutside'; import styles from './TableMenus.module.css'; diff --git a/src/components/Global/Tabs/TableMenu/TableMenuComponents/TransactionsMenu.tsx b/src/components/Global/Tabs/TableMenu/TableMenuComponents/TransactionsMenu.tsx index 2522d115e9..df1d358ad5 100644 --- a/src/components/Global/Tabs/TableMenu/TableMenuComponents/TransactionsMenu.tsx +++ b/src/components/Global/Tabs/TableMenu/TableMenuComponents/TransactionsMenu.tsx @@ -14,7 +14,7 @@ import { linkGenMethodsIF, useLinkGen, } from '../../../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import UseOnClickOutside from '../../../../../utils/hooks/useOnClickOutside'; import { Chip } from '../../../../Form/Chip'; import styles from './TableMenus.module.css'; diff --git a/src/components/Global/TooltipComponent/TooltipComponent.tsx b/src/components/Global/TooltipComponent/TooltipComponent.tsx index e6598efc2a..5cb487965e 100644 --- a/src/components/Global/TooltipComponent/TooltipComponent.tsx +++ b/src/components/Global/TooltipComponent/TooltipComponent.tsx @@ -1,6 +1,6 @@ import { memo, useRef, useState } from 'react'; import { AiOutlineQuestionCircle } from 'react-icons/ai'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import useOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import { DefaultTooltip, diff --git a/src/components/Global/TutorialComponent/TutorialComponent.tsx b/src/components/Global/TutorialComponent/TutorialComponent.tsx index cfd12c4ec1..5d9f05d248 100644 --- a/src/components/Global/TutorialComponent/TutorialComponent.tsx +++ b/src/components/Global/TutorialComponent/TutorialComponent.tsx @@ -1,6 +1,6 @@ import { memo, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { TutorialStepExternalComponent, TutorialStepIF, diff --git a/src/components/Home/Landing/Hero.tsx b/src/components/Home/Landing/Hero.tsx index 70ec2dec65..cdbabf19fa 100644 --- a/src/components/Home/Landing/Hero.tsx +++ b/src/components/Home/Landing/Hero.tsx @@ -3,7 +3,7 @@ import { heroItem } from '../../../assets/branding/types'; import { BrandContext } from '../../../contexts/BrandContext'; import { FlexContainer, Text } from '../../../styled/Common'; import { HeroContainer } from '../../../styled/Components/Home'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import styles from './BackgroundImages.module.css'; import TradeNowButton from './TradeNowButton/TradeNowButton'; diff --git a/src/components/Home/Landing/Investors.tsx b/src/components/Home/Landing/Investors.tsx index a81e376993..b0f0619a37 100644 --- a/src/components/Home/Landing/Investors.tsx +++ b/src/components/Home/Landing/Investors.tsx @@ -17,7 +17,7 @@ import { InvestorsContent, MobileContainer, } from '../../../styled/Components/Home'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; export default function Investors() { const row1 = ( diff --git a/src/components/Home/Landing/LandingSections.tsx b/src/components/Home/Landing/LandingSections.tsx index 114fdfcef6..332b5c5fc9 100644 --- a/src/components/Home/Landing/LandingSections.tsx +++ b/src/components/Home/Landing/LandingSections.tsx @@ -10,7 +10,7 @@ import { RowContainer, SlideContainer, } from '../../../styled/Components/Home'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import Footer from '../../Footer/Footer'; import Investors from './Investors'; import TradeNowButton from './TradeNowButton/TradeNowButton'; diff --git a/src/components/Home/Stats/AmbientStats.tsx b/src/components/Home/Stats/AmbientStats.tsx index 4f8545dfac..c0917fb070 100644 --- a/src/components/Home/Stats/AmbientStats.tsx +++ b/src/components/Home/Stats/AmbientStats.tsx @@ -8,7 +8,7 @@ import { StatContainer, StatValue, } from '../../../styled/Components/Home'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; interface StatCardProps { title: string; diff --git a/src/components/Home/TopPoolsHome/TopPoolsHome.tsx b/src/components/Home/TopPoolsHome/TopPoolsHome.tsx index a4e09dd0b3..87ef2e4763 100644 --- a/src/components/Home/TopPoolsHome/TopPoolsHome.tsx +++ b/src/components/Home/TopPoolsHome/TopPoolsHome.tsx @@ -9,7 +9,7 @@ import { TopPoolContainer, TopPoolViewMore, } from '../../../styled/Components/Home'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import PoolCard from '../../Global/PoolCard/PoolCard'; interface TopPoolsPropsIF { diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx index 7e3c23e3a9..6eb6dd7ea4 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx @@ -13,7 +13,7 @@ import { NftListByChain, } from '../../../contexts/TokenBalanceContext'; import { UserXpDataIF } from '../../../contexts/UserDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import UserLevelDisplay from '../../Global/LevelsCard/UserLevelDisplay'; import { DefaultTooltip } from '../../Global/StyledTooltip/StyledTooltip'; import AddressPrint from './AddressPrint'; diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx index 28faf87576..91c6c11536 100644 --- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx +++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx @@ -15,7 +15,7 @@ import styles from './PortfolioBannerAccount.module.css'; import { useNavigate } from 'react-router-dom'; import useCopyToClipboard from '../../../../utils/hooks/useCopyToClipboard'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import { getAvatarForProfilePage } from '../../../Chat/ChatRenderUtils'; import useChatApi from '../../../Chat/Service/ChatApi'; diff --git a/src/components/Portfolio/PortfolioTabs/PortfolioTabs.tsx b/src/components/Portfolio/PortfolioTabs/PortfolioTabs.tsx index 6076c6945d..83d3c76ca0 100644 --- a/src/components/Portfolio/PortfolioTabs/PortfolioTabs.tsx +++ b/src/components/Portfolio/PortfolioTabs/PortfolioTabs.tsx @@ -31,7 +31,7 @@ import { BlastUserXpDataIF, UserXpDataIF, } from '../../../contexts/UserDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import Exchange from '../../Global/Account/AccountTabs/Exchange/Exchange'; import Points from '../../Global/Account/AccountTabs/Points/Points'; import Wallet from '../../Global/Account/AccountTabs/Wallet/Wallet'; diff --git a/src/components/Trade/TableInfo/TableInfo.tsx b/src/components/Trade/TableInfo/TableInfo.tsx index 49cf9191d9..91e31f8880 100644 --- a/src/components/Trade/TableInfo/TableInfo.tsx +++ b/src/components/Trade/TableInfo/TableInfo.tsx @@ -8,7 +8,7 @@ import { getFormattedNumber } from '../../../ambient-utils/dataLayer'; import { GraphDataContext } from '../../../contexts/GraphDataContext'; import { PoolContext } from '../../../contexts/PoolContext'; import { TradeDataContext } from '../../../contexts/TradeDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { DetailedBox } from './DetailedBox'; import { FeaturedBox } from './FeaturedBox'; diff --git a/src/components/Trade/TradeModules/TradeModuleHeader.tsx b/src/components/Trade/TradeModules/TradeModuleHeader.tsx index a7ae83175f..63b45e51da 100644 --- a/src/components/Trade/TradeModules/TradeModuleHeader.tsx +++ b/src/components/Trade/TradeModules/TradeModuleHeader.tsx @@ -13,7 +13,7 @@ import { SlippageMethodsIF } from '../../../App/hooks/useSlippage'; import { SettingsSvg } from '../../../assets/images/icons/settingsSvg'; import { AppStateContext } from '../../../contexts'; import { TradeDataContext } from '../../../contexts/TradeDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { useModal } from '../../Global/Modal/useModal'; import TradeLinks from './TradeLinks'; import styles from './TradeModuleHeader.module.css'; diff --git a/src/components/Trade/TradeModules/TradeModuleSkeleton.tsx b/src/components/Trade/TradeModules/TradeModuleSkeleton.tsx index 8090c11fe9..1b17478ee8 100644 --- a/src/components/Trade/TradeModules/TradeModuleSkeleton.tsx +++ b/src/components/Trade/TradeModules/TradeModuleSkeleton.tsx @@ -22,7 +22,7 @@ import { openInNewTab } from '../../../ambient-utils/dataLayer'; import { TradeDataContext } from '../../../contexts/TradeDataContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; import { poolParamsIF } from '../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import TradeLinks from './TradeLinks'; interface PropsIF { diff --git a/src/components/Trade/TradeTabs/Orders/Orders.tsx b/src/components/Trade/TradeTabs/Orders/Orders.tsx index ba315ee545..37506994a5 100644 --- a/src/components/Trade/TradeTabs/Orders/Orders.tsx +++ b/src/components/Trade/TradeTabs/Orders/Orders.tsx @@ -3,7 +3,7 @@ import { memo, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { LimitOrderIF } from '../../../../ambient-utils/types'; import { SidebarContext } from '../../../../contexts/SidebarContext'; import { TradeTableContext } from '../../../../contexts/TradeTableContext'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import NoTableData from '../NoTableData/NoTableData'; import { useSortedLimits } from '../useSortedLimits'; import OrderHeader from './OrderTable/OrderHeader'; diff --git a/src/components/Trade/TradeTabs/Orders/orderRowConstants.tsx b/src/components/Trade/TradeTabs/Orders/orderRowConstants.tsx index 4fc715223f..cbb7737120 100644 --- a/src/components/Trade/TradeTabs/Orders/orderRowConstants.tsx +++ b/src/components/Trade/TradeTabs/Orders/orderRowConstants.tsx @@ -14,7 +14,7 @@ import { linkGenMethodsIF, useLinkGen, } from '../../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import OpenOrderStatus from '../../../Global/OpenOrderStatus/OpenOrderStatus'; import { TextOnlyTooltip } from '../../../Global/StyledTooltip/StyledTooltip'; import TokenIcon from '../../../Global/TokenIcon/TokenIcon'; diff --git a/src/components/Trade/TradeTabs/PositionsOnlyToggle/PositionsOnlyToggle.tsx b/src/components/Trade/TradeTabs/PositionsOnlyToggle/PositionsOnlyToggle.tsx index a11add1698..49387e8c7a 100644 --- a/src/components/Trade/TradeTabs/PositionsOnlyToggle/PositionsOnlyToggle.tsx +++ b/src/components/Trade/TradeTabs/PositionsOnlyToggle/PositionsOnlyToggle.tsx @@ -6,7 +6,7 @@ import { ChartContext } from '../../../../contexts/ChartContext'; import { TradeTableContext } from '../../../../contexts/TradeTableContext'; import { UserDataContext } from '../../../../contexts/UserDataContext'; import { FlexContainer, Text } from '../../../../styled/Common'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import Toggle from '../../../Form/Toggle'; import { DefaultTooltip } from '../../../Global/StyledTooltip/StyledTooltip'; diff --git a/src/components/Trade/TradeTabs/Ranges/Ranges.tsx b/src/components/Trade/TradeTabs/Ranges/Ranges.tsx index 84b58db8f8..ad8001b9c1 100644 --- a/src/components/Trade/TradeTabs/Ranges/Ranges.tsx +++ b/src/components/Trade/TradeTabs/Ranges/Ranges.tsx @@ -34,7 +34,7 @@ import { HideEmptyPositionContainer, RangeRow as RangeRowStyled, } from '../../../../styled/Components/TransactionTable'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import { PageDataCountIF } from '../../../Chat/ChatIFs'; import Toggle from '../../../Form/Toggle'; import Spinner from '../../../Global/Spinner/Spinner'; diff --git a/src/components/Trade/TradeTabs/Ranges/rangeRowConstants.tsx b/src/components/Trade/TradeTabs/Ranges/rangeRowConstants.tsx index fc5e2b2b4e..f6930cf1ca 100644 --- a/src/components/Trade/TradeTabs/Ranges/rangeRowConstants.tsx +++ b/src/components/Trade/TradeTabs/Ranges/rangeRowConstants.tsx @@ -17,7 +17,7 @@ import { poolParamsIF, useLinkGen, } from '../../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import Medal from '../../../Global/Medal/Medal'; import RangeStatus from '../../../Global/RangeStatus/RangeStatus'; import { TextOnlyTooltip } from '../../../Global/StyledTooltip/StyledTooltip'; diff --git a/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.tsx b/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.tsx index 250c7c9802..c5eb6ffdfe 100644 --- a/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.tsx +++ b/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.tsx @@ -17,7 +17,7 @@ import { ScrollToTopButton, ScrollToTopButtonMobile, } from '../../../styled/Components/TransactionTable'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { domDebug } from '../../Chat/DomDebugger/DomDebuggerUtils'; import TableRows from './TableRows'; import styles from './TableRowsInfiniteScroll.module.css'; diff --git a/src/components/Trade/TradeTabs/TradeTabs2.tsx b/src/components/Trade/TradeTabs/TradeTabs2.tsx index f0b41411bd..a37f076902 100644 --- a/src/components/Trade/TradeTabs/TradeTabs2.tsx +++ b/src/components/Trade/TradeTabs/TradeTabs2.tsx @@ -19,7 +19,7 @@ import { TradeDataContext } from '../../../contexts/TradeDataContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; import { FlexContainer } from '../../../styled/Common'; import { ClearButton } from '../../../styled/Components/TransactionTable'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { DefaultTooltip } from '../../Global/StyledTooltip/StyledTooltip'; import TabComponent from '../../Global/TabComponent/TabComponent'; import TableInfo from '../TableInfo/TableInfo'; diff --git a/src/components/Trade/TradeTabs/Transactions/Transactions.tsx b/src/components/Trade/TradeTabs/Transactions/Transactions.tsx index ff0bc38d74..b08e97fa94 100644 --- a/src/components/Trade/TradeTabs/Transactions/Transactions.tsx +++ b/src/components/Trade/TradeTabs/Transactions/Transactions.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-irregular-whitespace */ import { CandleDataIF, TransactionIF } from '../../../../ambient-utils/types'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import { Dispatch, diff --git a/src/components/Trade/TradeTabs/Transactions/txRowConstants.tsx b/src/components/Trade/TradeTabs/Transactions/txRowConstants.tsx index 1173a70e22..96b39b8802 100644 --- a/src/components/Trade/TradeTabs/Transactions/txRowConstants.tsx +++ b/src/components/Trade/TradeTabs/Transactions/txRowConstants.tsx @@ -1,5 +1,5 @@ import { FiCopy, FiExternalLink } from 'react-icons/fi'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import moment from 'moment'; import React, { useContext } from 'react'; diff --git a/src/contexts/SidebarContext.tsx b/src/contexts/SidebarContext.tsx index 5503becff3..6ce23deb15 100644 --- a/src/contexts/SidebarContext.tsx +++ b/src/contexts/SidebarContext.tsx @@ -14,7 +14,7 @@ import { import { sidebarMethodsIF, useSidebar } from '../App/hooks/useSidebar'; import { IS_LOCAL_ENV } from '../ambient-utils/constants'; import { diffHashSig, getChainExplorer } from '../ambient-utils/dataLayer'; -import useMediaQuery from '../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../utils/hooks/useMediaQuery'; import { AppStateContext } from './AppStateContext'; import { ReceiptContext } from './ReceiptContext'; diff --git a/src/pages/Chart/ChartSettings/ChartSettings.tsx b/src/pages/Chart/ChartSettings/ChartSettings.tsx index cb7278b05d..4d4ad0ceea 100644 --- a/src/pages/Chart/ChartSettings/ChartSettings.tsx +++ b/src/pages/Chart/ChartSettings/ChartSettings.tsx @@ -11,7 +11,7 @@ import { } from './ChartSettingsCss'; import { BrandContext } from '../../../contexts/BrandContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { chartItemStates } from '../../platformAmbient/Chart/ChartUtils/chartUtils'; import ChartSettingsContent from './ChartSettingsContent'; import { brand } from '../../../ambient-utils/constants'; diff --git a/src/pages/Chart/ChartTooltip/ChartTooltip.tsx b/src/pages/Chart/ChartTooltip/ChartTooltip.tsx index a016fedc69..853f610df1 100644 --- a/src/pages/Chart/ChartTooltip/ChartTooltip.tsx +++ b/src/pages/Chart/ChartTooltip/ChartTooltip.tsx @@ -3,7 +3,7 @@ import { CandleDataIF, TokenIF } from '../../../ambient-utils/types'; import { BrandContext } from '../../../contexts/BrandContext'; import { ChartContext } from '../../../contexts/ChartContext'; import { TradeDataContext } from '../../../contexts/TradeDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { formatDollarAmountAxis } from '../../../utils/numbers'; import useDollarPrice from '../../platformAmbient/Chart/ChartUtils/getDollarPrice'; import { ChartTooltipDiv, CurrentDataDiv } from './ChartTooltipStyles'; diff --git a/src/pages/common/TestPage/TestPage.tsx b/src/pages/common/TestPage/TestPage.tsx index 98ce963277..2e6bb9c84c 100644 --- a/src/pages/common/TestPage/TestPage.tsx +++ b/src/pages/common/TestPage/TestPage.tsx @@ -1,22 +1,19 @@ -import FutaNewLanding from '../../platformFuta/Home/FutaLandings/NewLandings/FutaNewLanding'; +import { + MediaQueryResultsIF, + useMediaQuery, +} from '../../../utils/hooks/useMediaQuery'; export default function TestPage() { - // const [activeTab, setActiveTab] = useState(0); - - // const tabData = [ - // { label: 'Trade', content:
Content for Trade
}, - // { label: 'Explore', content:
Content for Explore
}, - // { label: 'Account', content:
Content for Account
}, - // { label: 'Chat', content:
Content for Chat
}, - // ]; + const MEDIA_QUERY = '(min-width: 768px)'; + const output1: boolean = useMediaQuery(MEDIA_QUERY); + const output2: MediaQueryResultsIF = useMediaQuery(); + console.log(output1); + console.log(output2); return ( - // - - // - // - - - // +
+

Media Query

+

{MEDIA_QUERY}

+
); } diff --git a/src/pages/platformAmbient/Chart/Chart.tsx b/src/pages/platformAmbient/Chart/Chart.tsx index 8734ed242c..33cb080547 100644 --- a/src/pages/platformAmbient/Chart/Chart.tsx +++ b/src/pages/platformAmbient/Chart/Chart.tsx @@ -51,7 +51,7 @@ import { TradeTableContext } from '../../../contexts/TradeTableContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; import useHandleSwipeBack from '../../../utils/hooks/useHandleSwipeBack'; import { linkGenMethodsIF, useLinkGen } from '../../../utils/hooks/useLinkGen'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import useOnClickOutside from '../../../utils/hooks/useOnClickOutside'; import { updatesIF } from '../../../utils/hooks/useUrlParams'; import { formatDollarAmountAxis } from '../../../utils/numbers'; diff --git a/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx b/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx index 50c525b3ca..ab398deb2b 100644 --- a/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx +++ b/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx @@ -3,7 +3,7 @@ import { MouseEvent, useContext, useEffect, useRef } from 'react'; import { diffHashSigScaleData } from '../../../../../ambient-utils/dataLayer'; import { CandleDataIF } from '../../../../../ambient-utils/types'; import { ChartContext } from '../../../../../contexts/ChartContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import { CandleDataChart, drawDataHistory, diff --git a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx index 1b52c946d6..038b6ec781 100644 --- a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx +++ b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx @@ -15,7 +15,7 @@ import { ChartThemeIF } from '../../../../contexts/ChartContext'; import { PoolContext } from '../../../../contexts/PoolContext'; import { RangeContext } from '../../../../contexts/RangeContext'; import { TradeDataContext } from '../../../../contexts/TradeDataContext'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import { formatAmountWithoutDigit } from '../../../../utils/numbers'; import { LiquidityDataLocal } from '../../Trade/TradeCharts/TradeCharts'; import { diff --git a/src/pages/platformAmbient/Home/Home.tsx b/src/pages/platformAmbient/Home/Home.tsx index 1c58ccac54..71d19052b1 100644 --- a/src/pages/platformAmbient/Home/Home.tsx +++ b/src/pages/platformAmbient/Home/Home.tsx @@ -5,7 +5,7 @@ import MobileLandingSections from '../../../components/Home/Landing/MobileLandin import Stats from '../../../components/Home/Stats/AmbientStats'; import TopPoolsHome from '../../../components/Home/TopPoolsHome/TopPoolsHome'; import { BrandContext } from '../../../contexts/BrandContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; export default function Home() { const showMobileVersion = useMediaQuery('(max-width: 600px)'); diff --git a/src/pages/platformAmbient/Portfolio/Portfolio.tsx b/src/pages/platformAmbient/Portfolio/Portfolio.tsx index b1b1cf91e3..a2ba87b3dc 100644 --- a/src/pages/platformAmbient/Portfolio/Portfolio.tsx +++ b/src/pages/platformAmbient/Portfolio/Portfolio.tsx @@ -33,7 +33,7 @@ import { UserXpDataIF, } from '../../../contexts/UserDataContext'; import { FlexContainer, Text } from '../../../styled/Common'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import Level from '../Level/Level'; import styles from './Portfolio.module.css'; diff --git a/src/pages/platformAmbient/Trade/PointsBanner.tsx b/src/pages/platformAmbient/Trade/PointsBanner.tsx index 9249d74cc7..585e186430 100644 --- a/src/pages/platformAmbient/Trade/PointsBanner.tsx +++ b/src/pages/platformAmbient/Trade/PointsBanner.tsx @@ -6,7 +6,7 @@ import { AppStateContext } from '../../../contexts/AppStateContext'; import { ChainDataContext } from '../../../contexts/ChainDataContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; import { FlexContainer, Text } from '../../../styled/Common'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import styles from './PointsBanner.module.css'; interface propsIF { dismissElem: () => void; diff --git a/src/pages/platformAmbient/Trade/Trade.tsx b/src/pages/platformAmbient/Trade/Trade.tsx index 6ec69086e8..e22b3f5c7c 100644 --- a/src/pages/platformAmbient/Trade/Trade.tsx +++ b/src/pages/platformAmbient/Trade/Trade.tsx @@ -31,7 +31,7 @@ import { MainSection, ResizableContainer, } from '../../../styled/Components/Trade'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { useUrlParams } from '../../../utils/hooks/useUrlParams'; import ChartToolbar from '../Chart/Draw/Toolbar/Toolbar'; import { TradeChartsHeader } from './TradeCharts/TradeChartsHeader/TradeChartsHeader'; diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx index ca746ea824..575fb2b2f1 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx @@ -29,7 +29,7 @@ import { GraphDataContext } from '../../../../contexts/GraphDataContext'; import { PoolContext } from '../../../../contexts/PoolContext'; import { TradeDataContext } from '../../../../contexts/TradeDataContext'; import { TradeTokenContext } from '../../../../contexts/TradeTokenContext'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import { updatesIF } from '../../../../utils/hooks/useUrlParams'; import ChartTooltip from '../../../Chart/ChartTooltip/ChartTooltip'; import { filterCandleWithTransaction } from '../../../Chart/ChartUtils/discontinuityScaleUtils'; diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx index b8e16d9f28..c3bd242a44 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.tsx @@ -28,7 +28,7 @@ import { UserDataContext } from '../../../../contexts/UserDataContext'; import { FlexContainer } from '../../../../styled/Common'; import { MainContainer } from '../../../../styled/Components/Chart'; import { TutorialButton } from '../../../../styled/Components/Tutorial'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import { updatesIF } from '../../../../utils/hooks/useUrlParams'; import { tradeChartTutorialSteps } from '../../../../utils/tutorial/TradeChart'; import { ColorObjIF } from '../../../Chart/ChartSettings/ChartSettings'; diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.tsx index b83228b0ba..b85dd946eb 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.tsx @@ -1,6 +1,6 @@ import { memo } from 'react'; import { overlayIF } from '../../../../../App/hooks/useChartSettings'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import styles from './CurveDepth.module.css'; interface propsIF { diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/OrderHistoryDisplay.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/OrderHistoryDisplay.tsx index 1e24a3d9c4..e2cbef080b 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/OrderHistoryDisplay.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/OrderHistoryDisplay.tsx @@ -1,7 +1,7 @@ import { Dispatch, SetStateAction, memo, useContext } from 'react'; import { LS_KEY_ORDER_HISTORY_SETTINGS } from '../../../../../ambient-utils/constants'; import { BrandContext } from '../../../../../contexts/BrandContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import styles from './VolumeTVLFee.module.css'; interface OrderHistoryDisplayPropsIF { diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/PoolData.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/PoolData.tsx index 9f6cda73af..f6fe5fc62b 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/PoolData.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/PoolData.tsx @@ -5,7 +5,7 @@ import { GraphDataContext } from '../../../../../contexts/GraphDataContext'; import { PoolContext } from '../../../../../contexts/PoolContext'; import { FlexContainer, Text } from '../../../../../styled/Common'; import { textColors } from '../../../../../styled/Common/Types'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; interface PairDataItemIF { label: string; value: string; diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.tsx index 5dcefaa7ad..f92342c4bf 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.tsx @@ -1,7 +1,7 @@ import { memo, useContext, useRef } from 'react'; import { candleTimeIF } from '../../../../../App/hooks/useChartSettings'; import { BrandContext } from '../../../../../contexts/BrandContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import styles from './TimeFrame.module.css'; interface propsIF { diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TradeChartsTokenInfo.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TradeChartsTokenInfo.tsx index 55bc29b255..d728a39973 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TradeChartsTokenInfo.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TradeChartsTokenInfo.tsx @@ -7,7 +7,7 @@ import { import DropdownSearch from '../../../../../components/Global/DropdownSearch/DropdownSearch'; import { PoolContext } from '../../../../../contexts/PoolContext'; import { TradeDataContext } from '../../../../../contexts/TradeDataContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import PoolData from './PoolData'; import styles from './TradeChartsTokenInfo.module.css'; diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx index 3cdf089054..4185144ba9 100644 --- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx +++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsHeader/TradeChartsHeader.tsx @@ -19,7 +19,7 @@ import { HeaderButtons, } from '../../../../../styled/Components/Chart'; import useCopyToClipboard from '../../../../../utils/hooks/useCopyToClipboard'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import TradeChartsTokenInfo from '../TradeChartsComponents/TradeChartsTokenInfo'; // import{ IoSettingsOutline } from 'react-icons/io5'; diff --git a/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.tsx b/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.tsx index b04f8a22f3..3afb880ac0 100644 --- a/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.tsx +++ b/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.tsx @@ -20,7 +20,7 @@ import { } from '../../../../contexts'; import { useBottomSheet } from '../../../../contexts/BottomSheetContext'; import { FlexContainer } from '../../../../styled/Common'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import { formatDollarAmount } from '../../../../utils/numbers'; import VaultDeposit from '../VaultActionModal/VaultDeposit/VaultDeposit'; import VaultWithdraw from '../VaultActionModal/VaultWithdraw/VaultWithdraw'; diff --git a/src/pages/platformFuta/Account/Account.tsx b/src/pages/platformFuta/Account/Account.tsx index 4271610bd2..9656be50ce 100644 --- a/src/pages/platformFuta/Account/Account.tsx +++ b/src/pages/platformFuta/Account/Account.tsx @@ -15,7 +15,7 @@ import { AppStateContext } from '../../../contexts/AppStateContext'; import { AuctionsContext } from '../../../contexts/AuctionsContext'; import { CrocEnvContext } from '../../../contexts/CrocEnvContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import { sortedAuctionsIF, useSortedAuctions, diff --git a/src/pages/platformFuta/Auctions/Auctions.tsx b/src/pages/platformFuta/Auctions/Auctions.tsx index 93316626e4..902664748b 100644 --- a/src/pages/platformFuta/Auctions/Auctions.tsx +++ b/src/pages/platformFuta/Auctions/Auctions.tsx @@ -5,7 +5,7 @@ import TickerComponent from '../../../components/Futa/TickerComponent/TickerComp import { AppStateContext } from '../../../contexts'; import { AuctionsContext } from '../../../contexts/AuctionsContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import HexReveal from '../Home/Animations/HexReveal'; import styles from './Auctions.module.css'; import { sortedAuctionsIF, useSortedAuctions } from './useSortedAuctions'; diff --git a/src/pages/platformFuta/Create/Create.tsx b/src/pages/platformFuta/Create/Create.tsx index 523541f188..a9945827be 100644 --- a/src/pages/platformFuta/Create/Create.tsx +++ b/src/pages/platformFuta/Create/Create.tsx @@ -22,7 +22,7 @@ import { AuctionsContext } from '../../../contexts/AuctionsContext'; import { ChainDataContext } from '../../../contexts/ChainDataContext'; import { CrocEnvContext } from '../../../contexts/CrocEnvContext'; import { UserDataContext } from '../../../contexts/UserDataContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import styles from './Create.module.css'; import CreateInput from './CreateInput'; diff --git a/src/pages/platformFuta/Home/FutaLandings/FutaLandingNav.tsx b/src/pages/platformFuta/Home/FutaLandings/FutaLandingNav.tsx index 2925907717..9bd3115de0 100644 --- a/src/pages/platformFuta/Home/FutaLandings/FutaLandingNav.tsx +++ b/src/pages/platformFuta/Home/FutaLandings/FutaLandingNav.tsx @@ -1,5 +1,5 @@ import { useNavigate } from 'react-router-dom'; -import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery'; import styles from './FutaLandingNav.module.css'; import { BsChevronDown } from 'react-icons/bs'; diff --git a/src/pages/platformFuta/Home/FutaLandings/NewLandings/FutaNewLanding.tsx b/src/pages/platformFuta/Home/FutaLandings/NewLandings/FutaNewLanding.tsx index f00919e022..d7b820d1d4 100644 --- a/src/pages/platformFuta/Home/FutaLandings/NewLandings/FutaNewLanding.tsx +++ b/src/pages/platformFuta/Home/FutaLandings/NewLandings/FutaNewLanding.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useFutaHomeContext } from '../../../../../contexts/Futa/FutaHomeContext'; -import useMediaQuery from '../../../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../../../utils/hooks/useMediaQuery'; import FadingTextGrid from '../../Animations/FadingTextGrid'; import FutaLandingNav from '../FutaLandingNav'; import FutaLanding from './FutaLanding1'; diff --git a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx index 25d75004a1..6a0722f456 100644 --- a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx +++ b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx @@ -2,7 +2,7 @@ import { useContext, useState } from 'react'; import { useSimulatedIsPoolInitialized } from '../../../App/hooks/useSimulatedIsPoolInitialized'; import Comments from '../../../components/Futa/Comments/Comments'; import { ChartContext } from '../../../contexts/ChartContext'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import Swap from '../../platformAmbient/Trade/Swap/Swap'; import Trade from '../../platformAmbient/Trade/Trade'; import styles from './SwapFuta.module.css'; diff --git a/src/pages/platformFuta/Ticker/Ticker.tsx b/src/pages/platformFuta/Ticker/Ticker.tsx index 0fb32d449a..e8234832bd 100644 --- a/src/pages/platformFuta/Ticker/Ticker.tsx +++ b/src/pages/platformFuta/Ticker/Ticker.tsx @@ -1,7 +1,7 @@ // import{ useEffect, useState } from 'react'; import styles from './Ticker.module.css'; -import useMediaQuery from '../../../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../../../utils/hooks/useMediaQuery'; import Auctions from '../Auctions/Auctions'; // import{ useParams } from 'react-router-dom'; diff --git a/src/routes/PlatformFuta.tsx b/src/routes/PlatformFuta.tsx index efff176b0e..5623792e02 100644 --- a/src/routes/PlatformFuta.tsx +++ b/src/routes/PlatformFuta.tsx @@ -17,7 +17,7 @@ import Learn from '../pages/platformFuta/Learn/Learn'; import LimitFuta from '../pages/platformFuta/LimitFuta/LimitFuta'; import SwapFuta from '../pages/platformFuta/SwapFuta/SwapFuta'; import Ticker from '../pages/platformFuta/Ticker/Ticker'; -import useMediaQuery from '../utils/hooks/useMediaQuery'; +import { useMediaQuery } from '../utils/hooks/useMediaQuery'; const PlatformFutaRoutes: React.FC = () => { const { defaultUrlParams } = useContext(CrocEnvContext); diff --git a/src/utils/hooks/useMediaQuery.ts b/src/utils/hooks/useMediaQuery.ts index 428f4d8e28..36ecd24685 100644 --- a/src/utils/hooks/useMediaQuery.ts +++ b/src/utils/hooks/useMediaQuery.ts @@ -3,45 +3,153 @@ import { maxWidth, minWidth } from '../../ambient-utils/types/mediaQueries'; type centralQueries = maxWidth | minWidth; -function useMediaQuery(query: centralQueries | string): boolean { - const getMatches = (query: string): boolean => { - // Prevents SSR issues - if (typeof window !== 'undefined') { - return window.matchMedia(query).matches; - } - return false; - }; +// all atomic screen ranges +type baseMediaQueries = + | 'isWidescreen' + | 'isDesktop' + | 'isLaptop' + | 'isTabletWide' + | 'isTabletNarrow' + | 'isCellphone'; - const [matches, setMatches] = useState(getMatches(query)); +// booleans for all atomic screen range sizes and union sizes +export interface MediaQueryResultsIF extends Record { + // isWidescreen || isDesktop || isLaptop + isComputer: boolean; + // isTabletWide || isTabletNarrow + isTablet: boolean; + // isTabletWide || isTabletNarrow || isCellphone + isMobile: boolean; +} - function handleChange() { - setMatches(getMatches(query)); +// fn signature with no argument (will return all standard query results) +export function useMediaQuery(): MediaQueryResultsIF; +// fn signature with a query string provided (will return that query only) +export function useMediaQuery(query: centralQueries | string): boolean; + +// overload function definition +export function useMediaQuery( + query?: centralQueries | string, +): boolean | MediaQueryResultsIF { + // fn to build a query string from template + function makeQueryString(low: number, high?: number): string { + let output = `(min-width: ${low.toString()}px)`; + if (high) output += `and (max-width: ${high.toString()}px)`; + return output; } - useEffect(() => { - const matchMedia = window.matchMedia(query); + // all atomic media queries (does not have union data) + const defaultQueries: Record = { + isWidescreen: makeQueryString(1921), + isDesktop: makeQueryString(1281, 1920), + isLaptop: makeQueryString(1025, 1280), + isTabletWide: makeQueryString(769, 1024), + isTabletNarrow: makeQueryString(481, 768), + isCellphone: makeQueryString(1, 480), + }; - // Triggered at the first client-side load and if query changes - handleChange(); + // state variable holding data to output from the hook + const [matches, setMatches] = useState(() => + runQueries(query), + ); - // Listen matchMedia - if (matchMedia.addEventListener) { - matchMedia.addEventListener('change', handleChange); + // fn to run media queries depending on data used to instantiate hook + function runQueries(q?: string): boolean | MediaQueryResultsIF { + // fn to run a given media query + function getMatches(query: string): boolean { + // return media query result if `window` obj exists + if (typeof window !== 'undefined') { + return window.matchMedia(query).matches; + } + // return `false` if window obj does not exist + return false; + } + // output variable + let output: boolean | MediaQueryResultsIF; + // if a query string is provided, process that query string only + // if no query string is provided, run all standard queries + if (q) { + output = getMatches(q); } else { - matchMedia.addEventListener('change', handleChange); + // result of all base (atomic) media queries + const rawOutput = ( + Object.keys(defaultQueries) as baseMediaQueries[] + ).reduce(function (acc, key) { + acc[key] = getMatches(defaultQueries[key]); + return acc; + }, {} as MediaQueryResultsIF); + // deconstruct data from basic media inquiries + const { + isWidescreen, + isDesktop, + isLaptop, + isTabletWide, + isTabletNarrow, + isCellphone, + } = rawOutput; + // decorate data from basic inquiries with union values + output = { + // all atomic ranges + ...rawOutput, + // all union ranges + isComputer: isWidescreen || isDesktop || isLaptop, + isTablet: isTabletWide || isTabletNarrow, + isMobile: isTabletWide || isTabletNarrow || isCellphone, + }; } + // return output variable + return output; + } + + // event listener for DOM + const handleChange = (): void => setMatches(runQueries(query)); + + // logic to handle event listener in DOM + useEffect(() => { + if (query) { + const matchMedia = window.matchMedia(query); + handleChange(); - return () => { if (matchMedia.addEventListener) { matchMedia.addEventListener('change', handleChange); } else { - matchMedia.removeEventListener('change', handleChange); + matchMedia.addListener(handleChange); } - }; - // eslint-disable-next-line react-hooks/exhaustive-deps + + return () => { + if (matchMedia.removeEventListener) { + matchMedia.removeEventListener('change', handleChange); + } else { + matchMedia.removeListener(handleChange); + } + }; + } else { + const mediaMatchers = Object.values(defaultQueries).map((query) => + window.matchMedia(query), + ); + + handleChange(); + + mediaMatchers.forEach((matchMedia) => { + if (matchMedia.addEventListener) { + matchMedia.addEventListener('change', handleChange); + } else { + matchMedia.addListener(handleChange); + } + }); + + return () => { + mediaMatchers.forEach((matchMedia) => { + if (matchMedia.removeEventListener) { + matchMedia.removeEventListener('change', handleChange); + } else { + matchMedia.removeListener(handleChange); + } + }); + }; + } }, [query]); + // return data from queries for instantiation of the hook return matches; } - -export default useMediaQuery;