From 25a613d22b00a304ebd97567386592fa5d9f23c6 Mon Sep 17 00:00:00 2001 From: Nam Nguyen Date: Mon, 18 Sep 2023 16:10:14 +0700 Subject: [PATCH 1/2] fix: setting menu is blinking when clicked --- package.json | 1 + .../swapv2/SwapSettingsPanel/index.tsx | 6 +++-- src/hooks/useOnClickOutside.tsx | 11 +++++----- src/pages/SwapV2/index.tsx | 3 ++- src/pages/SwapV3/Header.tsx | 6 +++-- src/pages/SwapV3/HeaderRightMenu.tsx | 11 ++++++++-- src/pages/SwapV3/index.tsx | 4 +++- yarn.lock | 22 +++++++++---------- 8 files changed, 40 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 6068a33852..b89d25bbf3 100644 --- a/package.json +++ b/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", diff --git a/src/components/swapv2/SwapSettingsPanel/index.tsx b/src/components/swapv2/SwapSettingsPanel/index.tsx index 5444727d8e..eb3caa2591 100644 --- a/src/components/swapv2/SwapSettingsPanel/index.tsx +++ b/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 } const BackText = styled.span` @@ -52,6 +53,7 @@ const SettingsPanel: React.FC = ({ onBack, onClickLiquiditySources, onClickGasPriceTracker, + swapActionsRef, }) => { const theme = useTheme() @@ -83,7 +85,7 @@ const SettingsPanel: React.FC = ({ const [showConfirmation, setShowConfirmation] = useState(false) const containerRef = useRef(null) - useOnClickOutside(containerRef, () => !showConfirmation && onBack()) + useOnClickOutside([containerRef, swapActionsRef], () => !showConfirmation && onBack()) return ( diff --git a/src/hooks/useOnClickOutside.tsx b/src/hooks/useOnClickOutside.tsx index 0debf94971..7a7fd7c35f 100644 --- a/src/hooks/useOnClickOutside.tsx +++ b/src/hooks/useOnClickOutside.tsx @@ -2,17 +2,18 @@ import { RefObject, useEffect, useRef } from 'react' import { isMobile } from 'react-device-detect' export function useOnClickOutside( - node: RefObject, + node: RefObject | RefObject[], handler: undefined | (() => void), ) { const handlerRef = useRef 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[] + 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() diff --git a/src/pages/SwapV2/index.tsx b/src/pages/SwapV2/index.tsx index 2d5596b157..4c3eafefc9 100644 --- a/src/pages/SwapV2/index.tsx +++ b/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() { -
+
{activeTab === TAB.SWAP && ( diff --git a/src/pages/SwapV3/Header.tsx b/src/pages/SwapV3/Header.tsx index 209f1aa908..6cf5e23fe8 100644 --- a/src/pages/SwapV3/Header.tsx +++ b/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> + swapActionsRef: RefObject }) { const theme = useTheme() const [isDegenMode] = useDegenModeManager() @@ -41,7 +43,7 @@ export default function Header({ - + diff --git a/src/pages/SwapV3/HeaderRightMenu.tsx b/src/pages/SwapV3/HeaderRightMenu.tsx index f3b9919690..f1f7fef228 100644 --- a/src/pages/SwapV3/HeaderRightMenu.tsx +++ b/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> + swapActionsRef: RefObject }) { const theme = useTheme() @@ -96,7 +98,12 @@ export default function HeaderRightMenu({ const isShowMenu = Boolean(isShowHeaderMenu || forceShowMenu) return ( - + {isShowMenu && ( <> diff --git a/src/pages/SwapV3/index.tsx b/src/pages/SwapV3/index.tsx index 6d6e456332..030d4b8600 100644 --- a/src/pages/SwapV3/index.tsx +++ b/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() { -
+
{(isLimitPage || isSwapPage) && !TYPE_AND_SWAP_NOT_SUPPORTED_CHAINS.includes(chainId) && ( setActiveTab(TAB.LIQUIDITY_SOURCES)} onClickGasPriceTracker={() => setActiveTab(TAB.GAS_PRICE_TRACKER)} + swapActionsRef={swapActionsRef} /> )} {activeTab === TAB.GAS_PRICE_TRACKER && ( diff --git a/yarn.lock b/yarn.lock index 2a94841cc8..28c71e35de 100644 --- a/yarn.lock +++ b/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": From 4d160b78990ec126d28da047f7323a8b6acfbe75 Mon Sep 17 00:00:00 2001 From: Nam Nguyen Date: Mon, 18 Sep 2023 16:47:00 +0700 Subject: [PATCH 2/2] fix build --- src/pages/SwapV2/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/SwapV2/index.tsx b/src/pages/SwapV2/index.tsx index 4c3eafefc9..953b827e33 100644 --- a/src/pages/SwapV2/index.tsx +++ b/src/pages/SwapV2/index.tsx @@ -736,6 +736,7 @@ export default function Swap() { {activeTab === TAB.INFO && } {activeTab === TAB.SETTINGS && ( setActiveTab(TAB.LIQUIDITY_SOURCES)}