feat: ether fi

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,8 @@ 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',
   EARNS: '/earns',
   EARNS_POOLS: '/earns/pools',
   EARNS_POSITIONS: '/earns/positions',

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

@@ -66,11 +66,14 @@ 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 Recap2025Redirect = lazy(() => import('pages/Recap2025Redirect'))
 
@@ -357,11 +360,15 @@ 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>
 
               <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 />} />

apps/kyberswap-interface/src/pages/Earns/ExploreVaults/index.tsx

@@ -0,0 +1,21 @@
+import { t } from '@lingui/macro'
+import { Flex, Text } from 'rebass'
+
+import useTheme from 'hooks/useTheme'
+
+const ExploreVaults = () => {
+  const theme = useTheme()
+
+  return (
+    <Flex flexDirection="column" alignItems="center" justifyContent="center" minHeight="400px" style={{ gap: '16px' }}>
+      <Text fontSize={28} fontWeight={500}>
+        {t`Explore Partner Vaults`}
+      </Text>
+      <Text fontSize={16} color={theme.subText}>
+        {t`Coming soon...`}
+      </Text>
+    </Flex>
+  )
+}
+
+export default ExploreVaults

apps/kyberswap-interface/src/pages/Earns/Landing/Card.tsx

@@ -13,7 +13,7 @@ const Card = ({
   action,
 }: {
   title: string
-  icon: string
+  icon: string | React.ReactNode
   desc: string
   action: { text: string; disabled?: boolean; onClick: () => void }
 }) => {