From f1ec21023382b16af139afdcb9211b46122f0923 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?=
 <33005392+nguyenhoaidanh@users.noreply.github.com>
Date: Thu, 5 Oct 2023 19:12:35 +0700
Subject: [PATCH] fix: field is not consistnece (#2277)

* fix: field is not consistnece
* add option all chains
* update css
---
 .../MultipleChainSelectV2/ApplyButton.tsx     |  54 ++++
 .../MultipleChainSelectV2/PopoverBody.tsx     | 257 ------------------
 .../MultipleChainSelectV2/SelectButton.tsx    |  14 +-
 .../MultipleChainSelectV2/index.tsx           |  88 +++++-
 .../TrueSightV2/hooks/useKyberAIData.tsx      |   7 +
 5 files changed, 137 insertions(+), 283 deletions(-)
 create mode 100644 src/pages/MyEarnings/MultipleChainSelectV2/ApplyButton.tsx
 delete mode 100644 src/pages/MyEarnings/MultipleChainSelectV2/PopoverBody.tsx

diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/ApplyButton.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/ApplyButton.tsx
new file mode 100644
index 0000000000..4e30dd2aa0
--- /dev/null
+++ b/src/pages/MyEarnings/MultipleChainSelectV2/ApplyButton.tsx
@@ -0,0 +1,54 @@
+import { Trans } from '@lingui/macro'
+import { MouseEventHandler } from 'react'
+import { Flex } from 'rebass'
+
+import { ButtonPrimary } from 'components/Button'
+import useTheme from 'hooks/useTheme'
+
+type ApplyButtonProps = {
+  disabled: boolean
+  onClick: MouseEventHandler<HTMLButtonElement>
+  numOfChains: number
+}
+
+export const ApplyButton: React.FC<ApplyButtonProps> = ({ disabled, onClick, numOfChains }) => {
+  const theme = useTheme()
+  return (
+    <ButtonPrimary
+      disabled={disabled}
+      style={{
+        height: '40px',
+        padding: '0 12px',
+      }}
+      onClick={onClick}
+    >
+      <Flex
+        as="span"
+        sx={{
+          width: '100%',
+          display: 'inline-flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gap: '4px',
+        }}
+      >
+        <Trans>View Selected Chains</Trans>
+        <Flex
+          as="span"
+          sx={{
+            width: '22px',
+            height: '22px',
+            borderRadius: '999px',
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            background: disabled ? undefined : theme.darkText,
+            color: disabled ? theme.border : theme.primary,
+          }}
+        >
+          {numOfChains ? String(numOfChains).padStart(2, '0') : 0}
+        </Flex>
+      </Flex>
+    </ButtonPrimary>
+  )
+}
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/PopoverBody.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/PopoverBody.tsx
deleted file mode 100644
index ee24457ee5..0000000000
--- a/src/pages/MyEarnings/MultipleChainSelectV2/PopoverBody.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { rgba } from 'polished'
-import { MouseEventHandler, useEffect, useRef, useState } from 'react'
-import { Box, Flex, Text } from 'rebass'
-import styled from 'styled-components'
-
-import { ReactComponent as LogoKyber } from 'assets/svg/logo_kyber.svg'
-import { ButtonPrimary } from 'components/Button'
-import Checkbox from 'components/CheckBox'
-import { MouseoverTooltip } from 'components/Tooltip'
-import { NETWORKS_INFO } from 'constants/networks'
-import useChainsConfig from 'hooks/useChainsConfig'
-import useTheme from 'hooks/useTheme'
-
-import { MultipleChainSelectProps, StyledLogo } from '.'
-
-const ChainListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 180px;
-  overflow: auto;
-
-  /* width */
-  ::-webkit-scrollbar {
-    display: unset;
-    width: 8px;
-    border-radius: 999px;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 999px;
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => rgba(theme.subText, 0.4)};
-    border-radius: 999px;
-  }
-`
-
-type ApplyButtonProps = {
-  disabled: boolean
-  onClick: MouseEventHandler<HTMLButtonElement>
-  numOfChains: number
-}
-
-export const ApplyButton: React.FC<ApplyButtonProps> = ({ disabled, onClick, numOfChains }) => {
-  const theme = useTheme()
-  return (
-    <ButtonPrimary
-      disabled={disabled}
-      style={{
-        height: '40px',
-        padding: '0 12px',
-      }}
-      onClick={onClick}
-    >
-      <Flex
-        as="span"
-        sx={{
-          width: '100%',
-          display: 'inline-flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          gap: '4px',
-        }}
-      >
-        <Trans>View Selected Chains</Trans>
-        <Flex
-          as="span"
-          sx={{
-            width: '22px',
-            height: '22px',
-            borderRadius: '999px',
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            background: disabled ? undefined : theme.darkText,
-            color: disabled ? theme.border : theme.primary,
-          }}
-        >
-          {numOfChains ? String(numOfChains).padStart(2, '0') : 0}
-        </Flex>
-      </Flex>
-    </ButtonPrimary>
-  )
-}
-
-const PopoverBody: React.FC<MultipleChainSelectProps & { onClose: () => void }> = ({
-  onClose,
-  comingSoonList = [],
-  chainIds,
-  selectedChainIds,
-  handleChangeChains,
-  onTracking,
-  menuStyle,
-}) => {
-  const theme = useTheme()
-  const selectAllRef = useRef<HTMLInputElement>(null)
-
-  const { activeChains } = useChainsConfig()
-  const selectedChains = selectedChainIds.filter(item => !comingSoonList.includes(item))
-
-  const [localSelectedChains, setLocalSelectedChains] = useState(() => selectedChains)
-
-  const networkList = chainIds.filter(
-    item => !comingSoonList.includes(item) && activeChains.some(e => e.chainId === item),
-  )
-
-  const isAllSelected = localSelectedChains.length === networkList.length
-
-  useEffect(() => {
-    setLocalSelectedChains(selectedChains)
-    // eslint-disable-next-line
-  }, [selectedChains.length])
-
-  useEffect(() => {
-    if (!selectAllRef.current) {
-      return
-    }
-
-    const indeterminate = 0 < localSelectedChains.length && localSelectedChains.length < networkList.length
-    selectAllRef.current.indeterminate = indeterminate
-  }, [localSelectedChains, networkList.length])
-
-  const allNetworks = [...networkList, ...comingSoonList]
-
-  const onChangeChain = () => {
-    if (isAllSelected) {
-      setLocalSelectedChains([])
-    } else {
-      onTracking?.()
-      setLocalSelectedChains(networkList)
-    }
-  }
-
-  return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        gap: '12px',
-        padding: '16px',
-        borderRadius: '20px',
-        background: theme.tableHeader,
-        width: '250px',
-        position: 'absolute',
-        top: 'calc(100% + 8px)',
-        right: '0',
-        ...menuStyle,
-      }}
-    >
-      <Flex
-        sx={{
-          alignItems: 'center',
-          gap: '8px',
-          padding: '4px',
-        }}
-      >
-        <Checkbox type="checkbox" checked={isAllSelected} ref={selectAllRef} onChange={onChangeChain} />
-
-        <Flex width="20px" alignItems="center" justifyContent="center">
-          <LogoKyber width="14px" height="auto" color={theme.primary} />
-        </Flex>
-
-        <Text
-          as="span"
-          sx={{
-            fontWeight: 500,
-            fontSize: '14px',
-            lineHeight: '20px',
-            color: theme.text,
-          }}
-        >
-          <Trans>All Chains</Trans>
-        </Text>
-      </Flex>
-
-      <ChainListWrapper>
-        {allNetworks.map((network, i) => {
-          const config = NETWORKS_INFO[network]
-
-          const isComingSoon = comingSoonList.includes(network)
-          const isSelected = isComingSoon ? false : localSelectedChains.includes(network)
-
-          const handleClick = () => {
-            if (isComingSoon) return
-            if (isSelected) {
-              setLocalSelectedChains(localSelectedChains.filter(chain => chain !== network))
-            } else {
-              setLocalSelectedChains([...localSelectedChains, network])
-            }
-          }
-
-          return (
-            <MouseoverTooltip
-              key={i}
-              text={isComingSoon ? 'Coming soon' : ''}
-              width="fit-content"
-              placement="top"
-              containerStyle={{ width: 'fit-content' }}
-            >
-              <Flex
-                onClick={handleClick}
-                sx={{
-                  alignItems: 'center',
-                  gap: '8px',
-                  padding: '4px',
-                  cursor: isComingSoon ? 'not-allowed' : 'pointer',
-                  userSelect: 'none',
-                  opacity: isComingSoon ? 0.6 : 1,
-                }}
-              >
-                <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>
-              </Flex>
-            </MouseoverTooltip>
-          )
-        })}
-      </ChainListWrapper>
-
-      <Box
-        sx={{
-          width: '100%',
-          height: '0',
-          borderBottom: `1px solid ${theme.border}`,
-        }}
-      />
-
-      <ApplyButton
-        disabled={!localSelectedChains.length}
-        onClick={() => {
-          handleChangeChains(localSelectedChains)
-          onClose()
-        }}
-        numOfChains={localSelectedChains.length}
-      />
-    </Flex>
-  )
-}
-
-export default PopoverBody
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx
index d96d28b34a..9c64e2af52 100644
--- a/src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx
+++ b/src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx
@@ -23,17 +23,8 @@ const Label = styled.span<{ labelColor?: string }>`
   overflow: hidden;
   text-overflow: ellipsis;
 `
-type Props = {
-  onClick: () => void
-} & MultipleChainSelectProps
-const SelectButton: React.FC<Props> = ({
-  onClick,
-  selectedChainIds,
-  chainIds,
-  activeRender,
-  activeStyle,
-  labelColor,
-}) => {
+type Props = MultipleChainSelectProps
+const SelectButton: React.FC<Props> = ({ selectedChainIds, chainIds, activeRender, activeStyle, labelColor }) => {
   const theme = useTheme()
 
   const renderButtonBody = () => {
@@ -88,7 +79,6 @@ const SelectButton: React.FC<Props> = ({
         cursor: 'pointer',
         ...activeStyle,
       }}
-      onClick={onClick}
     >
       {activeRender ? activeRender(renderButtonBody()) : renderButtonBody()}
     </Flex>
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
index a098609eec..3b9b3f6bc9 100644
--- a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
+++ b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
@@ -1,16 +1,19 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
-import { ReactNode, useRef, useState } from 'react'
+import { Trans } from '@lingui/macro'
+import { rgba } from 'polished'
+import { ReactNode, useState } from 'react'
 import { Box, Flex, Text } from 'rebass'
 import styled, { CSSProperties } from 'styled-components'
 
+import { ReactComponent as LogoKyber } from 'assets/svg/logo_kyber.svg'
 import Checkbox from 'components/CheckBox'
 import Select from 'components/SelectV2'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { NETWORKS_INFO } from 'constants/networks'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import useChainsConfig from 'hooks/useChainsConfig'
 import useTheme from 'hooks/useTheme'
 
-import { ApplyButton } from './PopoverBody'
+import { ApplyButton } from './ApplyButton'
 import SelectButton from './SelectButton'
 
 export const StyledLogo = styled.img`
