From 4201d6ffc9f3aad6a0be0d8e9132ca395df973f3 Mon Sep 17 00:00:00 2001 From: Danh Date: Fri, 5 Aug 2022 13:59:35 +0700 Subject: [PATCH 1/5] fix bug blur --- src/components/swapv2/PairSuggestion/index.tsx | 6 +++--- src/state/application/hooks.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/swapv2/PairSuggestion/index.tsx b/src/components/swapv2/PairSuggestion/index.tsx index 7d9754e27a..f19657c8d9 100644 --- a/src/components/swapv2/PairSuggestion/index.tsx +++ b/src/components/swapv2/PairSuggestion/index.tsx @@ -3,7 +3,7 @@ import { t } from '@lingui/macro' import { debounce } from 'lodash' import { stringify } from 'qs' import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react' -import { BrowserView, MobileView, isMobile } from 'react-device-detect' +import { BrowserView, MobileView, isIOS, isMobile } from 'react-device-detect' import { useHistory } from 'react-router-dom' import styled from 'styled-components' @@ -91,7 +91,7 @@ export default forwardRef(function PairSuggestionIn const input = refInput.current if (!input) return input.focus() - input?.setSelectionRange(searchQuery.length, searchQuery.length) // fix focus input cursor at front (ios) + if (isIOS) input?.setSelectionRange(searchQuery.length, searchQuery.length) // fix focus input cursor at front (ios) } const searchSuggestionPair = (keyword = '') => { @@ -219,7 +219,7 @@ export default forwardRef(function PairSuggestionIn const fromToken = findToken(item.tokenIn) const toToken = findToken(item.tokenOut) onSelectSuggestedPair(fromToken, toToken, suggestedAmount) - setIsShowListPair(false) + hideListView() } useImperativeHandle(ref, () => ({ diff --git a/src/state/application/hooks.ts b/src/state/application/hooks.ts index d96c9ca825..99e5135664 100644 --- a/src/state/application/hooks.ts +++ b/src/state/application/hooks.ts @@ -144,7 +144,7 @@ export enum NotificationType { export const useNotify = () => { const addPopup = useAddPopup() return useCallback( - (data: PopupContentSimple, removeAfterMs = 3000) => { + (data: PopupContentSimple, removeAfterMs = 4000) => { addPopup(data, PopupType.SIMPLE, data.title, removeAfterMs) }, [addPopup], From aa0301a1fb22d5d9e17d1a5a23327e1897466132 Mon Sep 17 00:00:00 2001 From: Danh Date: Fri, 5 Aug 2022 14:43:30 +0700 Subject: [PATCH 2/5] fix issue blur --- src/components/swapv2/PairSuggestion/SearchInput.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/swapv2/PairSuggestion/SearchInput.tsx b/src/components/swapv2/PairSuggestion/SearchInput.tsx index 9c3b2922fa..0e769c772b 100644 --- a/src/components/swapv2/PairSuggestion/SearchInput.tsx +++ b/src/components/swapv2/PairSuggestion/SearchInput.tsx @@ -109,7 +109,13 @@ export default forwardRef(function SearchComponent( ref={ref} hasBorder={hasBorder} onBlur={onBlurInput} - onClick={showListViewWithTracking} + onFocus={ + disabled + ? () => { + // + } + : showListViewWithTracking + } placeholder={t`You can try "10 ETH to KNC"`} value={value} onChange={onChange} From 1160a1daefae74957bf938d534b814f75e508868 Mon Sep 17 00:00:00 2001 From: Danh Date: Fri, 5 Aug 2022 15:22:48 +0700 Subject: [PATCH 3/5] fix result too old typing --- src/components/swapv2/PairSuggestion/index.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/swapv2/PairSuggestion/index.tsx b/src/components/swapv2/PairSuggestion/index.tsx index f19657c8d9..1a43a29ce5 100644 --- a/src/components/swapv2/PairSuggestion/index.tsx +++ b/src/components/swapv2/PairSuggestion/index.tsx @@ -94,13 +94,18 @@ export default forwardRef(function PairSuggestionIn if (isIOS) input?.setSelectionRange(searchQuery.length, searchQuery.length) // fix focus input cursor at front (ios) } + const refKeywordSearching = useRef('') const searchSuggestionPair = (keyword = '') => { + refKeywordSearching.current = keyword reqGetSuggestionPair(chainId, account, keyword) .then(({ recommendedPairs = [], favoritePairs = [], amount }) => { - setSuggestions(findLogoAndSortPair(activeTokens, recommendedPairs, chainId)) - setListFavorite(findLogoAndSortPair(activeTokens, favoritePairs, chainId)) - setSuggestedAmount(amount || '') - if (!keyword) setTotalFavoritePair(favoritePairs.length) + // make sure same query when typing too fast + if (refKeywordSearching.current === keyword) { + setSuggestions(findLogoAndSortPair(activeTokens, recommendedPairs, chainId)) + setListFavorite(findLogoAndSortPair(activeTokens, favoritePairs, chainId)) + setSuggestedAmount(amount || '') + if (!keyword) setTotalFavoritePair(favoritePairs.length) + } }) .catch(e => { console.log(e) From 437cced86a59b402025cff571d87fb93c3fc9b67 Mon Sep 17 00:00:00 2001 From: Danh Date: Fri, 5 Aug 2022 15:50:59 +0700 Subject: [PATCH 4/5] reduce time debounce --- src/components/swapv2/PairSuggestion/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/swapv2/PairSuggestion/index.tsx b/src/components/swapv2/PairSuggestion/index.tsx index 1a43a29ce5..622f6ddd54 100644 --- a/src/components/swapv2/PairSuggestion/index.tsx +++ b/src/components/swapv2/PairSuggestion/index.tsx @@ -115,7 +115,7 @@ export default forwardRef(function PairSuggestionIn keyword && mixpanelHandler(MIXPANEL_TYPE.TAS_TYPING_KEYWORD, keyword) } - const searchDebounce = useCallback(debounce(searchSuggestionPair, 300), [chainId, account]) + const searchDebounce = useCallback(debounce(searchSuggestionPair, 100), [chainId, account]) const notify = useNotify() const addToFavorite = (item: SuggestionPairData) => { focusInput() From de0f5a9305d6bd48b9b5f977fc7d727be2f6245f Mon Sep 17 00:00:00 2001 From: Danh Date: Fri, 5 Aug 2022 16:01:23 +0700 Subject: [PATCH 5/5] update fb --- src/components/swapv2/PairSuggestion/SearchInput.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/swapv2/PairSuggestion/SearchInput.tsx b/src/components/swapv2/PairSuggestion/SearchInput.tsx index 0e769c772b..1f10eaf3a3 100644 --- a/src/components/swapv2/PairSuggestion/SearchInput.tsx +++ b/src/components/swapv2/PairSuggestion/SearchInput.tsx @@ -109,13 +109,7 @@ export default forwardRef(function SearchComponent( ref={ref} hasBorder={hasBorder} onBlur={onBlurInput} - onFocus={ - disabled - ? () => { - // - } - : showListViewWithTracking - } + onFocus={disabled ? undefined : showListViewWithTracking} placeholder={t`You can try "10 ETH to KNC"`} value={value} onChange={onChange}