fix(card): match in-app card art to finalised Visa Platinum lockup by kushagrasarathe · Pull Request #2444 · peanutprotocol/peanut-ui

kushagrasarathe · 2026-07-17T15:22:29Z

Summary

The in-app card (CardFace.tsx) is composited layer-by-layer in code, so it drifted from the finalised Rain card art (what Apple Wallet shows). This brings it back in line and fixes the interaction problems that surfaced once the art matched:

Wordmark — was mascot-only; now the black PEANUT lockup (PEANUTMAN + PEANUT_LOGO_BLACK). PEANUT_LOGO is the white-on-dark variant, so it must not be used on the pink card.
Visa tier — inverted-white Visa with no tier → black VISA + a "Platinum" line.
Hand vs. controls — the finalised hand sweeps to the bottom-right corner, which is exactly where the reveal/hide eye and the revealed PAN/CVV live. So:
- The hand slides diagonally off the bottom-right corner whenever details are shown or being fetched, and slides back when re-masked. pointer-events-none, so it never intercepts the eye tap.
- The eye moves inline with the number in the masked/error states (hand-free zone).
- The loading skeleton state is untouched — the hand simply slides away so the skeletons are clear.

Closes TASK-20469.

Risk

Low. Presentational-only, one file, in-repo assets. No logic/API/cross-repo impact. Reveal/mask/loading/error states all covered; locked (unused) left as-is.

Design notes

Considered keeping the exact static-art hand + white pills / card-flip; those either look busy or are a much larger change. The slide-away keeps the art on the default card (the 99% view) and full legibility on reveal. Card-flip back face is a nice premium follow-up if wanted — filed as a future idea, not this PR.
PixelatedCardFace.tsx (share/tease) carries the same logo drift but is intentionally pixelated + rides the html-to-image pipeline — separate follow-up.

QA

Verified locally against the real component (dev preview driving CardFace): masked → loading (skeletons, hand slid away) → revealed (all fields + hide button legible) → re-mask (hand slides back). Typecheck clean; 3 CardFace unit tests pass.

Summary by CodeRabbit

New Features
- Updated card branding with the Peanut wordmark, mascot artwork, and Platinum tier label.
- Improved virtual card labeling and placement.
- Refined card detail loading, reveal, and error-state layouts.
Style
- Repositioned decorative artwork and updated its transition behavior.
- Improved alignment of retry controls and card information.

The in-app card is composited layer-by-layer in code, so it drifted from the finalised Rain art (what Apple Wallet shows): it rendered a mascot with no PEANUT wordmark and an inverted-white Visa with no tier. Swap the top row to the PEANUT lockup (mascot + black wordmark) and a black VISA with a Platinum tier line. Closes TASK-20469.

vercel · 2026-07-17T15:22:34Z

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

Project	Deployment	Actions	Updated (UTC)
peanut-wallet	Ready	Preview, Comment	Jul 17, 2026 5:07pm

coderabbitai · 2026-07-17T15:22:50Z

📝 Walkthrough

Walkthrough

CardFace updates peanut and Visa branding, adds a Platinum tier label, changes decorative artwork transitions, and reorganizes error, reveal, retry, last-four, and Virtual-card controls.

Changes

Card Face Updates

Layer / File(s)	Summary
Update card artwork `src/components/Card/CardFace.tsx`	Adds the black peanut wordmark, updates mascot and Visa rendering, adds the “Platinum” label, and changes hand artwork positioning based on `detailsShown`.
Reorganize reveal controls `src/components/Card/CardFace.tsx`	Displays error and retry controls inline, keeps the eye toggle with the last four digits, and renders the “Virtual” pill beneath that row.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

peanutprotocol/peanut-ui#2043: Also modifies CardFace error, masked, reveal, and Virtual-card control rendering.
peanutprotocol/peanut-ui#2218: Also updates CardFace peanut branding assets.
peanutprotocol/peanut-ui#2327: Also changes peanut artwork asset wiring in CardFace.

Suggested reviewers: 0xkkonrad, jjramirezn

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title is concise, specific, and accurately reflects the main presentation update to the card art and Visa Platinum lockup.

✨ 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/card-art-visa-platinum

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

github-actions · 2026-07-17T15:23:47Z

Code-analysis diff

Painscore total: 6207.44 → 6207.84 (+0.4)
Findings: +1 net (+4 new, -3 resolved)

🆕 New findings (4)

medium high-mdd — src/components/Card/CardFace.tsx:44 — CardFace: MDD 61.0 (uses across many lines from declarations)
medium complexity — src/components/Card/CardFace.tsx — CC 26, MI 68.69, SLOC 36
medium method-complexity — src/components/Card/CardFace.tsx:44 — CC 18 SLOC 16
low structural-dup — components/Card/CardFace.tsx:224 — 14 duplicate lines / 61 tokens with components/Card/CardFace.tsx:250

