[Due for payment 2026-05-26] [Personal Card Import] [$250] Incorrect card art on card details for Plaid personal card

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Needs Reproduction (Reproduction blocked)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @joekaufmanexpensify
Slack conversation (hyperlinked to channel name): #Migrate

Action Performed:

1. Follow the steps to connect a personal card via Plaid on Wallet.
2. Tap the card row on Wallet.

Expected Result:

Card art on the row on wallet matches card details.

Actual Result:

We show the amex card art on wallet, but the generic one on card details.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022045251493410949545
• Upwork Job ID: 2045251493410949545
• Last Price Increase: 2026-04-24

[MelvinBot]

Proposal

What is the root cause of that problem?

The Wallet list and the card details page use two different rendering paths for card art:

• Wallet list (PaymentMethodList.tsx:269) calls getPlaidInstitutionIconUrl(card.bank) to build a Plaid CDN URL (e.g., https://cdn.plaid.com/images/plaid/ins_XXXXX.png), which is passed to PlaidCardFeedIcon via PaymentMethodListItem.tsx:199-201. This correctly renders the bank-specific card art (e.g., Amex).

• Card details page (PersonalCardDetailsPage.tsx:99-101) only calls getCardFeedIcon(cardBank, ...). For Plaid feeds (bank strings like plaid.ins_XXXXX), this function has no matching entry and falls through to return GenericCompanyCardLarge — the generic card art.

What changes do you think we should make in order to solve the problem?

Replace the direct getCardFeedIcon() + ImageSVG rendering in PersonalCardDetailsPage with the existing CardFeedIcon component, which already handles Plaid feeds correctly by checking getPlaidInstitutionId() and rendering PlaidCardFeedIcon when appropriate.

What alternative solutions did you explore? (Optional)

An alternative would be to extend getCardFeedIcon() in CardUtils.ts to handle Plaid feeds directly. However, since the reusable CardFeedIcon component already solves this exact problem and is used elsewhere in the codebase, it's cleaner and more consistent to reuse it on the details page.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022045251493410949545

[aswin-s]

Proposal

What is the root cause of that problem?

PersonalCardDetailsPage.tsx determines the card art solely via getCardFeedIcon(cardBank, ...), which returns a static SVG for the generic Plaid icon — it has no concept of the Plaid institution URL. It never calls getPlaidInstitutionIconUrl(cardBank) and therefore never renders the bank-specific logo (e.g. Amex). The wallet row in PaymentMethodList.tsx correctly calls getPlaidInstitutionIconUrl(card.bank) (line 269) and passes the resulting URL as plaidUrl to the list item, which then renders <PlaidCardFeedIcon> with the real bank logo. The details page omits this entirely and always falls through to <ImageSVG>.

The pattern for how to handle this correctly already exists in the analogous company-card details page:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx

Lines 150 to 164 in d3831cc

	<View style={[styles.walletCard, styles.mb3]}>
	{plaidUrl ? (
	<PlaidCardFeedIcon
	plaidUrl={plaidUrl}
	isLarge
	/>
	) : (
	<ImageSVG
	contentFit="contain"
	src={getCardFeedIcon(cardBank, illustrations, companyCardFeedIcons)}
	pointerEvents="none"
	height={variables.cardPreviewHeight}
	width={variables.cardPreviewWidth}
	/>
	)}

WorkspaceCompanyCardDetailsPage resolves plaidUrl via getPlaidInstitutionIconUrl (line 96) and conditionally renders <PlaidCardFeedIcon plaidUrl={plaidUrl} isLarge /> when a Plaid URL is available, falling back to <ImageSVG> otherwise. PersonalCardDetailsPage is missing this conditional branch entirely.

What changes do you think we should make in order to solve the problem?

1. src/pages/settings/Wallet/PersonalCardDetailsPage.tsx — add getPlaidInstitutionIconUrl to the existing CardUtils import on line 20.
2. src/pages/settings/Wallet/PersonalCardDetailsPage.tsx — inside PersonalCardDetailsPage, compute const plaidUrl = getPlaidInstitutionIconUrl(cardBank as CardFeedWithNumber); near the existing getCardIconSource call (around line 99).
3. src/pages/settings/Wallet/PersonalCardDetailsPage.tsx — replace the unconditional <ImageSVG src={getCardIconSource()} ... /> block (lines 124–130) with the same conditional used in WorkspaceCompanyCardDetailsPage: render <PlaidCardFeedIcon plaidUrl={plaidUrl} isLarge /> when plaidUrl is truthy, otherwise fall back to the existing <ImageSVG>.
4. src/pages/settings/Wallet/PersonalCardDetailsPage.tsx — import PlaidCardFeedIcon from @components/PlaidCardFeedIcon to support the new conditional branch.

What alternative solutions did you explore? (Optional)

An alternative would be to forward the already-resolved plaidUrl from the wallet list item navigation params so the details page never re-derives it. This avoids a second CDN lookup but couples navigation params to a display concern, making the details page dependent on how the caller constructed the route — the self-contained derivation approach (mirroring WorkspaceCompanyCardDetailsPage) is cleaner and consistent with the rest of the codebase.

[github-actions]

⚠️ @aswin-s Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[JasimMalook]

✅ Proposal
Please re-state the problem that we are trying to solve in this issue.

On the Personal Card Details page for Plaid-connected personal cards, the card art is incorrect. The Wallet screen shows the correct bank-specific card image (e.g. Amex logo), but the Card Details page incorrectly displays a generic card icon instead of matching the Wallet view.

What is the root cause of that problem?

The Wallet list and the Card Details page use different logic for rendering card art:

Wallet (PaymentMethodList.tsx) correctly uses:
getPlaidInstitutionIconUrl(card.bank)
This returns a Plaid CDN image URL for the specific bank (e.g. Amex, Chase, etc.)
Then renders it via PlaidCardFeedIcon
Card Details page (PersonalCardDetailsPage.tsx) instead uses:
getCardFeedIcon(cardBank, ...)
This function does not handle Plaid institution IDs
So it falls back to GenericCompanyCardLarge, which is a generic placeholder icon

So the mismatch happens because:
👉 Wallet uses Plaid-aware rendering
👉 Details page uses static fallback icon logic only

What changes do you think we should make in order to solve the problem?

We should align PersonalCardDetailsPage.tsx with the existing Wallet implementation by using Plaid-aware rendering.

Changes:
Get Plaid institution URL
const plaidUrl = getPlaidInstitutionIconUrl(cardBank);
Replace generic icon rendering with conditional logic (same as WorkspaceCompanyCardDetailsPage)
{plaidUrl ? (

) : (
<ImageSVG
contentFit="contain"
src={getCardFeedIcon(cardBank, illustrations, companyCardFeedIcons)}
pointerEvents="none"
height={variables.cardPreviewHeight}
width={variables.cardPreviewWidth}
/>
)}
Import required component
import PlaidCardFeedIcon from '@components/PlaidCardFeedIcon';
Why this fix?
Keeps Wallet and Details page consistent
Reuses existing correct Plaid rendering logic
Avoids duplicate logic in CardUtils
Matches established pattern used in WorkspaceCompanyCardDetailsPage
What alternative solutions did you explore? (Optional)

An alternative would be to modify getCardFeedIcon() to support Plaid institutions directly.
However, that would duplicate logic already handled by PlaidCardFeedIcon, so reusing the existing component is cleaner and more maintainable.

📌 Contributor Details
Expensify Email: jasimmalook@gmail.com
Upwork: https://www.upwork.com/freelancers/~014c25762fc2275193

[JustDreameritis]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @JustDreameritis Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.