update dexs: add kyber-pmm, limit-order-v2 to ks dexes

src/components/swapv2/LiquiditySourcesPanel/index.tsx

@@ -106,6 +106,8 @@ const LiquiditySourceHeader = styled.div`
   align-items: center;
 `
 
+export const isKyberSwapDex = (id: string) => id.toLowerCase().includes('kyber')
+
 const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
   const [searchText, setSearchText] = useState('')
   const debouncedSearchText = useDebounce(searchText.toLowerCase(), 200).trim()
@@ -135,7 +137,7 @@ const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
   }, [excludeDexes, dexes])
 
   const ksDexes = useMemo(
-    () => dexes.filter(item => item.id.includes('kyberswap')).sort((a, b) => a.sortId - b.sortId),
+    () => dexes.filter(item => isKyberSwapDex(item.id)).sort((a, b) => a.sortId - b.sortId),
     [dexes],
   )
 
@@ -210,10 +212,10 @@ const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
                   checked={!ksDexes.map(i => i.id).every(item => excludeDexes.includes(item))}
                   onChange={e => {
                     if (e.target.checked) {
-                      setExcludeDexes(excludeDexes.filter(item => !item.includes('kyberswap')))
+                      setExcludeDexes(excludeDexes.filter(item => !isKyberSwapDex(item)))
                     } else {
                       const newData = [
-                        ...excludeDexes.filter(item => !item.includes('kyberswap')),
+                        ...excludeDexes.filter(item => !isKyberSwapDex(item)),
                         ...ksDexes.map(item => item.id),
                       ]
                       setExcludeDexes(newData)
@@ -244,7 +246,7 @@ const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
             </>
           )}
           {dexes
-            ?.filter(item => !item.id.includes('kyberswap') && item.name.toLowerCase().includes(debouncedSearchText))
+            ?.filter(item => !isKyberSwapDex(item.id) && item.name.toLowerCase().includes(debouncedSearchText))
             .map(({ name, logoURL, id }) => (
               <Source key={name}>
                 <Checkbox checked={!excludeDexes.includes(id)} onChange={() => handleToggleDex(id)} />

src/constants/dexes.ts

@@ -1,32 +1,22 @@
-// To combine kyberswap & kyberswap-static into one option on UI
-// They are both kyberswap classic, one is dynamic fee, other is static fee
+// To combine all kyber options 1 option on UI
 export const KYBERSWAP_KS_DEXES_TO_UI_DEXES: { [key: string]: string | undefined } = {
-  'kyberswap-elastic': 'kyberswap-elastic',
   kyberswap: 'kyberswapv1', // kyberswap classic old contract
   'kyberswap-static': 'kyberswapv1', // kyberswap classic new contract -> with static fee
+  'kyberswap-elastic': 'kyberswap-elastic',
   'kyberswap-limit-order': 'kyberswap-limit-order',
+  'kyberswap-limit-order-v2': 'kyberswap-limit-order-v2',
+  'kyber-pmm': 'kyber-pmm',
 }
 
-export const KYBERSWAP_UI_DEXES: {
+// only put dex need to be custom, otherwise get from admin
+export const KYBERSWAP_UI_DEXES_CUSTOM: {
   [key: string]: {
     name: string
     id: string
-    logoURL: string
   }
 } = {
-  'kyberswap-elastic': {
-    name: 'KyberSwap Elastic',
-    id: 'kyberswap-elastic',
-    logoURL: 'https://kyberswap.com/favicon.ico',
-  },
   kyberswapv1: {
     name: 'KyberSwap Classic',
     id: 'kyberswapv1',
-    logoURL: 'https://kyberswap.com/favicon.ico',
-  },
-  'kyberswap-limit-order': {
-    name: 'KyberSwap Limit Order',
-    id: 'kyberswap-limit-order',
-    logoURL: 'https://kyberswap.com/favicon.ico',
   },
 }

src/state/customizeDexes/updater.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
 
-import { KYBERSWAP_KS_DEXES_TO_UI_DEXES, KYBERSWAP_UI_DEXES } from 'constants/dexes'
+import { isKyberSwapDex } from 'components/swapv2/LiquiditySourcesPanel'
+import { KYBERSWAP_KS_DEXES_TO_UI_DEXES, KYBERSWAP_UI_DEXES_CUSTOM } from 'constants/dexes'
 import { useActiveWeb3React } from 'hooks'
 import useLiquiditySources from 'hooks/useAggregatorStats'
 import { AppDispatch } from 'state/index'
@@ -18,16 +19,19 @@ export default function Updater(): null {
   // filterout kyberswap dexes, will hardcode
   const normalizeDexes = useMemo(() => {
     const dexesFormatted: Dex[] = dexes?.map(item => ({ ...item, id: item.dexId, sortId: item.id })) || []
-    const dexesOutsideKyberswap = dexesFormatted.filter(item => !item.id.includes('kyberswap'))
+    const dexesOutsideKyberswap = dexesFormatted.filter(item => !isKyberSwapDex(item.id))
     const dexesKyberswap = uniqueArray(
       dexesFormatted.filter(dex => KYBERSWAP_KS_DEXES_TO_UI_DEXES[dex.id]),
       dex => KYBERSWAP_KS_DEXES_TO_UI_DEXES[dex.id],
     )
-    const dexesUIKyberswap = dexesKyberswap.map(dex => ({
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ...KYBERSWAP_UI_DEXES[KYBERSWAP_KS_DEXES_TO_UI_DEXES[dex.id]!],
-      sortId: dex.sortId,
-    }))
+    const dexesUIKyberswap = dexesKyberswap.map(dex => {
+      const custom = KYBERSWAP_UI_DEXES_CUSTOM[KYBERSWAP_KS_DEXES_TO_UI_DEXES[dex.id] || ''] || dex
+      return {
+        ...custom,
+        sortId: dex.sortId,
+        logoURL: 'https://kyberswap.com/favicon.ico',
+      }
+    })
 
     return [...dexesOutsideKyberswap, ...dexesUIKyberswap]
   }, [dexes])