From 7368e0d0e64319b28445653047d27ee47ca48683 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Thu, 5 Oct 2023 23:47:23 +0700
Subject: [PATCH 1/6] refactor

---
 src/components/SelectV2.tsx                   |  2 +-
 .../MultipleChainSelectV2/index.tsx           | 24 +++++++++++++++++--
 .../components/TokenFilter/index.tsx          |  7 +++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/SelectV2.tsx b/src/components/SelectV2.tsx
index 60e8d4ae92..e3c80c182b 100644
--- a/src/components/SelectV2.tsx
+++ b/src/components/SelectV2.tsx
@@ -159,7 +159,7 @@ function Select({
   })
 
   const updateCallback = useCallback(() => {
-    update && update()
+    update?.()
   }, [update])
 
   useInterval(updateCallback, showMenu ? 100 : null)
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
index 3b9b3f6bc9..49200680b6 100644
--- a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
+++ b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
@@ -1,7 +1,7 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { rgba } from 'polished'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useRef, useState } from 'react'
 import { Box, Flex, Text } from 'rebass'
 import styled, { CSSProperties } from 'styled-components'
 
@@ -78,6 +78,20 @@ 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])
+
   return (
     <Select
       className={className}
@@ -146,7 +160,13 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
                 padding: '10px 18px',
               }}
             >
-              <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} />
diff --git a/src/pages/TrueSightV2/components/TokenFilter/index.tsx b/src/pages/TrueSightV2/components/TokenFilter/index.tsx
index 46538fe277..b67c552753 100644
--- 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;
+    }
   `}
 `
 
@@ -219,7 +224,7 @@ export default function TokenFilter({
 
   return (
     <StyledWrapper>
-      <SelectGroup style={{ overflowX: 'scroll' }}>
+      <SelectGroup>
         {showLoading ? (
           new Array(isWatchlistTab ? 5 : 4)
             .fill(0)

From e681a30568e275887544e0cd4efc77106efb0700 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Fri, 6 Oct 2023 00:26:40 +0700
Subject: [PATCH 2/6] fix bugs can not reset filter

---
 src/components/SelectV2.tsx                   |  3 +
 .../MultipleChainSelectV2/index.tsx           | 59 ++++++++++---------
 .../components/TokenFilter/index.tsx          |  8 ++-
 3 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/components/SelectV2.tsx b/src/components/SelectV2.tsx
index e3c80c182b..36bbab6504 100644
--- a/src/components/SelectV2.tsx
+++ b/src/components/SelectV2.tsx
@@ -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)
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
index 49200680b6..6be07bb188 100644
--- 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, useEffect, useRef, 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 }))
@@ -92,20 +102,26 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
       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 {
@@ -116,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}
@@ -128,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>
         )
@@ -153,11 +160,13 @@ 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
@@ -172,23 +181,15 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
                 <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
index b67c552753..6c8c4c27ef 100644
--- a/src/pages/TrueSightV2/components/TokenFilter/index.tsx
+++ b/src/pages/TrueSightV2/components/TokenFilter/index.tsx
@@ -174,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],
@@ -268,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>

From 8af43ba5d505da43a6636c93a652b73c3b4a9e09 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Fri, 6 Oct 2023 00:32:57 +0700
Subject: [PATCH 3/6] chore typo

---
 src/pages/TrueSightV2/components/TokenOverview.tsx            | 2 +-
 .../components/shareContent/TokenAnalysisListShareContent.tsx | 2 +-
 src/pages/TrueSightV2/components/table/index.tsx              | 4 ++--
 src/pages/TrueSightV2/hooks/useRenderRankingList.tsx          | 4 ++--
 src/pages/TrueSightV2/pages/TokenAnalysisList.tsx             | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/TrueSightV2/components/TokenOverview.tsx b/src/pages/TrueSightV2/components/TokenOverview.tsx
index 6704b2187c..7f6530bd10 100644
--- 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
index 3ddc233314..3f902a72f4 100644
--- 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
index f013cbc168..89fc194608 100644
--- 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
index aec0a0a3bf..b4be1713a2 100644
--- 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
index c9cd5bd42e..14f342330e 100644
--- 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>

From 98c7eaed5f0d110cb0634b7bf207c067b67ae1c5 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Fri, 6 Oct 2023 09:31:39 +0700
Subject: [PATCH 4/6] env

---
 .github/workflows/pr.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
index e19ada6545..3e5a39a3df 100644
--- a/.github/workflows/pr.yaml
+++ b/.github/workflows/pr.yaml
@@ -114,7 +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

From 936ba38154e4823aa3d15d7d1c98ba6099d66566 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Fri, 6 Oct 2023 10:05:00 +0700
Subject: [PATCH 5/6] css

---
 src/components/SelectV2.tsx     | 2 +-
 src/hooks/useOnClickOutside.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectV2.tsx b/src/components/SelectV2.tsx
index 36bbab6504..ea18a5b388 100644
--- 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 }
 
diff --git a/src/hooks/useOnClickOutside.tsx b/src/hooks/useOnClickOutside.tsx
index c2e36f9218..e11b3985f2 100644
--- 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)

From f13a8691e7bd232b67cba0f78f01d5f4a057cd53 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Fri, 6 Oct 2023 10:26:14 +0700
Subject: [PATCH 6/6] revert env

---
 .github/workflows/pr.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
index 3e5a39a3df..e19ada6545 100644
--- a/.github/workflows/pr.yaml
+++ b/.github/workflows/pr.yaml
@@ -114,7 +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-dev
+        run: yarn build-prod
 
 
       - name: Docker build and push