[ENG-3563] fix: BTC fee infinite loader when sending ordinals

src/app/components/transactionSetting/editBtcFee.tsx

@@ -55,7 +55,7 @@ const InputContainer = styled.div<InputContainerProps>((props) => ({
 }));
 
 const InputField = styled.input((props) => ({
-  ...props.theme.body_m,
+  ...props.theme.typography.body_m,
   backgroundColor: 'transparent',
   color: props.theme.colors.white_0,
   border: 'transparent',
@@ -187,7 +187,7 @@ function EditBtcFee({
   const { ordinals } = useOrdinalsByAddress(btcAddress);
   const ordinalsUtxos = useMemo(() => ordinals?.map((ord) => ord.utxo), [ordinals]);
   const btcClient = useBtcClient();
-  const feeData = useBtcFees({
+  const { feeData, highFeeError, mediumFeeError } = useBtcFees({
     isRestoreFlow: !!isRestoreFlow,
     nonOrdinalUtxos,
     btcRecipients,
@@ -341,6 +341,7 @@ function EditBtcFee({
               setFeeMode('high');
             }}
             selected={feeMode === 'high'}
+            error={highFeeError}
           />
           <FeeItem
             priority="medium"
@@ -358,6 +359,7 @@ function EditBtcFee({
               setFeeMode('medium');
             }}
             selected={feeMode === 'medium'}
+            error={mediumFeeError}
           />
           <FeeItemContainer
             isSelected={feeMode === 'custom'}

src/app/components/transactionSetting/feeItem.tsx

@@ -1,4 +1,5 @@
 import { Bicycle, CarProfile, RocketLaunch } from '@phosphor-icons/react';
+import { ErrorCodes } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
 import { useTranslation } from 'react-i18next';
 import { MoonLoader } from 'react-spinners';
@@ -54,7 +55,6 @@ const StyledHeading = styled(StyledP)`
 `;
 
 const StyledSubText = styled(StyledP)`
-  color: ${(props) => props.theme.colors.white_200};
   margin-bottom: ${(props) => props.theme.space.xxs};
 `;
 
@@ -75,9 +75,19 @@ interface FeeItemProps {
   fiat: string | JSX.Element;
   selected: boolean;
   onClick?: () => void;
+  error?: string;
 }
 
-function FeeItem({ priority, time, feeRate, totalFee, fiat, selected, onClick }: FeeItemProps) {
+function FeeItem({
+  priority,
+  time,
+  feeRate,
+  totalFee,
+  fiat,
+  selected,
+  error,
+  onClick,
+}: FeeItemProps) {
   const { t } = useTranslation('translation');
   const getIcon = () => {
     switch (priority) {
@@ -105,25 +115,50 @@ function FeeItem({ priority, time, feeRate, totalFee, fiat, selected, onClick }:
     }
   };
 
+  const getErrorMessage = (btcError: string) => {
+    if (
+      Number(btcError) === ErrorCodes.InSufficientBalance ||
+      Number(btcError) === ErrorCodes.InSufficientBalanceWithTxFee
+    ) {
+      return t('SEND.ERRORS.INSUFFICIENT_BALANCE');
+    }
+    return btcError;
+  };
+
   return (
-    <FeeItemContainer onClick={onClick} isSelected={selected} disabled={!totalFee}>
+    <FeeItemContainer onClick={onClick} isSelected={selected} disabled={!totalFee || !!error}>
       <IconContainer>{getIcon()}</IconContainer>
       <TextsContainer>
         <ColumnsTexts>
           <StyledHeading typography="body_medium_m" color="white_0">
             {getLabel()}
           </StyledHeading>
-          <StyledSubText typography="body_medium_s">{time}</StyledSubText>
-          <StyledSubText typography="body_medium_s">{`${feeRate} Sats/ vByte`}</StyledSubText>
+          <StyledSubText typography="body_medium_s" color="white_200">
+            {time}
+          </StyledSubText>
+          <StyledSubText
+            typography="body_medium_s"
+            color="white_200"
+          >{`${feeRate} Sats/ vByte`}</StyledSubText>
         </ColumnsTexts>
-        {totalFee ? (
-          <EndColumnTexts>
+
+        <EndColumnTexts>
+          {totalFee && (
             <StyledHeading typography="body_medium_m" color="white_0">
               {`${totalFee} Sats`}
             </StyledHeading>
-            <StyledSubText typography="body_medium_s">{fiat}</StyledSubText>
-          </EndColumnTexts>
-        ) : (
+          )}
+          <StyledSubText typography="body_medium_s" color="white_200">
+            {fiat}
+          </StyledSubText>
+          {error && (
+            <StyledSubText typography="body_medium_s" color="danger_medium">
+              {getErrorMessage(error)}
+            </StyledSubText>
+          )}
+        </EndColumnTexts>
+
+        {!totalFee && !error && (
           <LoaderContainer>
             <MoonLoader color="white" size={20} />
           </LoaderContainer>

src/app/hooks/useBtcFees.ts

@@ -31,31 +31,35 @@ const useBtcFees = ({
   btcRecipients,
   type,
   ordinalTxUtxo,
-}: Params): FeeData => {
+}: Params): { feeData: FeeData; highFeeError?: string; mediumFeeError?: string } => {
   const [feeData, setFeeData] = useState<FeeData>({
     standardFeeRate: '',
     standardTotalFee: '',
     highFeeRate: '',
     highTotalFee: '',
   });
-  const { network, btcAddress, selectedAccount, ordinalsAddress } = useWalletSelector();
+  const [highFeeError, setHighFeeError] = useState<string>('');
+  const [standardFeeError, setStandardFeeError] = useState<string>('');
+  const { network, btcAddress, ordinalsAddress } = useWalletSelector();
   const btcClient = useBtcClient();
   const { ordinals } = useOrdinalsByAddress(btcAddress);
   const ordinalsUtxos = useMemo(() => ordinals?.map((ord) => ord.utxo), [ordinals]);
 
   useEffect(() => {
     async function fetchFees(mode: 'standard' | 'high') {
       try {
+        setStandardFeeError('');
+        setHighFeeError('');
         let feeInfo;
         if (isRestoreFlow) {
           feeInfo = await getBtcFeesForNonOrdinalBtcSend(
             btcAddress,
-            nonOrdinalUtxos!,
+            nonOrdinalUtxos || [],
             ordinalsAddress,
             network.type,
             mode,
           );
-        } else if (btcRecipients && selectedAccount) {
+        } else if (type === 'BTC' && btcRecipients) {
           feeInfo = await getBtcFees(btcRecipients, btcAddress, btcClient, network.type, mode);
         } else if (type === 'Ordinals' && btcRecipients && ordinalTxUtxo) {
           feeInfo = await getBtcFeesForOrdinalSend(
@@ -68,12 +72,13 @@ const useBtcFees = ({
             mode,
           );
         }
-
         return {
           fee: feeInfo?.fee.toString() || '',
           feeRate: feeInfo?.selectedFeeRate.toString() || '',
         };
-      } catch (error) {
+      } catch (error: any) {
+        if (mode === 'standard') setStandardFeeError(error.toString());
+        else if (mode === 'high') setHighFeeError(error.toString());
         return { fee: '', feeRate: '' };
       }
     }
@@ -102,10 +107,8 @@ const useBtcFees = ({
     network,
     ordinalsUtxos,
     ordinalsAddress,
-    selectedAccount,
   ]);
-
-  return feeData;
+  return { feeData, highFeeError, mediumFeeError: standardFeeError };
 };
 
 export default useBtcFees;