fix: brc-20 send form bug

src/app/components/bitcoin-fees-list/bitcoin-fees-list.tsx

@@ -4,7 +4,6 @@ import { Stack } from '@stacks/ui';
 
 import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';
 
-import { LoadingSpinner } from '../loading-spinner';
 import { FeesListError } from './components/fees-list-error';
 import { FeesListItem } from './components/fees-list-item';
 
@@ -26,7 +25,6 @@ export interface OnChooseFeeArgs {
 
 interface BitcoinFeesListProps {
   feesList: FeesListItem[];
-  isLoading: boolean;
   onChooseFee({ feeRate, feeValue, time }: OnChooseFeeArgs): Promise<void>;
   onSetSelectedFeeType(value: BtcFeeType): void;
   onValidateBitcoinSpend(value: number): boolean;
@@ -34,7 +32,6 @@ interface BitcoinFeesListProps {
 }
 export function BitcoinFeesList({
   feesList,
-  isLoading,
   onChooseFee,
   onSetSelectedFeeType,
   onValidateBitcoinSpend,
@@ -50,8 +47,6 @@ export function BitcoinFeesList({
     [onChooseFee, onSetSelectedFeeType, onValidateBitcoinSpend]
   );
 
-  if (isLoading) return <LoadingSpinner />;
-
   // TODO: This should be changed when custom fees are implemented. We can simply
   // force custom fee setting when api requests fail and we can't calculate fees.
   if (!feesList.length) return <FeesListError />;

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

@@ -24,7 +24,8 @@ interface BitcoinChooseFeeProps {
   onChooseFee({ feeRate, feeValue, time }: OnChooseFeeArgs): Promise<void>;
   onValidateBitcoinSpend(value: number): boolean;
   recipient: string;
-  recommendedFeeRate: number;
+  recommendedFeeRate: string;
+  isLoading: boolean;
 }
 export function BitcoinChooseFee({
   amount,
@@ -34,15 +35,16 @@ export function BitcoinChooseFee({
   onChooseFee,
   recipient,
   onValidateBitcoinSpend,
+  isLoading,
   recommendedFeeRate,
 }: BitcoinChooseFeeProps) {
   const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const btcBalance = useNativeSegwitBalance(currentAccountBtcAddress);
   const hasAmount = amount.amount.isGreaterThan(0);
-  const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate.toString());
+  const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate);
 
   return (
-    <BitcoinChooseFeeLayout>
+    <BitcoinChooseFeeLayout isLoading={isLoading}>
       <Stack alignItems="center" spacing="base" width="100%">
         {hasAmount ? (
           <Text color={showError ? color('feedback-error') : 'unset'} fontSize={6} fontWeight={500}>

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

@@ -1,8 +1,20 @@
 import { Flex } from '@stacks/ui';
 
-import { HasChildren } from '@app/common/has-children';
+import { LoadingSpinner } from '@app/components/loading-spinner';
 
-export function BitcoinChooseFeeLayout({ children }: HasChildren) {
+interface BitcoinChooseFeeLayoutProps {
+  children: JSX.Element;
+  isLoading: boolean;
+}
+
+export function BitcoinChooseFeeLayout({ children, isLoading }: BitcoinChooseFeeLayoutProps) {
+  if (isLoading) {
+    return (
+      <Flex py="108px" justifyContent="center" alignItems="center" width="100%">
+        <LoadingSpinner />
+      </Flex>
+    );
+  }
   return (
     <Flex alignItems="center" p="extra-loose" spacing="base" width="100%">
       {children}

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

@@ -42,6 +42,8 @@ export function RpcSendTransferChooseFee() {
     amount: Number(amountAsMoney.amount),
     recipient: address,
   });
+  const recommendedFeeRate = feesList[1]?.feeRate.toString() || '';
+
   const { showInsufficientBalanceError, onValidateBitcoinFeeSpend } = useValidateBitcoinSpend();
 
   async function previewTransfer({ feeRate, feeValue, time, isCustomFee }: OnChooseFeeArgs) {
@@ -70,17 +72,17 @@ export function RpcSendTransferChooseFee() {
   return (
     <BitcoinChooseFee
       amount={amountAsMoney}
+      isLoading={isLoading}
       feesList={
         <BitcoinFeesList
           feesList={feesList}
-          isLoading={isLoading}
           onChooseFee={previewTransfer}
           onValidateBitcoinSpend={onValidateBitcoinFeeSpend}
           onSetSelectedFeeType={(value: BtcFeeType) => setSelectedFeeType(value)}
           selectedFeeType={selectedFeeType}
         />
       }
-      recommendedFeeRate={feesList[1].feeRate}
+      recommendedFeeRate={recommendedFeeRate}
       onValidateBitcoinSpend={onValidateBitcoinFeeSpend}
       recipient={address}
       onChooseFee={previewTransfer}

src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx

@@ -22,6 +22,8 @@ export function SendInscriptionChooseFee() {
   const navigate = useNavigate();
   const { recipient, selectedFeeType, setSelectedFeeType, utxo } = useSendInscriptionState();
   const { feesList, isLoading } = useSendInscriptionFeesList({ recipient, utxo });
+  const recommendedFeeRate = feesList[1]?.feeRate.toString() || '';
+
   const { reviewTransaction } = useSendInscriptionForm();
   const { showInsufficientBalanceError, onValidateBitcoinFeeSpend } = useValidateBitcoinSpend();
 
@@ -40,17 +42,17 @@ export function SendInscriptionChooseFee() {
     <BaseDrawer title="Choose fee" isShowing enableGoBack onClose={() => navigate(-1)}>
       <BitcoinChooseFee
         amount={createMoney(0, 'BTC')}
+        isLoading={isLoading}
         feesList={
           <BitcoinFeesList
             feesList={feesList}
-            isLoading={isLoading}
             onChooseFee={previewTransaction}
             onValidateBitcoinSpend={onValidateBitcoinFeeSpend}
             onSetSelectedFeeType={(value: BtcFeeType) => setSelectedFeeType(value)}
             selectedFeeType={selectedFeeType}
           />
         }
-        recommendedFeeRate={feesList[1].feeRate}
+        recommendedFeeRate={recommendedFeeRate}
         onChooseFee={previewTransaction}
         recipient={recipient}
         onValidateBitcoinSpend={onValidateBitcoinFeeSpend}

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

@@ -45,6 +45,8 @@ export function BrcChooseFee() {
     amount: Number(amount),
     recipient,
   });
+  const recommendedFeeRate = feesList[1]?.feeRate.toString() || '';
+
   const amountAsMoney = createMoney(Number(amount), tick, 0);
 
   const { showInsufficientBalanceError, onValidateBitcoinFeeSpend } =
@@ -121,17 +123,17 @@ export function BrcChooseFee() {
   ) : (
     <BitcoinChooseFee
       amount={amountAsMoney}
+      isLoading={isLoading}
       feesList={
         <BitcoinFeesList
           feesList={feesList}
-          isLoading={isLoading}
           onChooseFee={previewTransaction}
           onSetSelectedFeeType={(value: BtcFeeType) => setSelectedFeeType(value)}
           onValidateBitcoinSpend={onValidateBitcoinFeeSpend}
           selectedFeeType={selectedFeeType}
         />
       }
-      recommendedFeeRate={feesList[1].feeRate}
+      recommendedFeeRate={recommendedFeeRate}
       onChooseFee={previewTransaction}
       recipient={recipient}
       onValidateBitcoinSpend={onValidateBitcoinFeeSpend}

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

@@ -31,6 +31,8 @@ export function BtcChooseFee() {
     isSendingMax,
     recipient: txValues.recipient,
   });
+  const recommendedFeeRate = feesList[1]?.feeRate.toString() || '';
+
   const { amountAsMoney, onGoBack, previewTransaction } = useBtcChooseFee();
   const { showInsufficientBalanceError, onValidateBitcoinAmountSpend } =
     useValidateBitcoinSpend(amountAsMoney);
@@ -40,17 +42,17 @@ export function BtcChooseFee() {
   return (
     <BitcoinChooseFee
       amount={amountAsMoney}
+      isLoading={isLoading}
       feesList={
         <BitcoinFeesList
           feesList={feesList}
-          isLoading={isLoading}
           onChooseFee={previewTransaction}
           onSetSelectedFeeType={(value: BtcFeeType) => setSelectedFeeType(value)}
           onValidateBitcoinSpend={onValidateBitcoinAmountSpend}
           selectedFeeType={selectedFeeType}
         />
       }
-      recommendedFeeRate={feesList[1].feeRate}
+      recommendedFeeRate={recommendedFeeRate}
       onValidateBitcoinSpend={onValidateBitcoinAmountSpend}
       onChooseFee={previewTransaction}
       recipient={txValues.recipient}