feat(earns): revamp positions list and detail pages with new UI#3020
Open
feat(earns): revamp positions list and detail pages with new UI#3020
Conversation
- Restyle table header and rows with theme tokens, inset borders via ::after pseudo-elements, and rounded corners - Consolidate position protocol info into single badge (dex | fee | #id) - Move status badge inline with token pair name - Update pagination styling with subtle background and rounded corners - Rename page title to 'My Liquidity Positions' and button to 'Claim All' - Fix actions info helper icon alignment
…to feat/positions-revamp
Auto Deploy Pull RequestADPR instance has been created! Information
|
…to feat/positions-revamp
Auto Deploy Pull RequestNotes:
|
Auto Deploy Pull RequestNotes:
|
…I components Restructure position detail into two-column layout with tab navigation (Information, Earnings, History). Add EarningsTab with charts, HistoryTab with transaction history, and InformationTab extracted from RightSection. Update styled components to match new design (DarkCard, CompactPriceBox, ClaimButton, TabMenu). Extend PositionHistory API types with transaction details and new history types (WITHDRAW, COLLECT_FEE).
Auto Deploy Pull RequestNotes:
|
…to feat/positions-revamp
Add onReady callback to LiquidityChart that fires when ticksAtLimit is computed. InformationTab now renders chart hidden until ready, preventing a layout jump between skeleton disappearing and chart appearing.
…to feat/positions-revamp
in position detail The revamp accidentally dropped the secondary action link that appears above the main action buttons, showing 'Reposition to new range' when in-range or 'Increase Liquidity' when out-of-range.
Auto Deploy Pull RequestNotes:
|
…ling Introduce PositionDetailContext and provider to share position state across PositionDetail sub-components (Header, LeftSection, RightSection, InformationTab, EarningsTab, HistoryTab, RewardSection) instead of passing 15+ props through multiple levels. Also stabilize callbacks with useCallback/useMemo to reduce unnecessary re-renders.
Auto Deploy Pull RequestNotes:
|
…oning Replace hardcoded width/position (60%/80%/100%) with tick-based logarithmic scale for accurate proportional display. Narrow ranges (stablecoins) now appear visually narrower than wide ranges. Add smart price formatter that adapts significant digits based on the difference between min/max prices (e.g. 1.0003 vs 1.0007 shows full precision, 595.49 vs 716.42 stays concise). Fix balance column text overflow with min-width: 0 on grid cells.
Replace the binary green/purple color logic with smooth RGB interpolation based on the indicator's position on the range bar, matching the gradient.
Add max-width and text-overflow ellipsis to the protocol badge (dex name, fee tier, position ID) to prevent long labels from pushing other columns. Full text is shown on hover via tooltip.
Auto Deploy Pull RequestNotes:
|
…to feat/positions-revamp
…position list - Consolidate useKemRewards from 3 calls to 1 on UserPositions page - Remove duplicate useZapMigrationWidget from TableContent - Fix handleFetchUnclaimedFee stale closure with functional updater - Memoize onSortChange and updateFiltersWithLoading callbacks - Skip interval timer when feeInfoFromRpc is empty - Remove unused positions prop from PositionBanner
Auto Deploy Pull RequestNotes:
|
- Add RefetchIndicator progress bar during background data polling - Add staggered fade-in animation for position rows on load/filter - Add AnimatedNumber component with roll transition on value changes - Apply animated numbers to banner stats and table row values - Respect prefers-reduced-motion for all animations - Conditionally pause RefetchIndicator animation when hidden
Auto Deploy Pull RequestNotes:
|
…page - Add fadeIn/slideDown animations to page enter, tab switch, dropdown, migration banner, and chart reveal - Replace static numbers with AnimatedNumber roll transitions for fees, liquidity, APR, and reward values (consistent with position list) - Fix ClaimButton disabled guards to explicitly check for undefined position - Simplify RewardSection ClaimButton onClick to remove redundant guards
tienkane
changed the title
Auto Deploy Pull RequestNotes:
|
…to feat/positions-revamp
Auto Deploy Pull RequestNotes:
|
…tions Full-range positions (0 to ∞) showed misleading percentages like -100.0000%. Skip percentage display when both isMinPrice and isMaxPrice are true.
…to feat/positions-revamp
…e positions Full-range positions (0 to ∞) caused broken zoom ratio calculation, resulting in a skewed and unreadable chart. Use pool category zoom levels instead to center the view around the current price.
Auto Deploy Pull RequestNotes:
|
1 similar comment
Auto Deploy Pull RequestNotes:
|
… with graceful fade-out Replace the pure CSS RefetchIndicator with a React component that completes its current animation cycle before fading out, and handles prefers-reduced-motion without deadlocking.
…rflow hidden Move overflow:hidden from RightColumn to TabMenu so the remove liquidity dropdown can render outside the container while tab backgrounds still respect rounded corners.
Auto Deploy Pull RequestNotes:
|
…to feat/positions-revamp
Auto Deploy Pull RequestNotes:
|
…llModal - Add KS Rewards / Bonus tabs to ClaimAllModal with controlled tab state - Implement on-chain Merkl distributor claim via useClaimMerklRewards hook - Fetch Merkl API per-chain individually to avoid single unsupported chain failing the entire request - Track Merkl claim txs via pendingClaims and refetch rewards on confirmation - Group Merkl rewards by chain (chainRewards) in useMerklRewards - Replace hardcoded hex colors with theme tokens in ClaimAllModal styles
Remove Uniswap-only restriction for Merkl bonus rewards - now all protocols and non-farming positions can receive Merkl incentives. Add campaignRewards grouping by protocol name from Merkl API breakdowns, CampaignRewardInfo type, and updated reward tooltips across position detail, pool explorer, and user positions views.
Replace generic AprDetailTooltip with PositionAprTooltip on position detail page, showing per-campaign APR breakdown (EG, LM, Merkl campaigns) with protocol icons. Also clean up useMerklRewards by removing console.log and unused 'rewards' return field.
This reverts commit d4ba8a0.
Auto Deploy Pull RequestNotes:
|
Auto Deploy Pull RequestNotes:
|
- Pick chain with the highest claimableUsdValue instead of the first one in the list when opening the modal or switching tabs - Remove stray cursor: pointer on PositionTableHeaderFlexItem
- Remove campaignRewards grouping from useMerklRewards; replace with token-level merge across Merkl entries (same chainId+address summed) - Flatten PositionBanner merkl tooltip to a single per-token list under '3rd Party (Merkl) Incentives' header - Merge tokens across positions in baseRewardsForReturn to avoid duplicate rows and inflated totals when positionsFilter is active - Accumulate claimableUsdValue per entry to avoid stale-price math when the same token comes from multiple campaigns - Fix unclaimedAmount to accumulate from existing.unclaimedAmount - Remove unused CampaignRewardInfo type
Replace per-token Merkl link with a single underlined link on the '3rd Party (Merkl) Incentives' tooltip title.
Auto Deploy Pull RequestNotes:
|
Previously, the 'Claim All' button was disabled when there were no KyberSwap rewards, even if the user had claimable Merkl bonus rewards.
Auto Deploy Pull RequestNotes:
|
- Add searchTokensBySymbol endpoint to ksSetting service - Two-step logo lookup in useMerklRewards: fetch by address first, then fall back to symbol search for tokens missing in KS token DB - Share logo caches and queried-symbols set at module level so all 7 useMerklRewards instances dedupe API calls across the app - Always apply resolved symbol logos from cache so concurrent hook instances pick up results fetched by a sibling instance
Auto Deploy Pull RequestNotes:
|
Auto Deploy Pull RequestNotes:
|
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.
Summary
PositionDetailContextto eliminate prop drilling across detail sub-componentsAnimatedNumbercomponent and UX animations (fade-in, slide-up) to position list and detail pages