From 973804947541cc0781f6fd347702d39bb93f19d0 Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 28 Mar 2022 21:50:27 +0800 Subject: [PATCH 1/6] fix: auto close dialog when lost focus --- .../SNSAdaptor/trending/TrendingPopper.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx index 3e525596bedc..8959fe4b7920 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx @@ -21,6 +21,7 @@ export function TrendingPopper(props: TrendingPopperProps) { const [type, setType] = useState() const [anchorEl, setAnchorEl] = useState(null) const [availableDataProviders, setAvailableDataProviders] = useState([]) + const popper = useRef(null) // #region select token and provider dialog could be open by trending view const onFreezed = useCallback((ev) => setFreezed(ev.open), []) @@ -60,6 +61,24 @@ export function TrendingPopper(props: TrendingPopperProps) { [anchorEl], ) + useEffect(() => { + let timeId: NodeJS.Timeout + const onMouseLeave = () => { + timeId = setTimeout(() => setAnchorEl(null), 1500) + } + const onMouseEnter = () => { + clearTimeout(timeId) + } + popper.current?.addEventListener('mouseleave', onMouseLeave) + popper.current?.addEventListener('mouseenter', onMouseEnter) + anchorEl?.addEventListener('mouseleave', onMouseLeave) + return () => { + popper.current?.removeEventListener('mouseleave', onMouseLeave) + popper.current?.removeEventListener('mouseenter', onMouseEnter) + anchorEl?.removeEventListener('mouseleave', onMouseLeave) + } + }, [popper.current, anchorEl]) + // close popper if location was changed const location = useLocation() useEffect(() => setAnchorEl(null), [location.state?.key, location.href]) @@ -85,6 +104,7 @@ export function TrendingPopper(props: TrendingPopperProps) { if (!freezed) setAnchorEl(null) }}> Date: Tue, 29 Mar 2022 16:32:30 +0800 Subject: [PATCH 2/6] fix: reply review --- .../SNSAdaptor/trending/TrendingPopper.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx index 8959fe4b7920..f9d7cfa0769e 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx @@ -13,6 +13,8 @@ export interface TrendingPopperProps { PopperProps?: Partial } +const TIMEOUT = 1500 + export function TrendingPopper(props: TrendingPopperProps) { const popperRef = useRef<{ update(): void } | null>(null) const [freezed, setFreezed] = useState(false) // disable any click @@ -22,6 +24,7 @@ export function TrendingPopper(props: TrendingPopperProps) { const [anchorEl, setAnchorEl] = useState(null) const [availableDataProviders, setAvailableDataProviders] = useState([]) const popper = useRef(null) + const [mouseIn, setMouseIn] = useState(false) // #region select token and provider dialog could be open by trending view const onFreezed = useCallback((ev) => setFreezed(ev.open), []) @@ -64,10 +67,12 @@ export function TrendingPopper(props: TrendingPopperProps) { useEffect(() => { let timeId: NodeJS.Timeout const onMouseLeave = () => { - timeId = setTimeout(() => setAnchorEl(null), 1500) + timeId = setTimeout(() => setAnchorEl(null), TIMEOUT) + setMouseIn(false) } const onMouseEnter = () => { clearTimeout(timeId) + setMouseIn(true) } popper.current?.addEventListener('mouseleave', onMouseLeave) popper.current?.addEventListener('mouseenter', onMouseEnter) @@ -89,11 +94,12 @@ export function TrendingPopper(props: TrendingPopperProps) { if (!anchorEl) return const { top } = anchorEl.getBoundingClientRect() if ( - top < 0 || // out off top bound - top > document.documentElement.clientHeight // out off bottom bound + (top < 0 || // out off top bound + top > document.documentElement.clientHeight) && // out off bottom bound + !mouseIn ) - setAnchorEl(null) - }, [anchorEl, Math.floor(position.y / 50)]) + setTimeout(() => setAnchorEl(null), TIMEOUT) + }, [anchorEl, Math.floor(position.y / 50), mouseIn]) // #endregion if (locked) return null From fe52b968c906dc48303dcca3fa4c8e999b9dd627 Mon Sep 17 00:00:00 2001 From: lelenei Date: Thu, 31 Mar 2022 20:57:38 +0800 Subject: [PATCH 3/6] fix: reply review --- .../src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx index f9d7cfa0769e..f0e02457072c 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx @@ -65,13 +65,10 @@ export function TrendingPopper(props: TrendingPopperProps) { ) useEffect(() => { - let timeId: NodeJS.Timeout const onMouseLeave = () => { - timeId = setTimeout(() => setAnchorEl(null), TIMEOUT) setMouseIn(false) } const onMouseEnter = () => { - clearTimeout(timeId) setMouseIn(true) } popper.current?.addEventListener('mouseleave', onMouseLeave) From 1bb96c70997f07470d898c3aad71b39a5aa07e59 Mon Sep 17 00:00:00 2001 From: lelenei Date: Sat, 2 Apr 2022 13:16:46 +0800 Subject: [PATCH 4/6] fix: reply review --- .../SNSAdaptor/trending/TrendingPopper.tsx | 33 +------------------ 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx index f0e02457072c..efec1a74f7df 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useRef, useCallback } from 'react' import { Popper, ClickAwayListener, PopperProps, Fade } from '@mui/material' -import { useLocation, useWindowScroll } from 'react-use' +import { useLocation } from 'react-use' import { PluginTraderMessages } from '../../messages' import { WalletMessages } from '../../../Wallet/messages' import type { TagType } from '../../types' @@ -64,41 +64,10 @@ export function TrendingPopper(props: TrendingPopperProps) { [anchorEl], ) - useEffect(() => { - const onMouseLeave = () => { - setMouseIn(false) - } - const onMouseEnter = () => { - setMouseIn(true) - } - popper.current?.addEventListener('mouseleave', onMouseLeave) - popper.current?.addEventListener('mouseenter', onMouseEnter) - anchorEl?.addEventListener('mouseleave', onMouseLeave) - return () => { - popper.current?.removeEventListener('mouseleave', onMouseLeave) - popper.current?.removeEventListener('mouseenter', onMouseEnter) - anchorEl?.removeEventListener('mouseleave', onMouseLeave) - } - }, [popper.current, anchorEl]) - // close popper if location was changed const location = useLocation() useEffect(() => setAnchorEl(null), [location.state?.key, location.href]) - // close popper if scroll out of visual screen - const position = useWindowScroll() - useEffect(() => { - if (!anchorEl) return - const { top } = anchorEl.getBoundingClientRect() - if ( - (top < 0 || // out off top bound - top > document.documentElement.clientHeight) && // out off bottom bound - !mouseIn - ) - setTimeout(() => setAnchorEl(null), TIMEOUT) - }, [anchorEl, Math.floor(position.y / 50), mouseIn]) - // #endregion - if (locked) return null if (!anchorEl || !type) return null return ( From 18f59cac7a89004f55d036c71f2c86d2f87e61fa Mon Sep 17 00:00:00 2001 From: lelenei Date: Wed, 6 Apr 2022 19:19:44 +0800 Subject: [PATCH 5/6] fix: tradeview position --- .../Trader/SNSAdaptor/trending/TrendingPopper.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx index 592953110ad5..27642f95a731 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useRef, useCallback } from 'react' import { Popper, ClickAwayListener, PopperProps, Fade } from '@mui/material' -import { useLocation } from 'react-use' +import { useLocation, useWindowScroll } from 'react-use' import { PluginTraderMessages } from '../../messages' import { WalletMessages } from '../../../Wallet/messages' import type { TagType } from '../../types' @@ -67,6 +67,17 @@ export function TrendingPopper(props: TrendingPopperProps) { const location = useLocation() useEffect(() => setAnchorEl(null), [location.state?.key, location.href]) + // close popper if scroll out of visual screen + const position = useWindowScroll() + useEffect(() => { + if (!popper.current) return + const { top, height } = popper.current?.getBoundingClientRect() + if ((top < 0 && -1 * top > height) || top > document.documentElement.clientHeight) + // out off bottom bound + setAnchorEl(null) + }, [popper, Math.floor(position.y / 50)]) + // #endregion + if (locked) return null if (!anchorEl || !type) return null return ( From 09def3ebc64818c51a735202e144d3757d27501a Mon Sep 17 00:00:00 2001 From: lelenei Date: Wed, 6 Apr 2022 20:39:16 +0800 Subject: [PATCH 6/6] fix: remove icon section --- packages/plugins/CrossChainBridge/src/base.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/plugins/CrossChainBridge/src/base.ts b/packages/plugins/CrossChainBridge/src/base.ts index b88adee59a7f..790a217a8f6e 100644 --- a/packages/plugins/CrossChainBridge/src/base.ts +++ b/packages/plugins/CrossChainBridge/src/base.ts @@ -4,7 +4,6 @@ import { languages } from './locales/languages' export const base: Plugin.Shared.Definition = { ID: PLUGIN_ID, - icon: '\u{1F9EA}', name: { fallback: PLUGIN_NAME }, description: { fallback: PLUGIN_DESCRIPTION }, publisher: { name: { fallback: '' }, link: '' },