feat: smart exit

apps/kyberswap-interface/.env.production

@@ -46,3 +46,5 @@ VITE_ZAP_EARN_URL=https://zap-earn-service-v3.kyberengineering.io/api
 
 VITE_AFFILIATE_SERVICE=https://affiliate-service.kyberengineering.io/api
 VITE_SOLANA_RPC=https://solana.kyberengineering.io
+
+VITE_SMART_EXIT_API_URL=https://pre-conditional-order.kyberengineering.io/api

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

@@ -7,6 +7,7 @@ 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 ListSmartExitIcon } from 'assets/svg/earn/ic_list_smart_exit.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'
@@ -24,6 +25,7 @@ const EarnNavGroup = () => {
     APP_PATHS.EARN_POOLS,
     APP_PATHS.EARN_POSITIONS,
     APP_PATHS.EARN_POSITION_DETAIL,
+    APP_PATHS.EARN_SMART_EXIT,
   ].some(path => pathname.includes(path))
 
   return (
@@ -98,6 +100,12 @@ const EarnNavGroup = () => {
               {t`My Positions`}
             </Flex>
           </StyledNavLink>
+          <StyledNavLink data-testid="earn-positions-nav-link" to={{ pathname: `${APP_PATHS.EARN_SMART_EXIT}` }}>
+            <Flex sx={{ gap: '12px' }} alignItems="center">
+              <ListSmartExitIcon width={16} height={16} />
+              {t`Smart Exit Orders`}
+            </Flex>
+          </StyledNavLink>
         </Flex>
       }
     />

apps/kyberswap-interface/src/components/SwapForm/SlippageSetting.tsx

@@ -31,7 +31,7 @@ const highlight = keyframes`
 `
 
 //transition: transform 300ms;
-const DropdownIcon = styled.div`
+export const DropdownIcon = styled.div`
   margin-left: 6px;
   border-radius: 50%;
   width: 12px;
@@ -42,7 +42,7 @@ const DropdownIcon = styled.div`
   padding: 2px;
 
   transition: all 0.2s ease-in-out;
-  color: ${({ theme }) => theme.subText};
+  color: ${({ theme }) => theme.white2};
   &[data-flip='true'] {
     transform: rotate(180deg);
   }
@@ -51,6 +51,10 @@ const DropdownIcon = styled.div`
     background: ${({ theme }) => rgba(theme.primary, 0.6)};
     animation: ${highlight} 2s infinite alternate ease-in-out;
   }
