feat: ether fi

CLAUDE.md

@@ -42,6 +42,7 @@ pnpm build
 - TypeScript strict mode, no unjustified `any`
 - Components: `PascalCase.tsx`, Hooks: `useCamelCase.ts`, Utils: `camelCase.ts`
 - Import order: external libs → `@kyberswap/*` → local imports → types → styles
+- **Always prefer absolute imports** over relative imports when possible. Use path aliases (e.g., `components/...`, `utils/...`, `hooks/...`) instead of relative paths (e.g., `../../components/...`).
 
 ## Code Quality Rules (MUST follow)
 

apps/kyberswap-interface/src/components/Header/groups/EarnNavGroup.tsx

@@ -7,7 +7,9 @@ import { ReactComponent as OverviewIcon } from 'assets/svg/earn/ic_earn_overview
 import { ReactComponent as PoolsIcon } from 'assets/svg/earn/ic_earn_pools.svg'
 import { ReactComponent as PositionsIcon } from 'assets/svg/earn/ic_earn_positions.svg'
 import { ReactComponent as FarmingIcon } from 'assets/svg/earn/ic_farming.svg'
+import { ReactComponent as FeaturedVaultIcon } from 'assets/svg/earn/ic_featured_vault.svg'
 import { ReactComponent as ListSmartExitIcon } from 'assets/svg/earn/ic_list_smart_exit.svg'
+import { ReactComponent as VaultIcon } from 'assets/svg/earn/ic_partner_vault.svg'
 import { ReactComponent as KemIcon } from 'assets/svg/kyber/kem.svg'
 import NavGroup from 'components/Header/groups/NavGroup'
 import { DropdownTextAnchor, StyledNavLink } from 'components/Header/styleds'
@@ -27,6 +29,8 @@ const EarnNavGroup = () => {
     APP_PATHS.EARN_POSITIONS,
     APP_PATHS.EARN_POSITION_DETAIL,
     APP_PATHS.EARN_SMART_EXIT,
+    APP_PATHS.EARN_VAULTS,
+    APP_PATHS.EARN_MY_VAULTS,
   ].some(path => pathname.includes(path))
 
   return (
@@ -101,7 +105,7 @@ const EarnNavGroup = () => {
               {t`My Positions`}
             </Flex>
           </StyledNavLink>
-          <StyledNavLink data-testid="earn-positions-nav-link" to={{ pathname: `${APP_PATHS.EARN_SMART_EXIT}` }}>
+          <StyledNavLink data-testid="earn-smart-exit-nav-link" to={{ pathname: `${APP_PATHS.EARN_SMART_EXIT}` }}>
             <Flex sx={{ gap: '12px' }} alignItems="center">
               <ListSmartExitIcon width={16} height={16} />
               <Flex>
@@ -110,6 +114,28 @@ const EarnNavGroup = () => {
               </Flex>
             </Flex>
           </StyledNavLink>
+
+          <StyledNavLink
+            id="earn-vaults-nav-link"
+            data-testid="earn-vaults-nav-link"
+            to={{ pathname: `${APP_PATHS.EARN_VAULTS}` }}
+          >
+            <Flex sx={{ gap: '12px' }} alignItems="center">
+              <VaultIcon width={16} height={16} />
+              {t`Explore Vaults`}
+            </Flex>
+          </StyledNavLink>
+
+          <StyledNavLink
+            id="earn-my-vaults-nav-link"
+            data-testid="earn-my-vaults-nav-link"
+            to={{ pathname: `${APP_PATHS.EARN_MY_VAULTS}` }}
+          >
+            <Flex sx={{ gap: '12px' }} alignItems="center">
+              <FeaturedVaultIcon width={16} height={16} />
+              {t`My Vaults`}
+            </Flex>
+          </StyledNavLink>
         </Flex>
       }
     />

apps/kyberswap-interface/src/constants/index.ts

@@ -189,6 +189,9 @@ export const APP_PATHS = {
   EARN_POSITIONS: '/earn/positions',
   EARN_POSITION_DETAIL: '/earn/position/:positionId/:chainId/:exchange',
   EARN_SMART_EXIT: '/earn/smart-exit',
+  EARN_VAULTS: '/earn/vaults',
+  EARN_MY_VAULTS: '/earn/my-vaults',
+  EARN_VAULT_DETAIL: '/earn/vault/:vaultId',
   EARNS: '/earns',
   EARNS_POOLS: '/earns/pools',
   EARNS_POSITIONS: '/earns/positions',

apps/kyberswap-interface/src/pages/App.tsx

@@ -66,11 +66,15 @@ const NotificationCenter = lazy(() => import('pages/NotificationCenter'))
 const Campaign = lazy(() => import('pages/Campaign'))
 const CampaignMyDashboard = lazy(() => import('pages/Campaign/MyDashboard'))
 
+const EarnLayout = lazy(() => import('pages/Earns/components/EarnLayout'))
 const Earns = lazy(() => import('pages/Earns/Landing'))
 const EarnPoolExplorer = lazy(() => import('pages/Earns/PoolExplorer'))
 const EarnUserPositions = lazy(() => import('pages/Earns/UserPositions'))
 const EarnPositionDetail = lazy(() => import('pages/Earns/PositionDetail'))
 const SmartExit = lazy(() => import('pages/Earns/SmartExitOrders'))
+const ExploreVaults = lazy(() => import('pages/Earns/ExploreVaults'))
+const MyVaults = lazy(() => import('pages/Earns/MyVaults'))
+const VaultDetail = lazy(() => import('pages/Earns/VaultDetail'))
 
 const Recap2025Redirect = lazy(() => import('pages/Recap2025Redirect'))
 
@@ -357,11 +361,16 @@ export default function App() {
               <Route path={APP_PATHS.REFFERAL_CAMPAIGN} element={<Campaign />} />
               <Route path={APP_PATHS.MY_DASHBOARD} element={<CampaignMyDashboard />} />
 
-              <Route path={APP_PATHS.EARN} element={<Earns />} />
-              <Route path={APP_PATHS.EARN_POOLS} element={<EarnPoolExplorer />} />
-              <Route path={APP_PATHS.EARN_POSITIONS} element={<EarnUserPositions />} />
-              <Route path={APP_PATHS.EARN_POSITION_DETAIL} element={<EarnPositionDetail />} />
-              <Route path={APP_PATHS.EARN_SMART_EXIT} element={<SmartExit />} />
+              <Route element={<EarnLayout />}>
+                <Route path={APP_PATHS.EARN} element={<Earns />} />
+                <Route path={APP_PATHS.EARN_POOLS} element={<EarnPoolExplorer />} />
+                <Route path={APP_PATHS.EARN_POSITIONS} element={<EarnUserPositions />} />
+                <Route path={APP_PATHS.EARN_POSITION_DETAIL} element={<EarnPositionDetail />} />
+                <Route path={APP_PATHS.EARN_SMART_EXIT} element={<SmartExit />} />
+                <Route path={APP_PATHS.EARN_VAULTS} element={<ExploreVaults />} />
+                <Route path={APP_PATHS.EARN_MY_VAULTS} element={<MyVaults />} />
+                <Route path={APP_PATHS.EARN_VAULT_DETAIL} element={<VaultDetail />} />
+              </Route>
 
               <Route path={APP_PATHS.EARNS} element={<Navigate to={APP_PATHS.EARN} replace />} />
               <Route path={APP_PATHS.EARNS_POOLS} element={<Navigate to={APP_PATHS.EARN_POOLS} replace />} />