fix(widget): clean up icon fallbacks and pending action labels#531
Conversation
- Render a grey circle with the chain initial when a network logo is missing or fails to load, on a white badge so dark chain logos (e.g. Ethereum) stay visible. - Use a white background with black text for the token icon monogram fallback. - Humanize unmapped pending action types (e.g. RWA actions) so the position details "Action required" card, action button, and review heading never render raw translation keys.
|
📝 WalkthroughWalkthroughNetwork logo components now accept and forward a ChangesNetwork Logo Fallback System
Pending Action Type Humanization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/widget/src/pages-dashboard/position-details/position-details-model.tsx (1)
632-641: Align pending-action label fallback withhumanizePendingActionType(match existing files; it’s slightly more defensive).
formatEnumValueandhumanizePendingActionTypeare equivalent for current pending-action strings (both split on_and capitalize segments). The difference ishumanizePendingActionTypefilters out empty segments (filter(Boolean)), which avoids odd spacing if the API ever includes double/trailing underscores.🔄 Proposed fix to use consistent formatter
+import { humanizePendingActionType } from "../../utils/formatters"; import { formatCooldownDays, - formatEnumValue, formatMinStake, formatNetworkName, formatOptionalDays, formatRewardClaiming, formatRewardRateLabel, formatRewardTokenLabel, } from "../overview/earn-details/earn-details-formatters";const formatPendingActionLabel = ( type: YieldPendingActionDto["type"], t: TFunction ) => t(`position_details.pending_action.${type.toLowerCase()}`, { - defaultValue: formatEnumValue(type), + defaultValue: humanizePendingActionType(type), });🤖 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 `@packages/widget/src/pages-dashboard/position-details/position-details-model.tsx` around lines 632 - 641, Replace the use of formatEnumValue in formatPendingActionLabel with humanizePendingActionType so the fallback matches other files and defensively filters out empty segments; update the import/usage in the formatPendingActionLabel function (referencing YieldPendingActionDto["type"], formatPendingActionLabel, humanizePendingActionType, and formatEnumValue) so the t(...) defaultValue calls humanizePendingActionType(type) instead of formatEnumValue(type).
🤖 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
`@packages/widget/src/pages-dashboard/position-details/position-details-model.tsx`:
- Around line 632-641: Replace the use of formatEnumValue in
formatPendingActionLabel with humanizePendingActionType so the fallback matches
other files and defensively filters out empty segments; update the import/usage
in the formatPendingActionLabel function (referencing
YieldPendingActionDto["type"], formatPendingActionLabel,
humanizePendingActionType, and formatEnumValue) so the t(...) defaultValue calls
humanizePendingActionType(type) instead of formatEnumValue(type).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2df8c815-e4db-4a91-9fa9-fa095d72599d
📒 Files selected for processing (10)
packages/widget/src/components/atoms/image/index.tsxpackages/widget/src/components/atoms/token-icon/index.tsxpackages/widget/src/components/atoms/token-icon/network-icon-image/index.tsxpackages/widget/src/components/atoms/token-icon/network-icon-image/style.css.tspackages/widget/src/components/atoms/token-icon/provider-icon/index.tsxpackages/widget/src/components/molecules/reward-token-details/index.tsxpackages/widget/src/pages-dashboard/position-details/components/position-details-actions.tsxpackages/widget/src/pages-dashboard/position-details/position-details-model.tsxpackages/widget/src/pages/position-details/components/static-action-block.tsxpackages/widget/src/utils/formatters.ts
| const backgroundColor = getBackgroundColor(name); | ||
|
|
||
| const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="50" fill="${backgroundColor}" /><text x="50" y="50" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="48" font-weight="700" text-anchor="middle" dominant-baseline="central">${initial}</text></svg>`; | ||
| const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="49" fill="#FFFFFF" stroke="rgba(0,0,0,0.08)" stroke-width="2" /><text x="50" y="50" fill="#000000" font-family="Arial, sans-serif" font-size="48" font-weight="700" text-anchor="middle" dominant-baseline="central">${initial}</text></svg>`; |
There was a problem hiding this comment.
hm, with this we have white fallbacks on white background. why not color backgrounds?
There was a problem hiding this comment.
it's the shared monogram used standalone in token/provider/validator icons (no container behind them), so the white circle's needed there. The badge just reuses it now.
There was a problem hiding this comment.
here is with this change - is this expected? @sandy-yield
There was a problem hiding this comment.
Yes, those are expected. If we don't have the image, it shows the initial letter of the coin.
| const [erroredUri, setErroredUri] = useState<string | null>(null); | ||
|
|
||
| const hasError = erroredUri === networkLogoUri; | ||
|
|
||
| if (!networkLogoUri || hasError) { | ||
| const initial = networkName?.trim()?.[0]?.toUpperCase() ?? "?"; | ||
|
|
||
| return ( | ||
| <Box className={fallbackContainer} data-rk="token-network-logo-fallback"> | ||
| <Box hw={tokenNetworkLogoHw} display="flex"> | ||
| <ChainInitial initial={initial} /> | ||
| </Box> | ||
| </Box> | ||
| ); |
There was a problem hiding this comment.
we already have image error handling with Image component
e.g. <Image fallbackName={networkName} />
There was a problem hiding this comment.
dropped the custom error state + SVG, now using . Removed the unused coin icon too.
| const baseContainer = { | ||
| position: "absolute", | ||
| bottom: -2, | ||
| right: -2, | ||
| borderRadius: "50%", | ||
| padding: "4px", | ||
| backgroundColor: "rgba(37,37,37, 0.95)", | ||
| padding: "3px", | ||
| display: "flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| } as const; |
There was a problem hiding this comment.
this loses style type safety. compose styles with style utility. e.g.
const base = style({ padding: 12 });
const primary = style([base, { background: 'blue' }]);There was a problem hiding this comment.
Done — now style([baseContainer, { ... }]).
Drop the manual error state and ChainInitial SVG in NetworkLogoImage in favor of the Image component's built-in fallbackName monogram. Compose network-icon styles with the style() utility for type safety, and remove the now-unused coin icon.
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/widget/src/components/atoms/token-icon/network-icon-image/index.tsx (1)
12-23:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winHandle empty
networkLogoUrias missing so fallback always works.On Line 19,
src={networkLogoUri}can pass"", which does not trigger thesrc ?? generatedFallbackSrcpath inImage. If upstream returns empty strings for missing logos, the monogram fallback may not render reliably. Normalize empty values toundefinedbefore passingsrc.Proposed fix
export const NetworkLogoImage = ({ networkLogoUri, networkName, tokenNetworkLogoHw = "3", -}: NetworkLogoImageProps) => ( +}: NetworkLogoImageProps) => { + const normalizedNetworkLogoUri = networkLogoUri.trim() || undefined; + + return ( <Box className={logoContainer} data-rk="token-network-logo"> <Image - src={networkLogoUri} + src={normalizedNetworkLogoUri} fallbackName={networkName} wrapperProps={{ hw: tokenNetworkLogoHw }} imgProps={{ hw: tokenNetworkLogoHw, className: logoImage }} /> </Box> -); + ); +};🤖 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 `@packages/widget/src/components/atoms/token-icon/network-icon-image/index.tsx` around lines 12 - 23, The NetworkLogoImage component passes networkLogoUri directly to Image.src which can be an empty string and bypass Image's fallback logic; update NetworkLogoImage to normalize empty string values (networkLogoUri) to undefined before passing to the Image component (i.e., compute a local src value from networkLogoUri that sets "" to undefined) so the Image component's fallbackName/monogram behavior always triggers when the logo URI is missing.
🤖 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.
Outside diff comments:
In
`@packages/widget/src/components/atoms/token-icon/network-icon-image/index.tsx`:
- Around line 12-23: The NetworkLogoImage component passes networkLogoUri
directly to Image.src which can be an empty string and bypass Image's fallback
logic; update NetworkLogoImage to normalize empty string values (networkLogoUri)
to undefined before passing to the Image component (i.e., compute a local src
value from networkLogoUri that sets "" to undefined) so the Image component's
fallbackName/monogram behavior always triggers when the logo URI is missing.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 58db955b-ee2d-4a7a-89c7-ffc2fd933a22
📒 Files selected for processing (2)
packages/widget/src/components/atoms/token-icon/network-icon-image/index.tsxpackages/widget/src/components/atoms/token-icon/network-icon-image/style.css.ts
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/widget/src/utils/index.ts (1)
46-52: Remove the commented-outgetBackgroundColorblock (unused)
getBackgroundColor(andcolorsTuple) appear only in the commented-out code inpackages/widget/src/utils/index.ts; no imports/usages remain.🧹 Proposed fix to remove commented code
-// const colorsTuple = ["`#6B69D6`", "`#F1C40F`", "`#1ABC9C`", "`#E74C3C`"]; - -// export const getBackgroundColor = (stringInput: string) => { -// const char = stringInput.charCodeAt(0); - -// return colorsTuple[char % colorsTuple.length] ?? colorsTuple[0]; -// }; -🤖 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 `@packages/widget/src/utils/index.ts` around lines 46 - 52, Remove the unused commented-out block containing colorsTuple and getBackgroundColor from packages/widget/src/utils/index.ts; locate the commented lines that define colorsTuple and the getBackgroundColor function and delete them, and then run a quick grep/TS search for symbols colorsTuple and getBackgroundColor to confirm there are no remaining usages before committing.
🤖 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 `@packages/widget/src/utils/index.ts`:
- Around line 46-52: Remove the unused commented-out block containing
colorsTuple and getBackgroundColor from packages/widget/src/utils/index.ts;
locate the commented lines that define colorsTuple and the getBackgroundColor
function and delete them, and then run a quick grep/TS search for symbols
colorsTuple and getBackgroundColor to confirm there are no remaining usages
before committing.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: dea573d2-c115-40fe-8069-c9c4fd1b2ee2
📒 Files selected for processing (1)
packages/widget/src/utils/index.ts
3 participants
BEFORE:
AFTER:
Added
Description of new functionality, feature, or content that has been added in this pull request.
Changed
Description of the modifications made to existing functionality, feature, or content in this pull request. This could include changes to code, CI, documentation, etc.
Summary by CodeRabbit
New Features
Style