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] 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)