feat(earns): revamp positions list and detail pages with new UI

.gitignore

@@ -30,3 +30,6 @@ dist-ssr
 .npmrc
 
 i18n-extract
+
+# TypeScript build info
+*.tsbuildinfo

apps/kyberswap-interface/.env

@@ -42,6 +42,7 @@ VITE_CAMPAIGN_URL=https://arbitrum-stip.kyberswap.com/api
 VITE_REFERRAL_URL=https://referral.kyberswap.com/api
 
 VITE_TOKEN_API_URL=https://token-api.kyberswap.com/api
+VITE_ZAP_API_URL=https://zap-api.kyberswap.com
 VITE_ZAP_EARN_URL=https://earn-service.kyberswap.com/api
 
 VITE_AFFILIATE_SERVICE=https://pre-affiliate-service.kyberengineering.io/api

apps/kyberswap-interface/.env.dev

@@ -43,6 +43,7 @@ VITE_CAMPAIGN_URL=https://arbitrum-stip.kyberswap.com/api
 VITE_REFERRAL_URL=https://referral.kyberswap.com/api
 
 VITE_TOKEN_API_URL=https://token-api.kyberswap.com/api
+VITE_ZAP_API_URL=https://zap-api.kyberswap.com
 VITE_ZAP_EARN_URL=https://earn-service.kyberswap.com/api
 
 VITE_AFFILIATE_SERVICE=https://pre-affiliate-service.kyberengineering.io/api

apps/kyberswap-interface/.env.production

@@ -44,7 +44,9 @@ VITE_CAMPAIGN_URL=https://arbitrum-stip.kyberswap.com/api
 VITE_REFERRAL_URL=https://referral.kyberswap.com/api
 
 VITE_TOKEN_API_URL=https://token-api.kyberswap.com/api
-VITE_ZAP_EARN_URL=https://earn-service.kyberswap.com/api
+VITE_ZAP_API_URL=https://zap-api.kyberswap.com
+# VITE_ZAP_EARN_URL=https://earn-service.kyberswap.com/api
+VITE_ZAP_EARN_URL=https://pre-zap-earn-service.kyberengineering.io/api
 
 VITE_AFFILIATE_SERVICE=https://affiliate-service.kyberswap.com/api
 VITE_SOLANA_RPC=https://solana.kyberengineering.io

apps/kyberswap-interface/.env.stg

@@ -40,6 +40,7 @@ VITE_CAMPAIGN_URL=https://arbitrum-stip.kyberswap.com/api
 VITE_REFERRAL_URL=https://referral.kyberswap.com/api
 
 VITE_TOKEN_API_URL=https://token-api.kyberswap.com/api
+VITE_ZAP_API_URL=https://zap-api.kyberswap.com
 VITE_ZAP_EARN_URL=https://earn-service.kyberswap.com/api
 
 

apps/kyberswap-interface/package.json

@@ -193,6 +193,8 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@cypress/grep": "^3.1.5",
+    "@kyber/hooks": "workspace:^",
+    "@kyber/rpc-client": "workspace:*",
     "@kyber/schema": "workspace:^",
     "@kyber/token-selector": "workspace:^",
     "@kyber/ui": "workspace:^",

apps/kyberswap-interface/src/components/Pagination/styles.tsx

@@ -5,9 +5,11 @@ export const PaginationContainer = styled.ul`
   display: flex;
   justify-content: center;
   list-style-type: none;
-  background: ${({ theme }) => theme.background};
+  background: ${({ theme }) => rgba(theme.subText, 0.04)};
   margin: 0;
-  padding: 16px;
+  padding: 12px;
+  gap: 4px;
+  border-radius: 0 0 20px 20px;
 `
 
 export const PaginationItem = styled.li<{ $disabled?: boolean; $selected?: boolean }>`
@@ -42,22 +44,20 @@ export const PaginationButton = styled.div<{ active?: boolean; haveBg?: boolean
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  padding: 8px;
+  padding: 0;
   border-radius: 50%;
 
-  color: ${({ theme, active }) => (active ? theme.primary : theme.subText)};
+  color: ${({ theme, active }) => (active ? theme.primary : rgba(theme.white, 0.6))};
   background: ${({ theme, active, haveBg }) =>
     !haveBg
       ? active
-        ? theme.background
-        : rgba(theme.background, 0.4)
+        ? rgba(theme.black, 0.48)
+        : rgba(theme.black, 0.2)
       : active
       ? theme.buttonBlack
       : rgba(theme.buttonBlack, 0.4)};
-  padding: 0;
-  border-radius: 50%;
 
   &:hover {
-    background: ${({ theme, haveBg }) => (haveBg ? theme.buttonBlack : theme.background)};
+    background: ${({ theme, haveBg }) => (haveBg ? theme.buttonBlack : rgba(theme.black, 0.4))};
   }
 `

apps/kyberswap-interface/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,105 @@
+import { type ReactNode } from 'react'
+import styled, { css } from 'styled-components'
+
+export type SegmentedControlOption<T extends string = string> = {
+  label: ReactNode
+  value: T
+  disabled?: boolean
+}
+
+type SegmentedControlProps<T extends string> = {
+  onChange?: (value: T) => void
+  options?: readonly SegmentedControlOption<T>[]
+  size?: 'sm' | 'md'
+  value?: T
+}
+
+const sizeStyles = {
+  sm: css`
+    padding: 8px;
+  `,
+  md: css`
+    padding: 8px 12px;
+  `,
+}
+
+const Container = styled.div<{ $optionCount: number }>`
+  display: grid;
+  position: relative;
+  grid-template-columns: repeat(${({ $optionCount }) => $optionCount}, minmax(0, 1fr));
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.border};
+  border-radius: 999px;
+  background: ${({ theme }) => theme.background};
+`
+
+const ActivePill = styled.div<{ $activeIndex: number; $optionCount: number }>`
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  left: 1px;
+  width: calc((100% - 2px) / ${({ $optionCount }) => $optionCount});
+  border-radius: 999px;
+  background: ${({ theme }) => theme.tabActive};
+  transform: translateX(calc(100% * ${({ $activeIndex }) => $activeIndex}));
+  transition: transform 200ms ease, background 200ms ease;
+  pointer-events: none;
+`
+
+const OptionButton = styled.button<{ $active: boolean; $size: 'sm' | 'md' }>`
+  position: relative;
+  z-index: 1;
+  min-width: 48px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: ${({ theme, $active }) => ($active ? theme.text : theme.subText)};
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 200ms ease, background 200ms ease;
+
+  ${({ $size }) => sizeStyles[$size]}
+
+  :hover:not(:disabled) {
+    background: ${({ theme, $active }) => ($active ? 'transparent' : theme.buttonGray)};
+  }
+
+  :disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`
+
+const SegmentedControl = <T extends string>({
+  onChange,
+  options = [],
+  size = 'sm',
+  value,
+}: SegmentedControlProps<T>) => {
+  if (!options.length) return null
+
+  const activeIndex = options.findIndex(option => option.value === value)
+
+  return (
+    <Container $optionCount={options.length} role="tablist">
+      <ActivePill $activeIndex={Math.max(activeIndex, 0)} $optionCount={options.length} />
+      {options.map(option => (
+        <OptionButton
+          $active={option.value === value}
+          $size={size}
+          aria-selected={option.value === value}
+          disabled={option.disabled || !onChange}
+          key={option.value}
+          onClick={() => !option.disabled && onChange?.(option.value)}
+          role="tab"
+          type="button"
+        >
+          {option.label}
+        </OptionButton>
+      ))}
+    </Container>
+  )
+}
+
+export default SegmentedControl

apps/kyberswap-interface/src/components/Skeleton/index.tsx

@@ -0,0 +1,37 @@
+import { type ComponentProps } from 'react'
+import LoadingSkeleton from 'react-loading-skeleton'
+import { createGlobalStyle } from 'styled-components'
+
+import useTheme from 'hooks/useTheme'
+
+export type SkeletonProps = ComponentProps<typeof LoadingSkeleton>
+
+const SKELETON_CONTAINER_CLASSNAME = 'ks-skeleton-container'
+
+const SkeletonGlobalStyle = createGlobalStyle`
+  .${SKELETON_CONTAINER_CLASSNAME} {
+    display: block;
+    line-height: 0;
+  }
+`
+
+const Skeleton = ({ baseColor, containerClassName, highlightColor, ...props }: SkeletonProps) => {
+  const theme = useTheme()
+  const mergedContainerClassName = containerClassName
+    ? `${SKELETON_CONTAINER_CLASSNAME} ${containerClassName}`
+    : SKELETON_CONTAINER_CLASSNAME
+
+  return (
+    <>
+      <SkeletonGlobalStyle />
+      <LoadingSkeleton
+        {...props}
+        baseColor={baseColor ?? theme.background}
+        containerClassName={mergedContainerClassName}
+        highlightColor={highlightColor ?? theme.buttonGray}
+      />
+    </>
+  )
+}
+
+export default Skeleton

apps/kyberswap-interface/src/components/Stack/index.tsx

