-
-
Notifications
You must be signed in to change notification settings - Fork 275
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(suite-native): Mobile Trade: Account and address picker stub
- Loading branch information
Showing
16 changed files
with
712 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
suite-native/module-trading/src/components/buy/ReceiveAccountPicker.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { Text, VStack } from '@suite-native/atoms'; | ||
| import { Translation, useTranslate } from '@suite-native/intl'; | ||
|
|
||
| import { useTradeSheetControls } from '../../hooks/useTradeSheetControls'; | ||
| import { ReceiveAccount, TradeableAsset } from '../../types'; | ||
| import { AccountSheet } from '../general/AccountSheet/AccountSheet'; | ||
| import { TradingOverviewRow } from '../general/TradingOverviewRow'; | ||
|
|
||
| type ReceiveAccountPickerProps = { | ||
| selectedAsset?: TradeableAsset; | ||
| }; | ||
| type ReceiveAccountPickerSelectedAccountProps = { | ||
| selectedAccount?: ReceiveAccount; | ||
| }; | ||
|
|
||
| const ReceiveAccountPickerRight = ({ | ||
| selectedAccount, | ||
| }: ReceiveAccountPickerSelectedAccountProps) => { | ||
| if (!selectedAccount) { | ||
| return ( | ||
| <Text color="textDisabled" variant="body"> | ||
| <Translation id="moduleTrading.notSelected" /> | ||
| </Text> | ||
| ); | ||
| } | ||
|
|
||
| const { account, address } = selectedAccount; | ||
|
|
||
| if (!address) { | ||
| return ( | ||
| <VStack spacing={0} paddingLeft="sp20"> | ||
| <Text color="textSubdued" variant="body" textAlign="right"> | ||
| {account.accountLabel} | ||
| </Text> | ||
| </VStack> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <VStack spacing={0} paddingLeft="sp20"> | ||
| <Text color="textSubdued" variant="body" textAlign="right"> | ||
| {account.accountLabel} | ||
| </Text> | ||
| <Text color="textSubdued" variant="hint" ellipsizeMode="tail" numberOfLines={1}> | ||
| {address.address} | ||
| </Text> | ||
| </VStack> | ||
| ); | ||
| }; | ||
|
|
||
| export const ReceiveAccountPicker = ({ selectedAsset }: ReceiveAccountPickerProps) => { | ||
| const { translate } = useTranslate(); | ||
|
|
||
| const { isSheetVisible, hideSheet, showSheet, setSelectedValue, selectedValue } = | ||
| useTradeSheetControls<ReceiveAccount>(); | ||
|
|
||
| return ( | ||
| <> | ||
| <TradingOverviewRow | ||
| title={translate('moduleTrading.tradingScreen.receiveAccount')} | ||
| onPress={showSheet} | ||
| noBottomBorder | ||
| > | ||
| <ReceiveAccountPickerRight selectedAccount={selectedValue} /> | ||
| </TradingOverviewRow> | ||
| <AccountSheet | ||
| asset={selectedAsset ?? { symbol: 'btc' }} | ||
| onAccountSelect={setSelectedValue} | ||
| isVisible={isSheetVisible} | ||
| onClose={hideSheet} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
103 changes: 103 additions & 0 deletions
103
suite-native/module-trading/src/components/general/AccountSheet/AccountListItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { Pressable } from 'react-native'; | ||
|
|
||
| import { useFormatters } from '@suite-common/formatters'; | ||
| import { Box, HStack, RoundedIcon, Text, VStack } from '@suite-native/atoms'; | ||
| import { Icon } from '@suite-native/icons'; | ||
| import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; | ||
|
|
||
| import { ReceiveAccount, TradeableAsset } from '../../../types'; | ||
|
|
||
| export type AccountListItemProps = { | ||
| asset: TradeableAsset; | ||
| receiveAccount: ReceiveAccount; | ||
| onPress: () => void; | ||
| }; | ||
|
|
||
| export const ACCOUNT_LIST_ITEM_HEIGHT = 68 as const; | ||
|
|
||
| const labelTextStyle = prepareNativeStyle(({ colors }) => ({ | ||
| color: colors.textDefault, | ||
| flex: 1, | ||
| })); | ||
|
|
||
| const cryptoAmountTextStyle = prepareNativeStyle(({ colors }) => ({ | ||
| color: colors.textDefault, | ||
| textAlign: 'right', | ||
| flex: 0, | ||
| })); | ||
|
|
||
| const networkStyle = prepareNativeStyle(({ colors }) => ({ | ||
| color: colors.textSubdued, | ||
| flex: 1, | ||
| })); | ||
|
|
||
| const fiatStyle = prepareNativeStyle(({ colors }) => ({ | ||
| color: colors.textSubdued, | ||
| textAlign: 'right', | ||
| flex: 0, | ||
| })); | ||
|
|
||
| export const AccountListItem = ({ | ||
| asset: { symbol }, | ||
| receiveAccount: { account, address }, | ||
| onPress, | ||
| }: AccountListItemProps) => { | ||
| const { applyStyle } = useNativeStyles(); | ||
| const { DisplaySymbolFormatter, FiatAmountFormatter, CryptoAmountFormatter } = useFormatters(); | ||
|
|
||
| // TODO probably should be part of props | ||
| const fiatValue = 987654; | ||
|
|
||
| const isAddressDetail = !!address; | ||
| const shouldDisplayCaret = !isAddressDetail && !!account.addresses; | ||
| const shouldDisplayBalance = !isAddressDetail || address?.balance != null; | ||
|
|
||
| return ( | ||
| <Pressable | ||
| onPress={onPress} | ||
| accessibilityRole="radio" | ||
| accessibilityLabel={account.accountLabel} | ||
| > | ||
| <HStack alignItems="center" spacing="sp12" paddingVertical="sp12"> | ||
| <Box justifyContent="center"> | ||
| <RoundedIcon symbol={symbol} /> | ||
| </Box> | ||
| <VStack flex={1} spacing={0}> | ||
| <HStack alignItems="center" justifyContent="space-between"> | ||
| <Text | ||
| variant="body" | ||
| numberOfLines={1} | ||
| ellipsizeMode="tail" | ||
| style={applyStyle(labelTextStyle)} | ||
| > | ||
| {address?.address ?? account.accountLabel} | ||
| </Text> | ||
| {shouldDisplayBalance && ( | ||
| <Text variant="body" style={applyStyle(cryptoAmountTextStyle)}> | ||
| <CryptoAmountFormatter | ||
| value={address?.balance ?? account.availableBalance} | ||
| symbol={account.symbol} | ||
| /> | ||
| </Text> | ||
| )} | ||
| </HStack> | ||
| <HStack alignItems="center" justifyContent="space-between"> | ||
| <Text variant="hint" style={applyStyle(networkStyle)}> | ||
| <DisplaySymbolFormatter value={symbol} areAmountUnitsEnabled={false} /> | ||
| </Text> | ||
| {shouldDisplayBalance && ( | ||
| <Text variant="hint" style={applyStyle(fiatStyle)}> | ||
| <FiatAmountFormatter value={fiatValue} /> | ||
| </Text> | ||
| )} | ||
| </HStack> | ||
| </VStack> | ||
| {shouldDisplayCaret && ( | ||
| <Box justifyContent="center"> | ||
| <Icon name="caretCircleRight" color="textSecondaryHighlight" /> | ||
| </Box> | ||
| )} | ||
| </HStack> | ||
| </Pressable> | ||
| ); | ||
| }; |
54 changes: 54 additions & 0 deletions
54
suite-native/module-trading/src/components/general/AccountSheet/AccountSheet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { useReceiveAccountsListData } from '../../../hooks/useReceiveAccountsListData'; | ||
| import { useSelectedAccount } from '../../../hooks/useSelectedAccount'; | ||
| import { TradingBottomSheetSectionList } from '../TradingBottomSheetSectionList'; | ||
| import { ACCOUNT_LIST_ITEM_HEIGHT, AccountListItem } from './AccountListItem'; | ||
| import { AccountSheetHeader } from './AccountSheetHeader'; | ||
| import { AddressListEmptyComponent } from './AddressListEmptyComponent'; | ||
| import { ReceiveAccount, TradeableAsset } from '../../../types'; | ||
|
|
||
| export type AccountSheetProps = { | ||
| isVisible: boolean; | ||
| onClose: () => void; | ||
| onAccountSelect: (account: ReceiveAccount) => void; | ||
| asset: TradeableAsset; | ||
| }; | ||
|
|
||
| const keyExtractor = (item: ReceiveAccount) => `${item.account}_${item.address?.address}`; | ||
|
|
||
| export const AccountSheet = ({ isVisible, onClose, onAccountSelect, asset }: AccountSheetProps) => { | ||
| const { selectedAccount, clearSelectedAccount, onItemSelect } = useSelectedAccount({ | ||
| onAccountSelect, | ||
| onClose, | ||
| isVisible, | ||
| }); | ||
|
|
||
| // TODO 16638 should we display loading state instead of empty? | ||
| const data = useReceiveAccountsListData(asset.symbol, selectedAccount) ?? []; | ||
|
|
||
| // TODO 16638 step 2 | ||
| return ( | ||
| <TradingBottomSheetSectionList<ReceiveAccount> | ||
| isVisible={isVisible} | ||
| onClose={onClose} | ||
| handleComponent={() => ( | ||
| <AccountSheetHeader | ||
| onClose={onClose} | ||
| selectedAccount={selectedAccount} | ||
| clearSelectedAccount={clearSelectedAccount} | ||
| /> | ||
| )} | ||
| ListEmptyComponent={<AddressListEmptyComponent />} | ||
| renderItem={item => ( | ||
| <AccountListItem | ||
| receiveAccount={item} | ||
| onPress={() => onItemSelect(item)} | ||
| asset={asset} | ||
| /> | ||
| )} | ||
| data={data} | ||
| estimatedItemSize={ACCOUNT_LIST_ITEM_HEIGHT} | ||
| keyExtractor={keyExtractor} | ||
| noSingletonSectionHeader | ||
| /> | ||
| ); | ||
| }; |
52 changes: 52 additions & 0 deletions
52
suite-native/module-trading/src/components/general/AccountSheet/AccountSheetHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { Account } from '@suite-common/wallet-types'; | ||
| import { BottomSheetGrabber, VStack } from '@suite-native/atoms'; | ||
| import { Translation, useTranslate } from '@suite-native/intl'; | ||
| import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; | ||
|
|
||
| import { SearchableSheetHeader } from '../SearchableSheetHeader'; | ||
| import { SheetHeaderTitle } from '../SheetHeaderTitle'; | ||
|
|
||
| export type AccountSheetHeaderProps = { | ||
| onClose: () => void; | ||
| selectedAccount: undefined | Account; | ||
| clearSelectedAccount: () => void; | ||
| }; | ||
|
|
||
| const wrapperStyle = prepareNativeStyle<{}>(({ spacings }) => ({ | ||
| padding: spacings.sp16, | ||
| gap: spacings.sp16, | ||
| })); | ||
|
|
||
| export const AccountSheetHeader = ({ | ||
| selectedAccount, | ||
| clearSelectedAccount, | ||
| onClose, | ||
| }: AccountSheetHeaderProps) => { | ||
| const { applyStyle } = useNativeStyles(); | ||
| const { translate } = useTranslate(); | ||
|
|
||
| // TODO 16638 animations | ||
|
|
||
| if (selectedAccount) { | ||
| return ( | ||
| <SearchableSheetHeader | ||
| onClose={clearSelectedAccount} | ||
| title={selectedAccount.accountLabel} | ||
| leftButtonIcon="caretLeft" | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <VStack style={applyStyle(wrapperStyle)}> | ||
| <BottomSheetGrabber /> | ||
| <SheetHeaderTitle | ||
| leftButtonIcon="x" | ||
| onLeftButtonPress={onClose} | ||
| leftButtonA11yLabel={translate('generic.buttons.close')} | ||
| > | ||
| <Translation id="moduleTrading.accountSheet.titleStep1" /> | ||
| </SheetHeaderTitle> | ||
| </VStack> | ||
| ); | ||
| }; |
10 changes: 10 additions & 0 deletions
10
...e-native/module-trading/src/components/general/AccountSheet/AddressListEmptyComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { Translation } from '@suite-native/intl'; | ||
|
|
||
| import { TradingEmptyComponent } from '../TradingEmptyComponent'; | ||
|
|
||
| export const AddressListEmptyComponent = () => ( | ||
| <TradingEmptyComponent | ||
| title={<Translation id="moduleTrading.accountSheet.addressEmptyTitle" />} | ||
| description={<Translation id="moduleTrading.accountSheet.addressEmptyDescription" />} | ||
| /> | ||
| ); |
Oops, something went wrong.