fix: fee value calc bug, ref #4742

src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx

@@ -3,6 +3,8 @@ import { useMemo } from 'react';
 import { useField } from 'formik';
 import { Flex, styled } from 'leather-styles/jsx';
 
+import { createMoney } from '@shared/models/money.model';
+
 import { satToBtc } from '@app/common/money/unit-conversion';
 
 import { useBitcoinCustomFee } from './hooks/use-bitcoin-custom-fee';
@@ -19,7 +21,11 @@ export function BitcoinCustomFeeFiat({
   recipient,
 }: BitcoinCustomFeeFiatProps) {
   const [field] = useField('feeRate');
-  const getCustomFeeValues = useBitcoinCustomFee({ amount, isSendingMax, recipient });
+  const getCustomFeeValues = useBitcoinCustomFee({
+    amount: createMoney(amount, 'BTC'),
+    isSendingMax,
+    recipient,
+  });
 
   const feeData = useMemo(() => {
     const { fee, fiatFeeValue } = getCustomFeeValues(Number(field.value));

src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx

@@ -5,6 +5,7 @@ import { Stack, styled } from 'leather-styles/jsx';
 import * as yup from 'yup';
 
 import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';
+import { createMoney } from '@shared/models/money.model';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { PreviewButton } from '@app/components/preview-button';
@@ -42,7 +43,11 @@ export function BitcoinCustomFee({
   maxCustomFeeRate,
 }: BitcoinCustomFeeProps) {
   const feeInputRef = useRef<HTMLInputElement | null>(null);
-  const getCustomFeeValues = useBitcoinCustomFee({ amount, isSendingMax, recipient });
+  const getCustomFeeValues = useBitcoinCustomFee({
+    amount: createMoney(amount, 'BTC'),
+    isSendingMax,
+    recipient,
+  });
 
   const onChooseCustomBtcFee = useCallback(
     async ({ feeRate }: { feeRate: string }) => {

src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { createMoney } from '@shared/models/money.model';
+import { Money, createMoney } from '@shared/models/money.model';
 
 import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money';
 import { i18nFormatCurrency } from '@app/common/money/format-money';
@@ -15,7 +15,7 @@ import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/marke
 export const MAX_FEE_RATE_MULTIPLIER = 50;
 
 interface UseBitcoinCustomFeeArgs {
-  amount: number;
+  amount: Money;
   isSendingMax: boolean;
   recipient: string;
 }
@@ -28,7 +28,7 @@ export function useBitcoinCustomFee({ amount, isSendingMax, recipient }: UseBitc
     (feeRate: number) => {
       if (!feeRate || !utxos.length) return { fee: 0, fiatFeeValue: '' };
 
-      const satAmount = isSendingMax ? balance.amount.toNumber() : amount;
+      const satAmount = isSendingMax ? balance.amount.toNumber() : amount.amount.toNumber();
 
       const determineUtxosArgs = {
         amount: satAmount,
@@ -47,6 +47,6 @@ export function useBitcoinCustomFee({ amount, isSendingMax, recipient }: UseBitc
         )}`,
       };
     },
-    [utxos, isSendingMax, balance.amount, amount, recipient, btcMarketData]
+    [utxos, isSendingMax, balance.amount, amount.amount, recipient, btcMarketData]
   );
 }

src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts

@@ -1,11 +1,10 @@
 import { useMemo } from 'react';
 
 import { BtcFeeType, btcTxTimeMap } from '@shared/models/fees/bitcoin-fees.model';
-import { createMoney } from '@shared/models/money.model';
+import { Money, createMoney } from '@shared/models/money.model';
 
 import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money';
 import { formatMoneyPadded, i18nFormatCurrency } from '@app/common/money/format-money';
-import { btcToSat } from '@app/common/money/unit-conversion';
 import {
   DetermineUtxosForSpendArgs,
   determineUtxosForSpend,
@@ -29,7 +28,7 @@ function getFeeForList(
 }
 
 interface UseBitcoinFeesListArgs {
-  amount: number;
+  amount: Money;
   isSendingMax?: boolean;
   recipient: string;
   utxos: UtxoResponseItem[];
@@ -53,7 +52,7 @@ export function useBitcoinFeesList({
 
     if (!feeRates || !utxos.length) return [];
 
-    const satAmount = isSendingMax ? balance.amount.toNumber() : btcToSat(amount).toNumber();
+    const satAmount = isSendingMax ? balance.amount.toNumber() : amount.amount.toNumber();
 
     const determineUtxosDefaultArgs = {
       amount: satAmount,
@@ -106,7 +105,7 @@ export function useBitcoinFeesList({
         feeRate: feeRates.hourFee.toNumber(),
       },
     ];
-  }, [feeRates, utxos, isSendingMax, balance.amount, amount, recipient, btcMarketData]);
+  }, [feeRates, utxos, isSendingMax, balance.amount, amount.amount, recipient, btcMarketData]);
 
   return {
     feesList,

src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Box, Stack } from 'leather-styles/jsx';
+import { Box, FlexProps, Stack } from 'leather-styles/jsx';
 import { styled } from 'leather-styles/jsx';
 
 import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';
@@ -19,7 +19,7 @@ import { ChooseFeeSubtitle } from './components/choose-fee-subtitle';
 import { ChooseFeeTabs } from './components/choose-fee-tabs';
 import { InsufficientBalanceError } from './components/insufficient-balance-error';
 
-interface BitcoinChooseFeeProps {
+interface BitcoinChooseFeeProps extends FlexProps {
   amount: Money;
   feesList: React.JSX.Element;
   isLoading: boolean;
@@ -44,14 +44,15 @@ export function BitcoinChooseFee({
   recommendedFeeRate,
   showError,
   maxRecommendedFeeRate = 0,
+  ...rest
 }: BitcoinChooseFeeProps) {
   const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
   const btcBalance = useNativeSegwitBalance(nativeSegwitSigner.address);
   const hasAmount = amount.amount.isGreaterThan(0);
   const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate);
 
   return (
-    <BitcoinChooseFeeLayout isLoading={isLoading}>
+    <BitcoinChooseFeeLayout isLoading={isLoading} {...rest}>
       <Stack alignItems="center" width="100%">
         {hasAmount && (
           <styled.h3 textStyle="heading.03" color={showError ? 'error.label' : 'unset'}>

src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx

@@ -1,13 +1,17 @@
-import { Flex } from 'leather-styles/jsx';
+import { Flex, FlexProps } from 'leather-styles/jsx';
 
 import { LoadingSpinner } from '@app/components/loading-spinner';
 
-interface BitcoinChooseFeeLayoutProps {
+interface BitcoinChooseFeeLayoutProps extends FlexProps {
   children: React.JSX.Element;
   isLoading: boolean;
 }
 
-export function BitcoinChooseFeeLayout({ children, isLoading }: BitcoinChooseFeeLayoutProps) {
+export function BitcoinChooseFeeLayout({
+  children,
+  isLoading,
+  ...rest
+}: BitcoinChooseFeeLayoutProps) {
   if (isLoading) {
     return (
       <Flex py="108px" justifyContent="center" alignItems="center" width="100%">
@@ -24,6 +28,7 @@ export function BitcoinChooseFeeLayout({ children, isLoading }: BitcoinChooseFee
       alignItems="center"
       flex="1 0 0"
       alignSelf="stretch"
+      {...rest}
     >
       {children}
     </Flex>

src/app/features/increase-fee-drawer/hooks/use-btc-increase-fee.ts

@@ -5,11 +5,13 @@ import * as btc from '@scure/btc-signer';
 import BigNumber from 'bignumber.js';
 import * as yup from 'yup';
 
+import { createMoney } from '@shared/models/money.model';
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance';
+import { btcToSat } from '@app/common/money/unit-conversion';
 import { queryClient } from '@app/common/persistence';
 import {
   getBitcoinTxValue,
@@ -44,7 +46,7 @@ export function useBtcIncreaseFee(btcTx: BitcoinTx) {
   const { btcAvailableAssetBalance } = useBtcAssetBalance(currentBitcoinAddress);
   const sendingAmount = getBitcoinTxValue(currentBitcoinAddress, btcTx);
   const { feesList } = useBitcoinFeesList({
-    amount: Number(sendingAmount),
+    amount: createMoney(btcToSat(sendingAmount), 'BTC'),
     isSendingMax: false,
     recipient,
     utxos,

src/app/pages/rpc-send-transfer/rpc-send-transfer-choose-fee.tsx

@@ -37,7 +37,7 @@ export function RpcSendTransferChooseFee() {
   const generateTx = useGenerateUnsignedNativeSegwitSingleRecipientTx();
   const signTransaction = useSignBitcoinTx();
   const { feesList, isLoading } = useBitcoinFeesList({
-    amount: Number(amountAsMoney.amount),
+    amount: amountAsMoney,
     recipient: address,
     utxos,
   });
@@ -90,6 +90,7 @@ export function RpcSendTransferChooseFee() {
         recommendedFeeRate={recommendedFeeRate}
         showError={showInsufficientBalanceError}
         maxRecommendedFeeRate={feesList[0]?.feeRate}
+        px="0"
       />
     </>
   );

src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx

@@ -46,15 +46,14 @@ export function BrcChooseFee() {
   const signTx = useSignBitcoinTx();
   const { selectedFeeType, setSelectedFeeType } = useSendBitcoinAssetContextState();
   const { initiateTransfer } = useBrc20Transfers();
+  const amountAsMoney = createMoney(Number(amount), tick, 0);
   const { feesList, isLoading } = useBitcoinFeesList({
-    amount: Number(amount),
+    amount: amountAsMoney,
     recipient,
     utxos,
   });
   const recommendedFeeRate = feesList[1]?.feeRate.toString() || '';
 
-  const amountAsMoney = createMoney(Number(amount), tick, 0);
-
   const { showInsufficientBalanceError, onValidateBitcoinFeeSpend } =
     useValidateBitcoinSpend(amountAsMoney);
 

src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx

@@ -26,15 +26,16 @@ export function useBtcChooseFeeState() {
 export function BtcChooseFee() {
   const { isSendingMax, txValues, utxos } = useBtcChooseFeeState();
   const { selectedFeeType, setSelectedFeeType } = useSendBitcoinAssetContextState();
+  const { amountAsMoney, onGoBack, previewTransaction } = useBtcChooseFee();
+
   const { feesList, isLoading } = useBitcoinFeesList({
-    amount: Number(txValues.amount),
+    amount: amountAsMoney,
     isSendingMax,
     recipient: txValues.recipient,
     utxos,
   });
   const recommendedFeeRate = feesList[1]?.feeRate.toString() || '';
 
-  const { amountAsMoney, onGoBack, previewTransaction } = useBtcChooseFee();
   const { showInsufficientBalanceError, onValidateBitcoinAmountSpend } = useValidateBitcoinSpend(
     amountAsMoney,
     isSendingMax