Display better fee breakdown for soroban transactions by leofelix077 · Pull Request #774 · stellar/freighter-mobile

leofelix077 · 2026-03-18T21:40:46Z

Already verified UI with @sdfcharles on build 1.13.25 (1774353202)

Checklist

PR structure

This PR does not mix refactoring changes with feature changes (break it down into smaller PRs if not).
This PR has reasonably narrow scope (break it down into smaller PRs if not).
This PR includes relevant before and after screenshots/videos highlighting these changes.
I took the time to review my own PR.

Testing

These changes have been tested and confirmed to work as intended on Android.
These changes have been tested and confirmed to work as intended on iOS.
These changes have been tested and confirmed to work as intended on small iOS screens.
These changes have been tested and confirmed to work as intended on small Android screens.
I have tried to break these changes while extensively testing them.
This PR adds tests for the new functionality or fixes.

Release

This is not a breaking change.
This PR updates existing JSDocs when applicable.
This PR adds JSDocs to new functionalities.
I've checked with the product team if we should add metrics to these changes.
I've shared relevant before and after screenshots/videos highlighting these changes with the design team and they've approved the changes.

Copilot

Pull request overview

This PR introduces an initial UI/UX for displaying a clearer fee breakdown (inclusion vs resource fees) for Soroban transactions, by plumbing Soroban simulation fee data from the backend through transaction building and into new bottom sheet UI.

Changes:

Extend Soroban simulation plumbing to surface minResourceFee alongside prepared transaction XDR.
Add a new FeeBreakdownBottomSheet and hook it up from send review/settings flows.
Update transaction builder state + related tests/translations to support inclusion/resource/total fee display.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
src/services/transactionService.ts	Returns `{ preparedTransaction, minResourceFee }` from Soroban simulation wrappers.
src/services/backend.ts	Types `simulationResponse` and introduces `SorobanSimulationResponse` with `minResourceFee`.
src/ducks/transactionBuilder.ts	Stores computed Soroban inclusion/resource fees (XLM) in Zustand state.
src/components/screens/SendScreen/screens/TransactionAmountScreen.tsx	Auto-builds for fee estimation and wires up fee breakdown bottom sheet.
src/components/screens/SendScreen/components/SendReviewBottomSheet.tsx	Displays total fee (classic vs Soroban total) and opens breakdown sheet.
src/components/TransactionSettingsBottomSheet.tsx	Updates fee label/info behavior to support “inclusion fee” and fee breakdown entry point.
src/components/FeeBreakdownBottomSheet.tsx	New bottom sheet UI showing fee rows + contextual description.
src/i18n/locales/en/translations.json	Adds fee breakdown and fee row labels (EN).
src/i18n/locales/pt/translations.json	Adds fee breakdown and fee row labels (PT).
tests/services/transactionService.test.ts	Updates simulate collectible test for new return shape.
tests/ducks/transactionBuilder.test.ts	Updates mocks for new simulate return shape.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/screens/SendScreen/screens/TransactionAmountScreen.tsx

src/ducks/transactionBuilder.ts

src/components/TransactionSettingsBottomSheet.tsx

src/services/backend.ts

src/components/FeeBreakdownBottomSheet.tsx

__tests__/services/transactionService.test.ts

+ expect(result).toEqual({
+ preparedTransaction: mockPreparedXdr,
+ minResourceFee: undefined,
+ });


__tests__/ducks/transactionBuilder.test.ts

src/components/FeeBreakdownBottomSheet.tsx

…reighter-mobile into lf-improve-fee-display-on-send

Copilot

Pull request overview

Adds an initial “better fees” UI by separating Soroban inclusion vs resource fees and plumbing minResourceFee from simulation responses through the transaction build flow.

Changes:

Plumbs Soroban minResourceFee through backend/service simulation calls and stores it in the transaction builder state.
Updates Send flows to pre-simulate Soroban transactions (including “amount=0” fee estimation) and adds a Fee Breakdown bottom sheet.
Updates fee-related labels/translations and adjusts tests for the new simulation return shape.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/services/transactionService.ts	Adds optional amount validation skip for Soroban fee estimation; returns `{ preparedTransaction, minResourceFee }` from simulation helpers
src/services/backend.ts	Updates simulation response typing and changes `params.amount` type to `number`
src/ducks/transactionBuilder.ts	Stores Soroban fee breakdown fields and uses simulation results to compute/display fees
src/components/screens/SendScreen/screens/TransactionAmountScreen.tsx	Adds auto fee-estimation simulation for Soroban and wires Fee Breakdown sheet
src/components/screens/SendScreen/screens/SendCollectibleReview.tsx	Auto-simulates to populate fee breakdown; wires Fee Breakdown sheet
src/components/screens/SendScreen/components/SendReviewBottomSheet.tsx	Shows total fee (classic or inclusion+resource) and opens Fee Breakdown sheet
src/components/TransactionSettingsBottomSheet.tsx	Renames fee label to “Inclusion fee” for Soroban and routes info icon to Fee Breakdown
src/components/FeeBreakdownBottomSheet.tsx	New UI component for inclusion/resource/total fee breakdown
src/i18n/locales/en/translations.json	Adds strings for inclusion/resource/total fee breakdown
src/i18n/locales/pt/translations.json	Adds Portuguese strings for inclusion/resource/total fee breakdown
tests/services/transactionService.test.ts	Updates simulation tests for new return shape and minResourceFee plumbing
tests/ducks/transactionBuilder.test.ts	Updates mocks/assertions for new simulation return shape and fee fields
tests/components/TransactionSettingsBottomSheet.test.tsx	Mocks transaction builder Soroban state for updated component logic

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/services/transactionService.ts

