feat(evm): vault page revamp by david-sun-venus · Pull Request #5445 · VenusProtocol/venus-protocol-interface

david-sun-venus · 2026-03-09T16:06:54Z

Jira ticket(s)

VEN-730

Changes

Vault Page revamp

vercel · 2026-03-09T16:06:59Z

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

Project	Deployment	Actions	Updated (UTC)
dapp-preview	Ready	Preview	Mar 16, 2026 9:22am
dapp-testnet	Ready	Preview	Mar 16, 2026 9:22am
venus.io	Ready	Preview	Mar 16, 2026 9:22am

changeset-bot · 2026-03-09T16:07:02Z

🦋 Changeset detected

Latest commit: 1d449a6

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

This PR includes changesets to release 1 package

Name	Type
@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

greptile-apps · 2026-03-09T16:12:31Z

Greptile Summary

This PR replaces the old Staking page (/staking) with a revamped Vault page (/vaults), introducing a new Overview banner, per-vault filter/search UI, a simplified card for the Dashboard, and a new useGetTokenListUsdPrice batch-price hook. A backward-compatible redirect from /staking/* → /vaults/ is included. Previously flagged issues (wrong token decimals for daily emission, hook-after-early-return in Dashboard Vaults, missing translation keys, featuredVault undefined guard) appear to be resolved in this iteration.

Key observations:

Mock query key collision (apps/evm/src/clients/api/__mocks__/index.ts): Both useGetTokenListUsdPrice and useGetTokenUsdPrice mocks use the same [FunctionKey.GET_TOKEN_USD_PRICE] key with no discriminant, which can cause incorrect results in tests where both hooks render simultaneously.
getVaultMetadata hardcoded for XVS/VAI only (utils/index.tsx): Any future vault with a different staked token gets empty category/curator strings and silently vanishes from filtered views when a non-"All" filter is selected.
Shared FunctionKey.GET_TOKEN_USD_PRICE namespace (useGetTokenListUsdPrice.ts): Both the single-token and batch-price hooks share the same React Query function key prefix, meaning any prefix-based cache invalidation will flush both caches unnecessarily. A dedicated GET_TOKEN_LIST_USD_PRICE constant is recommended.

Confidence Score: 3/5

Safe to merge with low functional risk to end users, but two issues should be addressed before the next feature build on top of this: the test mock key collision and the vault metadata hardcoding.
The core UI and price-calculation logic is sound and previously flagged critical bugs (wrong decimals, hook ordering, missing translations) are resolved. The remaining issues are a test-reliability bug (mock query key collision that can produce flaky tests) and a forward-compatibility gap (getVaultMetadata only covers XVS/VAI), neither of which causes a production regression today but will surface as soon as a new vault type is added or the test suite expands.
apps/evm/src/clients/api/mocks/index.ts (mock key collision) and apps/evm/src/pages/Vaults/utils/index.tsx (hardcoded vault metadata)

Important Files Changed

Filename	Overview
apps/evm/src/pages/Vaults/index.tsx	New Vaults page replacing the old Staking page; correctly guards against undefined/empty vaults before rendering and composes Overview + Vaults sub-components cleanly.
apps/evm/src/pages/Vaults/Overview/index.tsx	New Overview component; correctly copies the vaults array before sorting to avoid mutation and guards featuredVault before rendering Banner. TVL reduce uses optional chaining defensively but Vault type guarantees totalStakedMantissa is always a BigNumber.
apps/evm/src/pages/Vaults/utils/index.tsx	getVaultMetadata is hardcoded for XVS and VAI only; any future vault with a different staked token gets empty category/curator strings and silently disappears from filtered views when a non-"All" filter is active.
apps/evm/src/clients/api/queries/getTokenListUsdPrice/useGetTokenListUsdPrice.ts	New batch price hook; reuses FunctionKey.GET_TOKEN_USD_PRICE, which is the same key namespace as useGetTokenUsdPrice — prefix-based cache invalidation would flush both caches unnecessarily.
apps/evm/src/clients/api/mocks/index.ts	The new useGetTokenListUsdPrice mock uses the identical query key as useGetTokenUsdPrice (no discriminant), causing cache collisions in tests that render components using both hooks simultaneously.
apps/evm/src/containers/Vault/hooks/useVaultUsdValues.ts	New hook that derives USD values for a vault; correctly uses rewardToken.decimals for dailyEmissionUsdCents and stakedToken.decimals for staked/total values.
apps/evm/src/pages/Dashboard/Vaults/index.tsx	Dashboard Vaults section revamped; hooks are correctly called before the early return, rewardToken.decimals used for dailyEarnUsd — previously flagged issues are addressed.

Comments Outside Diff (2)

apps/evm/src/pages/Vaults/utils/index.tsx, line 12-29 (link)

getVaultMetadata only handles XVS and VAI vaults — new vault types silently disappear from filtered views

The if / else if block sets category and curator only for XVS and VAI staked tokens. For any other token both fields remain ''. In Vaults/index.tsx, the filter is:
```
filterCategory === ALL_OPTION_VALUE || filterCategory === category
```
When a user applies any non-"All" filter (e.g. "Stablecoins"), a vault with category = '' will fail both conditions and be hidden — not because it doesn't match, but because it was never categorised. Users would have no way to discover new vault types through the filters.

Consider either:
1. Adding a catch-all else branch with sensible defaults, or
2. Storing metadata in a separate config map keyed by stakedToken.address so new vault types can be registered without changing this utility.
```
} else {
  // fallback for future vault types
  category = 'others';
  curator = 'venus';
  curatorLogo = <Icon name="logoMobile" />;
  status = vault.isPaused ? 'paused' : 'active';
}
```
apps/evm/src/clients/api/__mocks__/index.ts, line 451-454 (link)

Mock query key collision with useGetTokenUsdPrice

Both useGetTokenListUsdPrice and useGetTokenUsdPrice use the identical mock query key [FunctionKey.GET_TOKEN_USD_PRICE] with no additional discriminant. In any test that renders a component calling both hooks simultaneously (e.g. the Dashboard Vaults section), React Query's test cache treats them as the same query — whichever mock runs first, its return value is served to both.

Concretely:
- useGetTokenListUsdPrice returns an array (GetTokenListUsdPriceOutput), so .slice() and index-access are expected.
- useGetTokenUsdPrice returns a plain object (GetTokenUsdPriceOutput).
When the cache is shared, whichever shape wins first is handed to the other hook, causing either silent undefined results or runtime errors for callers that iterate over the list result.

The mock query key for useGetTokenListUsdPrice should include a discriminating second element (e.g. the tokens array or a string literal like 'list') to give it a distinct cache entry, matching what the real implementation already does at runtime.

_{Last reviewed commit: 5d61ff0}

github-actions · 2026-03-09T16:15:32Z

Coverage Report for ./apps/evm

Status	Category	Percentage	Covered / Total
🔵	Lines	76.07%	36670 / 48200
🔵	Statements	76.07%	36670 / 48200
🔵	Functions	59.03%	601 / 1018
🔵	Branches	71.23%	4346 / 6101

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
apps/evm/src/App/Routes/index.tsx	0%	0%	0%	0%	1-258
apps/evm/src/clients/api/index.ts	0%	0%	0%	0%	1-242
apps/evm/src/clients/api/queries/getTokenListUsdPrice/index.ts	84.84%	25%	100%	84.84%	1, 35-39
apps/evm/src/clients/api/queries/getTokenListUsdPrice/useGetTokenListUsdPrice.ts	0%	0%	0%	0%	1-65
apps/evm/src/clients/api/queries/getTokenUsdPrice/useGetTokenUsdPrice.ts	0%	0%	0%	0%	1-69
apps/evm/src/components/Delimiter/index.tsx	100%	0%	100%	100%
apps/evm/src/components/Icon/icons/ceefu.tsx	11.53%	100%	0%	11.53%	5-28
apps/evm/src/components/Icon/icons/index.ts	100%	100%	100%	100%
apps/evm/src/components/Icon/icons/pendle.tsx	11.53%	100%	0%	11.53%	5-28
apps/evm/src/components/Select/index.tsx	93.38%	75%	50%	93.38%	59, 64, 69, 75-76, 83-85, 91
apps/evm/src/components/StatusLabel/index.tsx	0%	0%	0%	0%	1-38
apps/evm/src/components/TextField/index.tsx	97.97%	88.88%	100%	97.97%	51-54
apps/evm/src/constants/routing.ts	100%	66.66%	100%	100%
apps/evm/src/containers/CopyAddressButton/index.tsx	100%	100%	100%	100%
apps/evm/src/containers/Layout/Header/usePathNodes/index.tsx	92.8%	66.66%	100%	92.8%	72-75, 134-138
apps/evm/src/containers/Layout/NavBar/ClaimRewardsButton/ClaimRewardsContent/index.tsx	97.56%	81.81%	100%	97.56%	40-41
apps/evm/src/containers/Layout/NavBar/useMenuItems/index.tsx	0%	0%	0%	0%	1-114
apps/evm/src/containers/PrimeStatusBanner/index.tsx	92.33%	91.22%	33.33%	92.33%	66-69, 177, 184-190, 211-222, 281
apps/evm/src/containers/TopMarkets/TypeButton/index.tsx	100%	66.66%	100%	100%
apps/evm/src/containers/Vault/VaultCard/index.tsx	100%	100%	100%	100%
apps/evm/src/containers/Vault/VaultCard/Legacy/VaultModals/index.tsx	100%	100%	100%	100%
apps/evm/src/containers/Vault/VaultCard/Simplified/Cell.tsx	100%	0%	100%	100%
apps/evm/src/containers/Vault/VaultCard/Simplified/index.tsx	89.33%	0%	100%	89.33%	33, 66, 76-81
apps/evm/src/containers/Vault/hooks/useVaultUsdValues.ts	74.41%	0%	100%	74.41%	1, 28-32, 35-39
apps/evm/src/pages/Dashboard/index.tsx	86.25%	20%	100%	86.25%	40, 55-58, 63-66, 72-74
apps/evm/src/pages/Dashboard/Guide/index.tsx	79%	60%	0%	79%	47-48, 53-58, 90-104
apps/evm/src/pages/Dashboard/Vaults/index.tsx	98.01%	44.44%	100%	98.01%	94-95
apps/evm/src/pages/Governance/VotingWallet/index.tsx	97.44%	86.2%	28.57%	97.44%	49-50, 79-80, 252
apps/evm/src/pages/Vaults/index.tsx	90.9%	33.33%	100%	90.9%	16-18
apps/evm/src/pages/Vaults/Overview/index.tsx	90.27%	25%	100%	90.27%	47-51, 60, 67
apps/evm/src/pages/Vaults/Overview/Banner/index.tsx	100%	0%	100%	100%
apps/evm/src/pages/Vaults/Vaults/index.tsx	94.44%	14.28%	0%	94.44%	29, 37, 41-43
apps/evm/src/pages/Vaults/Vaults/hooks/useFilterOptions.tsx	89.47%	0%	0%	89.47%	19-21, 25-27
apps/evm/src/pages/Vaults/utils/index.tsx	96.42%	33.33%	100%	96.42%	26

Generated in workflow #12909 for commit 1d449a6 by the Vitest Coverage Report Action

david-sun-venus · 2026-03-13T12:35:17Z

@greptile

david-sun-venus · 2026-03-13T13:27:13Z

@greptile

therealemjy · 2026-03-13T13:48:22Z

+      "bannerVaultIllustration": "Vault illustration",
+      "description": "Yield made simple, returns made real — deposit across multiple vaults and watch your crypto grow <strong>on your terms</strong>.",
+      "highestApr": "Highest APR",
+      "title": "Venus Vault",


Suggested change

"title": "Venus Vault",

"title": "Vaults",

Title is "Venus Vault" from the design:

Yeah it's not your responsibility for sure, but it doesn't make sense to use this title if the page is called "Vaults".
@zed-venus I believe the title of the page should match its name in the navigation menu, so it would be "Vaults". What do you think?

david-sun-venus · 2026-03-13T16:37:37Z

@greptile

david-sun-venus · 2026-03-13T16:53:04Z

@greptile

david-sun-venus · 2026-03-13T17:15:29Z

@greptile

david-sun-venus · 2026-03-13T17:44:21Z

@greptile

…UsdPrice

david-sun-venus · 2026-03-13T17:53:00Z

@greptile

therealemjy · 2026-03-13T20:06:34Z

+      "bannerVaultIllustration": "Vault illustration",
+      "description": "Yield made simple, returns made real — deposit across multiple vaults and watch your crypto grow <strong>on your terms</strong>.",
+      "highestApr": "Highest APR",
+      "title": "Venus Vault",


Yeah it's not your responsibility for sure, but it doesn't make sense to use this title if the page is called "Vaults".
@zed-venus I believe the title of the page should match its name in the navigation menu, so it would be "Vaults". What do you think?

david-sun-venus · 2026-03-14T04:41:40Z

@greptile

david-sun-venus · 2026-03-15T14:50:09Z

@greptile

vercel Bot deployed to Preview – dapp-testnet March 9, 2026 16:07 View deployment

vercel Bot deployed to Preview – dapp-preview March 9, 2026 16:07 View deployment

vercel Bot deployed to Preview – venus.io March 9, 2026 16:08 View deployment

greptile-apps Bot reviewed Mar 9, 2026

View reviewed changes

david-sun-venus force-pushed the feat/vault-page branch from 07de0ba to 65adccc Compare March 10, 2026 13:58

vercel Bot had a problem deploying to Preview – venus.io March 10, 2026 14:00 Failure

vercel Bot had a problem deploying to Preview – dapp-testnet March 10, 2026 14:00 Failure

vercel Bot had a problem deploying to Preview – dapp-preview March 10, 2026 14:01 Failure

david-sun-venus force-pushed the feat/vault-page branch from 65adccc to 45a6e54 Compare March 10, 2026 14:01

vercel Bot deployed to Preview – venus.io March 10, 2026 14:05 View deployment

vercel Bot deployed to Preview – dapp-preview March 10, 2026 14:05 View deployment

vercel Bot deployed to Preview – dapp-testnet March 10, 2026 14:05 View deployment

vercel Bot deployed to Preview – dapp-preview March 10, 2026 17:10 View deployment

vercel Bot deployed to Preview – dapp-testnet March 10, 2026 17:10 View deployment

vercel Bot deployed to Preview – venus.io March 10, 2026 17:10 View deployment

david-sun-venus force-pushed the feat/vault-page branch from e684e1d to 3ad885d Compare March 10, 2026 17:19

vercel Bot deployed to Preview – dapp-preview March 10, 2026 17:20 View deployment

vercel Bot deployed to Preview – dapp-testnet March 10, 2026 17:20 View deployment

vercel Bot deployed to Preview – venus.io March 10, 2026 17:21 View deployment

vercel Bot deployed to Preview – dapp-testnet March 11, 2026 09:31 View deployment

vercel Bot deployed to Preview – dapp-preview March 11, 2026 09:31 View deployment

vercel Bot deployed to Preview – venus.io March 11, 2026 09:31 View deployment

david-sun-venus force-pushed the feat/vault-page branch from fec1dc8 to ec3d998 Compare March 11, 2026 09:44

vercel Bot deployed to Preview – dapp-testnet March 11, 2026 09:47 View deployment

vercel Bot deployed to Preview – dapp-preview March 11, 2026 09:47 View deployment

vercel Bot deployed to Preview – venus.io March 11, 2026 09:51 View deployment

vercel Bot deployed to Preview – venus.io March 13, 2026 12:28 View deployment

david-sun-venus force-pushed the feat/vault-page branch from 89b062a to 9fcca3d Compare March 13, 2026 12:34

refactor(evm): based on ai review, add changeset

b8733e8

david-sun-venus force-pushed the feat/vault-page branch from 9fcca3d to b8733e8 Compare March 13, 2026 12:34

vercel Bot deployed to Preview – dapp-preview March 13, 2026 12:35 View deployment

vercel Bot deployed to Preview – dapp-testnet March 13, 2026 12:36 View deployment

vercel Bot deployed to Preview – venus.io March 13, 2026 12:36 View deployment

refactor(evm): improve ai score

76c4e81

vercel Bot deployed to Preview – dapp-testnet March 13, 2026 13:25 View deployment

vercel Bot deployed to Preview – dapp-preview March 13, 2026 13:25 View deployment

vercel Bot deployed to Preview – venus.io March 13, 2026 13:35 View deployment

refactor(evm): remove unused codes and comments

cb9f279

therealemjy reviewed Mar 13, 2026

View reviewed changes

Comment thread apps/evm/src/containers/Vault/VaultCard/Simplified/index.tsx

refactor(evm): review feedbacks, change to multicall for getTokenList…

0b105d0

…UsdPrice

therealemjy reviewed Mar 13, 2026

View reviewed changes

refactor(evm): update based on review feedbacks

0938a16

refactor(evm): move vaultModals under legacyCard

cdd43ce

therealemjy approved these changes Mar 16, 2026

View reviewed changes

refactor(evm): update vaults title

1d449a6

Conversation

david-sun-venus commented Mar 9, 2026

Jira ticket(s)

Changes

Uh oh!

vercel Bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

greptile-apps Bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Comments Outside Diff (2)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for ./apps/evm

Uh oh!

david-sun-venus commented Mar 13, 2026

Uh oh!

david-sun-venus commented Mar 13, 2026

Uh oh!

therealemjy Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

david-sun-venus Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

therealemjy Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

david-sun-venus commented Mar 13, 2026

Uh oh!

david-sun-venus commented Mar 13, 2026

Uh oh!

david-sun-venus commented Mar 13, 2026

Uh oh!

david-sun-venus commented Mar 13, 2026

Uh oh!

david-sun-venus commented Mar 13, 2026

Uh oh!

Uh oh!

Uh oh!

therealemjy Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

david-sun-venus commented Mar 14, 2026

Uh oh!

david-sun-venus commented Mar 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

vercel Bot commented Mar 9, 2026 •

edited

Loading

changeset-bot Bot commented Mar 9, 2026 •

edited

Loading

greptile-apps Bot commented Mar 9, 2026 •

edited

Loading

github-actions Bot commented Mar 9, 2026 •

edited

Loading