Display better fee breakdown for soroban transactions

__tests__/components/TransactionSettingsBottomSheet.test.tsx

@@ -4,6 +4,7 @@ import TransactionSettingsBottomSheet from "components/TransactionSettingsBottom
 import { TransactionContext, NETWORKS } from "config/constants";
 import { PricedBalance, TokenTypeWithCustomToken } from "config/types";
 import { useAuthenticationStore } from "ducks/auth";
+import { useTransactionBuilderStore } from "ducks/transactionBuilder";
 import { useTransactionSettingsStore } from "ducks/transactionSettings";
 import { isContractId, isSorobanTransaction } from "helpers/soroban";
 import { isMuxedAccount, isValidStellarAddress } from "helpers/stellar";
@@ -13,6 +14,11 @@ import React from "react";
 import { checkContractSupportsMuxed } from "services/backend";
 
 jest.mock("ducks/transactionSettings");
+jest.mock("ducks/transactionBuilder", () => ({
+  useTransactionBuilderStore: jest.fn(() => ({
+    isSoroban: false,
+  })),
+}));
 jest.mock("ducks/auth", () => ({
   useAuthenticationStore: jest.fn(),
 }));
@@ -97,6 +103,10 @@ const mockUseTransactionSettingsStore =
   useTransactionSettingsStore as jest.MockedFunction<
     typeof useTransactionSettingsStore
   >;
+const mockUseTransactionBuilderStore =
+  useTransactionBuilderStore as jest.MockedFunction<
+    typeof useTransactionBuilderStore
+  >;
 const mockUseAuthenticationStore =
   useAuthenticationStore as jest.MockedFunction<typeof useAuthenticationStore>;
 
