Add fee estimation for Withdrawing CELO and pay for Withdrawing and Selling CELO fees in CELO

packages/mobile/src/components/CeloAmountInput.tsx

@@ -1,6 +1,7 @@
 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'
@@ -14,6 +15,7 @@ interface Props {
   celo: string
   onCeloChanged: (address: string) => void
   color?: string
+  feeEstimate: BigNumber
 }
 
 export default function CeloAmountInput({
@@ -22,13 +24,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)
+      const maxValue = new BigNumber(goldBalance).minus(feeEstimate)
+      onCeloChanged(maxValue.isPositive() ? maxValue.toString() : '0')
     }
   }
 

packages/mobile/src/exchange/WithdrawCeloReviewScreen.tsx

@@ -31,7 +31,7 @@ import DisconnectBanner from 'src/shared/DisconnectBanner'
 type Props = StackScreenProps<StackParamList, Screens.WithdrawCeloReviewScreen>
 
 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={<ShortenedAddress style={styles.withdrawAddress} address={recipientAddress} />}
         />
         <HorizontalLine />
-        <WithdrawCeloSummary amount={amount} recipientAddress={recipientAddress} />
+        <WithdrawCeloSummary
+          amount={amount}
+          recipientAddress={recipientAddress}
+          feeEstimate={feeEstimate}
+        />
       </View>
       <Button
         onPress={onConfirmWithdraw}

packages/mobile/src/exchange/WithdrawCeloScreen.tsx

@@ -9,7 +9,7 @@ import fontStyles from '@celo/react-components/styles/fonts'
 import variables from '@celo/react-components/styles/variables'
 import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -25,14 +25,20 @@ import { HeaderTitleWithBalance, headerWithBackButton } from 'src/navigator/Head
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
 import useSelector from 'src/redux/useSelector'
+import { getSendFee } from 'src/send/saga'
 import { useDailyTransferLimitValidator } from 'src/send/utils'
 import DisconnectBanner from 'src/shared/DisconnectBanner'
+import { divideByWei } from 'src/utils/formatting'
+import Logger from 'src/utils/Logger'
 
 type Props = StackScreenProps<StackParamList, Screens.WithdrawCeloScreen>
 
