feat(utils): add function to format first word of recipient name in t…

[sundayonah]

Description

The success screen showed the recipient’s first name in all lowercase in the small end-of-flow pills (e.g. john) while the headline used proper title case. That came from (recipientName ?? "").toLowerCase().split(" ")[0] with no re-capitalization.

This PR removes that behavior by centralizing formatting in formatRecipientNameFirstWordForPill, which mirrors the same per-word title casing used in the success copy, then takes the first word only. Pills stay truncated but now align with the headline.

References

None.

Testing

Manual

1. Complete an off-ramp transfer to a bank recipient whose resolved name includes a leading first name (e.g. multi-word name).
2. On the Transaction successful step, confirm the bottom pill next to the stepper shows the **first word title-cased
3. Repeat on a narrow viewport so the horizontal pill row is visible and matches.

Checklist

• I have added documentation and tests for new/changed/fixed 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
  • Improved recipient name formatting consistency in transaction status displays across desktop and mobile layouts.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 40b5f909-1265-4a35-81ad-5455a7cd1568

📥 Commits

Reviewing files that changed from the base of the PR and between f81c0bf and 87bfc3c.

📒 Files selected for processing (2)

• app/pages/TransactionStatus.tsx
• app/utils.ts

---

📝 Walkthrough

Walkthrough

A new utility function formatRecipientNameFirstWordForPill is added to consolidate recipient name formatting logic. The function is then imported and applied in TransactionStatus.tsx to replace duplicate inline formatting in both desktop and mobile views. The isBlockFestActive import is consolidated into the main utils import block.

Changes

Recipient Name Formatting Extraction

Layer / File(s)	Summary
Recipient name formatting utility app/utils.ts	New exported utility formatRecipientNameFirstWordForPill(name: string): string trims whitespace, title-cases all words, and returns the first word of a recipient name.
Apply formatting in transaction status views app/pages/TransactionStatus.tsx	Import consolidation adds formatRecipientNameFirstWordForPill, removes the separate isBlockFestActive import line, and replaces inline formatting logic with utility function calls in both desktop and mobile recipient-name pill rendering.

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested Reviewers

• chibie
• 5ran6
• onahprosper

Poem

🐰 A humble format, extracted with care,
The first word of names, now shared everywhere!
Desktop and mobile, both dancing in sync,
No more duplicates—just utilities that link! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a utility function to format the first word of a recipient name for display in pills.
Description check	✅ Passed	The description includes clear motivation, implementation approach, manual testing steps with detailed reproduction instructions, and a visual screenshot demonstrating the fix.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/transaction-status-recipient-pill-casing

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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