fix: issues filter sort kyber AI (#2278)

KyberNetwork · Oct 11, 2023 · 1a77416 · 1a77416
1 parent f1ec210
commit 1a77416
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 42 deletions.
diff --git a/src/components/SelectV2.tsx b/src/components/SelectV2.tsx
@@ -22,7 +22,6 @@ const SelectWrapper = styled.div`
   padding: 12px;
   :hover {
     filter: brightness(1.2);
-    z-index: 10;
   }
 `
 
@@ -57,6 +56,7 @@ const SelectedWrap = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
+  user-select: none;
 `
 export type SelectOption = { value?: string | number; label: ReactNode; onSelect?: () => void }
 
@@ -88,6 +88,7 @@ function Select({
   forceMenuPlacementTop = false,
   arrowColor,
   dropdownRender,
+  onHideMenu,
 }: {
   value?: string | number
   className?: string
@@ -101,6 +102,7 @@ function Select({
   onChange?: (value: any) => void
   forceMenuPlacementTop?: boolean
   arrowColor?: string
+  onHideMenu?: () => void // hide without changes
 }) {
   const [selected, setSelected] = useState(getOptionValue(options?.[0]))
   const [showMenu, setShowMenu] = useState(false)
@@ -119,6 +121,7 @@ function Select({
 
   useOnClickOutside(referenceElement as any, () => {
     setShowMenu(false)
+    onHideMenu?.()
   })
   const selectedInfo = options.find(item => getOptionValue(item) === selected)
   const refMenu = useRef<HTMLDivElement>(null)
@@ -159,7 +162,7 @@ function Select({
   })
 
   const updateCallback = useCallback(() => {
-    update && update()
+    update?.()
   }, [update])
 
   useInterval(updateCallback, showMenu ? 100 : null)

diff --git a/src/hooks/useOnClickOutside.tsx b/src/hooks/useOnClickOutside.tsx
@@ -19,7 +19,7 @@ export function useOnClickOutside<T extends HTMLElement>(
       if (nodes.some(node => node.current?.contains(e.target as Node) ?? false)) {
         return
       }
-      if (handlerRef.current) handlerRef.current()
+      handlerRef.current?.()
     }
 
     document.addEventListener(isMobile ? 'touchstart' : 'mousedown', handleClickOutside)

diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
@@ -1,8 +1,8 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { rgba } from 'polished'
-import { ReactNode, useState } from 'react'
-import { Box, Flex, Text } from 'rebass'
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { Box, Flex } from 'rebass'
 import styled, { CSSProperties } from 'styled-components'
 
 import { ReactComponent as LogoKyber } from 'assets/svg/logo_kyber.svg'
@@ -57,6 +57,16 @@ const ChainWrapper = styled.div`
     border-radius: 999px;
   }
 `
+
+const Label = styled.span`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20x;
+  color: ${({ theme }) => theme.text};
+  cursor: pointer;
+  user-select: none;
+`
+
 const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, style, ...props }) => {
   const { comingSoonList = [], selectedChainIds = [], handleChangeChains, chainIds = [], onTracking } = props
   const options = chainIds.map(id => ({ value: id, label: id }))
@@ -78,20 +88,40 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
     }
   }
 
+  useEffect(() => {
+    setLocalSelectedChains(selectedChains)
+    // eslint-disable-next-line
+  }, [selectedChains.length])
+
+  const selectAllRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (!selectAllRef.current) {
+      return
+    }
+    selectAllRef.current.indeterminate =
+      0 < localSelectedChains.length && localSelectedChains.length < networkList.length
+  }, [localSelectedChains, networkList.length])
+
+  const onHideMenu = useCallback(() => {
+    setLocalSelectedChains(selectedChains)
+  }, [selectedChains])
+
   return (
     <Select
+      onHideMenu={onHideMenu}
       className={className}
       style={{ ...style, flex: '0 0 150px', width: '150px', position: 'relative', zIndex: '3' }}
       activeRender={_ => <SelectButton {...props} />}
       options={options}
+      optionStyle={{ padding: 0 }}
       optionRender={item => {
         const network = Number(item?.value) as ChainId
         const config = NETWORKS_INFO[network]
         const isComingSoon = comingSoonList.includes(network)
         const isSelected = isComingSoon ? false : localSelectedChains.includes(network)
         const handleClick = (e: any) => {
-          if (isComingSoon) return
           e.stopPropagation()
+          if (isComingSoon) return
           if (isSelected) {
             setLocalSelectedChains(localSelectedChains.filter(chain => chain !== network))
           } else {
@@ -102,9 +132,8 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
         return (
           <MouseoverTooltip
             text={isComingSoon ? 'Coming soon' : ''}
-            width="fit-content"
             placement="top"
-            containerStyle={{ width: 'fit-content' }}
+            width={isComingSoon ? 'fit-content' : undefined}
           >
             <Flex
               onClick={handleClick}
@@ -114,23 +143,15 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
                 cursor: isComingSoon ? 'not-allowed' : 'pointer',
                 userSelect: 'none',
                 opacity: isComingSoon ? 0.6 : 1,
+                width: '100%',
+                padding: '10px 18px',
               }}
             >
               <Checkbox type="checkbox" checked={isSelected} onChange={handleClick} />
 
               <StyledLogo src={theme.darkMode && config.iconDark ? config.iconDark : config.icon} />
 
-              <Text
-                as="span"
-                sx={{
-                  fontWeight: 500,
-                  fontSize: '14px',
-                  lineHeight: '20px',
-                  color: theme.text,
-                }}
-              >
-                {config.name}
-              </Text>
+              <Label>{config.name}</Label>
             </Flex>
           </MouseoverTooltip>
         )
@@ -139,36 +160,36 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
         return (
           <>
             <Flex
+              as="label"
               onClick={e => e.stopPropagation()}
               sx={{
                 alignItems: 'center',
                 gap: '8px',
                 padding: '10px 18px',
+                cursor: 'pointer',
               }}
             >
-              <Checkbox type="checkbox" id="checkAllChain" checked={isAllSelected} onChange={onChangeChain} />
+              <Checkbox
+                ref={selectAllRef}
+                type="checkbox"
+                id="checkAllChain"
+                checked={isAllSelected}
+                onChange={onChangeChain}
+              />
 
               <Flex width="20px" alignItems="center" justifyContent="center">
                 <LogoKyber width="14px" height="auto" color={theme.primary} />
               </Flex>
 
-              <Text
-                as="label"
-                htmlFor="checkAllChain"
-                sx={{
-                  fontWeight: 500,
-                  fontSize: '14px',
-                  lineHeight: '20px',
-                  color: theme.text,
-                  cursor: 'pointer',
-                }}
-              >
+              <Label>
                 <Trans>All Chains</Trans>
-              </Text>
+              </Label>
             </Flex>
             <ChainWrapper>{menu}</ChainWrapper>
+
             <Box sx={{ margin: '10px 0', width: '100%', height: '0', borderBottom: `1px solid ${theme.border}` }} />
-            <Flex padding={'0 22px'}>
+
+            <Flex padding={'0 18px'}>
               <ApplyButton
                 disabled={!localSelectedChains.length}
                 onClick={() => {

diff --git a/src/pages/TrueSightV2/components/TokenFilter/index.tsx b/src/pages/TrueSightV2/components/TokenFilter/index.tsx
@@ -109,6 +109,11 @@ const SelectGroup = styled.div`
     width: 100%;
     height: 100%;
     padding-right: 150px;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    > * {
+      scroll-snap-align: start;
+    }
   `}
 `
 
