Skip to content

Commit 50bd138

Browse files
committed
refactor(suite): replace useMediaQuery with useLayoutSize for responsive design
1 parent 1aa446a commit 50bd138

File tree

14 files changed

+44
-91
lines changed

14 files changed

+44
-91
lines changed

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
import React, { ReactNode } from 'react';
22

3-
import {
4-
Box,
5-
Card,
6-
Column,
7-
Icon,
8-
IconName,
9-
InfoItem,
10-
Tooltip,
11-
useMediaQuery,
12-
variables,
13-
} from '@trezor/components';
3+
import { Box, Card, Column, Icon, IconName, InfoItem, Tooltip } from '@trezor/components';
144
import { spacings } from '@trezor/theme';
155

6+
import { useLayoutSize } from 'src/hooks/suite';
7+
168
type SettingsSectionProps = {
179
title: ReactNode;
1810
icon?: IconName;
@@ -22,7 +14,7 @@ type SettingsSectionProps = {
2214
};
2315

2416
export const SettingsSection = ({ title, icon, children, tooltipText }: SettingsSectionProps) => {
25-
const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
17+
const { isBelowLaptop } = useLayoutSize();
2618
const width = isBelowLaptop ? '100%' : 250;
2719

2820
return (

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import { selectSelectedDevice } from '@suite-common/wallet-core';
2-
import {
3-
Box,
4-
Column,
5-
DeviceAnimation,
6-
Grid,
7-
Image,
8-
useMediaQuery,
9-
variables,
10-
} from '@trezor/components';
2+
import { Box, Column, DeviceAnimation, Grid, Image } from '@trezor/components';
113
import { DeviceModelInternal } from '@trezor/device-utils';
124
import { borders, spacings } from '@trezor/theme';
135

14-
import { useSelector } from 'src/hooks/suite';
6+
import { useLayoutSize, useSelector } from 'src/hooks/suite';
157

168
type SecurityCheckLayoutProps = {
179
isFailed?: boolean;
@@ -25,7 +17,7 @@ export const SecurityCheckLayout = ({
2517
imageMode,
2618
}: SecurityCheckLayoutProps) => {
2719
const device = useSelector(selectSelectedDevice);
28-
const isBelowTablet = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.MD})`);
20+
const { isBelowTablet } = useLayoutSize();
2921

3022
const deviceModelInternal = device?.features?.internal_model;
3123
const imageVariant = isFailed ? 'GHOST' : 'LARGE';

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { useRef, useState } from 'react';
33
import styled, { css } from 'styled-components';
44

55
import { notificationsActions } from '@suite-common/toast-notifications';
6-
import { Box, Menu, Popover, PopoverRef, useMediaQuery, variables } from '@trezor/components';
6+
import { Box, Menu, Popover, PopoverRef } from '@trezor/components';
77
import { EventType, analytics } from '@trezor/suite-analytics';
88

99
import { Notifications } from 'src/components/suite/notifications';
10-
import { useDispatch } from 'src/hooks/suite';
10+
import { useDispatch, useLayoutSize } from 'src/hooks/suite';
1111

1212
import { NavigationItem, NavigationItemProps } from './NavigationItem';
1313

@@ -22,7 +22,7 @@ const StyledNavigationItem = styled(NavigationItem)`
2222

2323
export const NotificationDropdown = (props: NavigationItemProps) => {
2424
const [isOpen, setIsOpen] = useState(false);
25-
const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
25+
const { isBelowLaptop } = useLayoutSize();
2626
const popoverRef = useRef<PopoverRef>(null);
2727
const dispatch = useDispatch();
2828

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
22
import { SelectedAccountLoaded } from '@suite-common/wallet-types';
3-
import { Grid, Modal, useMediaQuery, variables } from '@trezor/components';
3+
import { Grid, Modal } from '@trezor/components';
44
import { EventType, analytics } from '@trezor/suite-analytics';
55
import { spacings } from '@trezor/theme';
66

77
import { Translation } from 'src/components/suite';
8-
import { useSelector } from 'src/hooks/suite';
8+
import { useLayoutSize, useSelector } from 'src/hooks/suite';
99
import { StakeEthFormContext, useStakeEthForm } from 'src/hooks/wallet/useStakeEthForm';
1010

1111
import { StakeButton } from './StakeEthForm/StakeButton';
@@ -21,7 +21,7 @@ export const StakeModalLoaded = ({ onCancel, selectedAccount }: StakeModalModalP
2121
const { account } = selectedAccount;
2222

2323
const stakeEthContextValues = useStakeEthForm({ selectedAccount });
24-
const isBelowTablet = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.MD})`);
24+
const { isBelowTablet } = useLayoutSize();
2525

2626
const onCancelClick = () => {
2727
onCancel?.();

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
11
import { SelectedAccountLoaded } from '@suite-common/wallet-types';
2-
import {
3-
CollapsibleBox,
4-
Column,
5-
Grid,
6-
H3,
7-
Modal,
8-
useMediaQuery,
9-
variables,
10-
} from '@trezor/components';
2+
import { CollapsibleBox, Column, Grid, H3, Modal } from '@trezor/components';
113
import { EventType, analytics } from '@trezor/suite-analytics';
124
import { spacings } from '@trezor/theme';
135

146
import { Translation } from 'src/components/suite';
157
import { UnstakingInfo } from 'src/components/suite/StakingProcess/UnstakingInfo';
16-
import { useSelector } from 'src/hooks/suite';
8+
import { useLayoutSize, useSelector } from 'src/hooks/suite';
179
import { UnstakeEthFormContext, useUnstakeEthForm } from 'src/hooks/wallet/useUnstakeEthForm';
1810

1911
import { UnstakeButton } from './UnstakeEthForm/UnstakeButton';
@@ -28,7 +20,7 @@ export const UnstakeModalLoaded = ({ onCancel, selectedAccount }: UnstakeModalMo
2820
const { account } = selectedAccount;
2921

3022
const unstakeEthContextValues = useUnstakeEthForm({ selectedAccount });
31-
const isBelowTablet = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.MD})`);
23+
const { isBelowTablet } = useLayoutSize();
3224

3325
const onCancelClick = () => {
3426
onCancel?.();

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import { HTMLAttributes, forwardRef } from 'react';
22

3-
import { Flex, useMediaQuery, variables } from '@trezor/components';
3+
import { Flex } from '@trezor/components';
44

55
import { OutlineHighlight } from 'src/components/OutlineHighlight';
6+
import { useLayoutSize } from 'src/hooks/suite';
67

78
interface SectionItemProps extends HTMLAttributes<HTMLDivElement> {
89
shouldHighlight?: boolean;
910
}
1011

1112
export const SectionItem = forwardRef<HTMLDivElement, SectionItemProps>(
1213
({ children, shouldHighlight, ...rest }, ref) => {
13-
const isBelowMobile = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.SM})`);
14+
const { isBelowMobile } = useLayoutSize();
1415

1516
return (
1617
<div ref={ref} {...rest}>

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

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,14 @@ import { useEffect, useMemo, useState } from 'react';
33
import { getNetworkDisplaySymbol } from '@suite-common/wallet-config';
44
import { MIN_ETH_BALANCE_FOR_STAKING } from '@suite-common/wallet-constants';
55
import { selectEnabledNetworks, selectPoolStatsApyData } from '@suite-common/wallet-core';
6-
import {
7-
Card,
8-
Column,
9-
Divider,
10-
Grid,
11-
H3,
12-
IconName,
13-
Paragraph,
14-
Tooltip,
15-
useMediaQuery,
16-
variables,
17-
} from '@trezor/components';
6+
import { Card, Column, Divider, Grid, H3, IconName, Paragraph, Tooltip } from '@trezor/components';
187
import { hasBitcoinOnlyFirmware } from '@trezor/device-utils';
198
import { spacings } from '@trezor/theme';
209

2110
import { setFlag } from 'src/actions/suite/suiteActions';
2211
import { DashboardSection } from 'src/components/dashboard';
2312
import { StakingFeature, Translation } from 'src/components/suite';
24-
import { useDevice, useDiscovery, useDispatch, useSelector } from 'src/hooks/suite';
13+
import { useDevice, useDiscovery, useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
2514
import { useAccounts } from 'src/hooks/wallet';
2615
import { selectSuiteFlags } from 'src/reducers/suite/suiteReducer';
2716

@@ -34,7 +23,7 @@ export const StakeEthCard = () => {
3423
const enabledNetworks = useSelector(selectEnabledNetworks);
3524
const { showDashboardStakingPromoBanner } = useSelector(selectSuiteFlags);
3625
const { device } = useDevice();
37-
const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
26+
const { isBelowLaptop } = useLayoutSize();
3827
const isBitcoinOnlyDevice = hasBitcoinOnlyFirmware(device);
3928

4029
const closeBanner = () => {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ import {
1010
hasNetworkFeatures,
1111
isLowAnonymityWarning,
1212
} from '@suite-common/wallet-utils';
13-
import { Banner, Flex, Icon, Row, Text, useMediaQuery, variables } from '@trezor/components';
13+
import { Banner, Flex, Icon, Row, Text } from '@trezor/components';
1414
import { NumberInput } from '@trezor/product-components';
1515
import { spacings } from '@trezor/theme';
1616
import { BigNumber } from '@trezor/utils/src/bigNumber';
1717

1818
import { FiatValue, Translation } from 'src/components/suite';
19-
import { useSelector, useTranslation } from 'src/hooks/suite';
19+
import { useLayoutSize, useSelector, useTranslation } from 'src/hooks/suite';
2020
import { useSendFormContext } from 'src/hooks/wallet';
2121
import { useBitcoinAmountUnit } from 'src/hooks/wallet/useBitcoinAmountUnit';
2222
import { selectLanguage } from 'src/reducers/suite/suiteReducer';
@@ -51,7 +51,7 @@ export const Amount = ({ output, outputId }: AmountProps) => {
5151
} = useSendFormContext();
5252
const { symbol, tokens } = account;
5353
const { shouldSendInSats } = useBitcoinAmountUnit(symbol);
54-
const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
54+
const { isBelowLaptop } = useLayoutSize();
5555

5656
const locale = useSelector(selectLanguage);
5757

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ import {
1212
} from '@suite-common/wallet-core';
1313
import { SelectedAccountLoaded } from '@suite-common/wallet-types';
1414
import { getStakingDataForNetwork } from '@suite-common/wallet-utils';
15-
import { Column, Flex, Grid, useMediaQuery, variables } from '@trezor/components';
15+
import { Column, Flex, Grid } from '@trezor/components';
1616
import { spacings } from '@trezor/theme';
1717

1818
import { DashboardSection } from 'src/components/dashboard';
1919
import { Translation } from 'src/components/suite';
20-
import { useDevice, useDispatch, useSelector } from 'src/hooks/suite';
20+
import { useDevice, useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
2121
import { getDaysToAddToPool, getDaysToUnstake } from 'src/utils/suite/ethereumStaking';
2222
import { ConnectDeviceGenericPromo } from 'src/views/wallet/receive/components/ConnectDevicePromo';
2323

@@ -39,7 +39,7 @@ export const EthStakingDashboard = ({ selectedAccount }: EthStakingDashboardProp
3939
const { device } = useDevice();
4040

4141
const accountKey = account?.key ?? '';
42-
const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
42+
const { isBelowLaptop } = useLayoutSize();
4343
const isDeviceConnected = device?.connected && device?.available;
4444

4545
const { data, isLoading } =

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import {
77
} from '@suite-common/wallet-core';
88
import { SelectedAccountLoaded } from '@suite-common/wallet-types';
99
import { getStakingDataForNetwork } from '@suite-common/wallet-utils';
10-
import { Column, Flex, Grid, useMediaQuery, variables } from '@trezor/components';
10+
import { Column, Flex, Grid } from '@trezor/components';
1111
import { spacings } from '@trezor/theme';
1212

1313
import { DashboardSection } from 'src/components/dashboard';
1414
import { Translation } from 'src/components/suite';
15-
import { useDevice, useSelector } from 'src/hooks/suite';
15+
import { useDevice, useLayoutSize, useSelector } from 'src/hooks/suite';
1616
import { ConnectDeviceGenericPromo } from 'src/views/wallet/receive/components/ConnectDevicePromo';
1717

1818
import { StakingDashboard } from '../StakingDashboard/StakingDashboard';
@@ -31,7 +31,7 @@ export const SolStakingDashboard = ({ selectedAccount }: SolStakingDashboardProp
3131
const { account } = selectedAccount;
3232
const { device } = useDevice();
3333

34-
const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
34+
const { isBelowLaptop } = useLayoutSize();
3535
const isDeviceConnected = device?.connected && device?.available;
3636

3737
const { canClaim = false } = getStakingDataForNetwork(account) ?? {};

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,19 @@ import {
1212
Paragraph,
1313
Text,
1414
Tooltip,
15-
useMediaQuery,
16-
variables,
1715
} from '@trezor/components';
1816
import { EventType, analytics } from '@trezor/suite-analytics';
1917
import { spacings } from '@trezor/theme';
2018

2119
import { openModal } from 'src/actions/suite/modalActions';
2220
import { DashboardSection } from 'src/components/dashboard';
2321
import { StakingFeature, Translation } from 'src/components/suite';
24-
import { useDispatch, useSelector } from 'src/hooks/suite';
22+
import { useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
2523
import { useMessageSystemStaking } from 'src/hooks/suite/useMessageSystemStaking';
2624
import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
2725

2826
export const EmptyStakingCard = () => {
29-
const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
27+
const { isBelowLaptop } = useLayoutSize();
3028
const account = useSelector(selectSelectedAccount);
3129

3230
const { isStakingDisabled, stakingMessageContent } = useMessageSystemStaking(account?.symbol);

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,14 @@ import {
1919
Paragraph,
2020
Row,
2121
Tooltip,
22-
useMediaQuery,
23-
variables,
2422
} from '@trezor/components';
2523
import { EventType, analytics } from '@trezor/suite-analytics';
2624
import { spacings } from '@trezor/theme';
2725
import { BigNumber } from '@trezor/utils/src/bigNumber';
2826

2927
import { openModal } from 'src/actions/suite/modalActions';
3028
import { FiatValue, FormattedCryptoAmount, Translation } from 'src/components/suite';
31-
import { useDispatch, useSelector } from 'src/hooks/suite';
29+
import { useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
3230
import { useMessageSystemStaking } from 'src/hooks/suite/useMessageSystemStaking';
3331
import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
3432

@@ -81,7 +79,7 @@ export const StakingCard = ({
8179
apy,
8280
}: StakingCardProps) => {
8381
const selectedAccount = useSelector(selectSelectedAccount);
84-
const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
82+
const { isBelowLaptop } = useLayoutSize();
8583

8684
const {
8785
isStakingDisabled,

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Card, Column, Row, useMediaQuery, variables } from '@trezor/components';
1+
import { Card, Column, Row } from '@trezor/components';
22
import { spacings } from '@trezor/theme';
33

4+
import { useLayoutSize } from 'src/hooks/suite';
5+
46
interface TradingTransactionContainerProps {
57
TradeDetail: JSX.Element;
68
TradeProviders: JSX.Element;
@@ -12,8 +14,7 @@ export const TradingTransactionContainer = ({
1214
TradeProviders,
1315
TradeButton,
1416
}: TradingTransactionContainerProps) => {
15-
const isBelowDesktop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.XL})`);
16-
const isMobile = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.SM})`);
17+
const { isBelowDesktop, isBelowMobile } = useLayoutSize();
1718

1819
return (
1920
<Card fillType="flat" margin={{ bottom: spacings.lg }}>
@@ -41,8 +42,8 @@ export const TradingTransactionContainer = ({
4142
alignItems="flex-end"
4243
justifyContent="center"
4344
flex="none"
44-
order={isMobile ? 2 : undefined}
45-
width={isMobile ? '100%' : 180}
45+
order={isBelowMobile ? 2 : undefined}
46+
width={isBelowMobile ? '100%' : 180}
4647
>
4748
{TradeButton}
4849
</Column>

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

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,7 @@ import {
55
getNetworkDisplaySymbolName,
66
} from '@suite-common/wallet-config';
77
import { hasNetworkFeatures } from '@suite-common/wallet-utils';
8-
import {
9-
Button,
10-
Card,
11-
Flex,
12-
InfoItem,
13-
Row,
14-
Text,
15-
useMediaQuery,
16-
variables,
17-
} from '@trezor/components';
8+
import { Button, Card, Flex, InfoItem, Row, Text } from '@trezor/components';
189
import { hasBitcoinOnlyFirmware } from '@trezor/device-utils';
1910
import { CoinLogo } from '@trezor/product-components';
2011
import { EventType, analytics } from '@trezor/suite-analytics';
@@ -23,16 +14,15 @@ import { spacings } from '@trezor/theme';
2314
import { goto } from 'src/actions/suite/routerActions';
2415
import { DashboardSection } from 'src/components/dashboard';
2516
import { PriceTicker, Translation, TrendTicker } from 'src/components/suite';
26-
import { useDevice, useDispatch } from 'src/hooks/suite';
17+
import { useDevice, useDispatch, useLayoutSize } from 'src/hooks/suite';
2718
import { Account } from 'src/types/wallet';
2819

2920
type TradeBoxProps = {
3021
account: Account;
3122
};
3223

3324
export const TradeBox = ({ account }: TradeBoxProps) => {
34-
const isBelowTablet = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.MD})`);
35-
const isBelowMobile = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.SM})`);
25+
const { isBelowTablet, isBelowMobile } = useLayoutSize();
3626
const dispatch = useDispatch();
3727
const { device } = useDevice();
3828
const isTestnet = getNetwork(account.symbol).testnet;

0 commit comments

Comments
 (0)