Skip to content

Commit

Permalink
chore(suite): refactor coinmarket navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamhavel
adamhavel committed Dec 11, 2024
1 parent 33b80f3 commit f89f08d
Show file tree
Hide file tree
Showing 14 changed files with 146 additions and 287 deletions.
4 changes: 0 additions & 4 deletions packages/suite/src/components/settings/SettingsLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,28 +30,24 @@ const SettingsHeader = () => {
{
id: 'settings-index',
title: <Translation id="TR_GENERAL" />,
position: 'primary',
'data-testid': '@settings/menu/general',
callback: () => dispatch(goto('settings-index', { preserveParams: true })),
},
{
id: 'settings-device',
title: <Translation id="TR_DEVICE" />,
position: 'primary',
'data-testid': '@settings/menu/device',
callback: () => dispatch(goto('settings-device', { preserveParams: true })),
},
{
id: 'settings-coins',
title: <Translation id="TR_COINS" />,
position: 'primary',
'data-testid': '@settings/menu/wallet',
callback: () => dispatch(goto('settings-coins', { preserveParams: true })),
},
{
id: 'settings-debug',
title: <Translation id="TR_DEBUG_SETTINGS" />,
position: 'primary',
isHidden: !isDebugModeActive,
'data-testid': '@settings/menu/debug',
callback: () => dispatch(goto('settings-debug', { preserveParams: true })),
Expand Down
32 changes: 7 additions & 25 deletions packages/suite/src/components/wallet/WalletLayout/WalletSubpageHeading.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,21 @@
import { ReactNode } from 'react';

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

import { H2 } from '@trezor/components';
import { spacingsPx } from '@trezor/theme';

import type { ExtendedMessageDescriptor } from 'src/types/suite';
import { Translation } from 'src/components/suite';

const HeaderWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: ${spacingsPx.lg};
`;

const HeaderActions = styled.div`
display: flex;
align-items: center;
justify-content: flex-end;
gap: ${spacingsPx.xxs};
flex: 1;
`;
import { TranslationKey } from 'src/components/suite/Translation';

type WalletSubpageHeadingProps = {
title: ExtendedMessageDescriptor['id'];
title: TranslationKey;
children?: ReactNode;
};

export const WalletSubpageHeading = ({ title, children }: WalletSubpageHeadingProps) => (
<HeaderWrapper>
<Row justifyContent="space-between" margin={{ bottom: spacings.lg }}>
<H2>
<Translation id={title} />
</H2>

<HeaderActions>{children}</HeaderActions>
</HeaderWrapper>
<Row gap={spacings.xxs}>{children}</Row>
</Row>
);
89 changes: 43 additions & 46 deletions packages/suite/src/views/wallet/coinmarket/DCA/CoinmarketDCALanding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { variables } from '@trezor/components/src/config';

import { Translation, TrezorLink } from 'src/components/suite';
import { useSelector } from 'src/hooks/suite';
import { CoinmarketLayout } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayout';
import { CoinmarketContainer } from 'src/views/wallet/coinmarket/common/CoinmarketContainer';

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

return (
<CoinmarketLayout>
<Card paddingType="small">
<ColumnsWrapper>
<Column1>
<H2>
<Translation id="TR_COINMARKET_DCA_HEADING" />
</H2>
<Column gap={spacings.xxl} alignItems="start">
<FeatureItem icon="shieldCheck" featureNumber={1} />
<FeatureItem icon="arrowDown" featureNumber={2} />
<FeatureItem icon="lightning" featureNumber={3} />
<FeatureItem icon="eye" featureNumber={4} />
</Column>
</Column1>
<Column2>
<Image image="COINMARKET_INVITY_ICON" width={48} height={48} />
<WrappedText>
<Paragraph typographyStyle="highlight">
<Translation id="TR_COINMARKET_DCA_DOWNLOAD" />
</Paragraph>
</WrappedText>
<Card paddingType="small">
<ColumnsWrapper>
<Column1>
<H2>
<Translation id="TR_COINMARKET_DCA_HEADING" />
</H2>
<Column gap={spacings.xxl} alignItems="start">
<FeatureItem icon="shieldCheck" featureNumber={1} />
<FeatureItem icon="arrowDown" featureNumber={2} />
<FeatureItem icon="lightning" featureNumber={3} />
<FeatureItem icon="eye" featureNumber={4} />
</Column>
</Column1>
<Column2>
<Image image="COINMARKET_INVITY_ICON" width={48} height={48} />
<WrappedText>
<Paragraph typographyStyle="highlight">
<Translation id="TR_COINMARKET_DCA_DOWNLOAD" />
</Paragraph>
</WrappedText>
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
<Image image="COINMARKET_DCA_INVITY_APP_QR" width={170} height={170} />
</TrezorLink>
<Row>
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
<Image image="COINMARKET_DCA_INVITY_APP_QR" width={170} height={170} />
<StoreBadge $isLight={isLightTheme}>
<Image image="PLAY_STORE_TITLE" height={26} />
</StoreBadge>
</TrezorLink>
<Row>
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
<StoreBadge $isLight={isLightTheme}>
<Image image="PLAY_STORE_TITLE" height={26} />
</StoreBadge>
</TrezorLink>
<StoreSeparatorWrapper>
<Divider
orientation="vertical"
strokeWidth={1}
margin={{ left: spacings.sm, right: spacings.sm }}
/>
</StoreSeparatorWrapper>
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
<StoreBadge $isLight={isLightTheme}>
<Image image="APP_STORE_TITLE" height={26} />
</StoreBadge>
</TrezorLink>
</Row>
</Column2>
</ColumnsWrapper>
</Card>
</CoinmarketLayout>
<StoreSeparatorWrapper>
<Divider
orientation="vertical"
strokeWidth={1}
margin={{ left: spacings.sm, right: spacings.sm }}
/>
</StoreSeparatorWrapper>
<TrezorLink href={COINMARKET_DOWNLOAD_INVITY_APP_URL}>
<StoreBadge $isLight={isLightTheme}>
<Image image="APP_STORE_TITLE" height={26} />
</StoreBadge>
</TrezorLink>
</Row>
</Column2>
</ColumnsWrapper>
</Card>
);
};

Expand Down
9 changes: 3 additions & 6 deletions packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,15 @@ import { UseCoinmarketProps } from 'src/types/coinmarket/coinmarket';
import { useCoinmarketBuyForm } from 'src/hooks/wallet/coinmarket/form/useCoinmarketBuyForm';
import { CoinmarketFormContext } from 'src/hooks/wallet/coinmarket/form/useCoinmarketCommonForm';
import { CoinmarketFormLayout } from 'src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormLayout';
import { CoinmarketLayout } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayout';
import { CoinmarketContainer } from 'src/views/wallet/coinmarket/common/CoinmarketContainer';

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

return (
<CoinmarketLayout>
<CoinmarketFormContext.Provider value={coinmarketBuyContextValues}>
<CoinmarketFormLayout />
</CoinmarketFormContext.Provider>
</CoinmarketLayout>
<CoinmarketFormContext.Provider value={coinmarketBuyContextValues}>
<CoinmarketFormLayout />
</CoinmarketFormContext.Provider>
);
};

Expand Down
6 changes: 4 additions & 2 deletions .../src/views/wallet/coinmarket/common/CoinmarketFeaturedOffers/CoinmarketFeaturedOffers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Column } from '@trezor/components';

import { getBestRatedQuote } from 'src/utils/wallet/coinmarket/coinmarketUtils';
import { WalletSubpageHeading } from 'src/components/wallet';
import { useCoinmarketFormContext } from 'src/hooks/wallet/coinmarket/form/useCoinmarketCommonForm';
Expand All @@ -17,7 +19,7 @@ export const CoinmarketFeaturedOffers = () => {
const bestRatedQuote = getBestRatedQuote(quotes, type);

return (
<>
<Column>
<WalletSubpageHeading title="TR_COINMARKET_FEATURED_OFFERS_HEADING" />
{featuredQuotes.map(quote => (
<CoinmarketFeaturedOffersItem
Expand All @@ -27,6 +29,6 @@ export const CoinmarketFeaturedOffers = () => {
isBestRate={bestRatedQuote?.orderId === quote?.orderId}
/>
))}
</>
</Column>
);
};
3 changes: 1 addition & 2 deletions packages/suite/src/views/wallet/coinmarket/common/CoinmarketFooter/CoinmarketFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@ import styled, { css } from 'styled-components';
import { Icon, Link, Image, Row } from '@trezor/components';
import { useOnClickOutside } from '@trezor/react-utils';
import { DATA_TOS_INVITY_URL, INVITY_URL } from '@trezor/urls';
import { borders, spacings, spacingsPx, typography, zIndices } from '@trezor/theme';
import { borders, spacingsPx, typography, zIndices } from '@trezor/theme';

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

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

const WrapperBorder = styled.div`
Expand Down
4 changes: 2 additions & 2 deletions packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const CoinmarketFormLayoutWrapper = styled.form`
`;

export const CoinmarketFormLayout = () => (
<>
<Column gap={spacings.xxxxl}>
<CoinmarketFormLayoutWrapper>
<Card>
<Column gap={spacings.lg}>
Expand All @@ -25,5 +25,5 @@ export const CoinmarketFormLayout = () => (
</Card>
</CoinmarketFormLayoutWrapper>
<CoinmarketFeaturedOffers />
</>
</Column>
);
21 changes: 0 additions & 21 deletions packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayout.tsx
View file

This file was deleted.

Loading

0 comments on commit f89f08d

Please sign in to comment.