diff --git a/src/components/swapv2/LiquiditySourcesPanel/index.tsx b/src/components/swapv2/LiquiditySourcesPanel/index.tsx index acfdddb44c..8925fadf6c 100644 --- a/src/components/swapv2/LiquiditySourcesPanel/index.tsx +++ b/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 = ({ onBack }) => { const [searchText, setSearchText] = useState('') const debouncedSearchText = useDebounce(searchText.toLowerCase(), 200).trim() @@ -135,7 +137,7 @@ const LiquiditySourcesPanel: React.FC = ({ 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 = ({ 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 = ({ 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 }) => ( handleToggleDex(id)} /> diff --git a/src/constants/dexes.ts b/src/constants/dexes.ts index 05b0301353..8feef13cf9 100644 --- a/src/constants/dexes.ts +++ b/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', }, } diff --git a/src/state/customizeDexes/updater.tsx b/src/state/customizeDexes/updater.tsx index 139f264aa5..7c8b15863e 100644 --- a/src/state/customizeDexes/updater.tsx +++ b/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])