fix: setting menu is blinking when clicked

package.json

@@ -200,6 +200,7 @@
   },
   "resolutions": {
     "@kyberswap/ks-sdk-core": "1.0.11",
+    "babel-plugin-lodash/@babel/types": "~7.20.0",
     "react-error-overlay": "6.0.9",
     "@lingui/babel-plugin-extract-messages": "3.14.0",
     "@lingui/cli": "3.14.0",

src/components/swapv2/SwapSettingsPanel/index.tsx

@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
-import React, { useRef, useState } from 'react'
+import React, { RefObject, useRef, useState } from 'react'
 import { ChevronLeft } from 'react-feather'
 import { Box, Flex, Text } from 'rebass'
 import styled from 'styled-components'
@@ -36,6 +36,7 @@ type Props = {
   isLimitOrder?: boolean
   isSwapPage?: boolean
   isCrossChainPage?: boolean
+  swapActionsRef: RefObject<HTMLDivElement>
 }
 
 const BackText = styled.span`
@@ -52,6 +53,7 @@ const SettingsPanel: React.FC<Props> = ({
   onBack,
   onClickLiquiditySources,
   onClickGasPriceTracker,
+  swapActionsRef,
 }) => {
   const theme = useTheme()
 
@@ -83,7 +85,7 @@ const SettingsPanel: React.FC<Props> = ({
   const [showConfirmation, setShowConfirmation] = useState(false)
 
   const containerRef = useRef<HTMLDivElement>(null)
-  useOnClickOutside(containerRef, () => !showConfirmation && onBack())
+  useOnClickOutside([containerRef, swapActionsRef], () => !showConfirmation && onBack())
 
   return (
     <Box width="100%" className={className} id={TutorialIds.TRADING_SETTING_CONTENT} ref={containerRef}>

src/hooks/useOnClickOutside.tsx

@@ -2,17 +2,18 @@ import { RefObject, useEffect, useRef } from 'react'
 import { isMobile } from 'react-device-detect'
 
 export function useOnClickOutside<T extends HTMLElement>(
-  node: RefObject<T | undefined>,
+  node: RefObject<T | undefined> | RefObject<T | undefined>[],
   handler: undefined | (() => void),
 ) {
   const handlerRef = useRef<undefined | (() => void)>(handler)
-  useEffect(() => {
-    handlerRef.current = handler
-  }, [handler])
+  handlerRef.current = handler
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent | TouchEvent) => {
-      if (node.current?.contains(e.target as Node) ?? false) {
+      let nodes: RefObject<T | undefined>[]
+      if (Array.isArray(node)) nodes = node
+      else nodes = [node]
+      if (nodes.some(node => node.current?.contains(e.target as Node) ?? false)) {
         return
       }
       if (handlerRef.current) handlerRef.current()

src/pages/SwapV2/index.tsx

@@ -416,6 +416,7 @@ export default function Swap() {
   const tradeRouteComposition = useMemo(() => {
     return getTradeComposition(chainId, trade?.inputAmount, trade?.tokens, trade?.swaps, defaultTokens)
   }, [chainId, defaultTokens, trade])
+  const swapActionsRef = useRef(null)
 
   return (
     <>
@@ -429,7 +430,7 @@ export default function Swap() {
         <Banner />
         <Container>
           <SwapFormWrapper isShowTutorial={isShowTutorial}>
-            <Header activeTab={activeTab} setActiveTab={setActiveTab} />
+            <Header activeTab={activeTab} setActiveTab={setActiveTab} swapActionsRef={swapActionsRef} />
 
             <AppBodyWrapped data-highlight={shouldHighlightSwapBox} id={TutorialIds.SWAP_FORM}>
               {activeTab === TAB.SWAP && (
@@ -735,6 +736,7 @@ export default function Swap() {
               {activeTab === TAB.INFO && <TokenInfoTab currencies={currencies} onBack={onBackToSwapTab} />}
               {activeTab === TAB.SETTINGS && (
                 <SettingsPanel
+                  swapActionsRef={swapActionsRef}
                   isSwapPage
                   onBack={onBackToSwapTab}
                   onClickLiquiditySources={() => setActiveTab(TAB.LIQUIDITY_SOURCES)}

src/pages/SwapV3/Header.tsx

@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { Dispatch, RefObject, SetStateAction, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components'
@@ -24,9 +24,11 @@ const DegenBanner = styled(RowBetween)`
 export default function Header({
   activeTab,
   setActiveTab,
+  swapActionsRef,
 }: {
   activeTab: TAB
   setActiveTab: Dispatch<SetStateAction<TAB>>
+  swapActionsRef: RefObject<HTMLDivElement>
 }) {
   const theme = useTheme()
   const [isDegenMode] = useDegenModeManager()
@@ -41,7 +43,7 @@ export default function Header({
       <ColumnCenter gap="sm">
         <RowBetween>
           <Tabs activeTab={activeTab} />
-          <HeaderRightMenu activeTab={activeTab} setActiveTab={setActiveTab} />
+          <HeaderRightMenu activeTab={activeTab} setActiveTab={setActiveTab} swapActionsRef={swapActionsRef} />
         </RowBetween>
         <RowBetween>
           <Text fontSize={12} color={theme.subText}>

src/pages/SwapV3/HeaderRightMenu.tsx

@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { Dispatch, RefObject, SetStateAction, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { MoreHorizontal } from 'react-feather'
 import { useLocation } from 'react-router-dom'
@@ -61,9 +61,11 @@ const TransactionSettingsIconWrapper = styled.span`
 export default function HeaderRightMenu({
   activeTab,
   setActiveTab,
+  swapActionsRef,
 }: {
   activeTab: TAB
   setActiveTab: Dispatch<SetStateAction<TAB>>
+  swapActionsRef: RefObject<HTMLDivElement>
 }) {
   const theme = useTheme()
 
@@ -96,7 +98,12 @@ export default function HeaderRightMenu({
   const isShowMenu = Boolean(isShowHeaderMenu || forceShowMenu)
 
   return (
-    <SwapFormActions onMouseEnter={onMouseEnterMenu} onMouseLeave={onMouseLeaveMenu} isShowHeaderMenu={isShowMenu}>
+    <SwapFormActions
+      ref={swapActionsRef}
+      onMouseEnter={onMouseEnterMenu}
+      onMouseLeave={onMouseLeaveMenu}
+      isShowHeaderMenu={isShowMenu}
+    >
       <ActionPanel>
         {isShowMenu && (
           <>

src/pages/SwapV3/index.tsx

@@ -205,6 +205,7 @@ export default function Swap() {
   const tradeRouteComposition = useMemo(() => {
     return getTradeComposition(chainId, routeSummary?.parsedAmountIn, undefined, routeSummary?.route, defaultTokens)
   }, [chainId, defaultTokens, routeSummary])
+  const swapActionsRef = useRef(null)
 
   return (
     <>
@@ -218,7 +219,7 @@ export default function Swap() {
         <Banner />
         <Container>
           <SwapFormWrapper isShowTutorial={isShowTutorial}>
-            <Header activeTab={activeTab} setActiveTab={setActiveTab} />
+            <Header activeTab={activeTab} setActiveTab={setActiveTab} swapActionsRef={swapActionsRef} />
 
             {(isLimitPage || isSwapPage) && !TYPE_AND_SWAP_NOT_SUPPORTED_CHAINS.includes(chainId) && (
               <PairSuggestion
@@ -251,6 +252,7 @@ export default function Swap() {
                   onBack={onBackToSwapTab}
                   onClickLiquiditySources={() => setActiveTab(TAB.LIQUIDITY_SOURCES)}
                   onClickGasPriceTracker={() => setActiveTab(TAB.GAS_PRICE_TRACKER)}
+                  swapActionsRef={swapActionsRef}
                 />
               )}
               {activeTab === TAB.GAS_PRICE_TRACKER && (

yarn.lock

@@ -372,16 +372,16 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-string-parser@^7.19.4", "@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-string-parser@^7.21.5":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
   integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
 
-"@babel/helper-string-parser@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
-  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
-
 "@babel/helper-validator-identifier@^7.16.7", "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
@@ -662,13 +662,13 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.0.0-beta.49":
-  version "7.22.17"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.17.tgz#f753352c4610ffddf9c8bc6823f9ff03e2303eee"
-  integrity sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg==
+"@babel/types@^7.0.0-beta.49", "@babel/types@~7.20.0":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
+  integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
   dependencies:
-    "@babel/helper-string-parser" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.15"
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
 "@babel/types@^7.11.5", "@babel/types@^7.17.0", "@babel/types@^7.18.6", "@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.4", "@babel/types@^7.21.5", "@babel/types@^7.22.0", "@babel/types@^7.22.3":