|
| 1 | +import React, { ReactElement, memo, useEffect, useMemo, useState } from 'react'; |
| 2 | +import { Trans, useTranslation } from 'react-i18next'; |
| 3 | +import { StyleSheet, View } from 'react-native'; |
| 4 | +import { FadeIn, FadeOut } from 'react-native-reanimated'; |
| 5 | + |
| 6 | +import Amount from '../../../components/Amount'; |
| 7 | +import NavigationHeader from '../../../components/NavigationHeader'; |
| 8 | +import NumberPad from '../../../components/NumberPad'; |
| 9 | +import SafeAreaInset from '../../../components/SafeAreaInset'; |
| 10 | +import Button from '../../../components/buttons/Button'; |
| 11 | +import { useDisplayValues } from '../../../hooks/displayValues'; |
| 12 | +import { useAppSelector } from '../../../hooks/redux'; |
| 13 | +import { TransferScreenProps } from '../../../navigation/types'; |
| 14 | +import { onChainFeesSelector } from '../../../store/reselect/fees'; |
| 15 | +import { transactionSelector } from '../../../store/reselect/wallet'; |
| 16 | +import { AnimatedView, View as ThemedView } from '../../../styles/components'; |
| 17 | +import { BodyM, Caption13Up, Display } from '../../../styles/text'; |
| 18 | +import { showToast } from '../../../utils/notifications'; |
| 19 | +import { handleNumberPadPress } from '../../../utils/numberpad'; |
| 20 | +import { getFeeInfo } from '../../../utils/wallet'; |
| 21 | +import { getTotalFee, updateFee } from '../../../utils/wallet/transactions'; |
| 22 | + |
| 23 | +const FeeCustom = ({ |
| 24 | + navigation, |
| 25 | +}: TransferScreenProps<'ExternalFeeCustom'>): ReactElement => { |
| 26 | + const { t } = useTranslation('lightning'); |
| 27 | + const feeEstimates = useAppSelector(onChainFeesSelector); |
| 28 | + const transaction = useAppSelector(transactionSelector); |
| 29 | + const [feeRate, setFeeRate] = useState<number>(transaction.satsPerByte); |
| 30 | + const [maxFee, setMaxFee] = useState(0); |
| 31 | + const minFee = feeEstimates.minimum; |
| 32 | + |
| 33 | + useEffect(() => { |
| 34 | + const feeInfo = getFeeInfo({ |
| 35 | + satsPerByte: transaction.satsPerByte, |
| 36 | + transaction, |
| 37 | + }); |
| 38 | + if (feeInfo.isOk()) { |
| 39 | + setMaxFee(feeInfo.value.maxSatPerByte); |
| 40 | + } |
| 41 | + }, [transaction]); |
| 42 | + |
| 43 | + const totalFee = getTotalFee({ |
| 44 | + satsPerByte: feeRate, |
| 45 | + message: transaction.message, |
| 46 | + }); |
| 47 | + |
| 48 | + const totalFeeDisplay = useDisplayValues(totalFee); |
| 49 | + const totalFeeText = useMemo(() => { |
| 50 | + if (totalFeeDisplay.fiatFormatted === '—') { |
| 51 | + return t('wallet:send_fee_total', { totalFee }); |
| 52 | + } |
| 53 | + return t('wallet:send_fee_total_fiat', { |
| 54 | + feeSats: totalFee, |
| 55 | + fiatSymbol: totalFeeDisplay.fiatSymbol, |
| 56 | + fiatFormatted: totalFeeDisplay.fiatFormatted, |
| 57 | + }); |
| 58 | + }, [totalFee, totalFeeDisplay.fiatFormatted, totalFeeDisplay.fiatSymbol, t]); |
| 59 | + |
| 60 | + const onPress = (key: string): void => { |
| 61 | + const current = feeRate.toString(); |
| 62 | + const newAmount = handleNumberPadPress(key, current, { maxLength: 3 }); |
| 63 | + setFeeRate(Number(newAmount)); |
| 64 | + }; |
| 65 | + |
| 66 | + const onContinue = (): void => { |
| 67 | + if (Number(feeRate) > maxFee) { |
| 68 | + showToast({ |
| 69 | + type: 'info', |
| 70 | + title: t('wallet:max_possible_fee_rate'), |
| 71 | + description: t('wallet:max_possible_fee_rate_msg'), |
| 72 | + }); |
| 73 | + return; |
| 74 | + } |
| 75 | + if (Number(feeRate) < minFee) { |
| 76 | + showToast({ |
| 77 | + type: 'info', |
| 78 | + title: t('wallet:min_possible_fee_rate'), |
| 79 | + description: t('wallet:min_possible_fee_rate_msg'), |
| 80 | + }); |
| 81 | + return; |
| 82 | + } |
| 83 | + const res = updateFee({ |
| 84 | + satsPerByte: Number(feeRate), |
| 85 | + transaction, |
| 86 | + }); |
| 87 | + if (res.isErr()) { |
| 88 | + showToast({ |
| 89 | + type: 'warning', |
| 90 | + title: t('wallet:send_fee_error'), |
| 91 | + description: res.error.message, |
| 92 | + }); |
| 93 | + } |
| 94 | + if (res.isOk()) { |
| 95 | + navigation.goBack(); |
| 96 | + } |
| 97 | + }; |
| 98 | + |
| 99 | + const isValid = feeRate !== 0; |
| 100 | + |
| 101 | + return ( |
| 102 | + <ThemedView style={styles.root}> |
| 103 | + <SafeAreaInset type="top" /> |
| 104 | + <NavigationHeader |
| 105 | + title={t('external.nav_title')} |
| 106 | + onClosePress={(): void => navigation.navigate('Wallet')} |
| 107 | + /> |
| 108 | + <View style={styles.content}> |
| 109 | + <Display> |
| 110 | + <Trans |
| 111 | + t={t} |
| 112 | + i18nKey="transfer.custom_fee" |
| 113 | + components={{ accent: <Display color="purple" /> }} |
| 114 | + /> |
| 115 | + </Display> |
| 116 | + |
| 117 | + <View style={styles.amountContainer}> |
| 118 | + <Caption13Up color="secondary" style={styles.title}> |
| 119 | + {t('sat_vbyte')} |
| 120 | + </Caption13Up> |
| 121 | + <Amount value={feeRate} /> |
| 122 | + <View style={styles.feeText}> |
| 123 | + {isValid && ( |
| 124 | + <AnimatedView entering={FadeIn} exiting={FadeOut}> |
| 125 | + <BodyM color="secondary">{totalFeeText}</BodyM> |
| 126 | + </AnimatedView> |
| 127 | + )} |
| 128 | + </View> |
| 129 | + </View> |
| 130 | + |
| 131 | + <View style={styles.numberPadContainer} testID="FeeCustomNumberPad"> |
| 132 | + <NumberPad style={styles.numberPad} type="simple" onPress={onPress} /> |
| 133 | + </View> |
| 134 | + |
| 135 | + <View style={styles.buttonContainer}> |
| 136 | + <Button |
| 137 | + size="large" |
| 138 | + text={t('continue')} |
| 139 | + onPress={onContinue} |
| 140 | + testID="FeeCustomContinue" |
| 141 | + /> |
| 142 | + </View> |
| 143 | + </View> |
| 144 | + <SafeAreaInset type="bottom" minPadding={16} /> |
| 145 | + </ThemedView> |
| 146 | + ); |
| 147 | +}; |
| 148 | + |
| 149 | +const styles = StyleSheet.create({ |
| 150 | + root: { |
| 151 | + flex: 1, |
| 152 | + }, |
| 153 | + content: { |
| 154 | + flex: 1, |
| 155 | + paddingTop: 16, |
| 156 | + paddingHorizontal: 16, |
| 157 | + }, |
| 158 | + amountContainer: { |
| 159 | + marginTop: 'auto', |
| 160 | + }, |
| 161 | + title: { |
| 162 | + marginBottom: 16, |
| 163 | + }, |
| 164 | + feeText: { |
| 165 | + marginTop: 8, |
| 166 | + minHeight: 22, // avoid jumping when fee is changing |
| 167 | + }, |
| 168 | + numberPadContainer: { |
| 169 | + flex: 1, |
| 170 | + marginTop: 'auto', |
| 171 | + maxHeight: 360, |
| 172 | + }, |
| 173 | + numberPad: { |
| 174 | + marginTop: 16, |
| 175 | + marginHorizontal: -16, |
| 176 | + }, |
| 177 | + buttonContainer: { |
| 178 | + justifyContent: 'flex-end', |
| 179 | + }, |
| 180 | +}); |
| 181 | + |
| 182 | +export default memo(FeeCustom); |
0 commit comments