Updating tiered fees to dynamically adjust recommended fee rates for replacement transactions so that we do not present fee rates that are lower than the initial fee rate.

Maphikza · Maphikza · commit cf154d419e0d · 2024-10-15T12:34:19.000+02:00
diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx
@@ -53,7 +53,7 @@ const SendForm: React.FC<SendFormProps> = ({ onSend }) => {
 
   // Debounced effect to calculate transaction size when the amount changes, with JWT
   useEffect(() => {
-   
+
     const debounceTimeout = setTimeout(() => {
       const fetchTransactionSize = async () => {
         if (isValidAddress(formData.address) && isDetailsOpen) {
@@ -185,7 +185,7 @@ const SendForm: React.FC<SendFormProps> = ({ onSend }) => {
         await login(); // Perform login if not authenticated
       }
 
-  
+
       // Step 2: Initiate the new transaction with the JWT token
       const response = await fetch('http://localhost:9003/transaction', {
         method: 'POST',
@@ -301,7 +301,13 @@ const SendForm: React.FC<SendFormProps> = ({ onSend }) => {
           />
           RBF Opt In
         </S.RBFWrapper>
-        <TieredFees inValidAmount={inValidAmount} handleFeeChange={handleFeeRateChange} txSize={txSize} />
+        <TieredFees
+          invalidAmount={inValidAmount} // Note: 'invalidAmount' property is now camelCase to match prop names
+          handleFeeChange={handleFeeRateChange}
+          transactionSize={txSize} // Pass the transaction size value
+          originalFeeRate={0} // Pass 0 or appropriate value for new transactions
+        />
+
       </S.TiersContainer>
       <BaseRow justify={'center'}>
         <S.SendFormButton
diff --git a/src/components/nft-dashboard/Balance/components/SendForm/components/TieredFees/TieredFees.tsx b/src/components/nft-dashboard/Balance/components/SendForm/components/TieredFees/TieredFees.tsx
@@ -1,8 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import * as S from './TieredFees.styles';
-import { useResponsive } from '@app/hooks/useResponsive';
-import { tiers } from '../../SendForm';
-import { set } from 'date-fns';
+import React, { useState, useEffect } from "react";
+import * as S from "./TieredFees.styles";
+import { useResponsive } from "@app/hooks/useResponsive";
 
 interface FeeRecommendation {
   fastestFee: number;
@@ -11,107 +9,140 @@ interface FeeRecommendation {
   economyFee: number;
   minimumFee: number;
 }
-type Fees = {
-  [key in tiers]: number;
-};
+
+type Tier = "low" | "med" | "high";
+
+interface Fees {
+  low: number;
+  med: number;
+  high: number;
+}
+
+
+// interface Fees {
+//   [key in Tier]: number;
+// }
+
 interface TieredFeesProps {
   handleFeeChange: (fee: number) => void;
-  inValidAmount: boolean;
-  txSize: number | null; // Transaction size passed down from SendForm
+  invalidAmount: boolean;
+  transactionSize: number | null; // Transaction size passed down from parent
+  originalFeeRate?: number; // Optional original fee rate (used for replacements)
 }
 
-const TieredFees: React.FC<TieredFeesProps> = ({ inValidAmount, handleFeeChange, txSize }) => {
+const DEFAULT_FEES: Fees = { low: 3, med: 4, high: 5 };
+
+const TieredFees: React.FC<TieredFeesProps> = ({
+  handleFeeChange,
+  invalidAmount,
+  transactionSize,
+  originalFeeRate = 0,
+}) => {
   const { isDesktop, isTablet } = useResponsive();
+  const [selectedTier, setSelectedTier] = useState<Tier>("low");
+  const [fees, setFees] = useState<Fees>(DEFAULT_FEES);
+  const [estimatedFee, setEstimatedFee] = useState<Fees>({ low: 0, med: 0, high: 0 });
   const [loadingRecommendation, setLoadingRecommendation] = useState(false);
-  const [fetchedrecommendation, setFetchedRecommendation] = useState(false);
-  const [fees, setFees] = useState<Fees>({ low: 0, med: 0, high: 0 });
-  const [selectedTier, setSelectedTier] = useState<tiers | null>('low');
-  const [estimatedFee, setEstimatedFee] = useState({ low: 0, med: 0, high: 0 });
+  const [fetchedRecommendation, setFetchedRecommendation] = useState(false);
+
+  // Adjust fees for replacement transactions if originalFeeRate > 0
+  const adjustFees = (fetchedFees: Fees) => {
+    if (originalFeeRate > 0) {
+      const adjustedFees = { ...fetchedFees };
+      adjustedFees.low = Math.max(originalFeeRate + 1, fetchedFees.low);
+      adjustedFees.med = Math.max(adjustedFees.low + 1, fetchedFees.med);
+      adjustedFees.high = Math.max(adjustedFees.med + 1, fetchedFees.high);
+      return adjustedFees;
+    }
+    return fetchedFees;
+  };
 
   useEffect(() => {
-    if (loadingRecommendation || fetchedrecommendation) return;
+    if (loadingRecommendation || fetchedRecommendation) return;
     const fetchFees = async () => {
       setLoadingRecommendation(true);
       try {
-        const response = await fetch('https://mempool.space/api/v1/fees/recommended');
+        const response = await fetch("https://mempool.space/api/v1/fees/recommended");
         const data: FeeRecommendation = await response.json();
-        setFees({
+        const fetchedFees: Fees = {
           low: data.economyFee,
           med: data.halfHourFee,
           high: data.fastestFee,
-        });
+        };
+        const adjustedFees = adjustFees(fetchedFees);
+        setFees(adjustedFees);
         setFetchedRecommendation(true);
       } catch (error) {
-        console.error('Failed to fetch fees:', error);
+        console.error("Failed to fetch fees:", error);
+        setFees(adjustFees(DEFAULT_FEES));
       }
       setLoadingRecommendation(false);
     };
-
     fetchFees();
-  }, []);
+  }, [originalFeeRate]);
 
   // Update estimated fees whenever the fees or transaction size change
   useEffect(() => {
-    if (txSize) {
+    if (transactionSize) {
       setEstimatedFee({
-        low: txSize * fees.low,
-        med: txSize * fees.med,
-        high: txSize * fees.high,
+        low: Math.ceil(transactionSize * fees.low),
+        med: Math.ceil(transactionSize * fees.med),
+        high: Math.ceil(transactionSize * fees.high),
       });
     }
-  }, [fees, txSize]);
+  }, [fees, transactionSize]);
 
-  const handleTierChange = (tier: any) => {
-    setSelectedTier(tier.id);
+  const handleTierChange = (tier: Tier) => {
+    setSelectedTier(tier);
   };
 
   useEffect(() => {
-    handleFeeChange(fees[selectedTier as tiers]);
-  }, [selectedTier, fees]);
+    handleFeeChange(fees[selectedTier]);
+  }, [selectedTier, fees, handleFeeChange]);
 
   return (
     <S.TiersWrapper $isMobile={!isDesktop && !isTablet}>
       <S.TierCard
         $isMobile={!isDesktop}
-        onClick={() => handleTierChange({ id: 'low' })}
-        className={`tier-hover ${selectedTier === 'low' ? 'selected' : ''} ${
-          selectedTier === 'low' && inValidAmount ? 'invalidAmount' : ''
+        onClick={() => handleTierChange("low")}
+        className={`tier-hover ${selectedTier === "low" ? "selected" : ""} ${
+          selectedTier === "low" && invalidAmount ? "invalidAmount" : ""
         } `}
       >
         <S.TierCardContent>
           {`Low`}
           <br />
           {`Priority`}
           <S.RateValueWrapper>
-          {`${fees.low}`} <br /> {`sat/vB`}
+            {`${fees.low}`} <br /> {`sat/vB`}
             <S.RateValue>{`${estimatedFee.low} Sats`}</S.RateValue> {/* Show estimated fee */}
           </S.RateValueWrapper>
         </S.TierCardContent>
       </S.TierCard>
 
       <S.TierCard
         $isMobile={!isDesktop}
-        onClick={() => handleTierChange({ id: 'med' })}
-        className={`tier-hover ${selectedTier === 'med' ? 'selected' : ''} ${
-          selectedTier === 'med' && inValidAmount ? 'invalidAmount' : ''
+        onClick={() => handleTierChange("med")}
+        className={`tier-hover ${selectedTier === "med" ? "selected" : ""} ${
+          selectedTier === "med" && invalidAmount ? "invalidAmount" : ""
         } `}
       >
         <S.TierCardContent>
           {`Medium`}
           <br />
           {`Priority`}
           <S.RateValueWrapper>
-          {`${fees.med}`} <br /> {`sat/vB`}
+            {`${fees.med}`} <br /> {`sat/vB`}
             <S.RateValue>{`${estimatedFee.med} Sats`}</S.RateValue> {/* Show estimated fee */}
           </S.RateValueWrapper>
         </S.TierCardContent>
       </S.TierCard>
 
       <S.TierCard
         $isMobile={!isDesktop}
-        onClick={() => handleTierChange({ id: 'high' })}
-        className={`tier-hover ${selectedTier === 'high' ? 'selected' : ''} ${
-          selectedTier === 'high' && inValidAmount ? 'invalidAmount' : ''
+        onClick={() => handleTierChange("high")}
+        className={`tier-hover ${selectedTier === "high" ? "selected" : ""} ${
+          selectedTier === "high" && invalidAmount ? "invalidAmount" : ""
         } `}
       >
         <S.TierCardContent>
@@ -130,119 +161,4 @@ const TieredFees: React.FC<TieredFeesProps> = ({ inValidAmount, handleFeeChange,
   );
 };
 
-export default TieredFees;
-
-// import React, { useEffect, useState } from 'react';
-// import * as S from './TieredFees.styles';
-// import { useResponsive } from '@app/hooks/useResponsive';
-// import { tiers } from '../../SendForm';
-
-// interface FeeRecommendation {
-//   fastestFee: number;
-//   halfHourFee: number;
-//   hourFee: number;
-//   economyFee: number;
-//   minimumFee: number;
-// }
-// type Fees = {
-//   [key in tiers]: number;
-// };
-// interface TieredFeesProps {
-//   // Define the props for your component here
-//   handleFeeChange: (fee: number) => void;
-//   inValidAmount: boolean;
-// }
-
-// const TieredFees: React.FC<TieredFeesProps> = ({ inValidAmount, handleFeeChange }) => {
-//   const { isDesktop, isTablet } = useResponsive();
-//   const [fees, setFees] = useState<Fees>({ low: 0, med: 0, high: 0 });
-//   const [selectedTier, setSelectedTier] = useState<tiers | null>('low');
-
-//   useEffect(() => {
-//     const fetchFees = async () => {
-//       try {
-//         const response = await fetch('https://mempool.space/api/v1/fees/recommended');
-//         const data: FeeRecommendation = await response.json();
-//         setFees({
-//           low: data.economyFee,
-//           med: data.halfHourFee,
-//           high: data.fastestFee,
-//         });
-//       } catch (error) {
-//         console.error('Failed to fetch fees:', error);
-//       }
-//     };
-
-//     fetchFees();
-//   }, []);
-//   const handleTierChange = (tier: any) => {
-//     console.log(tier);
-//     setSelectedTier(tier.id);
-//   };
-
-//   useEffect(() => {
-//     handleFeeChange(fees[selectedTier as tiers]);
-//   }, [selectedTier]);
-//   return (
-//     <S.TiersWrapper $isMobile={!isDesktop || !isTablet }>
-//       <S.TierCard
-//         $isMobile={!isDesktop}
-//         onClick={() => handleTierChange({ id: 'low', rate: fees.med })}
-//         className={`tier-hover ${selectedTier === 'low' ? 'selected' : ''} ${
-//           selectedTier === 'low' && inValidAmount ? 'invalidAmount' : ''
-//         } `}
-//       >
-//         <S.TierCardContent>
-//           {`Low`}
-//           <br />
-//           {`Priority`}
-//           <S.RateValueWrapper>
-//             <span>{`${fees.low} sat/vB`}</span>
-//             <S.RateValue>{`${fees.low} Sats`}</S.RateValue>
-//           </S.RateValueWrapper>
-//         </S.TierCardContent>
-//       </S.TierCard>
-
-//       <S.TierCard
-//         $isMobile={!isDesktop}
-//         onClick={() => handleTierChange({ id: 'med', rate: fees.med })}
-//         className={`tier-hover ${selectedTier === 'med' ? 'selected' : ''} ${
-//           selectedTier === 'med' && inValidAmount ? 'invalidAmount' : ''
-//         } `}
-//       >
-//         <S.TierCardContent>
-//           {`Medium`}
-//           <br />
-//           {`Priority`}
-//           <S.RateValueWrapper>
-//             <span>{`${fees.med} sat/vB`}</span>
-//             <S.RateValue>{`${fees.med} Sats`}</S.RateValue>
-//           </S.RateValueWrapper>
-//         </S.TierCardContent>
-//       </S.TierCard>
-
-//       <S.TierCard
-//         $isMobile={!isDesktop}
-//         onClick={() => handleTierChange({ id: 'high', rate: fees.high })}
-//         className={`tier-hover ${selectedTier === 'high' ? 'selected' : ''} ${
-//           selectedTier === 'high' && inValidAmount ? 'invalidAmount' : ''
-//         } `}
-//       >
-//         <S.TierCardContent>
-//           <S.TierCardAmount>
-//             {' '}
-//             {`High`}
-//             <br />
-//             {`Priority`}
-//           </S.TierCardAmount>
-//           <S.RateValueWrapper>
-//             <span>{`${fees.high} sat/vB`}</span>
-//             <S.RateValue>{`${fees.high} Sats`}</S.RateValue>
-//           </S.RateValueWrapper>
-//         </S.TierCardContent>
-//       </S.TierCard>
-//     </S.TiersWrapper>
-//   );
-// };
-
-// export default TieredFees;
+export default TieredFees;
diff --git a/src/components/nft-dashboard/unconfirmed-transactions/components/ReplaceTransaction/ReplaceTransaction.tsx b/src/components/nft-dashboard/unconfirmed-transactions/components/ReplaceTransaction/ReplaceTransaction.tsx
@@ -21,7 +21,7 @@ interface ReplaceTransactionProps {
 const ReplaceTransaction: React.FC<ReplaceTransactionProps> = ({ onCancel, onReplace, transaction }) => {
   const { isDesktop, isTablet } = useResponsive();
   const { balanceData, isLoading: isBalanceLoading } = useBalanceData(); // Fetch balance data using the hook
-  const { isAuthenticated, login, token} = useWalletAuth(); // Use wallet authentication
+  const { isAuthenticated, login, token } = useWalletAuth(); // Use wallet authentication
 
   const [isLoadingSize, setIsLoadingSize] = useState(false); //tx size fetching states
 
@@ -223,8 +223,8 @@ const ReplaceTransaction: React.FC<ReplaceTransactionProps> = ({ onCancel, onRep
           <S.FieldLabel>Transaction ID</S.FieldLabel>
           <S.ValueWrapper $isMobile={!isDesktop || !isTablet}>
             <S.FieldValue>{transaction.txid}
-               {"  "}
-               <ClipboardCopy textToCopy={transaction.txid} />
+              {"  "}
+              <ClipboardCopy textToCopy={transaction.txid} />
             </S.FieldValue>
           </S.ValueWrapper>
         </S.FieldDisplay>
@@ -242,7 +242,13 @@ const ReplaceTransaction: React.FC<ReplaceTransactionProps> = ({ onCancel, onRep
           />
           RBF Opt In
         </S.RBFWrapper> */}
-        <TieredFees inValidAmount={inValidAmount} handleFeeChange={handleFeeRateChange} txSize={txSize} />
+        <TieredFees
+          invalidAmount={inValidAmount} // Make sure to pass the correct boolean prop
+          handleFeeChange={handleFeeRateChange}
+          transactionSize={txSize} // Pass the estimated transaction size
+          originalFeeRate={transaction.feeRate} // Pass the original fee rate from the transaction to adjust the replacement fees
+        />
+
         <S.FieldDisplay>
           <S.FieldLabel>New Fee Rate</S.FieldLabel>
           <S.ValueWrapper $isMobile={!isDesktop || !isTablet}>
@@ -257,7 +263,7 @@ const ReplaceTransaction: React.FC<ReplaceTransactionProps> = ({ onCancel, onRep
                 }
               }}
               min={0} // Minimum value of 0 for the fee
-              step={0.25} // Optional: define the increment step for the fee input
+              step={1} // Optional: define the increment step for the fee input
             />
           </S.ValueWrapper>
         </S.FieldDisplay>