src/ducks/transactionBuilder.ts

Copilot · 2026-03-20T18:21:53Z

src/components/screens/SendScreen/screens/TransactionAmountScreen.tsx

+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedBalance?.id, recipientAddress]);


This effect gates on !isBuilding, but isBuilding is not in the dependency array. If the effect runs while a build is in progress, the fee-estimation simulation will never be scheduled when isBuilding flips back to false. Include isBuilding (and prepareTransaction) in the dependencies or restructure so the fee-estimation trigger re-evaluates when building completes.

Suggested change

// eslint-disable-next-line react-hooks/exhaustive-deps

}, [selectedBalance?.id, recipientAddress]);

}, [selectedBalance?.id, recipientAddress, isBuilding, prepareTransaction]);

src/components/screens/SendScreen/screens/SendCollectibleReview.tsx

Copilot · 2026-03-20T18:21:53Z

src/components/TransactionSettingsBottomSheet.tsx

+ // Single source of truth for Soroban state from the transaction builder store
+ const { isSoroban: isSorobanTransaction } = useTransactionBuilderStore();
+


TransactionSettingsBottomSheet now treats useTransactionBuilderStore().isSoroban as the single source of truth. That value can be stale in contexts that don’t rebuild via buildTransaction (e.g., swap settings) or before any build has started, leading to incorrect fee labeling and memo/contractId logic. Consider deriving Soroban-ness from the current settings/context (selected token, recipient, collectible) here, or ensure the builder store is always reset/updated for every context that can open this sheet.

__tests__/ducks/transactionBuilder.test.ts

src/services/backend.ts

…prove-fee-display-on-send

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-24T16:54:36Z

src/components/screens/SendScreen/components/SendReviewBottomSheet.tsx

 <Button
- tertiary={(isSuspicious && !isUnableToScan) || isExpectedToFail}
- destructive={isMalicious && !shouldUseRowLayout}
+ tertiary={isSuspicious || isUnableToScan || isExpectedToFail}
+ destructive={isMalicious}
 secondary={shouldUseRowLayout}


This changes the cancel button styling logic (tertiary/destructive) in a way that appears unrelated to the PR’s stated goal (fee breakdown for Soroban transactions). If this behavior change is intentional, it would be good to call it out in the PR description; otherwise consider reverting it to keep the PR focused.

intentional change

Copilot · 2026-03-24T16:54:37Z

src/components/FeeBreakdownBottomSheet.tsx

