From e1218a094aeaa9195a8fe04a7ae43fd478682f7a Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Thu, 15 Oct 2020 17:19:24 -0300
Subject: [PATCH 01/10] Add fee estimation for withdrawals

---
 .../mobile/src/components/CeloAmountInput.tsx |  6 +++-
 .../src/exchange/WithdrawCeloReviewScreen.tsx |  8 +++--
 .../src/exchange/WithdrawCeloScreen.tsx       | 29 ++++++++++++++++++-
 .../src/exchange/WithdrawCeloSummary.tsx      |  8 ++---
 .../ExchangeReview.test.tsx.snap              | 20 ++++++++++++-
 .../WithdrawCeloReviewScreen.test.tsx.snap    | 29 -------------------
 .../WithdrawCeloSummary.test.tsx.snap         | 29 -------------------
 packages/mobile/src/fees/CalculateFee.tsx     | 15 ++++++++--
 packages/mobile/src/navigator/types.tsx       |  1 +
 packages/mobile/src/send/saga.ts              |  7 +++--
 10 files changed, 80 insertions(+), 72 deletions(-)

diff --git a/packages/mobile/src/components/CeloAmountInput.tsx b/packages/mobile/src/components/CeloAmountInput.tsx
index 597ced81e5f..721cf40f690 100644
--- a/packages/mobile/src/components/CeloAmountInput.tsx
+++ b/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).toString()
+      onCeloChanged(maxValue)
     }
   }
 
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<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}
diff --git a/packages/mobile/src/exchange/WithdrawCeloScreen.tsx b/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
index 80f496d12e8..d91b4dfda02 100644
--- a/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
+++ b/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
diff --git a/packages/mobile/src/exchange/WithdrawCeloSummary.tsx b/packages/mobile/src/exchange/WithdrawCeloSummary.tsx
index 028f8f384df..6d1e8fbfba5 100644
--- a/packages/mobile/src/exchange/WithdrawCeloSummary.tsx
+++ b/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={{
diff --git a/packages/mobile/src/exchange/__snapshots__/ExchangeReview.test.tsx.snap b/packages/mobile/src/exchange/__snapshots__/ExchangeReview.test.tsx.snap
index 1ae29e90c78..73965777e7f 100644
--- a/packages/mobile/src/exchange/__snapshots__/ExchangeReview.test.tsx.snap
+++ b/packages/mobile/src/exchange/__snapshots__/ExchangeReview.test.tsx.snap
@@ -213,7 +213,7 @@ exports[`ExchangeReview renders correctly 1`] = `
                       }
                     }
                   >
-                    feeActual
+                    feeEstimate
                   </Text>
                   <View
                     style={
@@ -305,6 +305,24 @@ exports[`ExchangeReview renders correctly 1`] = `
                       0
                     </Text>
                   </Text>
+                  <View
+                    style={
+                      Object {
+                        "transform": Array [
+                          Object {
+                            "scale": 0.7,
+                          },
+                        ],
+                      }
+                    }
+                  >
+                    <ActivityIndicator
+                      animating={true}
+                      color="#42D689"
+                      hidesWhenStopped={true}
+                      size="small"
+                    />
+                  </View>
                 </View>
               </View>
             </View>
diff --git a/packages/mobile/src/exchange/__snapshots__/WithdrawCeloReviewScreen.test.tsx.snap b/packages/mobile/src/exchange/__snapshots__/WithdrawCeloReviewScreen.test.tsx.snap
index f8a0f37a7a0..95e32366c36 100644
--- a/packages/mobile/src/exchange/__snapshots__/WithdrawCeloReviewScreen.test.tsx.snap
+++ b/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>
diff --git a/packages/mobile/src/exchange/__snapshots__/WithdrawCeloSummary.test.tsx.snap b/packages/mobile/src/exchange/__snapshots__/WithdrawCeloSummary.test.tsx.snap
index 8566fbe2202..19312a0e0ce 100644
--- a/packages/mobile/src/exchange/__snapshots__/WithdrawCeloSummary.test.tsx.snap
+++ b/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>
diff --git a/packages/mobile/src/fees/CalculateFee.tsx b/packages/mobile/src/fees/CalculateFee.tsx
index b4413f22c01..330c33678e7 100644
--- a/packages/mobile/src/fees/CalculateFee.tsx
+++ b/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,11 +96,12 @@ 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(),
@@ -107,7 +109,14 @@ const CalculateSendFee: FunctionComponent<SendProps> = (props) => {
         },
         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
 }
diff --git a/packages/mobile/src/navigator/types.tsx b/packages/mobile/src/navigator/types.tsx
index e470f83d54c..51b25eef13f 100644
--- a/packages/mobile/src/navigator/types.tsx
+++ b/packages/mobile/src/navigator/types.tsx
@@ -214,6 +214,7 @@ export type StackParamList = {
   [Screens.WithdrawCeloReviewScreen]: {
     amount: BigNumber
     recipientAddress: string
+    feeEstimate: BigNumber
   }
   [Screens.WithdrawCeloScreen]: undefined
 }
diff --git a/packages/mobile/src/send/saga.ts b/packages/mobile/src/send/saga.ts
index 03a7fdad1c2..1a021fcb1f1 100644
--- a/packages/mobile/src/send/saga.ts
+++ b/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)
   }
 }
 

