feat: add bsc mev protection (#2860)

* feat: add bsc mev protection

* fix: lint

Author: tienkane

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

@@ -37,8 +37,9 @@ const Wrapper = styled.div`
   }
 `
 
-const KYBER_SWAP_RPC: { [key: number]: string } = {
+export const KYBER_SWAP_RPC: Partial<Record<ChainId, string>> = {
   [ChainId.MAINNET]: 'https://ethereum-mev-protection.kyberengineering.io/',
+  [ChainId.BSCMAINNET]: 'https://bsc-mev-protection.kyberengineering.io/',
   // [ChainId.BASE]: 'https://base-mev-protection.kyberengineering.io/',
 }
 
@@ -64,7 +65,7 @@ export default function AddMEVProtectionModal({ isOpen, onClose }: { isOpen: boo
     mixpanelHandler(MIXPANEL_TYPE.MEV_ADD_CLICK_MODAL, { type: name })
     addNewNetwork(
       chainId,
-      KYBER_SWAP_RPC[chainId],
+      KYBER_SWAP_RPC[chainId] as string,
       {
         name,
         title: t`Failed to switch to ${name} RPC Endpoint`,

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

@@ -10,6 +10,7 @@ import styled from 'styled-components'
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import { Shield } from 'components/Icons'
 import InfoHelper from 'components/InfoHelper'
+import AddMEVProtectionModal, { KYBER_SWAP_RPC } from 'components/SwapForm/AddMEVProtectionModal'
 import SlippageSetting from 'components/SwapForm/SlippageSetting'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import { APP_PATHS } from 'constants/index'
@@ -19,8 +20,6 @@ import useTheme from 'hooks/useTheme'
 import { usePaymentToken, useSlippageSettingByPage } from 'state/user/hooks'
 import { MEDIA_WIDTHS } from 'theme'
 
-import AddMEVProtectionModal from './AddMEVProtectionModal'
-
 export const PriceAlertButton = styled.div`
   background: ${({ theme }) => rgba(theme.subText, 0.2)};
   border-radius: 24px;
@@ -61,7 +60,7 @@ export default function SlippageSettingGroup({
   const { isSlippageControlPinned } = useSlippageSettingByPage()
   const isPartnerSwap = window.location.pathname.startsWith(APP_PATHS.PARTNER_SWAP)
   let rightButton =
-    [ChainId.MAINNET].includes(chainId) && active && !isPartnerSwap && !isMobile && !isTablet ? (
+    KYBER_SWAP_RPC[chainId] && active && !isPartnerSwap && !isMobile && !isTablet ? (
       <PriceAlertButton onClick={addMevProtectionHandler}>
         <Shield size={14} color={theme.subText} />
         <Text color={theme.subText} style={{ whiteSpace: 'nowrap' }}>

apps/kyberswap-interface/src/components/SwapForm/SwapModal/SwapDetails/index.tsx

@@ -1,4 +1,4 @@
-import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
 import { useCallback, useState } from 'react'
@@ -14,7 +14,7 @@ import Divider from 'components/Divider'
 import { Shield } from 'components/Icons'
 import InfoHelper from 'components/InfoHelper'
 import { RowBetween, RowFixed } from 'components/Row'
-import AddMEVProtectionModal from 'components/SwapForm/AddMEVProtectionModal'
+import AddMEVProtectionModal, { KYBER_SWAP_RPC } from 'components/SwapForm/AddMEVProtectionModal'
 import { PriceAlertButton } from 'components/SwapForm/SlippageSettingGroup'
 import { useSwapFormContext } from 'components/SwapForm/SwapFormContext'
 import ValueWithLoadingSkeleton from 'components/SwapForm/SwapModal/SwapDetails/ValueWithLoadingSkeleton'
@@ -116,7 +116,7 @@ export default function SwapDetails({ isLoading, gasUsd, minimumAmountOut, price
   const upToXXSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToXXSmall}px)`)
   const isPartnerSwap = window.location.pathname.startsWith(APP_PATHS.PARTNER_SWAP)
   const addMevButton =
-    chainId === ChainId.MAINNET &&
+    KYBER_SWAP_RPC[chainId] &&
     active &&
     !isPartnerSwap &&
     slippageStatus === SLIPPAGE_STATUS.HIGH &&