Merge remote-tracking branch 'origin/main' into update-kyberai-banner

.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
         uses: docker/build-push-action@v2

src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx → src/components/Select/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,

src/pages/MyEarnings/MultipleChainSelectV2/index.tsx → src/components/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' }}
+      style={style}
       activeRender={_ => <SelectButton {...props} />}
       options={options}
       optionStyle={{ padding: 0 }}

src/components/SelectV2.tsx → src/components/Select/index.tsx

@@ -1,12 +1,14 @@
+import { Placement } from '@popperjs/core'
 import { Portal } from '@reach/portal'
 import { AnimatePresence, motion } from 'framer-motion'
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react'
 import { usePopper } from 'react-popper'
 import styled from 'styled-components'
 
+import { Z_INDEXS } from 'constants/styles'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 
-import { DropdownArrowIcon } from './ArrowRotate'
+import { DropdownArrowIcon } from '../ArrowRotate'
 
 const SelectWrapper = styled.div`
   cursor: pointer;
@@ -79,6 +81,7 @@ function Select({
   arrowColor,
   dropdownRender,
   onHideMenu,
+  placement = 'bottom',
 }: {
   value?: string | number
   className?: string
@@ -92,6 +95,7 @@ function Select({
   onChange?: (value: any) => void
   forceMenuPlacementTop?: boolean
   arrowColor?: string
+  placement?: string
   onHideMenu?: () => void // hide without changes
 }) {
   const [selected, setSelected] = useState(getOptionValue(options?.[0]))
@@ -103,17 +107,13 @@ function Select({
     setSelected(findValue || getOptionValue(options?.[0]))
   }, [selectedValue, options])
 
-  useEffect(() => {
-    if (!refMenu?.current) return
-  }, [showMenu, menuPlacementTop])
   const ref = useRef<HTMLDivElement>(null)
 
   useOnClickOutside(ref, () => {
     setShowMenu(false)
     onHideMenu?.()
   })
   const selectedInfo = options.find(item => getOptionValue(item) === selected)
-  const refMenu = useRef<HTMLDivElement>(null)
 
   const renderMenu = () => {
     return options.map(item => {
@@ -145,7 +145,7 @@ function Select({
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
 
   const { styles } = usePopper(ref.current, popperElement, {
-    placement: 'bottom',
+    placement: placement as Placement,
     strategy: 'fixed',
     modifiers: [{ name: 'offset', options: { offset: defaultOffset } }],
   })
@@ -155,7 +155,7 @@ function Select({
       ref={ref}
       role="button"
       onClick={() => {
-        setShowMenu(true)
+        setShowMenu(v => !v)
       }}
       style={style}
       className={className}
@@ -166,19 +166,19 @@ function Select({
         {showMenu && (
           <Portal>
             <div
-              ref={setPopperElement as any}
+              ref={setPopperElement}
               style={{
                 ...styles.popper,
                 ...(menuPlacementTop ? { bottom: 40, top: 'unset' } : {}),
-                zIndex: 1,
+                zIndex: Z_INDEXS.POPOVER_CONTAINER,
               }}
             >
               <SelectMenu
                 initial={{ y: -10, opacity: 0 }}
                 animate={{ y: 0, opacity: 1 }}
                 exit={{ y: -10, opacity: 0 }}
                 transition={{ duration: 0.1 }}
-                style={{ ...menuStyle }}
+                style={menuStyle}
               >
                 <div>{dropdownRender ? dropdownRender(renderMenu()) : renderMenu()}</div>
               </SelectMenu>

src/components/swapv2/LimitOrder/ExpirePicker.tsx

@@ -132,11 +132,10 @@ export default function DateTimePicker({
     menuStyle: {
       height: 250,
       overflow: 'scroll',
-      top: 'unset',
-      right: 'unset',
       textAlign: 'center',
       width: 'fit-content',
     } as CSSProperties,
+    placement: 'left',
   }
 
   const expireResult = defaultExpire ? Date.now() + defaultExpire * 1000 : date

src/pages/MyEarnings/ChainSelect.tsx

@@ -6,6 +6,7 @@ import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { ButtonOutlined } from 'components/Button'
+import MultipleChainSelect from 'components/Select/MultipleChainSelect'
 import {
   COMING_SOON_NETWORKS_FOR_MY_EARNINGS,
   COMING_SOON_NETWORKS_FOR_MY_EARNINGS_CLASSIC,
@@ -16,7 +17,6 @@ import { VERSION } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
-import MultipleChainSelect from 'pages/MyEarnings/MultipleChainSelect'
 import { AppState } from 'state'
 import { useAppSelector } from 'state/hooks'
 import { selectChains } from 'state/myEarnings/actions'