chore: remove old select (#2281)

KyberNetwork · Oct 6, 2023 · 7a6feb1 · 7a6feb1
1 parent 1293920
commit 7a6feb1
Show file tree

Hide file tree

Showing 20 changed files with 191 additions and 868 deletions.
diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -116,7 +116,6 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: yarn build-prod
 
-
       - name: Docker build and push
         uses: docker/build-push-action@v2
         with:

diff --git 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/Select.tsx b/src/components/Select.tsx
diff --git a/...ngs/MultipleChainSelectV2/ApplyButton.tsx → ...elect/MultipleChainSelect/ApplyButton.tsx b/...ngs/MultipleChainSelectV2/ApplyButton.tsx → ...elect/MultipleChainSelect/ApplyButton.tsx
diff --git a/...gs/MultipleChainSelectV2/SelectButton.tsx → ...lect/MultipleChainSelect/SelectButton.tsx b/...gs/MultipleChainSelectV2/SelectButton.tsx → ...lect/MultipleChainSelect/SelectButton.tsx
@@ -74,7 +74,6 @@ const SelectButton: React.FC<Props> = ({ selectedChainIds, chainIds, activeRende
         paddingRight: '8px',
         justifyContent: 'space-between',
         alignItems: 'center',
-        background: theme.background,
         userSelect: 'none',
         cursor: 'pointer',
         ...activeStyle,

diff --git a/...yEarnings/MultipleChainSelectV2/index.tsx → ...ents/Select/MultipleChainSelect/index.tsx b/...yEarnings/MultipleChainSelectV2/index.tsx → ...ents/Select/MultipleChainSelect/index.tsx
@@ -7,7 +7,7 @@ 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 Select from 'components/Select'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { NETWORKS_INFO } from 'constants/networks'
 import useChainsConfig from 'hooks/useChainsConfig'
@@ -67,6 +67,14 @@ const Label = styled.span`
   user-select: none;
 `
 
+const StyledSelect = styled(Select)`
+  flex: 0 0 150px;
+  width: 150px;
+  position: relative;
+  border-radius: 18px;
+  background-color: ${({ theme }) => theme.buttonGray};
+`
+
 const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, style, ...props }) => {
   const { comingSoonList = [], selectedChainIds = [], handleChangeChains, chainIds = [], onTracking } = props
   const options = chainIds.map(id => ({ value: id, label: id }))
@@ -107,10 +115,10 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
   }, [selectedChains])
 
   return (
-    <Select
+    <StyledSelect
       onHideMenu={onHideMenu}
       className={className}
-      style={{ ...style, flex: '0 0 150px', width: '150px', position: 'relative', zIndex: '3' }}
+      style={style}
       activeRender={_ => <SelectButton {...props} />}
       options={options}
       optionStyle={{ padding: 0 }}