Skip to content

Fit the MoonPay Trade logo to the theme - #6267

Merged
j0ntz merged 2 commits into
developfrom
jon/moonpay-trade-logo-crop
Oct 20, 2026
Merged

j0ntz merged 2 commits into
developfrom
jon/moonpay-trade-logo-crop

Conversation

@j0ntz

@j0ntz j0ntz commented Oct 16, 2026 •

Copy link
Copy Markdown
Contributor

Description

MoonPay Trade transaction rows and the transaction details tile cropped the provider logo, and on the light theme the logo was invisible.

The CDN icon for mptrade and mptradedefi was a white mark that filled its whole square, which the circular crop cut, and there was no light-theme variant. On content.edge.app, exchangeIcons/mptrade/ and exchangeIcons/mptradedefi/ now hold:

  • icon.png: the original transparent mark, scaled to 70% so it sits inside the circle
  • icon-light.png: the same mark in black

Both plugins join themedSwapPluginIcons, the set Houdini already uses. Transaction rows and details now show the same fitted, theme-colored logo as the "powered by" badge and Exchange Settings. This follows the task comment's fallback: scale both logos the same.

A transaction whose payee name matches the MoonPay Trade merchant contact ("MoonPay Trade (DeFi)" or "MoonPay Trade (Centralized)") used to take that contact's static thumbnail first. Those merchant entries now carry their plugin id, and getMerchantThumbnail resolves them through getPluginIdIcon. These transactions get the same themed, fitted logo. The MoonPay Trade rows in the payee picker get it too ("Choose a Recipient", opened by tapping a transaction's name), which draws a fitted icon with resizeMode="contain".

A separate details-scene logo is feasible: pluginIdIcons can point a provider at any CDN file, independent of the powered-by icon. The first pass did exactly that with the purple mptrade.png. The purple mark was rejected in favor of editing the original transparent icons, and those originals are the powered-by assets. One shared file per theme is the simpler result. A separate file would also need its own light variant.

Only the MoonPay Trade icons change here. Houdini and MoonPay Trade are the only providers with a light-theme icon on the CDN. Every other provider's transaction row uses one static image for both themes. Seven of those images are white-only marks: 0x Gasless, Cosmos IBC, Fantom Sonic Upgrade, LI.FI, Rango, SideShift and SwapKit. Several others run to the image edge and may crop. Each needs a new light asset, with design input for any multi-color logo. This Asana task tracks them, including their payee picker rows: once a plugin is themed and its merchant entry carries a pluginId, the picker picks it up with no further change. Light mode is no worse for those providers after this PR, since their images and cropping are unchanged.

The MoonPay buy/sell (ramp) logo, moonpay_symbol_prp.png, is a different asset and is out of scope. Every place it appears (the powered-by card, the payment option provider pill, the payment method row) renders it with resizeMode="contain" and no circular crop, and buy/sell transaction rows show no provider logo.

A second commit fixes the Settings > Theme picker (developer mode only), which never applied the chosen mode. Since "Key radio rows on a value" (0db8346), RadioListModal matches selected against each row's value and resolves with it, but the handler still passed and looked up the label. It now matches on the value, and a scene test pins that contract. The CHANGELOG has no entry for it because no release shipped the break.

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

  • Yes
  • No

Dependencies

none

Requirements

If you have made any visual changes to the GUI. Make sure you have:

  • Tested on iOS device
  • Tested on Android device
  • Tested on small-screen device (iPod Touch)
  • Tested on large-screen device (tablet)

Test evidence

a27e630
2026-10-16

1. light tx row

2. light tx details

3. light exchange settings logo

4. theme picker switches to dark

5. dark tx row

6. dark tx details

7. light powered by

8. dark powered by

9. light merchant named row

10. light merchant named details
f1c5984
amend! Apply the theme picked in Settings
2026-10-19

11. light payee picker moonpay rows

Note

Low Risk
Visual and settings UX changes only; no auth, payments, or transaction logic.

Overview
Fixes MoonPay Trade (mptrade / mptradedefi) logos in transaction rows, details, exchange UI, and payee picker by treating them like other themed swap providers: theme-specific CDN assets (icon.png / icon-light.png) with fit: true so circular thumbnails use contain instead of cropping an edge-to-edge white mark.

Merchant contacts for MoonPay Trade now carry a pluginId, and getMerchantThumbnail resolves those names through getPluginIdIcon so merchant-named transactions match provider swap logos. useContactThumbnail returns a PluginIdIcon (uri + fit) instead of a bare URL; list/details and ContactListModal honor the fit flag consistently.

Separately, Settings → Theme (developer mode) applies the chosen mode again by passing themeMode values into RadioListModal instead of localized labels, with a scene test covering writeThemeMode.

Reviewed by Cursor Bugbot for commit 01da5db. Bugbot is set up for automated code reviews on this repo. Configure here.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 16, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-16T19:25:21.384940Z ec1c979 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ec1c97950f

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/util/CdnUris.ts
@j0ntz
j0ntz force-pushed the jon/moonpay-trade-logo-crop branch from ec1c979 to a27e630 Compare October 16, 2026 19:36