@@ -452,6 +462,7 @@ describe("TransactionSettingsBottomSheet - Soroban Transaction Tests", () => {
     );
     // Mock isSorobanTransaction to return true when we have a custom token balance
     mockIsSorobanTransaction.mockReturnValue(true);
+    mockUseTransactionBuilderStore.mockReturnValue({ isSoroban: true } as any);
     mockIsMuxedAccount.mockReturnValue(false);
     mockIsValidStellarAddress.mockReturnValue(true);
     // Contract supports muxed (to_muxed) → memo should be enabled
@@ -526,6 +537,7 @@ describe("TransactionSettingsBottomSheet - Soroban Transaction Tests", () => {
     );
     // Mock isSorobanTransaction to return true when we have a custom token balance
     mockIsSorobanTransaction.mockReturnValue(true);
+    mockUseTransactionBuilderStore.mockReturnValue({ isSoroban: true } as any);
     mockIsMuxedAccount.mockReturnValue(false);
     mockIsValidStellarAddress.mockReturnValue(true);
 
@@ -628,6 +640,7 @@ describe("TransactionSettingsBottomSheet - Soroban Transaction Tests", () => {
     mockUseTransactionSettingsStore.mockReturnValue(mockState);
     mockIsMuxedAccount.mockReturnValue(false);
     mockIsValidStellarAddress.mockReturnValue(true);
+    mockUseTransactionBuilderStore.mockReturnValue({ isSoroban: true } as any);
     // Contract supports muxed (to_muxed) → memo should be enabled
     mockCheckContractSupportsMuxed.mockResolvedValue(true);
 
@@ -663,6 +676,7 @@ describe("TransactionSettingsBottomSheet - Soroban Transaction Tests", () => {
     mockUseTransactionSettingsStore.mockReturnValue(mockState);
     mockIsMuxedAccount.mockReturnValue(false);
     mockIsValidStellarAddress.mockReturnValue(true);
+    mockUseTransactionBuilderStore.mockReturnValue({ isSoroban: true } as any);
     // Contract doesn't support muxed (to_muxed) → memo should be disabled
     mockCheckContractSupportsMuxed.mockReset();
     mockCheckContractSupportsMuxed.mockResolvedValue(false);

__tests__/ducks/transactionBuilder.test.ts

@@ -53,6 +53,10 @@ describe("transactionBuilder Duck", () => {
         isSubmitting: false,
         transactionHash: null,
         error: null,
+        requestId: null,
+        isSoroban: false,
+        sorobanResourceFeeXlm: null,
+        sorobanInclusionFeeXlm: null,
       });
     });
 
@@ -61,7 +65,10 @@ describe("transactionBuilder Duck", () => {
     );
     (
       transactionService.simulateContractTransfer as jest.Mock
-    ).mockResolvedValue(mockPreparedXDR);
+    ).mockResolvedValue({
+      preparedTransaction: mockPreparedXDR,
+      minResourceFee: "100",
+    });
     (stellarServices.signTransaction as jest.Mock).mockReturnValue(
       mockSignedXDR,
     );
@@ -134,6 +141,11 @@ describe("transactionBuilder Duck", () => {
     expect(state.error).toBeNull();
     expect(transactionService.buildPaymentTransaction).toHaveBeenCalled();
     expect(transactionService.simulateContractTransfer).toHaveBeenCalled();
+    // Soroban fee fields should be populated from the simulation result
+    expect(state.sorobanResourceFeeXlm).not.toBeNull();
+    expect(typeof state.sorobanResourceFeeXlm).toBe("string");
+    expect(state.sorobanInclusionFeeXlm).not.toBeNull();
+    expect(typeof state.sorobanInclusionFeeXlm).toBe("string");
   });
 
   it("should handle errors during buildTransaction", async () => {
@@ -287,6 +299,10 @@ describe("transactionBuilder Duck", () => {
         isSubmitting: false,
         transactionHash: mockTxHash,
         error: "Some previous error",
+        requestId: "some-request-id",
+        isSoroban: true,
+        sorobanResourceFeeXlm: "0.0001000",
+        sorobanInclusionFeeXlm: "0.0001000",
       });
     });
 
@@ -301,6 +317,10 @@ describe("transactionBuilder Duck", () => {
     expect(state.isSubmitting).toBe(false);
     expect(state.transactionHash).toBeNull();
     expect(state.error).toBeNull();
+    expect(state.requestId).toBeNull();
+    expect(state.isSoroban).toBe(false);
+    expect(state.sorobanResourceFeeXlm).toBeNull();
+    expect(state.sorobanInclusionFeeXlm).toBeNull();
   });
 
   describe("buildSendCollectibleTransaction", () => {
@@ -317,7 +337,10 @@ describe("transactionBuilder Duck", () => {
       });
       (
         transactionService.simulateCollectibleTransfer as jest.Mock
-      ).mockResolvedValue(mockPreparedXDR);
+      ).mockResolvedValue({
+        preparedTransaction: mockPreparedXDR,
+        minResourceFee: "100",
+      });
     });
 
     it("should build and simulate a collectible transaction successfully", async () => {

__tests__/services/transactionService.test.ts

@@ -291,14 +291,35 @@ describe("simulateCollectibleTransfer", () => {
       networkDetails: mockNetworkDetails,
     });
 
-    expect(result).toBe(mockPreparedXdr);
+    expect(result).toEqual({
+      preparedTransaction: mockPreparedXdr,
+      minResourceFee: undefined,
+    });
     expect(backend.simulateTransaction).toHaveBeenCalledWith({
       xdr: mockTransactionXdr,
       network_url: mockNetworkDetails.sorobanRpcUrl,
       network_passphrase: mockNetworkDetails.networkPassphrase,
     });
   });
 
+  it("should correctly plumb minResourceFee when present in simulationResponse", async () => {
+    const mockResourceFee = "500";
+    (backend.simulateTransaction as jest.Mock).mockResolvedValue({
+      preparedTransaction: mockPreparedXdr,
+      simulationResponse: { minResourceFee: mockResourceFee },
+    });
+
+    const result = await simulateCollectibleTransfer({
+      transactionXdr: mockTransactionXdr,
+      networkDetails: mockNetworkDetails,
+    });
+
+    expect(result).toEqual({
+      preparedTransaction: mockPreparedXdr,
+      minResourceFee: mockResourceFee,
+    });
+  });
+
   it("should throw error if Soroban RPC URL is not defined", async () => {
     const invalidNetworkDetails = {
       ...mockNetworkDetails,

src/components/FeeBreakdownBottomSheet.tsx

@@ -0,0 +1,150 @@
+import BigNumber from "bignumber.js";
+import Icon from "components/sds/Icon";
+import { Text } from "components/sds/Typography";
+import { NATIVE_TOKEN_CODE } from "config/constants";
+import { useTransactionBuilderStore } from "ducks/transactionBuilder";
+import { useTransactionSettingsStore } from "ducks/transactionSettings";
+import { formatTokenForDisplay } from "helpers/formatAmount";
+import useAppTranslation from "hooks/useAppTranslation";
+import useColors from "hooks/useColors";
+import React from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+
+type FeeBreakdownBottomSheetProps = {
+  onClose: () => void;
+  /**
+   * Whether the current transaction is Soroban-type (C-token, C-address, or
+   * collectible), derived from the sending context rather than the builder
+   * store. Controls row visibility and description text independently of
+   * whether simulation has completed yet.
+   */
+  isSorobanContext: boolean;
+};
+
+/**
+ * FeeBreakdownBottomSheet Component
+ *
+ * The mobile equivalent of the extension's FeesPane.
+ * For Soroban transactions: shows Inclusion Fee + Resource Fee + Total Fee rows.
+ * For classic transactions: shows only the Total Fee row.
+ * Shows ActivityIndicator while a build is in progress.
+ * Includes a contextual description (different text for Soroban vs classic).
+ */
+const FeeBreakdownBottomSheet: React.FC<FeeBreakdownBottomSheetProps> = ({
+  onClose,
+  isSorobanContext,
+}) => {
+  const { t } = useAppTranslation();
+  const { themeColors } = useColors();
+  const {
+    isSoroban,
+    sorobanResourceFeeXlm,
+    sorobanInclusionFeeXlm,
+    isBuilding,
+  } = useTransactionBuilderStore();
+  const { transactionFee } = useTransactionSettingsStore();
+
+  const totalFeeXlm =
+    isSoroban && sorobanInclusionFeeXlm && sorobanResourceFeeXlm
+      ? new BigNumber(sorobanInclusionFeeXlm)
+          .plus(sorobanResourceFeeXlm)
+          .toString()
+      : transactionFee;
+
+  return (
+    <View className="flex-1">
+      {/* Header — lilac icon + close button */}
+      <View className="relative flex-row items-center mb-8">
+        <View className="bg-lilac-3 p-2 rounded-[8px]">
+          <Icon.Route color={themeColors.lilac[9]} size={28} />
+        </View>
+        <TouchableOpacity onPress={onClose} className="absolute right-0">
+          <Icon.X
+            color={themeColors.foreground.secondary}
+            size={24}
+            circle
+            circleBackground={themeColors.background.tertiary}
+          />
+        </TouchableOpacity>
+      </View>
+
+      {/* Title */}
+      <Text xl medium primary textAlign="left">
+        {t("feeBreakdown.title")}
+      </Text>
+
+      {/* Fee rows card */}
+      <View className="mt-[16px] rounded-[12px] overflow-hidden bg-background-tertiary">
+        {isSoroban && (
+          <View className="flex-row justify-between items-center px-[16px] py-[12px] border-b border-gray-6">
+            <Text md secondary>
+              {t("transactionAmountScreen.details.inclusionFee")}
+            </Text>
+            {isBuilding || !sorobanInclusionFeeXlm ? (
+              <ActivityIndicator
+                size="small"
+                color={themeColors.text.secondary}
+              />
+            ) : (
+              <Text md primary>
+                {formatTokenForDisplay(
+                  sorobanInclusionFeeXlm,
+                  NATIVE_TOKEN_CODE,
+                )}
+              </Text>
+            )}
+          </View>
+        )}
+        {isSoroban && (
+          <View className="flex-row justify-between items-center px-[16px] py-[12px] border-b border-gray-6">
+            <Text md secondary>
+              {t("transactionAmountScreen.details.resourceFee")}
+            </Text>
+            {isBuilding || !sorobanResourceFeeXlm ? (
+              <ActivityIndicator
+                size="small"
+                color={themeColors.text.secondary}
+              />
+            ) : (
+              <Text md primary>
+                {formatTokenForDisplay(
+                  sorobanResourceFeeXlm,
+                  NATIVE_TOKEN_CODE,
+                )}
+              </Text>
+            )}
+          </View>
+        )}
+        {/* Total Fee — always shown, accented in lilac */}
+        <View className="flex-row justify-between items-center px-[16px] py-[12px]">
+          <Text md medium color={themeColors.lilac[11]}>
+            {t("transactionAmountScreen.details.totalFee")}
+          </Text>
+          {isBuilding ? (
+            <ActivityIndicator
+              size="small"
+              color={themeColors.text.secondary}
+            />
+          ) : (
+            <Text md medium color={themeColors.lilac[11]}>
+              {formatTokenForDisplay(totalFeeXlm, NATIVE_TOKEN_CODE)}
+            </Text>
+          )}
+        </View>
+      </View>
+
+      {/* Contextual description */}
+      <View className="mt-[24px] pr-8">
+        <Text md regular secondary textAlign="left">
+          {t(
+            isSorobanContext
+              ? "feeBreakdown.descriptionSoroban"
+              : "feeBreakdown.descriptionClassic",
+          )}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default FeeBreakdownBottomSheet;