diff --git a/.env.adpr b/.env.adpr index 122dd2343d..66271cd8e5 100644 --- a/.env.adpr +++ b/.env.adpr @@ -5,7 +5,6 @@ VITE_SENTRY_DNS=https://d94ee2d3c22043bdaec966758680b5a8@sentry.ops.kyberenginee VITE_SERVICE_WORKER=true -VITE_TRUESIGHT_API=https://truesight.dev.kyberengineering.io VITE_MIXPANEL_PROJECT_TOKEN=fca28a30cb98d872c2079f214955cd5e VITE_REWARD_SERVICE_API=https://reward.dev.kyberengineering.io/api/v1 diff --git a/.env.dev b/.env.dev index 09aa8543cc..ef5cd18711 100644 --- a/.env.dev +++ b/.env.dev @@ -5,7 +5,6 @@ VITE_SENTRY_DNS=https://d94ee2d3c22043bdaec966758680b5a8@sentry.ops.kyberenginee VITE_SERVICE_WORKER=true -VITE_TRUESIGHT_API=https://truesight.dev.kyberengineering.io VITE_MIXPANEL_PROJECT_TOKEN=fca28a30cb98d872c2079f214955cd5e VITE_REWARD_SERVICE_API=https://reward.dev.kyberengineering.io/api/v1 diff --git a/.env.production b/.env.production index 5fbf43ad4d..4e3adbff35 100644 --- a/.env.production +++ b/.env.production @@ -5,7 +5,6 @@ VITE_SENTRY_DNS=https://d94ee2d3c22043bdaec966758680b5a8@sentry.ops.kyberenginee VITE_SERVICE_WORKER=false -VITE_TRUESIGHT_API=https://truesight.kyberswap.com VITE_MIXPANEL_PROJECT_TOKEN=ff1eea26c19dcf4a7c35ebbc8631e714 VITE_REWARD_SERVICE_API=https://rewards.kyberswap.com/api/v1 diff --git a/.env.stg b/.env.stg index 6f29ba7576..1ef74f455f 100644 --- a/.env.stg +++ b/.env.stg @@ -4,7 +4,6 @@ VITE_AGGREGATOR_STATS_API=https://aggregator-stats.kyberswap.com VITE_SENTRY_DNS=https://d94ee2d3c22043bdaec966758680b5a8@sentry.ops.kyberengineering.io/4 VITE_SERVICE_WORKER=false -VITE_TRUESIGHT_API=https://truesight.stg.kyberengineering.io VITE_MIXPANEL_PROJECT_TOKEN=ff1eea26c19dcf4a7c35ebbc8631e714 VITE_REWARD_SERVICE_API=https://reward.stg.kyberengineering.io/api/v1 diff --git a/src/components/ApproveMessage/index.tsx b/src/components/ApproveMessage/index.tsx index 0dbc1c2b4e..7ab65dc039 100644 --- a/src/components/ApproveMessage/index.tsx +++ b/src/components/ApproveMessage/index.tsx @@ -5,12 +5,12 @@ import { ChevronDown, ChevronUp } from 'react-feather' import { useToggle } from 'react-use' import styled from 'styled-components' +import { TruncatedText } from 'components' import Card from 'components/Card' import LightBulbEffect from 'components/Icons/LightBulbEffect' import { RowBetween } from 'components/Row' import { useActiveWeb3React } from 'hooks/index' import useTheme from 'hooks/useTheme' -import { TruncatedText } from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' import { ExternalLink, TYPE } from 'theme/index' import { getEtherscanLink, isAddress, shortenAddress } from 'utils/index' diff --git a/src/components/ModalContractAddress/index.tsx b/src/components/ModalContractAddress/index.tsx deleted file mode 100644 index 249341ebae..0000000000 --- a/src/components/ModalContractAddress/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { Trans } from '@lingui/macro' -import React from 'react' -import { CheckCircle, Copy, X } from 'react-feather' -import { Flex, Text } from 'rebass' -import styled from 'styled-components' - -import Divider from 'components/Divider' -import Modal from 'components/Modal' -import { NETWORKS_INFO, TRUESIGHT_NETWORK_TO_CHAINID } from 'constants/networks' -import useCopyClipboard from 'hooks/useCopyClipboard' -import useTheme from 'hooks/useTheme' -import { ApplicationModal } from 'state/application/actions' -import { useModalOpen, useToggleModal } from 'state/application/hooks' -import getShortenAddress from 'utils/getShortenAddress' - -function ContractAddressItem({ network, address, lastItem }: { network: string; address: string; lastItem: boolean }) { - const [isCopied, setCopied] = useCopyClipboard() - const chainId = TRUESIGHT_NETWORK_TO_CHAINID[network] - - const onCopy = (event: React.MouseEvent) => { - event.stopPropagation() - setCopied(address) - } - return ( - <> - - - Network -
{getShortenAddress(address)}
- - - {isCopied ? : } - - - {!lastItem && } - - ) -} - -const ModalContractAddress = ({ platforms }: { platforms: Map }) => { - const isContractAddressModalOpen = useModalOpen(ApplicationModal.CONTRACT_ADDRESS) - const toggleContractAddressModal = useToggleModal(ApplicationModal.CONTRACT_ADDRESS) - - const theme = useTheme() - - return ( - - - - - Contract Address - - - - - - - {Array.from(platforms).map((platformEntry, index) => { - return ( - - ) - })} - - - - ) -} - -export default ModalContractAddress - -const Container = styled.div` - width: 100%; - padding: 24px 16px 40px; -` - -const ContractAddressContainer = styled.div` - margin-top: 28px; -` - -const StyledContractAddressItem = styled.div` - display: flex; - align-items: center; - justify-content: space-between; -` diff --git a/src/components/SwapForm/SwapModal/SwapDetails/index.tsx b/src/components/SwapForm/SwapModal/SwapDetails/index.tsx index cbcd239268..511429ee95 100644 --- a/src/components/SwapForm/SwapModal/SwapDetails/index.tsx +++ b/src/components/SwapForm/SwapModal/SwapDetails/index.tsx @@ -6,6 +6,7 @@ import { Repeat } from 'react-feather' import { Flex, Text } from 'rebass' import { BuildRouteData } from 'services/route/types/buildRoute' +import { TruncatedText } from 'components' import { AutoColumn } from 'components/Column' import { RowBetween, RowFixed } from 'components/Row' import { useSwapFormContext } from 'components/SwapForm/SwapFormContext' @@ -17,7 +18,6 @@ import { StyledBalanceMaxMini } from 'components/swapv2/styleds' import { CHAINS_SUPPORT_FEE_CONFIGS } from 'constants/index' import { useActiveWeb3React } from 'hooks' import useTheme from 'hooks/useTheme' -import { TruncatedText } from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' import { ExternalLink, TYPE } from 'theme' import { DetailedRouteSummary } from 'types/route' import { formattedNum } from 'utils' diff --git a/src/components/TrueSightNetworkModal/index.tsx b/src/components/TrueSightNetworkModal/index.tsx deleted file mode 100644 index b4da7b0a2e..0000000000 --- a/src/components/TrueSightNetworkModal/index.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { ChainId } from '@kyberswap/ks-sdk-core' -import { Trans, t } from '@lingui/macro' -import { Dispatch, SetStateAction } from 'react' -import { X } from 'react-feather' -import { Flex, Text } from 'rebass' -import styled from 'styled-components' - -import { ButtonEmpty } from 'components/Button' -import { Kyber } from 'components/Icons' -import Modal from 'components/Modal' -import { NETWORKS_INFO, TRENDING_SOON_SUPPORTED_NETWORKS } from 'constants/networks' -import useTheme from 'hooks/useTheme' -import { TrueSightFilter } from 'pages/TrueSight' -import { ApplicationModal } from 'state/application/actions' -import { useModalOpen, useTrueSightNetworkModalToggle } from 'state/application/hooks' - -const Wrapper = styled.div` - width: 100%; - padding: 20px; -` - -const NetworkList = styled.div` - display: grid; - grid-gap: 1rem; - grid-template-columns: 1fr 1fr; - width: 100%; - margin-top: 20px; -` - -const NetworkLabel = styled.span` - color: ${({ theme }) => theme.text13}; -` - -const ListItem = styled.div<{ selected?: boolean }>` - width: 100%; - display: flex; - justify-content: flex-start; - align-items: center; - padding: 10px 12px; - border-radius: 4px; - ${({ theme, selected }) => - selected - ? ` - background-color: ${theme.primary}; - & ${NetworkLabel} { - color: ${theme.background}; - } - ` - : ` - background-color : ${theme.buttonBlack}; - `} -` - -const SelectNetworkButton = styled(ButtonEmpty)` - background-color: transparent; - color: ${({ theme }) => theme.primary}; - display: flex; - justify-content: center; - align-items: center; - &:focus { - text-decoration: none; - } - &:hover { - text-decoration: none; - border: 1px solid ${({ theme }) => theme.primary}; - border-radius: 4px; - } - &:active { - text-decoration: none; - } - &:disabled { - opacity: 50%; - cursor: not-allowed; - } -` - -export default function TrueSightNetworkModal({ - filter, - setFilter, -}: { - filter: TrueSightFilter - setFilter: Dispatch> -}): JSX.Element | null { - const theme = useTheme() - const trueSightNetworkModalOpen = useModalOpen(ApplicationModal.TRUESIGHT_NETWORK) - const toggleTrueSightNetworkModal = useTrueSightNetworkModalToggle() - - if (!trueSightNetworkModalOpen) return null - - return ( - - - - - Filter tokens by chain - - - - - - - - {[undefined, ...Object.values(TRENDING_SOON_SUPPORTED_NETWORKS)].map( - (key: ChainId | undefined, i: number) => { - if (filter.selectedNetwork === key) { - return ( - - - {key && NETWORKS_INFO[key].icon ? ( - Switch Network - ) : ( - - )} - {key ? NETWORKS_INFO[key].name : t`All Chains`} - - - ) - } - - return ( - { - toggleTrueSightNetworkModal() - setFilter(prev => ({ ...prev, selectedNetwork: key })) - }} - > - - {key && NETWORKS_INFO[key].icon ? ( - Switch Network - ) : ( - - )} - {key ? NETWORKS_INFO[key].name : t`All Chains`} - - - ) - }, - )} - - - - ) -} diff --git a/src/components/index.tsx b/src/components/index.tsx new file mode 100644 index 0000000000..9322cf1189 --- /dev/null +++ b/src/components/index.tsx @@ -0,0 +1,50 @@ +import { Text } from 'rebass' +import styled from 'styled-components' + +export const TruncatedText = styled(Text)` + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +` +export const OptionsContainer = styled.div` + display: flex; + position: absolute; + bottom: -6px; + right: 0; + border-radius: 16px; + flex-direction: column; + background: ${({ theme }) => theme.tableHeader}; + overflow: hidden; + z-index: 9999; + width: 100%; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + left: 50%; + transform: translate(-50%, 100%); + min-width: max-content; + + & > * { + cursor: pointer; + padding: 12px; + + &:hover { + background: ${({ theme }) => theme.background}; + } + } + + & div { + min-width: max-content !important; + } + + .no-hover-effect { + cursor: default; + &:hover { + background: inherit; + } + } + + .no-hover-effect-divider { + &:hover { + background: ${({ theme }) => theme.border}; + } + } +` diff --git a/src/components/swapv2/SwapModalFooter.tsx b/src/components/swapv2/SwapModalFooter.tsx index 69c7adf58c..32dc2053e4 100644 --- a/src/components/swapv2/SwapModalFooter.tsx +++ b/src/components/swapv2/SwapModalFooter.tsx @@ -4,6 +4,7 @@ import { useMemo, useState } from 'react' import { Repeat } from 'react-feather' import { Flex, Text } from 'rebass' +import { TruncatedText } from 'components' import { ButtonError } from 'components/Button' import { GreyCard } from 'components/Card' import { AutoColumn } from 'components/Column' @@ -14,7 +15,6 @@ import { MouseoverTooltip, TextDashed } from 'components/Tooltip' import { Dots } from 'components/swapv2/styleds' import { useActiveWeb3React } from 'hooks' import useTheme from 'hooks/useTheme' -import { TruncatedText } from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' import { Field } from 'state/swap/actions' import { useCheckStablePairSwap, useEncodeSolana } from 'state/swap/hooks' import { useDegenModeManager } from 'state/user/hooks' diff --git a/src/constants/env.ts b/src/constants/env.ts index 4dbbfbe85d..7021a8f154 100644 --- a/src/constants/env.ts +++ b/src/constants/env.ts @@ -22,7 +22,6 @@ export const BLOCK_SERVICE_API = required('BLOCK_SERVICE_API') export const PRICE_CHART_API = required('PRICE_CHART_API') export const AGGREGATOR_STATS_API = required('AGGREGATOR_STATS_API') export const NOTIFICATION_API = required('NOTIFICATION_API') -export const TRUESIGHT_API = required('TRUESIGHT_API') export const TRANSAK_URL = required('TRANSAK_URL') export const TRANSAK_API_KEY = required('TRANSAK_API_KEY') export const TYPE_AND_SWAP_URL = required('TYPE_AND_SWAP_URL') diff --git a/src/constants/networks.ts b/src/constants/networks.ts index 711039fc7d..f171cd0bbb 100644 --- a/src/constants/networks.ts +++ b/src/constants/networks.ts @@ -112,19 +112,6 @@ export function isSolana(chainId?: ChainId): chainId is ChainId.SOLANA { return chainType === ChainType.SOLANA } -type NetToChain = { [p: string]: ChainId } - -export const TRUESIGHT_NETWORK_TO_CHAINID: NetToChain = SUPPORTED_NETWORKS.reduce((acc, chainId) => { - const id = NETWORKS_INFO[chainId].trueSightId - if (id) { - return { - ...acc, - [id]: chainId, - } - } - return acc -}, {} as NetToChain) as NetToChain - export const FAUCET_NETWORKS = [ChainId.BTTC] export const CHAINS_SUPPORT_NEW_POOL_FARM_API: readonly ChainId[] = [ ChainId.MAINNET, diff --git a/src/constants/networks/arbitrum.ts b/src/constants/networks/arbitrum.ts index 224cd4e75f..a979a8dde4 100644 --- a/src/constants/networks/arbitrum.ts +++ b/src/constants/networks/arbitrum.ts @@ -72,7 +72,6 @@ const arbitrumInfo: EVMNetworkInfo = { coingeckoNetworkId: 'arbitrum-one', coingeckoNativeTokenId: 'ethereum', deBankSlug: 'arb', - trueSightId: NOT_SUPPORT, dexToCompare: 'uniswapv3', geckoTermialId: 'arbitrum', } diff --git a/src/constants/networks/aurora.ts b/src/constants/networks/aurora.ts index 02977b5523..5d0e9eade8 100644 --- a/src/constants/networks/aurora.ts +++ b/src/constants/networks/aurora.ts @@ -72,7 +72,6 @@ const auroraInfo: EVMNetworkInfo = { coingeckoNetworkId: 'aurora', coingeckoNativeTokenId: 'ethereum', deBankSlug: 'aurora', - trueSightId: NOT_SUPPORT, dexToCompare: 'trisolaris', geckoTermialId: 'aurora', } diff --git a/src/constants/networks/avax-testnet.ts b/src/constants/networks/avax-testnet.ts index 09ee5044ae..41337ed3e6 100644 --- a/src/constants/networks/avax-testnet.ts +++ b/src/constants/networks/avax-testnet.ts @@ -70,7 +70,6 @@ const avaxTestnetInfo: EVMNetworkInfo = { coingeckoNetworkId: 'avalanche', coingeckoNativeTokenId: 'avalanche-2', deBankSlug: EMPTY, - trueSightId: NOT_SUPPORT, dexToCompare: NOT_SUPPORT, geckoTermialId: NOT_SUPPORT, } diff --git a/src/constants/networks/avax.ts b/src/constants/networks/avax.ts index 9e1aa592f7..dbeb874aa1 100644 --- a/src/constants/networks/avax.ts +++ b/src/constants/networks/avax.ts @@ -81,7 +81,6 @@ const avaxInfo: EVMNetworkInfo = { coingeckoNetworkId: 'avalanche', coingeckoNativeTokenId: 'avalanche-2', deBankSlug: 'avax', - trueSightId: 'avax', dexToCompare: 'traderjoe', geckoTermialId: 'avax', } diff --git a/src/constants/networks/bnb-testnet.ts b/src/constants/networks/bnb-testnet.ts index 024714ab7a..9d2f283336 100644 --- a/src/constants/networks/bnb-testnet.ts +++ b/src/constants/networks/bnb-testnet.ts @@ -76,7 +76,6 @@ const bnbTestnetInfo: EVMNetworkInfo = { coingeckoNetworkId: 'binance-smart-chain', coingeckoNativeTokenId: 'binancecoin', deBankSlug: EMPTY, - trueSightId: NOT_SUPPORT, dexToCompare: NOT_SUPPORT, geckoTermialId: NOT_SUPPORT, } diff --git a/src/constants/networks/bnb.ts b/src/constants/networks/bnb.ts index 0dc2ebd0c1..3cb07c0019 100644 --- a/src/constants/networks/bnb.ts +++ b/src/constants/networks/bnb.ts @@ -77,7 +77,6 @@ const bnbInfo: EVMNetworkInfo = { coingeckoNetworkId: 'binance-smart-chain', coingeckoNativeTokenId: 'binancecoin', deBankSlug: 'bsc', - trueSightId: 'bsc', dexToCompare: 'pancake', geckoTermialId: 'bsc', } diff --git a/src/constants/networks/bttc.ts b/src/constants/networks/bttc.ts index 27f699350c..c03bece223 100644 --- a/src/constants/networks/bttc.ts +++ b/src/constants/networks/bttc.ts @@ -74,7 +74,6 @@ const bttcInfo: EVMNetworkInfo = { coingeckoNetworkId: 'tron', coingeckoNativeTokenId: 'bittorrent', deBankSlug: EMPTY, - trueSightId: NOT_SUPPORT, dexToCompare: NOT_SUPPORT, geckoTermialId: 'bttc', } diff --git a/src/constants/networks/cronos.ts b/src/constants/networks/cronos.ts index a0f18a4f0d..9bd064bb39 100644 --- a/src/constants/networks/cronos.ts +++ b/src/constants/networks/cronos.ts @@ -72,7 +72,6 @@ const cronosInfo: EVMNetworkInfo = { coingeckoNetworkId: 'cronos', coingeckoNativeTokenId: 'crypto-com-chain', deBankSlug: 'cro', - trueSightId: 'cronos', dexToCompare: 'vvs', geckoTermialId: 'cronos', } diff --git a/src/constants/networks/ethereum.ts b/src/constants/networks/ethereum.ts index d0620db5e2..10688e01bf 100644 --- a/src/constants/networks/ethereum.ts +++ b/src/constants/networks/ethereum.ts @@ -73,7 +73,6 @@ const ethereumInfo: EVMNetworkInfo = { coingeckoNetworkId: 'ethereum', coingeckoNativeTokenId: 'ethereum', deBankSlug: 'eth', - trueSightId: 'eth', dexToCompare: 'uniswapv3', kyberDAO: { staking: '0xeadb96F1623176144EBa2B24e35325220972b3bD', diff --git a/src/constants/networks/fantom.ts b/src/constants/networks/fantom.ts index 896b4a750e..87b85f8daf 100644 --- a/src/constants/networks/fantom.ts +++ b/src/constants/networks/fantom.ts @@ -70,7 +70,6 @@ const fantomInfo: EVMNetworkInfo = { coingeckoNetworkId: 'fantom', coingeckoNativeTokenId: 'fantom', deBankSlug: 'ftm', - trueSightId: 'fantom', dexToCompare: 'spookyswap', geckoTermialId: 'fantom', } diff --git "a/src/constants/networks/g\303\266rli.ts" "b/src/constants/networks/g\303\266rli.ts" index 903d1a9d2d..96a0c734eb 100644 --- "a/src/constants/networks/g\303\266rli.ts" +++ "b/src/constants/networks/g\303\266rli.ts" @@ -66,7 +66,6 @@ const görliInfo: EVMNetworkInfo = { coingeckoNetworkId: 'ethereum', coingeckoNativeTokenId: 'ethereum', deBankSlug: EMPTY, - trueSightId: NOT_SUPPORT, dexToCompare: NOT_SUPPORT, kyberDAO: { staking: '0x9bc1214E28005e9c3f5E99Ff01C23D42796702CF', diff --git a/src/constants/networks/matic.ts b/src/constants/networks/matic.ts index 821373e43c..a4bc0d3b0d 100644 --- a/src/constants/networks/matic.ts +++ b/src/constants/networks/matic.ts @@ -79,7 +79,6 @@ const maticInfo: EVMNetworkInfo = { coingeckoNetworkId: 'polygon-pos', coingeckoNativeTokenId: 'matic-network', deBankSlug: 'matic', - trueSightId: 'polygon', dexToCompare: 'quickswap', geckoTermialId: 'polygon_pos', } diff --git a/src/constants/networks/mumbai.ts b/src/constants/networks/mumbai.ts index e6a62495fb..10ec6c281a 100644 --- a/src/constants/networks/mumbai.ts +++ b/src/constants/networks/mumbai.ts @@ -67,7 +67,6 @@ const mumbaiInfo: EVMNetworkInfo = { coingeckoNetworkId: 'polygon-pos', coingeckoNativeTokenId: 'matic-network', deBankSlug: EMPTY, - trueSightId: NOT_SUPPORT, dexToCompare: NOT_SUPPORT, geckoTermialId: NOT_SUPPORT, } diff --git a/src/constants/networks/oasis.ts b/src/constants/networks/oasis.ts index cd190a452d..083f3c4286 100644 --- a/src/constants/networks/oasis.ts +++ b/src/constants/networks/oasis.ts @@ -70,7 +70,6 @@ const oasisInfo: EVMNetworkInfo = { coingeckoNetworkId: 'oasis', coingeckoNativeTokenId: 'oasis-network', deBankSlug: EMPTY, - trueSightId: NOT_SUPPORT, dexToCompare: 'valleyswap-v2', geckoTermialId: 'oasis', } diff --git a/src/constants/networks/optimism.ts b/src/constants/networks/optimism.ts index e3ac7b3f99..21aeaad75d 100644 --- a/src/constants/networks/optimism.ts +++ b/src/constants/networks/optimism.ts @@ -67,7 +67,6 @@ const optimismInfo: EVMNetworkInfo = { coingeckoNetworkId: 'optimistic-ethereum', coingeckoNativeTokenId: 'ethereum', deBankSlug: 'op', - trueSightId: NOT_SUPPORT, dexToCompare: 'uniswapv3', geckoTermialId: 'optimism', } diff --git a/src/constants/networks/solana.ts b/src/constants/networks/solana.ts index 450619908b..c323d724b3 100644 --- a/src/constants/networks/solana.ts +++ b/src/constants/networks/solana.ts @@ -46,7 +46,6 @@ const solanaInfo: SolanaNetworkInfo = { coingeckoNativeTokenId: 'solana', tokenListUrl: `${KS_SETTING_API}/v1/tokens?chainIds=${ChainId.SOLANA}&isWhitelisted=${true}`, defaultRpcUrl: 'https://solana.kyberengineering.io', - trueSightId: NOT_SUPPORT, openBookAddress: new PublicKey('srmqPvymJeFKQ4zGQed1GFppgkRHL9kaELCbyksJtPX'), dexToCompare: 'OrcaV2', geckoTermialId: 'solana', diff --git a/src/constants/networks/type.ts b/src/constants/networks/type.ts index 13f6ed3709..1495ed918b 100644 --- a/src/constants/networks/type.ts +++ b/src/constants/networks/type.ts @@ -27,7 +27,6 @@ export interface NetworkInfo { readonly coingeckoNetworkId: string | null //https://api.coingecko.com/api/v3/asset_platforms readonly coingeckoNativeTokenId: string | null //https://api.coingecko.com/api/v3/coins/list readonly tokenListUrl: string - readonly trueSightId: string | null readonly dexToCompare: string | null readonly limitOrder: { development: string | null diff --git a/src/constants/networks/velas.ts b/src/constants/networks/velas.ts index a45bd4f712..ac5ec5d23b 100644 --- a/src/constants/networks/velas.ts +++ b/src/constants/networks/velas.ts @@ -70,7 +70,6 @@ const velasInfo: EVMNetworkInfo = { coingeckoNetworkId: 'velas', coingeckoNativeTokenId: 'velas', deBankSlug: EMPTY, - trueSightId: NOT_SUPPORT, dexToCompare: 'wagyuswap', geckoTermialId: 'velas', } diff --git a/src/pages/Campaign/CampaignButtonWithOptions.tsx b/src/pages/Campaign/CampaignButtonWithOptions.tsx index bd0e6185d6..7430cfa49f 100644 --- a/src/pages/Campaign/CampaignButtonWithOptions.tsx +++ b/src/pages/Campaign/CampaignButtonWithOptions.tsx @@ -10,6 +10,7 @@ import { Flex, Text } from 'rebass' import styled, { css } from 'styled-components' import { ReactComponent as ChevronDown } from 'assets/svg/down.svg' +import { OptionsContainer } from 'components' import { ButtonPrimary } from 'components/Button' import { REWARD_SERVICE_API } from 'constants/env' import { BIG_INT_ZERO, DEFAULT_SIGNIFICANT } from 'constants/index' @@ -20,7 +21,6 @@ import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import { useOnClickOutside } from 'hooks/useOnClickOutside' import useTheme from 'hooks/useTheme' import { Dots } from 'pages/Pool/styleds' -import { OptionsContainer } from 'pages/TrueSight/styled' import { AppState } from 'state' import { CampaignData, diff --git a/src/pages/TrueSight/TrendingHero.tsx b/src/pages/TrueSight/TrendingHero.tsx deleted file mode 100644 index 68da2986da..0000000000 --- a/src/pages/TrueSight/TrendingHero.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Trans } from '@lingui/macro' -import styled from 'styled-components' - -import TrendingHeroLight from 'assets/images/trending-light.png' -import TrendingHeroImg from 'assets/images/trending.png' -import { useIsDarkMode } from 'state/user/hooks' - -const Hero = styled.div<{ darkMode?: boolean }>` - width: 100%; - padding: 24px 0; - border-top: 1px solid ${({ theme }) => theme.border}; - border-bottom: 1px solid ${({ theme }) => theme.border}; - - background-image: ${({ darkMode }) => (darkMode ? `url(${TrendingHeroImg})` : `url(${TrendingHeroLight})`)}; - background-size: contain; - background-repeat: no-repeat; - background-position: right; - - ${({ theme }) => theme.mediaWidth.upToMedium` - background-image: none; - padding: 16px 0; - `} -` - -const MainContent = styled.div` - color: ${({ theme }) => theme.subText}; - font-weight: 400; - font-size: 12px; - max-width: 70ch; -` - -const TrendingHero = () => { - const darkMode = useIsDarkMode() - return ( - - - Here you can view tokens that are currently trending on Coingecko and Coinmarketcap - - - ) -} - -export default TrendingHero diff --git a/src/pages/TrueSight/TrendingSoonHero.tsx b/src/pages/TrueSight/TrendingSoonHero.tsx deleted file mode 100644 index aceed3e2f8..0000000000 --- a/src/pages/TrueSight/TrendingSoonHero.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { Trans } from '@lingui/macro' -import styled from 'styled-components' - -import TrendingSoonHeroLight from 'assets/images/trending_hero-light.png' -import TrendingSoonHeroImg from 'assets/images/trending_hero.png' -import { useIsDarkMode } from 'state/user/hooks' - -const Hero = styled.div<{ darkMode?: boolean }>` - width: 100%; - padding: 16px 0; - border-top: 1px solid ${({ theme }) => theme.border}; - border-bottom: 1px solid ${({ theme }) => theme.border}; - - background-image: ${({ darkMode }) => (darkMode ? `url(${TrendingSoonHeroImg})` : `url(${TrendingSoonHeroLight})`)}; - background-size: contain; - background-repeat: no-repeat; - background-position: right; - - ${({ theme }) => theme.mediaWidth.upToMedium` - background-image: none; - `} -` - -const MainContent = styled.div` - color: ${({ theme }) => theme.subText}; - font-size: 12px; -` - -const SubContent = styled.div` - color: ${({ theme }) => theme.subText}; - font-weight: 400; - font-size: 10px; - margin-top: 8px; -` - -const TrendingSoonHero = () => { - const darkMode = useIsDarkMode() - return ( - - - - Our TrueSight technology analyzes on-chain data, trading volumes and price trendlines to discover tokens that - could be trending in the near future - - - - Disclaimer: The information here should not be treated as any form of financial advice - - - ) -} - -export default TrendingSoonHero diff --git a/src/pages/TrueSight/TrendingTable.tsx b/src/pages/TrueSight/TrendingTable.tsx deleted file mode 100644 index 9cdaeaba48..0000000000 --- a/src/pages/TrueSight/TrendingTable.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const TrendingTable = () => { - return
TrendingTable
-} - -export default TrendingTable diff --git a/src/pages/TrueSight/TrueSightTab.tsx b/src/pages/TrueSight/TrueSightTab.tsx deleted file mode 100644 index 4ac6b20b79..0000000000 --- a/src/pages/TrueSight/TrueSightTab.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Trans } from '@lingui/macro' -import { useNavigate } from 'react-router-dom' -import { useMedia } from 'react-use' - -import DiscoverIcon from 'components/Icons/DiscoverIcon' -import TrendingIcon from 'components/Icons/TrendingIcon' -import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' -import useParsedQueryString from 'hooks/useParsedQueryString' -import { TrueSightTabs } from 'pages/TrueSight/index' -import { TabContainer, TabDivider, TabItem } from 'pages/TrueSight/styled' - -const TrueSightTab = ({ activeTab }: { activeTab: TrueSightTabs | undefined }) => { - const navigate = useNavigate() - const { tab } = useParsedQueryString() - const { mixpanelHandler } = useMixpanel() - - const upToSmall = useMedia('(max-width: 768px)') - return ( - - { - if (tab !== 'trending_soon') { - mixpanelHandler(MIXPANEL_TYPE.DISCOVER_TRENDING_SOON_CLICKED) - } - navigate({ search: '?tab=' + TrueSightTabs.TRENDING_SOON }) - }} - > - Trending Soon - - - | - { - if (tab !== 'trending') { - mixpanelHandler(MIXPANEL_TYPE.DISCOVER_TRENDING_CLICKED) - } - navigate({ search: '?tab=' + TrueSightTabs.TRENDING }) - }} - > - Trending - - - - ) -} - -export default TrueSightTab diff --git a/src/pages/TrueSight/components/AddressButton.tsx b/src/pages/TrueSight/components/AddressButton.tsx deleted file mode 100644 index f2e9565a22..0000000000 --- a/src/pages/TrueSight/components/AddressButton.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import React, { ReactNode, useRef, useState } from 'react' -import { CheckCircle, ChevronDown, Copy } from 'react-feather' -import { Box, Flex } from 'rebass' -import styled from 'styled-components' - -import { NETWORKS_INFO, TRUESIGHT_NETWORK_TO_CHAINID } from 'constants/networks' -import useCopyClipboard from 'hooks/useCopyClipboard' -import { useOnClickOutside } from 'hooks/useOnClickOutside' -import useTheme from 'hooks/useTheme' -import { OptionsContainer } from 'pages/TrueSight/styled' -import getShortenAddress from 'utils/getShortenAddress' - -function AddressButtonItself({ - network, - address, - isInOptionContainer, - isDisableChevronDown, - optionRender, - toggleShowOptions, -}: { - network: string - address: string - isInOptionContainer?: boolean - isDisableChevronDown?: boolean - optionRender?: ReactNode - toggleShowOptions?: () => void -}) { - const theme = useTheme() - const [isCopied, setCopied] = useCopyClipboard() - - const onCopy = (event: React.MouseEvent) => { - event.stopPropagation() - setCopied(address) - } - - const mappedChainId = network ? TRUESIGHT_NETWORK_TO_CHAINID[network] : undefined - - return ( - - {address && mappedChainId && ( - <> - Network - -
{getShortenAddress(address)}
- {isCopied ? : } - - !isDisableChevronDown && toggleShowOptions && toggleShowOptions()} - > - - - - )} - {optionRender} - - ) -} - -export default function AddressButton({ platforms }: { platforms: Map }) { - const [isShowOptions, setIsShowOptions] = useState(false) - const containerRef = useRef(null) - - const toggleShowOptions = () => platforms.size >= 2 && setIsShowOptions(prev => !prev) - - useOnClickOutside(containerRef, () => setIsShowOptions(false)) - - const defaultNetwork = platforms.size ? platforms.keys().next().value : '' - const defaultAddress = defaultNetwork ? platforms.get(defaultNetwork) ?? '' : '' - - const optionRender = isShowOptions ? ( - - {Array.from(platforms.keys()) - .slice(1) - .map(network => ( - - ))} - - ) : null - - if (platforms.size === 0) return null - - return ( - - - - ) -} - -const AddressCopyContainer = styled.div` - cursor: pointer; - display: flex; - align-items: center; - - &:hover { - color: ${({ theme }) => theme.disableText}; - } -` - -const ChevronDownWrapper = styled.div` - &:hover { - color: ${({ theme }) => theme.disableText}; - } -` - -export const StyledAddressButton = styled(Flex)<{ isInOptionContainer?: boolean }>` - align-items: center; - padding: 4.5px 12px; - gap: 6px; - width: fit-content; - font-size: 12px; - line-height: 14px; - color: ${({ theme }) => theme.subText}; - background: ${({ theme, isInOptionContainer }) => (isInOptionContainer ? 'transparent' : theme.buttonBlack)}; - border-radius: ${({ isInOptionContainer }) => (isInOptionContainer ? '0' : '16px')}; - position: relative; -` diff --git a/src/pages/TrueSight/components/AddressRowOnMobile.tsx b/src/pages/TrueSight/components/AddressRowOnMobile.tsx deleted file mode 100644 index c89f2651eb..0000000000 --- a/src/pages/TrueSight/components/AddressRowOnMobile.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { ChainId } from '@kyberswap/ks-sdk-core' -import { Trans } from '@lingui/macro' -import React from 'react' -import { CheckCircle, ChevronDown, Copy } from 'react-feather' -import { Flex } from 'rebass' - -import ModalContractAddress from 'components/ModalContractAddress' -import { NETWORKS_INFO, TRUESIGHT_NETWORK_TO_CHAINID } from 'constants/networks' -import useCopyClipboard from 'hooks/useCopyClipboard' -import { FieldName, FieldValue } from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' -import { ApplicationModal } from 'state/application/actions' -import { useToggleModal } from 'state/application/hooks' -import getShortenAddress from 'utils/getShortenAddress' - -type Props = { - platforms: Map -} - -const AddressRowOnMobile: React.FC = ({ platforms }) => { - const defaultNetwork: string = platforms.size ? platforms.keys().next().value : '' - const defaultAddress = defaultNetwork ? platforms.get(defaultNetwork) ?? '' : '' - - const [isCopied, setCopied] = useCopyClipboard() - const toggleContractAddressModal = useToggleModal(ApplicationModal.CONTRACT_ADDRESS) - - const onCopy = (event: React.MouseEvent) => { - event.stopPropagation() - setCopied(defaultAddress) - } - - return ( - <> - - - Contract Address - - - - Network - -
{getShortenAddress(defaultAddress)}
- {isCopied ? : } - - - - - - ) -} - -export default AddressRowOnMobile diff --git a/src/pages/TrueSight/components/ButtonWithOptions.tsx b/src/pages/TrueSight/components/ButtonWithOptions.tsx deleted file mode 100644 index e25e071d4e..0000000000 --- a/src/pages/TrueSight/components/ButtonWithOptions.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { getAddress } from '@ethersproject/address' -import { Trans } from '@lingui/macro' -import { rgba } from 'polished' -import { CSSProperties, useRef, useState } from 'react' -import { useLocation, useNavigate } from 'react-router-dom' -import { Flex, Text } from 'rebass' - -import { ReactComponent as ChevronDown } from 'assets/svg/down.svg' -import { ButtonPrimary } from 'components/Button' -import Cart from 'components/Icons/Cart' -import { APP_PATHS } from 'constants/index' -import { NETWORKS_INFO, TRUESIGHT_NETWORK_TO_CHAINID } from 'constants/networks' -import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' -import { useOnClickOutside } from 'hooks/useOnClickOutside' -import useParsedQueryString from 'hooks/useParsedQueryString' -import useTheme from 'hooks/useTheme' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { OptionsContainer } from 'pages/TrueSight/styled' -import { ApplicationModal } from 'state/application/actions' -import { useToggleModal } from 'state/application/hooks' -import { ExternalLink } from 'theme' - -const ButtonWithOptions = ({ - platforms, - style, - tokenData, - variant = 'primary', -}: { - platforms: Map - style?: CSSProperties - tokenData: TrueSightTokenData - variant?: 'primary' | 'light' -}) => { - const theme = useTheme() - const [isShowNetworks, setIsShowNetworks] = useState(false) - const containerRef = useRef(null) - useOnClickOutside(containerRef, () => setIsShowNetworks(false)) - - const { tab } = useParsedQueryString<{ tab: string }>() - const { mixpanelHandler } = useMixpanel() - - const triggerDiscoverSwapInitiated = (platform: string) => { - mixpanelHandler(MIXPANEL_TYPE.DISCOVER_SWAP_INITIATED, { - token_name: tokenData.name, - token_on_chain: tokenData.present_on_chains.map(chain => chain.toUpperCase()), - token_contract_address: getAddress(platforms.get(platform) ?? ''), - trending_or_trending_soon: tab === 'trending' ? 'Trending' : 'Trending Soon', - }) - } - - const location = useLocation() - const navigate = useNavigate() - const isInSwapPage = location.pathname.startsWith(APP_PATHS.SWAP) - const toggleTrendingSoonTokenDetailModal = useToggleModal(ApplicationModal.TRENDING_SOON_TOKEN_DETAIL) - - return ( - { - e.stopPropagation() - setIsShowNetworks(prev => !prev) - }} - ref={containerRef} - > - - - {isShowNetworks && ( - - {Array.from(platforms.keys()).map(platform => { - const mappedChainId = platform ? TRUESIGHT_NETWORK_TO_CHAINID[platform] : undefined - if (mappedChainId) { - if (isInSwapPage) - return ( - { - toggleTrendingSoonTokenDetailModal() - navigate( - `/swap/${NETWORKS_INFO[mappedChainId].route}?inputCurrency=ETH&outputCurrency=${getAddress( - platforms.get(platform) ?? '', - )}`, - ) - mixpanelHandler(MIXPANEL_TYPE.DISCOVER_SWAP_BUY_NOW_POPUP_CLICKED, { - trending_token: tokenData.symbol, - }) - }} - > - Network - - Swap on {NETWORKS_INFO[mappedChainId].name} - - - ) - return ( - { - triggerDiscoverSwapInitiated(platform) - }} - > - Network - - Swap on {NETWORKS_INFO[mappedChainId].name} - - - ) - } - return null - })} - - )} - - ) -} - -export default ButtonWithOptions diff --git a/src/pages/TrueSight/components/Chart.tsx b/src/pages/TrueSight/components/Chart.tsx deleted file mode 100644 index 5bb5979ee5..0000000000 --- a/src/pages/TrueSight/components/Chart.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import { Trans } from '@lingui/macro' -import React, { useState } from 'react' -import { Flex } from 'rebass' -import styled from 'styled-components' - -import LineChart from 'components/LiveChart/LineChart' -import LocalLoader from 'components/LocalLoader' -import { LiveDataTimeframeEnum } from 'hooks/useBasicChartData' -import useTheme from 'hooks/useTheme' -import { FormattedCoinGeckoChartData } from 'pages/TrueSight/hooks/useGetCoinGeckoChartData' -import { TrueSightChartCategory, TrueSightTimeframe } from 'pages/TrueSight/index' -import { formattedNumLong } from 'utils' - -const Chart = ({ - chartData: rawChartData, - isLoading, - chartCategory, - setChartCategory, - chartTimeframe, - setChartTimeframe, -}: { - chartData: FormattedCoinGeckoChartData - isLoading: boolean - chartCategory: TrueSightChartCategory - setChartCategory: React.Dispatch> - chartTimeframe: TrueSightTimeframe - setChartTimeframe: React.Dispatch> -}) => { - const theme = useTheme() - const [hoverValue, setHoverValue] = useState(null) - const chartData = - chartCategory === TrueSightChartCategory.TRADING_VOLUME ? rawChartData.totalVolumes : rawChartData.prices - const oldestValue = chartData.length ? parseFloat(chartData[0].value) : undefined - const latestValue = chartData.length ? parseFloat(chartData[chartData.length - 1].value) : undefined - const mainValueNumber = hoverValue ?? latestValue - let subValueNumber, subValuePercent - if (oldestValue && latestValue) { - let currentValue, comparedValue - if (hoverValue) { - currentValue = hoverValue - comparedValue = latestValue - } else { - currentValue = latestValue - comparedValue = oldestValue - } - subValueNumber = currentValue - comparedValue - subValuePercent = ((subValueNumber * 100) / comparedValue).toFixed(2) - } - - const mainValue = mainValueNumber ? formattedNumLong(mainValueNumber, true) : '--' - const subValue = - subValueNumber !== undefined && subValuePercent !== undefined - ? `${formattedNumLong(subValueNumber, true)} (${subValuePercent}%)` - : '--' - let subValueDesc = '' - if (subValue !== '--' && hoverValue === null) { - subValueDesc = 'Past ' + (chartTimeframe === TrueSightTimeframe.ONE_DAY ? '24 Hours' : '7 Days') - } - - return ( - - {isLoading ? ( - - ) : ( - <> - - - setChartCategory(TrueSightChartCategory.TRADING_VOLUME)} - > - Trading Volume - - setChartCategory(TrueSightChartCategory.PRICE)} - > - Price - - - - setChartTimeframe(TrueSightTimeframe.ONE_DAY)} - > - 1D - - setChartTimeframe(TrueSightTimeframe.ONE_WEEK)} - > - 7D - - - - {mainValue} - = 0}> - {subValue} {subValueDesc} - -
- -
- - )} - - ) -} - -export default Chart - -const ChartContainer = styled.div` - flex: 1; - width: 100%; - height: 100%; - background: ${({ theme }) => theme.buttonBlack}; - border-radius: 20px; - padding: 16px; - display: flex; - flex-direction: column; - - &, - & * { - user-select: none; - } -` - -const MainValue = styled.div` - color: ${({ theme }) => theme.subText}; - font-size: 18px; - font-weight: 500; - line-height: 20px; - margin-top: 12px; -` - -const SubValue = styled.div<{ up?: boolean }>` - color: ${({ theme, up }) => (up ? theme.apr : theme.red)}; - font-size: 12px; - font-weight: 400; - line-height: 14px; - margin-top: 4px; -` - -const ChartDataTypeContainer = styled.div` - display: flex; - border-radius: 999px; - padding: 2px; - background: ${({ theme }) => theme.tabBackground}; -` - -const ChartDataTypeItem = styled.div<{ isActive?: boolean }>` - padding: 4px 12px; - border-radius: 14px; - background: ${({ theme, isActive }) => (isActive ? theme.tabActive : theme.tabBackground)}; - color: ${({ theme, isActive }) => (isActive ? theme.text : theme.subText)}; - font-size: 12px; - font-weight: 500; - cursor: pointer; -` diff --git a/src/pages/TrueSight/components/CommunityButton.tsx b/src/pages/TrueSight/components/CommunityButton.tsx deleted file mode 100644 index c779866ab4..0000000000 --- a/src/pages/TrueSight/components/CommunityButton.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Trans } from '@lingui/macro' -import { useRef, useState } from 'react' -import { ChevronDown } from 'react-feather' -import { Text } from 'rebass' -import styled from 'styled-components' - -import { useOnClickOutside } from 'hooks/useOnClickOutside' -import useTheme from 'hooks/useTheme' -import { StyledAddressButton } from 'pages/TrueSight/components/AddressButton' -import { OptionsContainer } from 'pages/TrueSight/styled' -import { ExternalLink } from 'theme' - -const CommunityButton = ({ communityOption }: { communityOption: { [p: string]: string } }) => { - const [isShowOptions, setIsShowOptions] = useState(false) - const containerRef = useRef(null) - - const toggleShowOptions = () => setIsShowOptions(prev => !prev) - - const theme = useTheme() - - useOnClickOutside(containerRef, () => setIsShowOptions(false)) - - return ( -
- -
- Community -
- - - {isShowOptions && ( - - {Object.keys(communityOption).map(cName => ( - - {cName} ↗ - - ))} - - )} -
- ) -} - -export default CommunityButton - -export const StyledCommunityButton = styled(StyledAddressButton)` - padding: 6px 12px; - cursor: pointer; - - &:hover { - color: ${({ theme }) => theme.disableText}; - } -` diff --git a/src/pages/TrueSight/components/CommunityRowOnMobile.tsx b/src/pages/TrueSight/components/CommunityRowOnMobile.tsx deleted file mode 100644 index 9763808611..0000000000 --- a/src/pages/TrueSight/components/CommunityRowOnMobile.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { Trans } from '@lingui/macro' -import React from 'react' -import { ChevronDown } from 'react-feather' -import { Flex, Text } from 'rebass' - -import Facebook from 'components/Icons/Facebook' -import Reddit from 'components/Icons/Reddit' -import TwitterIcon from 'components/Icons/TwitterIcon' -import ModalCommunity from 'components/ModalCommunity' -import useTheme from 'hooks/useTheme' -import { FieldName, FieldValue } from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' -import { ApplicationModal } from 'state/application/actions' -import { useToggleModal } from 'state/application/hooks' -import { ExternalLink } from 'theme' - -type Props = { - socialURLs: Record -} - -const CommunityRowOnMobile: React.FC = ({ socialURLs }) => { - const theme = useTheme() - const firstURLType = Object.keys(socialURLs)[0] - const firstURL = socialURLs[firstURLType] - - const toggleCommunityModal = useToggleModal(ApplicationModal.COMMUNITY) - - return ( - <> - - - Community - - - - - {firstURLType === 'twitter' ? ( - - ) : firstURLType === 'facebook' ? ( - - ) : firstURLType === 'reddit' ? ( - - ) : null} - - {firstURLType} ↗ - - - - - - ) -} - -export default CommunityRowOnMobile diff --git a/src/pages/TrueSight/components/FilterBar/NetworkSelect.tsx b/src/pages/TrueSight/components/FilterBar/NetworkSelect.tsx deleted file mode 100644 index ab46292a2d..0000000000 --- a/src/pages/TrueSight/components/FilterBar/NetworkSelect.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { Trans } from '@lingui/macro' -import { CSSProperties, Dispatch, SetStateAction, useRef, useState } from 'react' -import { isMobile } from 'react-device-detect' -import { X } from 'react-feather' -import { Flex, Image, Text } from 'rebass' -import styled from 'styled-components' - -import { ReactComponent as ChevronDown } from 'assets/svg/down.svg' -import Kyber from 'components/Icons/Kyber' -import TrueSightNetworkModal from 'components/TrueSightNetworkModal' -import { NETWORKS_INFO, TRENDING_SOON_SUPPORTED_NETWORKS } from 'constants/networks' -import { useOnClickOutside } from 'hooks/useOnClickOutside' -import useTheme from 'hooks/useTheme' -import { TrueSightFilter } from 'pages/TrueSight/index' -import { OptionsContainer } from 'pages/TrueSight/styled' -import { useTrueSightNetworkModalToggle } from 'state/application/hooks' - -const NetworkSelectContainer = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - padding: 6px 8px; - position: relative; - border-radius: 999px; - background: ${({ theme }) => theme.background}; - min-width: 160px; - cursor: pointer; - - ${({ theme }) => theme.mediaWidth.upToMedium` - min-width: unset; - width: 100%; - `} -` - -const NetworkSelect = ({ - filter, - setFilter, - style, -}: { - filter: TrueSightFilter - setFilter: Dispatch> - style?: CSSProperties -}) => { - const theme = useTheme() - - const { selectedNetwork } = filter - const [isShowOptions, setIsShowOptions] = useState(false) - const containerRef = useRef(null) - - useOnClickOutside(containerRef, () => !isMobile && setIsShowOptions(false)) - - const toggleTrueSightNetworkModal = useTrueSightNetworkModalToggle() - - return ( - { - if (isMobile) { - toggleTrueSightNetworkModal() - } else { - setIsShowOptions(prev => !prev) - } - }} - ref={containerRef} - style={style} - > - - {selectedNetwork ? ( - - ) : ( - - )} - - {selectedNetwork ? NETWORKS_INFO[selectedNetwork].name : All Chains} - - - - {selectedNetwork ? ( - { - e.stopPropagation() - setFilter(prev => ({ ...prev, selectedNetwork: undefined })) - }} - /> - ) : ( - - )} - - - - - {isShowOptions && !isMobile && ( - - {Object.values(TRENDING_SOON_SUPPORTED_NETWORKS).map((network, index) => ( - { - setFilter(prev => ({ ...prev, selectedNetwork: network })) - }} - > - - - {NETWORKS_INFO[network].name} - - - ))} - - )} - - ) -} - -export default NetworkSelect diff --git a/src/pages/TrueSight/components/FilterBar/TimeframePicker.tsx b/src/pages/TrueSight/components/FilterBar/TimeframePicker.tsx deleted file mode 100644 index 3d90b71cf7..0000000000 --- a/src/pages/TrueSight/components/FilterBar/TimeframePicker.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Flex } from 'rebass' -import styled from 'styled-components' - -import useTheme from 'hooks/useTheme' -import { TrueSightTimeframe } from 'pages/TrueSight/index' - -const TimeframePickerItem = styled.div<{ isActive: boolean }>` - border-radius: 999px; - padding: 4px 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - font-weight: 500; - color: ${({ theme, isActive }) => (isActive ? theme.text : theme.subText)}; - background: ${({ theme, isActive }) => (isActive ? theme.tabActive : theme.tabBackground)}; - cursor: pointer; - transition: all 0.2s ease; -` - -const TimeframePicker = ({ - activeTimeframe, - setActiveTimeframe, -}: { - activeTimeframe: TrueSightTimeframe - setActiveTimeframe: (timeframe: TrueSightTimeframe) => void -}) => { - const theme = useTheme() - - return ( - - { - setActiveTimeframe(TrueSightTimeframe.ONE_DAY) - }} - > - 1D - - { - setActiveTimeframe(TrueSightTimeframe.ONE_WEEK) - }} - > - 7D - - - ) -} - -export default TimeframePicker diff --git a/src/pages/TrueSight/components/FilterBar/TrueSightSearchBox.tsx b/src/pages/TrueSight/components/FilterBar/TrueSightSearchBox.tsx deleted file mode 100644 index 10b9bcbf87..0000000000 --- a/src/pages/TrueSight/components/FilterBar/TrueSightSearchBox.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import { Trans } from '@lingui/macro' -import React, { CSSProperties, useEffect, useRef, useState } from 'react' -import { X } from 'react-feather' -import { Box, Flex, Text } from 'rebass' -import styled from 'styled-components' - -import { ButtonEmpty } from 'components/Button' -import Divider from 'components/Divider' -import Search from 'components/Search' -import { useOnClickOutside } from 'hooks/useOnClickOutside' -import useTheme from 'hooks/useTheme' -import { TruncatedText } from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { OptionsContainer } from 'pages/TrueSight/styled' - -interface TrueSightSearchBoxProps { - className?: string - minWidth?: string - style?: CSSProperties - placeholder: string - foundTags: string[] - foundTokens: TrueSightTokenData[] - searchText: string - setSearchText: React.Dispatch> - selectedTag: string | undefined - setSelectedTag: (tag: string | undefined) => void - selectedTokenData: TrueSightTokenData | undefined - setSelectedTokenData: (tokenData: TrueSightTokenData | undefined) => void -} - -const Option = ({ option, onClick }: { option: string | TrueSightTokenData; onClick?: () => void }) => { - const theme = useTheme() - - return ( - - {typeof option !== 'string' ? ( - <> - logo_url - - {option.name} - - - {option.symbol} - - - ) : ( - <> - {!onClick && ( - - Tag: - - )} - - {option} - - - )} - - ) -} - -export default function TrueSightSearchBox({ - className, - minWidth, - style, - placeholder, - foundTags, - foundTokens, - searchText, - setSearchText, - selectedTag, - setSelectedTag, - selectedTokenData, - setSelectedTokenData, -}: TrueSightSearchBoxProps) { - const theme = useTheme() - const [isShowOptions, setIsShowOptions] = useState(false) - const containerRef = useRef(null) - - useEffect(() => { - if (searchText === '' || selectedTag !== undefined || selectedTokenData !== undefined) { - setIsShowOptions(false) - } else if (foundTags.length || foundTokens.length) { - setIsShowOptions(true) - } - }, [foundTokens.length, foundTags.length, searchText, selectedTokenData, selectedTag]) - - useOnClickOutside(containerRef, () => setIsShowOptions(false)) - - return ( - - {selectedTag || selectedTokenData ? ( - - - ) : ( - setSearchText(newSearchText)} - placeholder={placeholder} - minWidth={minWidth} - /> - )} - {isShowOptions && ( - - <> - - Tokens - - {foundTokens.map((tokenData, index) => { - return ( - - )} - - ) -} - -export const SelectedOption = styled.div` - background: ${({ theme }) => theme.background}; - color: ${({ theme }) => theme.subText}; - font-size: 12px; - height: 100%; - min-height: 36px; - border-radius: 4px; - padding: 6px 12px; - display: flex; - align-items: center; - justify-content: space-between; -` diff --git a/src/pages/TrueSight/components/FilterBar/TrueSightToggle.tsx b/src/pages/TrueSight/components/FilterBar/TrueSightToggle.tsx deleted file mode 100644 index 7c9404e46e..0000000000 --- a/src/pages/TrueSight/components/FilterBar/TrueSightToggle.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Trans, t } from '@lingui/macro' -import { Flex } from 'rebass' - -import Toggle, { ToggleProps } from 'components/Toggle' -import { MouseoverTooltip } from 'components/Tooltip' -import useTheme from 'hooks/useTheme' -import { TextTooltip } from 'pages/TrueSight/styled' - -const TrueSightToggle = ({ isActive, toggle }: ToggleProps) => { - const theme = useTheme() - - return ( - - - - TrueSight - - - - - ) -} - -export default TrueSightToggle diff --git a/src/pages/TrueSight/components/FilterBar/index.tsx b/src/pages/TrueSight/components/FilterBar/index.tsx deleted file mode 100644 index d5de0751cd..0000000000 --- a/src/pages/TrueSight/components/FilterBar/index.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import { Trans, t } from '@lingui/macro' -import React, { useState } from 'react' -import { useMedia } from 'react-use' -import { Flex } from 'rebass' -import styled from 'styled-components' - -import { Container as SearchContainer, Input as SearchInput } from 'components/Search' -import { MouseoverTooltip } from 'components/Tooltip' -import useDebounce from 'hooks/useDebounce' -import useParsedQueryString from 'hooks/useParsedQueryString' -import useTheme from 'hooks/useTheme' -import NetworkSelect from 'pages/TrueSight/components/FilterBar/NetworkSelect' -import TimeframePicker from 'pages/TrueSight/components/FilterBar/TimeframePicker' -import TrueSightSearchBox, { SelectedOption } from 'pages/TrueSight/components/FilterBar/TrueSightSearchBox' -import TrueSightToggle from 'pages/TrueSight/components/FilterBar/TrueSightToggle' -import useGetTagsForSearchBox from 'pages/TrueSight/hooks/useGetTagsForSearchBox' -import useGetTokensForSearchBox from 'pages/TrueSight/hooks/useGetTokensForSearchBox' -import { TrueSightFilter, TrueSightTabs, TrueSightTimeframe } from 'pages/TrueSight/index' -import { - TextTooltip, - TrueSightFilterBarLayout, - TrueSightFilterBarLayoutMobile, - TrueSightFilterBarSection, -} from 'pages/TrueSight/styled' - -const TrueSightSearchBoxOnMobile = styled(TrueSightSearchBox)` - flex: 1; - background: ${({ theme }) => theme.background}; - - ${SearchContainer} { - background: ${({ theme }) => theme.tabBackground}; - } - - ${SelectedOption} { - background: ${({ theme }) => theme.tabBackground}; - border-radius: 20px; - } - - ${SearchInput} { - font-weight: 500; - font-size: 14px; - line-height: 20px; - - ::placeholder { - font-size: 14px; - } - } -` -interface FilterBarProps { - activeTab: TrueSightTabs | undefined - filter: TrueSightFilter - setFilter: React.Dispatch> -} - -const FilterBar: React.FC = ({ activeTab, filter, setFilter }) => { - const isActiveTabTrending = activeTab === TrueSightTabs.TRENDING - const below992 = useMedia('(max-width: 992px)') - - const theme = useTheme() - const { tab } = useParsedQueryString<{ tab: string }>() - - const setActiveTimeframe = (timeframe: TrueSightTimeframe) => { - setFilter(prev => ({ ...prev, timeframe })) - } - - const [searchText, setSearchText] = useState('') - const debouncedSearchText = useDebounce(searchText.toLowerCase().trim(), 200) - - const { data: foundTokens } = useGetTokensForSearchBox( - debouncedSearchText, - filter.timeframe, - filter.isShowTrueSightOnly, - ) - const { data: foundTags } = useGetTagsForSearchBox(debouncedSearchText) - - const tooltipText = - tab === TrueSightTabs.TRENDING_SOON - ? t`You can choose to see the tokens with the highest growth potential over the last 24 hours or 7 days` - : t`You can choose to see currently trending tokens over the last 24 hours or 7 days` - - return !below992 ? ( - - - - - Timeframe - - - - - - {isActiveTabTrending && ( - setFilter(prev => ({ ...prev, isShowTrueSightOnly: !prev.isShowTrueSightOnly }))} - /> - )} - - setFilter(prev => ({ ...prev, selectedTag: tag, selectedTokenData: undefined }))} - selectedTokenData={filter.selectedTokenData} - setSelectedTokenData={tokenData => - setFilter(prev => ({ ...prev, selectedTag: undefined, selectedTokenData: tokenData })) - } - /> - - - ) : ( - - - - - - Timeframe - - - - - - - - {tab === 'trending' && ( - setFilter(prev => ({ ...prev, isShowTrueSightOnly: !prev.isShowTrueSightOnly }))} - style={{ - flex: '1', - }} - /> - )} - - - - - - - setFilter(prev => ({ ...prev, selectedTag: tag, selectedTokenData: undefined }))} - selectedTokenData={filter.selectedTokenData} - setSelectedTokenData={tokenData => - setFilter(prev => ({ ...prev, selectedTag: undefined, selectedTokenData: tokenData })) - } - /> - - - ) -} - -export default FilterBar diff --git a/src/pages/TrueSight/components/Tags.tsx b/src/pages/TrueSight/components/Tags.tsx deleted file mode 100644 index cdb5e49e75..0000000000 --- a/src/pages/TrueSight/components/Tags.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { rgba } from 'polished' -import React, { CSSProperties, useEffect, useRef } from 'react' -import ScrollContainer from 'react-indiana-drag-scroll' -import { useMedia } from 'react-use' -import { Flex, Text } from 'rebass' -import styled from 'styled-components' - -import { ScrollContainerWithGradient } from 'components/RewardTokenPrices' -import useTheme from 'hooks/useTheme' -import useThrottle from 'hooks/useThrottle' -import { TrueSightFilter } from 'pages/TrueSight/index' - -const Tags = ({ - tags, - setFilter, - style, - backgroundColor, -}: { - tags: string[] | null - setFilter?: React.Dispatch> - style?: CSSProperties - backgroundColor?: string -}) => { - const scrollRef = useRef(null) - const contentRef: any = useRef(null) - const shadowRef: any = useRef(null) - - const handleShadow = useThrottle(() => { - const element: any = scrollRef.current - if (element?.scrollLeft > 0) { - shadowRef.current?.classList.add('left-visible') - } else { - shadowRef.current?.classList.remove('left-visible') - } - - if (contentRef.current?.scrollWidth - element?.scrollLeft > element?.clientWidth) { - shadowRef.current?.classList.add('right-visible') - } else { - shadowRef.current?.classList.remove('right-visible') - } - }, 300) - - useEffect(() => { - window.addEventListener('resize', handleShadow) - return () => window.removeEventListener('resize', handleShadow) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - - useEffect(() => { - handleShadow() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [tags]) - - const above1200 = useMedia('(min-width: 1200px)') - const theme = useTheme() - - if (above1200) { - return ( - - - - {(tags ?? []).map(tag => ( - - setFilter && setFilter(prev => ({ ...prev, selectedTag: tag, selectedTokenData: undefined })) - } - > - {tag} - - ))} - - - - ) - } - - return ( - - {(tags ?? []).map(tag => ( - setFilter && setFilter(prev => ({ ...prev, selectedTag: tag, selectedTokenData: undefined }))} - > - {tag} - - ))} - - ) -} - -export default Tags - -const Tag = styled(Text)` - font-size: 10px; - color: ${({ theme }) => theme.subText}; - padding: 5px 8px; - border-radius: 24px; - background: ${({ theme }) => rgba(theme.subText, 0.2)}; - cursor: pointer; - min-width: max-content !important; - - &:hover { - background: ${({ theme }) => rgba(theme.subText, 0.1)}; - } -` - -const TagContainer = styled(Flex)` - align-items: center; - gap: 4px; - flex: 1; - - ${({ theme }) => theme.mediaWidth.upToLarge` - overflow: unset; - flex-wrap: wrap; - `} -` diff --git a/src/pages/TrueSight/components/TrendingLayout/TrendingTokenItemMobileOnly.tsx b/src/pages/TrueSight/components/TrendingLayout/TrendingTokenItemMobileOnly.tsx deleted file mode 100644 index cd1cf6a452..0000000000 --- a/src/pages/TrueSight/components/TrendingLayout/TrendingTokenItemMobileOnly.tsx +++ /dev/null @@ -1,338 +0,0 @@ -import { Trans } from '@lingui/macro' -import dayjs from 'dayjs' -import { rgba } from 'polished' -import React from 'react' -import { ChevronDown } from 'react-feather' -import { Box, Flex, Text } from 'rebass' -import styled from 'styled-components' - -import { ReactComponent as BarChartIcon } from 'assets/svg/bar_chart_icon.svg' -import { ButtonOutlined } from 'components/Button' -import Divider from 'components/Divider' -import useTheme from 'hooks/useTheme' -import AddressRowOnMobile from 'pages/TrueSight/components/AddressRowOnMobile' -import ButtonWithOptions from 'pages/TrueSight/components/ButtonWithOptions' -import CommunityRowOnMobile from 'pages/TrueSight/components/CommunityRowOnMobile' -import Tags from 'pages/TrueSight/components/Tags' -import { TableBodyItemSmallDiff } from 'pages/TrueSight/components/TrendingLayout/index' -import { - FieldName, - FieldValue, - TruncatedText, -} from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { TrueSightFilter } from 'pages/TrueSight/index' -import getFormattedNumLongDiscoveredDetails from 'pages/TrueSight/utils/getFormattedNumLongDiscoveredDetails' -import { ExternalLink } from 'theme' -import { formattedNumLong } from 'utils' - -const StyledTrendingTokenItem = styled(Flex)` - position: relative; - padding: 10px 20px 10.5px; - border-bottom: 1px solid ${({ theme }) => theme.border}; - cursor: pointer; - gap: 16px; - - background: transparent; - - &[data-highlight='true'] { - &, - &:hover { - background: ${({ theme }) => rgba(theme.bg8, 0.12)}; - } - } - - &[data-selected='true'] { - &, - &:hover { - background: ${({ theme }) => theme.tableHeader}; - } - } -` - -interface TrendingTokenItemProps { - isSelected: boolean - tokenData: TrueSightTokenData - onSelect: () => void - setIsOpenChartModal: React.Dispatch> - setFilter: React.Dispatch> - tokenIndex: number -} - -const TrendingTokenItemMobileOnly = ({ - isSelected, - tokenData, - onSelect, - setIsOpenChartModal, - setFilter, - tokenIndex, -}: TrendingTokenItemProps) => { - const theme = useTheme() - - const date = tokenData.discovered_on !== 0 ? dayjs(tokenData.discovered_on * 1000).format('YYYY/MM/DD') : undefined - - const isFoundByTrueSight = tokenData.discovered_on !== 0 - const formattedDetails = getFormattedNumLongDiscoveredDetails(tokenData) - - return ( - - - - - - {tokenIndex} - - - logo - - - {tokenData.name} - - - - {!!date && ( - - {date} - - )} - - - - - - - {isSelected && ( - <> - - setIsOpenChartModal(true)} - > - - - View chart - - - - - - - - - - - Name - - - {tokenData.name} - - - - - - - - Symbol - - {tokenData.symbol} - - - - - - - Tag - - - - - - - - - - Price - - {formattedNumLong(tokenData.price, true)} - - {isFoundByTrueSight && ( - - Since {date} - - {formattedDetails.price} - - {formattedDetails.pricePercent} - - - - )} - - - - - - - - Trading Volume (24H) - - {formattedNumLong(tokenData.trading_volume, true)} - - {isFoundByTrueSight && ( - - Since {date} - - {formattedDetails.tradingVolume} - - {formattedDetails.tradingVolumePercent} - - - - )} - - - - - - - - Market Cap - - - {tokenData.market_cap <= 0 ? '--' : formattedNumLong(tokenData.market_cap, true)} - - - {isFoundByTrueSight && ( - - Since {date} - - {formattedDetails.marketCap} - - {formattedDetails.marketCapPercent} - - - - )} - - - - - - - - Holders - - - {tokenData.number_holders <= 0 ? '--' : formattedNumLong(tokenData.number_holders, false)} - - - - - - - - - Website - - - {tokenData.official_web} ↗ - - - - {Object.keys(tokenData.social_urls).length > 0 && ( - <> - - - - )} - - {tokenData.platforms.size > 0 && ( - <> - - - - )} - - - )} - - ) -} - -export default TrendingTokenItemMobileOnly - -const SubFieldName = styled.div` - color: ${({ theme }) => theme.subText}; - font-size: 12px; - font-style: italic; -` - -const SubFieldValue = styled.div` - color: ${({ theme }) => theme.subText}; - font-size: 12px; - font-style: normal; -` diff --git a/src/pages/TrueSight/components/TrendingLayout/index.tsx b/src/pages/TrueSight/components/TrendingLayout/index.tsx deleted file mode 100644 index 0186cb341d..0000000000 --- a/src/pages/TrueSight/components/TrendingLayout/index.tsx +++ /dev/null @@ -1,443 +0,0 @@ -import { Trans } from '@lingui/macro' -import dayjs from 'dayjs' -import { rgba } from 'polished' -import React, { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react' -import { ChevronDown } from 'react-feather' -import { useMedia } from 'react-use' -import { Box, Flex, Text } from 'rebass' -import styled from 'styled-components' - -import Divider from 'components/Divider' -import WarningIcon from 'components/LiveChart/WarningIcon' -import LocalLoader from 'components/LocalLoader' -import Pagination from 'components/Pagination' -import { TRENDING_ITEM_PER_PAGE } from 'constants/index' -import useTheme from 'hooks/useTheme' -import AddressButton from 'pages/TrueSight/components/AddressButton' -import ButtonWithOptions from 'pages/TrueSight/components/ButtonWithOptions' -import Chart from 'pages/TrueSight/components/Chart' -import CommunityButton, { StyledCommunityButton } from 'pages/TrueSight/components/CommunityButton' -import Tags from 'pages/TrueSight/components/Tags' -import TrendingTokenItemMobileOnly from 'pages/TrueSight/components/TrendingLayout/TrendingTokenItemMobileOnly' -import { TrueSightContainer } from 'pages/TrueSight/components/TrendingSoonLayout' -import MobileChartModal from 'pages/TrueSight/components/TrendingSoonLayout/MobileChartModal' -import { - TagWebsiteCommunityAddressContainer, - WebsiteCommunityAddressContainer, -} from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenDetail' -import { TruncatedText } from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' -import useGetCoinGeckoChartData from 'pages/TrueSight/hooks/useGetCoinGeckoChartData' -import useGetTrendingData from 'pages/TrueSight/hooks/useGetTrendingData' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { TrueSightChartCategory, TrueSightFilter, TrueSightTimeframe } from 'pages/TrueSight/index' -import getFormattedNumLongDiscoveredDetails from 'pages/TrueSight/utils/getFormattedNumLongDiscoveredDetails' -import { ExternalLink } from 'theme' -import { formattedNumLong } from 'utils' - -const TrendingLayout = ({ - filter, - setFilter, -}: { - filter: TrueSightFilter - setFilter: React.Dispatch> -}) => { - const [selectedToken, setSelectedToken] = useState() - const [isOpenChartModal, setIsOpenChartModal] = useState(false) - const [currentPage, setCurrentPage] = useState(1) - - const above1200 = useMedia('(min-width: 1200px)') - const { - data: trendingSoonData, - isLoading: isLoadingTrendingSoonTokens, - error: errorWhenLoadingTrendingSoonData, - } = useGetTrendingData(filter, currentPage, TRENDING_ITEM_PER_PAGE) - const trendingSoonTokens = useMemo(() => trendingSoonData?.tokens ?? [], [trendingSoonData]) - - useEffect(() => { - setCurrentPage(1) - setSelectedToken(undefined) - }, [filter]) - - const [chartTimeframe, setChartTimeframe] = useState(TrueSightTimeframe.ONE_DAY) - const [chartCategory, setChartCategory] = useState(TrueSightChartCategory.TRADING_VOLUME) - const tokenNetwork = useMemo( - () => (selectedToken ? selectedToken.platforms.keys().next().value ?? undefined : undefined), - [selectedToken], - ) - const tokenAddress = useMemo( - () => (selectedToken && tokenNetwork ? selectedToken.platforms.get(tokenNetwork) : undefined), - [selectedToken, tokenNetwork], - ) - const { data: chartData, isLoading: isChartDataLoading } = useGetCoinGeckoChartData( - tokenNetwork, - tokenAddress, - chartTimeframe, - ) - - const theme = useTheme() - - const renderMobileLayout = useCallback( - () => ( - - - # - - Name - - - Discovered on - - - {trendingSoonTokens.map((tokenData, index) => ( - setSelectedToken(prev => (prev?.token_id === tokenData.token_id ? undefined : tokenData))} - setIsOpenChartModal={setIsOpenChartModal} - setFilter={setFilter} - tokenIndex={TRENDING_ITEM_PER_PAGE * (currentPage - 1) + index + 1} - /> - ))} - setCurrentPage(newPage)} - currentPage={currentPage} - totalCount={trendingSoonData?.total_number_tokens ?? 1} - /> - - - ), - [ - chartCategory, - chartData, - chartTimeframe, - currentPage, - isChartDataLoading, - isOpenChartModal, - selectedToken?.token_id, - setFilter, - trendingSoonData?.total_number_tokens, - trendingSoonTokens, - ], - ) - - const TableBody = ({ - tokenData, - selectedToken, - setSelectedToken, - }: { - tokenData: TrueSightTokenData - selectedToken: TrueSightTokenData | undefined - setSelectedToken: Dispatch> - }) => { - const isThisTokenSelected = !!selectedToken && selectedToken.token_id === tokenData.token_id - const isTrueSightToken = !!tokenData.discovered_on - const date = dayjs(tokenData.discovered_on * 1000).format('YYYY/MM/DD') - const formattedDetails = getFormattedNumLongDiscoveredDetails(tokenData) - - return ( - - setSelectedToken(prev => (prev?.token_id === tokenData.token_id ? undefined : tokenData))} - > - - icon - {tokenData.name} - {tokenData.symbol} - - {formattedNumLong(tokenData.price, true)} - {formattedNumLong(tokenData.trading_volume, true)} - - {tokenData.market_cap <= 0 ? '--' : formattedNumLong(tokenData.market_cap, true)} - - - {tokenData.number_holders <= 0 ? '--' : formattedNumLong(tokenData.number_holders, false)} - - - - - - - - - - {isThisTokenSelected && isTrueSightToken && ( - <> - - - We discovered this on {date} - - - - {formattedDetails.pricePercent} - - {formattedDetails.price} - - - - {formattedDetails.tradingVolumePercent} - - {formattedDetails.tradingVolume} - - - - {formattedDetails.marketCapPercent} - - {formattedDetails.marketCap} - - - - - - - )} - {isThisTokenSelected && ( - - - - - - Website ↗ - - - - - - - - - - )} - - ) - } - - const DesktopLayout = () => ( - - - - Name - - - Price - - - Trading Volume (24H) - - - Market Cap - - - Holders - - - Actions - - - {trendingSoonTokens.map(tokenData => ( - - ))} - setCurrentPage(newPage)} - currentPage={currentPage} - totalCount={trendingSoonData?.total_number_tokens ?? 1} - /> - - ) - - return ( - <> - - {isLoadingTrendingSoonTokens ? ( - - ) : errorWhenLoadingTrendingSoonData || trendingSoonTokens.length === 0 ? ( - - - - {trendingSoonTokens.length === 0 && filter.isShowTrueSightOnly ? ( - No token found. Try turn off truesight. - ) : ( - No token found - )} - - - ) : above1200 ? ( - - ) : ( - renderMobileLayout() - )} - - - ) -} - -export default TrendingLayout - -const Btn = styled.button` - outline: none; - border: none; - height: 28px; - width: 28px; - min-width: 28px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - background: ${({ theme }) => rgba(theme.subText, 0.2)}; - color: ${({ theme }) => theme.subText}; - cursor: pointer; - - :hover { - background: ${({ theme }) => rgba(theme.subText, 0.4)}; - } -` - -const TableContainer = styled.div` - border-radius: 8px; -` - -const TableHeader = styled.div` - display: grid; - padding: 18px 16px; - grid-template-columns: 1.5fr 1.25fr 1fr 1fr 1fr 1fr; - background: ${({ theme }) => theme.tableHeader}; - border-bottom: 1px solid ${({ theme }) => theme.border}; - gap: 16px; - border-top-left-radius: 8px; - border-top-right-radius: 8px; -` - -const TableHeaderItem = styled.div<{ align?: string }>` - font-size: 12px; - font-weight: 500; - color: ${({ theme }) => theme.subText}; - text-align: ${({ align }) => align ?? 'left'}; - text-transform: uppercase; -` - -const MobileTableHeader = styled.div` - width: 100%; - display: flex; - align-items: center; - padding: 0 20px; - height: 50px; - background: ${({ theme }) => theme.tableHeader}; - padding-right: 64px; -` - -const MobileTableHeaderItem = styled.div` - display: flex; - align-items: center; - font-size: 12px; - line-height: 14px; - font-weight: 500; - color: ${({ theme }) => theme.subText}; - text-transform: uppercase; - height: 100%; -` - -const TableBodyWithDetailContainer = styled.div<{ isTrueSightToken: boolean; isSelected: boolean }>` - display: flex; - flex-direction: column; - background: ${({ theme, isTrueSightToken, isSelected }) => - isSelected ? theme.tableHeader : isTrueSightToken ? rgba(theme.bg8, 0.12) : theme.background}; - border-bottom: 1px solid ${({ theme }) => theme.border}; -` - -const TableBodyContainer = styled.div<{ noHover?: boolean }>` - display: grid; - padding: 16px 20px; - grid-template-columns: 1.5fr 1.25fr 1fr 1fr 1fr 1fr; - gap: 16px; - cursor: pointer; - - :hover { - background: ${({ theme, noHover }) => (noHover ? 'transparent' : theme.buttonBlack)}; - } -` - -const TableBodyItem = styled.div<{ align?: string }>` - overflow: hidden; - font-size: 14px; - font-weight: 500; - color: ${({ theme }) => theme.subText}; - text-align: ${({ align }) => align ?? 'left'}; - display: flex; - align-items: center; - justify-content: ${({ align }) => (align === 'right' ? 'flex-end' : 'flex-start')}; - gap: 8px; -` - -const TableBodyItemSmall = styled(TableBodyItem)` - font-size: 12px; - font-weight: 400; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: ${({ align }) => (align === 'right' ? 'flex-end' : 'flex-start')}; - gap: 8px; -` - -export const TableBodyItemSmallDiff = styled.div<{ up: boolean }>` - font-size: 10px; - color: ${({ theme, up }) => (up ? theme.apr : theme.red)}; - background: ${({ theme, up }) => (up ? rgba(theme.apr, 0.2) : rgba(theme.red, 0.2))}; - padding: 5px 8px; - border-radius: 24px; -` diff --git a/src/pages/TrueSight/components/TrendingSoonLayout/MobileChartModal.tsx b/src/pages/TrueSight/components/TrendingSoonLayout/MobileChartModal.tsx deleted file mode 100644 index 94fc615650..0000000000 --- a/src/pages/TrueSight/components/TrendingSoonLayout/MobileChartModal.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react' - -import Modal from 'components/Modal' -import Chart from 'pages/TrueSight/components/Chart' -import { FormattedCoinGeckoChartData } from 'pages/TrueSight/hooks/useGetCoinGeckoChartData' -import { TrueSightChartCategory, TrueSightTimeframe } from 'pages/TrueSight/index' - -const MobileChartModal = ({ - isOpen, - setIsOpen, - chartData, - isLoading, - chartCategory, - setChartCategory, - chartTimeframe, - setChartTimeframe, -}: { - isOpen: boolean - setIsOpen: React.Dispatch> - chartData: FormattedCoinGeckoChartData - isLoading: boolean - chartCategory: TrueSightChartCategory - setChartCategory: React.Dispatch> - chartTimeframe: TrueSightTimeframe - setChartTimeframe: React.Dispatch> -}) => { - return ( - setIsOpen(false)} maxWidth={9999}> - - - ) -} - -export default MobileChartModal diff --git a/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenDetail.tsx b/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenDetail.tsx deleted file mode 100644 index e5574fce36..0000000000 --- a/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenDetail.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import { Trans } from '@lingui/macro' -import React, { CSSProperties } from 'react' -import { Flex, Text } from 'rebass' -import styled from 'styled-components' - -import Divider from 'components/Divider' -import AddressButton from 'pages/TrueSight/components/AddressButton' -import ButtonWithOptions from 'pages/TrueSight/components/ButtonWithOptions' -import Chart from 'pages/TrueSight/components/Chart' -import CommunityButton, { StyledCommunityButton } from 'pages/TrueSight/components/CommunityButton' -import Tags from 'pages/TrueSight/components/Tags' -import { FormattedCoinGeckoChartData } from 'pages/TrueSight/hooks/useGetCoinGeckoChartData' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { TrueSightChartCategory, TrueSightFilter, TrueSightTimeframe } from 'pages/TrueSight/index' -import { ExternalLink } from 'theme' -import { formattedNumLong } from 'utils' - -const TrendingSoonTokenDetail = ({ - tokenData, - chartData, - isChartDataLoading, - chartCategory, - setChartCategory, - chartTimeframe, - setChartTimeframe, - setFilter, - style, -}: { - tokenData: TrueSightTokenData - isChartDataLoading: boolean - chartData: FormattedCoinGeckoChartData - chartCategory: TrueSightChartCategory - setChartCategory: React.Dispatch> - chartTimeframe: TrueSightTimeframe - setChartTimeframe: React.Dispatch> - setFilter?: React.Dispatch> - style?: CSSProperties -}) => { - return ( - - - - logo - - {tokenData.name} - - - - - - - - - Website ↗ - - - - - - - - - - - Trading Volume (24H) - - - Market Cap - - - Holders - - - Price - - - {formattedNumLong(tokenData.trading_volume, true)} - - - {tokenData.market_cap <= 0 ? '--' : formattedNumLong(tokenData.market_cap, true)} - - - {tokenData.number_holders <= 0 ? '--' : formattedNumLong(tokenData.number_holders, false)} - - {formattedNumLong(tokenData.price, true)} - - - - ) -} - -const LogoNameSwapContainer = styled(Flex)` - justify-content: space-between; - align-items: center; -` - -const LogoNameContainer = styled(Flex)` - align-items: center; - gap: 8px; -` - -export const TagWebsiteCommunityAddressContainer = styled(Flex)` - justify-content: space-between; - align-items: center; - gap: 16px; -` - -export const WebsiteCommunityAddressContainer = styled(Flex)` - align-items: center; - gap: 8px; -` - -const TokenStatisticsContainer = styled.div` - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: auto auto; - gap: 4px; -` - -const TokenStatisticsFieldName = styled(Text)` - font-weight: 500; - font-size: 12px; - text-transform: uppercase; - text-align: right; -` - -const TokenStatisticsValue = styled(Text)` - font-weight: 400; - font-size: 14px; - color: ${({ theme }) => theme.text}; - text-align: right; -` - -export default TrendingSoonTokenDetail diff --git a/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem.tsx b/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem.tsx deleted file mode 100644 index 655047a613..0000000000 --- a/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem.tsx +++ /dev/null @@ -1,269 +0,0 @@ -import dayjs from 'dayjs' -import { darken, rgba } from 'polished' -import React from 'react' -import { ChevronDown, X } from 'react-feather' -import { useMedia } from 'react-use' -import { Box, Flex, Image, Text } from 'rebass' -import styled from 'styled-components' - -import Bronze from 'assets/svg/bronze_icon.svg' -import Gold from 'assets/svg/gold_icon.svg' -import Silver from 'assets/svg/silver_icon.svg' -import useTheme from 'hooks/useTheme' -import TrendingSoonTokenItemDetailsOnMobile from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItemDetailsOnMobile' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { TrueSightFilter } from 'pages/TrueSight/index' -import { ApplicationModal } from 'state/application/actions' -import { useToggleModal } from 'state/application/hooks' - -const StyledTrendingSoonTokenItem = styled(Flex)` - position: relative; - padding: 0 20px; - height: 56px; - cursor: pointer; - gap: 16px; - - &[data-rank='1'] { - background: linear-gradient( - 90deg, - rgba(255, 204, 102, 0.25) 0%, - rgba(255, 204, 102, 0) 54.69%, - rgba(255, 204, 102, 0) 100% - ); - } - - &[data-rank='2'] { - background: linear-gradient( - 90deg, - rgba(224, 224, 224, 0.25) 0%, - rgba(224, 224, 224, 0) 54.69%, - rgba(224, 224, 224, 0) 100% - ); - } - - &[data-rank='3'] { - background: linear-gradient( - 90deg, - rgba(255, 152, 56, 0.25) 0%, - rgba(255, 152, 56, 0) 54.69%, - rgba(255, 152, 56, 0) 100% - ); - } - - @media (hover: hover) { - &:hover { - background: ${({ theme }) => darken(0.05, theme.background)}; - } - } - - ${({ theme }) => theme.mediaWidth.upToLarge` - padding: 10px 20px 10.5px; - height: auto; - - &[data-selected='true'] { - background: ${({ theme }) => theme.tableHeader}; - @media (hover: hover) { - &:hover { - background: ${({ theme }) => theme.tableHeader}; - } - } - } - `} -` - -const SelectedHighlight = styled.div` - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - background: ${({ theme }) => theme.primary}; - height: 40px; - width: 4px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -` - -export const TruncatedText = styled(Text)` - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -` - -export const FieldName = styled(Text)` - font-size: 12px; - font-weight: 500; - color: ${({ theme }) => theme.subText}; - display: flex; - align-items: center; -` - -export const FieldValue = styled(TruncatedText)` - font-size: 12px; - font-weight: 400; - color: ${({ theme }) => theme.text}; - flex: 1; - margin-left: 16px; - display: flex; - align-items: center; - justify-content: flex-end; -` - -interface TrendingSoonTokenItemProps { - isSelected: boolean - tokenIndex?: number - tokenData: TrueSightTokenData - onSelect?: () => void - setIsOpenChartModal: React.Dispatch> - setFilter?: React.Dispatch> - isShowMedal: boolean -} - -const TrendingSoonTokenItem = ({ - isSelected, - tokenIndex, // tokenIndex === undefined ==> is show in a modal. - tokenData, - onSelect, - setIsOpenChartModal, - setFilter, - isShowMedal, -}: TrendingSoonTokenItemProps) => { - const theme = useTheme() - // const date = dayjs(tokenData.discovered_on * 1000).format('YYYY/MM/DD, HH:mm') - const date = dayjs(tokenData.discovered_on * 1000).format('YYYY/MM/DD') - const above1201 = useMedia('(min-width: 1201px)') - - const toggleTrendingSoonTokenDetailModal = useToggleModal(ApplicationModal.TRENDING_SOON_TOKEN_DETAIL) - - const MedalIndex = () => - isShowMedal && tokenIndex === 1 ? ( - - ) : isShowMedal && tokenIndex === 2 ? ( - - ) : isShowMedal && tokenIndex === 3 ? ( - - ) : tokenIndex !== undefined ? ( - - {tokenIndex} - - ) : null - - if (above1201) { - return ( - - - - logo - - {tokenData.name} - - - {tokenData.symbol} - - - - {date} - - {isSelected && } - - ) - } - - return ( - - - - - - {tokenData.name} - - - {tokenData.name} - - - - - - - {date} - - - - {tokenIndex === undefined ? ( - - - - ) : ( - - - - )} - - {isSelected && ( - - )} - - ) -} - -export default TrendingSoonTokenItem diff --git a/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItemDetailsOnMobile.tsx b/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItemDetailsOnMobile.tsx deleted file mode 100644 index 1fa59ea2a1..0000000000 --- a/src/pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItemDetailsOnMobile.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import { Trans } from '@lingui/macro' -import React from 'react' -import { Flex } from 'rebass' - -import { ReactComponent as BarChartIcon } from 'assets/svg/bar_chart_icon.svg' -import { ButtonOutlined } from 'components/Button' -import Divider from 'components/Divider' -import useTheme from 'hooks/useTheme' -import AddressRowOnMobile from 'pages/TrueSight/components/AddressRowOnMobile' -import ButtonWithOptions from 'pages/TrueSight/components/ButtonWithOptions' -import CommunityRowOnMobile from 'pages/TrueSight/components/CommunityRowOnMobile' -import Tags from 'pages/TrueSight/components/Tags' -import { - FieldName, - FieldValue, - TruncatedText, -} from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { TrueSightFilter } from 'pages/TrueSight/index' -import { ExternalLink } from 'theme' -import { formattedNum } from 'utils' - -const TrendingSoonTokenItemDetailsOnMobile = ({ - tokenData, - setIsOpenChartModal, - setFilter, -}: { - tokenData: TrueSightTokenData - setIsOpenChartModal: React.Dispatch> - setFilter?: React.Dispatch> -}) => { - const theme = useTheme() - - return ( - <> - - setIsOpenChartModal(true)}> - - - View chart - - - - - - - - - - - Name - - - {tokenData.name} - - - - - - - - Symbol - - {tokenData.symbol} - - - - - - - Tag - - - - - - - Price - - {formattedNum(tokenData.price.toString(), true)} - - - - - Trading Volume (24H) - - {formattedNum(tokenData.trading_volume.toString(), true)} - - - - - Market Cap - - - {tokenData.market_cap <= 0 ? '--' : formattedNum(tokenData.market_cap.toString(), true)} - - - - - - Holders - - - {tokenData.number_holders <= 0 ? '--' : formattedNum(tokenData.number_holders.toString(), false)} - - - - - - Website - - - {tokenData.official_web} ↗ - - - - {Object.keys(tokenData.social_urls).length && ( - <> - - - - )} - - {tokenData.platforms.size && ( - <> - - - - )} - - - ) -} - -export default TrendingSoonTokenItemDetailsOnMobile diff --git a/src/pages/TrueSight/components/TrendingSoonLayout/index.tsx b/src/pages/TrueSight/components/TrendingSoonLayout/index.tsx deleted file mode 100644 index aba0e5b367..0000000000 --- a/src/pages/TrueSight/components/TrendingSoonLayout/index.tsx +++ /dev/null @@ -1,335 +0,0 @@ -import { Trans } from '@lingui/macro' -import React, { useEffect, useMemo, useState } from 'react' -import { ArrowDown } from 'react-feather' -import { useLocation, useNavigate } from 'react-router-dom' -import { useMedia } from 'react-use' -import { Box, Flex, Text } from 'rebass' -import styled from 'styled-components' - -import WarningIcon from 'components/LiveChart/WarningIcon' -import LocalLoader from 'components/LocalLoader' -import Pagination from 'components/Pagination' -import { TRENDING_SOON_ITEM_PER_PAGE, TRENDING_SOON_MAX_ITEMS } from 'constants/index' -import useParsedQueryString from 'hooks/useParsedQueryString' -import useTheme from 'hooks/useTheme' -import MobileChartModal from 'pages/TrueSight/components/TrendingSoonLayout/MobileChartModal' -import TrendingSoonTokenDetail from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenDetail' -import TrendingSoonTokenItem from 'pages/TrueSight/components/TrendingSoonLayout/TrendingSoonTokenItem' -import useGetCoinGeckoChartData from 'pages/TrueSight/hooks/useGetCoinGeckoChartData' -import useGetTrendingSoonData, { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { - TrueSightChartCategory, - TrueSightFilter, - TrueSightSortSettings, - TrueSightTimeframe, -} from 'pages/TrueSight/index' - -const TrendingSoonLayout = ({ - filter, - setFilter, - sortSettings, - setSortSettings, -}: { - filter: TrueSightFilter - setFilter: React.Dispatch> - sortSettings: TrueSightSortSettings - setSortSettings: React.Dispatch> -}) => { - const [selectedToken, setSelectedToken] = useState() - const [isOpenChartModal, setIsOpenChartModal] = useState(false) - const [currentPage, setCurrentPage] = useState(1) - const { tab, token_id: selectedTokenIdFromQs } = useParsedQueryString() - const navigate = useNavigate() - const location = useLocation() - - const { - data: trendingSoonData, - isLoading: isLoadingTrendingSoonTokens, - error: errorWhenLoadingTrendingSoonData, - } = useGetTrendingSoonData(filter, TRENDING_SOON_MAX_ITEMS) - const trendingSoonTokens = useMemo(() => trendingSoonData?.tokens ?? [], [trendingSoonData]) - - // token_id in query param - useEffect(() => { - if (selectedTokenIdFromQs && trendingSoonTokens.length) { - const newSelectedTokenData = trendingSoonTokens.find( - tokenData => tokenData.token_id.toString() === selectedTokenIdFromQs, - ) - navigate({ ...location, search: `?tab=${tab}` }, { replace: true }) - setFilter(prev => ({ ...prev, selectedTag: undefined, selectedTokenData: newSelectedTokenData })) - } - }, [navigate, location, selectedTokenIdFromQs, setFilter, tab, trendingSoonTokens]) - - useEffect(() => { - setCurrentPage(1) - }, [filter]) - - const [chartTimeframe, setChartTimeframe] = useState(TrueSightTimeframe.ONE_DAY) - const [chartCategory, setChartCategory] = useState(TrueSightChartCategory.TRADING_VOLUME) - const selectedTokenNetwork = useMemo( - () => (selectedToken ? selectedToken.platforms.keys().next().value ?? undefined : undefined), - [selectedToken], - ) - const selectedTokenAddress = useMemo( - () => (selectedToken && selectedTokenNetwork ? selectedToken.platforms.get(selectedTokenNetwork) : undefined), - [selectedToken, selectedTokenNetwork], - ) - const { data: chartData, isLoading: isChartDataLoading } = useGetCoinGeckoChartData( - selectedTokenNetwork, - selectedTokenAddress, - chartTimeframe, - ) - - const theme = useTheme() - - const sortedPaginatedTrendingSoonTokens = useMemo(() => { - const { sortBy, sortDirection } = sortSettings - const rankComparer = (a: TrueSightTokenData, b: TrueSightTokenData) => (a.rank && b.rank ? a.rank - b.rank : 0) - const nameComparer = (a: TrueSightTokenData, b: TrueSightTokenData) => - a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1 - const discoveredOnComparer = (a: TrueSightTokenData, b: TrueSightTokenData) => a.discovered_on - b.discovered_on - let res = trendingSoonTokens.sort( - sortBy === 'rank' ? rankComparer : sortBy === 'name' ? nameComparer : discoveredOnComparer, - ) - res = sortDirection === 'asc' ? res : res.reverse() - - // Paginating - res = res.slice((currentPage - 1) * TRENDING_SOON_ITEM_PER_PAGE, currentPage * TRENDING_SOON_ITEM_PER_PAGE) - - return res - }, [currentPage, sortSettings, trendingSoonTokens]) - - const above1200 = useMedia('(min-width: 1200px)') - - useEffect(() => { - if (above1200 && sortedPaginatedTrendingSoonTokens.length) setSelectedToken(sortedPaginatedTrendingSoonTokens[0]) - }, [currentPage, above1200, sortedPaginatedTrendingSoonTokens]) - - return ( - <> - - {isLoadingTrendingSoonTokens ? ( - - ) : errorWhenLoadingTrendingSoonData || sortedPaginatedTrendingSoonTokens.length === 0 ? ( - - - - No token found - - - ) : ( - - - - { - setSortSettings(prev => ({ - sortBy: 'rank', - sortDirection: prev.sortBy === 'rank' ? (prev.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc', - })) - setCurrentPage(1) - }} - > -
#
- {sortSettings.sortBy === 'rank' && ( - - )} - - -
{ - setSortSettings(prev => ({ - sortBy: 'name', - sortDirection: prev.sortBy === 'name' ? (prev.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc', - })) - setCurrentPage(1) - }} - > - Name - {sortSettings.sortBy === 'name' && ( - - )} -
- - { - setSortSettings(prev => ({ - sortBy: 'discovered_on', - sortDirection: - prev.sortBy === 'discovered_on' ? (prev.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc', - })) - setCurrentPage(1) - }} - > - Discovered On - {sortSettings.sortBy === 'discovered_on' && ( - - )} - - - - - - {sortedPaginatedTrendingSoonTokens.map((tokenData, index) => ( - - setSelectedToken(prev => - prev?.token_id === tokenData.token_id && !above1200 ? undefined : tokenData, - ) - } - setIsOpenChartModal={setIsOpenChartModal} - setFilter={setFilter} - isShowMedal={sortSettings.sortBy === 'rank' && sortSettings.sortDirection === 'asc'} - /> - ))} - - - {selectedToken && ( - - )} - - - setCurrentPage(newPage)} - currentPage={currentPage} - totalCount={trendingSoonData?.total_number_tokens ?? 1} - /> - - )} - - - - ) -} - -export const TrueSightContainer = styled.div` - background: ${({ theme }) => theme.background}; - border-radius: 20px; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04); - overflow: hidden; - min-height: 668.5px; - - ${({ theme }) => theme.mediaWidth.upToLarge` - min-height: unset; - `} - - ${({ theme }) => theme.mediaWidth.upToMedium` - border-top-left-radius: unset; - border-top-right-radius: unset; - `} -` - -const TrendingSoonTokenListHeaderWrapper = styled.div` - width: 100%; - background: ${({ theme }) => theme.tableHeader}; -` - -const TrendingSoonTokenListHeader = styled.div` - width: 40%; - display: flex; - align-items: center; - padding: 0 20px; - height: 50px; - - ${({ theme }) => theme.mediaWidth.upToLarge` - width: 100%; - padding-right: 64px; - `} -` - -const TrendingSoonTokenListHeaderItem = styled.div` - display: flex; - align-items: center; - font-size: 12px; - line-height: 14px; - font-weight: 500; - color: ${({ theme }) => theme.subText}; - text-transform: uppercase; - height: 100%; -` - -const TrendingSoonTokenListBodyAndDetailContainer = styled(Flex)` - min-height: 560px; - - ${({ theme }) => theme.mediaWidth.upToLarge` - min-height: unset; - `} -` - -const TrendingSoonTokenListBody = styled.div` - width: 40%; - border-top: 1px solid ${({ theme }) => theme.border}; - border-bottom: 1px solid ${({ theme }) => theme.border}; - - & > *:not(:nth-child(10)) { - border-bottom: 1px solid ${({ theme }) => theme.border}; - } - - ${({ theme }) => theme.mediaWidth.upToLarge` - flex: 1; - border-top: none; - `} -` - -const TrendingSoonTokenDetailContainer = styled.div` - width: 60%; - border-top: 1px solid ${({ theme }) => theme.border}; - border-left: 1px solid ${({ theme }) => theme.border}; - border-bottom: 1px solid ${({ theme }) => theme.border}; - padding: 20px; - - ${({ theme }) => theme.mediaWidth.upToLarge` - display: none; - `} -` - -export default TrendingSoonLayout diff --git a/src/pages/TrueSight/hooks/useGetCoinGeckoChartData.ts b/src/pages/TrueSight/hooks/useGetCoinGeckoChartData.ts deleted file mode 100644 index 4409de963f..0000000000 --- a/src/pages/TrueSight/hooks/useGetCoinGeckoChartData.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { ChainId } from '@kyberswap/ks-sdk-core' -import { useMemo, useRef } from 'react' -import useSWRImmutable from 'swr/immutable' - -import { COINGECKO_API_URL } from 'constants/index' -import { NETWORKS_INFO, TRUESIGHT_NETWORK_TO_CHAINID } from 'constants/networks' -import { TrueSightTimeframe } from 'pages/TrueSight/index' - -export interface CoinGeckoChartData { - prices: [number, number][] - market_caps: [number, number][] - total_volumes: [number, number][] -} - -export interface FormattedCoinGeckoChartData { - prices: { time: number; value: string }[] - marketCaps: { time: number; value: string }[] - totalVolumes: { time: number; value: string }[] -} - -const initialCoinGeckoChartData = { prices: [], market_caps: [], total_volumes: [] } - -function formatCoinGeckoChartData(data: CoinGeckoChartData): FormattedCoinGeckoChartData { - return { - prices: data.prices.map(item => ({ time: item[0] ?? 0, value: item[1].toString() ?? 0 })), - marketCaps: data.market_caps.map(item => ({ time: item[0] ?? 0, value: item[1].toString() ?? 0 })), - totalVolumes: data.total_volumes.map(item => ({ time: item[0] ?? 0, value: item[1].toString() ?? 0 })), - } -} - -const FETCHING_COINGECKO_CHART_DATA_OFFSET = 2000 -const FETCHING_COINGECKO_CHART_DATA_ERROR_RETRY_INTERVAL = FETCHING_COINGECKO_CHART_DATA_OFFSET / 2 - -export default function useGetCoinGeckoChartData( - tokenNetwork: string | undefined, - tokenAddress: string | undefined, - timeframe: TrueSightTimeframe, -) { - const latestRequestingTime = useRef(0) - const controller = useRef(new AbortController()) - - const { - data, - isValidating: isLoading, - error, - } = useSWRImmutable( - ['useGetCoinGeckoChartData', timeframe, tokenAddress ?? '', tokenNetwork ?? ''], - async () => { - if (tokenNetwork && tokenAddress) { - try { - controller.current.abort() - controller.current = new AbortController() - const to = Math.floor(Date.now() / 1000) - const from = to - (timeframe === TrueSightTimeframe.ONE_DAY ? 24 * 3600 : 24 * 3600 * 7) - const chainId = TRUESIGHT_NETWORK_TO_CHAINID[tokenNetwork] || ChainId.MAINNET - const coinGeckoNetworkId = NETWORKS_INFO[chainId].coingeckoNetworkId - let url = `${COINGECKO_API_URL}/coins/${coinGeckoNetworkId}/contract/${tokenAddress.toLowerCase()}/market_chart/range?vs_currency=usd&from=${from}&to=${to}` - if (tokenAddress === 'bnb') { - url = `${COINGECKO_API_URL}/coins/binancecoin/market_chart/range?vs_currency=usd&from=${from}&to=${to}` - } else if (tokenNetwork === 'bsc' && tokenAddress === '0x1Fa4a73a3F0133f0025378af00236f3aBDEE5D63') { - // NEAR - url = `${COINGECKO_API_URL}/coins/near/market_chart/range?vs_currency=usd&from=${from}&to=${to}` - } else if (tokenNetwork === 'eth' && tokenAddress === '0x7c8161545717a334f3196e765d9713f8042EF338') { - // CAKE - url = `${COINGECKO_API_URL}/coins/binance-smart-chain/contract/0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82/market_chart/range?vs_currency=usd&from=${from}&to=${to}` - } - if (Date.now() - latestRequestingTime.current < FETCHING_COINGECKO_CHART_DATA_OFFSET) { - // Too Many Request - throw new Error('429') - } - latestRequestingTime.current = Date.now() - const response = await fetch(url, { signal: controller.current.signal }) - if (response.ok) { - const result = await response.json() - return result - } - } catch (err) { - // Too Many Request - throw new Error('429') - } - } - return initialCoinGeckoChartData - }, - { - errorRetryInterval: FETCHING_COINGECKO_CHART_DATA_ERROR_RETRY_INTERVAL, - errorRetryCount: 60 / FETCHING_COINGECKO_CHART_DATA_ERROR_RETRY_INTERVAL, // CoinGecko might block upto 1 minute - }, - ) - - return useMemo(() => { - const formattedData = formatCoinGeckoChartData(data ?? initialCoinGeckoChartData) - - // If the error is Too Many Request, show loading and then retry in intervals until success - return { isLoading: error?.message === '429' ? true : isLoading, data: formattedData } - }, [data, isLoading, error]) -} diff --git a/src/pages/TrueSight/hooks/useGetTagsForSearchBox.ts b/src/pages/TrueSight/hooks/useGetTagsForSearchBox.ts deleted file mode 100644 index 549161cdf6..0000000000 --- a/src/pages/TrueSight/hooks/useGetTagsForSearchBox.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { useEffect, useMemo, useState } from 'react' - -import { TRUESIGHT_API } from 'constants/env' - -export default function useGetTagsForSearchBox(searchText: string) { - const [data, setData] = useState([]) - const [isLoading, setIsLoading] = useState(false) - const [error, setError] = useState() - - useEffect(() => { - const fetchData = async () => { - if (searchText) { - try { - const url = TRUESIGHT_API + '/api/v1/tags?search=' + searchText - setError(undefined) - setIsLoading(true) - const response = await fetch(url) - if (response.ok) { - const json = await response.json() - const rawResult = json.data - setData(rawResult ?? []) - } - setIsLoading(false) - } catch (err) { - console.error(err) - setError(err) - setIsLoading(false) - } - } - } - - fetchData() - }, [searchText]) - - return useMemo(() => ({ isLoading, data, error }), [data, isLoading, error]) -} diff --git a/src/pages/TrueSight/hooks/useGetTokensForSearchBox.ts b/src/pages/TrueSight/hooks/useGetTokensForSearchBox.ts deleted file mode 100644 index b5026625cb..0000000000 --- a/src/pages/TrueSight/hooks/useGetTokensForSearchBox.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { useEffect, useMemo, useState } from 'react' - -import { TRUESIGHT_API } from 'constants/env' -import useParsedQueryString from 'hooks/useParsedQueryString' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { TrueSightTabs, TrueSightTimeframe } from 'pages/TrueSight/index' - -export default function useGetTokensForSearchBox( - searchText: string, - timeframe: TrueSightTimeframe, - isShowTrueSightOnly: boolean, -) { - const [data, setData] = useState([]) - const [isLoading, setIsLoading] = useState(false) - const [error, setError] = useState() - - const { tab } = useParsedQueryString<{ tab: string }>() - - useEffect(() => { - const fetchData = async () => { - if (searchText && tab) { - try { - const timeframeStr = timeframe === TrueSightTimeframe.ONE_DAY ? '24h' : '7d' - const url = `${TRUESIGHT_API}/api/v1/${ - tab === TrueSightTabs.TRENDING_SOON ? 'trending-soon' : 'trending' - }?timeframe=${timeframeStr}&page_number=${0}&page_size=${5}&search_token_name=${searchText}` - setError(undefined) - setIsLoading(true) - const response = await fetch(url) - if (response.ok) { - const json = await response.json() - const rawResult = json.data - rawResult.tokens = isShowTrueSightOnly - ? rawResult.tokens.filter((token: TrueSightTokenData) => token.discovered_on > 0) - : rawResult.tokens - setData(rawResult.tokens ?? []) - } - setIsLoading(false) - } catch (err) { - console.error(err) - setError(err) - setIsLoading(false) - } - } - } - - fetchData() - }, [isShowTrueSightOnly, searchText, tab, timeframe]) - - return useMemo(() => ({ isLoading, data, error }), [data, isLoading, error]) -} diff --git a/src/pages/TrueSight/hooks/useGetTrendingData.ts b/src/pages/TrueSight/hooks/useGetTrendingData.ts deleted file mode 100644 index 8f7ca84be3..0000000000 --- a/src/pages/TrueSight/hooks/useGetTrendingData.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { useEffect, useMemo, useState } from 'react' - -import { TRUESIGHT_API } from 'constants/env' -import { TRENDING_SOON_SUPPORTED_NETWORKS } from 'constants/networks' -import { TrueSightTokenResponse } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { TrueSightFilter, TrueSightTimeframe } from 'pages/TrueSight/index' - -export default function useGetTrendingData(filter: TrueSightFilter, currentPage: number, itemPerPage: number) { - const [isLoading, setIsLoading] = useState(false) - const [error, setError] = useState() - const [data, setData] = useState() - - useEffect(() => { - const fetchData = async () => { - try { - const timeframe = filter.timeframe === TrueSightTimeframe.ONE_DAY ? '24h' : '7d' - const url = `${TRUESIGHT_API}/api/v1/trending?timeframe=${timeframe}&page_number=${ - filter.isShowTrueSightOnly ? 0 : currentPage - 1 - }&page_size=${filter.isShowTrueSightOnly ? 9999 : itemPerPage}&search_token_id=${ - filter.selectedTokenData?.token_id ?? '' - }&search_token_tag=${filter.selectedTag ?? ''}` - setError(undefined) - setIsLoading(true) - const response = await fetch(url) - if (response.ok) { - const json = await response.json() - const rawResult: TrueSightTokenResponse = json.data - - let result: TrueSightTokenResponse - if (filter.isShowTrueSightOnly) { - const trueSightTokens = rawResult.tokens.filter(token => token.discovered_on > 0) - const start = (currentPage - 1) * itemPerPage - const end = currentPage * itemPerPage - result = { - total_number_tokens: trueSightTokens.length, - tokens: trueSightTokens.slice(start, end), - } - } else { - result = rawResult - } - - // Sort platforms - result.tokens = result.tokens.map(token => { - const priorityNetworks = Object.keys(TRENDING_SOON_SUPPORTED_NETWORKS) - const platforms = new Map() - for (let i = 0; i < priorityNetworks.length; i++) { - const network = priorityNetworks[i] - const address = (token.platforms as unknown as { [p: string]: string })[network] - if (address) { - platforms.set(network, address) - } - } - return { - ...token, - platforms, - } - }) - - // Filter network in frontend - if (filter.selectedNetwork) { - const selectedNetworkKey = Object.keys(TRENDING_SOON_SUPPORTED_NETWORKS).find( - (key: string) => TRENDING_SOON_SUPPORTED_NETWORKS[key] === filter.selectedNetwork, - ) - const filteredTokens = result.tokens.filter(tokenData => - tokenData.present_on_chains.includes(selectedNetworkKey as string), - ) - result = { - total_number_tokens: filteredTokens.length, - tokens: filteredTokens, - } - } - setData(result) - } - setIsLoading(false) - } catch (err) { - console.error(err) - setError(err) - setIsLoading(false) - } - } - - fetchData() - }, [currentPage, filter, itemPerPage]) - - return useMemo(() => ({ isLoading, data, error }), [data, isLoading, error]) -} diff --git a/src/pages/TrueSight/hooks/useGetTrendingSoonData.ts b/src/pages/TrueSight/hooks/useGetTrendingSoonData.ts deleted file mode 100644 index 93afbcc71a..0000000000 --- a/src/pages/TrueSight/hooks/useGetTrendingSoonData.ts +++ /dev/null @@ -1,101 +0,0 @@ -import useSWR from 'swr' - -import { TRUESIGHT_API } from 'constants/env' -import { TRENDING_SOON_SUPPORTED_NETWORKS } from 'constants/networks' -import { TrueSightFilter, TrueSightTimeframe } from 'pages/TrueSight/index' - -export interface TrueSightTokenData { - token_id: number - id_of_sources: { - CoinGecko: string - CoinMarketCap: string - } - order: number - name: string - symbol: string - rank: number | undefined // Trending soon only - - // a Map keeps the order of keys as we add them - // a regular object doesn't - platforms: Map - present_on_chains: string[] - predicted_date: number | undefined // Trending soon only - market_cap: number - number_holders: number - trading_volume: number - price: number - social_urls: { - [p: string]: string - } - tags: string[] | null - discovered_on: number - logo_url: string - official_web: string - price_change_percentage_24h: number - discovered_details: - | { - price_discovered: number - trading_volume_discovered: number - market_cap_discovered: number - number_holders_discovered: number - } - | undefined // Trending only -} - -export interface TrueSightTokenResponse { - total_number_tokens: number - tokens: TrueSightTokenData[] -} - -export default function useGetTrendingSoonData(filter: TrueSightFilter, maxItems: number) { - const { data, error } = useSWR( - `${TRUESIGHT_API}/api/v1/trending-soon?timeframe=${ - filter.timeframe === TrueSightTimeframe.ONE_DAY ? '24h' : '7d' - }&page_number=0&page_size=${maxItems}&search_token_id=${ - filter.selectedTokenData?.token_id ?? '' - }&search_token_tag=${filter.selectedTag ?? ''}`, - async (url: string) => { - const response = await fetch(url) - if (response.ok) { - const json = await response.json() - let result: TrueSightTokenResponse = json.data - - // Sort platforms - result.tokens = result.tokens.map(token => { - const priorityNetworks = Object.keys(TRENDING_SOON_SUPPORTED_NETWORKS) - const platforms = new Map() - for (let i = 0; i < priorityNetworks.length; i++) { - const network = priorityNetworks[i] - const address = (token.platforms as unknown as { [p: string]: string })[network] - if (address) { - platforms.set(network, address) - } - } - return { - ...token, - platforms, - } - }) - - // Filter network in frontend - if (filter.selectedNetwork) { - const selectedNetworkKey = Object.keys(TRENDING_SOON_SUPPORTED_NETWORKS).find( - (key: string) => TRENDING_SOON_SUPPORTED_NETWORKS[key] === filter.selectedNetwork, - ) - const filteredTokens = result.tokens.filter(tokenData => - tokenData.present_on_chains.includes(selectedNetworkKey as string), - ) - result = { - total_number_tokens: filteredTokens.length, - tokens: filteredTokens, - } - } - return result - } else { - throw Error(response.statusText) - } - }, - ) - - return { isLoading: !data && !error, data, error } -} diff --git a/src/pages/TrueSight/hooks/useGetTrendingSoonTokenId.ts b/src/pages/TrueSight/hooks/useGetTrendingSoonTokenId.ts deleted file mode 100644 index d037e72cbf..0000000000 --- a/src/pages/TrueSight/hooks/useGetTrendingSoonTokenId.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Token } from '@kyberswap/ks-sdk-core' -import useSWR from 'swr' - -import { TRUESIGHT_API } from 'constants/env' -import { TRENDING_SOON_MAX_ITEMS } from 'constants/index' -import { TrueSightTokenResponse } from 'pages/TrueSight/hooks/useGetTrendingSoonData' - -export default function useGetTrendingSoonTokenId(token?: Token): number | undefined { - const { data: tokenId } = useSWR( - token && - `${TRUESIGHT_API}/api/v1/trending-soon?timeframe=24h&page_number=0&page_size=${TRENDING_SOON_MAX_ITEMS}&search_token_address=${token.address}`, - async (url: string) => { - try { - const responses = await Promise.all([fetch(url)]) - for (let i = 0; i < responses.length; i++) { - const response = responses[i] - if (response.ok) { - const { data }: { data: TrueSightTokenResponse } = await response.json() - if (data.tokens.length) { - return data.tokens[0].token_id - } - } - } - } catch (error) { - throw error - } - return undefined - }, - ) - - return tokenId -} diff --git a/src/pages/TrueSight/index.tsx b/src/pages/TrueSight/index.tsx deleted file mode 100644 index 9a6e19da6b..0000000000 --- a/src/pages/TrueSight/index.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { ChainId } from '@kyberswap/ks-sdk-core' -import { Trans } from '@lingui/macro' -import { useEffect, useState } from 'react' -import { useNavigate } from 'react-router-dom' -import { useMedia } from 'react-use' -import { Flex, Text } from 'rebass' - -import SubscribeNotificationButton from 'components/SubscribeButton' -import { MIXPANEL_TYPE } from 'hooks/useMixpanel' -import useParsedQueryString from 'hooks/useParsedQueryString' -import useTheme from 'hooks/useTheme' -import TrendingHero from 'pages/TrueSight/TrendingHero' -import TrendingSoonHero from 'pages/TrueSight/TrendingSoonHero' -import TrueSightTab from 'pages/TrueSight/TrueSightTab' -import FilterBar from 'pages/TrueSight/components/FilterBar' -import TrendingLayout from 'pages/TrueSight/components/TrendingLayout' -import TrendingSoonLayout from 'pages/TrueSight/components/TrendingSoonLayout' -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { TrueSightPageWrapper } from 'pages/TrueSight/styled' - -export enum TrueSightTabs { - TRENDING_SOON = 'trending_soon', - TRENDING = 'trending', -} - -export enum TrueSightChartCategory { - TRADING_VOLUME, - PRICE, -} - -export enum TrueSightTimeframe { - ONE_DAY = '1D', - ONE_WEEK = '7D', -} - -export interface TrueSightFilter { - isShowTrueSightOnly: boolean - timeframe: TrueSightTimeframe - selectedTag: string | undefined - selectedTokenData: TrueSightTokenData | undefined - selectedNetwork: ChainId | undefined -} - -export interface TrueSightSortSettings { - sortBy: 'rank' | 'name' | 'discovered_on' - sortDirection: 'asc' | 'desc' -} - -export default function TrueSight() { - const navigate = useNavigate() - const { tab } = useParsedQueryString() - const [activeTab, setActiveTab] = useState() - - const [filter, setFilter] = useState({ - isShowTrueSightOnly: false, - timeframe: TrueSightTimeframe.ONE_DAY, - selectedTag: undefined, - selectedTokenData: undefined, - selectedNetwork: undefined, - }) - const [sortSettings, setSortSettings] = useState({ sortBy: 'rank', sortDirection: 'asc' }) - - useEffect(() => { - if (tab === undefined) { - navigate({ search: '?tab=' + TrueSightTabs.TRENDING_SOON }, { replace: true }) - } else { - setActiveTab(tab as TrueSightTabs) - setFilter({ - isShowTrueSightOnly: false, - timeframe: TrueSightTimeframe.ONE_DAY, - selectedTag: undefined, - selectedTokenData: undefined, - selectedNetwork: undefined, - }) - setSortSettings({ sortBy: 'rank', sortDirection: 'asc' }) - } - }, [navigate, tab]) - - const theme = useTheme() - - const upTo992 = useMedia('(max-width: 992px)') - - const subscribeContent = ( - - - Tired of missing out on tokens that could be Trending Soon? -
- Subscribe now to receive email notifications! - - - - ) - - return ( - - - - - {!upTo992 && subscribeContent} - - - {activeTab === TrueSightTabs.TRENDING_SOON && ( - <> -
- - {upTo992 && subscribeContent} -
- - - - - - )} - {activeTab === TrueSightTabs.TRENDING && ( - <> -
- -
- - - - - - )} - - ) -} diff --git a/src/pages/TrueSight/styled.tsx b/src/pages/TrueSight/styled.tsx deleted file mode 100644 index 1a3324ffcf..0000000000 --- a/src/pages/TrueSight/styled.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { Text } from 'rebass' -import styled from 'styled-components' - -export const TrueSightPageWrapper = styled.div` - display: flex; - flex-direction: column; - gap: 24px; - padding: 32px 24px 100px; - width: 100%; - max-width: 1500px; - - ${({ theme }) => theme.mediaWidth.upToSmall` - padding: 24px 16px 100px; - `} -` - -export const TabContainer = styled.div` - display: flex; - align-items: center; -` - -export const TabItem = styled.div<{ active: boolean }>` - font-size: 24px; - font-weight: 500; - display: flex; - align-items: center; - gap: 8px; - color: ${({ theme, active }) => (active ? theme.primary : theme.subText)}; - cursor: pointer; - - ${({ theme }) => theme.mediaWidth.upToExtraSmall` - font-size: 20px; - `} -` - -export const TabDivider = styled.div` - font-size: 24px; - font-weight: 500; - color: ${({ theme }) => theme.subText}; - margin: 0 20px; - - ${({ theme }) => theme.mediaWidth.upToExtraSmall` - font-size: 20px; - margin: 0 12px; - `} -` - -export const TrueSightFilterBarLayout = styled.div` - display: flex; - justify-content: space-between; - align-items: center; -` - -export const TrueSightFilterBarSection = styled.div` - display: flex; - align-items: center; -` - -export const TrueSightFilterBarLayoutMobile = styled.div` - display: flex; - flex-direction: column; - gap: 16px; - position: relative; -` - -export const OptionsContainer = styled.div` - display: flex; - position: absolute; - bottom: -6px; - right: 0; - border-radius: 16px; - flex-direction: column; - background: ${({ theme }) => theme.tableHeader}; - overflow: hidden; - z-index: 9999; - width: 100%; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - left: 50%; - transform: translate(-50%, 100%); - min-width: max-content; - - & > * { - cursor: pointer; - padding: 12px; - - &:hover { - background: ${({ theme }) => theme.background}; - } - } - - & div { - min-width: max-content !important; - } - - .no-hover-effect { - cursor: default; - &:hover { - background: inherit; - } - } - - .no-hover-effect-divider { - &:hover { - background: ${({ theme }) => theme.border}; - } - } -` - -export const TextTooltip = styled(Text)<{ color: string }>` - position: relative; - cursor: pointer; - - ::after { - content: ''; - position: absolute; - bottom: -2px; - left: 50%; - transform: translateX(-50%); - width: calc(100% - 2px); - height: 0; - border-bottom: ${({ color }) => `1px dashed ${color}`}; - } -` diff --git a/src/pages/TrueSight/utils/getFormattedNumLongDiscoveredDetails.ts b/src/pages/TrueSight/utils/getFormattedNumLongDiscoveredDetails.ts deleted file mode 100644 index 2d91b5a143..0000000000 --- a/src/pages/TrueSight/utils/getFormattedNumLongDiscoveredDetails.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { TrueSightTokenData } from 'pages/TrueSight/hooks/useGetTrendingSoonData' -import { formattedNumLong } from 'utils' - -export default function getFormattedNumLongDiscoveredDetails(tokenData: TrueSightTokenData): { - price: string - pricePercent: string - tradingVolume: string - tradingVolumePercent: string - marketCap: string - marketCapPercent: string -} { - if (tokenData.discovered_details === undefined) - return { - price: '', - pricePercent: '', - tradingVolume: '', - tradingVolumePercent: '', - marketCap: '', - marketCapPercent: '', - } - const { price, trading_volume, market_cap, discovered_details } = tokenData - const { price_discovered, trading_volume_discovered, market_cap_discovered } = discovered_details - return { - price: price_discovered <= 0 ? '--' : formattedNumLong(price_discovered, true), - pricePercent: - price <= 0 || price_discovered <= 0 - ? '--' - : formattedNumLong((price / price_discovered) * 100 - 100, false) + '%', - tradingVolume: trading_volume_discovered <= 0 ? '--' : formattedNumLong(trading_volume_discovered, true), - tradingVolumePercent: - trading_volume <= 0 || trading_volume_discovered <= 0 - ? '--' - : formattedNumLong((trading_volume / trading_volume_discovered) * 100 - 100, false) + '%', - marketCap: market_cap_discovered <= 0 ? '--' : formattedNumLong(market_cap_discovered, true), - marketCapPercent: - market_cap <= 0 || market_cap_discovered <= 0 - ? '--' - : formattedNumLong((market_cap / market_cap_discovered) * 100 - 100, false) + '%', - } -} diff --git a/src/pages/TrueSightV2/components/NetworkSelect.tsx b/src/pages/TrueSightV2/components/NetworkSelect.tsx index 7954ddc664..364fd54517 100644 --- a/src/pages/TrueSightV2/components/NetworkSelect.tsx +++ b/src/pages/TrueSightV2/components/NetworkSelect.tsx @@ -6,11 +6,11 @@ import { Flex, Image, Text } from 'rebass' import styled from 'styled-components' import { ReactComponent as ChevronDown } from 'assets/svg/down.svg' +import { OptionsContainer } from 'components' import Kyber from 'components/Icons/Kyber' import { NETWORKS_INFO } from 'constants/networks' import { useOnClickOutside } from 'hooks/useOnClickOutside' import useTheme from 'hooks/useTheme' -import { OptionsContainer } from 'pages/TrueSight/styled' import { SUPPORTED_NETWORK_KYBERAI } from '../constants' diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx index a5211a25bc..089a2692fe 100644 --- a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx +++ b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx @@ -1,8 +1,7 @@ -import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react' +import { createApi } from '@reduxjs/toolkit/dist/query/react' import baseQueryOauth from 'services/baseQueryOauth' -import { BFF_API, ENV_LEVEL } from 'constants/env' -import { ENV_TYPE } from 'constants/type' +import { BFF_API } from 'constants/env' import { ILiquidCEX, @@ -22,12 +21,9 @@ import { const kyberAIApi = createApi({ reducerPath: 'kyberAIApi', - baseQuery: - ENV_LEVEL === ENV_TYPE.LOCAL - ? fetchBaseQuery({ baseUrl: `https://truesight-v2.kyberswap.com/truesight/api/v2` }) - : baseQueryOauth({ - baseUrl: `${BFF_API}/v1/truesight`, - }), + baseQuery: baseQueryOauth({ + baseUrl: `${BFF_API}/v1/truesight`, + }), tagTypes: ['tokenOverview', 'tokenList', 'myWatchList'], endpoints: builder => ({ //1. diff --git a/src/state/application/actions.ts b/src/state/application/actions.ts index d1d8499632..8fe9a9e8a5 100644 --- a/src/state/application/actions.ts +++ b/src/state/application/actions.ts @@ -24,7 +24,6 @@ export enum ApplicationModal { SHARE, TRENDING_SOON_SORTING, - TRUESIGHT_NETWORK, TRENDING_SOON_TOKEN_DETAIL, COMMUNITY, CONTRACT_ADDRESS, diff --git a/src/state/application/hooks.ts b/src/state/application/hooks.ts index a2ebe1f763..540ed4e7c4 100644 --- a/src/state/application/hooks.ts +++ b/src/state/application/hooks.ts @@ -118,10 +118,6 @@ export function useRegisterCampaignSuccessModalToggle(): () => void { return useToggleModal(ApplicationModal.REGISTER_CAMPAIGN_SUCCESS) } -export function useTrueSightNetworkModalToggle(): () => void { - return useToggleModal(ApplicationModal.TRUESIGHT_NETWORK) -} - export function useNotificationModalToggle(): () => void { return useToggleModal(ApplicationModal.NOTIFICATION_SUBSCRIPTION) } diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index bcbc4c38ea..6b1201a477 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -3,11 +3,9 @@ import { useCallback, useMemo } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useGetParticipantInfoQuery } from 'services/kyberAISubscription' -import { ENV_LEVEL } from 'constants/env' import { TERM_FILES_PATH } from 'constants/index' import { SupportedLocale } from 'constants/locales' import { PINNED_PAIRS } from 'constants/tokens' -import { ENV_TYPE } from 'constants/type' import { useActiveWeb3React } from 'hooks' import { useAllTokens } from 'hooks/Tokens' import { @@ -527,9 +525,6 @@ export const useIsWhiteListKyberAI = () => { }) const participantInfo = isError ? participantDefault : rawData - if (ENV_LEVEL === ENV_TYPE.LOCAL) { - return { loading: false, isWhiteList: true, isWaitList: true } - } return { loading: isFetching || pendingAuthentication, isWhiteList: