Skip to content

Commit

Permalink
feat(suite-native): enhance layout of the account import summary screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@yanascz
yanascz committed Nov 4, 2024
1 parent e65d214 commit 87a6f5e
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 158 deletions.
5 changes: 5 additions & 0 deletions suite-native/intl/src/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,11 @@ export const en = {
alreadySynced: 'Coin already synced',
},
subtitle: "Here's what you have in your account.",
tokens: 'Tokens:',
button: {
importAnotherAsset: 'Import another asset',
continueToApp: 'Continue to app',
},
},
coinList: {
mainnets: 'Select a coin to sync',
Expand Down
50 changes: 24 additions & 26 deletions ...src/components/AccountAlreadyImported.tsx → ...mponents/AccountAlreadyImportedScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { useNavigation } from '@react-navigation/core';

import { Box, Button, Card, Divider } from '@suite-native/atoms';
import { Button, Card, VStack } from '@suite-native/atoms';
import { AccountsListItem } from '@suite-native/accounts';
import { Account } from '@suite-common/wallet-types';
import { Translation } from '@suite-native/intl';
import {
AccountsImportStackParamList,
AccountsImportStackRoutes,
Expand All @@ -14,7 +15,9 @@ import {
} from '@suite-native/navigation';
import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';

type AccountImportImportedAccountProps = {
import { AccountImportSummaryScreen } from './AccountImportSummaryScreen';

type AccountAlreadyImportedScreenProps = {
account: Account;
};

Expand All @@ -30,7 +33,7 @@ type NavigationProp = StackToTabCompositeProps<
RootStackParamList
>;

export const AccountAlreadyImported = ({ account }: AccountImportImportedAccountProps) => {
export const AccountAlreadyImportedScreen = ({ account }: AccountAlreadyImportedScreenProps) => {
const { applyStyle } = useNativeStyles();
const navigation = useNavigation<NavigationProp>();

Expand All @@ -51,33 +54,28 @@ export const AccountAlreadyImported = ({ account }: AccountImportImportedAccount
});

return (
<Box
flex={1}
justifyContent="flex-end"
<AccountImportSummaryScreen
title={<Translation id="moduleAccountImport.summaryScreen.title.alreadySynced" />}
subtitle={<Translation id="moduleAccountImport.summaryScreen.subtitle" />}
footer={
<VStack spacing="sp16">
<Button
size="large"
colorScheme="tertiaryElevation0"
onPress={handleImportAnotherAsset}
>
<Translation id="moduleAccountImport.summaryScreen.button.importAnotherAsset" />
</Button>
<Button size="large" onPress={handleNavigateToDashboard}>
<Translation id="moduleAccountImport.summaryScreen.button.continueToApp" />
</Button>
</VStack>
}
testID="@account-import/summary/account-already-imported"
>
<Card style={applyStyle(contentWrapperStyle)}>
{account && <AccountsListItem account={account} />}
</Card>
<Box>
<Box marginBottom="sp24" marginTop="sp24">
<Divider />
</Box>
<Box>
<Box marginBottom="sp16">
<Button
size="large"
colorScheme="tertiaryElevation0"
onPress={handleImportAnotherAsset}
>
Import another asset
</Button>
</Box>
<Button size="large" onPress={handleNavigateToDashboard}>
Continue to app
</Button>
</Box>
</Box>
</Box>
</AccountImportSummaryScreen>
);
};
84 changes: 40 additions & 44 deletions ...c/components/AccountImportSummaryForm.tsx → ...onents/AccountImportConfirmFormScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { CommonActions, useNavigation } from '@react-navigation/core';
import { FlashList } from '@shopify/flash-list';

import { Translation } from '@suite-native/intl';
import {
selectFilterKnownTokens,
TokenDefinitionsRootState,
Expand All @@ -17,7 +18,7 @@ import {
import { TokenAddress, TokenSymbol } from '@suite-common/wallet-types';
import { AccountFormValues, useAccountLabelForm } from '@suite-native/accounts';
import { analytics, EventType } from '@suite-native/analytics';
import { Box, Button, Divider, Text } from '@suite-native/atoms';
import { Box, Button, Text } from '@suite-native/atoms';
import { Form } from '@suite-native/forms';
import {
AccountsImportStackParamList,
Expand All @@ -28,14 +29,14 @@ import {
StackToStackCompositeNavigationProps,
} from '@suite-native/navigation';
import { AccountInfo, TokenInfo } from '@trezor/connect';
import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';

import { importAccountThunk } from '../accountsImportThunks';
import { useShowImportError } from '../useShowImportError';
import { AccountImportOverview } from './AccountImportOverview';
import { AccountImportSummaryScreen } from './AccountImportSummaryScreen';
import { TokenInfoCard } from './TokenInfoCard';

type AccountImportSummaryFormProps = {
type AccountImportConfirmFormScreenProps = {
networkSymbol: NetworkSymbol;
accountInfo: AccountInfo;
};
Expand All @@ -46,16 +47,11 @@ type NavigationProp = StackToStackCompositeNavigationProps<
RootStackParamList
>;

const confirmButtonStyle = prepareNativeStyle(utils => ({
marginBottom: utils.spacings.sp8,
}));

export const AccountImportSummaryForm = ({
export const AccountImportConfirmFormScreen = ({
networkSymbol,
accountInfo,
}: AccountImportSummaryFormProps) => {
}: AccountImportConfirmFormScreenProps) => {
const dispatch = useDispatch();
const { applyStyle } = useNativeStyles();
const navigation = useNavigation<NavigationProp>();
const showImportError = useShowImportError(networkSymbol, navigation);

Expand Down Expand Up @@ -132,41 +128,41 @@ export const AccountImportSummaryForm = ({

return (
<Form form={form}>
<FlashList
data={knownTokens}
renderItem={renderItem}
ListEmptyComponent={null}
ListHeaderComponent={
<>
<AccountImportOverview
balance={accountInfo.availableBalance}
networkSymbol={networkSymbol}
/>
{knownTokens.length > 0 && (
<Box marginTop="sp16" marginBottom="sp8">
<Text variant="titleSmall">Tokens: </Text>
</Box>
)}
</>
}
ListFooterComponent={
<>
<Divider marginHorizontal="sp32" marginTop="sp24" />
<Box marginHorizontal="sp16" marginTop="sp24">
<Button
testID="@account-import/coin-synced/confirm-button"
onPress={handleImportAccount}
size="large"
style={applyStyle(confirmButtonStyle)}
isDisabled={!!errors.accountLabel}
>
Confirm
</Button>
</Box>
</>
<AccountImportSummaryScreen
title={<Translation id="moduleAccountImport.summaryScreen.title.confirmToAdd" />}
footer={
<Button
testID="@account-import/coin-synced/confirm-button"
onPress={handleImportAccount}
size="large"
isDisabled={!!errors.accountLabel}
>
<Translation id="generic.buttons.confirm" />
</Button>
}
estimatedItemSize={115}
/>
>
<FlashList
data={knownTokens}
renderItem={renderItem}
ListEmptyComponent={null}
ListHeaderComponent={
<>
<AccountImportOverview
balance={accountInfo.availableBalance}
networkSymbol={networkSymbol}
/>
{knownTokens.length > 0 && (
<Box marginTop="sp16" marginBottom="sp8">
<Text variant="titleSmall">
<Translation id="moduleAccountImport.summaryScreen.tokens" />
</Text>
</Box>
)}
</>
}
estimatedItemSize={115}
/>
</AccountImportSummaryScreen>
</Form>
);
};
80 changes: 0 additions & 80 deletions suite-native/module-accounts-import/src/components/AccountImportSummary.tsx
View file

This file was deleted.

49 changes: 49 additions & 0 deletions suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { ReactNode } from 'react';
import { KeyboardAvoidingView, Platform } from 'react-native';

import { Box, PictogramTitleHeader, VStack } from '@suite-native/atoms';
import { Screen } from '@suite-native/navigation';

import { AccountImportSubHeader } from './AccountImportSubHeader';

type AccountImportSummaryScreenProps = {
children: ReactNode;
title: ReactNode;
subtitle?: ReactNode;
footer: ReactNode;
testID?: string;
};

export const AccountImportSummaryScreen = ({
children,
title,
subtitle,
footer,
testID,
}: AccountImportSummaryScreenProps) => {
return (
<Screen
customHorizontalPadding="sp16"
screenHeader={<AccountImportSubHeader />}
footer={
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<Box margin="sp16">{footer}</Box>
</KeyboardAvoidingView>
}
>
<VStack spacing="sp32" flex={1}>
<Box flex={1} alignItems="center" justifyContent="center">
<PictogramTitleHeader
title={title}
subtitle={subtitle}
variant="green"
icon="coinVerticalCheck"
/>
</Box>
<Box flex={1} justifyContent="flex-end" testID={testID}>
{children}
</Box>
</VStack>
</Screen>
);
};
Loading

0 comments on commit 87a6f5e

Please sign in to comment.