KNC is a utility and governance token and an integral part of Kyber Network and its product KyberSwap -
- the multi-chain decentralized exchange (DEX) protocol that provides superior rates for traders and
- maximizes earnings for liquidity providers.
+ the multi-chain decentralized exchange (DEX) protocol that provides superior rates for traders.{' '}
-
-
-
-
-
-
-
+ {[
+ ChainId.MAINNET,
+ ChainId.MATIC,
+ ChainId.BSCMAINNET,
+ ChainId.AVAXMAINNET,
+ ChainId.BTTC,
+ ChainId.ARBITRUM,
+ ChainId.OPTIMISM,
+ ChainId.LINEA,
+ ChainId.SCROLL,
+ ].map(item => (
+ ![{NETWORKS_INFO[item].name}]({NETWORKS_INFO[item].icon})
+ ))}
-
) : (
-
)}
diff --git a/src/pages/About/AboutKyberSwap/index.tsx b/src/pages/About/AboutKyberSwap/index.tsx
index 9fd482d100..6f636b0ff3 100644
--- a/src/pages/About/AboutKyberSwap/index.tsx
+++ b/src/pages/About/AboutKyberSwap/index.tsx
@@ -1,5 +1,5 @@
import { Trans } from '@lingui/macro'
-import { Edit, FileText, Plus, Repeat } from 'react-feather'
+import { Repeat } from 'react-feather'
import { Link } from 'react-router-dom'
import { useMedia } from 'react-use'
import { Box, Flex, Text } from 'rebass'
@@ -18,22 +18,16 @@ import KyberDark from 'assets/svg/about_icon_kyber.svg'
import ChainSecurity from 'assets/svg/chainsecurity.svg'
import ForTraderImage from 'assets/svg/for_trader.svg'
import { ReactComponent as KNCSVG } from 'assets/svg/knc_black.svg'
-import SeamlessImg from 'assets/svg/seamless.svg'
import Banner from 'components/Banner'
-import { ButtonEmpty, ButtonLight } from 'components/Button'
+import { ButtonEmpty } from 'components/Button'
import { FooterSocialLink } from 'components/Footer/Footer'
import {
BestPrice,
- CircleFocus,
Clock,
CronosLogoFull,
- Drop,
- Enter,
FantomLogoFull,
- FarmIcon,
LineaFull,
LowestSlippage,
- MoneyBagOutline,
OptimismLogoFull,
PolygonLogoFull,
} from 'components/Icons'
@@ -51,25 +45,18 @@ import KyberSwapGeneralIntro from '../KyberSwapGeneralIntro'
import {
AboutKNC,
AboutPage,
- BtnOutlined,
BtnPrimary,
CommittedToSecurityDivider,
Footer,
FooterContainer,
- ForLiquidityProviderItem,
ForTrader,
ForTraderDivider,
ForTraderInfo,
ForTraderInfoShadow,
- GridWrapper,
- KyberSwapSlippage,
Powered,
StatisticItem,
StatisticWrapper,
SupportedChain,
- TabItem,
- Tabs,
- TypicalAMM,
VerticalDivider,
Wrapper,
} from '../styleds'
@@ -178,170 +165,6 @@ function AboutKyberSwap() {
'24hTradingVolume': aggregatorData?.last24hVolume,
}
- const ForLPLowerSlippage = ({ width }: { width?: string }) => (
-
-
-
-
- LOWER SLIPPAGE
-
-
-
-
-
- Amplified Liquidity Pools
-
-
-
- We can amplify liquidity pools to provide much higher capital efficiency and better slippage for you.
- Deposit less tokens and still achieve better liquidity and volume.
-
-
-
-
-
-
- Learn More↗
-
-
-
-
-
- {above768 && (
-
-
- 
-
-
- ~0.1
-
- %
-
- Slippage
-
- AMP Factor = 100
-
-
-
-
- Typical AMM
-
-
-
- ~11
-
- %
-
- Slippage
-
-
- )}
-
- )
-
- const ForLPHigherReturn = ({ width }: { width?: string }) => (
-
-
-
- HIGHER RETURNS
-
-
-
- Dynamic Fees
-
-
- We adjust trading fees dynamically based on market conditions to give you the best returns.
-
-
-
-
-
- Learn More↗
-
-
-
-
- )
-
- const ForLPBonusReward = ({ width }: { width?: string }) => (
-
-
-
- BONUS REWARDS
-
-
-
- Rainmaker Yield Farming
-
-
-
- Deposit your tokens and farm attractive rewards. We collaborate with projects to get you the best rewards.
-
-
-
-
-
-
- Learn More↗
-
-
-
-
- )
-
- const renderCreateNewPoolButton = () => {
- return (
- mixpanelHandler(MIXPANEL_TYPE.ABOUT_CREATE_NEW_POOL_CLICKED)}
- style={{ flex: '0 0 216px', padding: '12px' }}
- >
-
-
- Create New Pool
-
-
- )
- }
-
- const renderContactUsButton = () => {
- return (
-
-
-
- Contact Us
-
-
- )
- }
-
- const renderDocsButton = () => {
- return (
-
-
-
- Docs
-
-
- )
- }
-
const { supportedChains } = useChainsConfig()
return (
@@ -355,10 +178,6 @@ function AboutKyberSwap() {
Swap
{' '}
- and{' '}
-
- Earn
- {' '}
Tokens at Superior Rates
@@ -478,156 +297,6 @@ function AboutKyberSwap() {
)}
-
- FOR LIQUIDITY PROVIDERS
-
-
- Earn more with your crypto assets
-
-
-
- Liquidity providers can earn passive income by participating in our KyberSwap Classic protocol. Simply
- deposit your liquidity and start earning.
-
-
-
-
-
- KyberSwap Classic
-
-
-
- {above500 ? (
-
-
-
-
-
-
-
- ) : (
-
-
-
-
-
- )}
-
-
- mixpanelHandler(MIXPANEL_TYPE.ABOUT_START_EARNING_CLICKED)}
- >
-
-
- Start Earning
-
-
- mixpanelHandler(MIXPANEL_TYPE.ABOUT_VIEW_FARMS_CLICKED)}
- style={{
- flex: 1,
- }}
- >
-
-
- View Farms
-
- {' '}
-
-
-
-
-
- Seamless liquidity.
-
-
- For everyone
-
-
-
- Anyone can provide liquidity to KyberSwap by depositing tokens e.g. Traders, Token Teams.
-
-
-
- Anyone can access this liquidity from KyberSwap for their own use case e.g. Dapps, Aggregators.
-
-
-
-
- Thousands of users and multiple decentralized applications are already providing and using our
- liquidity.
-
-
-
-
-
-
- No KYC or sign-ups required.
-
-
-
-
-
- No extra deposit or withdrawal fees.
-
-
-
-
-
- List your tokens permissionlessly.
-
-
-
-
- 
-
-
-
- {above768 ? (
-
- {renderCreateNewPoolButton()}
- {renderContactUsButton()}
- {renderDocsButton()}
-
- ) : (
-
- {renderCreateNewPoolButton()}
-
- {renderContactUsButton()}
- {renderDocsButton()}
-
-
- )}
-
Committed to Security
diff --git a/src/pages/About/KyberSwapGeneralIntro.tsx b/src/pages/About/KyberSwapGeneralIntro.tsx
index 4679ab561f..48d1380920 100644
--- a/src/pages/About/KyberSwapGeneralIntro.tsx
+++ b/src/pages/About/KyberSwapGeneralIntro.tsx
@@ -4,17 +4,14 @@ import { Link } from 'react-router-dom'
import { useMedia } from 'react-use'
import { Box, Flex, Text } from 'rebass'
-import { ButtonLight, ButtonPrimary } from 'components/Button'
-import { MoneyBagOutline } from 'components/Icons'
+import { ButtonPrimary } from 'components/Button'
import { APP_PATHS } from 'constants/index'
import { useActiveWeb3React } from 'hooks'
import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
-import useTheme from 'hooks/useTheme'
const KyberSwapGeneralIntro = () => {
const { networkInfo } = useActiveWeb3React()
const above768 = useMedia('(min-width: 768px)')
- const theme = useTheme()
const { mixpanelHandler } = useMixpanel()
const renderKyberSwapIntroDEX = () => {
@@ -36,25 +33,6 @@ const KyberSwapGeneralIntro = () => {
)
}
- const renderKyberSwapIntroAMM = () => {
- return (
-
-
- KyberSwap is also an automated market maker (AMM) with industry-leading liquidity protocols and{' '}
- concentrated liquidity. Liquidity providers can add liquidity to our pools & earn fees!
-
-
- )
- }
-
const renderSwapNowButton = () => {
return (
{
)
}
- const renderStartEarningButton = () => {
- return (
- mixpanelHandler(MIXPANEL_TYPE.ABOUT_START_EARNING_CLICKED)}
- style={{
- width: '216px',
- }}
- >
-
-
- Start Earning
-
-
- )
- }
-
if (above768) {
return (
{
display: 'grid',
gap: '24px 72px ',
- gridTemplateColumns: '1fr 1fr',
+ gridTemplateColumns: '1fr',
gridTemplateRows: '1fr auto',
justifyItems: 'center',
}}
>
{renderKyberSwapIntroDEX()}
- {renderKyberSwapIntroAMM()}
{renderSwapNowButton()}
- {renderStartEarningButton()}
)
}
@@ -138,17 +96,6 @@ const KyberSwapGeneralIntro = () => {
{renderKyberSwapIntroDEX()}
{renderSwapNowButton()}
-
-
- {renderKyberSwapIntroAMM()}
- {renderStartEarningButton()}
-
)
}
diff --git a/src/pages/About/styleds.tsx b/src/pages/About/styleds.tsx
index eeef039e96..3c2fb760cf 100644
--- a/src/pages/About/styleds.tsx
+++ b/src/pages/About/styleds.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from 'rebass'
+import { Flex } from 'rebass'
import styled from 'styled-components'
import bgimg from 'assets/images/about_background.png'
@@ -314,23 +314,3 @@ export const MoreInfoWrapper = styled.div`
text-align:center;
`}
`
-
-export const Tabs = styled.div`
- font-size: 24px;
- display: flex;
- gap: 20px;
- margin-top: 24px;
- align-items: center;
- justify-content: center;
-
- ${({ theme }) => theme.mediaWidth.upToExtraSmall`
- gap: 12px;
- font-size: 16px;
- `}
-`
-
-export const TabItem = styled(Text)<{ active?: boolean }>`
- font-weight: ${({ active }) => (active ? 500 : 400)};
- cursor: pointer;
- color: ${({ theme, active }) => (active ? theme.primary : theme.subText)};
-`