feat: show last transaction amount on recently used apps

[rolznz]

Summary by CodeRabbit

• New Features
  • Recently used apps widget now displays the latest transaction amount with color-coded styling (green for incoming) and the most recent transaction timestamp for each app.

[coderabbitai]

Warning

Rate limit exceeded

@rolznz has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 57 minutes and 7 seconds before requesting another review.

To continue reviewing without waiting, purchase usage credits in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 70d4649e-c6d3-45e7-850b-41ff9dbde62a

📥 Commits

Reviewing files that changed from the base of the PR and between 566a3f1 and 2a1bf7d.

📒 Files selected for processing (1)

• frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx

📝 Walkthrough

Walkthrough

The PR refactors LatestUsedAppsWidget to extract app row rendering into a dedicated RecentlyUsedAppRow component. The component fetches the latest transaction for each app, displays the transaction amount with color coding, shows the last settlement time, and links to app details.

Changes

Recently Used Apps Widget Extraction

Layer / File(s)	Summary
Dependencies frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx	New imports: FormattedBitcoinAmount for amount display, useTransactions for transaction fetching, cn for CSS class utilities, and App type.
Component Implementation frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx	RecentlyUsedAppRow fetches the latest transaction using useTransactions(app.id, false, 1, 1), renders a link to app details, displays transaction amount in green (incoming) or default color (outgoing), and shows lastSettledTransactionAt as relative time or "never".
Widget Integration frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx	LatestUsedAppsWidget renders each app via RecentlyUsedAppRow instead of inline JSX, keyed by app.id.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A widget once flat now takes a new shape,
A component extracted from cluttered escape,
Transactions now fetch with a dedicated way,
Each app shows its story in green or in gray,
A cleaner refactor hops into the fray! 🌿

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main change: displaying the last transaction amount on the recently used apps widget.
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 unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/recently-used-apps-last-tx

---

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]

🧹 Nitpick comments (1)

frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx (1)

73-75: ⚡ Quick win

Replace hardcoded success colors with theme tokens

Line 73–75 uses fixed green shades (text-green-600 dark:text-emerald-500). Please switch this to semantic/theme-based classes so it stays consistent with design tokens and theme variants.

As per coding guidelines, "Use the theme system for colors, border-radius, shadows, and design tokens; reference CSS variables and Tailwind theme tokens instead of hardcoding values."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx` around lines
73 - 75, The conditional class for incoming transactions in
LatestUsedAppsWidget.tsx uses hardcoded colors ("text-green-600
dark:text-emerald-500"); change that to the design-system/theme semantic token
classes (the success color token and its dark-mode variant) in the same
conditional expression that checks latestTransaction.type === "incoming" so the
component uses theme variables instead of hard-coded Tailwind shades.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx`:
- Around line 73-75: The conditional class for incoming transactions in
LatestUsedAppsWidget.tsx uses hardcoded colors ("text-green-600
dark:text-emerald-500"); change that to the design-system/theme semantic token
classes (the success color token and its dark-mode variant) in the same
conditional expression that checks latestTransaction.type === "incoming" so the
component uses theme variables instead of hard-coded Tailwind shades.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 51d7659f-e2b7-471f-9506-2420873c856d

📥 Commits

Reviewing files that changed from the base of the PR and between a8f2c87 and 566a3f1.

📒 Files selected for processing (1)

• frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx

[im-adithya]

tACK