+const RANDOM_ADDRESS = '0xDCE9762d6C1fe89FF4f3857832131Ca18eE15C66'
+
 function WithdrawCeloScreen({ navigation }: Props) {
   const [accountAddress, setAccountAddress] = useState('')
   const [celoInput, setCeloToTransfer] = useState('')
+  const [feeEstimate, setFeeEstimate] = useState(new BigNumber(0))
 
   const goldBalance = useSelector((state) => state.goldToken.balance)
   const goldBalanceNumber = new BigNumber(goldBalance || 0)
@@ -51,6 +57,25 @@ function WithdrawCeloScreen({ navigation }: Props) {
     CURRENCY_ENUM.GOLD
   )
 
+  useEffect(() => {
+    getSendFee(
+      accountAddress,
+      CURRENCY_ENUM.GOLD,
+      {
+        recipientAddress: RANDOM_ADDRESS,
+        amount: goldBalanceNumber,
+        comment: '',
+      },
+      false
+    )
+      .then((estimate: BigNumber) => {
+        setFeeEstimate(divideByWei(estimate))
+      })
+      .catch((error) => {
+        Logger.warn('WithdrawCeloScreen', `Error found while estimating gas fee: ${error}`)
+      })
+  }, [])
+
   const onConfirm = async () => {
     if (isTransferLimitReached) {
       showLimitReachedBanner()
@@ -63,6 +88,7 @@ function WithdrawCeloScreen({ navigation }: Props) {
     navigation.navigate(Screens.WithdrawCeloReviewScreen, {
       amount: celoToTransfer,
       recipientAddress: accountAddress,
+      feeEstimate,
     })
   }
 
@@ -86,6 +112,7 @@ function WithdrawCeloScreen({ navigation }: Props) {
           inputStyle={styles.input}
           onCeloChanged={setCeloToTransfer}
           celo={celoInput}
+          feeEstimate={feeEstimate}
         />
       </KeyboardAwareScrollView>
       <Button

packages/mobile/src/exchange/WithdrawCeloSummary.tsx

@@ -16,16 +16,16 @@ interface WithdrawCeloProps {
   style?: ViewStyle
   amount: BigNumber
   recipientAddress: string
+  feeEstimate: BigNumber
 }
 
 export default function WithdrawCeloSummary({
   style,
   amount,
   recipientAddress,
+  feeEstimate,
 }: WithdrawCeloProps) {
   const { t } = useTranslation(Namespaces.exchangeFlow9)
-  // TODO: Estimate real fee.
-  const fee = new BigNumber(0)
 
   return (
     <View style={style}>
@@ -46,8 +46,8 @@ export default function WithdrawCeloSummary({
         currency={CURRENCY_ENUM.GOLD}
         isExchange={false}
         isEstimate={true}
-        securityFee={fee}
-        totalFee={fee}
+        securityFee={feeEstimate}
+        totalFee={feeEstimate}
       />
       <TotalLineItem
         amount={{

packages/mobile/src/exchange/__snapshots__/WithdrawCeloReviewScreen.test.tsx.snap

@@ -295,35 +295,6 @@ exports[`WithdrawCeloReviewScreen renders correctly 1`] = `
 
                 </Text>
               </View>
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#2E3338",
-                      "fontFamily": "Inter-Regular",
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    undefined,
-                  ]
-                }
-              >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Array [
-                      undefined,
-                      Object {
-                        "color": undefined,
-                      },
-                    ]
-                  }
-                >
-
-
-                  0
-                </Text>
-              </Text>
             </View>
           </View>
         </View>

packages/mobile/src/exchange/__snapshots__/WithdrawCeloSummary.test.tsx.snap

@@ -187,35 +187,6 @@ exports[`WithdrawCeloSummary renders correctly 1`] = `
 
             </Text>
           </View>
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#2E3338",
-                  "fontFamily": "Inter-Regular",
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                undefined,
-              ]
-            }
-          >
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  undefined,
-                  Object {
-                    "color": undefined,
-                  },
-                ]
-              }
-            >
-
-
-              0
-            </Text>
-          </Text>
         </View>
       </View>
     </View>

packages/mobile/src/exchange/saga.ts

@@ -282,7 +282,10 @@ export function* exchangeGoldAndStableTokens(action: ExchangeTokensAction) {
       sendTransaction,
       approveTx.txo,
       account,
-      newTransactionContext(TAG, `Approve exchange of ${makerToken}`)
+      newTransactionContext(TAG, `Approve exchange of ${makerToken}`),
+      undefined, // staticGas
+      undefined, // cancelAction
+      makerToken
     )
     Logger.debug(TAG, `Transaction approved: ${util.inspect(approveTx.txo.arguments)}`)
 
@@ -395,7 +398,14 @@ function* withdrawCelo(action: WithdrawCeloAction) {
       }
     )
 
-    yield call(sendAndMonitorTransaction, tx, account, context, CURRENCY_ENUM.GOLD)
+    yield call(
+      sendAndMonitorTransaction,
+      tx,
+      account,
+      context,
+      CURRENCY_ENUM.GOLD,
+      CURRENCY_ENUM.GOLD
+    )
 
     const dollarAmount = yield call(celoToDollarAmount, amount)
     yield put(sendPaymentOrInviteSuccess(dollarAmount))

packages/mobile/src/fees/CalculateFee.tsx

@@ -34,6 +34,7 @@ interface SendProps extends CommonProps {
   amount: BigNumber
   comment?: string
   includeDekFee: boolean
+  currency?: CURRENCY_ENUM
 }
 
 interface ExchangeProps extends CommonProps {
@@ -95,19 +96,27 @@ const CalculateSendFee: FunctionComponent<SendProps> = (props) => {
       recipientAddress: string,
       amount: BigNumber,
       comment: string = MAX_PLACEHOLDER_COMMENT,
-      includeDekFee: boolean = false
+      includeDekFee: boolean = false,
+      currency: CURRENCY_ENUM = CURRENCY_ENUM.DOLLAR
     ) =>
       getSendFee(
         account,
-        CURRENCY_ENUM.DOLLAR,
+        currency,
         {
           recipientAddress,
           amount: amount.valueOf(),
           comment,
         },
         includeDekFee
       ),
-    [props.account, props.recipientAddress, props.amount, props.comment, props.includeDekFee]
+    [
+      props.account,
+      props.recipientAddress,
+      props.amount,
+      props.comment,
+      props.includeDekFee,
+      props.currency,
+    ]
   )
   return props.children(asyncResult) as React.ReactElement
 }

packages/mobile/src/navigator/types.tsx

@@ -214,6 +214,7 @@ export type StackParamList = {
   [Screens.WithdrawCeloReviewScreen]: {
     amount: BigNumber
     recipientAddress: string
+    feeEstimate: BigNumber
   }
   [Screens.WithdrawCeloScreen]: undefined
 }

packages/mobile/src/send/saga.ts

@@ -45,12 +45,15 @@ export async function getSendTxGas(
   try {
     Logger.debug(`${TAG}/getSendTxGas`, 'Getting gas estimate for send tx')
     const tx = await createTokenTransferTransaction(currency, params)
-    const txParams = { from: account, feeCurrency: await getCurrencyAddress(currency) }
+    const txParams = {
+      from: account,
+      feeCurrency: currency === CURRENCY_ENUM.GOLD ? undefined : await getCurrencyAddress(currency),
+    }
     const gas = await estimateGas(tx.txo, txParams)
     Logger.debug(`${TAG}/getSendTxGas`, `Estimated gas of ${gas.toString()}`)
     return gas
   } catch (error) {
-    throw Error(ErrorMessages.INSUFFICIENT_BALANCE)
+    throw Error(ErrorMessages.CALCULATE_FEE_FAILED)
   }
 }
 

packages/mobile/src/transactions/saga.ts

@@ -63,7 +63,8 @@ export function* sendAndMonitorTransaction<T>(
   tx: CeloTransactionObject<T>,
   account: string,
   context: TransactionContext,
-  currency?: CURRENCY_ENUM
+  currency?: CURRENCY_ENUM,
+  feeCurrency?: CURRENCY_ENUM
 ) {
   try {
     Logger.debug(TAG + '@sendAndMonitorTransaction', `Sending transaction with id: ${context.id}`)
@@ -74,6 +75,7 @@ export function* sendAndMonitorTransaction<T>(
         tx.txo,
         account,
         context,
+        feeCurrency,
         nonce
       )
       const hash = yield transactionHash