fix: update transaction amount display to use formatted number with currency

[Dprof-in-tech]

Description

This pull request updates the way transaction amounts are displayed in the TransactionDetails component to improve readability and consistency.

Display improvements:

• Changed the formatting of the amount_received value to use formatNumberWithCommas instead of formatCurrency, and now shows the currency code directly after the number, rather than formatting based on locale. (TransactionDetails in app/components/transaction/TransactionDetails.tsx)

References

Testing

• This change adds test coverage for new/changed/fixed functionality

Checklist

• I have added documentation and tests for new/changed functionality in this PR
• All active GitHub checks for tests, formatting, and security are passing
• The correct base branch is being used, if not main

By submitting a PR, I agree to Paycrest's Contributor Code of Conduct and Contribution Guide.

Summary by CodeRabbit

• Bug Fixes
  • Modified how transaction amounts display in transaction details, changing from locale-aware currency formatting to numeric format with thousand separators and currency code.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Amount field in transaction details changes its formatting approach. Instead of using a locale-aware currency formatter (formatCurrency), it now uses simple thousand-separator formatting (formatNumberWithCommas) followed by the currency code. This removes locale-specific currency formatting.

Changes

Cohort / File(s)	Summary
Amount Display Formatting app/components/transaction/TransactionDetails.tsx	Changed amount field formatting from locale-aware currency formatting to simple number formatting with thousand separators plus currency code.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• chibie
• 5ran6
• onahprosper

Poem

🐰 A rabbit hops through amounts once more,
Trading locale-aware formatting for numbers plain and pure,
With commas dancing, currencies displayed with ease,
The transaction details now aim to simply please! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: updating transaction amount display formatting from currency-aware formatting to a formatted number with currency code.
Description check	✅ Passed	The description covers the main change with clear explanation and includes visual testing evidence, but the References section is empty and testing/documentation checklist items are unchecked.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-allow-transfers-display-in-transaction-history

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/transaction/TransactionDetails.tsx (1)

83-87: ⚠️ Potential issue | 🟡 Minor

Blob URL is never revoked — minor memory leak.

URL.createObjectURL keeps the blob alive until the document is destroyed. Add a revocation call after handing off the URL to the browser:

🛠️ Proposed fix

  const pdfUrl = URL.createObjectURL(blob);
  window.open(pdfUrl, "_blank");
+ // Revoke after a short delay to let the browser start loading the resource
+ setTimeout(() => URL.revokeObjectURL(pdfUrl), 1000);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/components/transaction/TransactionDetails.tsx` around lines 83 - 87, The
Blob URL created for the generated PDF (variable pdfUrl from
URL.createObjectURL(blob) in TransactionDetails / the code that calls
pdf(<PDFReceipt ... />).toBlob()) is never revoked, causing a minor memory leak;
after opening/handing off the URL to the browser (window.open(pdfUrl, "_blank")
or when using an anchor click), call URL.revokeObjectURL(pdfUrl) once the
browser has started using it (e.g., schedule a short setTimeout revoke or revoke
on the opened window/anchor load) so the blob can be released. Ensure you
reference the pdfUrl and blob variables and revoke the URL after handing it off.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@app/components/transaction/TransactionDetails.tsx`:
- Around line 83-87: The Blob URL created for the generated PDF (variable pdfUrl
from URL.createObjectURL(blob) in TransactionDetails / the code that calls
pdf(<PDFReceipt ... />).toBlob()) is never revoked, causing a minor memory leak;
after opening/handing off the URL to the browser (window.open(pdfUrl, "_blank")
or when using an anchor click), call URL.revokeObjectURL(pdfUrl) once the
browser has started using it (e.g., schedule a short setTimeout revoke or revoke
on the opened window/anchor load) so the blob can be released. Ensure you
reference the pdfUrl and blob variables and revoke the URL after handing it off.