Adapt with new asset api (#2255)

* update assetId and hooks to use new params * add variant select in explore page * revert watchlist updates * fix failed errors * fix issues * update select variant * fix hide button not works * fix bugs * remove console.log * fix header gap not consistent * navigate to explore page using provided chain and address * improve network select * fix kyberai banner fetch api event user closed it * skip some api calls * fix comments
KyberNetwork · Sep 25, 2023 · 1f7ee2d · 1f7ee2d
1 parent 8dbdd2c
commit 1f7ee2d
Show file tree

Hide file tree

Showing 30 changed files with 582 additions and 366 deletions.
diff --git a/src/components/Header/groups/EarnNavGroup.tsx b/src/components/Header/groups/EarnNavGroup.tsx
@@ -47,7 +47,7 @@ const EarnNavGroup = () => {
             to={`${APP_PATHS.POOLS}/${networkInfo.route}`}
             style={{ width: '100%' }}
           >
-            <Flex sx={{ gap: '4px' }} alignItems="center">
+            <Flex sx={{ gap: '12px' }} alignItems="center">
               <Icon id="liquid" size={16} />
               <Trans>Pools</Trans>
             </Flex>
@@ -61,14 +61,14 @@ const EarnNavGroup = () => {
             data-testid="farms-nav-link"
             to={`${APP_PATHS.FARMS}/${networkInfo.route}`}
           >
-            <Flex sx={{ gap: '4px' }} alignItems="center">
+            <Flex sx={{ gap: '12px' }} alignItems="center">
               <MoneyBag size={16} />
               <Trans>Farms</Trans>
             </Flex>
           </StyledNavLink>
 
           <StyledNavLink id="my-earnings-link" to={APP_PATHS.MY_EARNINGS}>
-            <Flex sx={{ gap: '4px' }} alignItems="center">
+            <Flex sx={{ gap: '12px' }} alignItems="center">
               <Icon id="pig" size={16} />
               <Trans>My Earnings</Trans>
               <NewLabel>
@@ -82,7 +82,7 @@ const EarnNavGroup = () => {
             data-testid="my-pools-nav-link"
             to={`${APP_PATHS.MY_POOLS}/${networkInfo.route}`}
           >
-            <Flex sx={{ gap: '4px' }} alignItems="center">
+            <Flex sx={{ gap: '12px' }} alignItems="center">
               <Icon id="liquid-outline" size={16} />
               <Trans>My Pools</Trans>
             </Flex>

diff --git a/src/components/Header/groups/KyberDaoGroup.tsx b/src/components/Header/groups/KyberDaoGroup.tsx
@@ -38,18 +38,18 @@ const KyberDAONavGroup = () => {
         }
         dropdownContent={
           <Column>
-            <StyledNavLink id="kyberdao-stake-knc" to={APP_PATHS.KYBERDAO_STAKE} style={{ gap: '4px' }}>
+            <StyledNavLink id="kyberdao-stake-knc" to={APP_PATHS.KYBERDAO_STAKE} style={{ gap: '12px' }}>
               <StakeIcon />
               <Trans>Stake KNC</Trans>
             </StyledNavLink>
-            <StyledNavLink id="kyberdao-vote" to={APP_PATHS.KYBERDAO_VOTE} style={{ gap: '4px' }}>
+            <StyledNavLink id="kyberdao-vote" to={APP_PATHS.KYBERDAO_VOTE} style={{ gap: '12px' }}>
               <VoteIcon />
               <Trans>Vote</Trans>
             </StyledNavLink>
             <StyledNavLink
               id="knc-utility"
               to={APP_PATHS.KYBERDAO_KNC_UTILITY}
-              style={{ gap: '4px' }}
+              style={{ gap: '12px' }}
               onClick={() => {
                 mixpanelHandler(MIXPANEL_TYPE.GAS_REFUND_SOURCE_CLICK, { source: 'KyberDAO_tab' })
               }}
@@ -61,7 +61,7 @@ const KyberDAONavGroup = () => {
               id="kyberdao-feature-request"
               href="https://kyberswap.canny.io/feature-request"
               target="_blank"
-              style={{ gap: '4px' }}
+              style={{ gap: '12px' }}
               onClick={() => {
                 mixpanelHandler(MIXPANEL_TYPE.KYBER_DAO_FEATURE_REQUEST_CLICK)
               }}

diff --git a/src/components/KyberAITokenBanner/index.tsx b/src/components/KyberAITokenBanner/index.tsx
@@ -22,9 +22,9 @@ 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 { useIsWhiteListKyberAI, useShowKyberAIBanner } from 'state/user/hooks'
 import { MEDIA_WIDTHS } from 'theme'
 
 const KyberAITokenBanner = ({
@@ -36,6 +36,8 @@ const KyberAITokenBanner = ({
 }) => {
   const { chainId, account } = useActiveWeb3React()
   const { isWhiteList } = useIsWhiteListKyberAI()
+  const isShowKyberAIBanner = useShowKyberAIBanner()
+
   const navigate = useNavigate()
   const { mixpanelHandler } = useMixpanel()
   const chain = Object.keys(NETWORK_TO_CHAINID).find(i => NETWORK_TO_CHAINID[i] === chainId)
@@ -47,19 +49,25 @@ 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 },
+    {
+      skip: !token0?.address || !account || !isWhiteList || !chain || !isShowKyberAIBanner,
+      refetchOnMountOrArgChange: true,
+    },
   )
 
-  const { data: tokenOutputOverview } = useTokenDetailQuery(
+  const { data: tokenOutputOverview } = useTokenOverviewQuery(
     { address: token1?.address, chain },
-    { skip: !token1?.address || !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
+    {
+      skip: !token1?.address || !account || !isWhiteList || !chain || !isShowKyberAIBanner,
+      refetchOnMountOrArgChange: true,
+    },
   )
 
-  const { data: tokenNativeOverview } = useTokenDetailQuery(
+  const { data: tokenNativeOverview } = useTokenOverviewQuery(
     { address: NativeCurrencies[chainId].wrapped.address, chain },
-    { skip: !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
+    { skip: !account || !isWhiteList || !chain || !isShowKyberAIBanner, refetchOnMountOrArgChange: true },
   )
 
   const token: { kyberScore?: number; label?: string; address?: string; logo?: string; symbol?: string } | undefined =

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -394,7 +394,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 />

diff --git a/src/pages/ProAmmPools/KyberAIModalInPool.tsx b/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 },
   )

diff --git a/src/pages/TrueSightV2/components/CexRekt.tsx b/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 (
     <>

diff --git a/src/pages/TrueSightV2/components/DisplaySettings.tsx b/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, () => {

diff --git a/src/pages/TrueSightV2/components/KyberAIShareModal.tsx b/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)

diff --git a/src/pages/TrueSightV2/components/KyberAIWidget.tsx b/src/pages/TrueSightV2/components/KyberAIWidget.tsx
@@ -214,8 +214,9 @@ export default function Widget() {
           page: 1,
           pageSize: 5,
         },
-    { refetchOnMountOrArgChange: true, skip: !isWhiteList },
+    { refetchOnMountOrArgChange: true, skip: !isWhiteList || !showWidget },
   )
+
   if (!account) return <></>
 
   return (

diff --git a/src/pages/TrueSightV2/components/MultipleChainDropdown.tsx b/src/pages/TrueSightV2/components/MultipleChainDropdown.tsx
@@ -73,13 +73,12 @@ const MultipleChainDropdown = React.forwardRef(
   (
     props: {
       show: boolean
-      menuLeft?: number
       tokens?: Array<{ address: string; logo: string; chain: string }>
       onChainClick: (chain: string, address: string) => void
     },
     ref,
   ) => {
-    const { show, menuLeft, tokens, onChainClick } = props
+    const { show, tokens, onChainClick } = props
     const theme = useTheme()
     if (isMobile) {
       return (
@@ -167,7 +166,7 @@ const MultipleChainDropdown = React.forwardRef(
         className={show ? 'show' : ''}
         gap="8px"
         color={theme.text}
-        style={{ left: menuLeft !== undefined ? `${menuLeft}px` : undefined }}
+        style={{ right: 0 }}
         ref={ref}
         onClick={e => e.stopPropagation()}
       >