Skip to content

Fix send-flow asset list formatting (asset code + Stellar Lumens)#2884

Open
piyalbasu wants to merge 10 commits into
masterfrom
fix/send-flow-asset-list-formatting
Open

Fix send-flow asset list formatting (asset code + Stellar Lumens)#2884
piyalbasu wants to merge 10 commits into
masterfrom
fix/send-flow-asset-list-formatting

Conversation

@piyalbasu

@piyalbasu piyalbasu commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

TL;DR

Fixes a formatting bug in the send flow's asset picker. When you tap Send and choose which asset to send, each row now shows the asset code next to the balance (e.g. 100 XLM instead of a bare 100), and the native asset's title reads Stellar Lumens instead of XLM — matching how freighter-mobile presents these rows. The same picker is used by the swap flow, so both benefit.

Scope note: this PR is intentionally limited to the send/swap asset picker. The broader "Stellar Lumens everywhere" consistency sweep (home list, swap tiles, asset detail) is a separate follow-up that will rebase on top of #2872 ("Swap to New Token") and target its new shared BalanceRow component.

Implementation details (for agents)

What changed: the send-flow picker component — extension/src/popup/components/InternalTransaction/TokenList/index.tsx (mounted by both the send and swap pickers).

  1. Amount line missing the asset code. The second line rendered {displayTotal} (amount only). It now renders {displayTotal} {code}, appending the token code. Mirrors the existing SelectAssetRows pattern and freighter-mobile's formatTokenForDisplay (${amount} ${code}).
  2. Native asset title. Added an isNative check and the heading now renders {isNative ? t("Stellar Lumens") : title(balance)} instead of the bare code (title() returns "XLM" for native). "Stellar Lumens" is added as an i18n key.

Test fix: because the picker rows now show <amount> <code>, the swap-flow assertions in the blockaidScan.* e2e tests that used a loose getByText(/USDC/) / getByText(/XLM/) matched two elements (heading + balance line) under Playwright strict mode. Those were repointed to the -balance testid the tests already click, in blockaidScan.{suspicious,malicious,safe,unable}.test.ts.

Verification:

  • tsc --noEmit + eslint: clean; pre-commit build/lint/i18n passed.
  • e2e (local, fresh build): the four blockaidScan swap tests pass with retries off.

Follow-ups / out of scope: the centralized getDisplayName refactor across all balance surfaces is staged on branch parity/native-asset-display-name and will open as a separate PR after #2872 lands (it needs to re-home the formatting into #2872's new BalanceRow).

In the send flow asset picker (TokenList), each row now shows the asset
code after the balance amount on the second line (e.g. "100 XLM" instead
of "100"), and the native asset's first line reads "Stellar Lumens"
instead of "XLM". Mirrors freighter-mobile's balance row formatting.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-371e1ddfc49e0eaeb469 (SDF collaborators only — install instructions in the release description)

The blockaidScan swap tests asserted the asset row was visible via a loose
getByText(/USDC/) / getByText(/XLM/) locator, then clicked the row's
-balance testid. Now that the row's second line includes the asset code
("100 USDC"), the regex matches both the heading and the balance line,
tripping Playwright strict mode. Assert visibility on the -balance testid
the test already clicks, which is unambiguous and intention-revealing.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@piyalbasu piyalbasu changed the title Fix send-flow asset list formatting (asset code + Stellar Lumens) Native-asset display name: fix send picker + "Stellar Lumens" across surfaces Jul 2, 2026
@piyalbasu piyalbasu force-pushed the fix/send-flow-asset-list-formatting branch from 0e5440e to 3a7c971 Compare July 2, 2026 19:33
@piyalbasu piyalbasu changed the title Native-asset display name: fix send picker + "Stellar Lumens" across surfaces Fix send-flow asset list formatting (asset code + Stellar Lumens) Jul 2, 2026
@piyalbasu piyalbasu marked this pull request as ready for review July 2, 2026 19:34
Copilot AI review requested due to automatic review settings July 2, 2026 19:34
@chatgpt-codex-connector

Copy link
Copy Markdown

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes formatting in the Send/Swap asset picker so each asset row displays the balance with its asset code (e.g. 100 XLM), and the native asset label is shown as “Stellar Lumens” (localized) instead of “XLM”, aligning the extension picker with the freighter-mobile presentation.

Changes:

  • Update the picker row UI to append the asset code to the displayed balance amount.
  • Render “Stellar Lumens” (via i18n) as the native asset display name in the picker.
  • Adjust Blockaid swap E2E tests to avoid strict-mode text locator ambiguity by switching to testid-based selection.

Reviewed changes

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

Show a summary per file
File Description
extension/src/popup/components/InternalTransaction/TokenList/index.tsx Updates asset picker row display for native asset naming and <amount> <code> formatting.
extension/src/popup/locales/en/translation.json Adds i18n key/value for “Stellar Lumens”.
extension/src/popup/locales/pt/translation.json Adds i18n key/value for “Stellar Lumens”.
extension/e2e-tests/blockaidScan.safe.test.ts Updates swap picker assertions/selectors to avoid duplicate text matches under strict mode.
extension/e2e-tests/blockaidScan.suspicious.test.ts Same as above for suspicious scan scenario coverage.
extension/e2e-tests/blockaidScan.malicious.test.ts Same as above for malicious scan scenario coverage.
extension/e2e-tests/blockaidScan.unable.test.ts Same as above for unable-to-scan scenario coverage.

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

Comment thread extension/e2e-tests/blockaidScan.safe.test.ts Outdated
Comment thread extension/e2e-tests/blockaidScan.safe.test.ts Outdated
Comment thread extension/e2e-tests/blockaidScan.suspicious.test.ts Outdated
Comment thread extension/e2e-tests/blockaidScan.suspicious.test.ts Outdated
Comment thread extension/e2e-tests/blockaidScan.malicious.test.ts Outdated
Comment thread extension/e2e-tests/blockaidScan.malicious.test.ts Outdated
Comment thread extension/e2e-tests/blockaidScan.unable.test.ts Outdated
Comment thread extension/e2e-tests/blockaidScan.unable.test.ts Outdated
piyalbasu and others added 6 commits July 2, 2026 15:50
Address review feedback: select the picker row by its canonical
data-testid (SendRow-native / SendRow-USDC:${USDC_ISSUER}) instead of the
code-based XLM-balance / USDC-balance testids. The canonical id encodes the
issuer, so it stays unique under Playwright strict mode even if two assets
share a code, and matches the SendRow-native selector already used elsewhere
in these tests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The send-flow asset picker passed isShowingHeader={false}, hiding the
TokenList section header while still rendering a "Collectibles" header
below it. Enable the existing header so the token list is labeled, matching
freighter-mobile's "Your tokens" section header in its picker.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
freighter-mobile's send picker labels the section "Tokens"
(balancesList.title), not "Your Tokens". Match that wording.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The send-picker "Tokens" header had no font styling. Add the same
font-size/line-height/weight/color as the sibling "Collectibles" heading
in SendDestinationAsset so the two section headers look consistent.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Match freighter-mobile: show a Coins03 icon before the "Tokens" header
and an Image01 icon before the "Collectibles" header. Icons inherit the
header's gray color via currentColor; the Collectibles heading gets flex
alignment + svg spacing to match the Tokens header.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The send picker now shows "<amount> <code>" on the second line, so
getByText("E2E") matched both the row heading and the balance line.
Select the row by its canonical SendRow-E2E:<contractId> testid instead.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@piyalbasu

Copy link
Copy Markdown
Contributor Author
send-picker-icons

piyalbasu and others added 2 commits July 2, 2026 17:17
The swap-src picker now shows "<amount> <code>", so getByText(/FOO/)
matched both the row heading and the balance line. Assert on the
FOO-balance testid instead (consistent with the sibling BAZ/PBT/XLM
balance assertions in the same test).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…-list-formatting

# Conflicts:
#	extension/e2e-tests/blockaidScan.malicious.test.ts
#	extension/e2e-tests/blockaidScan.safe.test.ts
#	extension/e2e-tests/blockaidScan.suspicious.test.ts
#	extension/e2e-tests/blockaidScan.unable.test.ts
#	extension/e2e-tests/sendPayment.test.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants