refactor: remove references of broadcastRawTransaction, use only broadcastTransaction

src/app/components/fees-row/fees-row.tsx

@@ -63,14 +63,17 @@ export function FeesRow({
   }, [feeHelper, defaultFeeValue, feeTypeHelper]);
 
   useEffect(() => {
+    if (isSponsored) {
+      void feeHelper.setValue(0);
+      return;
+    }
+
     if (!defaultFeeValue && hasFeeEstimates && !feeField.value && !isCustom) {
       void feeHelper.setValue(
         convertAmountToBaseUnit(fees.estimates[FeeTypes.Middle].fee).toString()
       );
       void feeTypeHelper.setValue(FeeTypes[FeeTypes.Middle]);
-    }
-    if (isSponsored) {
-      void feeHelper.setValue(0);
+      return;
     }
   }, [
     defaultFeeValue,

src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx

@@ -2,22 +2,33 @@ import { useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
-import { StacksTransaction } from '@stacks/transactions';
+import { AuthType, StacksTransaction } from '@stacks/transactions';
 
+import { finalizeTxSignature } from '@shared/actions/finalize-tx-signature';
 import { logger } from '@shared/logger';
 import { CryptoCurrencies } from '@shared/models/currencies.model';
 import { RouteUrls } from '@shared/route-urls';
 import { isError, isString } from '@shared/utils';
 
+import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-search-params';
 import { LoadingKeys } from '@app/common/hooks/use-loading';
 import { useSubmitTransactionCallback } from '@app/common/hooks/use-submit-stx-transaction';
+import { stacksTransactionToHex } from '@app/common/transactions/stacks/transaction.utils';
+import { delay } from '@app/common/utils';
+import { useTransactionRequest } from '@app/store/transactions/requests.hooks';
 import { useSignStacksTransaction } from '@app/store/transactions/transaction.hooks';
 
 import { useStacksTransactionSummary } from './use-stacks-transaction-summary';
 
+async function simulateShortDelayToAvoidUndefinedTabId() {
+  await delay(1000);
+}
+
 export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?: number) {
   const signStacksTransaction = useSignStacksTransaction();
   const [isBroadcasting, setIsBroadcasting] = useState(false);
+  const { tabId } = useDefaultRequestParams();
+  const requestToken = useTransactionRequest();
   const { formSentSummaryTxState } = useStacksTransactionSummary(token);
   const navigate = useNavigate();
 
@@ -26,14 +37,26 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
   });
 
   return useMemo(() => {
-    function handlePreviewSuccess(txId: string, signedTx: StacksTransaction) {
-      navigate(
-        RouteUrls.SentStxTxSummary.replace(':symbol', token.toLowerCase()).replace(
-          ':txId',
-          `${txId}`
-        ),
-        formSentSummaryTxState(txId, signedTx, decimals)
-      );
+    function handlePreviewSuccess(signedTx: StacksTransaction, txId?: string) {
+      if (requestToken && tabId) {
+        finalizeTxSignature({
+          requestPayload: requestToken,
+          tabId,
+          data: {
+            txRaw: stacksTransactionToHex(signedTx),
+            txId,
+          },
+        });
+      }
+      if (txId) {
+        navigate(
+          RouteUrls.SentStxTxSummary.replace(':symbol', token.toLowerCase()).replace(
+            ':txId',
+            `${txId}`
+          ),
+          formSentSummaryTxState(txId, signedTx, decimals)
+        );
+      }
     }
 
     async function broadcastTransactionAction(signedTx: StacksTransaction) {
@@ -44,16 +67,22 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
       }
       try {
         setIsBroadcasting(true);
-        await broadcastTransactionFn({
-          onError(e: Error | string) {
-            const message = isString(e) ? e : e.message;
-            navigate(RouteUrls.TransactionBroadcastError, { state: { message } });
-          },
-          onSuccess(txId) {
-            handlePreviewSuccess(txId, signedTx);
-          },
-          replaceByFee: false,
-        })(signedTx);
+        const isSponsored = signedTx.auth?.authType === AuthType.Sponsored;
+        if (isSponsored) {
+          await simulateShortDelayToAvoidUndefinedTabId();
+          handlePreviewSuccess(signedTx);
+        } else {
+          await broadcastTransactionFn({
+            onError(e: Error | string) {
+              const message = isString(e) ? e : e.message;
+              navigate(RouteUrls.TransactionBroadcastError, { state: { message } });
+            },
+            onSuccess(txId) {
+              handlePreviewSuccess(signedTx, txId);
+            },
+            replaceByFee: false,
+          })(signedTx);
+        }
       } catch (e) {
         navigate(RouteUrls.TransactionBroadcastError, {
           state: { message: isError(e) ? e.message : 'Unknown error' },
@@ -67,6 +96,7 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
       try {
         if (!unsignedTx) return;
         const signedTx = await signStacksTransaction(unsignedTx);
+        // TODO: Maybe better error handling here?
         if (!signedTx) return;
         await broadcastTransactionAction(signedTx);
       } catch (e) {}
@@ -84,5 +114,7 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
     token,
     formSentSummaryTxState,
     decimals,
+    requestToken,
+    tabId,
   ]);
 }

src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx

@@ -1,7 +1,7 @@
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { StacksTransaction } from '@stacks/transactions';
-import { Formik } from 'formik';
+import { Formik, FormikHelpers } from 'formik';
 import { Flex } from 'leather-styles/jsx';
 import * as yup from 'yup';
 
@@ -43,7 +43,7 @@ interface StacksTransactionSignerProps {
   disableNonceSelection?: boolean;
   isMultisig: boolean;
   onCancel(): void;
-  onSignStacksTransaction(fee: number, nonce: number): void;
+  onSignStacksTransaction(fee: number, nonce: number): Promise<void>;
 }
 export function StacksTransactionSigner({
   stacksTransaction,
@@ -66,9 +66,14 @@ export function StacksTransactionSigner({
     void analytics.track('view_transaction_signing'), [analytics];
   });
 
-  const onSubmit = async (values: StacksTransactionFormValues) => {
-    onSignStacksTransaction(stxToMicroStx(values.fee).toNumber(), Number(values.nonce));
-  };
+  async function onSubmit(
+    values: StacksTransactionFormValues,
+    formikHelpers: FormikHelpers<StacksTransactionFormValues>
+  ) {
+    formikHelpers.setSubmitting(true);
+    await onSignStacksTransaction(stxToMicroStx(values.fee).toNumber(), Number(values.nonce));
+    formikHelpers.setSubmitting(false);
+  }
 
   if (!transactionRequest) return null;
 

src/app/features/stacks-transaction-request/submit-action.tsx

@@ -6,14 +6,13 @@ import { StacksTransactionFormValues } from '@shared/models/form.model';
 import { isEmpty } from '@shared/utils';
 
 import { useDrawers } from '@app/common/hooks/use-drawers';
-import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading';
 import { useTransactionError } from '@app/features/stacks-transaction-request/hooks/use-transaction-error';
 import { Button } from '@app/ui/components/button/button';
 
 export function SubmitAction() {
-  const { handleSubmit, values, validateForm } = useFormikContext<StacksTransactionFormValues>();
+  const { handleSubmit, values, validateForm, isSubmitting } =
+    useFormikContext<StacksTransactionFormValues>();
   const { isShowingHighFeeConfirmation, setIsShowingHighFeeConfirmation } = useDrawers();
-  const { isLoading } = useLoading(LoadingKeys.SUBMIT_TRANSACTION_REQUEST);
   const error = useTransactionError();
 
   const isDisabled = !!error || Number(values.fee) < 0;
@@ -29,7 +28,7 @@ export function SubmitAction() {
 
   return (
     <Button
-      aria-busy={isLoading}
+      aria-busy={isSubmitting}
       data-testid={TransactionRequestSelectors.BtnConfirmTransaction}
       disabled={isDisabled}
       fullWidth

src/app/pages/transaction-request/transaction-request.tsx

@@ -1,9 +1,8 @@
 import { memo } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 
-import { Formik } from 'formik';
+import { Formik, FormikHelpers } from 'formik';
 import { Flex } from 'leather-styles/jsx';
-import get from 'lodash.get';
 import * as yup from 'yup';
 
 import { HIGH_FEE_WARNING_LEARN_MORE_URL_STX } from '@shared/constants';
@@ -13,7 +12,6 @@ import { StacksTransactionFormValues } from '@shared/models/form.model';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
-import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading';
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { stxFeeValidator } from '@app/common/validation/forms/fee-validators';
@@ -25,6 +23,7 @@ import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer';
 import { ContractCallDetails } from '@app/features/stacks-transaction-request/contract-call-details/contract-call-details';
 import { ContractDeployDetails } from '@app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details';
 import { FeeForm } from '@app/features/stacks-transaction-request/fee-form';
+import { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction';
 import { MinimalErrorMessage } from '@app/features/stacks-transaction-request/minimal-error-message';
 import { PageTop } from '@app/features/stacks-transaction-request/page-top';
 import { PostConditionModeWarning } from '@app/features/stacks-transaction-request/post-condition-mode-warning';
@@ -38,56 +37,44 @@ import { useNextNonce } from '@app/query/stacks/nonce/account-nonces.hooks';
 import { useTransactionRequestState } from '@app/store/transactions/requests.hooks';
 import {
   useGenerateUnsignedStacksTransaction,
-  useSignStacksTransaction,
-  useStacksTransactionBroadcast,
   useUnsignedStacksTransactionBaseState,
 } from '@app/store/transactions/transaction.hooks';
 import { Link } from '@app/ui/components/link/link';
 
 function TransactionRequestBase() {
   const transactionRequest = useTransactionRequestState();
-  const { setIsLoading, setIsIdle } = useLoading(LoadingKeys.SUBMIT_TRANSACTION_REQUEST);
-  // const handleBroadcastTransaction = useSoftwareWalletTransactionRequestBroadcast();
   const unsignedTx = useUnsignedStacksTransactionBaseState();
   const { data: stxFees } = useCalculateStacksTxFees(unsignedTx.transaction);
   const analytics = useAnalytics();
   const generateUnsignedTx = useGenerateUnsignedStacksTransaction();
   const { data: stacksBalances } = useCurrentStacksAccountBalances();
   const { data: nextNonce } = useNextNonce();
   const navigate = useNavigate();
-  const signStacksTransaction = useSignStacksTransaction();
-  const txBroadcast = useStacksTransactionBroadcast();
+  const { stacksBroadcastTransaction } = useStacksBroadcastTransaction('STX');
 
   useRouteHeader(<PopupHeader />);
 
   useOnMount(() => void analytics.track('view_transaction_signing'));
 
-  const onSubmit = async (values: StacksTransactionFormValues) => {
+  async function onSubmit(
+    values: StacksTransactionFormValues,
+    formikHelpers: FormikHelpers<StacksTransactionFormValues>
+  ) {
+    formikHelpers.setSubmitting(true);
     const unsignedTx = await generateUnsignedTx(values);
 
     if (!unsignedTx)
       return logger.error('Failed to generate unsigned transaction in transaction-request');
 
-    const signedTx = await signStacksTransaction(unsignedTx);
-
-    if (!signedTx) return logger.error('Failed to sign transaction in transaction-request');
-
-    setIsLoading();
-
-    try {
-      await txBroadcast({ signedTx });
-      setIsIdle();
-    } catch (e) {
-      navigate(RouteUrls.TransactionBroadcastError, { state: { message: get(e, 'message') } });
-      return;
-    }
+    await stacksBroadcastTransaction(unsignedTx);
 
     void analytics.track('submit_fee_for_transaction', {
       calculation: stxFees?.calculation,
       fee: values.fee,
       type: values.feeType,
     });
-  };
+    formikHelpers.setSubmitting(false);
+  }
 
   if (!transactionRequest) return null;