✅ Resolved (3)

src/components/Card/CardFace.tsx:43 — CardFace: MDD 74.0 (uses across many lines from declarations)
src/components/Card/CardFace.tsx — CC 24, MI 69.54, SLOC 34
src/components/Card/CardFace.tsx:43 — CC 16 SLOC 14

github-actions · 2026-07-17T15:24:25Z

🧪 UI test report — ✅ all green

Suites

✅ unit: 1997 ran, 0 failed, 0 skipped, 31.9s

📊 Coverage (unit)

metric	%
statements	59.6%
branches	43.3%
functions	48.5%
lines	59.9%

⏱ 10 slowest test cases

time	test
3.2s	`src/components/Card/share-asset/__tests__/shareAssetLayout.test.ts` › never places two stickers in heavy overlap (broad seed sweep)
1.2s	`src/utils/__tests__/demo-api.test.ts` › isDemoMode() is false when not running under Capacitor
0.4s	`src/components/Card/share-asset/__tests__/shareAssetLayout.test.ts` › every sticker stays within canvas at any count
0.3s	`src/app/actions/__tests__/api-headers.test.ts` › should include Content-Type in validateInviteCode
0.3s	`src/app/(mobile-ui)/withdraw/__tests__/withdraw-states.test.tsx` › Bank withdrawal keeps the $1 minimum for sub-$1 amounts
0.2s	`src/components/Card/share-asset/__tests__/shareAssetLayout.test.ts` › keeps stickers off the username pill (final pass respects the keep-out)
0.2s	`src/app/actions/__tests__/api-headers-extended.test.ts` › should not include apiKey in validateInviteCode body
0.2s	`src/services/__tests__/rain-stale-approval.test.ts` › surfaces the backend copy verbatim on the typed error
0.1s	`src/utils/__tests__/demo-balance.test.ts` › debits and floors at zero
0.1s	`src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx` › should handle invalid ETH address (missing 0x prefix)

_{📍 Inline annotations are in the **Unit test report** check above. Coverage artifact: `coverage-unit`. Generated by `.github/workflows/tests.yml`.}

kushagrasarathe · 2026-07-17T15:30:14Z

@coderabbitai review

coderabbitai · 2026-07-17T15:30:38Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

The composited hand used -rotate-15 + h-full + a negative top inset, which shoved it up so the fingertips crowded the Visa and the gesture tilted off from the finalised Rain art. Anchor it upright at the bottom (h-90%) so the fingertips clear the top logos and the arm sweeps to the bottom-right corner.

notion-workspace · 2026-07-17T16:10:01Z

Review card asset discrepancy

Two corrections after seeing the real card: - The PEANUT wordmark was rendering white (PEANUT_LOGO is the dark-bg variant). Use PEANUTMAN + PEANUT_LOGO_BLACK for the black lockup the finalised art shows. - The bottom-anchored hand covered the eye toggle and the revealed PAN/CVV. Slide it diagonally off the bottom-right corner while details are shown or being fetched (loading skeletons included), and move the masked/error eye inline with the number so it stays in a hand-free zone. The hand slides back when the card is re-masked.

kushagrasarathe · 2026-07-17T17:07:53Z

@coderabbitai review

coderabbitai · 2026-07-17T17:08:41Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

vercel Bot deployed to Preview July 17, 2026 15:27 View deployment

vercel Bot deployed to Preview July 17, 2026 16:13 View deployment

vercel Bot deployed to Preview July 17, 2026 17:07 View deployment

kushagrasarathe marked this pull request as ready for review July 17, 2026 17:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(card): match in-app card art to finalised Visa Platinum lockup#2444

fix(card): match in-app card art to finalised Visa Platinum lockup#2444
kushagrasarathe wants to merge 3 commits into
devfrom
fix/card-art-visa-platinum

kushagrasarathe commented Jul 17, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

github-actions Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

kushagrasarathe commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

notion-workspace Bot commented Jul 17, 2026

Uh oh!

kushagrasarathe commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

kushagrasarathe commented Jul 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Risk

Design notes

QA

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

github-actions Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code-analysis diff

🆕 New findings (4)

✅ Resolved (3)

Uh oh!

github-actions Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🧪 UI test report — ✅ all green

Suites

📊 Coverage (unit)

Uh oh!

kushagrasarathe commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

notion-workspace Bot commented Jul 17, 2026

Uh oh!

kushagrasarathe commented Jul 17, 2026

Uh oh!

coderabbitai Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

kushagrasarathe commented Jul 17, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Jul 17, 2026 •

edited

Loading

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

github-actions Bot commented Jul 17, 2026 •

edited

Loading

github-actions Bot commented Jul 17, 2026 •

edited

Loading

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading