forked from trezor/trezor-suite
-
Notifications
You must be signed in to change notification settings - Fork 0
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): send fees selection screen
- Loading branch information
Showing
24 changed files
with
650 additions
and
120 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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { useContext } from 'react'; | ||
| import { TouchableOpacity } from 'react-native'; | ||
|
|
||
| import { NetworkSymbol } from '@suite-common/wallet-config'; | ||
| import { GeneralPrecomposedTransactionFinal } from '@suite-common/wallet-types'; | ||
| import { Text, HStack, VStack, Radio } from '@suite-native/atoms'; | ||
| import { CryptoToFiatAmountFormatter, CryptoAmountFormatter } from '@suite-native/formatters'; | ||
| import { FormContext } from '@suite-native/forms'; | ||
| import { TxKeyPath, Translation } from '@suite-native/intl'; | ||
|
|
||
| import { SendFeesFormValues } from '../sendFeesFormSchema'; | ||
| import { NativeSupportedFeeLevel } from '../types'; | ||
|
|
||
| const feeLabelsMap = { | ||
| economy: { | ||
| label: 'moduleSend.fees.levels.low.label', | ||
| timeEstimate: 'moduleSend.fees.levels.low.timeEstimate', | ||
| }, | ||
| normal: { | ||
| label: 'moduleSend.fees.levels.medium.label', | ||
| timeEstimate: 'moduleSend.fees.levels.medium.timeEstimate', | ||
| }, | ||
| high: { | ||
| label: 'moduleSend.fees.levels.high.label', | ||
| timeEstimate: 'moduleSend.fees.levels.high.timeEstimate', | ||
| }, | ||
| } as const satisfies Record<NativeSupportedFeeLevel, { label: TxKeyPath; timeEstimate: TxKeyPath }>; | ||
|
|
||
| export const FeeOption = ({ | ||
| feeKey, | ||
| feeLevel, | ||
| networkSymbol, | ||
| }: { | ||
| feeKey: SendFeesFormValues['feeLevel']; | ||
| feeLevel: GeneralPrecomposedTransactionFinal; | ||
| networkSymbol: NetworkSymbol; | ||
| }) => { | ||
| const { watch, setValue } = useContext(FormContext); | ||
| const selectedLevel = watch('feeLevel'); | ||
|
|
||
| const isChecked = selectedLevel === feeKey; | ||
|
|
||
| const { label, timeEstimate } = feeLabelsMap[feeKey]; | ||
|
|
||
| const handleSelectFeeLevel = () => { | ||
| setValue('feeLevel', feeKey, { | ||
| shouldValidate: true, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <TouchableOpacity onPress={handleSelectFeeLevel}> | ||
| <HStack spacing="large" justifyContent="space-between" flex={1} alignItems="center"> | ||
| <VStack alignItems="flex-start" spacing="extraSmall"> | ||
| <Text variant="highlight"> | ||
| <Translation id={label} /> | ||
| </Text> | ||
| <Text variant="hint" color="textSubdued"> | ||
| <Translation id={timeEstimate} /> | ||
| </Text> | ||
| </VStack> | ||
| <VStack flex={1} alignItems="flex-end" spacing="extraSmall"> | ||
| <CryptoToFiatAmountFormatter | ||
| variant="body" | ||
| color="textDefault" | ||
| value={feeLevel.fee} | ||
| network={networkSymbol} | ||
| /> | ||
| <CryptoAmountFormatter | ||
| variant="hint" | ||
| color="textSubdued" | ||
| value={feeLevel.fee} | ||
| network={networkSymbol} | ||
| isBalance={false} | ||
| /> | ||
| </VStack> | ||
| <Radio | ||
| isChecked={isChecked} | ||
| value={feeKey} | ||
| onPress={handleSelectFeeLevel} | ||
| testID={`@send/fees-level-${feeKey}`} | ||
| /> | ||
| </HStack> | ||
| </TouchableOpacity> | ||
| ); | ||
| }; |
34 changes: 34 additions & 0 deletions
34
suite-native/module-send/src/components/FeeOptionsList.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,34 @@ | ||
| import { D } from '@mobily/ts-belt'; | ||
|
|
||
| import { NetworkSymbol } from '@suite-common/wallet-config'; | ||
| import { GeneralPrecomposedLevels } from '@suite-common/wallet-types'; | ||
| import { Card, VStack } from '@suite-native/atoms'; | ||
|
|
||
| import { FeeOption } from './FeeOption'; | ||
| import { NativeSupportedFeeLevel } from '../types'; | ||
|
|
||
| export const FeeOptionsList = ({ | ||
| feeLevels, | ||
| networkSymbol, | ||
| }: { | ||
| feeLevels: GeneralPrecomposedLevels; | ||
| networkSymbol: NetworkSymbol; | ||
| }) => { | ||
| // Remove custom fee level from the list. It is not supported in the first version of the send flow. | ||
| const predefinedFeeLevels = D.filterWithKey(feeLevels, key => key !== 'custom'); | ||
|
|
||
| return ( | ||
| <Card> | ||
| <VStack spacing="extraLarge"> | ||
| {Object.entries(predefinedFeeLevels).map(([feeKey, feeLevel]) => ( | ||
| <FeeOption | ||
| key={feeKey} | ||
| feeKey={feeKey as NativeSupportedFeeLevel} | ||
| feeLevel={feeLevel} | ||
| networkSymbol={networkSymbol} | ||
| /> | ||
| ))} | ||
| </VStack> | ||
| </Card> | ||
| ); | ||
| }; |
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,81 @@ | ||
| import { useContext } from 'react'; | ||
|
|
||
| import { NetworkSymbol } from '@suite-common/wallet-config'; | ||
| import { Text, Button, Box, Card, HStack, VStack } from '@suite-native/atoms'; | ||
| import { CryptoToFiatAmountFormatter, CryptoAmountFormatter } from '@suite-native/formatters'; | ||
| import { FormContext } from '@suite-native/forms'; | ||
| import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; | ||
| import { Translation } from '@suite-native/intl'; | ||
|
|
||
| type FeesFooterProps = { | ||
| onSubmit: () => void; | ||
| networkSymbol: NetworkSymbol; | ||
| totalAmount: string; | ||
| }; | ||
|
|
||
| const CARD_BOTTOM_PADDING = 40; | ||
|
|
||
| const footerWrapperStyle = prepareNativeStyle(utils => ({ | ||
| marginBottom: utils.spacings.small, | ||
| })); | ||
|
|
||
| const cardStyle = prepareNativeStyle(utils => ({ | ||
| paddingTop: utils.spacings.small, | ||
| paddingBottom: CARD_BOTTOM_PADDING, // ensures that nothing is hidden behind the absolute confirm button | ||
| backgroundColor: utils.colors.backgroundSurfaceElevationNegative, | ||
| borderColor: utils.colors.borderElevation0, | ||
| borderWidth: utils.borders.widths.small, | ||
| })); | ||
|
|
||
| const buttonStyle = prepareNativeStyle(utils => ({ | ||
| position: 'absolute', | ||
| width: '100%', | ||
| // Offset so the button overlaps the adjacent card (as design demands). | ||
| top: -utils.spacings.extraLarge, | ||
| })); | ||
|
|
||
| export const FeesFooter = ({ onSubmit, totalAmount, networkSymbol }: FeesFooterProps) => { | ||
| const { applyStyle } = useNativeStyles(); | ||
|
|
||
| const form = useContext(FormContext); | ||
| const { | ||
| formState: { isSubmitting }, | ||
| } = form; | ||
|
|
||
| return ( | ||
| <Box style={applyStyle(footerWrapperStyle)}> | ||
| <Card style={applyStyle(cardStyle)}> | ||
| <HStack justifyContent="space-between" alignItems="center"> | ||
| <Text variant="callout"> | ||
| <Translation id="moduleSend.fees.totalAmount" /> | ||
| </Text> | ||
| <VStack spacing={2} alignItems="flex-end"> | ||
| <CryptoToFiatAmountFormatter | ||
| variant="callout" | ||
| color="textDefault" | ||
| value={totalAmount} | ||
| network={networkSymbol} | ||
| /> | ||
| <CryptoAmountFormatter | ||
| variant="hint" | ||
| color="textSubdued" | ||
| value={totalAmount} | ||
| network={networkSymbol} | ||
| isBalance={false} | ||
| /> | ||
| </VStack> | ||
| </HStack> | ||
| </Card> | ||
| <Button | ||
| style={applyStyle(buttonStyle)} | ||
| accessibilityRole="button" | ||
| accessibilityLabel="validate send form" | ||
| testID="@send/fees-submit-button" | ||
| onPress={onSubmit} | ||
| disabled={isSubmitting} | ||
| > | ||
| <Translation id="moduleSend.fees.submitButton" /> | ||
| </Button> | ||
| </Box> | ||
| ); | ||
| }; |
Oops, something went wrong.