feat: improve Trade features

[therealemjy]

Jira ticket(s)

VEN-1172

Changes

• display collateral utilization of Trade positions
• colorize liquidation price of Trade positions
• improve Slider component

[changeset-bot]

🦋 Changeset detected

Latest commit: 7b12c41

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@venusprotocol/ui	Minor
@venusprotocol/evm	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dapp-preview	Ready	Preview	May 21, 2026 3:30pm
dapp-testnet	Ready	Preview	May 21, 2026 3:30pm
venus.io	Ready	Preview	May 21, 2026 3:30pm

[greptile-apps]

Greptile Summary

This PR extends Trade position views with collateral utilization data, colorizes the liquidation price based on health factor, and improves the Slider component with tick marks and a hover tooltip.

• Adds dsaUtilizedBalanceMantissa through the entire data pipeline (getRawTradePositions → formatToTradePosition → TradePosition type → UI), capping it to the already-capped DSA balance in both the API fetch and simulation paths.
• Introduces a LiquidationPrice sub-component that applies useHealthFactor coloring; calculateHealthFactor safely handles a zero borrow balance by returning +Infinity, so the ?? 0 fallbacks in the column render are safe.
• Fixes four disabled-state color token aliases in theme.css that were incorrectly pointing at the active variant, and corrects the three previously flagged Slider bugs (missing key, wrong valuePercentage formula with non-zero min, and tick-mark active-state comparison).

Confidence Score: 5/5

Safe to merge; the core data pipeline and UI logic are correct, and the previously identified Slider bugs are now fixed.

All production-facing changes — the dsaUtilizedBalance pipeline, health-factor-based liquidation price coloring, and disabled color token fixes — are logically sound. The two findings are test-data quality and a minor typography token preference, neither of which affects runtime behavior.

The formatToTradePosition snapshots contain misleading values for tests that swap the DSA token without updating the mantissa fixture.

Important Files Changed

Filename	Overview
apps/evm/src/utilities/formatToTradePosition/index.ts	Adds dsaUtilizedBalanceTokens/Cents fields by converting the new dsaUtilizedBalanceMantissa input; logic is correct and mirrors the existing dsaBalance pattern.
apps/evm/src/clients/api/queries/getRawTradePositions/index.ts	Extracts capitalUtilizedMantissa from the API response and caps it to the already-capped dsaBalanceMantissa before passing it to formatToTradePosition; logic is correct.
apps/evm/src/components/Slider/index.tsx	Refactored to a function component; correctly computes valuePercentage and uses it for tick-mark active state and tooltip; tooltip uses raw text-xs instead of the design-token text-b2r.
apps/evm/src/pages/Trade/Positions/PositionList/useColumns/LiquidationPrice/index.tsx	New component that colorizes the liquidation price text using useHealthFactor; calculateHealthFactor handles borrowBalanceCents === 0 by returning +Infinity (green), so the default ?? 0 fallbacks are safe.
apps/evm/src/utilities/formatToTradePosition/tests/snapshots/index.spec.ts.snap	Some deducts-DSA-balance snapshots show nonsensical dsaUtilizedBalance values (89 trillion tokens) because the base fixture computes dsaUtilizedBalanceMantissa from XVS decimals but those tests switch the DSA vToken to a 6-decimal asset without re-computing the mantissa.
apps/evm/src/hooks/useSimulateTradePositionMutations/index.ts	Correctly caps simulated dsaUtilizedBalanceTokens to the simulated dsaBalanceTokens before forwarding to formatToTradePosition.
packages/ui/src/theme.css	Fixes disabled color tokens that were incorrectly aliasing the active variant; background-disabled, dark-blue-disabled, dark-grey-disabled, and light-grey-disabled now reference the correct -disabled-rgb variables.

_{Reviews (3): Last reviewed commit: "feat: improve Trade features" | Re-trigger Greptile}

[therealemjy]

@greptile

[github-actions]

Coverage Report for ./apps/evm

Status	Category	Percentage	Covered / Total
🔵	Lines	81.23%	45493 / 56000
🔵	Statements	81.23%	45493 / 56000
🔵	Functions	62.41%	651 / 1043
🔵	Branches	72.2%	5115 / 7084

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
apps/evm/src/clients/api/queries/getRawTradePositions/index.ts	98.93%	84%	100%	98.93%	1
apps/evm/src/components/LayeredValues/index.tsx	100%	100%	100%	100%
apps/evm/src/components/Slider/index.tsx	96.82%	60%	33.33%	96.82%	80-81
apps/evm/src/components/Slider/TickMark/index.tsx	100%	0%	100%	100%
apps/evm/src/components/TokenListWrapper/index.tsx	85.93%	88%	66.66%	85.93%	86-90, 124-137
apps/evm/src/hooks/useSimulateTradePositionMutations/index.ts	98.38%	92.85%	100%	98.38%	1
apps/evm/src/pages/Trade/OperationForm/OpenForm/useGetNewTradePosition/index.ts	99%	94.73%	100%	99%	1
apps/evm/src/pages/Trade/PairInfo/index.tsx	95.85%	75%	100%	95.85%	145-146, 155-158, 191, 198
apps/evm/src/pages/Trade/PairInfo/TokenSelect/index.tsx	100%	71.42%	100%	100%
apps/evm/src/pages/Trade/Positions/PositionList/index.tsx	100%	92.85%	100%	100%
apps/evm/src/pages/Trade/Positions/PositionList/RowFooter/StatusTab/index.tsx	97.61%	0%	100%	97.61%	43
apps/evm/src/pages/Trade/Positions/PositionList/useColumns/index.tsx	88.34%	80%	60%	88.34%	43-55, 88-89, 108-109, 153-154, 177-178
apps/evm/src/pages/Trade/Positions/PositionList/useColumns/LiquidationPrice/index.tsx	100%	0%	100%	100%
apps/evm/src/types/index.ts	98.11%	88.88%	100%	98.11%	10
apps/evm/src/utilities/formatToTradePosition/index.ts	99.15%	95.83%	100%	99.15%	1

Generated in workflow #13506 for commit 7b12c41 by the Vitest Coverage Report Action

[therealemjy]

@greptile