Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import Animated, { | ||
| FadeIn, | ||
| FadeOut, | ||
| LinearTransition, | ||
| useAnimatedStyle, | ||
| withTiming, | ||
| } from 'react-native-reanimated'; | ||
| import { useRef, useState } from 'react'; | ||
| import { findNodeHandle, TextInput, View } from 'react-native'; | ||
|
|
||
| import { Text, IconButton, Box } from '@suite-native/atoms'; | ||
| import { TextInputField, useFormContext } from '@suite-native/forms'; | ||
| import { Translation } from '@suite-native/intl'; | ||
| import { useDebounce } from '@trezor/react-utils'; | ||
| import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; | ||
| import { useScrollView } from '@suite-native/navigation'; | ||
|
|
||
| import { SendFieldName, SendOutputsFormValues } from '../sendOutputsFormSchema'; | ||
|
|
||
| const inputWrapperStyle = prepareNativeStyle<{ isInputDisplayed: boolean }>( | ||
| (utils, { isInputDisplayed }) => ({ | ||
| flexDirection: 'row', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
|
|
||
| extend: { | ||
| condition: isInputDisplayed, | ||
| style: { | ||
| alignItems: undefined, | ||
| flexDirection: 'column', | ||
| gap: utils.spacings.sp12, | ||
| }, | ||
| }, | ||
| }), | ||
| ); | ||
|
|
||
| const INPUT_OPEN_HEIGHT = 88; | ||
| const INPUT_CLOSED_HEIGHT = 45; | ||
| const ERROR_HEIGHT = 15; | ||
| const SCROLL_TO_DELAY = 500; | ||
|
|
||
| export const DestinationTagInput = () => { | ||
| const inputWrapperRef = useRef<View | null>(null); | ||
| const inputRef = useRef<TextInput | null>(null); | ||
| const scrollView = useScrollView(); | ||
| const { applyStyle } = useNativeStyles(); | ||
| const [isInputDisplayed, setIsInputDisplayed] = useState(false); | ||
| const destinationTagFieldName: SendFieldName = 'rippleDestinationTag'; | ||
| const debounce = useDebounce(); | ||
|
|
||
| const { | ||
| trigger, | ||
| formState: { errors }, | ||
| } = useFormContext<SendOutputsFormValues>(); | ||
|
|
||
| const hasError = !!errors[destinationTagFieldName]; | ||
|
|
||
| const handleShowInput = () => { | ||
| setIsInputDisplayed(true); | ||
|
|
||
| // Wait for input element to be mounted. | ||
| setTimeout(() => { | ||
| inputRef.current?.focus(); | ||
| }); | ||
| }; | ||
|
|
||
| const animatedViewStyle = useAnimatedStyle(() => { | ||
| const inputOpenedHeight = hasError ? INPUT_OPEN_HEIGHT + ERROR_HEIGHT : INPUT_OPEN_HEIGHT; | ||
| const height = isInputDisplayed ? inputOpenedHeight : INPUT_CLOSED_HEIGHT; | ||
|
|
||
| return { | ||
| height: withTiming(height), | ||
| }; | ||
| }, [hasError, isInputDisplayed]); | ||
|
|
||
| const handleInputFocus = () => { | ||
| const inputWrapper = inputWrapperRef.current; | ||
| const scrollViewNodeHandle = findNodeHandle(scrollView); | ||
|
|
||
| if (!inputWrapper || !scrollViewNodeHandle) return; | ||
|
|
||
| // Timeout is needed so the position is calculated after keyboard and footer animations are finished. | ||
| setTimeout( | ||
| () => | ||
| // Scroll so the whole amount inputs section is visible. | ||
| inputWrapper.measureLayout(scrollViewNodeHandle, (_, y) => { | ||
| scrollView?.scrollTo({ y, animated: true }); | ||
| }), | ||
| SCROLL_TO_DELAY, | ||
| ); | ||
| }; | ||
|
|
||
| const handleChangeValue = () => { | ||
| debounce(() => { | ||
| trigger(destinationTagFieldName); | ||
| handleInputFocus(); | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <Animated.View style={animatedViewStyle} layout={LinearTransition} ref={inputWrapperRef}> | ||
| <Box style={applyStyle(inputWrapperStyle, { isInputDisplayed })}> | ||
| <Animated.View layout={LinearTransition}> | ||
| <Text variant="hint"> | ||
| <Translation id="moduleSend.outputs.recipients.destinationTagLabel" /> | ||
| </Text> | ||
| </Animated.View> | ||
| {!isInputDisplayed && ( | ||
| <Animated.View entering={FadeIn} exiting={FadeOut}> | ||
| <IconButton | ||
| iconName="plus" | ||
| colorScheme="tertiaryElevation1" | ||
| onPress={handleShowInput} | ||
| /> | ||
| </Animated.View> | ||
| )} | ||
| {isInputDisplayed && ( | ||
| <Animated.View entering={FadeIn} exiting={FadeOut}> | ||
| <TextInputField | ||
| multiline | ||
| ref={inputRef} | ||
| onChangeText={handleChangeValue} | ||
| name={destinationTagFieldName} | ||
| testID={destinationTagFieldName} | ||
| onFocus={handleInputFocus} | ||
| accessibilityLabel="address input" | ||
| /> | ||
| </Animated.View> | ||
| )} | ||
| </Box> | ||
| </Animated.View> | ||
| ); | ||
| }; |
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 |
|---|---|---|
| @@ -1,21 +1,41 @@ | ||
| import React from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import Animated, { LinearTransition } from 'react-native-reanimated'; | ||
|
|
||
| import { VStack, CardDivider } from '@suite-native/atoms'; | ||
| import { AccountKey } from '@suite-common/wallet-types'; | ||
| import { AccountsRootState, selectAccountByKey } from '@suite-common/wallet-core'; | ||
|
|
||
| import { AmountInputs } from './AmountInputs'; | ||
| import { AddressInput } from './AddressInput'; | ||
| import { DestinationTagInput } from './DestinationTagInput'; | ||
|
|
||
| type RecipientInputsProps = { | ||
| index: number; | ||
| accountKey: AccountKey; | ||
| }; | ||
| export const RecipientInputs = ({ index, accountKey }: RecipientInputsProps) => { | ||
| const account = useSelector((state: AccountsRootState) => | ||
| selectAccountByKey(state, accountKey), | ||
| ); | ||
|
|
||
| if (!account) return null; | ||
|
|
||
| const isRipple = account.networkType === 'ripple'; | ||
|
|
||
| return ( | ||
| <VStack spacing="sp16"> | ||
| <AddressInput index={index} accountKey={accountKey} /> | ||
| <CardDivider /> | ||
| <AmountInputs index={index} /> | ||
| {isRipple && ( | ||
| <Animated.View layout={LinearTransition}> | ||
| <VStack spacing="sp16"> | ||
| <CardDivider /> | ||
| <DestinationTagInput /> | ||
| </VStack> | ||
| </Animated.View> | ||
| )} | ||
| </VStack> | ||
| ); | ||
| }; |
Oops, something went wrong.