feat(packages): vault layout skeleton #339
Conversation
jeremy-babylonlabs
commented
Oct 9, 2025
jeremy-babylonlabs
commented
jeremy-babylonlabs
requested review from
gbarkhatov,
jonybur and
jrwbabylonlab
as code owners
There was a problem hiding this comment.
Pull Request Overview
This PR implements a vault layout skeleton for the application, introducing a new vault section with statistics, deposits, and markets functionality. The implementation includes responsive design with tabs on mobile and separate cards on desktop.
- Added vault navigation items to both desktop and mobile headers with feature flag control
- Created comprehensive vault UI components including stats display, deposit overview, and market overview
- Refactored Tabs component from simple-staking to use the shared core-ui package for better maintainability
Reviewed Changes
Copilot reviewed 18 out of 20 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| services/simple-staking/src/ui/common/components/Tabs/index.ts | Re-exports Tabs from core-ui for backward compatibility |
| services/simple-staking/src/ui/common/components/Nav/MobileNavOverlay.tsx | Adds Vault navigation item with feature flag control |
| services/simple-staking/src/ui/common/components/Header/Header.tsx | Adds Vault navigation item with feature flag control |
| routes/vault/src/types/vault.ts | Defines VaultData interface for vault statistics |
| routes/vault/src/types/market.ts | Defines Market interface for market data |
| routes/vault/src/types/index.ts | Exports vault and market types |
| routes/vault/src/index.ts | Updates main vault module exports |
| routes/vault/src/components/index.ts | Exports all vault components |
| routes/vault/src/components/VaultStats.tsx | Implements vault statistics display component |
| routes/vault/src/components/VaultContent.tsx | Implements responsive vault content with tabs/cards |
| routes/vault/src/components/MarketOverview.tsx | Implements market overview table component |
| routes/vault/src/components/DepositOverview.tsx | Implements deposit overview with empty state |
| routes/vault/src/VaultLayout.tsx | Updates main vault layout with new components and feature flag |
| routes/vault/package.json | Adds react-icons dependency |
| packages/babylon-core-ui/src/index.tsx | Exports Tabs component from core-ui |
| packages/babylon-core-ui/src/components/Tabs/index.ts | Creates Tabs component exports |
| packages/babylon-core-ui/src/components/Tabs/Tabs.tsx | Makes TabItem and TabsProps interfaces exportable |
| packages/babylon-core-ui/src/components/Tabs/Tabs.stories.tsx | Adds comprehensive Storybook stories for Tabs component |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <List orientation="horizontal" className="md:flex-row [&>*]:min-w-[180px] md:[&>*]:min-w-0"> | ||
| <StatItem title="Supply TVL" value={`$${supplyTVL}m`} /> | ||
| <StatItem title="Borrow TVL" value={`$${borrowTVL}m`} /> | ||
| <StatItem title="Protocol LTV" value={`$${protocolLTV}m`} /> |
There was a problem hiding this comment.
Protocol LTV should not have a dollar sign prefix as LTV (Loan-to-Value) is a ratio/percentage, not a currency value.
| <StatItem title="Protocol LTV" value={`$${protocolLTV}m`} /> | |
| <StatItem title="Protocol LTV" value={`${protocolLTV}%`} /> |
Copilot uses AI. Check for mistakes.
|
|
||
| export function DepositOverview() { | ||
| const handleAddDeposit = () => { | ||
| console.log("Add deposit clicked"); |
There was a problem hiding this comment.
Remove console.log statement from production code. Consider replacing with proper event handling or removing the placeholder function entirely.
| console.log("Add deposit clicked"); | |
| // TODO: Implement add deposit functionality |
Copilot uses AI. Check for mistakes.
jeremy-babylonlabs
force-pushed
the
feat/vault-layout-skeleton
branch
3 times, most recently
from
21fa3e5 to
9af9cfd
Compare
jeremy-babylonlabs
force-pushed
the
feat/vault-layout-skeleton
branch
from
9af9cfd to
848ebd0
Compare
jeremy-babylonlabs
force-pushed
the
feat/vault-layout-skeleton
branch
from
8e58dda to
deb32a5
Compare
There was a problem hiding this comment.
@jeremy-babylonlabs I cannot npm i && npm run build this PR
| import { Card } from "@babylonlabs-io/core-ui"; | ||
| import { VaultStats, VaultOverviewPanel } from "./components"; | ||
|
|
||
| const isVaultEnabled = process.env.NEXT_PUBLIC_FF_VAULT === "true"; |
There was a problem hiding this comment.
Maybe we need to use FeatureFlagService.IsVaultEnabled
jeremy-babylonlabs
force-pushed
the
feat/vault-layout-skeleton
branch
from
deb32a5 to
2e4ca95
Compare
There was a problem hiding this comment.
We should have assets in the lib so that all services can use.
For example, you can move this to the core-ui src/public/images for now.
3 participants