@peachbits peachbits left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verified at a27e630: tsc and eslint on the changed files are clean (warnings are all pre-existing), and the six related jest suites pass (31 tests, 4 snapshots). The Codex merchant-thumbnail finding is fixed as described: a row named after either MoonPay Trade merchant now gets the themed, fitted logo, and useContactThumbnail.test.ts fails if either pluginId or the fit: true is removed.

The report is about this logo. MoonPay buy and sell rows draw no provider logo at all (moonpay has no pluginIdIcons entry or merchant contact, and the ramp sell sets no payee name), so MoonPay Trade is the only MoonPay mark a transaction row can show.

The CDN files are live for both plugins. The new icon.png keeps the white mark inside 90% of the inscribed circle, so on 4.51.2 and later, dark-theme rows stop cropping it once a device fetches the new file. Light-theme rows on those versions stay white, as before. One note for QA: every surface loads these through FastImage, whose default cache never revalidates a URL it already has. A device that showed the old icon.png keeps that copy, so on this build its dark-theme mark draws whole at the old full size, larger than the 70% light one, until the cache drops it. Older builds keep the crop on such devices.

The theme fix is right. The rows always carried value: mode, and since "Key radio rows on a value" the modal matches selected against it and resolves with it, so neither the checkmark nor the pick worked. Nothing changes for anyone who never opens the developer-mode Theme row. The commit message could name that cause.

Comment thread src/constants/MerchantContacts.ts
Comment thread src/components/scenes/SettingsScene.tsx
Comment thread src/hooks/redux/useContactThumbnail.ts Outdated
Comment thread CHANGELOG.md Outdated
@j0ntz
j0ntz force-pushed the jon/moonpay-trade-logo-crop branch from a27e630 to f1c5984 Compare October 19, 2026 17:51

@claude claude Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude Code Review

Claude Code Review is paused for this repository because its GitHub organization is not linked to your Claude organization.

To turn it back on, one person needs both roles: owner of the GitHub organization (or the account owner, for a personal repository) and admin or owner of your Claude organization. If that is not you, pass this on to someone who is.

Open Organization settings, Git providers and click Link next to the GitHub organization's name. If it is not listed, click Enable GitHub integration or Connect your GitHub first, whichever the page shows.

New pull requests are then reviewed as before. To get a review on one that is already open, someone with write access can comment @claude review.

Tip: disable this comment in your organization's Code Review settings.

@j0ntz

j0ntz commented Oct 19, 2026

Copy link
Copy Markdown
Contributor Author

The theme commit message now names the cause: "Key radio rows on a value" (0db8346) made RadioListModal match and resolve on the row value while the handler still used the label.

@peachbits peachbits left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Re-verified at f1c5984. All four items from the last review are handled:

  • The payee picker now resolves each row through getMerchantThumbnail first, so both MoonPay Trade rows show the themed, fitted mark, as in the light-theme screenshot. Rows without a pluginId merchant keep their own image and cover, as before. The other white-only providers will get the same once their merchant entries carry a pluginId, which EdgeApp/edge-react-gui#6274 adds, so the picker needs no further change.
  • The new SettingsScene test fails against develop's handler and against an item.name === result lookup, so it pins the pick.
  • getMerchantThumbnail delegates to getPluginIdIcon, and useContactThumbnail.test.ts still fails if either MoonPay Trade pluginId or the delegation is removed.
  • The theme CHANGELOG line is gone, and the commit message names 0db8346 as the cause.

tsc is clean, eslint on the 11 changed TS files reports the same 11 warnings as base, and the six related suites pass (32 tests, 4 snapshots).

@j0ntz

j0ntz commented Oct 20, 2026

Copy link
Copy Markdown
Contributor Author

No further changes; this approval covers head f1c5984, which lands as is.

j0ntz added 2 commits October 20, 2026 11:20
MoonPay Trade rows cropped the provider's full-bleed white mark to a
circle, and on the light theme the white mark vanished. The CDN icons
now carry the mark scaled inside the crop circle, with a black
icon-light.png beside each, so both plugins join the themed swap logo
set: transaction rows and details show the same fitted logo as the
powered-by badge, in the color that matches the theme.
"Key radio rows on a value" (0db8346) made RadioListModal match
`selected` against each row's value and resolve with it. The Theme rows
already carried the mode as their value, but the handler still passed
the label as `selected` and looked the result up by label, so neither
the checkmark nor the pick worked. Match on the value instead.
@j0ntz
j0ntz force-pushed the jon/moonpay-trade-logo-crop branch from f1c5984 to 01da5db Compare October 20, 2026 18:23

@claude claude Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude Code Review

Claude Code Review is paused for this repository because its GitHub organization is not linked to your Claude organization.

To turn it back on, one person needs both roles: owner of the GitHub organization (or the account owner, for a personal repository) and admin or owner of your Claude organization. If that is not you, pass this on to someone who is.

Open Organization settings, Git providers and click Link next to the GitHub organization's name. If it is not listed, click Enable GitHub integration or Connect your GitHub first, whichever the page shows.

New pull requests are then reviewed as before. To get a review on one that is already open, someone with write access can comment @claude review.

Tip: disable this comment in your organization's Code Review settings.

@j0ntz
j0ntz enabled auto-merge October 20, 2026 18:25
@j0ntz
j0ntz merged commit 9ecd129 into develop Oct 20, 2026
7 checks passed
@j0ntz
j0ntz deleted the jon/moonpay-trade-logo-crop branch October 20, 2026 18:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants