Skip to content

Commit 586959a

Browse files
seibei-iguchiseibei-iguchi
committed
chore(suite): refactor coinmarket navigation
1 parent 1c67473 commit 586959a

File tree

14 files changed

+146
-287
lines changed

14 files changed

+146
-287
lines changed

‎packages/suite/src/components/settings/SettingsLayout.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,28 +30,24 @@ const SettingsHeader = () => {
3030
{
3131
id: 'settings-index',
3232
title: <Translation id="TR_GENERAL" />,
33-
position: 'primary',
3433
'data-testid': '@settings/menu/general',
3534
callback: () => dispatch(goto('settings-index', { preserveParams: true })),
3635
},
3736
{
3837
id: 'settings-device',
3938
title: <Translation id="TR_DEVICE" />,
40-
position: 'primary',
4139
'data-testid': '@settings/menu/device',
4240
callback: () => dispatch(goto('settings-device', { preserveParams: true })),
4341
},
4442
{
4543
id: 'settings-coins',
4644
title: <Translation id="TR_COINS" />,
47-
position: 'primary',
4845
'data-testid': '@settings/menu/wallet',
4946
callback: () => dispatch(goto('settings-coins', { preserveParams: true })),
5047
},
5148
{
5249
id: 'settings-debug',
5350
title: <Translation id="TR_DEBUG_SETTINGS" />,
54-
position: 'primary',
5551
isHidden: !isDebugModeActive,
5652
'data-testid': '@settings/menu/debug',
5753
callback: () => dispatch(goto('settings-debug', { preserveParams: true })),

‎packages/suite/src/components/wallet/WalletLayout/WalletSubpageHeading.tsx

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,21 @@
11
import { ReactNode } from 'react';
22

3-
import styled from 'styled-components';
3+
import { H2, Row } from '@trezor/components';
4+
import { spacings } from '@trezor/theme';
45

5-
import { H2 } from '@trezor/components';
6-
import { spacingsPx } from '@trezor/theme';
7-
8-
import type { ExtendedMessageDescriptor } from 'src/types/suite';
96
import { Translation } from 'src/components/suite';
10-
11-
const HeaderWrapper = styled.div`
12-
display: flex;
13-
align-items: center;
14-
justify-content: space-between;
15-
margin-bottom: ${spacingsPx.lg};
16-
`;
17-
18-
const HeaderActions = styled.div`
19-
display: flex;
20-
align-items: center;
21-
justify-content: flex-end;
22-
gap: ${spacingsPx.xxs};
23-
flex: 1;
24-
`;
7+
import { TranslationKey } from 'src/components/suite/Translation';
258

269
type WalletSubpageHeadingProps = {
27-
title: ExtendedMessageDescriptor['id'];
10+
title: TranslationKey;
2811
children?: ReactNode;
2912
};
3013

3114
export const WalletSubpageHeading = ({ title, children }: WalletSubpageHeadingProps) => (
32-
<HeaderWrapper>
15+
<Row justifyContent="space-between" margin={{ bottom: spacings.lg }}>
3316
<H2>
3417
<Translation id={title} />
3518
</H2>
36-
37-
<HeaderActions>{children}</HeaderActions>
38-
</HeaderWrapper>
19+
<Row gap={spacings.xxs}>{children}</Row>
20+
</Row>
3921
);

‎packages/suite/src/views/wallet/coinmarket/DCA/CoinmarketDCALanding.tsx

Lines changed: 43 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { variables } from '@trezor/components/src/config';
2020

2121
import { Translation, TrezorLink } from 'src/components/suite';
2222
import { useSelector } from 'src/hooks/suite';
23-
import { CoinmarketLayout } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayout';
2423
import { CoinmarketContainer } from 'src/views/wallet/coinmarket/common/CoinmarketContainer';
2524

2625
const IconWrapper = styled.div`
@@ -108,53 +107,51 @@ const DCALanding = () => {
108107
const isLightTheme = currentTheme !== 'dark';
109108

110109
return (
111-
<CoinmarketLayout>
112-
<Card paddingType="small">
113-
<ColumnsWrapper>
114-
<Column1>
115-
<H2>
116-
<Translation id="TR_COINMARKET_DCA_HEADING" />
117-
</H2>
118-
<Column gap={spacings.xxl} alignItems="start">
119-
<FeatureItem icon="shieldCheck" featureNumber={1} />
120-
<FeatureItem icon="arrowDown" featureNumber={2} />
121-
<FeatureItem icon="lightning" featureNumber={3} />
122-
<FeatureItem icon="eye" featureNumber={4} />
123-
</Column>
124-
</Column1>
125-
<Column2>
126-
<Image image="COINMARKET_INVITY_ICON" width={48} height={48} />
127-
<WrappedText>
128-
<Paragraph typographyStyle="highlight">
129-
<Translation id="TR_COINMARKET_DCA_DOWNLOAD" />
130-
</Paragraph>
131-
</WrappedText>
110+
<Card paddingType="small">
111+
<ColumnsWrapper>
112+
<Column1>
113+
<H2>
114+
<Translation id="TR_COINMARKET_DCA_HEADING" />
115+
</H2>
116+
<Column gap={spacings.xxl} alignItems="start">
117+
<FeatureItem icon="shieldCheck" featureNumber={1} />
118+
<FeatureItem icon="arrowDown" featureNumber={2} />
119+
<FeatureItem icon="lightning" featureNumber={3} />
120+
<FeatureItem icon="eye" featureNumber={4} />
121+
</Column>
122+
</Column1>
123+
<Column2>
124+
<Image image="COINMARKET_INVITY_ICON" width={48} height={48} />
125+
<WrappedText>
126+
<Paragraph typographyStyle="highlight">
127+
<Translation id="TR_COINMARKET_DCA_DOWNLOAD" />
128+
</Paragraph>
129+
</WrappedText>
130+
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
131+
<Image image="COINMARKET_DCA_INVITY_APP_QR" width={170} height={170} />
132+
</TrezorLink>
133+
<Row>
132134
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
133-
<Image image="COINMARKET_DCA_INVITY_APP_QR" width={170} height={170} />
135+
<StoreBadge $isLight={isLightTheme}>
136+
<Image image="PLAY_STORE_TITLE" height={26} />
137+
</StoreBadge>
134138
</TrezorLink>
135-
<Row>
136-
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
137-
<StoreBadge $isLight={isLightTheme}>
138-
<Image image="PLAY_STORE_TITLE" height={26} />
139-
</StoreBadge>
140-
</TrezorLink>
141-
<StoreSeparatorWrapper>
142-
<Divider
143-
orientation="vertical"
144-
strokeWidth={1}
145-
margin={{ left: spacings.sm, right: spacings.sm }}
146-
/>
147-
</StoreSeparatorWrapper>
148-
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
149-
<StoreBadge $isLight={isLightTheme}>
150-
<Image image="APP_STORE_TITLE" height={26} />
151-
</StoreBadge>
152-
</TrezorLink>
153-
</Row>
154-
</Column2>
155-
</ColumnsWrapper>
156-
</Card>
157-
</CoinmarketLayout>
139+
<StoreSeparatorWrapper>
140+
<Divider
141+
orientation="vertical"
142+
strokeWidth={1}
143+
margin={{ left: spacings.sm, right: spacings.sm }}
144+
/>
145+
</StoreSeparatorWrapper>
146+
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
147+
<StoreBadge $isLight={isLightTheme}>
148+
<Image image="APP_STORE_TITLE" height={26} />
149+
</StoreBadge>
150+
</TrezorLink>
151+
</Row>
152+
</Column2>
153+
</ColumnsWrapper>
154+
</Card>
158155
);
159156
};
160157

‎packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyForm.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,15 @@ import { UseCoinmarketProps } from 'src/types/coinmarket/coinmarket';
22
import { useCoinmarketBuyForm } from 'src/hooks/wallet/coinmarket/form/useCoinmarketBuyForm';
33
import { CoinmarketFormContext } from 'src/hooks/wallet/coinmarket/form/useCoinmarketCommonForm';
44
import { CoinmarketFormLayout } from 'src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormLayout';
5-
import { CoinmarketLayout } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayout';
65
import { CoinmarketContainer } from 'src/views/wallet/coinmarket/common/CoinmarketContainer';
76

87
const CoinmarketBuyComponent = ({ selectedAccount }: UseCoinmarketProps) => {
98
const coinmarketBuyContextValues = useCoinmarketBuyForm({ selectedAccount });
109

1110
return (
12-
<CoinmarketLayout>
13-
<CoinmarketFormContext.Provider value={coinmarketBuyContextValues}>
14-
<CoinmarketFormLayout />
15-
</CoinmarketFormContext.Provider>
16-
</CoinmarketLayout>
11+
<CoinmarketFormContext.Provider value={coinmarketBuyContextValues}>
12+
<CoinmarketFormLayout />
13+
</CoinmarketFormContext.Provider>
1714
);
1815
};
1916

‎packages/suite/src/views/wallet/coinmarket/common/CoinmarketFeaturedOffers/CoinmarketFeaturedOffers.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Column } from '@trezor/components';
2+
13
import { getBestRatedQuote } from 'src/utils/wallet/coinmarket/coinmarketUtils';
24
import { WalletSubpageHeading } from 'src/components/wallet';
35
import { useCoinmarketFormContext } from 'src/hooks/wallet/coinmarket/form/useCoinmarketCommonForm';
@@ -17,7 +19,7 @@ export const CoinmarketFeaturedOffers = () => {
1719
const bestRatedQuote = getBestRatedQuote(quotes, type);
1820

1921
return (
20-
<>
22+
<Column>
2123
<WalletSubpageHeading title="TR_COINMARKET_FEATURED_OFFERS_HEADING" />
2224
{featuredQuotes.map(quote => (
2325
<CoinmarketFeaturedOffersItem
@@ -27,6 +29,6 @@ export const CoinmarketFeaturedOffers = () => {
2729
isBestRate={bestRatedQuote?.orderId === quote?.orderId}
2830
/>
2931
))}
30-
</>
32+
</Column>
3133
);
3234
};

‎packages/suite/src/views/wallet/coinmarket/common/CoinmarketFooter/CoinmarketFooter.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@ import styled, { css } from 'styled-components';
55
import { Icon, Link, Image, Row } from '@trezor/components';
66
import { useOnClickOutside } from '@trezor/react-utils';
77
import { DATA_TOS_INVITY_URL, INVITY_URL } from '@trezor/urls';
8-
import { borders, spacings, spacingsPx, typography, zIndices } from '@trezor/theme';
8+
import { borders, spacingsPx, typography, zIndices } from '@trezor/theme';
99

1010
import { Translation } from 'src/components/suite';
1111
import { CoinmarketFooterLogoWrapper } from 'src/views/wallet/coinmarket';
1212
import { CoinmarketProvidedByInvity } from 'src/views/wallet/coinmarket/common/CoinmarketFooter/CoinmarketProvidedByInvity';
1313

1414
const Wrapper = styled.div`
1515
margin-top: ${spacingsPx.xxxl};
16-
padding: ${spacings.zero} ${spacingsPx.lg};
1716
`;
1817

1918
const WrapperBorder = styled.div`

‎packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormLayout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const CoinmarketFormLayoutWrapper = styled.form`
1313
`;
1414

1515
export const CoinmarketFormLayout = () => (
16-
<>
16+
<Column gap={spacings.xxxxl}>
1717
<CoinmarketFormLayoutWrapper>
1818
<Card>
1919
<Column gap={spacings.lg}>
@@ -25,5 +25,5 @@ export const CoinmarketFormLayout = () => (
2525
</Card>
2626
</CoinmarketFormLayoutWrapper>
2727
<CoinmarketFeaturedOffers />
28-
</>
28+
</Column>
2929
);

‎packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayout.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

0 commit comments

Comments
 (0)