refactor(suite): replace useMediaQuery with useLayoutSize for responsive design

Author: seibei-iguchi

packages/suite/src/components/settings/SettingsSection.tsx

@@ -1,18 +1,10 @@
 import React, { ReactNode } from 'react';
 
-import {
-    Box,
-    Card,
-    Column,
-    Icon,
-    IconName,
-    InfoItem,
-    Tooltip,
-    useMediaQuery,
-    variables,
-} from '@trezor/components';
+import { Box, Card, Column, Icon, IconName, InfoItem, Tooltip } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
+import { useLayoutSize } from 'src/hooks/suite';
+
 type SettingsSectionProps = {
     title: ReactNode;
     icon?: IconName;
@@ -22,7 +14,7 @@ type SettingsSectionProps = {
 };
 
 export const SettingsSection = ({ title, icon, children, tooltipText }: SettingsSectionProps) => {
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    const { isBelowLaptop } = useLayoutSize();
     const width = isBelowLaptop ? '100%' : 250;
 
     return (

packages/suite/src/components/suite/SecurityCheck/SecurityCheckLayout.tsx

@@ -1,17 +1,9 @@
 import { selectSelectedDevice } from '@suite-common/wallet-core';
-import {
-    Box,
-    Column,
-    DeviceAnimation,
-    Grid,
-    Image,
-    useMediaQuery,
-    variables,
-} from '@trezor/components';
+import { Box, Column, DeviceAnimation, Grid, Image } from '@trezor/components';
 import { DeviceModelInternal } from '@trezor/device-utils';
 import { borders, spacings } from '@trezor/theme';
 
-import { useSelector } from 'src/hooks/suite';
+import { useLayoutSize, useSelector } from 'src/hooks/suite';
 
 type SecurityCheckLayoutProps = {
     isFailed?: boolean;
@@ -25,7 +17,7 @@ export const SecurityCheckLayout = ({
     imageMode,
 }: SecurityCheckLayoutProps) => {
     const device = useSelector(selectSelectedDevice);
-    const isBelowTablet = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.MD})`);
+    const { isBelowTablet } = useLayoutSize();
 
     const deviceModelInternal = device?.features?.internal_model;
     const imageVariant = isFailed ? 'GHOST' : 'LARGE';

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/NotificationDropdown.tsx

@@ -3,11 +3,11 @@ import { useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { notificationsActions } from '@suite-common/toast-notifications';
-import { Box, Menu, Popover, PopoverRef, useMediaQuery, variables } from '@trezor/components';
+import { Box, Menu, Popover, PopoverRef } from '@trezor/components';
 import { EventType, analytics } from '@trezor/suite-analytics';
 
 import { Notifications } from 'src/components/suite/notifications';
-import { useDispatch } from 'src/hooks/suite';
+import { useDispatch, useLayoutSize } from 'src/hooks/suite';
 
 import { NavigationItem, NavigationItemProps } from './NavigationItem';
 
@@ -22,7 +22,7 @@ const StyledNavigationItem = styled(NavigationItem)`
 
 export const NotificationDropdown = (props: NavigationItemProps) => {
     const [isOpen, setIsOpen] = useState(false);
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    const { isBelowLaptop } = useLayoutSize();
     const popoverRef = useRef<PopoverRef>(null);
     const dispatch = useDispatch();
 

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeModal.tsx

@@ -1,11 +1,11 @@
 import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
 import { SelectedAccountLoaded } from '@suite-common/wallet-types';
-import { Grid, Modal, useMediaQuery, variables } from '@trezor/components';
+import { Grid, Modal } from '@trezor/components';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { spacings } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite';
-import { useSelector } from 'src/hooks/suite';
+import { useLayoutSize, useSelector } from 'src/hooks/suite';
 import { StakeEthFormContext, useStakeEthForm } from 'src/hooks/wallet/useStakeEthForm';
 
 import { StakeButton } from './StakeEthForm/StakeButton';
@@ -21,7 +21,7 @@ export const StakeModalLoaded = ({ onCancel, selectedAccount }: StakeModalModalP
     const { account } = selectedAccount;
 
     const stakeEthContextValues = useStakeEthForm({ selectedAccount });
-    const isBelowTablet = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.MD})`);
+    const { isBelowTablet } = useLayoutSize();
 
     const onCancelClick = () => {
         onCancel?.();

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeModal.tsx

@@ -1,19 +1,11 @@
 import { SelectedAccountLoaded } from '@suite-common/wallet-types';
-import {
-    CollapsibleBox,
-    Column,
-    Grid,
-    H3,
-    Modal,
-    useMediaQuery,
-    variables,
-} from '@trezor/components';
+import { CollapsibleBox, Column, Grid, H3, Modal } from '@trezor/components';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { spacings } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite';
 import { UnstakingInfo } from 'src/components/suite/StakingProcess/UnstakingInfo';
-import { useSelector } from 'src/hooks/suite';
+import { useLayoutSize, useSelector } from 'src/hooks/suite';
 import { UnstakeEthFormContext, useUnstakeEthForm } from 'src/hooks/wallet/useUnstakeEthForm';
 
 import { UnstakeButton } from './UnstakeEthForm/UnstakeButton';
@@ -28,7 +20,7 @@ export const UnstakeModalLoaded = ({ onCancel, selectedAccount }: UnstakeModalMo
     const { account } = selectedAccount;
 
     const unstakeEthContextValues = useUnstakeEthForm({ selectedAccount });
-    const isBelowTablet = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.MD})`);
+    const { isBelowTablet } = useLayoutSize();
 
     const onCancelClick = () => {
         onCancel?.();

packages/suite/src/components/suite/section/SectionItem.tsx

@@ -1,16 +1,17 @@
 import { HTMLAttributes, forwardRef } from 'react';
 
-import { Flex, useMediaQuery, variables } from '@trezor/components';
+import { Flex } from '@trezor/components';
 
 import { OutlineHighlight } from 'src/components/OutlineHighlight';
+import { useLayoutSize } from 'src/hooks/suite';
 
 interface SectionItemProps extends HTMLAttributes<HTMLDivElement> {
     shouldHighlight?: boolean;
 }
 
 export const SectionItem = forwardRef<HTMLDivElement, SectionItemProps>(
     ({ children, shouldHighlight, ...rest }, ref) => {
-        const isBelowMobile = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.SM})`);
+        const { isBelowMobile } = useLayoutSize();
 
         return (
             <div ref={ref} {...rest}>

packages/suite/src/views/dashboard/StakeEthCard/StakeEthCard.tsx

@@ -3,25 +3,14 @@ import { useEffect, useMemo, useState } from 'react';
 import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
 import { MIN_ETH_BALANCE_FOR_STAKING } from '@suite-common/wallet-constants';
 import { selectEnabledNetworks, selectPoolStatsApyData } from '@suite-common/wallet-core';
-import {
-    Card,
-    Column,
-    Divider,
-    Grid,
-    H3,
-    IconName,
-    Paragraph,
-    Tooltip,
-    useMediaQuery,
-    variables,
-} from '@trezor/components';
+import { Card, Column, Divider, Grid, H3, IconName, Paragraph, Tooltip } from '@trezor/components';
 import { hasBitcoinOnlyFirmware } from '@trezor/device-utils';
 import { spacings } from '@trezor/theme';
 
 import { setFlag } from 'src/actions/suite/suiteActions';
 import { DashboardSection } from 'src/components/dashboard';
 import { StakingFeature, Translation } from 'src/components/suite';
-import { useDevice, useDiscovery, useDispatch, useSelector } from 'src/hooks/suite';
+import { useDevice, useDiscovery, useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
 import { useAccounts } from 'src/hooks/wallet';
 import { selectSuiteFlags } from 'src/reducers/suite/suiteReducer';
 
@@ -34,7 +23,7 @@ export const StakeEthCard = () => {
     const enabledNetworks = useSelector(selectEnabledNetworks);
     const { showDashboardStakingPromoBanner } = useSelector(selectSuiteFlags);
     const { device } = useDevice();
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    const { isBelowLaptop } = useLayoutSize();
     const isBitcoinOnlyDevice = hasBitcoinOnlyFirmware(device);
 
     const closeBanner = () => {

packages/suite/src/views/wallet/send/Outputs/Amount/Amount.tsx

@@ -10,13 +10,13 @@ import {
     hasNetworkFeatures,
     isLowAnonymityWarning,
 } from '@suite-common/wallet-utils';
-import { Banner, Flex, Icon, Row, Text, useMediaQuery, variables } from '@trezor/components';
+import { Banner, Flex, Icon, Row, Text } from '@trezor/components';
 import { NumberInput } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 
 import { FiatValue, Translation } from 'src/components/suite';
-import { useSelector, useTranslation } from 'src/hooks/suite';
+import { useLayoutSize, useSelector, useTranslation } from 'src/hooks/suite';
 import { useSendFormContext } from 'src/hooks/wallet';
 import { useBitcoinAmountUnit } from 'src/hooks/wallet/useBitcoinAmountUnit';
 import { selectLanguage } from 'src/reducers/suite/suiteReducer';
@@ -51,7 +51,7 @@ export const Amount = ({ output, outputId }: AmountProps) => {
     } = useSendFormContext();
     const { symbol, tokens } = account;
     const { shouldSendInSats } = useBitcoinAmountUnit(symbol);
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    const { isBelowLaptop } = useLayoutSize();
 
     const locale = useSelector(selectLanguage);
 

packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EthStakingDashboard.tsx

@@ -12,12 +12,12 @@ import {
 } from '@suite-common/wallet-core';
 import { SelectedAccountLoaded } from '@suite-common/wallet-types';
 import { getStakingDataForNetwork } from '@suite-common/wallet-utils';
-import { Column, Flex, Grid, useMediaQuery, variables } from '@trezor/components';
+import { Column, Flex, Grid } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { DashboardSection } from 'src/components/dashboard';
 import { Translation } from 'src/components/suite';
-import { useDevice, useDispatch, useSelector } from 'src/hooks/suite';
+import { useDevice, useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
 import { getDaysToAddToPool, getDaysToUnstake } from 'src/utils/suite/ethereumStaking';
 import { ConnectDeviceGenericPromo } from 'src/views/wallet/receive/components/ConnectDevicePromo';
 
@@ -39,7 +39,7 @@ export const EthStakingDashboard = ({ selectedAccount }: EthStakingDashboardProp
     const { device } = useDevice();
 
     const accountKey = account?.key ?? '';
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    const { isBelowLaptop } = useLayoutSize();
     const isDeviceConnected = device?.connected && device?.available;
 
     const { data, isLoading } =

packages/suite/src/views/wallet/staking/components/SolStakingDashboard/SolStakingDashboard.tsx

@@ -7,12 +7,12 @@ import {
 } from '@suite-common/wallet-core';
 import { SelectedAccountLoaded } from '@suite-common/wallet-types';
 import { getStakingDataForNetwork } from '@suite-common/wallet-utils';
-import { Column, Flex, Grid, useMediaQuery, variables } from '@trezor/components';
+import { Column, Flex, Grid } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { DashboardSection } from 'src/components/dashboard';
 import { Translation } from 'src/components/suite';
-import { useDevice, useSelector } from 'src/hooks/suite';
+import { useDevice, useLayoutSize, useSelector } from 'src/hooks/suite';
 import { ConnectDeviceGenericPromo } from 'src/views/wallet/receive/components/ConnectDevicePromo';
 
 import { StakingDashboard } from '../StakingDashboard/StakingDashboard';
@@ -31,7 +31,7 @@ export const SolStakingDashboard = ({ selectedAccount }: SolStakingDashboardProp
     const { account } = selectedAccount;
     const { device } = useDevice();
 
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    const { isBelowLaptop } = useLayoutSize();
     const isDeviceConnected = device?.connected && device?.available;
 
     const { canClaim = false } = getStakingDataForNetwork(account) ?? {};

packages/suite/src/views/wallet/staking/components/StakingDashboard/components/EmptyStakingCard.tsx

@@ -12,21 +12,19 @@ import {
     Paragraph,
     Text,
     Tooltip,
-    useMediaQuery,
-    variables,
 } from '@trezor/components';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { spacings } from '@trezor/theme';
 
 import { openModal } from 'src/actions/suite/modalActions';
 import { DashboardSection } from 'src/components/dashboard';
 import { StakingFeature, Translation } from 'src/components/suite';
-import { useDispatch, useSelector } from 'src/hooks/suite';
+import { useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
 import { useMessageSystemStaking } from 'src/hooks/suite/useMessageSystemStaking';
 import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
 
 export const EmptyStakingCard = () => {
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    const { isBelowLaptop } = useLayoutSize();
     const account = useSelector(selectSelectedAccount);
 
     const { isStakingDisabled, stakingMessageContent } = useMessageSystemStaking(account?.symbol);

packages/suite/src/views/wallet/staking/components/StakingDashboard/components/StakingCard.tsx

@@ -19,16 +19,14 @@ import {
     Paragraph,
     Row,
     Tooltip,
-    useMediaQuery,
-    variables,
 } from '@trezor/components';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { spacings } from '@trezor/theme';
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 
 import { openModal } from 'src/actions/suite/modalActions';
 import { FiatValue, FormattedCryptoAmount, Translation } from 'src/components/suite';
-import { useDispatch, useSelector } from 'src/hooks/suite';
+import { useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
 import { useMessageSystemStaking } from 'src/hooks/suite/useMessageSystemStaking';
 import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
 
@@ -81,7 +79,7 @@ export const StakingCard = ({
     apy,
 }: StakingCardProps) => {
     const selectedAccount = useSelector(selectSelectedAccount);
-    const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
+    const { isBelowLaptop } = useLayoutSize();
 
     const {
         isStakingDisabled,

packages/suite/src/views/wallet/trading/common/TradingTransactions/TradingTransaction/TradingTransactionContainer.tsx

@@ -1,6 +1,8 @@
-import { Card, Column, Row, useMediaQuery, variables } from '@trezor/components';
+import { Card, Column, Row } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
+import { useLayoutSize } from 'src/hooks/suite';
+
 interface TradingTransactionContainerProps {
     TradeDetail: JSX.Element;
     TradeProviders: JSX.Element;
@@ -12,8 +14,7 @@ export const TradingTransactionContainer = ({
     TradeProviders,
     TradeButton,
 }: TradingTransactionContainerProps) => {
-    const isBelowDesktop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.XL})`);
-    const isMobile = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.SM})`);
+    const { isBelowDesktop, isBelowMobile } = useLayoutSize();
 
     return (
         <Card fillType="flat" margin={{ bottom: spacings.lg }}>
@@ -41,8 +42,8 @@ export const TradingTransactionContainer = ({
                     alignItems="flex-end"
                     justifyContent="center"
                     flex="none"
-                    order={isMobile ? 2 : undefined}
-                    width={isMobile ? '100%' : 180}
+                    order={isBelowMobile ? 2 : undefined}
+                    width={isBelowMobile ? '100%' : 180}
                 >
                     {TradeButton}
                 </Column>

packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx

@@ -5,16 +5,7 @@ import {
     getNetworkDisplaySymbolName,
 } from '@suite-common/wallet-config';
 import { hasNetworkFeatures } from '@suite-common/wallet-utils';
-import {
-    Button,
-    Card,
-    Flex,
-    InfoItem,
-    Row,
-    Text,
-    useMediaQuery,
-    variables,
-} from '@trezor/components';
+import { Button, Card, Flex, InfoItem, Row, Text } from '@trezor/components';
 import { hasBitcoinOnlyFirmware } from '@trezor/device-utils';
 import { CoinLogo } from '@trezor/product-components';
 import { EventType, analytics } from '@trezor/suite-analytics';
@@ -23,16 +14,15 @@ import { spacings } from '@trezor/theme';
 import { goto } from 'src/actions/suite/routerActions';
 import { DashboardSection } from 'src/components/dashboard';
 import { PriceTicker, Translation, TrendTicker } from 'src/components/suite';
-import { useDevice, useDispatch } from 'src/hooks/suite';
+import { useDevice, useDispatch, useLayoutSize } from 'src/hooks/suite';
 import { Account } from 'src/types/wallet';
 
 type TradeBoxProps = {
     account: Account;
 };
 
 export const TradeBox = ({ account }: TradeBoxProps) => {
-    const isBelowTablet = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.MD})`);
-    const isBelowMobile = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.SM})`);
+    const { isBelowTablet, isBelowMobile } = useLayoutSize();
     const dispatch = useDispatch();
     const { device } = useDevice();
     const isTestnet = getNetwork(account.symbol).testnet;