Skip to content

feat: add base Liquidity Hub page and types#5680

Open
therealemjy wants to merge 1 commit into
mainfrom
feat/liquidity-hub-base
Open

feat: add base Liquidity Hub page and types#5680
therealemjy wants to merge 1 commit into
mainfrom
feat/liquidity-hub-base

Conversation

@therealemjy

Copy link
Copy Markdown
Member

Jira ticket(s)

VPD-1559

Changes

  • add base Liquidity Hub page and types

@therealemjy therealemjy requested a review from cuzz-venus July 9, 2026 13:53
@changeset-bot

changeset-bot Bot commented Jul 9, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b8fd8b3

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

This PR includes changesets to release 2 packages
Name Type
@venusprotocol/chains 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

vercel Bot commented Jul 9, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
dapp-preview Ready Ready Preview Jul 9, 2026 1:56pm
dapp-testnet Ready Ready Preview Jul 9, 2026 1:56pm
venus.io Ready Ready Preview Jul 9, 2026 1:56pm

Request Review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 147333b7e7

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

return (
<Card css={styles.getRoot({ breakpoint })} {...otherProps}>
<Card
className={cn('p-0', !isBreakpointUp && 'bg-transparent border-0', className)}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve table chrome when no breakpoint is set

For Table callers that intentionally omit breakpoint (for example the desktop-only E-mode group table), isBreakpointUp is always false because it is gated by !!breakpoint, so this class now strips the Card background and border at every viewport size. The previous CSS only made the table transparent below an explicit breakpoint; guard this branch with breakpoint so no-breakpoint tables keep their normal Card styling.

Useful? React with 👍 / 👎.

@greptile-apps

greptile-apps Bot commented Jul 9, 2026

Copy link
Copy Markdown

Greptile Summary

This PR scaffolds the Liquidity Hub feature: a new testnet-only page showing a table of hub vaults with supply/APY/liquidity stats, backed by mock data (explicitly TODO'd) and gated behind a liquidityHub feature flag. It also refactors the shared Cell/CellGroup components to decouple layout from styling, promotes PoolStats from a render component to a data hook (usePoolStats), promotes RowControl to a shared TableRowControl component, and wires a new "Earn" nav submenu.

  • New LiquidityHub page with LiquidityHubTable, PageStatHeader, and a placeholder OperationModal; all gated to BSC_TESTNET only.
  • CellGroup refactored: grid boolean now controls layout; variant now exclusively controls cell typography and delimiter rendering; all existing call-sites updated.
  • PoolStats container converted to usePoolStats hook returning CellProps[], enabling reuse across pages; new unit test added.

Confidence Score: 3/5

Safe to merge once the OperationModal fix is in place; the entire feature is testnet-only and behind a flag, so there is no production user impact today.

The OperationModal spreads liquidityHub into <Modal> without destructuring it, which will fail yarn tsc since liquidityHub is not a valid ModalProps field. Everything else is well-structured scaffolding, but that compilation blocker needs to be resolved before merging.

apps/evm/src/pages/LiquidityHub/LiquidityHubTable/RowControl/OperationModal/index.tsx — destructure liquidityHub before spreading into Modal. apps/evm/src/pages/LiquidityHub/LiquidityHubTable/index.tsx — fix selectOptionLabel for the exposure column and the filter return value.

Important Files Changed

Filename Overview
apps/evm/src/pages/LiquidityHub/LiquidityHubTable/RowControl/OperationModal/index.tsx Placeholder modal that spreads the liquidityHub prop (not part of ModalProps) into <Modal> without destructuring it out, likely causing a TypeScript compilation error.
apps/evm/src/pages/LiquidityHub/LiquidityHubTable/index.tsx New table component with two issues: filter callback returns implicit undefined instead of false, and the exposure column selectOptionLabel would display literal <InfoIcon/> markup in the mobile sort dropdown.
apps/evm/src/pages/LiquidityHub/index.tsx New page scaffold for the Liquidity Hub feature. Currently uses hardcoded mock data (explicitly TODO'd) and is gated behind the BSC_TESTNET feature flag. Logic is straightforward.
apps/evm/src/components/Cell/index.tsx Adds variant prop (primary/secondary) to control label/value typography; upgrades value from text-p3s to text-p2s across all usages — intentional global design change.
apps/evm/src/components/CellGroup/index.tsx Decouples layout (grid boolean) from cell-style variant, adds vertical Delimiters between secondary-variant cells. All existing callsites updated correctly.
apps/evm/src/hooks/usePoolStats/index.ts Refactored from a React component (PoolStats) into a data hook (usePoolStats) that returns CellProps[]. Lazy evaluation guards (shouldDisplay* flags) and conditional query enabling preserved correctly.
packages/chains/src/types/index.ts Adds VhToken interface (hub vault token) that extends Token minus isNative/iconSrc/tokenWrapped; clean and consistent with existing VToken pattern.

Reviews (1): Last reviewed commit: "feat: add base Liquidity Hub page and ty..." | Re-trigger Greptile

Comment on lines +8 to +13
export const OperationModal: React.FC<OperationModalProps> = ({ ...otherProps }) => (
<Modal isOpen {...otherProps}>
{/* TODO: add content */}
<div>Add content here</div>
</Modal>
);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 liquidityHub prop leaked into <Modal> via spread

OperationModalProps adds liquidityHub: LiquidityHub on top of Omit<ModalProps, 'children' | 'isOpen'>. Because the component uses { ...otherProps } without extracting liquidityHub, the prop flows through to <Modal> and then down to MUIModal. ModalProps does not include liquidityHub, so TypeScript's excess property check on the JSX spread will fail at yarn tsc. Even if somehow it compiled, React would warn about an unknown attribute on the underlying DOM element.

Fix: destructure liquidityHub out before spreading the rest into <Modal>.

}}
/>
),
selectOptionLabel: t('liquidityHub.table.columns.exposure.title'),

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Exposure selectOptionLabel contains raw <InfoIcon/> markup

