Skip to content

feat(BalanceList): focus management on onAssetClick, search input for filtering assets, sort control toggle in header #365

Description

@k-deejah

Problem

1. BalanceList onAssetClick does not manage focus after clicking — when a user clicks an asset row that opens a detail view, focus should move to the detail view's heading or close button. Currently no focus management occurs after onAssetClick fires.

2. BalanceList search/filter input is missing — accounts with 20+ trust lines have no way to search assets by code. A small search input at the top of the card would filter visible rows by assetCode substring match.

3. BalanceList has no sort control beyond the default XLM-first sort — users may want to sort by balance descending (most valuable first) or alphabetically. A sort toggle button in the card header would enable this.

Solution

  1. Accept detailRef?: React.RefObject<HTMLElement> in BalanceList; call detailRef.current?.focus() after onAssetClick fires.
  2. Add a search <Input> above the asset list that filters rows by assetCode substring.
  3. Add a sort toggle button in the card header cycling through "default" | "balance-desc" | "alpha" sort modes.

Acceptance Criteria

  • Focus moves to detailRef after onAssetClick
  • Search input filters asset rows by code
  • Sort toggle cycles through three modes and re-orders the list
  • npm run build passes

Note for Contributors: Write a clear PR description. Include a screen recording of the search filter and sort toggle in action.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions