fix: update manteca refund activity ui

[kushagrasarathe]

• fixes TASK-17726

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
peanut-wallet	Ready	Preview, Comment	Mar 13, 2026 10:44am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 29bba563-d973-493e-b287-5e9e23fbf4f4

📥 Commits

Reviewing files that changed from the base of the PR and between 55facdf and 31c1d23.

📒 Files selected for processing (5)

• src/components/Global/Badges/StatusBadge.tsx
• src/components/Global/Icons/Icon.tsx
• src/components/Global/StatusPill/index.tsx
• src/components/TransactionDetails/TransactionCard.tsx
• src/components/TransactionDetails/TransactionDetailsReceipt.tsx

---

Walkthrough

The changes refactor how "refunded" transaction status is handled across the component system. The refunded status shifts from error-red styling to secondary-yellow styling, adopts a new "undo" icon, and gains specialized handling in transaction detail components for visibility and action text/icon rendering.

Changes

Cohort / File(s)	Summary
Status Badge & Icon System src/components/Global/Badges/StatusBadge.tsx, src/components/Global/Icons/Icon.tsx, src/components/Global/StatusPill/index.tsx	Refunded status moved to secondary-yellow styling; new "undo" icon added and mapped across Icon and StatusPill components with updated color and size classes.
Transaction Details Components src/components/TransactionDetails/TransactionCard.tsx, src/components/TransactionDetails/TransactionDetailsReceipt.tsx	getActionIcon and getActionText helpers extended to handle refunded status conditionally; visibility logic updated to hide token/network details and "Split this bill" button for refunded transactions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	No pull request description was provided by the author, making it impossible to evaluate whether the description is related to the changeset.	Add a brief pull request description explaining the refund activity UI changes, such as the status color/icon updates and visibility adjustments made across components.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: update manteca refund activity ui' is specific and directly related to the changeset, which updates the visual presentation and icons for refunded transactions across multiple UI components.

_{✏️ 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/refund-ui

📝 Coding Plan

• Generate coding plan for human review comments

---

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

[kushagrasarathe]

@coderabbitai review in depth.

Evaluate:

• risk of introducing new bugs and breaking existing functionality
• performance impact and latency
• code quality and DRY

Also, write a very concise testing guide for QA

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Get PR details
gh pr view 1746 --repo peanutprotocol/peanut-ui --json title,body,files,additions,deletions,changedFiles

# Get PR diff
gh pr diff 1746 --repo peanutprotocol/peanut-ui

Length of output: 7495

---

🏁 Script executed:

#!/bin/bash
# Read the full TransactionCard.tsx file
cat src/components/TransactionDetails/TransactionCard.tsx

echo "---FILE SEPARATOR---"
# Read the full TransactionDetailsReceipt.tsx
cat src/components/TransactionDetails/TransactionDetailsReceipt.tsx

echo "---FILE SEPARATOR---"
# Read the StatusPill component
cat src/components/Global/StatusPill/index.tsx

echo "---FILE SEPARATOR---"
# Read the StatusBadge component
cat src/components/Global/Badges/StatusBadge.tsx

echo "---FILE SEPARATOR---"
# Read Icon.tsx around the changes
grep -n "StatusPillType\|StatusPillProps\|type.*status\|'refunded'" src/components/Global/StatusPill/index.tsx
grep -n "StatusPillType" src/components/TransactionDetails/TransactionCard.tsx
grep -n "StatusPillType" src/components/TransactionDetails/TransactionDetailsReceipt.tsx

echo "---FILE SEPARATOR---"
# Check if StatusPillType is exported and how it's defined
rg -n "StatusPillType" --type tsx --type ts

echo "---FILE SEPARATOR---"
# Find where StatusPillType is defined
rg -rn "StatusPillType\s*=" 

echo "---FILE SEPARATOR---"
# Check getActionIcon and getActionText usages across the codebase
rg -n "getActionIcon\|getActionText" --type tsx --type ts

Length of output: 99478

---

@kushagrasarathe — here's an in-depth review:

---

🔍 In-Depth Review: PR #1746 — fix: update manteca refund activity ui

Overview

The PR re-classifies the refunded status from the "error/red" family to the "warning/yellow" family across StatusBadge, StatusPill, and TransactionCard. It also hides token/network details and the "Split this bill" button for refunded QR payments.

---

🐛 Risk of Bugs / Breaking Existing Functionality

1. transaction.date used for "Refunded" row timestamp — potentially incorrect
In TransactionDetailsReceipt.tsx, the refunded row displays transaction.date, not a dedicated refundedAt field:

// TransactionDetailsReceipt.tsx
{rowVisibilityConfig.refunded && (
    <PaymentInfoRow
        label="Refunded"
        value={formatDate(new Date(transaction.date))}  // ⚠️ generic date, not refund date
    />
)}

This existed before the PR but is surfaced more prominently now. If transaction.date reflects the original transaction creation date and not when the refund was processed, users will see an incorrect refund date.

2. getActionIcon hardcodes arrow-down-left for all refunded transactions

if (status === 'refunded') {
    return <Icon name="arrow-down-left" size={7} fill="currentColor" />
}

This is fine for Manteca refunds (always incoming), but if refunded status ever applies to outgoing transaction types (e.g., send, pay), the icon will be misleading. Low risk now, but brittle long-term.

3. isQRPayment uses a pre-existing non-null assertion (!)

const isQRPayment = transaction && [...].includes(transaction.extraDataForDrawer!.originalType)

The new transaction.status !== 'refunded' guard added here is correct and safe — it short-circuits before the assertion can throw. No new risk introduced.

---

⚡ Performance Impact

Negligible. All new logic is:

• O(1) string comparisons (status === 'refunded')
• One new MUI icon (UndoRounded) — tree-shaken at build time
• No new API calls, no new useMemo/useEffect, no re-renders introduced

The undo icon registration uses an arrow function (consistent with the existing pattern for other MUI icons in Icon.tsx), so no new concerns there.

---

🧹 Code Quality & DRY

1. status === 'refunded' check is now scattered across 6+ locations:

• StatusBadge.tsx (style switch)
• StatusPill/index.tsx (colorClasses, iconClasses, iconSize)
• TransactionCard.tsx (getActionIcon, getActionText)
• TransactionDetailsReceipt.tsx (rowVisibilityConfig.tokenAndNetwork, isQRPayment button)

This is the main DRY concern. Consider centralizing refund-specific presentation logic (icon, label, color) into the StatusPill/StatusBadge components themselves, since callers shouldn't need to branch on status === 'refunded' independently.

2. tokenAndNetwork visibility condition is already very long; the new line makes it longer:

tokenAndNetwork: !!(
    transaction.tokenDisplayDetails &&
    transaction.sourceView === 'history' &&
    !isPeanutWalletToken &&
    !(
        transaction.extraDataForDrawer?.originalType === EHistoryEntryType.SEND_LINK &&
        transaction.extraDataForDrawer?.originalUserRole === EHistoryUserRole.SENDER
    ) &&
    // hide token and network for refunded entries
    transaction.status !== 'refunded'
),

This is consistent with the existing pattern in rowVisibilityConfig. The inline comment helps. No blocking concern.

3. The 'Refund' label in getActionText is already capitalized — the capitalize CSS class on the parent <span> would only capitalize the first letter anyway, so this is correct.

---

🧪 QA Testing Guide

Prerequisites: A Manteca QR payment transaction with status = 'refunded' in the test environment.

✅ Happy Path — Refunded Transaction

Step	Action	Expected
1	Open Activity / Transaction History	Locate a refunded Manteca QR payment entry
2	Inspect the transaction card row	Label reads "Refund" (not the original payment type)
3	Inspect the action icon on the card	Shows arrow-down-left icon (incoming)
4	Inspect the StatusPill	Shows yellow pill with undo (↩) icon, not red x
5	Inspect the StatusBadge elsewhere	Shows yellow badge styling (not red)
6	Tap to open the transaction detail drawer	Drawer opens successfully
7	Check detail rows	Token & Network row is hidden
8	Check action buttons	"Split this bill" button is hidden
9	Check date row	A "Refunded" row appears with a date

🚫 Regression — Non-Refunded Statuses Must Be Unchanged

Status	Expected Badge Color	StatusPill Icon
cancelled	Red	cancel (✕)
failed	Red	cancel (✕)
pending	Yellow	pending
processing	Yellow	pending
completed	Green	success (✓)

🔲 Edge Cases

• Open a non-QR refunded transaction → "Split this bill" button should not appear (already wasn't shown, but verify)
• Verify the "Issues with this transaction?" support link still renders correctly on a refunded transaction drawer

---

🧠 Learnings used

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 852
File: src/hooks/useTransactionHistory.ts:177-239
Timestamp: 2025-05-14T21:16:06.369Z
Learning: When reviewing code, pay attention to and resolve CodeRabbit comments as they can contain useful refactoring suggestions and insights.

---

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 594
File: src/components/Request/Pay/Views/Initial.view.tsx:188-213
Timestamp: 2024-12-31T15:08:15.640Z
Learning: Always resolve coderabbit comments when reviewing code, since they can contain useful suggestions.

[notion-workspace]

Implement new design for refund activity entry