diff --git a/packages/mobile/src/components/CeloAmountInput.tsx b/packages/mobile/src/components/CeloAmountInput.tsx index 597ced81e5f..fc5c1c64846 100644 --- a/packages/mobile/src/components/CeloAmountInput.tsx +++ b/packages/mobile/src/components/CeloAmountInput.tsx @@ -1,9 +1,18 @@ import TextInputWithButtons from '@celo/react-components/components/TextInputWithButtons' import colors from '@celo/react-components/styles/colors' import fontStyles from '@celo/react-components/styles/fonts' +import BigNumber from 'bignumber.js' import React from 'react' import { useTranslation } from 'react-i18next' -import { StyleSheet, Text, TextInputProps, TouchableOpacity, ViewStyle } from 'react-native' +import { + ActivityIndicator, + StyleSheet, + Text, + TextInputProps, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native' import { useSelector } from 'react-redux' import { Namespaces } from 'src/i18n' import { RootState } from 'src/redux/reducers' @@ -14,6 +23,7 @@ interface Props { celo: string onCeloChanged: (address: string) => void color?: string + feeEstimate: BigNumber | undefined } export default function CeloAmountInput({ @@ -22,13 +32,15 @@ export default function CeloAmountInput({ celo, onCeloChanged, color = colors.goldUI, + feeEstimate, }: Props) { const { t } = useTranslation(Namespaces.exchangeFlow9) const goldBalance = useSelector((state: RootState) => state.goldToken.balance) const setMaxAmount = () => { - if (goldBalance) { - onCeloChanged(goldBalance) + if (goldBalance && feeEstimate) { + const maxValue = new BigNumber(goldBalance).minus(feeEstimate) + onCeloChanged(maxValue.isPositive() ? maxValue.toString() : '0') } } @@ -43,9 +55,15 @@ export default function CeloAmountInput({ value={celo} testID={'CeloAmount'} > - - {t('maxSymbol')} - + {feeEstimate ? ( + + {t('maxSymbol')} + + ) : ( + + + + )} ) } diff --git a/packages/mobile/src/exchange/WithdrawCeloReviewScreen.test.tsx b/packages/mobile/src/exchange/WithdrawCeloReviewScreen.test.tsx index 461ad194c20..a66a202a41b 100644 --- a/packages/mobile/src/exchange/WithdrawCeloReviewScreen.test.tsx +++ b/packages/mobile/src/exchange/WithdrawCeloReviewScreen.test.tsx @@ -14,6 +14,7 @@ const SAMPLE_AMOUNT = new BigNumber(5.001) const mockScreenProps = getMockStackScreenProps(Screens.WithdrawCeloReviewScreen, { recipientAddress: SAMPLE_ADDRESS, amount: SAMPLE_AMOUNT, + feeEstimate: new BigNumber(1), }) const store = createMockStore() diff --git a/packages/mobile/src/exchange/WithdrawCeloReviewScreen.tsx b/packages/mobile/src/exchange/WithdrawCeloReviewScreen.tsx index 270d3a8d4fc..010cad5c09e 100644 --- a/packages/mobile/src/exchange/WithdrawCeloReviewScreen.tsx +++ b/packages/mobile/src/exchange/WithdrawCeloReviewScreen.tsx @@ -31,7 +31,7 @@ import DisconnectBanner from 'src/shared/DisconnectBanner' type Props = StackScreenProps function WithdrawCeloReviewScreen({ route }: Props) { - const { amount, recipientAddress } = route.params + const { amount, recipientAddress, feeEstimate } = route.params const { t } = useTranslation(Namespaces.exchangeFlow9) // loading is never set to false, when the withdrawal is complete or after a short while, // withdrawCelo saga will navigate to |ExchangeHomeScreen|. @@ -56,7 +56,11 @@ function WithdrawCeloReviewScreen({ route }: Props) { amount={} /> - +