@@ -169,6 +174,7 @@ export default function TokenFilter({
     return { allChainIds, listSelects, chainFilter }
   }, [data])
 
+  // chains when f5, from url
   const defaultChains = useMemo(
     () => getChainsFromSlugs(filter[chainFilter?.queryKey]?.split(',')),
     [filter, chainFilter],
@@ -219,7 +225,7 @@ export default function TokenFilter({
 
   return (
     <StyledWrapper>
-      <SelectGroup style={{ overflowX: 'scroll' }}>
+      <SelectGroup>
         {showLoading ? (
           new Array(isWatchlistTab ? 5 : 4)
             .fill(0)
@@ -263,7 +269,12 @@ export default function TokenFilter({
         )}
       </SelectGroup>
       <ShareGroup>
-        <StyledButton onClick={onResetFilterSort}>
+        <StyledButton
+          onClick={() => {
+            setSelectChains(allChainIds)
+            onResetFilterSort()
+          }}
+        >
           <Trash2 size={16} />
           {!upToSmall && <Trans>Reset</Trans>}
         </StyledButton>

diff --git a/src/pages/TrueSightV2/components/TokenOverview.tsx b/src/pages/TrueSightV2/components/TokenOverview.tsx
@@ -659,7 +659,7 @@ export const TokenOverview = ({ data, isLoading }: { data?: IAssetOverview; isLo
         isOpen={showShare}
         onClose={() => setShowShare(false)}
         content={mobileMode => <KyberScoreShareContent token={data} mobileMode={mobileMode} />}
-        title="Kyberscore"
+        title="KyberScore"
         onShareClick={social =>
           mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SHARE_TOKEN_CLICK, {
             token_name: data?.symbol?.toUpperCase(),

diff --git a/src/pages/TrueSightV2/components/shareContent/TokenAnalysisListShareContent.tsx b/src/pages/TrueSightV2/components/shareContent/TokenAnalysisListShareContent.tsx
@@ -21,7 +21,7 @@ const mapTypeTitle = {
   [KyberAIListType.TRENDING_SOON]: t`Trending Soon Tokens`,
   [KyberAIListType.TRENDING]: t`Top Trending Tokens`,
   [KyberAIListType.FUNDING_RATE]: t`Funding Rates`,
-  [KyberAIListType.KYBERSWAP_DELTA]: t`Kyberscore Delta`,
+  [KyberAIListType.KYBERSWAP_DELTA]: t`KyberScore Delta`,
 }
 
 export default function TokenAnalysisListShareContent({

diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx
@@ -728,7 +728,7 @@ export const WidgetTable = ({
               <Trans>Token</Trans>
             </th>
             <th>
-              <Trans>Kyberscore</Trans>
+              <Trans>KyberScore</Trans>
             </th>
             <th>
               <Trans>Price | 24 Change</Trans>
@@ -1061,7 +1061,7 @@ export const TokenListInShareModalTable = ({
           </th>
           {!mobileMode && (
             <th>
-              <Trans>Kyberscore</Trans>
+              <Trans>KyberScore</Trans>
             </th>
           )}
         </tr>

diff --git a/src/pages/TrueSightV2/hooks/useRenderRankingList.tsx b/src/pages/TrueSightV2/hooks/useRenderRankingList.tsx
@@ -253,7 +253,7 @@ const renderByColumnType: Record<
                 delay={200}
               >
                 <TextDotted>
-                  <Trans>Kyberscore</Trans>
+                  <Trans>KyberScore</Trans>
                 </TextDotted>
               </SimpleTooltip>
               <Text as="small" fontSize={'10px'} sx={{ textTransform: 'none' }}>
@@ -398,7 +398,7 @@ const renderByColumnType: Record<
     tableHeader: ({ sortInfo, onChangeSort }) => (
       <TableHeaderCell sortable onClick={() => onChangeSort?.(SORT_FIELD.KYBER_SCORE_DELTA)}>
         <Row justify="flex-start" gap="4px">
-          <Trans>Kyberscore Delta</Trans>
+          <Trans>KyberScore Delta</Trans>
           <SortArrow type={SORT_FIELD.KYBER_SCORE_DELTA} sortInfo={sortInfo} />
         </Row>
       </TableHeaderCell>

diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -295,7 +295,7 @@ const tokenTypeList: {
   },
   {
     type: KyberAIListType.KYBERSWAP_DELTA,
-    title: t`Kyberscore Delta`,
+    title: t`KyberScore Delta`,
     icon: 'bearish',
     tooltip: theme => (
       <span>