diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts index 12001a15299..847ae16319b 100644 --- a/suite-native/intl/src/en.ts +++ b/suite-native/intl/src/en.ts @@ -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', diff --git a/suite-native/module-accounts-import/src/components/AccountAlreadyImported.tsx b/suite-native/module-accounts-import/src/components/AccountAlreadyImportedScreen.tsx similarity index 61% rename from suite-native/module-accounts-import/src/components/AccountAlreadyImported.tsx rename to suite-native/module-accounts-import/src/components/AccountAlreadyImportedScreen.tsx index 0617280ce1b..25b5e80d8f6 100644 --- a/suite-native/module-accounts-import/src/components/AccountAlreadyImported.tsx +++ b/suite-native/module-accounts-import/src/components/AccountAlreadyImportedScreen.tsx @@ -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, @@ -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; }; @@ -30,7 +33,7 @@ type NavigationProp = StackToTabCompositeProps< RootStackParamList >; -export const AccountAlreadyImported = ({ account }: AccountImportImportedAccountProps) => { +export const AccountAlreadyImportedScreen = ({ account }: AccountAlreadyImportedScreenProps) => { const { applyStyle } = useNativeStyles(); const navigation = useNavigation(); @@ -51,33 +54,28 @@ export const AccountAlreadyImported = ({ account }: AccountImportImportedAccount }); return ( - } + subtitle={} + footer={ + + + + + } testID="@account-import/summary/account-already-imported" > {account && } - - - - - - - - - - - - + ); }; diff --git a/suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx b/suite-native/module-accounts-import/src/components/AccountImportConfirmFormScreen.tsx similarity index 68% rename from suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx rename to suite-native/module-accounts-import/src/components/AccountImportConfirmFormScreen.tsx index 6bf4b668f37..da119edabeb 100644 --- a/suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx +++ b/suite-native/module-accounts-import/src/components/AccountImportConfirmFormScreen.tsx @@ -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, @@ -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, @@ -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; }; @@ -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(); const showImportError = useShowImportError(networkSymbol, navigation); @@ -132,41 +128,41 @@ export const AccountImportSummaryForm = ({ return (
- - - {knownTokens.length > 0 && ( - - Tokens: - - )} - - } - ListFooterComponent={ - <> - - - - - + } + footer={ + } - estimatedItemSize={115} - /> + > + + + {knownTokens.length > 0 && ( + + + + + + )} + + } + estimatedItemSize={115} + /> + ); }; diff --git a/suite-native/module-accounts-import/src/components/AccountImportSummary.tsx b/suite-native/module-accounts-import/src/components/AccountImportSummary.tsx deleted file mode 100644 index f969f8ba259..00000000000 --- a/suite-native/module-accounts-import/src/components/AccountImportSummary.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { useSelector } from 'react-redux'; - -import { Box, ErrorMessage, PictogramTitleHeader, VStack, Text } from '@suite-native/atoms'; -import { - AccountsRootState, - DeviceRootState, - selectDeviceAccountByDescriptorAndNetworkSymbol, -} from '@suite-common/wallet-core'; -import { NetworkSymbol } from '@suite-common/wallet-config'; -import { AccountInfo } from '@trezor/connect'; -import { Translation } from '@suite-native/intl'; -import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags'; -import { selectPortfolioTrackerNetworkSymbols } from '@suite-native/discovery'; - -import { AccountImportSummaryForm } from './AccountImportSummaryForm'; -import { AccountAlreadyImported } from './AccountAlreadyImported'; -type AccountImportDetailProps = { - networkSymbol: NetworkSymbol; - accountInfo: AccountInfo; -}; - -export const AccountImportSummary = ({ networkSymbol, accountInfo }: AccountImportDetailProps) => { - const [isRegtestEnabled] = useFeatureFlag(FeatureFlag.IsRegtestEnabled); - const account = useSelector((state: AccountsRootState & DeviceRootState) => - selectDeviceAccountByDescriptorAndNetworkSymbol( - state, - accountInfo.descriptor, - networkSymbol, - ), - ); - const portfolioTrackerSupportedNetworks = useSelector(selectPortfolioTrackerNetworkSymbols); - - const isAccountImportSupported = - portfolioTrackerSupportedNetworks.some(symbol => symbol === networkSymbol) || - (networkSymbol === 'regtest' && isRegtestEnabled); - - if (!isAccountImportSupported) { - return ( - } - /> - ); - } - - const title = ( - - ); - const subtitle = account ? ( - - ) : undefined; - - return ( - - - {title}} - subtitle={subtitle} - variant="green" - icon="coinVerticalCheck" - /> - - - {account ? ( - - ) : ( - - )} - - - ); -}; diff --git a/suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx b/suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx new file mode 100644 index 00000000000..d913d3d2ba6 --- /dev/null +++ b/suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx @@ -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 ( + } + footer={ + + {footer} + + } + > + + + + + + {children} + + + + ); +}; diff --git a/suite-native/module-accounts-import/src/screens/AccountImportSummaryScreen.tsx b/suite-native/module-accounts-import/src/screens/AccountImportSummaryScreen.tsx index bcc53eaed8e..eb41cc1d7c1 100644 --- a/suite-native/module-accounts-import/src/screens/AccountImportSummaryScreen.tsx +++ b/suite-native/module-accounts-import/src/screens/AccountImportSummaryScreen.tsx @@ -1,13 +1,23 @@ +import { useSelector } from 'react-redux'; + import { - StackToTabCompositeScreenProps, - Screen, + AccountsRootState, + DeviceRootState, + selectDeviceAccountByDescriptorAndNetworkSymbol, +} from '@suite-common/wallet-core'; +import { ErrorMessage } from '@suite-native/atoms'; +import { selectPortfolioTrackerNetworkSymbols } from '@suite-native/discovery'; +import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags'; +import { Translation } from '@suite-native/intl'; +import { + AccountsImportStackParamList, AccountsImportStackRoutes, RootStackParamList, - AccountsImportStackParamList, + StackToTabCompositeScreenProps, } from '@suite-native/navigation'; -import { AccountImportSubHeader } from '../components/AccountImportSubHeader'; -import { AccountImportSummary } from '../components/AccountImportSummary'; +import { AccountAlreadyImportedScreen } from '../components/AccountAlreadyImportedScreen'; +import { AccountImportConfirmFormScreen } from '../components/AccountImportConfirmFormScreen'; export const AccountImportSummaryScreen = ({ route, @@ -18,9 +28,33 @@ export const AccountImportSummaryScreen = ({ >) => { const { accountInfo, networkSymbol } = route.params; + const [isRegtestEnabled] = useFeatureFlag(FeatureFlag.IsRegtestEnabled); + const account = useSelector((state: AccountsRootState & DeviceRootState) => + selectDeviceAccountByDescriptorAndNetworkSymbol( + state, + accountInfo.descriptor, + networkSymbol, + ), + ); + const portfolioTrackerSupportedNetworks = useSelector(selectPortfolioTrackerNetworkSymbols); + + const isAccountImportSupported = + portfolioTrackerSupportedNetworks.some(symbol => symbol === networkSymbol) || + (networkSymbol === 'regtest' && isRegtestEnabled); + + if (!isAccountImportSupported) { + return ( + } + /> + ); + } + + if (account) { + return ; + } + return ( - }> - - + ); };