diff --git a/index.html b/index.html index ed49b2f07f..747986cc54 100644 --- a/index.html +++ b/index.html @@ -1,55 +1,62 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - KyberSwap - Trading Smart - - - - + + + - - - - - -
- - - -
-
- -
-
Swap
-
Earn
-
- - - - - - - KyberAI -
+
+ +
+
Swap
+
Earn
+
+ + + + + + + KyberAI +
- beta + " + > + beta +
-
-
Campaigns
-
Analytics
-
About
-
Blog
+
Campaigns
+
Analytics
+
About
+
Blog
+
+
+
+ DmmLogo
-
- DmmLogo - DmmLogo -
-
- - - + - - - - + diff --git a/public/christmas-logo-light.svg b/public/christmas-logo-light.svg deleted file mode 100644 index 6e7610db6e..0000000000 --- a/public/christmas-logo-light.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/Arbitrum_HorizontalLogo.svg b/src/assets/images/Arbitrum_HorizontalLogo.svg deleted file mode 100644 index d855efdae3..0000000000 --- a/src/assets/images/Arbitrum_HorizontalLogo.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/images/btt-logo.svg b/src/assets/images/btt-logo.svg deleted file mode 100644 index c450bbbefc..0000000000 --- a/src/assets/images/btt-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/light_texture.png b/src/assets/images/light_texture.png deleted file mode 100644 index f36613bf8d..0000000000 Binary files a/src/assets/images/light_texture.png and /dev/null differ diff --git a/src/assets/images/multichain_black.png b/src/assets/images/multichain_black.png deleted file mode 100644 index afd173c480..0000000000 Binary files a/src/assets/images/multichain_black.png and /dev/null differ diff --git a/src/assets/images/my_earnings_placeholder_desktop_light.png b/src/assets/images/my_earnings_placeholder_desktop_light.png deleted file mode 100644 index 9317b748c1..0000000000 Binary files a/src/assets/images/my_earnings_placeholder_desktop_light.png and /dev/null differ diff --git a/src/assets/images/my_earnings_placeholder_mobile_light.png b/src/assets/images/my_earnings_placeholder_mobile_light.png deleted file mode 100644 index 3f3eb15ea1..0000000000 Binary files a/src/assets/images/my_earnings_placeholder_mobile_light.png and /dev/null differ diff --git a/src/assets/images/squid_dark.png b/src/assets/images/squid_dark.png deleted file mode 100644 index 5cedd90aec..0000000000 Binary files a/src/assets/images/squid_dark.png and /dev/null differ diff --git a/src/assets/images/truesight-v2/blurred-charts/blur-1-1-light.png b/src/assets/images/truesight-v2/blurred-charts/blur-1-1-light.png deleted file mode 100644 index da6a1cf340..0000000000 Binary files a/src/assets/images/truesight-v2/blurred-charts/blur-1-1-light.png and /dev/null differ diff --git a/src/assets/images/truesight-v2/blurred-charts/blur-2-1-light.png b/src/assets/images/truesight-v2/blurred-charts/blur-2-1-light.png deleted file mode 100644 index 8999a39795..0000000000 Binary files a/src/assets/images/truesight-v2/blurred-charts/blur-2-1-light.png and /dev/null differ diff --git a/src/assets/images/truesight-v2/landing-page/chart-light.png b/src/assets/images/truesight-v2/landing-page/chart-light.png deleted file mode 100644 index 9818af5402..0000000000 Binary files a/src/assets/images/truesight-v2/landing-page/chart-light.png and /dev/null differ diff --git a/src/assets/images/truesight-v2/landing-page/kyberscore-meter-light.png b/src/assets/images/truesight-v2/landing-page/kyberscore-meter-light.png deleted file mode 100644 index dfc2933fd9..0000000000 Binary files a/src/assets/images/truesight-v2/landing-page/kyberscore-meter-light.png and /dev/null differ diff --git a/src/assets/images/truesight-v2/landing-page/live-dex-trades-light.png b/src/assets/images/truesight-v2/landing-page/live-dex-trades-light.png deleted file mode 100644 index 5738c37a48..0000000000 Binary files a/src/assets/images/truesight-v2/landing-page/live-dex-trades-light.png and /dev/null differ diff --git a/src/assets/images/truesight-v2/landing-page/token-price-light.png b/src/assets/images/truesight-v2/landing-page/token-price-light.png deleted file mode 100644 index e6935a42d4..0000000000 Binary files a/src/assets/images/truesight-v2/landing-page/token-price-light.png and /dev/null differ diff --git a/src/assets/svg/about_icon_ethereum_light.png b/src/assets/svg/about_icon_ethereum_light.png deleted file mode 100644 index 4ded509b96..0000000000 Binary files a/src/assets/svg/about_icon_ethereum_light.png and /dev/null differ diff --git a/src/assets/svg/about_icon_github_light.png b/src/assets/svg/about_icon_github_light.png deleted file mode 100644 index e03d8dd8bc..0000000000 Binary files a/src/assets/svg/about_icon_github_light.png and /dev/null differ diff --git a/src/assets/svg/about_icon_kyber_light.svg b/src/assets/svg/about_icon_kyber_light.svg deleted file mode 100644 index d10e82a02c..0000000000 --- a/src/assets/svg/about_icon_kyber_light.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/assets/svg/coingecko_color_light.svg b/src/assets/svg/coingecko_color_light.svg deleted file mode 100644 index 16405f698b..0000000000 --- a/src/assets/svg/coingecko_color_light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svg/coinmarketcap_light.svg b/src/assets/svg/coinmarketcap_light.svg deleted file mode 100644 index 5c7a694d4b..0000000000 --- a/src/assets/svg/coinmarketcap_light.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/assets/svg/for_trader_light.svg b/src/assets/svg/for_trader_light.svg deleted file mode 100644 index 259dc64128..0000000000 --- a/src/assets/svg/for_trader_light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svg/geckoterminal_light.svg b/src/assets/svg/geckoterminal_light.svg deleted file mode 100644 index ad4013fba1..0000000000 --- a/src/assets/svg/geckoterminal_light.svg +++ /dev/null @@ -1,241 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/svg/kyber-dao-light.svg b/src/assets/svg/kyber-dao-light.svg deleted file mode 100644 index 04ab6ad47d..0000000000 --- a/src/assets/svg/kyber-dao-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/wallets/browser-wallet-light.svg b/src/assets/wallets/browser-wallet-light.svg deleted file mode 100644 index d445239d55..0000000000 --- a/src/assets/wallets/browser-wallet-light.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/Announcement/Popups/TopRightPopup.tsx b/src/components/Announcement/Popups/TopRightPopup.tsx index fc1eacb6a9..878d03a764 100644 --- a/src/components/Announcement/Popups/TopRightPopup.tsx +++ b/src/components/Announcement/Popups/TopRightPopup.tsx @@ -53,9 +53,9 @@ const ltr = keyframes` const getBackgroundColor = (theme: DefaultTheme, type: NotificationType = NotificationType.ERROR) => { const mapColor = { - [NotificationType.SUCCESS]: theme.bg21, - [NotificationType.ERROR]: theme.bg22, - [NotificationType.WARNING]: theme.bg23, + [NotificationType.SUCCESS]: theme.bgSuccess, + [NotificationType.ERROR]: theme.bgError, + [NotificationType.WARNING]: theme.bgWarning, } return mapColor[type] } @@ -123,10 +123,7 @@ const Overlay = styled.div` width: 100%; height: 100%; background: ${({ theme }) => - `linear-gradient(180deg, ${rgba(theme.darkMode ? theme.black : theme.white, 0)} 40.1%, ${rgba( - theme.darkMode ? theme.black : theme.white, - 0.8, - )} 100%)`}; + `linear-gradient(180deg, ${rgba(theme.black, 0)} 40.1%, ${rgba(theme.black, 0.8)} 100%)`}; ` export default function PopupItem({ popup, hasOverlay }: { popup: PopupItemType; hasOverlay: boolean }) { diff --git a/src/components/DownloadWalletModal/index.tsx b/src/components/DownloadWalletModal/index.tsx index 5532f718da..1fe76d7921 100644 --- a/src/components/DownloadWalletModal/index.tsx +++ b/src/components/DownloadWalletModal/index.tsx @@ -11,7 +11,6 @@ import { connections } from 'constants/wallets' import useTheme from 'hooks/useTheme' import { ApplicationModal } from 'state/application/actions' import { useCloseModal, useModalOpen } from 'state/application/hooks' -import { useDarkModeManager } from 'state/user/hooks' import { ButtonText } from 'theme' const DownloadWalletRow = styled.a` @@ -40,7 +39,6 @@ const DownloadWalletRow = styled.a` export default function DownloadWalletModal() { const theme = useTheme() - const [isDarkMode] = useDarkModeManager() const isOpen = useModalOpen(ApplicationModal.DOWNLOAD_WALLET) const closeModal = useCloseModal(ApplicationModal.DOWNLOAD_WALLET) return ( @@ -66,7 +64,7 @@ export default function DownloadWalletModal() { target="_blank" rel="noopener noreferrer" > - + {item.name} ))} diff --git a/src/components/ExchangeIcons/Bitrue.tsx b/src/components/ExchangeIcons/Bitrue.tsx index 47de7b0d04..0798e3f8f6 100644 --- a/src/components/ExchangeIcons/Bitrue.tsx +++ b/src/components/ExchangeIcons/Bitrue.tsx @@ -1,13 +1,9 @@ -import { useIsDarkMode } from 'state/user/hooks' - function Bitrue({ width, height }: { width?: number; height?: number }) { - const isDarkMode = useIsDarkMode() - return ( ) diff --git a/src/components/ExchangeIcons/Huobi.tsx b/src/components/ExchangeIcons/Huobi.tsx index 19b17f6016..a7fd400db9 100644 --- a/src/components/ExchangeIcons/Huobi.tsx +++ b/src/components/ExchangeIcons/Huobi.tsx @@ -1,21 +1,17 @@ -import { useIsDarkMode } from 'state/user/hooks' - function Etoro({ width, height }: { width?: number; height?: number }) { - const isDarkMode = useIsDarkMode() - return ( ) diff --git a/src/components/ExchangeIcons/KyberSwap.tsx b/src/components/ExchangeIcons/KyberSwap.tsx index da8aaededf..b711516709 100644 --- a/src/components/ExchangeIcons/KyberSwap.tsx +++ b/src/components/ExchangeIcons/KyberSwap.tsx @@ -1,8 +1,4 @@ -import { useIsDarkMode } from 'state/user/hooks' - function KyberSwap({ width, height }: { width?: number; height?: number }) { - const isDarkMode = useIsDarkMode() - return ( ) diff --git a/src/components/ExchangeIcons/Mexc.tsx b/src/components/ExchangeIcons/Mexc.tsx index e81f137db1..47059e35b6 100644 --- a/src/components/ExchangeIcons/Mexc.tsx +++ b/src/components/ExchangeIcons/Mexc.tsx @@ -1,8 +1,4 @@ -import { useIsDarkMode } from 'state/user/hooks' - function Mexc({ width, height }: { width?: number; height?: number }) { - const isDarkMode = useIsDarkMode() - return ( ) diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 6047971884..55e21da8fc 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -8,12 +8,10 @@ import { Telegram } from 'components/Icons' import Discord from 'components/Icons/Discord' import Medium from 'components/Icons/Medium' import PoweredByIconDark from 'components/Icons/PoweredByIconDark' -import PoweredByIconLight from 'components/Icons/PoweredByIconLight' import TwitterIcon from 'components/Icons/TwitterIcon' import InfoHelper from 'components/InfoHelper' import { KYBER_NETWORK_DISCORD_URL, KYBER_NETWORK_TWITTER_URL } from 'constants/index' import useTheme from 'hooks/useTheme' -import { useIsDarkMode } from 'state/user/hooks' import { ExternalLink, ExternalLinkNoLineHeight } from 'theme' const FooterWrapper = styled.div` @@ -102,7 +100,6 @@ export const FooterSocialLink = () => { } function Footer() { - const isDarkMode = useIsDarkMode() const above768 = useMedia('(min-width: 768px)') return ( @@ -114,7 +111,7 @@ function Footer() { Powered By - {isDarkMode ? : } + @@ -125,15 +122,7 @@ function Footer() { {!above768 && } - + {above768 && } diff --git a/src/components/Header/groups/SwapNavGroup.tsx b/src/components/Header/groups/SwapNavGroup.tsx index 90c5bf3da3..d22dca983c 100644 --- a/src/components/Header/groups/SwapNavGroup.tsx +++ b/src/components/Header/groups/SwapNavGroup.tsx @@ -7,9 +7,7 @@ import styled from 'styled-components' import { ReactComponent as MasterCard } from 'assets/buy-crypto/master-card.svg' import { ReactComponent as Visa } from 'assets/buy-crypto/visa.svg' -// import MultichainLogoDark from 'assets/images/multichain_black.png' // import MultichainLogoLight from 'assets/images/multichain_white.png' -import SquidLogoDark from 'assets/images/squid_dark.png' import SquidLogoLight from 'assets/images/squid_light.png' // import { ReactComponent as BridgeIcon } from 'assets/svg/bridge_icon.svg' import { ReactComponent as BuyCrypto } from 'assets/svg/buy_crypto.svg' @@ -20,7 +18,6 @@ import { APP_PATHS, CHAINS_SUPPORT_CROSS_CHAIN } from 'constants/index' import { useActiveWeb3React } from 'hooks' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import { useTutorialSwapGuide } from 'state/tutorial/hooks' -import { useIsDarkMode } from 'state/user/hooks' import { isSupportLimitOrder } from 'utils' import { DropdownTextAnchor, StyledNavLink } from '../styleds' @@ -53,7 +50,6 @@ const StyledBuyCrypto = styled(BuyCrypto)` const SwapNavGroup = () => { const { networkInfo, chainId } = useActiveWeb3React() - const isDark = useIsDarkMode() const { pathname } = useLocation() const upTo420 = useMedia('(max-width: 420px)') @@ -118,7 +114,7 @@ const SwapNavGroup = () => { Cross-Chain - kyberswap with Squid + kyberswap with Squid diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 1027306816..f5d5b8b5f8 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -16,7 +16,7 @@ import { THRESHOLD_HEADER, Z_INDEXS } from 'constants/styles' import { useActiveWeb3React } from 'hooks' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' -import { useHolidayMode, useIsDarkMode } from 'state/user/hooks' +import { useHolidayMode } from 'state/user/hooks' import { MEDIA_WIDTHS } from 'theme' import KyberAINavItem from './KyberAINavItem' @@ -176,7 +176,6 @@ const LogoIcon = styled.div` export default function Header() { const { networkInfo } = useActiveWeb3React() - const isDark = useIsDarkMode() const [holidayMode] = useHolidayMode() const theme = useTheme() const { mixpanelHandler } = useMixpanel() @@ -194,15 +193,11 @@ export default function Header() { {holidayMode ? ( <LogoIcon> - <IconImage - isChristmas - src={isDark ? '/christmas-logo-dark.svg' : '/christmas-logo-light.svg'} - alt="logo" - /> + <IconImage isChristmas src={'/christmas-logo-dark.svg'} alt="logo" /> </LogoIcon> ) : ( <LogoIcon> - <IconImage src={isDark ? '/logo-dark.svg' : '/logo.svg'} alt="logo" /> + <IconImage src={'/logo-dark.svg'} alt="logo" /> </LogoIcon> )} diff --git a/src/components/Header/web3/NetworkModal/Networks.tsx b/src/components/Header/web3/NetworkModal/Networks.tsx index e7125ff432..48ecaff5b7 100644 --- a/src/components/Header/web3/NetworkModal/Networks.tsx +++ b/src/components/Header/web3/NetworkModal/Networks.tsx @@ -17,7 +17,6 @@ import useChainsConfig, { ChainState } from 'hooks/useChainsConfig' import useParsedQueryString from 'hooks/useParsedQueryString' import useTheme from 'hooks/useTheme' import { useChangeNetwork } from 'hooks/web3/useChangeNetwork' -import { useIsDarkMode } from 'state/user/hooks' const NewLabel = styled.span` font-size: 12px; @@ -47,7 +46,7 @@ const ListItem = styled.div<{ selected?: boolean }>` ${({ theme, selected }) => selected && css` - background-color: ${theme.darkMode ? theme.buttonBlack : theme.buttonGray}; + background-color: ${theme.buttonBlack}; & > div { color: ${theme.text}; } @@ -143,7 +142,6 @@ const Networks = ({ const { changeNetwork } = useChangeNetwork() const qs = useParsedQueryString() const navigate = useNavigate() - const isDarkMode = useIsDarkMode() const theme = useTheme() const onSelect = (chainId: ChainId) => { customToggleModal?.() @@ -177,13 +175,13 @@ const Networks = ({ return ( - {supportedChains.map(({ chainId: itemChainId, iconDark, icon, name, state }: NetworkInfo, i: number) => { + {supportedChains.map(({ chainId: itemChainId, icon, name, state }: NetworkInfo, i: number) => { const isMaintenance = state === ChainState.MAINTENANCE const disabled = !isAcceptedTerm || (activeChainIds ? !activeChainIds?.includes(itemChainId) : false) || isMaintenance const selected = selectedId === itemChainId && !isWrongNetwork - const imgSrc = (isDarkMode ? iconDark : icon) || icon + const imgSrc = icon const walletKey = itemChainId === ChainId.SOLANA ? walletSolana.walletKey @@ -235,10 +233,7 @@ const Networks = ({ {selected && !walletKey && } {walletKey && ( - {SUPPORTED_WALLETS[walletKey].name + {SUPPORTED_WALLETS[walletKey].name )} diff --git a/src/components/Header/web3/SelectNetwork.tsx b/src/components/Header/web3/SelectNetwork.tsx index 5cb6b18179..02268639ad 100644 --- a/src/components/Header/web3/SelectNetwork.tsx +++ b/src/components/Header/web3/SelectNetwork.tsx @@ -14,7 +14,6 @@ import { useActiveWeb3React } from 'hooks' import { useWalletSupportedChains } from 'hooks/web3/useWalletSupportedChains' import { ApplicationModal } from 'state/application/actions' import { useModalOpen, useNetworkModalToggle } from 'state/application/hooks' -import { useIsDarkMode } from 'state/user/hooks' import { useNativeBalance } from 'state/wallet/hooks' import { formatDisplayNumber } from 'utils/numbers' @@ -70,7 +69,6 @@ const NetworkLabel = styled.div` function SelectNetwork(): JSX.Element | null { const { chainId, networkInfo } = useActiveWeb3React() const networkModalOpen = useModalOpen(ApplicationModal.NETWORK) - const isDarkMode = useIsDarkMode() const toggleNetworkModal = useNetworkModalToggle() const userEthBalance = useNativeBalance() const labelContent = useMemo(() => { @@ -90,11 +88,7 @@ function SelectNetwork(): JSX.Element | null { > - {networkInfo.name + {networkInfo.name {labelContent} diff --git a/src/components/Header/web3/SelectWallet.tsx b/src/components/Header/web3/SelectWallet.tsx index 02757c52c5..a29a92947a 100644 --- a/src/components/Header/web3/SelectWallet.tsx +++ b/src/components/Header/web3/SelectWallet.tsx @@ -22,7 +22,6 @@ import { useNetworkModalToggle, useWalletModalToggle } from 'state/application/h import { useSignedAccountInfo } from 'state/profile/hooks' import { isTransactionRecent, newTransactionsFirst, useAllTransactions } from 'state/transactions/hooks' import { TransactionDetails } from 'state/transactions/type' -import { useIsDarkMode } from 'state/user/hooks' import { MEDIA_WIDTHS } from 'theme' import { shortenAddress } from 'utils' @@ -104,7 +103,6 @@ const AccountElement = styled.div` function Web3StatusInner() { const { chainId, account, walletKey, isEVM, isWrongNetwork } = useActiveWeb3React() - const isDarkMode = useIsDarkMode() const { mixpanelHandler } = useMixpanel() const uptoMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`) const { signIn } = useLogin() @@ -183,10 +181,7 @@ function Web3StatusInner() { ) : ( walletKey && ( - {SUPPORTED_WALLETS[walletKey].name + {SUPPORTED_WALLETS[walletKey].name ) )} diff --git a/src/components/Header/web3/WalletModal/Option.tsx b/src/components/Header/web3/WalletModal/Option.tsx index 2db398491b..33716aaa5e 100644 --- a/src/components/Header/web3/WalletModal/Option.tsx +++ b/src/components/Header/web3/WalletModal/Option.tsx @@ -7,7 +7,7 @@ import styled, { css } from 'styled-components' import { MouseoverTooltip } from 'components/Tooltip' import { SUPPORTED_WALLET, SUPPORTED_WALLETS } from 'constants/wallets' import { useActiveWeb3React } from 'hooks' -import { useIsAcceptedTerm, useIsDarkMode } from 'state/user/hooks' +import { useIsAcceptedTerm } from 'state/user/hooks' import { ExternalLink } from 'theme' import { isEVMWallet, isSolanaWallet } from 'utils' import checkForBraveBrowser from 'utils/checkForBraveBrowser' @@ -118,7 +118,6 @@ const Option = ({ isOverridden?: boolean onSelected?: (walletKey: SUPPORTED_WALLET) => any }) => { - const isDarkMode = useIsDarkMode() const { walletKey: walletKeyConnected, isEVM, isSolana } = useActiveWeb3React() const isBraveBrowser = checkForBraveBrowser() const [isAcceptedTerm] = useIsAcceptedTerm() @@ -126,7 +125,7 @@ const Option = ({ const wallet = SUPPORTED_WALLETS[walletKey] const isConnected = !!walletKeyConnected && walletKey === walletKeyConnected - const icon = isDarkMode ? wallet.icon : wallet.iconLight + const icon = wallet.icon const content = ( darken(0.1, theme.bg7)}; + background-color: ${({ theme }) => darken(0.1, theme.bg5)}; } ` diff --git a/src/components/Icons/ApeIcon.tsx b/src/components/Icons/ApeIcon.tsx index 9f88ef3ebf..731bb52660 100644 --- a/src/components/Icons/ApeIcon.tsx +++ b/src/components/Icons/ApeIcon.tsx @@ -9,7 +9,7 @@ export default function ApeIcon({ size }: { size?: number }) { viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" - opacity={theme.darkMode ? 1 : 0.6} + opacity={1} > { - return ( - - - - ) -} - -export default DarkModeIconActive diff --git a/src/components/Icons/DarkModeIconInactive.tsx b/src/components/Icons/DarkModeIconInactive.tsx deleted file mode 100644 index 27f7692adf..0000000000 --- a/src/components/Icons/DarkModeIconInactive.tsx +++ /dev/null @@ -1,26 +0,0 @@ -const DarkModeIconInactive = ({ width, height }: { width?: number; height?: number }) => { - return ( - - - - - - - - - - - - - - - - - - ) -} - -export default DarkModeIconInactive diff --git a/src/components/Icons/LightModeIconActive.tsx b/src/components/Icons/LightModeIconActive.tsx deleted file mode 100644 index 8082f44ca6..0000000000 --- a/src/components/Icons/LightModeIconActive.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const LightModeIconActive = ({ width, height }: { width?: number; height?: number }) => { - return ( - - - - ) -} - -export default LightModeIconActive diff --git a/src/components/Icons/LightModeIconInactive.tsx b/src/components/Icons/LightModeIconInactive.tsx deleted file mode 100644 index ed765509c9..0000000000 --- a/src/components/Icons/LightModeIconInactive.tsx +++ /dev/null @@ -1,26 +0,0 @@ -const LightModeIconInactive = ({ width, height }: { width?: number; height?: number }) => { - return ( - - - - - - - - - - - - - - - - - - ) -} - -export default LightModeIconInactive diff --git a/src/components/Icons/PolygonLogoFull.tsx b/src/components/Icons/PolygonLogoFull.tsx index 4b7e983110..b93dfafb9c 100644 --- a/src/components/Icons/PolygonLogoFull.tsx +++ b/src/components/Icons/PolygonLogoFull.tsx @@ -7,28 +7,28 @@ function Polygon() { - + { - return ( - - - - - - - - - - - - - - - - - - - - - ) -} - -export default PoweredByIconLight diff --git a/src/components/LiveChart/index.tsx b/src/components/LiveChart/index.tsx index 142fe97901..32ca912051 100644 --- a/src/components/LiveChart/index.tsx +++ b/src/components/LiveChart/index.tsx @@ -8,7 +8,6 @@ import { useTokenTopPoolsQuery } from 'services/geckoTermial' import styled from 'styled-components' import { ReactComponent as GeckoTerminalSVG } from 'assets/svg/geckoterminal.svg' -import { ReactComponent as GeckoTerminalLightSVG } from 'assets/svg/geckoterminal_light.svg' import DoubleCurrencyLogo from 'components/DoubleLogo' import ErrorBoundary from 'components/ErrorBoundary' import Loader from 'components/LocalLoader' @@ -18,7 +17,6 @@ import useBasicChartData, { LiveDataTimeframeEnum } from 'hooks/useBasicChartDat import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import { Field } from 'state/swap/actions' -import { useIsDarkMode } from 'state/user/hooks' import { useCurrencyConvertedToNative } from 'utils/dmm' import AnimatingNumber from './AnimatingNumber' @@ -114,7 +112,6 @@ function LiveChart({ enableProChart?: boolean }) { const { isSolana, networkInfo } = useActiveWeb3React() - const isDarkMode = useIsDarkMode() const theme = useTheme() const [currenciesState, setCurrenciesState] = useState(currencies) @@ -330,11 +327,7 @@ function LiveChart({ Powered by - {isDarkMode ? ( - - ) : ( - - )} +
diff --git a/src/components/LocalLoader/index.tsx b/src/components/LocalLoader/index.tsx index 02357cba41..df528ee733 100644 --- a/src/components/LocalLoader/index.tsx +++ b/src/components/LocalLoader/index.tsx @@ -1,7 +1,5 @@ import styled, { css, keyframes } from 'styled-components' -import { useIsDarkMode } from 'state/user/hooks' - const pulse = keyframes` 0% { transform: scale(1); } 60% { transform: scale(1.1); } @@ -38,11 +36,10 @@ interface LocalLoaderProps { } const LocalLoader = ({ fill }: LocalLoaderProps) => { - const iseDark = useIsDarkMode() return ( - loading-icon + loading-icon ) diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx index 6fa096af23..14690bcc74 100644 --- a/src/components/Logo/index.tsx +++ b/src/components/Logo/index.tsx @@ -7,7 +7,6 @@ import styled from 'styled-components' import { useGetNativeTokenLogo } from 'components/CurrencyLogo' import { NETWORKS_INFO } from 'constants/networks' import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo' -import { useIsDarkMode } from 'state/user/hooks' const BAD_SRCS: { [tokenAddress: string]: true } = {} @@ -41,11 +40,9 @@ export default function Logo({ srcs, alt, ...rest }: LogoProps) { } export function NetworkLogo({ chainId, style = {} }: { chainId: ChainId; style?: CSSProperties }) { - const isDarkMode = useIsDarkMode() - const { iconDark, icon } = NETWORKS_INFO[chainId] - const iconSrc = isDarkMode && iconDark ? iconDark : icon - if (!iconSrc) return null - return Switch Network + const { icon } = NETWORKS_INFO[chainId] + if (!icon) return null + return Switch Network } export function TokenLogoWithChain(data: { tokenLogo: string; chainId: ChainId; size: number | string }): JSX.Element @@ -88,9 +85,9 @@ export const TokenLogoWithShadow = styled(Logo)<{ size: string }>` width: ${({ size }) => size}; height: ${({ size }) => size}; border-radius: 100%; - box-shadow: ${({ theme }) => + box-shadow: ${() => (() => { - const color = theme.darkMode ? `rgba(256, 256, 256, 0.2)` : `rgba(0, 0, 0, 0.2)` + const color = `rgba(256, 256, 256, 0.2)` return `0 4px 5px 0 ${color}, 0 1px 70px 0 ${color};` })()}; ` diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index e20de57811..44796e4579 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -23,7 +23,6 @@ import Loader from 'components/Loader' import MenuFlyout from 'components/MenuFlyout' import Row, { AutoRow } from 'components/Row' import Toggle from 'components/Toggle' -import ThemeToggle from 'components/Toggle/ThemeToggle' import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant' import { ENV_LEVEL, TAG } from 'constants/env' import { AGGREGATOR_ANALYTICS_URL, APP_PATHS, DMM_ANALYTICS_URL, TERM_FILES_PATH } from 'constants/index' @@ -40,13 +39,7 @@ import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const' import { ApplicationModal } from 'state/application/actions' import { useModalOpen, useToggleModal } from 'state/application/hooks' import { useTutorialSwapGuide } from 'state/tutorial/hooks' -import { - useDarkModeManager, - useHolidayMode, - useIsWhiteListKyberAI, - useKyberAIWidget, - useUserLocale, -} from 'state/user/hooks' +import { useHolidayMode, useIsWhiteListKyberAI, useKyberAIWidget, useUserLocale } from 'state/user/hooks' import { ExternalLink } from 'theme' import { isChristmasTime } from 'utils' @@ -218,7 +211,6 @@ export default function Menu() { const open = useModalOpen(ApplicationModal.MENU) const toggle = useToggleModal(ApplicationModal.MENU) - const [darkMode, toggleSetDarkMode] = useDarkModeManager() const [holidayMode, toggleHolidayMode] = useHolidayMode() const [kyberAIWidgetActive, toggleKyberAIWidget] = useKyberAIWidget() const { isWhiteList } = useIsWhiteListKyberAI() @@ -574,15 +566,7 @@ export default function Menu() { )} - { - toggleSetDarkMode() - handlePreferenceClickMixpanel('Dark Mode') - }} - > - Dark Mode - - + { navigate(`${APP_PATHS.PROFILE_MANAGE}${PROFILE_MANAGE_ROUTES.PREFERENCE}`) diff --git a/src/components/Modal/Drawer.tsx b/src/components/Modal/Drawer.tsx index b375a2930c..cda8c69fa7 100644 --- a/src/components/Modal/Drawer.tsx +++ b/src/components/Modal/Drawer.tsx @@ -23,7 +23,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ zindex: string | num align-items: center; justify-content: center; - background-color: ${({ theme }) => theme.modalBG}; + background-color: ${({ theme }) => theme.bgModal}; } ` diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 23609f8146..4c68967782 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -17,7 +17,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ zindex: string | num align-items: center; justify-content: center; - background-color: ${({ theme }) => theme.modalBG}; + background-color: ${({ theme }) => theme.bgModal}; } ` diff --git a/src/components/PoolList/styled.tsx b/src/components/PoolList/styled.tsx index 8ff133c973..f53d56401a 100644 --- a/src/components/PoolList/styled.tsx +++ b/src/components/PoolList/styled.tsx @@ -21,7 +21,7 @@ export const TableRow = styled.div` ` export const DataText = styled(Flex)` - color: ${({ theme }) => theme.text7}; + color: ${({ theme }) => theme.text5}; flex-direction: column; ` diff --git a/src/components/ProAmm/CandleStickChart.tsx b/src/components/ProAmm/CandleStickChart.tsx index fa8f50d010..3bc8726ef2 100644 --- a/src/components/ProAmm/CandleStickChart.tsx +++ b/src/components/ProAmm/CandleStickChart.tsx @@ -7,7 +7,6 @@ import styled from 'styled-components' import { PoolRatesEntry } from 'data/type' import useTheme from 'hooks/useTheme' -import { useDarkModeManager } from 'state/user/hooks' import { formatDisplayNumber } from 'utils/numbers' const IconWrapper = styled.div` @@ -79,22 +78,8 @@ const CandleStickChart = ({ const chartCreated = useRef(null) const dataPrev = usePrevious(data) - const [darkMode] = useDarkModeManager() - const textColor = darkMode ? 'white' : 'black' + const textColor = 'white' const theme = useTheme() - const previousTheme = usePrevious(darkMode) - - // reset the chart if theme switches - useEffect(() => { - if (chartCreated.current && previousTheme !== darkMode) { - // remove the tooltip element - const tooltip = document.getElementById('tooltip-id') - const node = ref.current - tooltip && node?.removeChild(tooltip) - chartCreated.current.resize(0, 0) - chartCreated.current = null - } - }, [chartCreated, darkMode, previousTheme]) useEffect(() => { if (data !== dataPrev && chartCreated.current) { @@ -123,10 +108,10 @@ const CandleStickChart = ({ }, grid: { vertLines: { - color: darkMode ? '#40505A4d' : '#C2C2C233', + color: '#40505A4d', }, horzLines: { - color: darkMode ? '#40505A4d' : '#C2C2C233', + color: '#40505A4d', }, }, crosshair: { @@ -190,18 +175,7 @@ const CandleStickChart = ({ chartCreated.current = chart } - }, [ - theme.subText, - theme.text, - chartCreated, - formattedData, - width, - height, - base, - textColor, - darkMode, - onSetCurrentRate, - ]) + }, [theme.subText, theme.text, chartCreated, formattedData, width, height, base, textColor, onSetCurrentRate]) // responsiveness useEffect(() => { diff --git a/src/components/ProAmm/ProAmmPoolStat.tsx b/src/components/ProAmm/ProAmmPoolStat.tsx index ec7c265077..704ab594f5 100644 --- a/src/components/ProAmm/ProAmmPoolStat.tsx +++ b/src/components/ProAmm/ProAmmPoolStat.tsx @@ -24,7 +24,6 @@ import { useAllTokens } from 'hooks/Tokens' import usePoolTransactionsStat from 'hooks/usePoolTransactionsStat' import useTheme from 'hooks/useTheme' import { useElasticFarmsV2 } from 'state/farms/elasticv2/hooks' -import { useIsDarkMode } from 'state/user/hooks' import { ExternalLink, MEDIA_WIDTHS } from 'theme' import { ElasticPoolDetail } from 'types/pool' import { isAddressString, shortenAddress } from 'utils' @@ -111,7 +110,6 @@ export default function ProAmmPoolStat({ pool, onShared, userPositions, onClickP const poolTransactionsStat = usePoolTransactionsStat(pool.address) const upToLarge = useMedia(`(max-width: ${MEDIA_WIDTHS.upToLarge}px)`) - const isDarkMode = useIsDarkMode() const [searchParams] = useSearchParams() const activeRangeIndex = Number(searchParams.get('farmRange') || '0') @@ -273,7 +271,7 @@ export default function ProAmmPoolStat({ pool, onShared, userPositions, onClickP css` - background-color: ${theme.darkMode ? lighten(0.3, theme.buttonBlack) : darken(0.2, theme.buttonBlack)}; + background-color: ${lighten(0.3, theme.buttonBlack)}; `} } border-radius: 999px; @@ -28,7 +28,7 @@ const buttonBackgroundColor = css<{ active?: boolean }>` ${({ theme, active }) => !active ? css` - background-color: ${theme.darkMode ? lighten(0.03, theme.buttonBlack) : darken(0.1, theme.buttonBlack)}; + background-color: ${lighten(0.03, theme.buttonBlack)}; ` : ''} } @@ -96,7 +96,7 @@ const AddTabWrapper = styled.div` ${({ theme }) => css` ${AddTab} { - background-color: ${theme.darkMode ? lighten(0.5, theme.subText + '33') : darken(0.1, theme.subText + '33')}; + background-color: ${lighten(0.5, theme.subText + '33')}; } `} } @@ -112,7 +112,7 @@ const AddTab = styled.button` css` background-color: ${theme.subText}33; :hover { - background-color: ${theme.darkMode ? lighten(0.5, theme.subText + '33') : darken(0.1, theme.subText + '33')}; + background-color: ${lighten(0.5, theme.subText + '33')}; } color: ${theme.text}; box-shadow: 0 0 4px ${theme.primary}, 0 0 8px ${theme.primary}, 0 0 12px ${theme.primary}, diff --git a/src/components/SearchModal/CurrencyList.tsx b/src/components/SearchModal/CurrencyList.tsx index aaea0b1631..3ccc44b7f9 100644 --- a/src/components/SearchModal/CurrencyList.tsx +++ b/src/components/SearchModal/CurrencyList.tsx @@ -62,7 +62,7 @@ const CurrencyRowWrapper = styled(RowBetween)<{ hoverColor?: string }>` gap: 16px; cursor: pointer; &[data-selected='true'] { - background: ${({ theme }) => rgba(theme.bg8, 0.15)}; + background: ${({ theme }) => rgba(theme.bg6, 0.15)}; } @media (hover: hover) { diff --git a/src/components/Select/MultipleChainSelect/SelectButton.tsx b/src/components/Select/MultipleChainSelect/SelectButton.tsx index 3bf59f0d5c..dcaa24a5d7 100644 --- a/src/components/Select/MultipleChainSelect/SelectButton.tsx +++ b/src/components/Select/MultipleChainSelect/SelectButton.tsx @@ -41,7 +41,7 @@ const SelectButton: React.FC = ({ selectedChainIds, chainIds, activeRende if (selectedChainIds.length === 1) { const config = NETWORKS_INFO[selectedChainIds[0]] - const iconSrc = theme.darkMode && config.iconDark ? config.iconDark : config.icon + const iconSrc = config.icon return ( @@ -55,9 +55,7 @@ const SelectButton: React.FC = ({ selectedChainIds, chainIds, activeRende {selectedChainIds.slice(0, 3).map(chainId => { const config = NETWORKS_INFO[chainId] - const iconSrc = theme.darkMode && config.iconDark ? config.iconDark : config.icon - - return + return })} {selectedChainIds.length > 3 && `+${selectedChainIds.length - 3}`} diff --git a/src/components/Select/MultipleChainSelect/index.tsx b/src/components/Select/MultipleChainSelect/index.tsx index 23580e7505..6252b3179e 100644 --- a/src/components/Select/MultipleChainSelect/index.tsx +++ b/src/components/Select/MultipleChainSelect/index.tsx @@ -157,7 +157,7 @@ const MultipleChainSelect: React.FC = ({ className, st > - + diff --git a/src/components/SwapForm/AddMEVProtectionModal.tsx b/src/components/SwapForm/AddMEVProtectionModal.tsx index 7fe6b3676f..1236714723 100644 --- a/src/components/SwapForm/AddMEVProtectionModal.tsx +++ b/src/components/SwapForm/AddMEVProtectionModal.tsx @@ -59,7 +59,7 @@ const RPCOption = styled(ButtonEmpty)<{ selected: boolean }>` ${({ theme, selected }) => selected && css` - background-color: ${theme.darkMode ? theme.buttonBlack : theme.buttonGray}; + background-color: ${theme.buttonBlack}; & > div { color: ${theme.text}; } diff --git a/src/components/SwapForm/SwapModal/SwapDetails/index.tsx b/src/components/SwapForm/SwapModal/SwapDetails/index.tsx index 6128a6224e..10c4ed30f1 100644 --- a/src/components/SwapForm/SwapModal/SwapDetails/index.tsx +++ b/src/components/SwapForm/SwapModal/SwapDetails/index.tsx @@ -22,7 +22,6 @@ import { CHAINS_SUPPORT_FEE_CONFIGS } from 'constants/index' import { useActiveWeb3React } from 'hooks' import { isSupportKyberDao, useGasRefundTier } from 'hooks/kyberdao' import useTheme from 'hooks/useTheme' -import { useIsDarkMode } from 'state/user/hooks' import { ExternalLink, TYPE } from 'theme' import { DetailedRouteSummary } from 'types/route' import { formattedNum, shortenAddress } from 'utils' @@ -76,7 +75,6 @@ export default function SwapDetails({ const { isEVM, chainId, networkInfo, account } = useActiveWeb3React() const [showInverted, setShowInverted] = useState(false) const theme = useTheme() - const isDarkMode = useIsDarkMode() const { slippage, routeSummary } = useSwapFormContext() const { gasRefundPercentage } = useGasRefundTier() @@ -371,12 +369,7 @@ export default function SwapDetails({ - network icon + network icon {networkInfo.name} diff --git a/src/components/Toggle/ThemeToggle.tsx b/src/components/Toggle/ThemeToggle.tsx deleted file mode 100644 index 6d2a0a54c2..0000000000 --- a/src/components/Toggle/ThemeToggle.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import styled from 'styled-components' - -import DarkModeIconActive from 'components/Icons/DarkModeIconActive' -import DarkModeIconInactive from 'components/Icons/DarkModeIconInactive' -import LightModeIconActive from 'components/Icons/LightModeIconActive' -import LightModeIconInactive from 'components/Icons/LightModeIconInactive' - -const ToggleElement = styled.span<{ isDarkMode?: boolean }>` - border-radius: 50%; - background-color: ${({ theme, isDarkMode }) => (isDarkMode ? theme.primary : 'none')}; - font-size: 1rem; - font-weight: 400; - flex: 1; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -` - -const StyledToggle = styled.button` - border-radius: 999px; - border: none; - background: ${({ theme }) => theme.tabBackground}; - display: flex; - width: fit-content; - cursor: pointer; - outline: none; - padding: 0; - opacity: 1; - width: 56px; - height: 28px; - transition: opacity 0.25s ease; - - :hover { - opacity: 0.9; - } -` - -interface ThemeToggleProps { - id?: string - isDarkMode: boolean - toggle: () => void -} - -export default function ThemeToggle({ id, isDarkMode, toggle }: ThemeToggleProps) { - return ( - - - {isDarkMode ? : } - - - {isDarkMode ? : } - - - ) -} diff --git a/src/components/TradeRouting/styled.tsx b/src/components/TradeRouting/styled.tsx index a4470514aa..fbabe94886 100644 --- a/src/components/TradeRouting/styled.tsx +++ b/src/components/TradeRouting/styled.tsx @@ -210,7 +210,7 @@ export const StyledHop = styled.div` cursor: pointer; :hover { - filter: ${({ theme }) => (theme.darkMode ? 'brightness(130%)' : 'brightness(97%)')}; + filter: brightness(130%); } ` export const StyledExchange = styled.a` @@ -227,7 +227,7 @@ export const StyledExchange = styled.a` text-decoration: none; &:hover { - color: ${({ theme }) => (theme.darkMode ? theme.white : theme.black)}; + color: ${({ theme }) => theme.white}; } & > .img--sm { diff --git a/src/components/TradingViewChart/index.tsx b/src/components/TradingViewChart/index.tsx index a8aa8a5733..23baa8be8d 100644 --- a/src/components/TradingViewChart/index.tsx +++ b/src/components/TradingViewChart/index.tsx @@ -136,7 +136,7 @@ function ProLiveChart({ fullscreen: false, autosize: true, studies_overrides: {}, - theme: theme.darkMode ? 'Dark' : 'Light', + theme: 'Dark', custom_css_url: '/charting_library/style.css', timeframe: '2w', time_frames: [ @@ -157,7 +157,7 @@ function ProLiveChart({ setLoading(false) tvWidget.applyOverrides({ 'paneProperties.backgroundType': 'solid', - 'paneProperties.background': theme.darkMode ? theme.buttonBlack : theme.background, + 'paneProperties.background': theme.buttonBlack, 'mainSeriesProperties.candleStyle.upColor': theme.primary, 'mainSeriesProperties.candleStyle.borderUpColor': theme.primary, 'mainSeriesProperties.candleStyle.wickUpColor': theme.primary, diff --git a/src/components/TransactionConfirmationModal/index.tsx b/src/components/TransactionConfirmationModal/index.tsx index e5dc315c60..ff03ecc600 100644 --- a/src/components/TransactionConfirmationModal/index.tsx +++ b/src/components/TransactionConfirmationModal/index.tsx @@ -17,7 +17,6 @@ import HurryUpBanner from 'components/swapv2/HurryUpBanner' import { SUPPORTED_WALLETS } from 'constants/wallets' import { useActiveWeb3React } from 'hooks' import useTheme from 'hooks/useTheme' -import { useIsDarkMode } from 'state/user/hooks' import { VIEW_MODE } from 'state/user/reducer' import { ExternalLink } from 'theme' import { CloseIcon } from 'theme/components' @@ -90,7 +89,6 @@ export function ConfirmationPendingContent({ } function AddTokenToInjectedWallet({ token, chainId }: { token: Token; chainId: ChainId }) { - const isDarkMode = useIsDarkMode() const { walletKey, isEVM } = useActiveWeb3React() const handleClick = async () => { const tokenAddress = token.address @@ -131,7 +129,7 @@ function AddTokenToInjectedWallet({ token, chainId }: { token: Token; chainId: C Add {token.symbol} to {walletConfig.name} {' '} - + ) diff --git a/src/components/Tutorial/TutorialSwap/index.tsx b/src/components/Tutorial/TutorialSwap/index.tsx index 3030606536..1826dbe3e0 100644 --- a/src/components/Tutorial/TutorialSwap/index.tsx +++ b/src/components/Tutorial/TutorialSwap/index.tsx @@ -22,7 +22,6 @@ import { connections } from 'constants/wallets' import { useActiveWeb3React } from 'hooks' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import { useTutorialSwapGuide } from 'state/tutorial/hooks' -import { useIsDarkMode } from 'state/user/hooks' import { ExternalLink } from 'theme' import { filterTruthy } from 'utils' @@ -149,7 +148,6 @@ function Welcome() { function ConnectWallet() { const [isExpanded, setIsExpanded] = useState(false) const toggleExpand = () => setIsExpanded(!isExpanded) - const isDarkMode = useIsDarkMode() return ( @@ -169,11 +167,7 @@ function ConnectWallet() { .filter(e => e.installLink) .map(item => ( window.open(item.installLink)}> - {item.name} + {item.name} {item.name} ))} diff --git a/src/components/WalletPopup/AccountInfo/CardBackground.tsx b/src/components/WalletPopup/AccountInfo/CardBackground.tsx index f9bdc5b70b..65a5cb56fa 100644 --- a/src/components/WalletPopup/AccountInfo/CardBackground.tsx +++ b/src/components/WalletPopup/AccountInfo/CardBackground.tsx @@ -18,15 +18,6 @@ const BackgroundWrapper = styled.div` mix-blend-mode: overlay; border-radius: 20px; overflow: hidden; - - ${({ theme }) => - !theme.darkMode - ? css` - opacity: 0.8; - filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15)); - mix-blend-mode: multiply; - ` - : ''} ` const Layer1 = styled.div` @@ -34,14 +25,6 @@ const Layer1 = styled.div` background: linear-gradient(143.08deg, #31CB9E 41.26%, rgba(0, 0, 0, 0) 112.51%); opacity: 0.8; - - ${({ theme }) => - !theme.darkMode - ? css` - background: linear-gradient(120.55deg, #98e5ce 19.11%, rgba(255, 255, 255, 0.88) 104.63%); - opacity: 0.6; - ` - : ''} ` const Layer2 = styled.div` @@ -57,13 +40,6 @@ const LogoWrapper = styled.div` right: 16px; top: 50%; transform: translateY(-50%); - - ${({ theme }) => - !theme.darkMode - ? css` - opacity: 0.25; - ` - : ''} ` type Props = { noLogo: boolean diff --git a/src/components/WalletPopup/WalletView.tsx b/src/components/WalletPopup/WalletView.tsx index 9a7b32821c..1d55960009 100644 --- a/src/components/WalletPopup/WalletView.tsx +++ b/src/components/WalletPopup/WalletView.tsx @@ -21,7 +21,6 @@ import { useActiveWeb3React } from 'hooks' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import useDisconnectWallet from 'hooks/web3/useDisconnectWallet' -import { useIsDarkMode } from 'state/user/hooks' import { useTokensHasBalance } from 'state/wallet/hooks' import { ExternalLinkIcon } from 'theme' import { getEtherscanLink, shortenAddress } from 'utils' @@ -131,7 +130,6 @@ export default function WalletView({ const nodeRef = useRef(null) const [isMinimal, setMinimal] = useState(false) const { chainId, account = '', walletKey } = useActiveWeb3React() - const isDarkMode = useIsDarkMode() const disconnectWallet = useDisconnectWallet() const { @@ -329,7 +327,7 @@ export default function WalletView({ {SUPPORTED_WALLETS[walletKey].name diff --git a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx index c0cbe01509..5973c18fe7 100644 --- a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx +++ b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx @@ -11,7 +11,6 @@ import { ReactComponent as TreadingSecurity } from 'assets/svg/security_trading. import { CollapseItem } from 'components/Collapse' import { getSecurityTokenInfo } from 'components/swapv2/TokenInfo/utils' import useTheme from 'hooks/useTheme' -import { useIsDarkMode } from 'state/user/hooks' import { Container } from '../index' import Content from './Content' @@ -19,13 +18,12 @@ import Header from './Header' export default function SecurityInfo({ token }: { token: Token | undefined }) { const theme = useTheme() - const isDarkMode = useIsDarkMode() const style: CSSProperties = { - background: isDarkMode ? rgba(theme.black, 0.2) : rgba(theme.subText, 0.04), + background: rgba(theme.black, 0.2), borderRadius: '16px', padding: '0', } - const headerStyle: CSSProperties = { background: isDarkMode ? rgba(theme.black, 0.48) : rgba(theme.subText, 0.08) } + const headerStyle: CSSProperties = { background: rgba(theme.black, 0.48) } const arrowStyle: CSSProperties = { marginRight: '6px', color: theme.subText } const { data, isLoading, error } = useGetSecurityTokenInfoQuery( { chainId: token?.chainId as ChainId, address: token?.address ?? '' }, diff --git a/src/constants/connectors/evm.ts b/src/constants/connectors/evm.ts index a1999ad4cc..ab117f50de 100644 --- a/src/constants/connectors/evm.ts +++ b/src/constants/connectors/evm.ts @@ -35,7 +35,6 @@ export const [blocto, bloctoHooks] = initializeConnector( ) export const [bloctoInject, bloctoInjectHooks] = initializeConnector(actions => new MetaMask({ actions })) -const darkmode = Boolean(window.matchMedia('(prefers-color-scheme: dark)')) const walletconnectConfig = { options: { projectId: WALLETCONNECT_PROJECT_ID, @@ -52,7 +51,7 @@ const walletconnectConfig = { }, {} as { [key in ChainId]: string }), qrModalOptions: { chainImages: undefined, - themeMode: darkmode ? ('dark' as const) : ('light' as const), + themeMode: 'dark' as const, themeVariables: { '--w3m-z-index': '1000', '--w3m-logo-image-url': Kyber, diff --git a/src/constants/networks/arbitrum.ts b/src/constants/networks/arbitrum.ts index 70f9a6d3e7..c8b8c84025 100644 --- a/src/constants/networks/arbitrum.ts +++ b/src/constants/networks/arbitrum.ts @@ -16,9 +16,8 @@ const arbitrumInfo: EVMNetworkInfo = { aggregatorRoute: 'arbitrum', name: 'Arbitrum', icon: arbitrumIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/kybernetwork/arbitrum-blocks', etherscanUrl: 'https://arbiscan.io', etherscanName: 'Arbiscan', diff --git a/src/constants/networks/aurora.ts b/src/constants/networks/aurora.ts index 2610a22092..e3d0d583cb 100644 --- a/src/constants/networks/aurora.ts +++ b/src/constants/networks/aurora.ts @@ -17,9 +17,8 @@ const auroraInfo: EVMNetworkInfo = { aggregatorRoute: 'aurora', name: 'Aurora', icon: auroraIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://aurora-graph.kyberengineering.io/subgraphs/name/kybernetwork/aurora-blocks', etherscanUrl: 'https://aurorascan.dev', etherscanName: 'Aurora Explorer', diff --git a/src/constants/networks/avax-testnet.ts b/src/constants/networks/avax-testnet.ts index ed78e9ba48..142b43150d 100644 --- a/src/constants/networks/avax-testnet.ts +++ b/src/constants/networks/avax-testnet.ts @@ -15,9 +15,9 @@ const avaxTestnetInfo: EVMNetworkInfo = { poolFarmRoute: EMPTY, name: 'Avalanche Testnet', icon: 'https://storage.googleapis.com/ks-setting-a3aa20b7/31645e2e-9c40-4fdf-9ddf-50d24e5399e4.svg', - iconDark: NOT_SUPPORT, + iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/ducquangkstn/ethereum-block-fuji', etherscanUrl: 'https://testnet.snowtrace.io', etherscanName: 'Snowtrace', diff --git a/src/constants/networks/avax.ts b/src/constants/networks/avax.ts index 0c96cda514..08b9ae26f3 100644 --- a/src/constants/networks/avax.ts +++ b/src/constants/networks/avax.ts @@ -14,9 +14,8 @@ const avaxInfo: EVMNetworkInfo = { aggregatorRoute: 'avalanche', name: 'Avalanche', icon: avalancheIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/ducquangkstn/avalache-blocks', etherscanUrl: 'https://snowtrace.io', etherscanName: 'Snowtrace', diff --git a/src/constants/networks/base.ts b/src/constants/networks/base.ts index cb19d25c0f..22ec8a9ce4 100644 --- a/src/constants/networks/base.ts +++ b/src/constants/networks/base.ts @@ -16,9 +16,9 @@ const base: EVMNetworkInfo = { aggregatorRoute: 'base', name: 'Base', icon: 'https://raw.githubusercontent.com/base-org/brand-kit/001c0e9b40a67799ebe0418671ac4e02a0c683ce/logo/in-product/Base_Network_Logo.svg', - iconDark: NOT_SUPPORT, + iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://base-graph.kyberengineering.io/subgraphs/name/kybernetwork/base-blocks', etherscanUrl: 'https://basescan.org', etherscanName: 'Base Explorer', diff --git a/src/constants/networks/bnb-testnet.ts b/src/constants/networks/bnb-testnet.ts index 95e9861b72..4218e3fe93 100644 --- a/src/constants/networks/bnb-testnet.ts +++ b/src/constants/networks/bnb-testnet.ts @@ -16,9 +16,9 @@ const bnbTestnetInfo: EVMNetworkInfo = { aggregatorRoute: 'bsc', name: 'BNB Testnet', icon: 'https://storage.googleapis.com/ks-setting-a3aa20b7/a44a3dbc-9150-4278-8354-7b5953f9a1ab.svg', - iconDark: NOT_SUPPORT, + iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/ducquangkstn/ethereum-blocks-bsctestnet', etherscanUrl: 'https://testnet.bscscan.com', etherscanName: 'BscScan', diff --git a/src/constants/networks/bnb.ts b/src/constants/networks/bnb.ts index 3a0cc2bbe8..e8d4791840 100644 --- a/src/constants/networks/bnb.ts +++ b/src/constants/networks/bnb.ts @@ -15,9 +15,8 @@ const bnbInfo: EVMNetworkInfo = { aggregatorRoute: 'bsc', name: 'BNB Chain', icon: bnbIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/dynamic-amm/ethereum-blocks-bsc', etherscanUrl: 'https://bscscan.com', etherscanName: 'BscScan', diff --git a/src/constants/networks/bttc.ts b/src/constants/networks/bttc.ts index 09e73420c4..26b2c742db 100644 --- a/src/constants/networks/bttc.ts +++ b/src/constants/networks/bttc.ts @@ -15,9 +15,9 @@ const bttcInfo: EVMNetworkInfo = { aggregatorRoute: 'bttc', name: 'BitTorrent', icon: 'https://storage.googleapis.com/ks-setting-a3aa20b7/4877aa34-b675-4fb3-8de2-15ab8a8f6a53.svg', - iconDark: NOT_SUPPORT, + iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://bttc-graph.kyberengineering.io/subgraphs/name/kybernetwork/bttc-blocks', etherscanUrl: 'https://bttcscan.com', etherscanName: 'Bttcscan', diff --git a/src/constants/networks/cronos.ts b/src/constants/networks/cronos.ts index c9d857913e..9cb909d3ae 100644 --- a/src/constants/networks/cronos.ts +++ b/src/constants/networks/cronos.ts @@ -1,6 +1,5 @@ import { ChainId } from '@kyberswap/ks-sdk-core' -import cronosDarkIcon from 'assets/networks/cronos-dark.svg' import cronosIcon from 'assets/networks/cronos.svg' import CronosLogo from 'assets/svg/cronos-token-logo.svg' import { EVMNetworkInfo } from 'constants/networks/type' @@ -17,8 +16,6 @@ const cronosInfo: EVMNetworkInfo = { aggregatorRoute: 'cronos', name: 'Cronos', icon: cronosIcon, - iconDark: cronosDarkIcon, - iconDarkSelected: cronosIcon, iconSelected: cronosIcon, defaultBlockSubgraph: 'https://cronos-graph.kyberengineering.io/subgraphs/name/kybernetwork/cronos-blocks', etherscanUrl: 'https://cronoscan.com', diff --git a/src/constants/networks/ethereum.ts b/src/constants/networks/ethereum.ts index 13f7046201..68d3e081c6 100644 --- a/src/constants/networks/ethereum.ts +++ b/src/constants/networks/ethereum.ts @@ -18,9 +18,8 @@ const ethereumInfo: EVMNetworkInfo = { aggregatorRoute: 'ethereum', name: 'Ethereum', icon: ethereumIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/dynamic-amm/ethereum-blocks-ethereum', etherscanUrl: 'https://etherscan.io', etherscanName: 'Etherscan', diff --git a/src/constants/networks/fantom.ts b/src/constants/networks/fantom.ts index 648bd8ca48..68ecc47ed8 100644 --- a/src/constants/networks/fantom.ts +++ b/src/constants/networks/fantom.ts @@ -16,9 +16,8 @@ const fantomInfo: EVMNetworkInfo = { aggregatorRoute: 'fantom', name: 'Fantom', icon: fantomIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/kybernetwork/fantom-blocks', etherscanUrl: 'https://ftmscan.com', etherscanName: 'Ftmscan', diff --git "a/src/constants/networks/g\303\266rli.ts" "b/src/constants/networks/g\303\266rli.ts" index 11d0f893b5..9c22ecccf0 100644 --- "a/src/constants/networks/g\303\266rli.ts" +++ "b/src/constants/networks/g\303\266rli.ts" @@ -18,9 +18,8 @@ const görliInfo: EVMNetworkInfo = { aggregatorRoute: EMPTY, name: 'Görli', icon: ethereumIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/dramacrypto/goerli-blocks', etherscanUrl: 'https://goerli.etherscan.io', etherscanName: 'Goerli Explorer', diff --git a/src/constants/networks/linea.ts b/src/constants/networks/linea.ts index a4a3f17832..6dfbf69713 100644 --- a/src/constants/networks/linea.ts +++ b/src/constants/networks/linea.ts @@ -16,9 +16,9 @@ const lineaInfo: EVMNetworkInfo = { aggregatorRoute: 'linea', name: 'Linea', icon: 'https://storage.googleapis.com/ks-setting-1d682dca/12a257d3-65e3-4b16-8a84-03a4ca34a6bc1693378197244.svg', - iconDark: NOT_SUPPORT, + iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://graph-query.linea.build/subgraphs/name/kybernetwork/linea-blocks', etherscanUrl: 'https://lineascan.build', etherscanName: 'Linea Explorer', diff --git a/src/constants/networks/matic.ts b/src/constants/networks/matic.ts index 56b893f45e..04d1a80533 100644 --- a/src/constants/networks/matic.ts +++ b/src/constants/networks/matic.ts @@ -14,9 +14,8 @@ const maticInfo: EVMNetworkInfo = { aggregatorRoute: 'polygon', name: 'Polygon PoS', icon: polygonIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/dynamic-amm/ethereum-blocks-polygon', etherscanUrl: 'https://polygonscan.com', etherscanName: 'Polygonscan', diff --git a/src/constants/networks/mumbai.ts b/src/constants/networks/mumbai.ts index 23d02f27a3..15ab4004e1 100644 --- a/src/constants/networks/mumbai.ts +++ b/src/constants/networks/mumbai.ts @@ -15,9 +15,9 @@ const mumbaiInfo: EVMNetworkInfo = { aggregatorRoute: 'mumbai', name: 'Mumbai', icon: 'https://storage.googleapis.com/ks-setting-a3aa20b7/78dfb4fb-089b-431d-8725-b5de2cea0bfc.svg', - iconDark: NOT_SUPPORT, + iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/piavgh/mumbai-blocks', etherscanUrl: 'https://mumbai.polygonscan.com/', etherscanName: 'Polygonscan', diff --git a/src/constants/networks/optimism.ts b/src/constants/networks/optimism.ts index 0ac6f7633d..8985db510e 100644 --- a/src/constants/networks/optimism.ts +++ b/src/constants/networks/optimism.ts @@ -16,9 +16,8 @@ const optimismInfo: EVMNetworkInfo = { aggregatorRoute: 'optimism', name: 'Optimism', icon: optimismIcon, - iconDark: NOT_SUPPORT, iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/ianlapham/uni-testing-subgraph', etherscanUrl: 'https://optimistic.etherscan.io', etherscanName: 'Optimistic Ethereum Explorer', diff --git a/src/constants/networks/solana-devnet.ts b/src/constants/networks/solana-devnet.ts index 002f0dae8c..402ba6f784 100644 --- a/src/constants/networks/solana-devnet.ts +++ b/src/constants/networks/solana-devnet.ts @@ -17,8 +17,6 @@ const solanaInfo: SolanaNetworkInfo = { name: 'Solana Devnet', icon: solanaIcon, iconSelected: solanaIcon, - iconDark: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, etherscanUrl: 'https://solscan.io', etherscanName: 'Solana scan', bridgeURL: 'https://www.portalbridge.com/#/transfer', diff --git a/src/constants/networks/solana.ts b/src/constants/networks/solana.ts index 6a1b4db4d1..713e4575aa 100644 --- a/src/constants/networks/solana.ts +++ b/src/constants/networks/solana.ts @@ -17,8 +17,6 @@ const solanaInfo: SolanaNetworkInfo = { name: 'Solana', icon: solanaIcon, iconSelected: solanaIcon, - iconDark: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, etherscanUrl: 'https://solscan.io', etherscanName: 'Solana scan', bridgeURL: 'https://www.portalbridge.com/#/transfer', diff --git a/src/constants/networks/type.ts b/src/constants/networks/type.ts index c84e98cbb9..1a5344c250 100644 --- a/src/constants/networks/type.ts +++ b/src/constants/networks/type.ts @@ -14,9 +14,7 @@ export interface NetworkInfo { readonly aggregatorRoute: string readonly name: string readonly icon: string - readonly iconDark: string | null readonly iconSelected: string | null - readonly iconDarkSelected: string | null readonly etherscanUrl: string readonly etherscanName: string readonly bridgeURL: string diff --git a/src/constants/networks/zkevm.ts b/src/constants/networks/zkevm.ts index 5b34a6d314..1d8f878e97 100644 --- a/src/constants/networks/zkevm.ts +++ b/src/constants/networks/zkevm.ts @@ -16,9 +16,9 @@ const zkEvm: EVMNetworkInfo = { aggregatorRoute: 'polygon-zkevm', name: 'Polygon zkEVM', icon: 'https://storage.googleapis.com/ks-setting-a3aa20b7/41cb81da-c7ed-4bc1-99ef-4bfe6d80861e1692928936919.svg', - iconDark: NOT_SUPPORT, + iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://polygon-zkevm-graph.kyberengineering.io/subgraphs/name/kybernetwork/polygon-zkevm-blocks', etherscanUrl: 'https://zkevm.polygonscan.com', diff --git a/src/constants/networks/zksync.ts b/src/constants/networks/zksync.ts index 188b1e9330..3402973555 100644 --- a/src/constants/networks/zksync.ts +++ b/src/constants/networks/zksync.ts @@ -17,9 +17,9 @@ const zkSyncInfo: EVMNetworkInfo = { aggregatorRoute: 'zksync', name: 'zkSync Era', icon: 'https://storage.googleapis.com/ks-setting-1d682dca/bd11850b-6aef-48c6-a27d-f8ee833e0dbc1693378187666.svg', - iconDark: NOT_SUPPORT, + iconSelected: NOT_SUPPORT, - iconDarkSelected: NOT_SUPPORT, + defaultBlockSubgraph: 'https://zksync-graph.kyberengineering.io/subgraphs/name/kybernetwork/zksync-blocks', etherscanUrl: 'https://explorer.zksync.io', etherscanName: 'zkSync Era Explorer', diff --git a/src/constants/wallets.ts b/src/constants/wallets.ts index 1fd2333a3a..fef37e320c 100644 --- a/src/constants/wallets.ts +++ b/src/constants/wallets.ts @@ -18,7 +18,6 @@ import SOLFLARE from 'assets/wallets-connect/solflare.svg' import TRUSTWALLET from 'assets/wallets-connect/trust-wallet.svg' import WALLETCONNECT from 'assets/wallets-connect/wallet-connect.svg' import INJECTED_DARK_ICON from 'assets/wallets/browser-wallet-dark.svg' -import INJECTED_LIGHT_ICON from 'assets/wallets/browser-wallet-light.svg' import { blocto, bloctoHooks, @@ -151,7 +150,6 @@ const detectPhantomWallet = (): WalletReadyState => { export interface WalletInfo { name: string icon: string - iconLight: string installLink?: string href?: string } @@ -173,7 +171,6 @@ export const SUPPORTED_WALLETS = { hooks: injectedHooks, name: 'Browser Wallet', icon: INJECTED_DARK_ICON, - iconLight: INJECTED_LIGHT_ICON, readyState: detectGenericInjected, } as EVMWalletInfo, METAMASK: { @@ -181,7 +178,6 @@ export const SUPPORTED_WALLETS = { hooks: metamaskHooks, name: 'MetaMask', icon: METAMASK, - iconLight: METAMASK, installLink: 'https://metamask.io/download', readyState: detectMetamaskInjected, } as EVMWalletInfo, @@ -190,7 +186,6 @@ export const SUPPORTED_WALLETS = { hooks: krystalHooks, name: 'Krystal', icon: KRYSTAL, - iconLight: KRYSTAL, installLink: 'https://wallet.krystal.app', readyState: detectKrystalInjected, } as EVMWalletInfo, @@ -199,7 +194,6 @@ export const SUPPORTED_WALLETS = { hooks: rabbyHooks, name: 'Rabby', icon: RABBY, - iconLight: RABBY, installLink: 'https://rabby.io', readyState: detectRabbyInjected, } as EVMWalletInfo, @@ -208,7 +202,6 @@ export const SUPPORTED_WALLETS = { hooks: trustHooks, name: 'Trust Wallet', icon: TRUSTWALLET, - iconLight: TRUSTWALLET, installLink: 'https://trustwallet.com/vi/deeplink', readyState: detectTrustWalletInjected, } as EVMWalletInfo, @@ -218,7 +211,6 @@ export const SUPPORTED_WALLETS = { adapter: braveAdapter, name: 'Brave Wallet', icon: BRAVE, - iconLight: BRAVE, installLink: 'https://brave.com/download', readyState: detectBraveInjected, // If Phantom extension installed block Brave wallet @@ -229,7 +221,6 @@ export const SUPPORTED_WALLETS = { hooks: gnosisSafeHooks, name: 'Safe', icon: SAFE, - iconLight: SAFE, installLink: 'https://safe.global/wallet', readyState: detectSafe, } as EVMWalletInfo, @@ -239,7 +230,6 @@ export const SUPPORTED_WALLETS = { adapter: coinbaseAdapter, name: 'Coinbase', icon: COINBASE, - iconLight: COINBASE, installLink: 'https://www.coinbase.com/wallet', readyState: detectCoinbaseInjected, readyStateSolana: () => (isMobile ? WalletReadyState.Unsupported : coinbaseAdapter.readyState), @@ -250,7 +240,6 @@ export const SUPPORTED_WALLETS = { adapter: coin98Adapter, name: 'Coin98', icon: COIN98, - iconLight: COIN98, installLink: 'https://wallet.coin98.com/', readyState: detectCoin98Injected, readyStateSolana: () => coin98Adapter.readyState, @@ -260,7 +249,6 @@ export const SUPPORTED_WALLETS = { hooks: bloctoInjectHooks, name: 'Blocto', icon: BLOCTO, - iconLight: BLOCTO, readyState: detectBloctoInjected, } as EVMWalletInfo, KRYSTAL_WC: { @@ -268,7 +256,6 @@ export const SUPPORTED_WALLETS = { hooks: krystalWalletConnectV2Hooks, name: 'Krystal', icon: KRYSTAL, - iconLight: KRYSTAL, installLink: 'https://wallet.krystal.app', readyState: detectKrystalWC, } as EVMWalletInfo, @@ -277,7 +264,6 @@ export const SUPPORTED_WALLETS = { hooks: walletConnectV2Hooks, name: 'WalletConnect', icon: WALLETCONNECT, - iconLight: WALLETCONNECT, readyState: () => WalletReadyState.Installed, } as EVMWalletInfo, BLOCTO: { @@ -285,7 +271,6 @@ export const SUPPORTED_WALLETS = { hooks: bloctoHooks, name: 'Blocto', icon: BLOCTO, - iconLight: BLOCTO, installLink: 'https://www.blocto.io/download', readyState: detectBlocto, } as EVMWalletInfo, @@ -293,7 +278,6 @@ export const SUPPORTED_WALLETS = { adapter: solflareAdapter, name: 'Solflare', icon: SOLFLARE, - iconLight: SOLFLARE, installLink: solflareAdapter.url, readyStateSolana: () => solflareAdapter.readyState, } as SolanaWalletInfo, @@ -301,7 +285,6 @@ export const SUPPORTED_WALLETS = { adapter: phantomAdapter, name: 'Phantom', icon: PHANTOM, - iconLight: PHANTOM, installLink: phantomAdapter.url, readyStateSolana: detectPhantomWallet, } as SolanaWalletInfo, @@ -309,7 +292,6 @@ export const SUPPORTED_WALLETS = { adapter: slopeAdapter, name: 'Slope Wallet', icon: SLOPE, - iconLight: SLOPE, installLink: slopeAdapter.url, readyStateSolana: () => (isMobile ? WalletReadyState.Unsupported : slopeAdapter.readyState), } as SolanaWalletInfo, diff --git a/src/pages/About/AboutKNC.tsx b/src/pages/About/AboutKNC.tsx index ab3662a5bb..f646c19d8e 100644 --- a/src/pages/About/AboutKNC.tsx +++ b/src/pages/About/AboutKNC.tsx @@ -7,13 +7,9 @@ import { Pagination } from 'swiper' import { Swiper, SwiperSlide } from 'swiper/react' import GeckoterminalIcon from 'assets/images/geckoterminal_dark.png' -import GeckoterminalIconLight from 'assets/images/geckoterminal_light.png' import KNCGraphic from 'assets/images/knc-graphic.png' import CoinGecko from 'assets/svg/coingecko_color.svg' -import CoinGeckoLight from 'assets/svg/coingecko_color_light.svg' import CoinMarketCap from 'assets/svg/coinmarketcap.svg' -import CoinMarketCapLight from 'assets/svg/coinmarketcap_light.svg' -import KyberDaoLight from 'assets/svg/kyber-dao-light.svg' import KyberDao from 'assets/svg/kyber-dao.svg' import RocketIcon from 'assets/svg/rocket.svg' import TrophyIcon from 'assets/svg/trophy.svg' @@ -67,7 +63,6 @@ import { APP_PATHS } from 'constants/index' import { useActiveWeb3React } from 'hooks/index' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' -import { useDarkModeManager } from 'state/user/hooks' import { ExternalLink, StyledInternalLink } from 'theme' import { @@ -121,7 +116,6 @@ const LIST_WALLETS = [ function AboutKNC() { const { networkInfo } = useActiveWeb3React() const theme = useTheme() - const [isDarkMode] = useDarkModeManager() const above768 = useMedia('(min-width: 768px)') const above500 = useMedia('(min-width: 500px)') @@ -209,7 +203,7 @@ function AboutKNC() {
- KyberDao + KyberDao KYBER DAO @@ -410,12 +399,7 @@ function AboutKNC() { {above768 ? ( {LIST_WALLETS.map(wallet => ( - {wallet.logo} + {wallet.logo} ))} ) : ( @@ -432,12 +416,7 @@ function AboutKNC() { {LIST_WALLETS.map(wallet => ( - {wallet.logo} + {wallet.logo} ))} @@ -459,17 +438,13 @@ function AboutKNC() { style={{ gap: '48px', alignItems: 'center' }} > - CoinGecko + CoinGecko - CoinMarketCap + CoinMarketCap - Geckoterminal + Geckoterminal @@ -477,7 +452,7 @@ function AboutKNC() { -