+ {/* 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 ? (


isSorobanContext is documented as controlling row visibility independently of the builder store, but the component actually gates the Inclusion/Resource fee rows (and totalFeeXlm) on isSoroban from useTransactionBuilderStore(). This can hide Soroban rows when opening the sheet before a build has set isSoroban (or if the store is stale). Consider using isSorobanContext to control row visibility (and possibly the total-fee calculation), and use the store values only for the amounts/spinner states.

Copilot · 2026-03-24T16:54:37Z

src/ducks/transactionBuilder.ts

- });
+ const isFeeEstimation = Number(params.tokenAmount) === 0;
+
+ let simulateResult;


let simulateResult; leaves simulateResult implicitly typed as any, which defeats type-safety and may violate TypeScript/ESLint settings. Prefer giving it an explicit union type (e.g., the shared shape { preparedTransaction: string; minResourceFee?: string }) or restructuring to avoid the untyped variable.

Suggested change

let simulateResult;

let simulateResult: { preparedTransaction: string; minResourceFee?: string };

Copilot · 2026-03-24T16:54:38Z

src/ducks/transactionBuilder.ts

+ amount:
+ builtTxResult.amountInBaseUnits !== undefined
+ ? String(builtTxResult.amountInBaseUnits)
+ : "0",
+ },


When building the /simulate-token-transfer request, the amount falls back to the string "0" if builtTxResult.amountInBaseUnits is undefined. That would silently simulate the wrong transaction rather than failing fast. Since amount is required by the backend contract, consider throwing an explicit error (or deriving base units from the entered amount) instead of defaulting to "0".

Copilot · 2026-03-24T16:54:38Z

src/ducks/transactionBuilder.ts

+ const sorobanResourceFeeXlm = simulateResult.minResourceFee
+ ? stroopToXlm(new BigNumber(simulateResult.minResourceFee)).toFixed(7)
+ : null;


sorobanResourceFeeXlm is derived from simulateResult.minResourceFee without validating that the value is numeric. If the backend ever returns a non-numeric string, this can propagate "NaN" into the UI. Consider mirroring the earlier isNaN() guard used in buildTransaction before converting/formatting the fee.

Suggested change

const sorobanResourceFeeXlm = simulateResult.minResourceFee

? stroopToXlm(new BigNumber(simulateResult.minResourceFee)).toFixed(7)

: null;

const sorobanResourceFeeXlm =

simulateResult.minResourceFee &&

!Number.isNaN(Number(simulateResult.minResourceFee))

? stroopToXlm(

new BigNumber(simulateResult.minResourceFee),

).toFixed(7)

: null;

add initial version of better resource and inclusion fees display

1b5ea92

leofelix077 self-assigned this Mar 18, 2026

Copilot AI review requested due to automatic review settings March 18, 2026 21:40

Merge branch 'main' into lf-improve-fee-display-on-send

dbba845

leofelix077 changed the title ~~add initial version of better resource and inclusion fees display~~ [WIP] add initial version of better resource and inclusion fees display Mar 18, 2026

leofelix077 added wip work in progress don't review yet Work in Progress / Draft PR / Code Review adjustments being worked on labels Mar 18, 2026

Copilot AI reviewed Mar 18, 2026

View reviewed changes

leofelix077 added 4 commits March 20, 2026 10:09

adjust typings and tests for soroban minResourceFee

fe46ee5

Merge branch 'lf-improve-fee-display-on-send' of github.com:stellar/f…

699e4b3

…reighter-mobile into lf-improve-fee-display-on-send

adjust logic to display and resimulate soroban fees

99e918f

adjust logic to display and resimulate soroban fees

5205d82

leofelix077 requested a review from Copilot March 20, 2026 18:16

Copilot started reviewing on behalf of leofelix077 March 20, 2026 18:17 View session

merge base into branch

b964af5

Copilot AI reviewed Mar 20, 2026

View reviewed changes

leofelix077 added 2 commits March 20, 2026 16:58

adjust comments from copilot

cc32f03

adjust button colors on unable to scan

c874021

leofelix077 added don't review yet Work in Progress / Draft PR / Code Review adjustments being worked on and removed wip work in progress don't review yet Work in Progress / Draft PR / Code Review adjustments being worked on labels Mar 24, 2026

leofelix077 requested review from CassioMG, aristidesstaffieri and piyalbasu March 24, 2026 14:42

leofelix077 added 2 commits March 24, 2026 11:51

Merge branch 'main' of github.com:stellar/freighter-mobile into lf-im…

773b7f7

…prove-fee-display-on-send

merge main into branch and adjust soroban text

5d672bf

leofelix077 changed the title ~~[WIP] add initial version of better resource and inclusion fees display~~ Display better fee breakdown for soroban transactions Mar 24, 2026

leofelix077 added enhancement New feature or request and removed don't review yet Work in Progress / Draft PR / Code Review adjustments being worked on labels Mar 24, 2026

leofelix077 requested a review from Copilot March 24, 2026 16:48

Copilot started reviewing on behalf of leofelix077 March 24, 2026 16:49 View session

Copilot AI reviewed Mar 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Display better fee breakdown for soroban transactions#774

Display better fee breakdown for soroban transactions#774
leofelix077 wants to merge 11 commits intomainfrom
lf-improve-fee-display-on-send

leofelix077 commented Mar 18, 2026 •

edited

Loading

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Copilot AI Mar 24, 2026

leofelix077 Mar 24, 2026

Copilot AI Mar 24, 2026

Copilot AI Mar 24, 2026

Copilot AI Mar 24, 2026

Copilot AI Mar 24, 2026

Labels

2 participants

		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, [selectedBalance?.id, recipientAddress]);

		// Single source of truth for Soroban state from the transaction builder store
		const { isSoroban: isSorobanTransaction } = useTransactionBuilderStore();

	let simulateResult;
	let simulateResult: { preparedTransaction: string; minResourceFee?: string };

Conversation

leofelix077 commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

PR structure

Testing

Release

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

leofelix077 Mar 24, 2026

Choose a reason for hiding this comment

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Labels

2 participants

leofelix077 commented Mar 18, 2026 •

edited

Loading