From 8f4411fb4f60129ff22fa5da23e872ed0d3492b9 Mon Sep 17 00:00:00 2001
From: XiaoYhun <xiaoyhun@gmail.com>
Date: Fri, 6 Oct 2023 13:49:24 +0700
Subject: [PATCH 1/4] fix kyberai banner

---
 src/components/KyberAITokenBanner/index.tsx   | 58 ++++++-------------
 src/components/SelectV2.tsx                   | 56 ++++++++----------
 .../MultipleChainSelectV2/index.tsx           |  2 +-
 .../TrueSightV2/components/SimpleTooltip.tsx  |  1 +
 .../components/TokenFilter/index.tsx          |  4 +-
 .../TrueSightV2/hooks/useKyberAIData.tsx      |  3 +-
 .../TrueSightV2/pages/TokenAnalysisList.tsx   |  3 +-
 src/pages/TrueSightV2/types/index.tsx         | 31 ++++++++++
 8 files changed, 78 insertions(+), 80 deletions(-)

diff --git a/src/components/KyberAITokenBanner/index.tsx b/src/components/KyberAITokenBanner/index.tsx
index 7f4696f0f7..b4662bcd10 100644
--- a/src/components/KyberAITokenBanner/index.tsx
+++ b/src/components/KyberAITokenBanner/index.tsx
@@ -20,7 +20,6 @@ import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 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 { useTokenOverviewQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
 import { calculateValueToColor } from 'pages/TrueSightV2/utils'
 import { useIsWhiteListKyberAI, useShowKyberAIBanner } from 'state/user/hooks'
@@ -36,7 +35,6 @@ const KyberAITokenBanner = ({
   const { chainId, account } = useActiveWeb3React()
   const { isWhiteList } = useIsWhiteListKyberAI()
   const isShowKyberAIBanner = useShowKyberAIBanner()
-
   const { mixpanelHandler } = useMixpanel()
   const chain = Object.keys(NETWORK_TO_CHAINID).find(i => NETWORK_TO_CHAINID[i] === chainId)
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
@@ -68,7 +66,7 @@ const KyberAITokenBanner = ({
     { skip: !account || !isWhiteList || !chain || !isShowKyberAIBanner, refetchOnMountOrArgChange: true },
   )
 
-  const token: { kyberScore?: number; label?: string; address?: string; logo?: string; symbol?: string } | undefined =
+  const token: { kyberScore?: number; label?: string; assetId?: number; logo?: string; symbol?: string } | undefined =
     useMemo(() => {
       if (staticMode) {
         return undefined
@@ -88,7 +86,7 @@ const KyberAITokenBanner = ({
       return {
         kyberScore: token?.kyberScore?.score,
         label: token?.kyberScore?.label,
-        address: '', //todo
+        assetId: token?.assetId,
         logo: token?.logo,
         symbol: token?.symbol,
       }
@@ -99,24 +97,23 @@ const KyberAITokenBanner = ({
   if (staticMode && isStableCoin(currencyIn?.wrapped.address.toLowerCase())) return null
   const staticModeCurrency = !currencyIn || KNC[chainId].equals(currencyIn) ? NativeCurrencies[chainId] : currencyIn
   const color = staticMode ? theme.primary : calculateValueToColor(token?.kyberScore || 0, theme)
+
+  const handleBannerClick = () => {
+    if (staticMode) {
+      window.open(APP_PATHS.KYBERAI_ABOUT, '_blank')
+    } else {
+      if (!token) return
+      window.open(APP_PATHS.KYBERAI_EXPLORE + '/' + token?.assetId, '_blank')
+    }
+    mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SWAP_INSIGHT_CLICK, {
+      input_token: token0?.symbol?.toUpperCase(),
+      output_token: token1?.symbol?.toUpperCase(),
+    })
+  }
   return (
     <Wrapper>
       {above768 ? (
-        <Container
-          color={color}
-          onClick={() => {
-            mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SWAP_INSIGHT_CLICK, {
-              input_token: token0?.symbol?.toUpperCase(),
-              output_token: token1?.symbol?.toUpperCase(),
-            })
-            staticMode
-              ? window.open(APP_PATHS.KYBERAI_ABOUT, '_blank')
-              : window.open(
-                  APP_PATHS.KYBERAI_EXPLORE + '/' + SUPPORTED_NETWORK_KYBERAI[chainId] + '/' + token?.address,
-                  '_blank',
-                )
-          }}
-        >
+        <Container color={color} onClick={handleBannerClick}>
           <RowFit gap="8px">
             {staticMode ? (
               <CurrencyLogo currency={staticModeCurrency} size={'32px'} />
@@ -172,19 +169,7 @@ const KyberAITokenBanner = ({
                 </Text>{' '}
                 here!{' '}
               </Trans>
-              <ArrowRight
-                size={14}
-                stroke={theme.primary}
-                style={{ cursor: 'pointer' }}
-                onClick={() => {
-                  mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SWAP_INSIGHT_CLICK, {
-                    input_token: token0?.symbol?.toUpperCase(),
-                    output_token: token1?.symbol?.toUpperCase(),
-                  })
-
-                  //navigate(APP_PATHS.KYBERAI_EXPLORE + '/' + SUPPORTED_NETWORK_KYBERAI[chainId] + '/' + token?.address)
-                }}
-              />
+              <ArrowRight size={14} stroke={theme.primary} style={{ cursor: 'pointer' }} />
             </RowFit>
           </Column>
           <div style={{ width: '100px' }}></div>
@@ -193,14 +178,7 @@ const KyberAITokenBanner = ({
         <MobileContainer
           color={color}
           onClick={() => {
-            mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SWAP_INSIGHT_CLICK, {
-              input_token: token0?.symbol?.toUpperCase(),
-              output_token: token1?.symbol?.toUpperCase(),
-            })
-            // window.open(
-            //   APP_PATHS.KYBERAI_EXPLORE + '/' + SUPPORTED_NETWORK_KYBERAI[chainId] + '/' + token?.address,
-            //   '_blank',
-            // )
+            handleBannerClick
           }}
         >
           <RowBetween>
diff --git a/src/components/SelectV2.tsx b/src/components/SelectV2.tsx
index ea18a5b388..89b2257e59 100644
--- a/src/components/SelectV2.tsx
+++ b/src/components/SelectV2.tsx
@@ -26,12 +26,8 @@ const SelectWrapper = styled.div`
 `
 
 const SelectMenu = styled(motion.div)`
-  position: absolute;
-  top: 0px;
-  left: 0;
-  right: 0;
-  margin: auto;
   border-radius: 16px;
+  overflow: hidden;
   filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.36));
   z-index: 2;
   background: ${({ theme }) => theme.tabActive};
@@ -69,11 +65,6 @@ const getOptionLabel = (option: SelectOption | undefined) => {
   return typeof option !== 'object' ? option : option.label || option.value
 }
 
-// function isElementOverflowBottom(el: HTMLElement) {
-//   const rect = el.getBoundingClientRect()
-//   return rect.bottom >= (window.innerHeight || document?.documentElement?.clientHeight)
-// }
-
 const defaultOffset: [number, number] = [0 /* skidding */, 2 /* distance */]
 function Select({
   options = [],
@@ -115,11 +106,10 @@ function Select({
 
   useEffect(() => {
     if (!refMenu?.current) return
-    // if (!menuPlacementTop) setForceMenuPlacementTop(showMenu && isElementOverflowBottom(refMenu.current))
   }, [showMenu, menuPlacementTop])
-  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
 
-  useOnClickOutside(referenceElement as any, () => {
+  useOnClickOutside(ref, () => {
     setShowMenu(false)
     onHideMenu?.()
   })
@@ -132,7 +122,7 @@ function Select({
       const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         e.preventDefault()
-        setShowMenu(prev => !prev)
+        setShowMenu(false)
         if (item.onSelect) item.onSelect?.()
         else {
           setSelected(value)
@@ -155,25 +145,18 @@ function Select({
 
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
 
-  const { styles, update } = usePopper(referenceElement, popperElement, {
+  const { styles } = usePopper(ref.current, popperElement, {
     placement: 'bottom',
     strategy: 'fixed',
     modifiers: [{ name: 'offset', options: { offset: defaultOffset } }],
   })
 
-  const updateCallback = useCallback(() => {
-    update?.()
-  }, [update])
-
-  useInterval(updateCallback, showMenu ? 100 : null)
-
   return (
     <SelectWrapper
-      ref={setReferenceElement as any}
-      // ref={ref}
+      ref={ref}
       role="button"
       onClick={() => {
-        setShowMenu(!showMenu)
+        setShowMenu(true)
       }}
       style={style}
       className={className}
@@ -183,17 +166,24 @@ function Select({
       <AnimatePresence>
         {showMenu && (
           <Portal>
-            <SelectMenu
+            <div
               ref={setPopperElement as any}
-              // initial={{ y: -10, opacity: 0 }}
-              // animate={{ y: 0, opacity: 1 }}
-              // exit={{ y: -10, opacity: 0 }}
-              // transition={{ duration: 0.1 }}
-              style={{ ...styles.popper, ...menuStyle, ...(menuPlacementTop ? { bottom: 40, top: 'unset' } : {}) }}
-              // ref={refMenu}
+              style={{
+                ...styles.popper,
+                ...(menuPlacementTop ? { bottom: 40, top: 'unset' } : {}),
+                zIndex: 1,
+              }}
             >
-              {dropdownRender ? dropdownRender(renderMenu()) : renderMenu()}
-            </SelectMenu>
+              <SelectMenu
+                initial={{ y: -10, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: -10, opacity: 0 }}
+                transition={{ duration: 0.1 }}
+                style={{ ...menuStyle }}
+              >
+                <div>{dropdownRender ? dropdownRender(renderMenu()) : renderMenu()}</div>
+              </SelectMenu>
+            </div>
           </Portal>
         )}
       </AnimatePresence>
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
index 6be07bb188..6b67d01a5e 100644
--- a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
+++ b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
@@ -110,7 +110,7 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
     <Select
       onHideMenu={onHideMenu}
       className={className}
-      style={{ ...style, flex: '0 0 150px', width: '150px', position: 'relative', zIndex: '3' }}
+      style={{ ...style, flex: '0 0 150px', width: '150px', position: 'relative' }}
       activeRender={_ => <SelectButton {...props} />}
       options={options}
       optionStyle={{ padding: 0 }}
diff --git a/src/pages/TrueSightV2/components/SimpleTooltip.tsx b/src/pages/TrueSightV2/components/SimpleTooltip.tsx
index 4c550df076..2750431db4 100644
--- a/src/pages/TrueSightV2/components/SimpleTooltip.tsx
+++ b/src/pages/TrueSightV2/components/SimpleTooltip.tsx
@@ -30,6 +30,7 @@ const ContentWrapper = styled.div`
   border-radius: 12px;
   background-color: ${({ theme }) => theme.tableHeader};
   font-size: 12px;
+  line-height: 16px;
   color: ${({ theme }) => theme.subText};
   width: fit-content;
   max-width: 250px;
diff --git a/src/pages/TrueSightV2/components/TokenFilter/index.tsx b/src/pages/TrueSightV2/components/TokenFilter/index.tsx
index 6c8c4c27ef..1c60427dfe 100644
--- a/src/pages/TrueSightV2/components/TokenFilter/index.tsx
+++ b/src/pages/TrueSightV2/components/TokenFilter/index.tsx
@@ -215,8 +215,6 @@ export default function TokenFilter({
   const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
 
   const menuStyle: CSSProperties = {
-    zIndex: Z_INDEX_KYBER_AI.FILTER_TOKEN_OPTIONS,
-    top: upToSmall ? undefined : 0,
     maxHeight: 400,
     overflowY: 'scroll',
   }
@@ -233,7 +231,7 @@ export default function TokenFilter({
         ) : (
           <>
             <StyledChainSelect
-              menuStyle={{ left: 0, zIndex: Z_INDEX_KYBER_AI.FILTER_TOKEN_OPTIONS }}
+              menuStyle={menuStyle}
               activeStyle={{
                 backgroundColor: 'transparent',
                 padding: 0,
diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
index e55a85ce3f..43750b6f7f 100644
--- a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
+++ b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
@@ -19,6 +19,7 @@ import {
   INumberOfTrades,
   INumberOfTransfers,
   ITokenList,
+  ITokenOverview,
   ITokenSearchResult,
   ITradingVolume,
   KyberAIListType,
@@ -86,7 +87,7 @@ const kyberAIApi = createApi({
       },
     }),
     //4.
-    tokenOverview: builder.query<IAssetOverview, { chain?: string; address?: string }>({
+    tokenOverview: builder.query<ITokenOverview, { chain?: string; address?: string }>({
       query: ({ chain, address }: { chain?: string; address?: string }) => ({
         url: `/overview/${chain}/${address}`,
       }),
diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
index 14f342330e..494342bc57 100644
--- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
+++ b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -252,12 +252,11 @@ const LoadingWrapper = styled(Row)`
   opacity: 0.8;
   z-index: ${Z_INDEX_KYBER_AI.LOADING_TOKENS_TABLE};
   border-radius: 20px;
-  padding-top: min(25vh, 20%);
+  padding-top: min(25vh, 25%);
   justify-content: center;
   align-items: flex-start;
   box-sizing: border-box;
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    inset: 0 -16px 0 -16px;
     width: 100vw;
     border-radius: 0;
   `}
diff --git a/src/pages/TrueSightV2/types/index.tsx b/src/pages/TrueSightV2/types/index.tsx
index c2f9fd58ef..8c6297e46c 100644
--- a/src/pages/TrueSightV2/types/index.tsx
+++ b/src/pages/TrueSightV2/types/index.tsx
@@ -4,6 +4,37 @@ export interface IKyberScoreChart {
   kyberScore: number
   createdAt: number
 }
+
+export interface ITokenOverview {
+  assetId: number
+  address: string
+  symbol: string
+  logo: string
+  decimals: number
+  chain: string
+  description: string
+  webs: string[]
+  communities: string[]
+  tags: string[]
+  atl: number
+  ath: number
+  '24hVolume': number
+  price: number
+  price24hChangePercent: number
+  '24hLow': number
+  '24hHigh': number
+  '1yLow': number
+  '1yHigh': number
+  circulatingSupply: number
+  marketCap: number
+  numberOfHolders: number
+  kyberScore: {
+    score: number
+    label: string
+    ks3d: Array<{ tag: string; price: number; kyber_score: number; created_at: number }>
+  }
+}
+
 export interface IAssetOverview {
   addresses: { chain: string; address: string }[]
   tags: string[]

From 0e28cd007fb5d369b8049f85ea8a69691e2d139a Mon Sep 17 00:00:00 2001
From: XiaoYhun <xiaoyhun@gmail.com>
Date: Fri, 6 Oct 2023 14:16:51 +0700
Subject: [PATCH 2/4] fix warning

---
 src/components/SelectV2.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/SelectV2.tsx b/src/components/SelectV2.tsx
index 89b2257e59..4b88e864a4 100644
--- a/src/components/SelectV2.tsx
+++ b/src/components/SelectV2.tsx
@@ -1,10 +1,9 @@
 import { Portal } from '@reach/portal'
 import { AnimatePresence, motion } from 'framer-motion'
-import { CSSProperties, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react'
 import { usePopper } from 'react-popper'
 import styled from 'styled-components'
 
-import useInterval from 'hooks/useInterval'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 
 import { DropdownArrowIcon } from './ArrowRotate'

From 0c244136577ce2cfad5e4f6c01430b9ffaa1c6dd Mon Sep 17 00:00:00 2001
From: XiaoYhun <xiaoyhun@gmail.com>
Date: Fri, 6 Oct 2023 15:06:40 +0700
Subject: [PATCH 3/4] fix pr env

---
 .github/workflows/pr.yaml                   | 3 +--
 src/pages/TrueSightV2/pages/LandingPage.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
index e19ada6545..e621c974f4 100644
--- a/.github/workflows/pr.yaml
+++ b/.github/workflows/pr.yaml
@@ -114,8 +114,7 @@ jobs:
           VITE_TAG: ${{ needs.prepare.outputs.image_tag }}
           CURRENT_BRANCH: ${{ needs.prepare.outputs.current_branch }}
           NODE_OPTIONS: '--max_old_space_size=4096'
-        run: yarn build-prod
-
+        run: yarn build-dev
 
       - name: Docker build and push
         uses: docker/build-push-action@v2
diff --git a/src/pages/TrueSightV2/pages/LandingPage.tsx b/src/pages/TrueSightV2/pages/LandingPage.tsx
index 51d132e52f..89e7f78d13 100644
--- a/src/pages/TrueSightV2/pages/LandingPage.tsx
+++ b/src/pages/TrueSightV2/pages/LandingPage.tsx
@@ -202,7 +202,7 @@ const FloatingImageWithMotion = (props: {
     [0, props.parallaxDistance ? 2200 / props.parallaxDistance : 0],
   )
 
-  const translateY = useSpring(transformedTranslateY, { bounce: 0, duration: 0.5 })
+  const translateY = useSpring(transformedTranslateY, { damping: 10, stiffness: 100 })
 
   return (
     <motion.div transition={transition} style={{ translateY, ...props.style }}>

From 52128824a70b2b7fc3d9f83174b385ace85338e2 Mon Sep 17 00:00:00 2001
From: XiaoYhun <xiaoyhun@gmail.com>
Date: Fri, 6 Oct 2023 15:52:02 +0700
Subject: [PATCH 4/4] fix banner mobile cannot click

---
 src/components/KyberAITokenBanner/index.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/KyberAITokenBanner/index.tsx b/src/components/KyberAITokenBanner/index.tsx
index b4662bcd10..f42037957f 100644
--- a/src/components/KyberAITokenBanner/index.tsx
+++ b/src/components/KyberAITokenBanner/index.tsx
@@ -175,12 +175,7 @@ const KyberAITokenBanner = ({
           <div style={{ width: '100px' }}></div>
         </Container>
       ) : (
-        <MobileContainer
-          color={color}
-          onClick={() => {
-            handleBannerClick
-          }}
-        >
+        <MobileContainer color={color} onClick={handleBannerClick}>
           <RowBetween>
             <RowFit gap="8px">
               {staticMode ? (