From ee4faf4cd15cfe78dd84bb2df7a8c2409cb518f7 Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Thu, 15 Oct 2020 18:20:19 -0300
Subject: [PATCH 02/10] Pay for withdrawal gas in CELO

---
 .../mobile/src/components/CeloAmountInput.tsx  |  4 ++--
 packages/mobile/src/exchange/saga.ts           |  9 ++++++++-
 packages/mobile/src/transactions/saga.ts       |  4 +++-
 packages/mobile/src/transactions/send.ts       | 18 ++++++++++--------
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/mobile/src/components/CeloAmountInput.tsx b/packages/mobile/src/components/CeloAmountInput.tsx
index 721cf40f690..7740edaec69 100644
--- a/packages/mobile/src/components/CeloAmountInput.tsx
+++ b/packages/mobile/src/components/CeloAmountInput.tsx
@@ -31,8 +31,8 @@ export default function CeloAmountInput({
 
   const setMaxAmount = () => {
     if (goldBalance) {
-      const maxValue = new BigNumber(goldBalance).minus(feeEstimate).toString()
-      onCeloChanged(maxValue)
+      const maxValue = new BigNumber(goldBalance).minus(feeEstimate)
+      onCeloChanged(maxValue.isPositive() ? maxValue.toString() : '0')
     }
   }
 
diff --git a/packages/mobile/src/exchange/saga.ts b/packages/mobile/src/exchange/saga.ts
index b278d7ada2e..400a94def4e 100644
--- a/packages/mobile/src/exchange/saga.ts
+++ b/packages/mobile/src/exchange/saga.ts
@@ -395,7 +395,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))
diff --git a/packages/mobile/src/transactions/saga.ts b/packages/mobile/src/transactions/saga.ts
index c2872125868..8e030794298 100644
--- a/packages/mobile/src/transactions/saga.ts
+++ b/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
diff --git a/packages/mobile/src/transactions/send.ts b/packages/mobile/src/transactions/send.ts
index 92a0746c9a9..4da96861bed 100644
--- a/packages/mobile/src/transactions/send.ts
+++ b/packages/mobile/src/transactions/send.ts
@@ -100,6 +100,7 @@ export function* sendTransactionPromises(
   tx: TransactionObject<any>,
   account: string,
   context: TransactionContext,
+  feeCurrency: CURRENCY_ENUM = CURRENCY_ENUM.DOLLAR,
   nonce?: number,
   staticGas?: number
 ) {
@@ -126,19 +127,19 @@ export function* sendTransactionPromises(
       yield call(verifyUrlWorksOrThrow, DEFAULT_FORNO_URL)
     }
 
-    gasPrice = yield getGasPrice(CURRENCY_ENUM.DOLLAR)
+    gasPrice = yield getGasPrice(feeCurrency)
   }
+
+  // TODO: check for balance should be more than fee instead of zero
+  const feeCurrencyAddress =
+    feeCurrency === CURRENCY_ENUM.DOLLAR && stableTokenBalance.isGreaterThan(0)
+      ? yield call(getCurrencyAddress, CURRENCY_ENUM.DOLLAR)
+      : undefined
   const transactionPromises = yield call(
     sendTransactionAsync,
     tx,
     account,
-    // Use stableToken to pay fee, unless its balance is Zero
-    // then use Celo (goldToken) to pay fee (pass undefined)
-    // TODO: make it transparent for a user
-    // TODO: check for balance should be more than fee instead of zero
-    stableTokenBalance.isGreaterThan(0)
-      ? yield call(getCurrencyAddress, CURRENCY_ENUM.DOLLAR)
-      : undefined,
+    feeCurrencyAddress,
     getLogger(context, fornoMode),
     staticGas,
     gasPrice ? gasPrice.toString() : gasPrice,
@@ -162,6 +163,7 @@ export function* sendTransaction(
       tx,
       account,
       context,
+      CURRENCY_ENUM.DOLLAR,
       nonce,
       staticGas
     )

From 4274aaccac43fe092bcb04eeaceb914fc24bf452 Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Thu, 15 Oct 2020 18:53:05 -0300
Subject: [PATCH 03/10] Use CELO for fees when selling CELO

---
 .../ExchangeReview.test.tsx.snap              | 20 +------------------
 packages/mobile/src/exchange/saga.ts          |  5 ++++-
 packages/mobile/src/transactions/send.ts      | 19 +++++++++++++-----
 3 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/mobile/src/exchange/__snapshots__/ExchangeReview.test.tsx.snap b/packages/mobile/src/exchange/__snapshots__/ExchangeReview.test.tsx.snap
index 73965777e7f..1ae29e90c78 100644
--- a/packages/mobile/src/exchange/__snapshots__/ExchangeReview.test.tsx.snap
+++ b/packages/mobile/src/exchange/__snapshots__/ExchangeReview.test.tsx.snap
@@ -213,7 +213,7 @@ exports[`ExchangeReview renders correctly 1`] = `
                       }
                     }
                   >
-                    feeEstimate
+                    feeActual
                   </Text>
                   <View
                     style={
@@ -305,24 +305,6 @@ exports[`ExchangeReview renders correctly 1`] = `
                       0
                     </Text>
                   </Text>
-                  <View
-                    style={
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": 0.7,
-                          },
-                        ],
-                      }
-                    }
-                  >
-                    <ActivityIndicator
-                      animating={true}
-                      color="#42D689"
-                      hidesWhenStopped={true}
-                      size="small"
-                    />
-                  </View>
                 </View>
               </View>
             </View>
diff --git a/packages/mobile/src/exchange/saga.ts b/packages/mobile/src/exchange/saga.ts
index 400a94def4e..6c8ca104665 100644
--- a/packages/mobile/src/exchange/saga.ts
+++ b/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)}`)
 
diff --git a/packages/mobile/src/transactions/send.ts b/packages/mobile/src/transactions/send.ts
index 4da96861bed..f920b4da8a9 100644
--- a/packages/mobile/src/transactions/send.ts
+++ b/packages/mobile/src/transactions/send.ts
@@ -100,7 +100,7 @@ export function* sendTransactionPromises(
   tx: TransactionObject<any>,
   account: string,
   context: TransactionContext,
-  feeCurrency: CURRENCY_ENUM = CURRENCY_ENUM.DOLLAR,
+  preferredFeeCurrency: CURRENCY_ENUM = CURRENCY_ENUM.DOLLAR,
   nonce?: number,
   staticGas?: number
 ) {
@@ -115,6 +115,15 @@ export function* sendTransactionPromises(
   const fornoMode: boolean = yield select(fornoSelector)
   let gasPrice: BigNumber | undefined
 
+  // If stableToken is prefered to pay fee, use it unless its balance is Zero,
+  // in that case use CELO to pay fee.
+  // TODO: Make it transparent for the user.
+  // TODO: Check for balance should be more than fee instead of zero.
+  const feeCurrency =
+    preferredFeeCurrency === CURRENCY_ENUM.DOLLAR && stableTokenBalance.isGreaterThan(0)
+      ? CURRENCY_ENUM.DOLLAR
+      : CURRENCY_ENUM.GOLD
+
   Logger.debug(
     `${TAG}@sendTransactionPromises`,
     `Sending tx ${context.id} in ${fornoMode ? 'forno' : 'geth'} mode`
@@ -130,9 +139,8 @@ export function* sendTransactionPromises(
     gasPrice = yield getGasPrice(feeCurrency)
   }
 
-  // TODO: check for balance should be more than fee instead of zero
   const feeCurrencyAddress =
-    feeCurrency === CURRENCY_ENUM.DOLLAR && stableTokenBalance.isGreaterThan(0)
+    feeCurrency === CURRENCY_ENUM.DOLLAR
       ? yield call(getCurrencyAddress, CURRENCY_ENUM.DOLLAR)
       : undefined
   const transactionPromises = yield call(
@@ -155,7 +163,8 @@ export function* sendTransaction(
   account: string,
   context: TransactionContext,
   staticGas?: number,
-  cancelAction?: string
+  cancelAction?: string,
+  feeCurrency?: CURRENCY_ENUM
 ) {
   const sendTxMethod = function*(nonce?: number) {
     const { confirmation } = yield call(
@@ -163,7 +172,7 @@ export function* sendTransaction(
       tx,
       account,
       context,
-      CURRENCY_ENUM.DOLLAR,
+      feeCurrency,
       nonce,
       staticGas
     )

From c830b745114113aff5baa6d15a02d7591eb3ccdf Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Thu, 15 Oct 2020 19:15:32 -0300
Subject: [PATCH 04/10] Fix test

---
 .../WithdrawCeloReviewScreen.test.tsx         |  1 +
 .../WithdrawCeloReviewScreen.test.tsx.snap    | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+)

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/__snapshots__/WithdrawCeloReviewScreen.test.tsx.snap b/packages/mobile/src/exchange/__snapshots__/WithdrawCeloReviewScreen.test.tsx.snap
index 95e32366c36..0307e051b6d 100644
--- a/packages/mobile/src/exchange/__snapshots__/WithdrawCeloReviewScreen.test.tsx.snap
+++ b/packages/mobile/src/exchange/__snapshots__/WithdrawCeloReviewScreen.test.tsx.snap
@@ -295,6 +295,35 @@ 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,
+                      },
+                    ]
+                  }
+                >
+                  
+                  
+                  1
+                </Text>
+              </Text>
             </View>
           </View>
         </View>

From b7d9d9a95f1a54b23bdc05d5323c45069aa0e1f1 Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Thu, 15 Oct 2020 19:29:37 -0300
Subject: [PATCH 05/10] Fix another test

---
 .../src/exchange/WithdrawCeloSummary.test.tsx |  6 +++-
 .../WithdrawCeloSummary.test.tsx.snap         | 29 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/mobile/src/exchange/WithdrawCeloSummary.test.tsx b/packages/mobile/src/exchange/WithdrawCeloSummary.test.tsx
index 136bbd5e103..c3b87fe6c9f 100644
--- a/packages/mobile/src/exchange/WithdrawCeloSummary.test.tsx
+++ b/packages/mobile/src/exchange/WithdrawCeloSummary.test.tsx
@@ -15,7 +15,11 @@ describe('WithdrawCeloSummary', () => {
   it('renders correctly', () => {
     const tree = render(
       <Provider store={store}>
-        <WithdrawCeloSummary amount={SAMPLE_AMOUNT} recipientAddress={SAMPLE_ADDRESS} />
+        <WithdrawCeloSummary
+          amount={SAMPLE_AMOUNT}
+          recipientAddress={SAMPLE_ADDRESS}
+          feeEstimate={new BigNumber(1)}
+        />
       </Provider>
     )
     expect(tree).toMatchSnapshot()
diff --git a/packages/mobile/src/exchange/__snapshots__/WithdrawCeloSummary.test.tsx.snap b/packages/mobile/src/exchange/__snapshots__/WithdrawCeloSummary.test.tsx.snap
index 19312a0e0ce..6ae58ed9f11 100644
--- a/packages/mobile/src/exchange/__snapshots__/WithdrawCeloSummary.test.tsx.snap
+++ b/packages/mobile/src/exchange/__snapshots__/WithdrawCeloSummary.test.tsx.snap
@@ -187,6 +187,35 @@ 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,
+                  },
+                ]
+              }
+            >
+              
+              
+              1
+            </Text>
+          </Text>
         </View>
       </View>
     </View>

From 750d1f630148341ce8008d3a8c7526f6e911d956 Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Fri, 16 Oct 2020 14:08:14 -0300
Subject: [PATCH 06/10] Pr fixes

---
 .../mobile/src/components/CeloAmountInput.tsx | 27 ++++++++++---
 .../src/exchange/WithdrawCeloScreen.tsx       | 40 +++++++++----------
 packages/mobile/src/transactions/send.ts      |  2 +-
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/packages/mobile/src/components/CeloAmountInput.tsx b/packages/mobile/src/components/CeloAmountInput.tsx
index 7740edaec69..8699476209a 100644
--- a/packages/mobile/src/components/CeloAmountInput.tsx
+++ b/packages/mobile/src/components/CeloAmountInput.tsx
@@ -4,7 +4,15 @@ 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'
@@ -15,7 +23,7 @@ interface Props {
   celo: string
   onCeloChanged: (address: string) => void
   color?: string
-  feeEstimate: BigNumber
+  feeEstimate: BigNumber | undefined
 }
 
 export default function CeloAmountInput({
@@ -30,7 +38,7 @@ export default function CeloAmountInput({
   const goldBalance = useSelector((state: RootState) => state.goldToken.balance)
 
   const setMaxAmount = () => {
-    if (goldBalance) {
+    if (goldBalance && feeEstimate) {
       const maxValue = new BigNumber(goldBalance).minus(feeEstimate)
       onCeloChanged(maxValue.isPositive() ? maxValue.toString() : '0')
     }
@@ -47,13 +55,20 @@ export default function CeloAmountInput({
       value={celo}
       testID={'CeloAmount'}
     >
-      <TouchableOpacity testID={'MaxAmount'} onPress={setMaxAmount}>
-        <Text style={[styles.maxAmount, { color }]}>{t('maxSymbol')}</Text>
-      </TouchableOpacity>
+      {feeEstimate ? (
+        <TouchableOpacity testID={'MaxAmount'} onPress={setMaxAmount}>
+          <Text style={[styles.maxAmount, { color }]}>{t('maxSymbol')}</Text>
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="small" color={colors.goldUI} />
+        </View>
+      )}
     </TextInputWithButtons>
   )
 }
 
 const styles = StyleSheet.create({
   maxAmount: fontStyles.small600,
+  loadingContainer: {},
 })
diff --git a/packages/mobile/src/exchange/WithdrawCeloScreen.tsx b/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
index d91b4dfda02..c65f95d50db 100644
--- a/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
+++ b/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
@@ -9,7 +9,8 @@ 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, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
+import { useAsync } from 'react-async-hook'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -38,7 +39,7 @@ const RANDOM_ADDRESS = '0xDCE9762d6C1fe89FF4f3857832131Ca18eE15C66'
 function WithdrawCeloScreen({ navigation }: Props) {
   const [accountAddress, setAccountAddress] = useState('')
   const [celoInput, setCeloToTransfer] = useState('')
-  const [feeEstimate, setFeeEstimate] = useState(new BigNumber(0))
+  const [feeEstimate, setFeeEstimate] = useState<BigNumber | undefined>()
 
   const goldBalance = useSelector((state) => state.goldToken.balance)
   const goldBalanceNumber = new BigNumber(goldBalance || 0)
@@ -57,23 +58,22 @@ 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}`)
-      })
+  useAsync(async () => {
+    try {
+      const estimate = await getSendFee(
+        accountAddress,
+        CURRENCY_ENUM.GOLD,
+        {
+          recipientAddress: RANDOM_ADDRESS,
+          amount: goldBalanceNumber,
+          comment: '',
+        },
+        false
+      )
+      setFeeEstimate(divideByWei(estimate))
+    } catch (error) {
+      Logger.warn('WithdrawCeloScreen', `Error found while estimating gas fee: ${error}`)
+    }
   }, [])
 
   const onConfirm = async () => {
@@ -88,7 +88,7 @@ function WithdrawCeloScreen({ navigation }: Props) {
     navigation.navigate(Screens.WithdrawCeloReviewScreen, {
       amount: celoToTransfer,
       recipientAddress: accountAddress,
-      feeEstimate,
+      feeEstimate: feeEstimate || new BigNumber(0),
     })
   }
 
diff --git a/packages/mobile/src/transactions/send.ts b/packages/mobile/src/transactions/send.ts
index f920b4da8a9..51dad4790c9 100644
--- a/packages/mobile/src/transactions/send.ts
+++ b/packages/mobile/src/transactions/send.ts
@@ -142,7 +142,7 @@ export function* sendTransactionPromises(
   const feeCurrencyAddress =
     feeCurrency === CURRENCY_ENUM.DOLLAR
       ? yield call(getCurrencyAddress, CURRENCY_ENUM.DOLLAR)
-      : undefined
+      : undefined // Pass undefined to use CELO to pay for gas.
   const transactionPromises = yield call(
     sendTransactionAsync,
     tx,

From dc240a93e1dee18d85ea0dad3832e1fb5271001b Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Fri, 16 Oct 2020 14:53:57 -0300
Subject: [PATCH 07/10] useSendFee hook

---
 .../src/exchange/WithdrawCeloScreen.tsx       | 36 +++++++------------
 packages/mobile/src/fees/CalculateFee.tsx     |  8 +++--
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/mobile/src/exchange/WithdrawCeloScreen.tsx b/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
index c65f95d50db..cba4f10f30f 100644
--- a/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
+++ b/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
@@ -9,8 +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 { useAsync } from 'react-async-hook'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -20,17 +19,17 @@ import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import AccountAddressInput from 'src/components/AccountAddressInput'
 import CeloAmountInput from 'src/components/CeloAmountInput'
 import { exchangeRatePairSelector } from 'src/exchange/reducer'
+import { FeeType } from 'src/fees/actions'
+import { useSendFee } from 'src/fees/CalculateFee'
 import { CURRENCY_ENUM } from 'src/geth/consts'
 import i18n, { Namespaces } from 'src/i18n'
 import { HeaderTitleWithBalance, headerWithBackButton } from 'src/navigator/Headers'
 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>
 
@@ -39,10 +38,9 @@ const RANDOM_ADDRESS = '0xDCE9762d6C1fe89FF4f3857832131Ca18eE15C66'
 function WithdrawCeloScreen({ navigation }: Props) {
   const [accountAddress, setAccountAddress] = useState('')
   const [celoInput, setCeloToTransfer] = useState('')
-  const [feeEstimate, setFeeEstimate] = useState<BigNumber | undefined>()
 
   const goldBalance = useSelector((state) => state.goldToken.balance)
-  const goldBalanceNumber = new BigNumber(goldBalance || 0)
+  const goldBalanceNumber = useMemo(() => new BigNumber(goldBalance || 0), [goldBalance])
   const { t } = useTranslation(Namespaces.exchangeFlow9)
 
   const celoToTransfer = new BigNumber(celoInput)
@@ -58,23 +56,15 @@ function WithdrawCeloScreen({ navigation }: Props) {
     CURRENCY_ENUM.GOLD
   )
 
-  useAsync(async () => {
-    try {
-      const estimate = await getSendFee(
-        accountAddress,
-        CURRENCY_ENUM.GOLD,
-        {
-          recipientAddress: RANDOM_ADDRESS,
-          amount: goldBalanceNumber,
-          comment: '',
-        },
-        false
-      )
-      setFeeEstimate(divideByWei(estimate))
-    } catch (error) {
-      Logger.warn('WithdrawCeloScreen', `Error found while estimating gas fee: ${error}`)
-    }
-  }, [])
+  const { result } = useSendFee({
+    feeType: FeeType.SEND,
+    account: RANDOM_ADDRESS,
+    currency: CURRENCY_ENUM.GOLD,
+    recipientAddress: RANDOM_ADDRESS,
+    amount: goldBalanceNumber,
+    includeDekFee: false,
+  })
+  const feeEstimate = result && divideByWei(result)
 
   const onConfirm = async () => {
     if (isTransferLimitReached) {
diff --git a/packages/mobile/src/fees/CalculateFee.tsx b/packages/mobile/src/fees/CalculateFee.tsx
index 330c33678e7..cccf9343646 100644
--- a/packages/mobile/src/fees/CalculateFee.tsx
+++ b/packages/mobile/src/fees/CalculateFee.tsx
@@ -89,8 +89,8 @@ const CalculateInviteFee: FunctionComponent<InviteProps> = (props) => {
   return props.children(asyncResult) as React.ReactElement
 }
 
-const CalculateSendFee: FunctionComponent<SendProps> = (props) => {
-  const asyncResult = useAsyncShowError(
+export const useSendFee = (props: Omit<SendProps, 'children'>): UseAsyncReturn<BigNumber> => {
+  return useAsyncShowError(
     (
       account: string,
       recipientAddress: string,
@@ -118,6 +118,10 @@ const CalculateSendFee: FunctionComponent<SendProps> = (props) => {
       props.currency,
     ]
   )
+}
+
+const CalculateSendFee: FunctionComponent<SendProps> = (props) => {
+  const asyncResult = useSendFee(props)
   return props.children(asyncResult) as React.ReactElement
 }
 

From 00fd474893346c0d008b653bf24634f6d3ab4832 Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Fri, 16 Oct 2020 15:07:02 -0300
Subject: [PATCH 08/10] Fix test

---
 .../mobile/src/exchange/WithdrawCeloScreen.test.tsx   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/mobile/src/exchange/WithdrawCeloScreen.test.tsx b/packages/mobile/src/exchange/WithdrawCeloScreen.test.tsx
index 4dc22199a19..eaa594c3da2 100644
--- a/packages/mobile/src/exchange/WithdrawCeloScreen.test.tsx
+++ b/packages/mobile/src/exchange/WithdrawCeloScreen.test.tsx
@@ -1,3 +1,4 @@
+import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import 'react-native'
 import { fireEvent, render } from 'react-native-testing-library'
@@ -16,6 +17,14 @@ const store = createMockStore({
   goldToken: { balance: SAMPLE_BALANCE },
 })
 
+const mockResult = new BigNumber(10)
+jest.mock('src/fees/CalculateFee', () => ({
+  useSendFee: () => ({
+    result: mockResult,
+    loading: false,
+  }),
+}))
+
 describe('WithdrawCeloScreen', () => {
   it('renders correctly', () => {
     const tree = render(
@@ -55,7 +64,7 @@ describe('WithdrawCeloScreen', () => {
 
     expect(getByTestId('CeloAmount').props.value).toBe('')
     fireEvent.press(getByTestId('MaxAmount'))
-    expect(getByTestId('CeloAmount').props.value).toBe(SAMPLE_BALANCE)
+    expect(parseFloat(getByTestId('CeloAmount').props.value).toFixed(5)).toBe(SAMPLE_BALANCE)
     expect(getByTestId('WithdrawReviewButton').props.disabled).toBe(false)
   })
 

From 2d614f071caebf39baec95723a5089e39cb9c256 Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Tue, 20 Oct 2020 12:11:58 -0300
Subject: [PATCH 09/10] Remvoe unused style

---
 packages/mobile/src/components/CeloAmountInput.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mobile/src/components/CeloAmountInput.tsx b/packages/mobile/src/components/CeloAmountInput.tsx
index 8699476209a..fc5c1c64846 100644
--- a/packages/mobile/src/components/CeloAmountInput.tsx
+++ b/packages/mobile/src/components/CeloAmountInput.tsx
@@ -60,7 +60,7 @@ export default function CeloAmountInput({
           <Text style={[styles.maxAmount, { color }]}>{t('maxSymbol')}</Text>
         </TouchableOpacity>
       ) : (
-        <View style={styles.loadingContainer}>
+        <View>
           <ActivityIndicator size="small" color={colors.goldUI} />
         </View>
       )}
@@ -70,5 +70,4 @@ export default function CeloAmountInput({
 
 const styles = StyleSheet.create({
   maxAmount: fontStyles.small600,
-  loadingContainer: {},
 })

From cea98763a0242407f8cd9846baaca771fd2857ea Mon Sep 17 00:00:00 2001
From: Gonzalo Nardini <gnardini@clabs.co>
Date: Tue, 20 Oct 2020 13:03:17 -0300
Subject: [PATCH 10/10] Use string for amount to avoid useMemo

---
 packages/mobile/src/exchange/WithdrawCeloScreen.tsx | 6 +++---
 packages/mobile/src/fees/CalculateFee.tsx           | 6 +++---
 packages/mobile/src/send/SendConfirmation.tsx       | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/mobile/src/exchange/WithdrawCeloScreen.tsx b/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
index cba4f10f30f..5ebda4e57ab 100644
--- a/packages/mobile/src/exchange/WithdrawCeloScreen.tsx
+++ b/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, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -40,7 +40,7 @@ function WithdrawCeloScreen({ navigation }: Props) {
   const [celoInput, setCeloToTransfer] = useState('')
 
   const goldBalance = useSelector((state) => state.goldToken.balance)
-  const goldBalanceNumber = useMemo(() => new BigNumber(goldBalance || 0), [goldBalance])
+  const goldBalanceNumber = new BigNumber(goldBalance || 0)
   const { t } = useTranslation(Namespaces.exchangeFlow9)
 
   const celoToTransfer = new BigNumber(celoInput)
@@ -61,7 +61,7 @@ function WithdrawCeloScreen({ navigation }: Props) {
     account: RANDOM_ADDRESS,
     currency: CURRENCY_ENUM.GOLD,
     recipientAddress: RANDOM_ADDRESS,
-    amount: goldBalanceNumber,
+    amount: goldBalance || '0',
     includeDekFee: false,
   })
   const feeEstimate = result && divideByWei(result)
diff --git a/packages/mobile/src/fees/CalculateFee.tsx b/packages/mobile/src/fees/CalculateFee.tsx
index cccf9343646..807574217f0 100644
--- a/packages/mobile/src/fees/CalculateFee.tsx
+++ b/packages/mobile/src/fees/CalculateFee.tsx
@@ -31,7 +31,7 @@ interface SendProps extends CommonProps {
   feeType: FeeType.SEND
   account: string
   recipientAddress: string
-  amount: BigNumber
+  amount: string
   comment?: string
   includeDekFee: boolean
   currency?: CURRENCY_ENUM
@@ -94,7 +94,7 @@ export const useSendFee = (props: Omit<SendProps, 'children'>): UseAsyncReturn<B
     (
       account: string,
       recipientAddress: string,
-      amount: BigNumber,
+      amount: string,
       comment: string = MAX_PLACEHOLDER_COMMENT,
       includeDekFee: boolean = false,
       currency: CURRENCY_ENUM = CURRENCY_ENUM.DOLLAR
@@ -104,7 +104,7 @@ export const useSendFee = (props: Omit<SendProps, 'children'>): UseAsyncReturn<B
         currency,
         {
           recipientAddress,
-          amount: amount.valueOf(),
+          amount,
           comment,
         },
         includeDekFee
diff --git a/packages/mobile/src/send/SendConfirmation.tsx b/packages/mobile/src/send/SendConfirmation.tsx
index 5bb550aa744..9df13304255 100644
--- a/packages/mobile/src/send/SendConfirmation.tsx
+++ b/packages/mobile/src/send/SendConfirmation.tsx
@@ -467,7 +467,7 @@ export class SendConfirmation extends React.Component<Props, State> {
           feeType: FeeType.SEND,
           account,
           recipientAddress,
-          amount,
+          amount: amount.valueOf(),
           includeDekFee: !isDekRegistered,
         }
       : { feeType: FeeType.INVITE, account, amount }