fix(widget): clean up icon fallbacks and pending action labels#531
Open
sandy-yield wants to merge 1 commit into
Open
fix(widget): clean up icon fallbacks and pending action labels#531sandy-yield wants to merge 1 commit into
sandy-yield wants to merge 1 commit into
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.
|
📝 WalkthroughWalkthroughThis PR introduces two independent features: a network logo image fallback system that displays chain initials when logo images fail to load, and a pending action type humanization utility that provides readable i18n defaults when translation keys are missing. ChangesNetwork Logo Fallback System
Pending Action Type Humanization
🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ 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
petar-omni
reviewed
Jun 9, 2026
| 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>`; |
Contributor
There was a problem hiding this comment.
hm, with this we have white fallbacks on white background. why not color backgrounds?
Comment on lines
+18
to
+31
| 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> | ||
| ); |
Contributor
There was a problem hiding this comment.
we already have image error handling with Image component
e.g. <Image fallbackName={networkName} />
Comment on lines
+3
to
+12
| 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; |
Contributor
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' }]);
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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