fix(a11y,QRCode): canvas has no figure wrapper, missing figcaption for label prop, no loading state during QR generation

[k-deejah]

Problem

Three issues in TransactionHistory affect UX, accessibility, and data correctness.

1. feePaid field from Transaction type is never displayed

Transaction has a feePaid field but TxRow only renders the hash, ledger, memo, status, and timestamp. Users have no way to see what fee was paid for a transaction without going to Stellar Explorer.

2. Transaction memo is truncated with no tooltip for long memos

{tx.memo && <span className="text-[10px] text-ink-3">· {tx.memo}</span>} renders the full memo inline. Long memos overflow the row layout. No title attribute or truncation cap is applied.

3. TxRow has no role or aria-label — screen readers announce raw text

Each TxRow is a <div> with no semantic role. Screen reader users traversing the list hear the truncated hash, ledger number, memo, and status as unrelated fragments with no grouping context.

Solution

1. Add a feePaid field to TxRow rendered as a small secondary label (e.g. "Fee: 100 stroops").
2. Cap memo display at 20 chars with title={tx.memo} for the full value.
3. Add role="row" or wrap each TxRow in an <article> with aria-label describing the transaction.

Acceptance Criteria

• feePaid is visible in each transaction row
• Long memos are truncated at 20 chars with full value in title tooltip
• Each transaction row has a meaningful accessible label for screen readers
• npm run build passes

---

Note for Contributors: Write a clear PR description. Include a screenshot of the updated row layout showing the fee field and truncated memo.

[Anichris-koded]

@Anichris-koded has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer, i would love to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Anichris-koded to this issue.

[frankrichard99]

@frankrichard99 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @frankrichard99 to this issue.

[veemakama]

@veemakama has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi, i would love to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @veemakama to this issue.

[YfengJ]

Hi maintainers, I would like to work on this issue if it is still available.\n\nI noticed the title mentions QRCode, but the issue body and acceptance criteria are about TransactionHistory / TxRow. If assigned, I would keep the scope to that body: render the existing feePaid value in each row, truncate long memos with the full memo preserved in title, add a meaningful row/article label for screen readers, and run the project build before opening the PR. I will wait for Stellar Wave or maintainer assignment/confirmation before starting.