Show error message if amount + fee is greater than balance in send-bitcoin-details screen (#315)

* useIbexFee hook is added to calculate fee in send bitcoin details screen

* updata send bitcoind details screen logic and use useIbexFee hook to calculate the fee

* update return type of fetchBreezFee method

Author: Nodirbek75

app/hooks/index.ts

@@ -4,3 +4,4 @@ export * from "./use-app-config"
 export * from "./useBreez"
 export * from "./useActivityIndicator"
 export * from "./use-display-currency"
+export * from "./useIbexFee"

app/hooks/useIbexFee.tsx

@@ -0,0 +1,152 @@
+import { useCallback } from "react"
+import { gql } from "@apollo/client"
+import { WalletAmount } from "@app/types/amounts"
+import crashlytics from "@react-native-firebase/crashlytics"
+import { GetFee } from "@app/screens/send-bitcoin-screen/payment-details"
+import {
+  WalletCurrency,
+  useLnInvoiceFeeProbeMutation,
+  useLnNoAmountInvoiceFeeProbeMutation,
+  useLnNoAmountUsdInvoiceFeeProbeMutation,
+  useLnUsdInvoiceFeeProbeMutation,
+  useOnChainTxFeeLazyQuery,
+  useOnChainUsdTxFeeAsBtcDenominatedLazyQuery,
+  useOnChainUsdTxFeeLazyQuery,
+} from "@app/graphql/generated"
+
+export type FeeType =
+  | {
+      status: "loading" | "error" | "unset"
+      amount?: undefined | null
+    }
+  | {
+      amount: WalletAmount<WalletCurrency>
+      status: "set"
+    }
+  | {
+      amount?: WalletAmount<WalletCurrency>
+      status: "error"
+    }
+
+gql`
+  mutation lnNoAmountInvoiceFeeProbe($input: LnNoAmountInvoiceFeeProbeInput!) {
+    lnNoAmountInvoiceFeeProbe(input: $input) {
+      errors {
+        message
+      }
+      amount
+    }
+  }
+
+  mutation lnInvoiceFeeProbe($input: LnInvoiceFeeProbeInput!) {
+    lnInvoiceFeeProbe(input: $input) {
+      errors {
+        message
+      }
+      amount
+    }
+  }
+
+  mutation lnUsdInvoiceFeeProbe($input: LnUsdInvoiceFeeProbeInput!) {
+    lnUsdInvoiceFeeProbe(input: $input) {
+      errors {
+        message
+      }
+      amount
+    }
+  }
+
+  mutation lnNoAmountUsdInvoiceFeeProbe($input: LnNoAmountUsdInvoiceFeeProbeInput!) {
+    lnNoAmountUsdInvoiceFeeProbe(input: $input) {
+      errors {
+        message
+      }
+      amount
+    }
+  }
+
+  query onChainTxFee(
+    $walletId: WalletId!
+    $address: OnChainAddress!
+    $amount: SatAmount!
+  ) {
+    onChainTxFee(walletId: $walletId, address: $address, amount: $amount) {
+      amount
+    }
+  }
+
+  query onChainUsdTxFee(
+    $walletId: WalletId!
+    $address: OnChainAddress!
+    $amount: CentAmount!
+  ) {
+    onChainUsdTxFee(walletId: $walletId, address: $address, amount: $amount) {
+      amount
+    }
+  }
+
+  query onChainUsdTxFeeAsBtcDenominated(
+    $walletId: WalletId!
+    $address: OnChainAddress!
+    $amount: SatAmount!
+  ) {
+    onChainUsdTxFeeAsBtcDenominated(
+      walletId: $walletId
+      address: $address
+      amount: $amount
+    ) {
+      amount
+    }
+  }
+`
+
+export const useIbexFee = <T extends WalletCurrency>() => {
+  const [lnInvoiceFeeProbe] = useLnInvoiceFeeProbeMutation()
+  const [lnNoAmountInvoiceFeeProbe] = useLnNoAmountInvoiceFeeProbeMutation()
+  const [lnUsdInvoiceFeeProbe] = useLnUsdInvoiceFeeProbeMutation()
+  const [lnNoAmountUsdInvoiceFeeProbe] = useLnNoAmountUsdInvoiceFeeProbeMutation()
+  const [onChainTxFee] = useOnChainTxFeeLazyQuery()
+  const [onChainUsdTxFee] = useOnChainUsdTxFeeLazyQuery()
+  const [onChainUsdTxFeeAsBtcDenominated] = useOnChainUsdTxFeeAsBtcDenominatedLazyQuery()
+
+  const fetchIbexFee = useCallback(
+    async (getFeeFn?: GetFee<T> | null) => {
+      if (!getFeeFn) {
+        return
+      }
+      try {
+        const feeResponse = await getFeeFn({
+          lnInvoiceFeeProbe,
+          lnNoAmountInvoiceFeeProbe,
+          lnUsdInvoiceFeeProbe,
+          lnNoAmountUsdInvoiceFeeProbe,
+          onChainTxFee,
+          onChainUsdTxFee,
+          onChainUsdTxFeeAsBtcDenominated,
+        })
+
+        if (feeResponse.errors?.length || !feeResponse.amount) {
+          return undefined
+        }
+
+        return feeResponse.amount
+      } catch (err) {
+        if (err instanceof Error) {
+          crashlytics().recordError(err)
+        }
+        return undefined
+      }
+    },
+    [
+      lnInvoiceFeeProbe,
+      lnNoAmountInvoiceFeeProbe,
+      lnUsdInvoiceFeeProbe,
+      lnNoAmountUsdInvoiceFeeProbe,
+      onChainTxFee,
+      onChainUsdTxFee,
+      onChainUsdTxFeeAsBtcDenominated,
+    ],
+  )
+
+  return fetchIbexFee
+}

app/screens/send-bitcoin-screen/send-bitcoin-details-screen.tsx

@@ -26,7 +26,7 @@ import { getUsdWallet } from "@app/graphql/wallets-utils"
 // hooks
 import { useIsAuthed } from "@app/graphql/is-authed-context"
 import { useLevel } from "@app/graphql/level-context"
-import { useActivityIndicator, useBreez, usePriceConversion } from "@app/hooks"
+import { useBreez, useIbexFee, usePriceConversion } from "@app/hooks"
 import { useDisplayCurrency } from "@app/hooks/use-display-currency"
 import { useI18nContext } from "@app/i18n/i18n-react"
 import { usePersistentStateContext } from "@app/store/persistent-state"
@@ -38,7 +38,7 @@ import { PaymentDetail } from "./payment-details/index.types"
 import { Satoshis } from "lnurl-pay/dist/types/types"
 
 // utils
-import { toBtcMoneyAmount, toUsdMoneyAmount } from "@app/types/amounts"
+import { DisplayCurrency, toBtcMoneyAmount, toUsdMoneyAmount } from "@app/types/amounts"
 import { isValidAmount } from "./payment-details"
 import { requestInvoice, utils } from "lnurl-pay"
 import { fetchBreezFee } from "@app/utils/breez-sdk-liquid"
@@ -58,8 +58,8 @@ const SendBitcoinDetailsScreen: React.FC<Props> = ({ route }) => {
   const { btcWallet } = useBreez()
   const { persistentState } = usePersistentStateContext()
   const { convertMoneyAmount: _convertMoneyAmount } = usePriceConversion("network-only")
-  const { zeroDisplayAmount, formatMoneyAmount } = useDisplayCurrency()
-  const { toggleActivityIndicator } = useActivityIndicator()
+  const { zeroDisplayAmount, formatDisplayAndWalletAmount } = useDisplayCurrency()
+  const getIbexFee = useIbexFee()
 
   const { paymentDestination, flashUserAddress } = route.params
 
@@ -132,24 +132,38 @@ const SendBitcoinDetailsScreen: React.FC<Props> = ({ route }) => {
     zeroDisplayAmount,
   ])
 
-  useEffect(() => {
-    if (paymentDetail?.sendingWalletDescriptor.currency === "BTC") {
-      fetchSendingFee()
-    }
-  }, [paymentDetail])
-
-  const fetchSendingFee = async () => {
-    if (paymentDetail) {
-      toggleActivityIndicator(true)
-      const { fee, err }: { fee: any; err: any } = await fetchBreezFee(
-        paymentDetail?.paymentType,
-        paymentDetail?.destination,
-        paymentDetail?.settlementAmount.amount,
-      )
-      toggleActivityIndicator(false)
-      if (fee === null && err) {
-        setAsyncErrorMessage(`${err?.message} (amount + fee)` || "")
+  const fetchSendingFee = async (pd: PaymentDetail<WalletCurrency>) => {
+    if (pd) {
+      if (pd?.sendingWalletDescriptor.currency === "BTC") {
+        const { fee, err }: { fee: any; err: any } = await fetchBreezFee(
+          pd?.paymentType,
+          pd?.destination,
+          pd?.settlementAmount.amount,
+        )
+        if (fee === null && err) {
+          setAsyncErrorMessage(`${err?.message} (amount + fee)` || "")
+          return false
+        }
+      } else {
+        const estimatedFee = await getIbexFee(pd.getFee)
+        if (
+          _convertMoneyAmount &&
+          estimatedFee &&
+          pd.settlementAmount.amount + estimatedFee?.amount > usdBalanceMoneyAmount.amount
+        ) {
+          const amount = formatDisplayAndWalletAmount({
+            displayAmount: _convertMoneyAmount(usdBalanceMoneyAmount, DisplayCurrency),
+            walletAmount: usdBalanceMoneyAmount,
+          })
+          setAsyncErrorMessage(
+            LL.SendBitcoinScreen.amountExceed({
+              balance: amount,
+            }) + "(amount + fee)",
+          )
+          return false
+        }
       }
+      return true
     }
   }
 
@@ -208,7 +222,9 @@ const SendBitcoinDetailsScreen: React.FC<Props> = ({ route }) => {
         }
       }
 
-      if (paymentDetailForConfirmation.sendPaymentMutation) {
+      const res = await fetchSendingFee(paymentDetailForConfirmation)
+
+      if (res && paymentDetailForConfirmation.sendPaymentMutation) {
         navigation.navigate("sendBitcoinConfirmation", {
           paymentDetail: paymentDetailForConfirmation,
         })

app/utils/breez-sdk-liquid/index.ts

@@ -161,20 +161,22 @@ export const fetchBreezFee = async (
         amount: { type: PayAmountVariant.RECEIVER, amountSat: receiverAmountSat },
       })
       return { fee: response.totalFeesSat, err: null }
+      return { fee: response.totalFeesSat, err: null }
     } else if (
       (paymentType === "intraledger" || paymentType === "lnurl") &&
       !!invoice &&
       !!receiverAmountSat
     ) {
       const input = await parse(invoice)
       if (input.type === InputTypeVariant.LN_URL_PAY) {
-        const prepareResponse = await prepareLnurlPay({
+        const response = await prepareLnurlPay({
           data: input.data,
           amountMsat: receiverAmountSat * 1000,
         })
-        return { fee: prepareResponse.feesSat, err: null }
+        return { fee: response.feesSat, err: null }
       }
       return { fee: null, err: "Wrong payment type" }
+      return { fee: null, err: "Wrong payment type" }
     } else {
       return { fee: null, err: "Wrong payment type" }
     }