+
+  &[data-warning='true'] {
+    color: ${({ theme }) => rgba(theme.warning, 0.9)};
+  }
 `
 
 type Props = {

apps/kyberswap-interface/src/components/UniswapPriceSlider/PriceAxis.tsx

@@ -0,0 +1,156 @@
+import { tickToPrice } from '@kyber/utils/dist/uniswapv3'
+import React, { useMemo } from 'react'
+
+import type { PriceAxisProps } from 'components/UniswapPriceSlider/types'
+import { formatAxisPrice } from 'components/UniswapPriceSlider/utils'
+
+import { PriceAxisContainer, PriceAxisLabel, PriceAxisLine, PriceAxisTick } from './styles'
+
+const MAX_TICK_COUNT = 11 // More ticks for small ranges
+const MIN_TICK_COUNT = 2 // Just first and last for extreme ranges
+
+/**
+ * Calculate the optimal number of ticks and minimum gap based on price range
+ * More ticks for small ranges, fewer for large ranges
+ */
+const getOptimalTickConfig = (minPrice: number, maxPrice: number): { tickCount: number; minGapPercent: number } => {
+  if (minPrice <= 0 || maxPrice <= 0) {
+    return { tickCount: 7, minGapPercent: 15 }
+  }
+
+  // Calculate how many orders of magnitude the prices span
+  const priceRatio = maxPrice / minPrice
+  const ordersOfMagnitude = Math.log10(priceRatio)
+
+  // Very small range (< 0.5 orders): many ticks, small gap
+  if (ordersOfMagnitude <= 0.5) {
+    return { tickCount: MAX_TICK_COUNT, minGapPercent: 12 }
+  }
+  // Small range (0.5 - 1 order): good amount of ticks
+  if (ordersOfMagnitude <= 1) {
+    return { tickCount: 9, minGapPercent: 14 }
+  }
+  // Medium range (1 - 2 orders)
+  if (ordersOfMagnitude <= 2) {
+    return { tickCount: 7, minGapPercent: 16 }
+  }
+  // Large range (2 - 4 orders)
+  if (ordersOfMagnitude <= 4) {
+    return { tickCount: 5, minGapPercent: 20 }
+  }
+  // Very large range (4 - 8 orders)
+  if (ordersOfMagnitude <= 8) {
+    return { tickCount: 3, minGapPercent: 30 }
+  }
+  // Extreme range (> 8 orders): just first and last
+  return { tickCount: MIN_TICK_COUNT, minGapPercent: 40 }
+}
+
+/**
+ * Calculate tick positions for the axis
+ * Uses tick-space for even distribution (matching the slider)
+ */
+const calculateAxisTicks = (
+  viewRange: { min: number; max: number },
+  token0Decimals: number,
+  token1Decimals: number,
+  count: number,
+  invertPrice?: boolean,
+): Array<{ tick: number; price: number; position: number }> => {
+  const tickRange = viewRange.max - viewRange.min
+  if (tickRange <= 0) return []
+
+  const step = tickRange / (count - 1)
+  const ticks: Array<{ tick: number; price: number; position: number }> = []
+
+  for (let i = 0; i < count; i++) {
+    const tick = Math.round(viewRange.min + step * i)
+    const price = +tickToPrice(tick, token0Decimals, token1Decimals, invertPrice)
+    const position = ((tick - viewRange.min) / tickRange) * 100
+
+    ticks.push({ tick, price, position })
+  }
+
+  return ticks
+}
+
+/**
+ * Filter ticks to ensure minimum spacing between labels
+ * Only shows labels that have sufficient gap from previous label
+ */
+const filterOverlappingTicks = (
+  ticks: Array<{ tick: number; price: number; position: number }>,
+  minGapPercent: number,
+): Array<{ tick: number; price: number; position: number; showLabel: boolean }> => {
+  if (ticks.length === 0) return []
+
+  const result: Array<{ tick: number; price: number; position: number; showLabel: boolean }> = []
+  let lastLabelPosition = -Infinity
+
+  for (let i = 0; i < ticks.length; i++) {
+    const tick = ticks[i]
+    const isFirst = i === 0
+    const isLast = i === ticks.length - 1
+    const gap = tick.position - lastLabelPosition
+
+    // First tick always shows label
+    if (isFirst) {
+      lastLabelPosition = tick.position
+      result.push({ ...tick, showLabel: true })
+      continue
+    }
+
+    // Last tick: only show if enough gap, otherwise hide
+    if (isLast) {
+      const showLabel = gap >= minGapPercent
+      if (showLabel) lastLabelPosition = tick.position
+      result.push({ ...tick, showLabel })
+      continue
+    }
+
+    // Middle ticks: show if enough gap from previous label
+    const showLabel = gap >= minGapPercent
+    if (showLabel) lastLabelPosition = tick.position
+    result.push({ ...tick, showLabel })
+  }
+
+  return result
+}
+
+/**
+ * Price axis component that displays price scale below the slider
+ * Uses tick-based positioning to match the slider exactly
+ * Dynamically reduces tick count when price range is very large
+ */
+function PriceAxis({ viewRange, token0Decimals, token1Decimals, invertPrice }: PriceAxisProps) {
+  const axisTicks = useMemo(() => {
+    // Get min and max prices to determine optimal tick config
+    const minPrice = +tickToPrice(Math.round(viewRange.min), token0Decimals, token1Decimals, invertPrice)
+    const maxPrice = +tickToPrice(Math.round(viewRange.max), token0Decimals, token1Decimals, invertPrice)
+    const { tickCount, minGapPercent } = getOptimalTickConfig(
+      Math.min(minPrice, maxPrice),
+      Math.max(minPrice, maxPrice),
+    )
+
+    const ticks = calculateAxisTicks(viewRange, token0Decimals, token1Decimals, tickCount, invertPrice)
+    return filterOverlappingTicks(ticks, minGapPercent)
+  }, [viewRange, token0Decimals, token1Decimals, invertPrice])
+
+  return (
+    <PriceAxisContainer>
+      <PriceAxisLine />
+      {axisTicks.map(({ price, position, showLabel }, index) => {
+        // Only render if within visible range
+        if (position < -2 || position > 102) return null
+        return (
+          <React.Fragment key={index}>
+            <PriceAxisTick $position={position} />
+            {showLabel && <PriceAxisLabel $position={position}>{formatAxisPrice(price)}</PriceAxisLabel>}
+          </React.Fragment>
+        )
+      })}
+    </PriceAxisContainer>
+  )
+}
+
+export default React.memo(PriceAxis)