Adapt with new asset api

src/components/KyberAITokenBanner/index.tsx

@@ -22,7 +22,7 @@ import useTheme from 'hooks/useTheme'
 import KyberScoreMeter from 'pages/TrueSightV2/components/KyberScoreMeter'
 import { NETWORK_TO_CHAINID } from 'pages/TrueSightV2/constants'
 import { SUPPORTED_NETWORK_KYBERAI } from 'pages/TrueSightV2/constants/index'
-import { useTokenDetailQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
+import { useTokenOverviewQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
 import { calculateValueToColor } from 'pages/TrueSightV2/utils'
 import { useIsWhiteListKyberAI } from 'state/user/hooks'
 import { MEDIA_WIDTHS } from 'theme'
@@ -47,17 +47,17 @@ const KyberAITokenBanner = ({
 
   const { isStableCoin } = useStableCoins(chainId)
 
-  const { data: tokenInputOverview } = useTokenDetailQuery(
+  const { data: tokenInputOverview } = useTokenOverviewQuery(
     { address: token0?.address, chain },
     { skip: !token0?.address || !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
   )
 
-  const { data: tokenOutputOverview } = useTokenDetailQuery(
+  const { data: tokenOutputOverview } = useTokenOverviewQuery(
     { address: token1?.address, chain },
     { skip: !token1?.address || !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
   )
 
-  const { data: tokenNativeOverview } = useTokenDetailQuery(
+  const { data: tokenNativeOverview } = useTokenOverviewQuery(
     { address: NativeCurrencies[chainId].wrapped.address, chain },
     { skip: !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
   )

src/pages/App.tsx

@@ -390,7 +390,7 @@ export default function App() {
                       }
                     />
                     <Route
-                      path={`${APP_PATHS.KYBERAI_EXPLORE}/:chain/:address`}
+                      path={`${APP_PATHS.KYBERAI_EXPLORE}/:assetId`}
                       element={
                         <ProtectedRouteKyberAI redirectUrl={APP_PATHS.KYBERAI_ABOUT}>
                           <KyberAIExplore />

src/pages/ProAmmPools/KyberAIModalInPool.tsx

@@ -19,7 +19,7 @@ import useTheme from 'hooks/useTheme'
 import KyberScoreMeter from 'pages/TrueSightV2/components/KyberScoreMeter'
 import SimpleTooltip from 'pages/TrueSightV2/components/SimpleTooltip'
 import { SUPPORTED_NETWORK_KYBERAI } from 'pages/TrueSightV2/constants/index'
-import { useTokenDetailQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
+import { useTokenOverviewQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
 import { calculateValueToColor, formatTokenPrice, navigateToSwapPage } from 'pages/TrueSightV2/utils'
 import { useIsWhiteListKyberAI } from 'state/user/hooks'
 
@@ -99,11 +99,11 @@ const KyberAIModalInPool = ({ currency0, currency1 }: { currency0?: Currency; cu
   const [tab, setTab] = useState<TokenTabType>(TokenTabType.First)
   const [openTruesightModal, setOpenTruesightModal] = useState(false)
 
-  const { data: token0Overview } = useTokenDetailQuery(
+  const { data: token0Overview } = useTokenOverviewQuery(
     { address: currency0?.wrapped?.address, chain: SUPPORTED_NETWORK_KYBERAI[chainId] },
     { skip: !currency0?.wrapped?.address && !isWhiteList, refetchOnMountOrArgChange: true },
   )
-  const { data: token1Overview } = useTokenDetailQuery(
+  const { data: token1Overview } = useTokenOverviewQuery(
     { address: currency1?.wrapped?.address, chain: SUPPORTED_NETWORK_KYBERAI[chainId] },
     { skip: !currency1?.wrapped?.address && !isWhiteList, refetchOnMountOrArgChange: true },
   )

src/pages/TrueSightV2/components/CexRekt.tsx

@@ -27,11 +27,14 @@ const Card = styled.div`
 export default function CexRekt() {
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
   const { address, chain } = useParams()
-  const { data } = useCexesLiquidationQuery({
-    tokenAddress: address,
-    chartSize: '1m',
-    chain,
-  })
+  const { data } = useCexesLiquidationQuery(
+    {
+      tokenAddress: address,
+      chartSize: '1m',
+      chain,
+    },
+    { skip: !chain || !address },
+  )
 
   return (
     <>

src/pages/TrueSightV2/components/DisplaySettings.tsx

@@ -19,7 +19,7 @@ import { ApplicationModal } from 'state/application/actions'
 import { useToggleModal } from 'state/application/hooks'
 import { useTokenAnalysisSettings, useUpdateTokenAnalysisSettings } from 'state/user/hooks'
 
-import useKyberAITokenOverview from '../hooks/useKyberAITokenOverview'
+import useKyberAIAssetOverview from '../hooks/useKyberAIAssetOverview'
 import { HeaderButton } from '../pages/SingleToken'
 import { DiscoverTokenTab } from '../types'
 
@@ -112,7 +112,7 @@ export default function DisplaySettings({ currentTab }: { currentTab: DiscoverTo
   const storedTokenAnalysisSettings = useTokenAnalysisSettings()
   const updateTokenAnalysisSettings = useUpdateTokenAnalysisSettings()
   const toggleTutorial = useToggleModal(ApplicationModal.KYBERAI_TUTORIAL)
-  const { data: token } = useKyberAITokenOverview()
+  const { data: token } = useKyberAIAssetOverview()
   const { chain } = useParams()
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, () => {

src/pages/TrueSightV2/components/KyberAIShareModal.tsx

@@ -24,7 +24,7 @@ import { downloadImage } from 'utils/index'
 import { getProxyTokenLogo } from 'utils/tokenInfo'
 
 import { NETWORK_IMAGE_URL } from '../constants'
-import useKyberAITokenOverview from '../hooks/useKyberAITokenOverview'
+import useKyberAIAssetOverview from '../hooks/useKyberAIAssetOverview'
 import KyberSwapShareLogo from './KyberSwapShareLogo'
 import LoadingTextAnimation from './LoadingTextAnimation'
 import { InfoWrapper, LegendWrapper } from './chart'
@@ -208,7 +208,7 @@ export default function KyberAIShareModal({
 }) {
   const theme = useTheme()
   const { chain } = useParams()
-  const { data: tokenOverview } = useKyberAITokenOverview()
+  const { data: tokenOverview } = useKyberAIAssetOverview()
 
   const ref = useRef<HTMLDivElement>(null)
   const refMobile = useRef<HTMLDivElement>(null)

src/pages/TrueSightV2/components/SearchWithDropDown.tsx

@@ -18,19 +18,17 @@ import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 import { MEDIA_WIDTHS } from 'theme'
 
-import { KYBERAI_LISTYPE_TO_MIXPANEL, NETWORK_IMAGE_URL } from '../constants'
+import { KYBERAI_LISTYPE_TO_MIXPANEL } from '../constants'
 import { useLazySearchTokenQuery, useSearchTokenQuery, useTokenListQuery } from '../hooks/useKyberAIData'
 import { ITokenList, ITokenSearchResult, KyberAIListType } from '../types'
 import { formatTokenPrice } from '../utils'
 
 const formatTokenType = (token: ITokenList): ITokenSearchResult => {
-  const token0 = token.tokens[0]
   return {
-    address: token0.address,
+    assetId: token.asset_id,
     name: token.name,
     symbol: token.symbol,
-    logo: token0.logo,
-    chain: token0.chain,
+    logo: token.tokens[0].logo,
     price: token.price,
     priceChange24h: token.percent_change_24h,
     kyberScore: {
@@ -206,7 +204,7 @@ const TokenItem = ({ token, onClick }: { token: ITokenSearchResult; onClick?: ()
     <DropdownItem
       onClick={() => {
         onClick?.()
-        navigate(`${APP_PATHS.KYBERAI_EXPLORE}/${token.chain}/${token.address}`)
+        navigate(`${APP_PATHS.KYBERAI_EXPLORE}/${token.assetId}`)
       }}
     >
       <td>
@@ -231,13 +229,13 @@ const TokenItem = ({ token, onClick }: { token: ITokenSearchResult; onClick?: ()
                 backgroundColor: theme.tableHeader,
               }}
             >
-              <img
+              {/* <img
                 src={NETWORK_IMAGE_URL[token.chain]}
                 alt="eth"
                 width={above768 ? '12px' : '10px'}
                 height={above768 ? '12px' : '10px'}
                 style={{ display: 'block' }}
-              />
+              /> */}
             </div>
           </div>
           <Text fontSize={above768 ? '12px' : '10px'} color={theme.text}>
@@ -322,7 +320,7 @@ const SearchWithDropdown = () => {
   )
   const [history, setHistory] = useLocalStorage<Array<ITokenSearchResult>>('kyberai-search-history')
   const saveToHistory = (token: ITokenSearchResult) => {
-    if (!(history && history.findIndex(t => t.address === token.address && t.chain === token.chain) >= 0)) {
+    if (!(history && history.findIndex(t => t.assetId === token.assetId) >= 0)) {
       setHistory([token, ...(history || [])].slice(0, 3))
     }
   }
@@ -333,7 +331,7 @@ const SearchWithDropdown = () => {
       const fetchHistoryTokenInfo = async () => {
         const results = await Promise.all(
           history.map(t => {
-            return getTokenData({ q: t.address, size: 1 }, true).unwrap()
+            return getTokenData({ q: t.assetId, size: 1 }, true).unwrap()
           }),
         )
         setHistory(results.map(res => res[0]))
@@ -407,7 +405,7 @@ const SearchWithDropdown = () => {
           <SearchResultTableWrapper>
             {searchResult.map(item => (
               <TokenItem
-                key={item.address}
+                key={item.assetId}
                 token={item}
                 onClick={() => {
                   setExpanded(false)

src/pages/TrueSightV2/components/SwitchVariantDropdown.tsx

@@ -0,0 +1,131 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import { useRef, useState } from 'react'
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import { useSearchParams } from 'react-router-dom'
+import { Text } from 'rebass'
+import styled from 'styled-components'
+
+import { ReactComponent as Down } from 'assets/svg/down.svg'
+import Icon from 'components/Icons/Icon'
+import Row, { RowFit } from 'components/Row'
+import { ICON_ID } from 'constants/index'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import useTheme from 'hooks/useTheme'
+
+const Wrapper = styled.div`
+  position: relative;
+`
+const SelectButton = styled(RowFit)`
+  height: 36px;
+  border-radius: 99px;
+  padding: 8px 12px;
+  background-color: ${({ theme }) => theme.buttonGray};
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  width: 135px;
+
+  :hover {
+    z-index: 10;
+    filter: brightness(1.2);
+  }
+`
+
+const DropdownWrapper = styled(motion.div)`
+  position: absolute;
+  width: 100%;
+  border-radius: 14px;
+  background-color: ${({ theme }) => theme.buttonGray};
+  left: 0;
+  top: calc(100% + 2px);
+  padding: 4px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`
+
+const DropdownItem = styled(Row)`
+  height: 32px;
+  padding: 4px 8px;
+  gap: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  :hover {
+    filter: brightness(1.2);
+    background-color: ${({ theme }) => theme.background};
+  }
+`
+
+const VARIANTS: { [key: string]: { icon_id: ICON_ID; title: string } } = {
+  ethereum: { icon_id: 'eth-mono', title: 'Ethereum' },
+  bsc: { icon_id: 'bnb-mono', title: 'Binance' },
+  avalanche: { icon_id: 'ava-mono', title: 'Avalanche' },
+  polygon: { icon_id: 'matic-mono', title: 'Polygon' },
+  arbitrum: { icon_id: 'arbitrum-mono', title: 'Arbitrum' },
+  fantom: { icon_id: 'fantom-mono', title: 'Fantom' },
+  optimism: { icon_id: 'optimism-mono', title: 'Optimism' },
+}
+
+export default function SwitchVariantDropdown({ variants }: { variants?: { chain: string; address: string }[] }) {
+  const theme = useTheme()
+  const [show, setShow] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const [, setSearchParams] = useSearchParams()
+  useOnClickOutside(ref, () => setShow(false))
+  const firstItem = variants?.[0]
+  if (!firstItem)
+    return (
+      <SkeletonTheme
+        height="36px"
+        direction="ltr"
+        duration={1}
+        baseColor={theme.buttonGray}
+        highlightColor={theme.border}
+        width="135px"
+        borderRadius="99px"
+      >
+        <Skeleton />
+      </SkeletonTheme>
+    )
+
+  const setChainAndAdress = (variant: { chain: string; address: string }) => {
+    setSearchParams({ chain: variant.chain, address: variant.address })
+  }
+  const variant = !!firstItem && VARIANTS[firstItem?.chain]
+  return (
+    <Wrapper ref={ref}>
+      <SelectButton onClick={() => setShow(true)}>
+        <Icon id={variant.icon_id} title={variant.title} size={20} />
+        <Text style={{ flex: 1 }}>{variant.title}</Text>
+        <Down />
+      </SelectButton>
+      <AnimatePresence>
+        {show && (
+          <DropdownWrapper
+            initial={{ y: -10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -10, opacity: 0 }}
+            transition={{ duration: 0.1 }}
+          >
+            {variants.map(item => {
+              const itemVariant = VARIANTS[item.chain]
+              return (
+                <DropdownItem
+                  key={item.chain + '_' + item.address}
+                  onClick={() => {
+                    setShow(false)
+                    setChainAndAdress(item)
+                  }}
+                >
+                  <Icon id={itemVariant.icon_id} title={itemVariant.title} size={20} />
+                  <Text style={{ flex: 1 }}>{itemVariant.title}</Text>
+                </DropdownItem>
+              )
+            })}
+          </DropdownWrapper>
+        )}
+      </AnimatePresence>
+    </Wrapper>
+  )
+}

src/pages/TrueSightV2/components/TimeFrameLegend.tsx

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components'
 
 import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 
-import useKyberAITokenOverview from '../hooks/useKyberAITokenOverview'
+import useKyberAIAssetOverview from '../hooks/useKyberAIAssetOverview'
 import { KyberAITimeframe } from '../types'
 
 const TimeFrameWrapper = styled.div`
@@ -72,7 +72,7 @@ const TimeFrameLegend = ({
   const ref = useRef<HTMLDivElement>(null)
   const [left, setLeft] = useState(0)
   const [width, setWidth] = useState(0)
-  const { data: token } = useKyberAITokenOverview()
+  const { data: token } = useKyberAIAssetOverview()
   const handleSelect = (t: KyberAITimeframe) => {
     const wrapperEl = ref.current?.closest('section-wrapper')