@@ -0,0 +1,60 @@
+import type { CSSProperties, ComponentProps } from 'react'
+import { Box } from 'rebass/styled-components'
+import styled from 'styled-components'
+
+const getSpacing = (value?: CSSProperties['gap']) => {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+  return value
+}
+
+const getLength = (value?: CSSProperties['borderRadius']) => {
+  if (typeof value === 'number') return `${value}px`
+  return value
+}
+
+type BoxProps = ComponentProps<typeof Box>
+
+type StackStyleProps = Pick<
+  CSSProperties,
+  | 'alignItems'
+  | 'background'
+  | 'border'
+  | 'borderRadius'
+  | 'columnGap'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'gap'
+  | 'justifyContent'
+  | 'position'
+  | 'rowGap'
+>
+
+export type StackProps = BoxProps &
+  StackStyleProps & {
+    direction?: StackStyleProps['flexDirection']
+    spacing?: StackStyleProps['gap']
+    align?: StackStyleProps['alignItems']
+    justify?: StackStyleProps['justifyContent']
+    wrap?: StackStyleProps['flexWrap']
+  }
+
+export const Stack = styled(Box)<StackProps>`
+  display: flex;
+  position: ${({ position }) => position};
+  flex-direction: ${({ direction }) => direction || 'column'};
+  align-items: ${({ alignItems, align }) => alignItems || align || 'stretch'};
+  justify-content: ${({ justifyContent, justify }) => justifyContent || justify || 'flex-start'};
+  flex-wrap: ${({ wrap }) => wrap || 'nowrap'};
+  gap: ${({ gap, spacing }) => getSpacing(gap || spacing)};
+  row-gap: ${({ rowGap }) => getSpacing(rowGap)};
+  column-gap: ${({ columnGap }) => getSpacing(columnGap)};
+  background: ${({ background }) => background};
+  border: ${({ border }) => border};
+  border-radius: ${({ borderRadius }) => getLength(borderRadius)};
+`
+
+export const HStack = styled(Stack)`
+  flex-direction: row;
+`

apps/kyberswap-interface/src/components/TradeRouting/index.tsx

@@ -184,7 +184,10 @@ const Routing = ({
     handleScroll()
   }, [tradeComposition, maxHeight, handleScroll])
 
-  const isSwapRouteV3 = tradeComposition?.every(item => 'pool' in item)
+  const isSwapRouteV3 =
+    (tradeComposition as Array<SwapRouteV2 | SwapRouteV3> | undefined)?.every(
+      (item): item is SwapRouteV3 => 'pool' in item,
+    ) ?? false
 
   return (
     <Shadow ref={shadowRef}>

apps/kyberswap-interface/src/components/ZapCreatePool/CreatePoolModal.tsx

@@ -281,15 +281,13 @@ const CreatePoolModal = ({ isOpen, filterChainId, onDismiss, onSubmit }: Props)
                 fullWidth
                 options={chainOptions}
                 value={selectedChainId.toString()}
-                alignLeft
                 mobileFullWidth
                 onChange={value => setSelectedChainId(Number(value) as ChainId)}
               />
               <DropdownMenu
                 fullWidth
                 options={protocolOptions}
                 value={selectedProtocol}
-                alignLeft
                 mobileFullWidth
                 onChange={value => setSelectedProtocol(value as Exchange)}
               />

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

@@ -147,6 +147,7 @@ export const APP_PATHS = {
   PARTNER_SWAP: '/partner-swap',
   FIND_POOL: '/find',
   POOLS: '/pools',
+  ADD_LIQUIDITY: '/pools/add-liquidity',
   CLASSIC_CREATE_POOL: '/create',
   CLASSIC_ADD_LIQ: '/add',
   CLASSIC_REMOVE_POOL: '/remove',

apps/kyberswap-interface/src/hooks/usePermitNft.ts

@@ -49,7 +49,6 @@ export const usePermitNft = ({ contractAddress, tokenId, spender, deadline, vers
   const notify = useNotify()
   const [isSigningInProgress, setIsSigningInProgress] = useState(false)
   const [permitData, setPermitData] = useState<PermitNftResult | null>(null)
-  const [detectedVersion, setDetectedVersion] = useState<'v3' | 'v4' | null>(null)
 
   const nftContract = useReadingContract(contractAddress, NFT_PERMIT_ABI)
 
@@ -66,20 +65,11 @@ export const usePermitNft = ({ contractAddress, tokenId, spender, deadline, vers
   const actualVersion = useMemo(() => {
     if (version !== 'auto') return version
 
-    if (detectedVersion) return detectedVersion
+    if (noncesState?.result && !noncesState.error) return 'v4'
+    if (positionsState?.result && !positionsState.error) return 'v3'
 
-    if (noncesState?.result && !noncesState.error) {
-      setDetectedVersion('v4')
-      return 'v4'
-    }
-
-    // Try to detect based on available data
-    if (positionsState?.result && !positionsState.error) {
-      setDetectedVersion('v3')
-      return 'v3'
-    }
     return 'v4' // Default to v4 if uncertain
-  }, [version, detectedVersion, positionsState, noncesState])
+  }, [version, positionsState, noncesState])
 
   const permitState = useMemo(() => {
     if (!account || !contractAddress || !tokenId || !spender) {