@@ -31,25 +34,55 @@ export type MultipleChainSelectProps = {
   labelColor?: string
   activeRender?: (node: ReactNode) => ReactNode
 }
-const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, style, ...props }) => {
-  const [expanded, setExpanded] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
 
-  const collapse = () => {
-    setExpanded(false)
+const ChainWrapper = styled.div`
+  max-height: 180px;
+  overflow-y: scroll;
+  /* width */
+  ::-webkit-scrollbar {
+    display: unset;
+    width: 8px;
+    border-radius: 999px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 999px;
   }
 
-  useOnClickOutside(ref, expanded ? collapse : undefined)
-  const { comingSoonList = [], selectedChainIds = [], handleChangeChains } = props
-  const options = props.chainIds.map(id => ({ value: id, label: id }))
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => rgba(theme.subText, 0.4)};
+    border-radius: 999px;
+  }
+`
+const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, style, ...props }) => {
+  const { comingSoonList = [], selectedChainIds = [], handleChangeChains, chainIds = [], onTracking } = props
+  const options = chainIds.map(id => ({ value: id, label: id }))
   const theme = useTheme()
   const selectedChains = selectedChainIds.filter(item => !comingSoonList.includes(item))
   const [localSelectedChains, setLocalSelectedChains] = useState(() => selectedChains)
+  const { activeChains } = useChainsConfig()
+  const networkList = chainIds.filter(
+    item => !comingSoonList.includes(item) && activeChains.some(e => e.chainId === item),
+  )
+  const isAllSelected = localSelectedChains.length === networkList.length
+
+  const onChangeChain = () => {
+    if (isAllSelected) {
+      setLocalSelectedChains([])
+    } else {
+      onTracking?.()
+      setLocalSelectedChains(networkList)
+    }
+  }
+
   return (
     <Select
       className={className}
       style={{ ...style, flex: '0 0 150px', width: '150px', position: 'relative', zIndex: '3' }}
-      activeRender={_ => <SelectButton onClick={() => setExpanded(e => !e)} {...props} />}
+      activeRender={_ => <SelectButton {...props} />}
       options={options}
       optionRender={item => {
         const network = Number(item?.value) as ChainId
@@ -105,14 +138,41 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
       dropdownRender={menu => {
         return (
           <>
-            {menu}
+            <Flex
+              onClick={e => e.stopPropagation()}
+              sx={{
+                alignItems: 'center',
+                gap: '8px',
+                padding: '10px 18px',
+              }}
+            >
+              <Checkbox 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',
+                }}
+              >
+                <Trans>All Chains</Trans>
+              </Text>
+            </Flex>
+            <ChainWrapper>{menu}</ChainWrapper>
             <Box sx={{ margin: '10px 0', width: '100%', height: '0', borderBottom: `1px solid ${theme.border}` }} />
             <Flex padding={'0 22px'}>
               <ApplyButton
                 disabled={!localSelectedChains.length}
                 onClick={() => {
                   handleChangeChains(localSelectedChains)
-                  // onClose()
                 }}
                 numOfChains={localSelectedChains.length}
               />
diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
index 5337a535cf..e55a85ce3f 100644
--- a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
+++ b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
@@ -72,6 +72,13 @@ const kyberAIApi = createApi({
       }),
       transformResponse: (res: any) => {
         // If token is stablecoin remove its kyberscore value
+        if (res?.data?.kyberScore?.ks3d) {
+          res.data.kyberScore.ks3d = res?.data?.kyberScore?.ks3d.map((e: any) => ({
+            ...e,
+            kyberScore: e.kyber_score,
+            createdAt: e.created_at,
+          }))
+        }
         if (res.data && res.data.tags?.includes('stablecoin')) {
           return { ...res.data, kyberScore: { ks3d: null, label: '', score: 0 } }
         }