feat(affiliate-dashboard): swaps table visual polish#12309
Merged
kaladinlight merged 6 commits intodevelopfrom Apr 30, 2026
Merged
feat(affiliate-dashboard): swaps table visual polish#12309kaladinlight merged 6 commits intodevelopfrom
kaladinlight merged 6 commits intodevelopfrom
Conversation
Enrich every Asset returned from /v1/assets with networkIcon, networkColor, and networkName sourced from the chain's base asset (falling back to the asset's own icon/color when the base asset omits chain-level overrides). Adds the matching optional fields to the OpenAPI Asset schema so generated clients pick them up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Round of polish on the affiliate swaps table: - AssetPill: size prop (sm/md), top-left chain icon overlay (driven by the new networkIcon on Asset responses), showNetworkIcon toggle. - TxLinks: reuse AssetPill (size sm, network icon hidden) — chain identity already shown in the dedicated Sell/Buy columns. - SwapperIcon: bundled per-swapper icons + lookup component shown next to swapper name. - SwapsTable: bumped row scale (size md, fontSize md, taller tbody cells), shrunk narrow columns (BPS / Transactions / Verified / Status) with width="1%", added pl/pr breathing room on first/last cells, centered numeric headers. - format.ts: formatUsd now displays 2-4 decimals; new formatUsdFull helper returns full-precision USD for hover tooltips on Volume / Fee. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThe changes encompass comprehensive styling refinements across the affiliate dashboard, including typography scaling (font size adjustments), layout improvements (spacing and input dimensions), and component enhancements (new props like Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/affiliate-dashboard/src/components/swaps/SwapsTable.tsx (1)
28-28:⚠️ Potential issue | 🟠 MajorUnknown USD amounts are being rendered as
$0.00.Line 28 coerces
null/invalid values to0, so missing data is displayed as a real amount in Volume/Fee cells (table and card). This can mislead users and analytics interpretation.💡 Suggested fix (preserve unknown vs zero)
-const parseUsd = (v: string | null): number => parseFloat(v ?? '') || 0 +const parseUsd = (v: string | null): number | null => { + if (v == null) return null + const n = parseFloat(v) + return Number.isNaN(n) ? null : n +} + +const formatUsdMaybe = (v: string | null): string => { + const n = parseUsd(v) + return n == null ? '—' : formatUsd(n) +}Then use
formatUsdMaybe(...)where Volume/Fee values are rendered.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/affiliate-dashboard/src/components/swaps/SwapsTable.tsx` at line 28, The parser currently coerces null/invalid USD strings to 0 which causes missing data to display as $0.00; update the parseUsd function to preserve unknown values by returning number | null (i.e., parse the string and return null when parseFloat yields NaN instead of 0). Then update the places in SwapsTable where Volume/Fee are rendered to use formatUsdMaybe(...) (or other existing "maybe" formatter) so null values render as blank/placeholder while real zeros still show $0.00; reference parseUsd and formatUsdMaybe in your changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/affiliate-dashboard/src/components/settings/RegisterCard.tsx`:
- Around line 61-63: The wallet address rendered in RegisterCard (the Text that
outputs {address}) can overflow on small widths; update that Text element to
constrain width and enable truncation/wrapping (e.g., set a maxWidth or width
responsive prop and use truncation/word-break props such as isTruncated or
overflowWrap/wordBreak) so the address doesn’t break the layout on mobile while
preserving accessibility (keep the full value available via title/tooltip if
needed).
In `@packages/affiliate-dashboard/src/lib/format.ts`:
- Around line 11-20: formatUsdFull currently uses parseFloat which loses
precision; instead parse and validate the input with the project's BigNumber
type (e.g., BigNumber.from / new BigNumber(raw) depending on the lib used),
return '—' for null/invalid inputs, and produce the display string from the
BigNumber (e.g., use toFixed(18) or the BigNumber library's formatting API to
preserve all decimal digits) rather than converting to a JS Number; if you still
want locale-aware grouping, split the BigNumber string into integer and
fraction, run Intl.NumberFormat only on the integer substring, then join the
fraction back—make the change in formatUsdFull so it never calls parseFloat and
uses BigNumber parsing/formatting instead.
---
Outside diff comments:
In `@packages/affiliate-dashboard/src/components/swaps/SwapsTable.tsx`:
- Line 28: The parser currently coerces null/invalid USD strings to 0 which
causes missing data to display as $0.00; update the parseUsd function to
preserve unknown values by returning number | null (i.e., parse the string and
return null when parseFloat yields NaN instead of 0). Then update the places in
SwapsTable where Volume/Fee are rendered to use formatUsdMaybe(...) (or other
existing "maybe" formatter) so null values render as blank/placeholder while
real zeros still show $0.00; reference parseUsd and formatUsdMaybe in your
changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e924623e-c22f-4abe-88b1-13bbbb4a27b3
⛔ Files ignored due to path filters (17)
packages/affiliate-dashboard/src/components/swaps/SwapperIcon/0x-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/across-icon.svgis excluded by!**/*.svgpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/arbitrum-bridge-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/avnu-icon.jpgis excluded by!**/*.jpgpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/bebop-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/butterswap.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/cetus-icon.jpgis excluded by!**/*.jpgpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/chainflip-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/cow-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/debridge-icon.svgis excluded by!**/*.svgpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/maya_logo.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/near-intents-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/portals-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/relay-icon.svgis excluded by!**/*.svgpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/stonfi-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/sunio-icon.pngis excluded by!**/*.pngpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/thorchain-icon.pngis excluded by!**/*.png
📒 Files selected for processing (19)
packages/affiliate-dashboard/src/components/ConfigBar.tsxpackages/affiliate-dashboard/src/components/PeriodSelector.tsxpackages/affiliate-dashboard/src/components/TabBar.tsxpackages/affiliate-dashboard/src/components/overview/StatCard.tsxpackages/affiliate-dashboard/src/components/settings/AffiliateBpsCard.tsxpackages/affiliate-dashboard/src/components/settings/AuthBanner.tsxpackages/affiliate-dashboard/src/components/settings/AuthStatusBar.tsxpackages/affiliate-dashboard/src/components/settings/ConfigSummaryCard.tsxpackages/affiliate-dashboard/src/components/settings/ReceiveAddressCard.tsxpackages/affiliate-dashboard/src/components/settings/RegisterCard.tsxpackages/affiliate-dashboard/src/components/settings/SettingsCard.tsxpackages/affiliate-dashboard/src/components/swaps/AssetPill.tsxpackages/affiliate-dashboard/src/components/swaps/StatusBadge.tsxpackages/affiliate-dashboard/src/components/swaps/SwapperIcon/SwapperIcon.tsxpackages/affiliate-dashboard/src/components/swaps/SwapsTable.tsxpackages/affiliate-dashboard/src/components/swaps/TxLinks.tsxpackages/affiliate-dashboard/src/lib/format.tspackages/public-api/src/assets.tspackages/public-api/src/routes/assets/types.ts
Reverts the formatUsd 2→4 decimal bump, the formatUsdFull helper, and the Volume/Fee Tooltip wrappers. These were tied to the verified-amounts feature (still in flight) and don't belong in the visual-polish scope. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
kaladinlight
force-pushed
the
affiliate-dashboard-swaps-polish
branch
from
1a7b752 to
814ac28
Compare
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
1 participant
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.
Description
Round of visual polish on the affiliate dashboard's swaps table plus the supporting API change that makes chain identity available on Asset responses.
feat(public-api): include chain identity on Asset responses/v1/assetswithnetworkIcon,networkColor, andnetworkNamesourced from the chain's base asset (falling back to the asset's ownicon/colorwhen the base asset omits chain-level overrides).feat(affiliate-dashboard): swaps table visual polishAssetPill:sizeprop (sm/md), top-left chain icon overlay (driven by the newnetworkIcon),showNetworkIcontoggle.TxLinks: reuseAssetPill(sizesm, network icon hidden) — chain identity already shown in the dedicated Sell/Buy columns.SwapperIcondirectory: bundled per-swapper icons + lookup component shown next to the swapper name.SwapsTable: bumped row scale (size='md',fontSize='md', taller cells), shrunk narrow columns (BPS / Transactions / Verified / Status) withwidth="1%", added breathing room on first/last cells, centered numeric headers.format.ts:formatUsdnow displays 2-4 decimals; newformatUsdFullreturns full-precision USD for hover tooltips on Volume / Fee.SettingsCard: optionalheaderRightslot for actions next to the title (now used byRegisterCard).RegisterCard: restructured into aRow-based field list (Wallet + Affiliate BPS), action button moved to header.ConfigSummaryCard: drop bottom border on the last row (_lastskip).AffiliateBpsCard,ReceiveAddressCard: tightened input sizing (InputGroup w='auto', fixed-width inputs) so the action button sits flush.ConfigBar,PeriodSelector,TabBar,AuthBanner,AuthStatusBar,StatCard.Issue (if applicable)
closes #
Risk
None — UI polish on a standalone dashboard plus an additive API enrichment.
Testing
Engineering
Operations
UI-only change in an internal dashboard; no operations-side smoke needed beyond confirming the affiliate-dashboard preview deploys.
Screenshots (if applicable)
See PR conversation for before/after screenshots if needed.
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements
Bug Fixes