feature/BEV-2131 Will now select medium fee rate or blockbook recommended fee when sending bitcoin. (#879)

Author: Freshenext

src/ux/requestsModal/BitcoinMiningFeeContainer.tsx

@@ -6,18 +6,29 @@ import { selectBitcoin } from 'store/slices/settingsSlice'
 import { Typography } from 'src/components'
 import { sharedStyles } from 'shared/styles'
 
-export const BitcoinMiningFeeContainer = () => {
+export interface FeeRecord {
+  feeName: string
+  feeRate: string
+}
+
+interface BitcoinMiningFeeContainerProps {
+  onFeeRatesLoaded?: (rates: FeeRecord[]) => void
+}
+
+export const BitcoinMiningFeeContainer = ({
+  onFeeRatesLoaded,
+}: BitcoinMiningFeeContainerProps) => {
   const bitcoinCore = useAppSelector(selectBitcoin)
-  const [suggestedBitcoinFees, setSuggestedBitcoinFees] = useState<
-    { feeName: string; feeRate: string }[]
-  >([])
+  const [suggestedBitcoinFees, setSuggestedBitcoinFees] = useState<FeeRecord[]>(
+    [],
+  )
 
   useEffect(() => {
     // Fetch the bitcoin fees
     bitcoinCore?.networksArr[0].bips[0].fetcher
       .fetchBitcoinMiningFeeRates('cypher')
       .then(cypherResponse => {
-        setSuggestedBitcoinFees([
+        const suggestedBitcoinFeesData = [
           {
             feeName: 'low',
             feeRate: cypherResponse.low_fee_per_kb.toString(),
@@ -30,24 +41,29 @@ export const BitcoinMiningFeeContainer = () => {
             feeName: 'high',
             feeRate: cypherResponse.high_fee_per_kb.toString(),
           },
-        ])
+        ]
+        setSuggestedBitcoinFees(suggestedBitcoinFeesData)
+        onFeeRatesLoaded?.(suggestedBitcoinFeesData)
       })
       .catch(() => {
         // Fetch from blockbook if cypher fails
 
         bitcoinCore?.networksArr[0].bips[0].fetcher
           .fetchBitcoinMiningFeeRates('blockbook')
           .then(blockbookResponse => {
-            setSuggestedBitcoinFees([
+            const suggestedBitcoinFeesData = [
               {
                 feeName: 'low',
                 feeRate: convertBtcToSatoshi(
                   blockbookResponse.result,
                 ).toString(),
               },
-            ])
+            ]
+            setSuggestedBitcoinFees(suggestedBitcoinFeesData)
+            onFeeRatesLoaded?.(suggestedBitcoinFeesData)
           })
       })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bitcoinCore])
 
   return (

src/ux/requestsModal/ReviewBitcoinTransactionContainer.tsx

@@ -1,11 +1,10 @@
-import { useContext, useMemo, useState } from 'react'
+import { useContext, useMemo, useState, useCallback } from 'react'
 import {
   convertSatoshiToBtcHuman,
   SendBitcoinRequest,
 } from '@rsksmart/rif-wallet-bitcoin'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
-import { useCallback } from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FormProvider, useForm } from 'react-hook-form'
 
@@ -22,7 +21,10 @@ import { WalletContext } from 'shared/wallet'
 import { useAddress } from 'shared/hooks'
 import { formatTokenValues } from 'shared/utils'
 
-import { BitcoinMiningFeeContainer } from './BitcoinMiningFeeContainer'
+import {
+  BitcoinMiningFeeContainer,
+  FeeRecord,
+} from './BitcoinMiningFeeContainer'
 
 interface ReviewBitcoinTransactionContainerProps {
   request: SendBitcoinRequest
@@ -179,7 +181,32 @@ const MiningFeeInput = ({
     },
   })
 
-  const handleFeeChange = (text: string) => onChange(text)
+  const { setValue } = methods
+
+  const handleFeeChange = useCallback(
+    (text: string) => onChange(text),
+    [onChange],
+  )
+
+  const onFeeRatesLoaded = useCallback(
+    (feeRates: FeeRecord[]) => {
+      let newFee
+      // If length > 1 then it's fetching the fee from cypher
+      if (feeRates.length > 1) {
+        newFee = feeRates[1].feeRate
+      }
+      // If length === 1 then it's fetching the fee from blockbook
+      if (feeRates.length === 1) {
+        newFee = feeRates[0].feeRate
+      }
+
+      if (newFee) {
+        handleFeeChange(newFee)
+        setValue('miningFee', Number(newFee))
+      }
+    },
+    [handleFeeChange, setValue],
+  )
 
   return (
     <FormProvider {...methods}>
@@ -188,7 +215,7 @@ const MiningFeeInput = ({
         inputName="miningFee"
         onChangeText={handleFeeChange}
       />
-      <BitcoinMiningFeeContainer />
+      <BitcoinMiningFeeContainer onFeeRatesLoaded={onFeeRatesLoaded} />
     </FormProvider>
   )
 }