t('liquidityHub.table.columns.exposure.title') returns the literal string "Exposure <InfoIcon/>" because t() does not process component interpolations like Trans does. In the mobile sort dropdown, users would see Exposure <InfoIcon/> as plain text.

A dedicated plain-text key (e.g., liquidityHub.table.columns.exposure.label: "Exposure") should be added to the translations and used for selectOptionLabel instead.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

Coverage Report for ./apps/evm

Status Category Percentage Covered / Total
🔵 Lines 82.01% 50254 / 61275
🔵 Statements 82.01% 50254 / 61275
🔵 Functions 61.75% 670 / 1085
🔵 Branches 73.08% 5718 / 7824
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
apps/evm/src/App/Routes/index.tsx 0% 0% 0% 0% 1-322
apps/evm/src/components/index.ts 100% 100% 100% 100%
apps/evm/src/components/Cell/index.tsx 100% 66.66% 100% 100%
apps/evm/src/components/CellGroup/index.tsx 100% 80% 100% 100%
apps/evm/src/components/Modal/index.tsx 100% 66.66% 100% 100%
apps/evm/src/components/PageStatHeader/index.tsx 100% 0% 100% 100%
apps/evm/src/components/Table/index.tsx 94.91% 94.28% 33.33% 94.91% 63-67, 72-77
apps/evm/src/components/Table/styles.ts 87.01% 94.11% 75% 87.01% 1, 38-45, 58-72
apps/evm/src/constants/routing.ts 100% 66.66% 100% 100%
apps/evm/src/containers/Layout/Header/MarketInfo/index.tsx 0% 0% 0% 0% 1-221
apps/evm/src/containers/Layout/NavBar/useMenuItems/index.tsx 0% 0% 0% 0% 1-153
apps/evm/src/containers/MarketTable/index.tsx 93.86% 89.28% 66.66% 93.86% 95-103, 189
apps/evm/src/containers/MarketTable/useColumns/index.tsx 82.35% 75.55% 66.66% 82.35% 145-146, 158-168, 183-189, 193-206, 248, 387-394, 414, 418, 422-426, 445-463
apps/evm/src/hooks/useIsFeatureEnabled/index.tsx 99.34% 0% 100% 99.34% 1
apps/evm/src/pages/Dashboard/Markets/Positions/Summary/index.tsx 93.33% 0% 100% 93.33% 111-119
apps/evm/src/pages/IsolatedPools/index.tsx 85.12% 65% 66.66% 85.12% 53-60, 66-68, 82, 100-103, 108-110, 114
apps/evm/src/pages/LiquidityHub/index.tsx 0% 0% 0% 0% 1-61
apps/evm/src/pages/LiquidityHub/LiquidityHubTable/index.tsx 0% 0% 0% 0% 1-163
apps/evm/src/pages/LiquidityHub/LiquidityHubTable/RowControl/index.tsx 0% 0% 0% 0% 1-30
apps/evm/src/pages/LiquidityHub/LiquidityHubTable/RowControl/OperationModal/index.tsx 0% 0% 0% 0% 1-12
apps/evm/src/pages/Markets/Header/index.tsx 100% 0% 100% 100%
apps/evm/src/types/index.ts 100% 100% 100% 100%
Generated in workflow #13793 for commit b8fd8b3 by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant