From 3de5f72d13c18365c8daee131140a2bb9f0612a3 Mon Sep 17 00:00:00 2001 From: viet-nv Date: Mon, 18 Mar 2024 14:49:05 +0700 Subject: [PATCH] feat: update about page --- src/assets/svg/seamless.svg | 9 - src/pages/About/AboutKNC.tsx | 64 ++--- src/pages/About/AboutKyberSwap/index.tsx | 335 +--------------------- src/pages/About/KyberSwapGeneralIntro.tsx | 57 +--- src/pages/About/styleds.tsx | 22 +- 5 files changed, 26 insertions(+), 461 deletions(-) delete mode 100644 src/assets/svg/seamless.svg diff --git a/src/assets/svg/seamless.svg b/src/assets/svg/seamless.svg deleted file mode 100644 index c76e9a868f..0000000000 --- a/src/assets/svg/seamless.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/pages/About/AboutKNC.tsx b/src/pages/About/AboutKNC.tsx index f646c19d8e..1f6a6c808e 100644 --- a/src/pages/About/AboutKNC.tsx +++ b/src/pages/About/AboutKNC.tsx @@ -1,3 +1,4 @@ +import { ChainId } from '@kyberswap/ks-sdk-core' import { Trans } from '@lingui/macro' import { Archive, Repeat } from 'react-feather' import { Link } from 'react-router-dom' @@ -49,18 +50,9 @@ import { Upbit, } from 'components/ExchangeIcons' import { FooterSocialLink } from 'components/Footer/Footer' -import { - Arbitrum, - Avalanche, - BestPrice, - Binance as BinanceIcon, - Bttc, - Ethereum, - OptimismLogo, - Polygon, -} from 'components/Icons' import { APP_PATHS } from 'constants/index' import { useActiveWeb3React } from 'hooks/index' +import { NETWORKS_INFO } from 'hooks/useChainsConfig' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import { ExternalLink, StyledInternalLink } from 'theme' @@ -177,28 +169,6 @@ function AboutKNC() { ) - const LiquidityIncentitives = ({ width }: { width?: string }) => ( - - - - LIQUIDITY INCENTIVES - - - - - KyberDAO can propose various KNC incentives like liquidity mining rewards on KyberSwap on top of standard - trading fees to provide more value to liquidity providers. - - - - ) - return (
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} + ))} - ) : ( - )} 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 && ( - - - KyberSwap - - - ~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. - - - - - SeamlessImg - - - - {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)}; -`