Squash

Try to implement

Shadow liquidity widget UI

Continue

Refactor

Chore

Refactor add liquidity UI

Route preview

Information tab layout

Apr chart first look

Continue

Try improve

Update review modal

Refactor add liquidity

Continue

Update packages typesVersions

Update import

Add useFeedback

Continue

Refactor hooks

Minor logic components

Refactor components

Continue

Continue

Just push but no verify

Skeleton responsive

Continue

Update TokenSelector sort behavior

Chore

Refactor Information tab

Refactor

Chore fix

Chore

Update review modal

Cont update TokenSelector

Chore

Improve logic REviewModal

Improve review modal

Continue

Analytics first look

Author: neikop

apps/kyberswap-interface/.env.production

@@ -45,6 +45,7 @@ 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_EARN_ANALYTICS_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/package.json

@@ -39,7 +39,6 @@
     "ChromeAndroid >= 52"
   ],
   "dependencies": {
-    "@kyber/rpc-client": "workspace:*",
     "@across-protocol/app-sdk": "^0.4.4",
     "@bitcoinerlab/secp256k1": "^1.2.0",
     "@defuse-protocol/one-click-sdk-typescript": "^0.1.2",
@@ -192,6 +191,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/assets/svg/earn/ic_add_liquidity_setting.svg

@@ -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/assets/svg/earn/ic_add_liquidity_wallet.svg

@@ -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/assets/svg/kyber/ic_bag.svg

@@ -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/components/Stack/index.tsx

@@ -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/components/TradeRouting/index.tsx

@@ -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) {