fix: sponsored txs

src/app/features/fee-editor/bitcoin/bitcoin-fee-editor.provider.tsx

@@ -42,6 +42,7 @@ export function BitcoinFeeEditorProvider({
             feeType="fee-rate"
             getCustomFee={getCustomFee}
             isLoadingFees={isLoading}
+            isSponsored={false}
             marketData={marketData}
             onGoBack={onGoBack}
           >

src/app/features/fee-editor/components/selected-fee-item.tsx

@@ -1,5 +1,7 @@
+import { Flex, HStack, styled } from 'leather-styles/jsx';
+
 import type { MarketData } from '@leather.io/models';
-import { Approver, Pressable } from '@leather.io/ui';
+import { Approver, Avatar, Badge, Flag, PlaceholderIcon, Pressable } from '@leather.io/ui';
 
 import { CryptoAssetItemPlaceholder } from '@app/components/crypto-asset-item/crypto-asset-item-placeholder';
 import type { Fee, FeeType } from '@app/features/fee-editor/fee-editor.context';
@@ -10,22 +12,37 @@ import { FeeValueItemLayout } from './fee-value-item.layout';
 interface SelectedFeeItemProps {
   feeType: FeeType;
   isLoading: boolean;
+  isSponsored: boolean;
   marketData: MarketData;
   onEditFee(): void;
   selectedFee: Fee | null;
 }
 export function SelectedFeeItem({
   feeType,
   isLoading,
+  isSponsored,
   marketData,
   onEditFee,
   selectedFee,
 }: SelectedFeeItemProps) {
+  if (isSponsored)
+    return (
+      <Approver.Section>
+        <Flag img={<Avatar icon={<PlaceholderIcon />} />} my="space.02">
+          <HStack alignItems="center" justifyContent="space-between">
+            <styled.span textStyle="label.02">Sponsored fee</styled.span>
+            <Flex alignItems="center" gap="space.03">
+              <Badge label="FREE" variant="success" />
+            </Flex>
+          </HStack>
+        </Flag>
+      </Approver.Section>
+    );
+
   if (isLoading || !selectedFee)
     return (
       <Approver.Section>
-        <Approver.Subheader>Fee</Approver.Subheader>
-        <CryptoAssetItemPlaceholder my="0" />
+        <CryptoAssetItemPlaceholder />
       </Approver.Section>
     );
 

src/app/features/fee-editor/fee-editor.context.ts

@@ -21,6 +21,7 @@ interface FeeEditorContext {
   feeType: FeeType;
   loadedFee: Fee;
   isLoadingFees: boolean;
+  isSponsored: boolean;
   marketData: MarketData;
   fees: Fees;
   selectedFee: Fee;

src/app/features/fee-editor/fee-editor.provider.tsx

@@ -20,6 +20,7 @@ interface FeeEditorProviderProps extends HasChildren {
   feeType: FeeType;
   getCustomFee(rate: number): Fee;
   isLoadingFees: boolean;
+  isSponsored: boolean;
   marketData: MarketData;
   onGoBack(): void;
 }
@@ -30,6 +31,7 @@ export function FeeEditorProvider({
   feeType,
   getCustomFee,
   isLoadingFees,
+  isSponsored,
   marketData,
   onGoBack,
 }: FeeEditorProviderProps) {
@@ -45,6 +47,7 @@ export function FeeEditorProvider({
     <FeeEditorContext.Provider
       value={{
         isLoadingFees,
+        isSponsored,
         availableBalance,
         marketData,
         fees,

src/app/features/fee-editor/stacks/stacks-fee-editor.provider.tsx

@@ -1,4 +1,4 @@
-import type { StacksTransactionWire } from '@stacks/transactions';
+import { type StacksTransactionWire } from '@stacks/transactions';
 
 import type { MarketData, Money } from '@leather.io/models';
 
@@ -22,14 +22,15 @@ export function StacksFeeEditorProvider({
 }: StacksFeeEditorProviderProps) {
   return (
     <StacksFeesLoader unsignedTx={unsignedTx}>
-      {({ fees, isLoading, getCustomFee }) => {
+      {({ fees, isLoading, isSponsored, getCustomFee }) => {
         return (
           <FeeEditorProvider
             availableBalance={availableBalance}
             fees={fees}
             feeType="fee-value"
             getCustomFee={getCustomFee}
             isLoadingFees={isLoading}
+            isSponsored={isSponsored}
             marketData={marketData}
             onGoBack={onGoBack}
           >

src/app/features/fee-editor/stacks/stacks-fees-loader.tsx

@@ -1,7 +1,8 @@
-import type { StacksTransactionWire } from '@stacks/transactions';
+import { AuthType, type StacksTransactionWire } from '@stacks/transactions';
 
 import { createMoneyFromDecimal } from '@leather.io/utils';
 
+import { useCheckSbtcSponsorshipEligible } from '@app/query/sbtc/sponsored-transactions.hooks';
 import { useCalculateStacksTxFees } from '@app/query/stacks/fees/fees.hooks';
 
 import { type Fee, type Fees } from '../fee-editor.context';
@@ -10,16 +11,19 @@ import { useStacksFees } from './use-stacks-fees';
 interface StacksFees {
   fees: Fees;
   isLoading: boolean;
+  isSponsored: boolean;
   getCustomFee(value: number): Fee;
 }
 
 interface StacksFeesLoaderProps {
-  children({ fees, isLoading, getCustomFee }: StacksFees): React.JSX.Element;
+  children({ fees, isLoading, isSponsored, getCustomFee }: StacksFees): React.JSX.Element;
   unsignedTx: StacksTransactionWire;
 }
 export function StacksFeesLoader({ children, unsignedTx }: StacksFeesLoaderProps) {
-  const { data: stxFees, isLoading } = useCalculateStacksTxFees(unsignedTx);
+  const { data: stxFees, isLoading: isLoadingFees } = useCalculateStacksTxFees(unsignedTx);
   const fees = useStacksFees({ fees: stxFees });
+  const { isVerifying: isVerifyingSbtcSponsorship, result: sbtcSponsorshipEligibility } =
+    useCheckSbtcSponsorshipEligible({ baseTx: { transaction: unsignedTx }, stxFees });
 
   function getCustomFee(feeValue: number): Fee {
     return {
@@ -31,5 +35,11 @@ export function StacksFeesLoader({ children, unsignedTx }: StacksFeesLoaderProps
   }
 
   if (!fees) return null;
-  return children({ fees, isLoading, getCustomFee });
+  return children({
+    fees,
+    isLoading: isLoadingFees || isVerifyingSbtcSponsorship,
+    isSponsored:
+      sbtcSponsorshipEligibility?.isEligible || unsignedTx.auth.authType === AuthType.Sponsored,
+    getCustomFee,
+  });
 }

src/app/features/nonce-editor/nonce-item.tsx

@@ -11,11 +11,11 @@ import {
 
 import type { Nonce } from './nonce-editor.context';
 
-interface SelectedFeeItemProps {
+interface NonceItemProps {
   nonce: Nonce;
   onEditNonce(): void;
 }
-export function NonceItem({ nonce, onEditNonce }: SelectedFeeItemProps) {
+export function NonceItem({ nonce, onEditNonce }: NonceItemProps) {
   return (
     <Approver.Section>
       <Pressable onClick={onEditNonce} my="space.02">

src/app/features/rpc-transaction-request/stacks/use-sign-and-broadcast-stacks-transaction.ts

@@ -1,7 +1,11 @@
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import type { StacksTransactionWire, TxBroadcastResultRejected } from '@stacks/transactions';
+import {
+  AuthType,
+  type StacksTransactionWire,
+  type TxBroadcastResultRejected,
+} from '@stacks/transactions';
 
 import {
   RpcErrorCode,
@@ -50,6 +54,23 @@ export function useSignAndBroadcastStacksTransaction(method: RpcMethodNames) {
         throw new Error('Error signing stacks transaction');
       }
 
+      // If the transaction is sponsored, we do not broadcast it
+      const isSponsored = signedTx.auth?.authType === AuthType.Sponsored;
+      if (isSponsored) {
+        chrome.tabs.sendMessage(
+          tabId,
+          createRpcSuccessResponse(method, {
+            id: requestId,
+            result: {
+              txid: '',
+              transaction: signedTx.serialize(),
+            },
+          })
+        );
+        await delay(500);
+        closeWindow();
+      }
+
       function onError(error: Error | string, reason?: TxBroadcastResultRejected['reason']) {
         const message = isString(error) ? error : error.message;
         if (reason) toast.error(getErrorMessage(reason));

src/app/features/rpc-transaction-request/transaction-actions/transaction-actions-with-spend.tsx

@@ -15,11 +15,13 @@ import { useRpcTransactionRequest } from '../use-rpc-transaction-request';
 
 interface TransactionActionsWithSpendProps {
   isLoading: boolean;
+  isSponsored: boolean;
   txAmount: Money;
   onApprove(): Promise<void>;
 }
 export function TransactionActionsWithSpend({
   isLoading,
+  isSponsored,
   txAmount,
   onApprove,
 }: TransactionActionsWithSpendProps) {
@@ -33,7 +35,8 @@ export function TransactionActionsWithSpend({
   }, [marketData, selectedFee?.txFee, txAmount]);
 
   // TODO LEA-2537: Refactor error state
-  const isInsufficientBalance = availableBalance.amount.isLessThan(totalSpend.amount);
+  const isInsufficientBalance =
+    !isSponsored && availableBalance.amount.isLessThan(totalSpend.amount);
 
   return (
     <Approver.Actions

src/app/features/stacks-transaction-request/hooks/use-transaction-error.ts

@@ -16,11 +16,7 @@ import { useCheckSbtcSponsorshipEligible } from '@app/query/sbtc/sponsored-trans
 import { useStxCryptoAssetBalance } from '@app/query/stacks/balance/account-balance.hooks';
 import { useCalculateStacksTxFees } from '@app/query/stacks/fees/fees.hooks';
 import { useGetContractInterfaceQuery } from '@app/query/stacks/legacy-request-contract.query';
-import { useNextNonce } from '@app/query/stacks/nonce/account-nonces.hooks';
-import {
-  useCurrentStacksAccount,
-  useCurrentStacksAccountAddress,
-} from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useTransactionRequestState } from '@app/store/transactions/requests.hooks';
 import { useUnsignedStacksTransactionBaseState } from '@app/store/transactions/transaction.hooks';
 
@@ -39,11 +35,9 @@ export function useTransactionError() {
   const availableUnlockedBalance = filteredBalanceQuery.data?.unlockedBalance;
 
   const unsignedTx = useUnsignedStacksTransactionBaseState();
-  const stxAddress = useCurrentStacksAccountAddress();
   const { data: stxFees } = useCalculateStacksTxFees(unsignedTx.transaction);
-  const { data: nextNonce } = useNextNonce(stxAddress);
   const { isVerifying: isVerifyingSbtcEligibilty, result: sbtcSponsorshipEligibility } =
-    useCheckSbtcSponsorshipEligible(unsignedTx, nextNonce, stxFees);
+    useCheckSbtcSponsorshipEligible({ baseTx: unsignedTx, stxFees });
 
   return useMemo<TransactionErrorReason | void>(() => {
     if (!origin) return TransactionErrorReason.ExpiredRequest;

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

@@ -78,6 +78,7 @@ export function RpcSendTransfer() {
           <FeeEditor.Trigger
             feeType="fee-rate"
             isLoading={isLoadingFees}
+            isSponsored={false}
             marketData={marketData}
             onEditFee={onUserActivatesFeeEditor}
             selectedFee={selectedFee}

src/app/pages/rpc-stx-call-contract/rpc-stx-call-contract.tsx

@@ -28,8 +28,14 @@ import {
 
 export function RpcStxCallContract() {
   const { isLoadingBalance, network, publicKey } = useStacksRpcTransactionRequestContext();
-  const { availableBalance, isLoadingFees, marketData, onUserActivatesFeeEditor, selectedFee } =
-    useFeeEditorContext();
+  const {
+    availableBalance,
+    isLoadingFees,
+    isSponsored,
+    marketData,
+    onUserActivatesFeeEditor,
+    selectedFee,
+  } = useFeeEditorContext();
   const { nonce, onUserActivatesNonceEditor } = useNonceEditorContext();
   const signAndBroadcastTransaction = useSignAndBroadcastStacksTransaction(stxCallContract.method);
   const convertToFiatAmount = useConvertCryptoCurrencyToFiatAmount('STX');
@@ -38,12 +44,12 @@ export function RpcStxCallContract() {
   const txOptionsForBroadcast = useMemo(
     () =>
       getUnsignedStacksContractCallOptions({
-        fee: selectedFee.txFee,
+        fee: isSponsored ? createMoney(0, 'STX') : selectedFee.txFee,
         network,
         nonce,
         publicKey,
       }),
-    [network, nonce, publicKey, selectedFee.txFee]
+    [isSponsored, network, nonce, publicKey, selectedFee.txFee]
   );
 
   async function onApproveTransaction() {
@@ -58,6 +64,7 @@ export function RpcStxCallContract() {
       actions={
         <TransactionActionsWithSpend
           isLoading={isLoadingBalance || isLoadingFees}
+          isSponsored={isSponsored}
           // TODO: Calculate total request
           txAmount={createMoney(0, 'STX')}
           onApprove={onApproveTransaction}
@@ -85,6 +92,7 @@ export function RpcStxCallContract() {
       <FeeEditor.Trigger
         feeType="fee-value"
         isLoading={isLoadingFees}
+        isSponsored={isSponsored}
         marketData={marketData}
         onEditFee={onUserActivatesFeeEditor}
         selectedFee={selectedFee}

src/app/pages/rpc-stx-deploy-contract/rpc-stx-deploy-contract.tsx

@@ -25,8 +25,14 @@ import { getUnsignedStacksDeployContractOptions } from './rpc-stx-deploy-contrac
 
 export function RpcStxDeployContract() {
   const { address, isLoadingBalance, network, publicKey } = useStacksRpcTransactionRequestContext();
-  const { availableBalance, isLoadingFees, marketData, onUserActivatesFeeEditor, selectedFee } =
-    useFeeEditorContext();
+  const {
+    availableBalance,
+    isLoadingFees,
+    isSponsored,
+    marketData,
+    onUserActivatesFeeEditor,
+    selectedFee,
+  } = useFeeEditorContext();
   const { nonce, onUserActivatesNonceEditor } = useNonceEditorContext();
   const convertToFiatAmount = useConvertCryptoCurrencyToFiatAmount('STX');
   const signAndBroadcastTransaction = useSignAndBroadcastStacksTransaction(
@@ -46,6 +52,7 @@ export function RpcStxDeployContract() {
 
   async function onApproveTransaction() {
     const unsignedTx = await generateStacksUnsignedTransaction(txOptionsForBroadcast);
+    if (isSponsored) unsignedTx.setFee(0);
     await signAndBroadcastTransaction(unsignedTx);
   }
 
@@ -57,6 +64,7 @@ export function RpcStxDeployContract() {
       actions={
         <TransactionActionsWithSpend
           isLoading={isLoadingBalance || isLoadingFees}
+          isSponsored={isSponsored}
           txAmount={createMoneyFromDecimal(0, 'STX')}
           onApprove={onApproveTransaction}
         />
@@ -82,6 +90,7 @@ export function RpcStxDeployContract() {
       <FeeEditor.Trigger
         feeType="fee-value"
         isLoading={isLoadingFees}
+        isSponsored={isSponsored}
         marketData={marketData}
         onEditFee={onUserActivatesFeeEditor}
         selectedFee={selectedFee}